kd-aiot-frontend-eom/src/views/financialManage/feeManage/feeApplication/page.vue

<template>
  <div>
    <page-search-table @search="reload"></page-search-table>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 430px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      :selection.sync="selection"
      :page-size="20"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="handleAddOrEdit('', 'add')"
        >
          新建
        </el-button>
        <el-button
          size="small"
          type="danger"
          el-icon-delete
          class="ele-btn-icon"
          @click="allDelBtn"
          :disabled="selection?.length === 0"
        >
          批量删除
        </el-button>
      </template>
      <!-- 操作 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          v-if="isNeed_process_is_close && [0, 3].includes(row.approvalStatus)"
          :underline="false"
          icon="el-icon-plus"
          @click="sub(row)"
        >
          提交
        </el-link>
        <el-link
          type="primary"
          v-if="
            (isNeed_process_is_close && [0, 3].includes(row.approvalStatus)) ||
            !isNeed_process_is_close
          "
          :underline="false"
          icon="el-icon-edit"
          @click="handleAddOrEdit(row, 'update')"
        >
          修改
        </el-link>

        <el-popconfirm
          v-if="
            isNeed_process_is_close &&
            [0, 3].includes(row.approvalStatus) &&
            !isNeed_process_is_close
          "
          class="ele-action"
          title="确定要删除此信息吗？"
          @confirm="remove([row.id])"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
      <template v-slot:applyUserName="{ row }">
        <el-link
          type="primary"
          :underline="false"
          @click="handleDetail(row, 'view')"
        >
          {{ row.applyUserName }}
        </el-link>
      </template>
    </ele-pro-table>

    <!-- 多选删除弹窗 -->
    <pop-modal
      :visible.sync="delVisible"
      content="是否确定删除？"
      @done="commitBtn"
    />
    <!--  新增/修改  -->
    <add-or-edit-dialog
      v-if="addOrEditDialogFlag"
      :addOrEditDialogFlag.sync="addOrEditDialogFlag"
      ref="addOrEditDialogRef"
      @reload="reload"
    ></add-or-edit-dialog>
    <detail-dialog
      v-if="detailDialogFlag"
      :detail-dialog-flag.sync="detailDialogFlag"
      ref="detailDialogRef"
    ></detail-dialog>
    <process-submit-dialog
      api-fun-name="finfeeapplyStatusAPI"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      isCloseRefresh="false"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
  </div>
</template>

<script>
  import popModal from '@/components/pop-modal';
  import { reviewStatus } from '@/enum/dict';
  import dictMixins from '@/mixins/dictMixins';
  import pageSearchTable from './pageSearchTable.vue';
  import {
    feeApplyPageListAPI,
    feeApplyRemoveAPI,
    finFeeApplySubmit
  } from '@/api/financialManage/fee-manage/fee-application';
  import addOrEditDialog from './addOrEditDialog.vue';
  import detailDialog from './detailDialog.vue';
  import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';

  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      processSubmitDialog,
      addOrEditDialog,
      pageSearchTable,
      popModal,
      detailDialog
    },
    data() {
      return {
        selection: [],
        delVisible: false,
        // 加载状态
        loading: false,
        addOrEditDialogFlag: false,
        detailDialogFlag: false,
        processSubmitDialogFlag: false,
        cacheKeyUrl: 'eos-ef52b03f-feeManage',
        columnsVersion: 1
      };
    },
    computed: {
      getDicts() {
        return (dictName, val) => {
          return this.getDictValue(dictName, val);
        };
      },
      columns() {
        // 当columnsVersion变化时会重新计算,用作更新列配置
        const version = this.columnsVersion;
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'applyUserName',
            label: '申请人名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            slot: 'applyUserName'
          },
          {
            prop: 'applyDeptName',
            label: '申请人部门',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          },
          {
            prop: 'documentType',
            label: '单据类型',
            align: 'center',
            slot: 'documentType',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return this.getDicts('单据类型', cellValue + '');
            },
            minWidth: 120
          },
          // {
          //   prop: 'feeTypeName',
          //   label: '费用类型',
          //   align: 'center',
          //   slot: 'feeType',
          //   showOverflowTooltip: true,
          //   minWidth: 120,
          // },
          // {
          //   prop: 'accountingSubjectName',
          //   label: '会计科目名称',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 140
          // },
          {
            prop: 'amount',
            label: '金额',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'approvalStatus',
            label: '审核状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return reviewStatus[_row.approvalStatus];
            }
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 80
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 300,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];
      }
    },
    created() {
      this.requestDict('客户状态');
    },
    methods: {
      //新增、修改
      handleAddOrEdit(row = {}, type) {
        this.addOrEditDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.addOrEditDialogRef.init(row, type);
        });
      },
      //详情
      handleDetail(row = {}, type) {
        this.detailDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.detailDialogRef.init(row, type);
        });
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return feeApplyPageListAPI({
          pageNum: page,
          size: limit,
          ...where
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },

      //批量删除
      allDelBtn() {
        if (this.selection.length === 0) return;
        let flag = this.selection.some((item) =>
          [1, 2].includes(item.approvalStatus)
        );
        if (flag)
          return this.$message.warning(
            '抱歉已审核、审核中的数据不能删除,请检查'
          );
        this.delVisible = true;
      },

      commitBtn() {
        const dataId = this.selection.map((v) => v.id);
        feeApplyRemoveAPI(dataId).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      },
      remove(row) {
        feeApplyRemoveAPI(row).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      },

      sub(res) {
        this.processSubmitDialogFlag = true;

        this.$nextTick(() => {
          let params = {
            businessId: res.id,
            businessKey: 'fin_fee_apply',
            formCreateUserId: res.createUserId,
            variables: {
              businessName: this.getDicts('单据类型', res.documentType + ''),
              businessType: this.getDicts('单据类型', res.documentType + '')
            }

            // callBackMethodType : '1',
            // callBackMethod : 'proTargetPlanApproveApiImpl.updatePlanApprovalStatus',
            // pcHandle : '/bpm/handleTask/components/project-manage/plan-manage/submit.vue',
            // pcView : '/bpm/handleTask/components/project-manage/plan-manage/detailDialog.vue',
            // miniHandle : '',
            // miniView : '',
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
        // finFeeApplySubmit({
        //   businessId: res.id
        // })
        //   .then((res) => {
        //     this.$message.success('提交成功');
        //     this.reload();
        //   })
        //   .catch((e) => {
        //     this.$message.error(e.message);
        //   });
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-link--inner) {
    margin-left: 0px !important;
  }

  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>