canrd-outside / order-erp-front · Files

<template>
  <BasicTable @register="registerTable" className="p-0">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              label: '详情',
              // icon: 'ic:outline-delete-outline',
              onClick: handleDetail.bind(null, record),
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <BasicDrawer
    width="500"
    :showFooter="!isApproved && (role === ROLE.ADMIN || role === ROLE.BUSINESS)"
    @register="registerDrawer"
    title="申请信息"
    okText="通过"
    @ok="handleTrue"

    :showOkBtn="!isApproved && role === ROLE.ADMIN"

  >
    <BaseInfo :baseInfos="baseInfos" />

    <h2>申请字段</h2>

    <div>{{ fieldInfos.baseFields.join(' , ') }}</div>
    <template #appendFooter>

      <a-button @click="handleFalse" v-if="!isApproved && role === ROLE.ADMIN"> 不通过</a-button>

    </template>
  </BasicDrawer>
  <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />
</template>
<script lang="ts">
  import MsgModal from './MsgModal.vue';
  import { computed, defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';
  import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
  import { getAuditApply, getApplyList } from '/@/api/project/invoice';

  import { FIELDS_BASE_INFO } from '../finance/financeProfit/ServiceProfit/ServiceProfit/tableData';
  import { COLUMNS } from '../finance/financeProfit/ServiceProfit/ServiceProfit/data';

  import { find, isEmpty } from 'lodash-es';
  import { ROLE } from '../order//type.d';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import BaseInfo from './BaseInfo.vue';
  import { createImgPreview } from '/@/components/Preview';
  import { getFormConfig } from './data';

  const userStore = useUserStoreWithOut();

  export default defineComponent({
    components: {
      BasicTable,
      BasicDrawer,
      TableAction,
      BaseInfo,
      MsgModal,
    },
    props: {
      isApproved: { type: Boolean },
    },
    setup(props) {
      // visible 用于msgModal显示隐藏
      const msgVisible = ref(false);

      const checkedKeys = ref<Array<string | number>>([]);
      const currentKey = ref('1');
      const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
      const fieldInfos = ref({
        baseFields: [],
      });
      const baseInfos = ref({});
      const id = ref('');

      let columns = [
        {
          title: '申请人',
          dataIndex: 'createBy',
          width: 150,
        },
        {
          title: '审核字段类型',
          dataIndex: 'auditRoleCodes',
          width: 150,
          customRender: (column) => {

            return '业务研发净利字段';

          },
        },
        {
          title: '项目号',
          dataIndex: 'projectNoPrefix',
          width: 150,
        },
        {
          title: '申请原因',
          dataIndex: 'applyRemark',
          width: 150,
        },
      ];

      if (props.isApproved) {
        columns = columns.concat([
          {
            title: '状态',
            dataIndex: 'status',
            width: 150,
            customRender: (column) => {
              const { record } = column || {};

              return record.status === 10 ? '通过' : '拒绝';
            },
          },
          { title: '拒绝原因', dataIndex: 'refuseRemark', width: 250 },
        ]);
      }
      const [registerTable, { reload }] = useTable({
        scroll: false,

        api: getApplyList,
        searchInfo: props.isApproved ? { status: 10 } : {},

        columns,

        useSearchForm: false,

        formConfig: getFormConfig('true'),
        rowKey: 'id',
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
        },
      });

      function handleEdit(record, e) {
        e?.stopPropagation();
        return false;
      }

      function handleProfitModal() {}

      async function handleDetail(data) {

        id.value = data.id;

        fieldInfos.value = {
          baseFields: [],
        };
        openDrawer(true, { data });

        !isEmpty(data.fields) &&
          Object.entries(data.fields)?.map(([key, value]) => {
            if (value === 'UN_LOCKED') {
              const obj = find(FIELDS_BASE_INFO, { field: key });
              fieldInfos.value.baseFields.push(obj?.label);
            }
          });
        baseInfos.value = COLUMNS.map((field) => {

          return {

            label: field.title,
            value: data[field.dataIndex],

          };
        }).filter((item) => !!item.value);
      }

      async function handleTrue() {

        await getAuditApply({ status: 10, id: id.value });

        reload();
        closeDrawer();
      }

      async function handleFalse() {
        msgVisible.value = true;
      }

      const role = computed(() => {
        return userStore.getUserInfo?.roleSmallVO?.code;
      });

      // 定义MsgModalClose的事件，方便子组件调用
      const handleMsgModalClose = async (data) => {
        if (data) {

          await getAuditApply({ status: 20, id: id.value, refuseRemark: data });

          reload();
          closeDrawer();
        }
        msgVisible.value = false;
      };

      const handlePreview = (url) => {
        createImgPreview({ imageList: [url], defaultWidth: 500 });
        return false;
      };

      return {
        handleProfitModal,
        registerTable,
        checkedKeys,
        currentKey,
        handleEdit,
        handleDetail,
        registerDrawer,
        fieldInfos,
        baseInfos,
        handleTrue,
        handleFalse,
        ROLE,
        role,
        msgVisible,
        handleMsgModalClose,
        handlePreview,
      };
    },
  });
</script>