图纸

src/api/design/billofQuantities/index.ts

@@ -59,3 +59,15 @@ export const sheetList = (query:any): AxiosPromise => {
     params: query
   });
 };
+
+/**
+ * 物资设备清单审批详情
+ * @param query
+ * @returns {*}
+ */
+export const detailsMaterialAndEquipmentApproval = (versions:any): AxiosPromise => {
+  return request({
+    url: '/design/billofquantitiesVersions/detailsMaterialAndEquipmentApproval/'+versions,
+    method: 'get',
+  });
+};

src/views/design/billofQuantities/index copy.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="billof-quantities">
+        <el-card shadow="hover">
+            <el-form :model="state.queryForm" :inline="true">
+                <el-form-item label="版本号" prop="versions">
+                    <el-select v-model="state.queryForm.versions" placeholder="选择版本号" @change="handleChange">
+                        <el-option v-for="item in state.options" :key="item.versions" :label="item.versions"
+                            :value="item.versions" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="openTable(true, index)">一键展开</el-button>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="openTable(false, index)">一键收起</el-button>
+                </el-form-item>
+                <el-form-item>
+                    <el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel" :show-file-list="false">
+                        <template #trigger>
+                            <el-button type="primary">上传excel</el-button>
+                        </template>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-table :ref="(el) => tableRef[index] = el" :data="state.tableData"
+            style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);" row-key="id" border
+            :default-expand-all="state.isOpen">
+            <el-table-column prop="num" label="编号" />
+            <el-table-column prop="name" label="工程或费用名称" />
+            <el-table-column prop="unit" label="单位" />
+            <el-table-column prop="quantity" label="数量" />
+            <el-table-column prop="remark" label="备注" />
+        </el-table>
+    </div>
+</template>
+
+<script setup name="billofQuantities">
+import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue'
+import { obtainAllVersionNumbers, importExcelFile, obtainTheList, sheetList } from "@/api/design/billofQuantities/index"
+import { useUserStoreHook } from '@/store/modules/user';
+const userStore = useUserStoreHook();
+const currentProject = computed(() => userStore.selectedProject);
+const { proxy } = getCurrentInstance();
+const { work_order_type } = toRefs(proxy?.useDict('work_order_type'));
+const tableRef = ref({});
+// tableData
+// 版本号
+const state = reactive({
+    work_order_type: 0,
+    // 版本号
+    version_num: '',
+    options: [],// 版本号选项
+    queryForm: {
+        projectId: currentProject.value?.id,
+        versions: '',
+        sheet: '',
+        pageSize: 20,
+        pageNum: 1
+    },
+    tableData: [],
+})
+onMounted(() => {
+    getVersionNums();
+})
+// 上传excel
+function importExcel(options) {
+    console.log(options);
+    let formData = new FormData();
+    formData.append("file", options.file);
+    importExcelFile({ workOrderType: state.work_order_type, projectId: currentProject.value?.id }, formData).then(res => {
+        const { code } = res;
+        if (code == 200) {
+            proxy.$modal.msgSuccess(res.msg || '导入成功');
+            // 更新列表
+            getVersionNums()
+        } else {
+            proxy.$modal.msgError(res.msg || '导入失败');
+        }
+    })
+}
+// 切换表名
+function handleChange(version) {
+    console.log('version', version);
+}
+</script>
+<style>
+.billof-quantities {
+    padding: 20px;
+}
+</style>

src/views/design/billofQuantities/index.vue

@@ -2,13 +2,12 @@
     <div class="billof-quantities">
         <!-- tabPosition="left" -->
         <el-tabs type="border-card" @tab-change="handleTabChange">
-            <el-tab-pane v-for="item,index in work_order_type" :key="item.value" :label="item.label">
+            <el-tab-pane v-for="item, index in work_order_type" :key="item.value" :label="item.label">
-                <el-card shadow="hover">
+                <el-card v-if="index < 3" shadow="always">
                     <el-form :model="state.queryForm" :inline="true">
                         <el-form-item label="版本号" prop="versions">
                             <el-select v-model="state.queryForm.versions" placeholder="选择版本号">
