canrd-outside / order-erp-front · Files

<template>
  <PageWrapper contentBackground>
    <BasicTable @register="registerTable">
      <template #form-custom> custom-slot </template>
      <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

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

      @register="registerDrawer"
      title="申请信息"
      okText="通过"
      @ok="handleTrue"
    >

      <BaseInfo :baseInfos="baseInfos" />

      <h2>利润分析信息</h2>

      <div v-for="field in fieldInfos" :key="field">
        <span className="w-[140px] inline-block text-right mr-3">{{ field.label }}:</span
        ><span>{{ field.value }}</span>
      </div>
      <template #appendFooter>
        <a-button @click="handleFalse"> 不通过</a-button>
      </template>
    </BasicDrawer>

    <MsgModal v-if="msgVisible" @msg-modal-close="handleMsgModalClose" />

  </PageWrapper>
</template>
<script lang="ts">

  import MsgModal from './MsgModal.vue';

  import { computed, defineComponent, ref } from 'vue';

  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';

  import { BasicDrawer, useDrawer } from '/@/components/Drawer';

  import { approveAuditApi, getApprovedListApi, getWaitListApi } from '/@/api/project/approve';
  import { FIELDS_BASE_INFO, FIELDS_PROFIT_INFO, FIELDS_REPORT_INFO } from '../order/tableData';

  import { ROLE } from '../order//type.d';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import BaseInfo from './BaseInfo.vue';

  const userStore = useUserStoreWithOut();

  export default defineComponent({
    components: {
      PageWrapper,
      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({});
      const baseInfos = ref({});
      const id = ref('');

      let columns = [
        {
          title: '申请人',
          dataIndex: 'createBy',
          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({
        api: props.isApproved ? getApprovedListApi : getWaitListApi,
        searchInfo: { type: 10 },

        columns,

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

      function onSelect(record, selected) {
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, record.id];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
        }
      }
      function onSelectAll(selected, selectedRows, changeRows) {
        const changeIds = changeRows.map((item) => item.id);
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, ...changeIds];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => {
            return !changeIds.includes(id);
          });
        }
      }
      function handleEdit(record, e) {
        e?.stopPropagation();
        return false;
      }

      function handleProfitModal() {}

      async function handleDetail(data) {
        openDrawer(true, { data });
        id.value = data.id;

        fieldInfos.value = (FIELDS_PROFIT_INFO as any)
          .concat({
            label: '利润率',
            field: 'profitRate',
          })
          .map((field) => {
            if (field.field === 'profitType') {
              return {
                label: field.label,
                value: data.fieldInfos.profitAnalysisFields[field.field] == 0 ? '方式1' : '方式2',
              };
            }

            return {
              label: field.label,

              value: data.fieldInfos.profitAnalysisFields[field.field],

            };

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

        baseInfos.value = FIELDS_BASE_INFO.map((field) => {
          return {
            label: field.label,
            value: data.orderBaseInfo[field.field],
          };
        }).filter((item) => !!item.value);

      }

      async function handleTrue() {
        await approveAuditApi({ status: 10, id: id.value });

        reload();

        closeDrawer();

      }

      async function handleFalse() {

        msgVisible.value = true;
        // await approveAuditApi({ status: 20, id: id.value });
        // reload();
        // closeDrawer();

      }

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

      // 定义MsgModalClose的事件，方便子组件调用
      const handleMsgModalClose = async (data) => {
        if (data) {
          await approveAuditApi({ status: 20, id: id.value, refuseRemark: data });
          reload();
          closeDrawer();
        }
        msgVisible.value = false;
      };

      return {
        handleProfitModal,
        registerTable,
        checkedKeys,
        currentKey,
        onSelect,
        handleEdit,
        onSelectAll,

        handleDetail,
        registerDrawer,
        fieldInfos,
        baseInfos,

        handleTrue,
        handleFalse,

        role,
        ROLE,

        msgVisible,
        handleMsgModalClose,

      };
    },
  });
</script>