geg-gas-web/src/views/erp/purchase/components/ApplyCheckInfo.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="查看采购申请"
    :width="1000"
    @cancel="handleCancel"
  >
    <div class="info-box">
      <div class="sub-title">基础信息</div>
      <a-row>
        <a-col :span="12">申请单号：{{ baseInfo?.applyNumber }}</a-col>
        <a-col :span="12">申请主题：{{ baseInfo?.theme }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">申请日期：{{ baseInfo?.applyDate }}</a-col>
        <a-col :span="12">申请部门：{{ baseInfo?.applyDepName }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">申请人员：{{ baseInfo?.applyUserNames }}</a-col>
        <a-col :span="12">关联项目：{{ baseInfo?.relatedProjectName }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">申请单号：{{ baseInfo?.applyNumber }}</a-col>
        <a-col :span="12">申请主题：{{ baseInfo?.theme }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="24">备注：{{ baseInfo?.remark }}</a-col>
      </a-row>
      <BasicTable @register="registerTable" />
      <div class="table-bottom">
        <span>合计</span>
        <div>
          <span>
            总量：
            <span class="price">{{ baseInfo?.countSum }}</span>
          </span>
          <span>
            总金额：
            <span class="price">{{ baseInfo?.amountSum }}</span>
          </span>
        </div>
      </div>
      <div class="sub-title">附件</div>
      <Upload
        v-if="baseInfo?.filePath"
        v-model:value="baseInfo.filePath"
        listType="dragger"
        :style="{ width: '200px', display: 'none' }"
        :showRemoveIcon="false"
      />
      <div style="height: 100px" v-else></div>
      <div class="sub-title">审批记录</div>
      <FlowRecord v-if="isReady" :list="workflowList" :processId="processId" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
  import { getCaseErpApply } from '/@/api/erp/purchase/apply';
  import { getRecordList } from '/@/api/erp/purchase/order';

  const columns: BasicColumn[] = [
    {
      title: '物料编码',
      dataIndex: 'code',
      width: 100,
    },
    {
      title: '物料名称',
      dataIndex: 'name',
      width: 100,
    },
    {
      title: '规格型号',
      dataIndex: 'model',
      width: 100,
    },
    {
      title: '单位',
      dataIndex: 'unitName',
      width: 80,
    },
    {
      title: '预计单价',
      dataIndex: 'price',
      width: 80,
    },
    {
      title: '申请数量',
      dataIndex: 'count',
      width: 80,
    },
    {
      title: '预计金额',
      dataIndex: 'amount',
      width: 80,
    },
    {
      title: '交付日期',
      dataIndex: 'payDate',
      width: 100,
    },
    {
      title: '用途',
      dataIndex: 'purpose',
      width: 100,
    },
  ];

  const rowId = ref('');
  const processId = ref('');
  const workflowList = ref();
  const baseInfo = ref();
  const isReady = ref(false);

  const [registerTable, { setTableData }] = useTable({
    title: '物品明细',
    columns,
    bordered: true,
    pagination: false,
  });

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      destroyOnClose: true,
      footer: null,
      showCancelBtn: false,
      showOkBtn: false,
    });

    rowId.value = data.id;
    processId.value = data.processId;
    if (processId.value) {
      const res = await getRecordList(processId.value);
      workflowList.value = [
        {
          records: res.taskRecords,
          schemaName: '当前流程',
        },
      ];
    }
    isReady.value = true;

    const record = await getCaseErpApply(data.id);
    baseInfo.value = record;
    setTableData(record.caseErpApplyDetailList || []);
  });

  const handleCancel = () => {
    isReady.value = false;
    workflowList.value = [];
  };
</script>
<style lang="less" scoped>
  .info-box {
    padding: 0 16px;

    :deep(.vben-basic-table) {
      height: 300px;
    }

    .ant-row {
      margin-bottom: 15px;
    }

    .sub-title {
      font-weight: bold;
      margin: 15px 0 20px;
      color: #606266;
    }

    .table-bottom {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      padding: 5px;

      & > div > span {
        margin-left: 40px;
      }
    }
  }
</style>