-                                <el-option v-for="item in state.options" :key="item.versions" :label="item.versions"
+                                <el-option v-for="item in state.options" :key="item.versions" :label="item.versions" :value="item.versions" />
-                                    :value="item.versions" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="表名" prop="sheet">
@@ -17,37 +16,69 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item>
-                            <el-button type="primary" @click="openTable(true,index)">一键展开</el-button>
+                            <el-button type="primary" @click="openTable(true, index)">一键展开</el-button>
                         </el-form-item>
                         <el-form-item>
-                            <el-button type="primary" @click="openTable(false,index)">一键收起</el-button>
+                            <el-button type="primary" @click="openTable(false, index)">一键收起</el-button>
                         </el-form-item>
                         <el-form-item>
                             <el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel"
                                 :show-file-list="false">
                                 <template #trigger>
-                                    <el-button type="primary">上传excel</el-button>
+                                    <el-button type="primary">导入excel</el-button>
                                 </template>
                             </el-upload>
                         </el-form-item>
                     </el-form>
                 </el-card>
-                <el-table :ref="(el) => tableRef[index] = el"  :data="state.tableData" style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);"
+                <el-card v-if="index == 3" shadow="always">
-                    row-key="id" border :default-expand-all="state.isOpen">
+                    <el-form :model="state.queryForm" :inline="true">
+                        <el-form-item label="版本号" prop="versions">
+                            <el-select v-model="state.queryForm.versions" placeholder="选择版本号"
+                                @change="handleChangeVersion">
+                                <el-option v-for="item in state.options" :key="item.versions" :label="item.versions"
+                                    :value="item.versions" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel" style="margin-right: 12px;"
+                                v-if="Object.keys(state.versionsData).length === 0 ||state.versionsData.status=='cancel'||state.versionsData.status=='draft'"
+                                :show-file-list="false">
+                                <template #trigger>
+                                    <el-button type="primary">导入excel</el-button>
+                                </template>
+                            </el-upload>
+                            <el-button v-if="state.versionsData.status=='draft'" type="primary"con="edit" @click="clickApprovalSheet()">审核</el-button>
+                            <el-button v-if="state.versionsData.status=='warning'||state.versionsData.status=='finish'"  icon="view" @click="lookApprovalSheet()" type="warning">查看流程</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-card>
+                <el-table v-if="index < 3" :ref="(el) => tableRef[index] = el" :data="state.tableData"
+                    style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);" row-key="id" border
+                    :default-expand-all="state.isOpen">
                     <el-table-column prop="num" label="编号" />
                     <el-table-column prop="name" label="工程或费用名称" />
                     <el-table-column prop="unit" label="单位" />
                     <el-table-column prop="quantity" label="数量" />
                     <el-table-column prop="remark" label="备注" />
                 </el-table>
+                <el-table v-if="index == 3" :data="state.tableData"
+                    style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);" row-key="id" border>
+                    <el-table-column prop="num" label="编号" />
+                    <el-table-column prop="name" label="名称" />
+                    <el-table-column prop="specification" label="规格" />
+                    <el-table-column prop="unit" label="单位" />
+                    <el-table-column prop="quantity" label="数量" />
+                    <el-table-column prop="remark" label="备注" />
+                </el-table>
             </el-tab-pane>
         </el-tabs>
     </div>
 </template>
 
 <script setup name="billofQuantities">
-import { ref,reactive, onMounted, computed, toRefs, getCurrentInstance,nextTick } from 'vue'
+import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue'
-import { obtainAllVersionNumbers, importExcelFile, obtainTheList, sheetList } from "@/api/design/billofQuantities/index"
+import { obtainAllVersionNumbers, importExcelFile, obtainTheList, sheetList, detailsMaterialAndEquipmentApproval } from "@/api/design/billofQuantities/index"
 import { useUserStoreHook } from '@/store/modules/user';
 const userStore = useUserStoreHook();
 const currentProject = computed(() => userStore.selectedProject);
