---初始化后台管理web页面项目

src/views/erp/purchase/components/ApplyCheckInfo.vue

@@ -0,0 +1,189 @@
+<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>