eta_front/src/views/datasheet_manage/balanceSheetEdit.vue

<template>
  <div class="balance-sheet-detail-wrap">
    <noDataAuth class="no-auth-box" v-if="!excelInfo.HaveOperaAuth&&isView" :text="$t('MsgPrompt.no_sheet_auth')"/>
    <div class="wrap-top">
      <ul class="form-ul">
        <li>
          <el-input
            v-model="sheetForm.name"
            :placeholder="$t('OnlineExcelPage.please_table_name_ipt')"
            style="width: 200px"
            clearable
            :disabled="isView||isStaticTable"
          >
          </el-input>
        </li>
        <li>
          <el-cascader
            v-model="sheetForm.classify"
            :options="classifyArr"
            style="width: 120px"
            :props="{
              label: 'ExcelClassifyName',
              value: 'ExcelClassifyId',
              children: 'Children',
              emitPath: false,
              checkStrictly: true,
            }"
            :placeholder="$t('OnlineExcelPage.select_table_category')"
            :disabled="isView||isStaticTable"
          />
        </li>
        <li v-if="excelInfo.Button&&excelInfo.Button.OpWorkerButton">
          <el-cascader
            v-model="sheetForm.user"
            :options="userList"
            style="width: 120px"
            :show-all-levels="false"
            collapse-tags
            :props="{
              label: 'NodeName',
              value: 'NodeId',
              children: 'Children',
              multiple: true,
              emitPath: false,
              checkStrictly: false,
            }"
            clearable
            :placeholder="$t('OnlineExcelPage.Co_editor')"
            :disabled="isView||isStaticTable"
          />
        </li>
      </ul>
      <div class="form-ul">
        <span>{{ $t("BalanceSheet.version") }}</span>
        <el-select
          v-model="sheetForm.version"
          style="width: 90px; margin-right: 5px"
          @change="handleVersionChange"
        >
          <el-option
            v-for="item in versionOpts"
            :key="item.ExcelInfoId"
            :label="item.VersionName"
            :value="item.ExcelInfoId"
          ></el-option>
        </el-select>
        <!-- 存为静态表按钮 -->
        <el-button type="primary" @click="handleShowSaveStaticTable" v-if="!isView&&!isStaticTable">{{
          $t("BalanceSheet.save_static_table")
        }}</el-button>
        <!-- 静态表操作 -->
        <span v-if="!isView&&isStaticTable">
        <span
          class="editsty"
          @click="handleShowSaveStaticTable('rename')"
          style="margin-right: 10px"
          >{{$t('MyEtaPage.option_op_rename')}}</span
        >
        <span
          class="deletesty"
          @click="handleStaticTableDel"
          >{{$t("Table.delete_btn")}}</span
        >
        </span>
        <div>
          <el-tooltip effect="dark">
            <div
              slot="content"
              v-html="rules"
              style="line-height: 20px; width: 350px"
            ></div>
            <i class="el-icon-question" />
          </el-tooltip>
        </div>
      </div>
      <div>
        <span v-if="updateTime" style="color: #999999"
          >{{ $t("OnlineExcelPage.recent_save_time_info")
          }}{{ updateTime }}</span
        >
        <!-- 预览页面操作按钮 -->
        <template v-if="isView">
          <span
            class="editsty"
            @click="itemHandle(excelInfo, 'edit')"
            style="margin-right: 10px"
            v-if="isSheetBtnShow('edit')&&excelInfo.Button&&excelInfo.Button.OpButton"
            >{{excelInfo.CanEdit?$t("ETable.Btn.edit_btn"):excelInfo.Editor+$t('OnlineExcelPage.editing_msg')}}</span
          >
          <span
            class="editsty"
            @click="itemHandle(excelInfo, 'refresh')"
            style="margin-right: 10px"
            v-if="isSheetBtnShow('refresh')&&excelInfo.Button&&excelInfo.Button.RefreshButton"
            >{{ $t("ETable.Btn.refresh_btn") }}</span
          >
          <span
            class="editsty"
            @click="itemHandle(excelInfo, 'save')"
            style="margin-right: 10px"
            v-if="isSheetBtnShow('otherSave')&&excelInfo.Button&&excelInfo.Button.CopyButton"
            >{{ $t("ETable.Btn.save_as") }}</span
          >
          <span
            class="editsty"
            @click="itemHandle(excelInfo, 'download')"
            style="margin-right: 10px"
            v-if="isSheetBtnShow('download')&&excelInfo.HaveOperaAuth"
            >{{ $t("ETable.Btn.download_btn") }}</span
          >
          <span
            class="deletesty"
            @click="itemHandle(excelInfo, 'del')"
            style="margin-right: 10px"
            v-if="isSheetBtnShow('del')&&excelInfo.Button&&excelInfo.Button.DeleteButton"
            >{{ $t("Table.delete_btn") }}</span
          >
        </template>
        <el-button
          type="primary"
          size="medium"
          :loading="updating"
          @click="updateHandle"
          style="margin-left: 10px"
          v-if="!isView"
          >{{
            updating
              ? $t("ETable.Btn.renewing_btn")
              : $t("ETable.Btn.renew_btn")
          }}</el-button
        >
        <el-button
          type="primary"
          size="medium"
          @click="saveSheetHandle"
          style="margin-left: 10px"
          v-if="!isView"
          >{{ $t("ETable.Btn.save_btn") }}</el-button
        >
        <el-button type="primary" size="medium" plain @click="backHandle">{{
          $t("ETable.Btn.back_btn")
        }}</el-button>
      </div>
    </div>

    <BalanceTable 
      ref="balanceTableRef"
      :disabled="isView"
      :isStaticTable="isStaticTable"
    />

    <!-- 存为静态表弹窗 -->
    <el-dialog
      :visible.sync="showSaveStaticTable"
      :close-on-click-modal="false"
      :modal-append-to-body='false'
      :title="isStaticTable?$t('MyEtaPage.option_op_rename'):$t('OnlineExcelPage.save_static_table')"
      @close="showSaveStaticTable=false"
      custom-class="dialog"
      center
      width="500px"
      v-dialogDrag
    >
      <div style="text-align:center">
        <span>{{$t('OnlineExcelPage.static_table_version_name')}}</span>
        <el-input v-model="staticTableName" :placeholder="$t('OnlineExcelPage.save_static_table_tip')"></el-input>
      </div>
      <div class="dia-bot" style="text-align:center;padding:30px 0">
				<el-button type="primary" style="margin-right:20px" @click="createdStaticTable">{{$t('ETable.Btn.save_btn')}}</el-button>
				<el-button type="primary" plain @click="showSaveStaticTable=false">{{$t('ETable.Btn.cancel_btn')}}</el-button>
			</div>
    </el-dialog>

    <!-- 表格另存 -->
    <m-dialog
      :show.sync="isSaveOther"
      width="650px"
      :title="$t('ETable.Btn.save_as')"
      @close="cancelSaveOther"
    >
      <div style="padding-left: 80px">
        <el-form
          ref="formRef"
          label-position="left"
          hide-required-asterisk
          label-width="80px"
          :model="saveOtherForm"
          :rules="saveOtherFormRule"
        >
          <el-form-item :label="$t('OnlineExcelPage.excel_name_ipt')" prop="name">
            <el-input
              v-model="saveOtherForm.name"
              style="width: 80%"
              :placeholder="$t('OnlineExcelPage.please_table_name_ipt')"
            />
          </el-form-item>
          <el-form-item :label="$t('OnlineExcelPage.table_classification_label')" prop="classify">
            <el-cascader
              v-model="saveOtherForm.classify"
              :options="classifyArr"
              :props="{
                label: 'ExcelClassifyName',
                value: 'ExcelClassifyId',
                children: 'Children',
                emitPath: false,
                checkStrictly: true,
              }"
              style="width: 80%"
              :placeholder="$t('OnlineExcelPage.select_appropriate_category_lable')"
              class="sheet-classify-cascader"
            />
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 30px">
        <el-button
          type="primary"
          style="margin-right: 60px"
          @click="saveCopyOther"
          >{{$t('Dialog.confirm_save_btn')}}</el-button
        >
        <el-button type="primary" plain @click="cancelSaveOther"
          >{{$t('Dialog.cancel_btn')}}</el-button
        >
      </div>
    </m-dialog>

  </div>