@@ -77,9 +108,14 @@ const state = reactive({
         list: false
     },
     error: null,
+    // 前三个
     tableData: [],
+    // 物质设备清单
+    // tableData_sdsqd: [],
     // 展开收起
     isOpen: false,
+    // 版本号
+    versionsData:{}
 })
 // tab切换
 const handleTabChange = tab => {
@@ -89,13 +125,17 @@ const handleTabChange = tab => {
     state.queryForm.sheet = '';
     state.queryForm.versions = '';
     state.work_order_type = tab
-    getVersionNums()
+    if (tab <= 2) {
+        getVersionNums()
+    } else {
+        getVersionNums(false)
+    }
 }
 onMounted(() => {
     getVersionNums();
 })
 // 获取版本号
-async function getVersionNums() {
+async function getVersionNums(isSheet = true) {
     try {
         state.loading.versions = true;
         state.error = null;
@@ -113,7 +153,12 @@ async function getVersionNums() {
             if (state.options.length > 0) {
                 state.queryForm.versions = state.options[0].versions;
                 // 等待表名加载完成
-                await handleSheetName();
+                console.log(isSheet, state.sheets.length);
+                if (isSheet) {
+                    await handleSheetName();
+                } else {
+                    await handleQueryList(isSheet);
+                }
             }
         } else {
             state.error = `获取版本号失败: 错误码 ${code}`;
@@ -160,8 +205,8 @@ async function handleSheetName() {
 }
 
 // 获取列表
-async function handleQueryList() {
+async function handleQueryList(isSheet = true) {
-    if (!state.queryForm.sheet) {
+    if (isSheet && !state.queryForm.sheet) {
         console.warn('表名不存在，无法获取列表数据');
         return;
     }
@@ -173,6 +218,9 @@ async function handleQueryList() {
         const result = await obtainTheList(state.queryForm);
 
         if (result?.code === 200) {
+            if (state.work_order_type == 3) {
+                state.versionsData = result.data || [];
+            }
             state.tableData = result.data || [];
         } else {
             state.error = `获取列表数据失败: 错误码 ${result?.code}`;
@@ -195,7 +243,7 @@ function importExcel(options) {
         if (code == 200) {
             proxy.$modal.msgSuccess(res.msg || '导入成功');
             // 更新列表
-            getVersionNums()
+            getVersionNums(false)
         } else {
             proxy.$modal.msgError(res.msg || '导入失败');
         }
@@ -206,29 +254,59 @@ function handleChange(sheet) {
     state.queryForm.sheet = sheet;
     handleQueryList();
 }
-
+// 切换版本号
+function handleChangeVersion(versions) {
+    state.queryForm.versions = versions;
+    state.versionsData = state.options.find(e => e.versions == versions)
+    console.log('state.versionsData',state.versionsData);
+    state.sheets = [];
+    handleQueryList();
+}
 // 在 openTable 方法中通过索引获取对应的表格实例
 function openTable(flag, index) {
-  nextTick(() => {
+    nextTick(() => {
-    // 通过索引获取当前标签页的表格实例
+        // 通过索引获取当前标签页的表格实例
-    const currentTable = tableRef.value[index]
+        const currentTable = tableRef.value[index]
-    if (currentTable) {
+        if (currentTable) {
-      handleArr(state.tableData, flag, currentTable);
+            handleArr(state.tableData, flag, currentTable);
-    }
+        }
-  });
+    });
+}
+function handleArr(arr, flag, table) {
+    arr.forEach((i) => {
+        table.toggleRowExpansion(i, flag);
+        if (i.children) {
+            handleArr(i.children, flag, table);
+        }
+    });
 }
 
-function handleArr(arr, flag, table) {
+
-  arr.forEach((i) => {
+// 审批
-    table.toggleRowExpansion(i, flag);
+function clickApprovalSheet(row) {
-    if (i.children) {
+    proxy.$tab.closePage(proxy.$route);
-      handleArr(i.children, flag, table);
+    proxy.$router.push({
-    }
+        path: `/design-management/billofQuantities/indexEdit`,
-  });
+        query: {
+            id: state.queryForm.versions,
+            type: 'update'
+        },
+    });
 }
+// 审核流程
+function lookApprovalFlow(row) {
+    proxy.$router.push({
+        path: `/design-management/billofQuantities/indexEdit`,
+        query: {
+            id: state.queryForm.versions,
+            type: 'view'
+        }
+    });
+}
+
 </script>
 <style>
-.billof-quantities{
+.billof-quantities {
     padding: 20px;
 }
 </style>

src/views/design/billofQuantities/indexEdit.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="p-4 bg-gray-50">
+    <div class="max-w-4xl mx-auto">
+      <!-- 顶部按钮区域 -->
+      <el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
+        <approvalButton @submitForm="submitForm" @approvalVerifyOpen="approvalVerifyOpen"
+          @handleApprovalRecord="handleApprovalRecord" :buttonLoading="buttonLoading" :id="form.versions"
+          :status="form.status" :pageType="routeParams.type" />
+      </el-card>
+      <!-- 表单区域 -->
+      <el-card
+        class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
+        <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
+          <h3 class="text-lg font-semibold text-gray-800">设计原则</h3>
+        </div>
+        <div class="p-6">
+          <el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form"
+            :rules="rules" label-width="100px" class="space-y-4">
+            <div class="grid grid-cols-1 gap-4">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="版本号" prop="formNo">
+                    <el-input disabled v-model="form.versions" placeholder="请输入文件名称" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+          <el-table :data="tableData"
+            style="width: 100%; margin-bottom: 20px;height: calc(100vh - 305px);" row-key="id" border>
+            <el-table-column prop="num" label="编号" />
+            <el-table-column prop="name" label="名称" />
+            <el-table-column prop="specification" label="规格" />
+            <el-table-column prop="unit" label="单位" />
+            <el-table-column prop="quantity" label="数量" />
+            <el-table-column prop="remark" label="备注" />
+          </el-table>
+        </div>
+      </el-card>
+      <!-- 提交组件 -->
+      <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
+      <approvalRecord ref="approvalRecordRef"></approvalRecord>
+      <!-- 流程选择对话框 -->
+      <el-dialog draggable v-model="dialogVisible.visible" :title="dialogVisible.title" :before-close="handleClose"
+        width="500" class="rounded-lg shadow-lg">
+        <div class="p-4">
+          <p class="text-gray-600 mb-4">请选择要启动的流程：</p>
+          <el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
+            <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <template #footer>
+          <div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
+            <el-button @click="handleClose"
+              class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">取消</el-button>
+            <el-button type="primary" @click="submitFlow()"
+              class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">确认</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { useUserStoreHook } from '@/store/modules/user';
+const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
+import { detailsMaterialAndEquipmentApproval } from '@/api/design/billofQuantities/index';
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const buttonLoading = ref(false);
+const loading = ref(true);
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const flowCode = ref<string>('');
+const status = ref<string>('');
+const dialogVisible = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+//按钮组件
+const flowCodeOptions = [
+  {
+    value: currentProject.value?.id + '_equipmentList',
+    label: '物资设备清单审核'
+  },
+];
+
+const leaveFormRef = ref<ElFormInstance>();
+const dialog = reactive({
+  visible: false,
+  title: '',
+  isEdit: false
+});
+const submitFormData = ref<StartProcessBo>({
+  businessId: '',
+  flowCode: '',
+  variables: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+
+const initFormData = {
+  id: undefined,
+  fileName: undefined,
+  fileUrl: undefined,
+  status: undefined,
+  originalName: undefined
+};
+const data = reactive({
+  form: { ...initFormData },
+  tableData:[],
+  rules: {}
+});
+
+const handleClose = () => {
+  dialogVisible.visible = false;
+  flowCode.value = '';
+  buttonLoading.value = false;
+};
+const { form, rules,tableData } = toRefs(data);
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  leaveFormRef.value?.resetFields();
+};
+
+/** 获取详情 */
+const getInfo = () => {
+  loading.value = true;
+  buttonLoading.value = false;
+  nextTick(async () => {
+    const res = await detailsMaterialAndEquipmentApproval(routeParams.value.id);
+    console.log('res.data',res.data);
+    
+    Object.assign(form.value, res.data);
+    console.log('form',form.value);
+    
+    tableData.value = res.data.auditData;
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status1: string) => {
+  status.value = status1;
+  submit(status.value, form.value);
+};
+
+const submitFlow = async () => {
+  handleStartWorkFlow(form.value);
+  dialogVisible.visible = false;
+};
+//提交申请
+const handleStartWorkFlow = async (data: LeaveForm) => {
+  try {
+    submitFormData.value.flowCode = flowCode.value;
+    submitFormData.value.businessId = data.versions;
+    //流程变量
+    taskVariables.value = {
+      // leave4/5 使用的流程变量
+      userList: ['1', '3', '4']
+    };
+    submitFormData.value.variables = taskVariables.value;
+    const resp = await startWorkFlow(submitFormData.value);
+    if (submitVerifyRef.value) {
+      buttonLoading.value = false;
+      submitVerifyRef.value.openDialog(resp.data.taskId);
+    }
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+//审批记录
+const handleApprovalRecord = () => {
+  approvalRecordRef.value.init(form.value.versions);
+};
+//提交回调
+const submitCallback = async () => {
+  await proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+// 图纸上传成功之后 开始提交
+const submit = async (status, data) => {
+  form.value = data;
+  if (status === 'draft') {
+    buttonLoading.value = false;
+    proxy?.$modal.msgSuccess('暂存成功');
+    proxy.$tab.closePage(proxy.$route);
+    proxy.$router.go(-1);
+  } else {
+    if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
+      flowCode.value = flowCodeOptions[0].value;
+      dialogVisible.visible = true;
+      return;
+    }
+    //说明启动过先随意穿个参数
+    if (flowCode.value === '' || flowCode.value === null) {
+      flowCode.value = 'xx';
+    }
+    await handleStartWorkFlow(data);
+  }
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = proxy.$route.query;
+    reset();
+    loading.value = false;
+    if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
+      getInfo();
+      console.log('routeParams.value',routeParams.value);
+      
+    }
+  });
+});
+</script>
+<style scoped lang="scss">
+/* 全局样式 */
+:root {
+  --primary: #409eff;
+  --primary-light: #66b1ff;
+  --primary-dark: #3a8ee6;
+  --success: #67c23a;
+  --warning: #e6a23c;
+  --danger: #f56c6c;
+  --info: #909399;
+}
+
+/* 表单样式优化 */
+.el-form-item {
+  .el-form-item__label {
+    color: #606266;
+    font-weight: 500;
+  }
+
+  .el-input__inner,
+  .el-select .el-input__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+
+  .el-textarea__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+}
+
+/* 按钮样式优化 */
+.el-button {
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &.is-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    &:hover {
+      background-color: var(--primary-light);
+      border-color: var(--primary-light);
+    }
+
+    &:active {
+      background-color: var(--primary-dark);
+      border-color: var(--primary-dark);
+    }
+  }
+
+  &.is-text {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-light);
+      background-color: rgba(64, 158, 255, 0.05);
+    }
+  }
+}
+
+/* 卡片样式优化 */
+.el-card {
+  transition: all 0.3s ease;
+
+  &:hover {
+    /* transform: translateY(-2px); */
+  }
+}
+
+/* 对话框样式优化 */
+.el-dialog {
+  .el-dialog__header {
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #ebeef5;
+    padding: 15px 20px;
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+</style>