</template>

<script>
import * as sheetInterface from '@/api/modules/sheetApi.js';
import { departInterence } from "@/api/api.js";
import moment from 'moment';
import mDialog from "@/components/mDialog.vue";
import BalanceTable from './components/BalanceTable.vue';
import BalanceTableMixin from './mixins/balanceTableMixin'
export default {
  mixins:[BalanceTableMixin],
  components: {
    BalanceTable,
    mDialog
  },
  computed: {
    downExcelFileUrl() {
      let url = `${
        process.env.VUE_APP_API_ROOT
      }/datamanage/excel_info/table/download?${localStorage.getItem("auth")}`;
      return url;
    },
    rules() {
      return this.$t('OnlineExcelPage.TablebalanceMixText') || ''
    },
    isView(){
      return this.$route.path==='/viewBalanceSheet'
    },
    // 当前是否为静态表
    isStaticTable(){
      let flag=false
      this.versionOpts.forEach(item=>{
        if(item.ExcelInfoId===this.sheetForm.version&&item.BalanceType==1){
          flag=true
        }
      })
      return flag
    },
    saveOtherFormRule(){
      return {
        name: [
          { required: true, message: this.$t('OnlineExcelPage.table_name_empty_msg') , trigger: "blur" },
        ],
        classify: [
          { required: true, message: this.$t('OnlineExcelPage.cannot_be_empty_table') , trigger: "blur" },
        ],
      }
    }
  },
  data() {
    return {
      sheetId: this.$route.query.id || '',
      excelInfo:{},

      updating:false,

      sheetForm: {
        name: '',
        classify: '',
        user: '',
        version: Number(this.$route.query.id),
      },
      classifyArr: [],
      userList: [],//系统用户
      updateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      versionOpts: [],

      showSaveStaticTable:false,//存为静态表弹窗
      staticTableName:moment().format('YYYY-MM-DD'),

      /* 另存为 */
      isSaveOther: false,
      saveOtherForm: {
        name: '',
				classify: ''
      },

    }
  },
  created() {
    this.getClassify();
    this.getSystemUserList()
    this.getChildTable()
    this.getDetail()
    this.getVersionList()
  },
  beforeRouteLeave(to,from,next){
    console.log('退出编辑',from);
    if(from.path==='/editBalanceSheet'){
      this.markFinishStatus()
    }
    next()
  },
  methods: {
    // 获取版本列表
    getVersionList(){
      sheetInterface.balanceTableVersion({ExcelInfoId:this.sheetId}).then(res=>{
        if(res.Ret===200){
          const arr=res.Data.List||[]
          if(this.$i18nt.locale!=='zh'){
            arr[0].VersionName='Active'
          }
          this.versionOpts=arr
        }
      })
    },

    handleVersionChange(){
      this.getChildTable()
    },

    cancelSaveOther() {
      this.$refs.formRef.resetFields();
      this.saveOtherForm = {
        name: '',
				classify: ''
      };
      this.isSaveOther = false;
    },

    /* 另存为 */
    async saveCopyOther() {
      await this.$refs.formRef.validate();
      let { classify, name } = this.saveOtherForm;

      const res = await sheetInterface.copyExcel({
        ExcelInfoId: this.excelInfo.ExcelInfoId,
        ExcelName: name,
        ExcelClassifyId: classify,
      });

      if (res.Ret !== 200) return;

      this.$message.success(this.$t('MsgPrompt.saved_msg') );
      this.cancelSaveOther();
    },

    handleShowSaveStaticTable(type){
      console.log(type);
      if(type==='rename'){
        this.versionOpts.forEach(item=>{
          if(item.ExcelInfoId===this.sheetForm.version){
            this.staticTableName=item.VersionName
          }
        })
      }else{
        this.staticTableName=this.$moment().format('YYYY-MM-DD')
      }
      this.showSaveStaticTable=true
    },
    // 创建/重命名静态表
    createdStaticTable(){
      if(!this.staticTableName){
        this.$message.warning(this.$t('OnlineExcelPage.save_static_table_tip'))
        return
      }
      // 重命名
      if(this.isStaticTable){
        sheetInterface.balanceStaticTableRename({
          ExcelInfoId:Number(this.sheetForm.version),
          VersionName:this.staticTableName
        }).then(res=>{
          if(res.Ret===200){
            this.$message.success(res.Msg);
            this.getVersionList()
            this.showSaveStaticTable=false
            this.$refs.balanceTableRef.getChartList()//更新图表数据
          }
        })
        return
      }

      sheetInterface.balanceTableSaveStatic({
        ExcelInfoId:Number(this.sheetForm.version),
        VersionName:this.staticTableName
      }).then(res=>{
        if(res.Ret===200){
          this.getVersionList()
          this.sheetForm.version=res.Data.ExcelInfoId
          this.getChildTable()
          this.showSaveStaticTable=false
        }
      })
    },

    // 删除当前静态表
    handleStaticTableDel(){
      this.$confirm(this.$t('ETable.Msg.is_del_table_msg') , this.$t('Confirm.prompt') , {
        confirmButtonText:  this.$t('Dialog.confirm_btn'),
        cancelButtonText: this.$t('Dialog.cancel_btn'),
        type: "warning",
      }).then(()=>{
        sheetInterface.classifyDel({
          ExcelClassifyId:0,
          ExcelInfoId:Number(this.sheetForm.version),
          Source: 5
        }).then(res=>{
          if(res.Ret===200){
            this.$message.success(res.Msg);
            this.sheetForm.version=Number(this.sheetId)
            this.getVersionList()
            this.getChildTable()
          }
        })
      }).catch(()=>{})
    },

    //获取所有子表数据
    async getChildTable(){
      if(!this.sheetForm.version) return
      const res = await sheetInterface.getBalanceChildTable({
				ParentId: Number(this.sheetForm.version)
			})
      if(res.Ret !== 200)  return
      this.$refs.balanceTableRef.initSheetListData(res.Data.List||[]);

    },

    /* 获取表格详情 */
    async getDetail(type='init') {
      if(!this.sheetId) return
      const res = await sheetInterface.sheetDetail({
				ExcelInfoId: Number(this.sheetId)
			})
      if(res.Ret !== 200)  return
      this.excelInfo=res.Data
      const { ExcelName,ExcelClassifyId,TableData,ModifyTime,Button } = res.Data;
      this.sheetForm.name=ExcelName
      this.sheetForm.classify=ExcelClassifyId
      this.getTableWorker()
    },

    // 保存父表基础信息
    async saveTableInfo(){
      let params = {
        ExcelInfoId:Number(this.sheetId),
        ExcelName: this.sheetForm.name,
        ExcelType: 1,
        ExcelClassifyId: this.sheetForm.classify,
        ExcelImage: '',
        Source: 5,
        TableData: {
          CellRelation:"[]",
          Data:[]
        }
      };
      const res=await sheetInterface.sheetEdit(params)
    },

    //获取协作人
    async getTableWorker(){
      const res=await sheetInterface.getBalanceTableWorker({
        ExcelInfoId:Number(this.sheetId)
      })
      if(res.Ret !== 200)  return
      const arr=res.Data.List||[]
      this.sheetForm.user=arr.map(e=>e.SysUserId)
    },

    // 保存设置的协作人
    async setTableWorker(){
      if(!this.excelInfo.Button.OpWorkerButton) return
      const res=await sheetInterface.setBalanceTableWorker({
        ExcelInfoId:Number(this.sheetId),
        SysUserIds:this.sheetForm.user?this.sheetForm.user.join(','):''
      })
      if(res.Ret !== 200)  return
    },

    //点击保存
    saveSheetHandle(){
      this.setTableWorker()// 保存协作人
      this.saveTableInfo()// 保存父表基础信息
      this.$refs.balanceTableRef.saveChildSheet('manualSave')
      this.$refs.balanceTableRef.getChartList()//更新图表数据

    },

    // 点击更新
    async updateHandle(){
      if(this.updating) return
      this.updating=true
      // 保存一次
      await this.$refs.balanceTableRef.saveChildSheet()
      // 重新获取当前子表的数据
      this.$refs.balanceTableRef.getSheetDetail('refresh')
    },

    backHandle(){
      this.$router.back()
    },


    /* 获取分类 */
    getClassify() {
      sheetInterface.excelClassifyOne({ Source: 5 }).then(res => {
        if (res.Ret !== 200) return

        this.classifyArr = res.Data.AllNodes || [];
      })
    },

    // 递归处理数组
    deleteUserEmpty(arr) {
      arr.length && arr.forEach(item => {
        item.Children && item.Children.length && this.deleteUserEmpty(item.Children)
        if (!item.Children || !item.Children.length) {
          delete item.Children
        }
      })
    },

    getSystemUserList() {
      departInterence.getSystemUser({
        KeyWord: ''
      }).then(res => {
        if (res.Ret === 200) {
          this.deleteUserEmpty(res.Data || [])
          this.userList = res.Data || []
        }
      })
    },

    //更新编辑状态
    markFinishStatus(){
      if(!this.sheetId) return
      sheetInterface.markSheetEditStatus({ExcelInfoId:Number(this.sheetId),Status:2}).then(res=>{
        if(res.Ret != 200) return 
      })
    },

    isSheetBtnShow(type){
      return this.permissionBtn.isShowBtn('etaTablePermission',`etaTable_customize_balance_${type}`)
    }
  },
}
</script>

<style lang="scss">
.sheet-classify-cascader .el-input {
	width: 100%;
}
</style>
<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.balance-sheet-detail-wrap {
  min-width: 1070px;
  min-height: calc(100vh - 120px);
  position: relative;
  .no-auth-box{
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #F2F6FA;
  }
  .wrap-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    z-index: 1;
    .form-ul {
      //   flex: 1;
      display: flex;
      align-items: center;
      gap: 0 5px;
      li {
        &:first-child {
          padding-top: 0;
        }
      }
    }
  }
}
</style>