工程清单审批\loading效果

src/views/design/billofQuantities/index.vue

@@ -1,5 +1,4 @@
 <template>
-<<<<<<< HEAD
     <div class="billof-quantities">
         <!-- tabPosition="left" -->
         <el-tabs type="border-card" @tab-change="handleTabChange">
@@ -8,7 +7,8 @@
                     <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" :value="item.versions" />
+                                <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 label="表名" prop="sheet">
@@ -42,20 +42,24 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item>
-                            <el-upload ref="uploadRef" class="upload-demo" :http-request="importExcel" style="margin-right: 12px;"
+                            <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'"
                                 :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 == 'draft'" type="primary" con="edit"
-                            <el-button v-if="state.versionsData.status=='waiting'||state.versionsData.status=='finish'"  icon="view" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
+                                @click="clickApprovalSheet()">审核</el-button>
+                            <el-button v-if="state.versionsData.status == 'waiting' || state.versionsData.status == 'finish'"
+                                icon="view" @click="lookApprovalFlow()" 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" v-loading="state.loading.list"
+                <el-table v-if="index < 3" :ref="(el) => tableRef[index] = el" :data="state.tableData"
-                    stripe :row-class-name="state.tableData.length === 0 ? 'table-null' : ''"
+                    v-loading="state.loading.list" stripe
+                    :row-class-name="state.tableData.length === 0 ? 'table-null' : ''"
                     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="编号" />
@@ -76,96 +80,6 @@
             </el-tab-pane>
         </el-tabs>
     </div>
-=======
-  <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-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" :value="item.versions" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="表名" prop="sheet">
-              <el-select v-model="state.queryForm.sheet" placeholder="选择表名" @change="handleChange">
-                <el-option v-for="item in state.sheets" :key="item" :label="item" :value="item" />
-              </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-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="选择版本号" @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>
->>>>>>> 3158dc84f7a6ef4568e1eeaf33df5b4b2fd1768f
 </template>
 
 <script setup name="billofQuantities">
@@ -188,7 +102,6 @@ console.log(currentProject.value);
 // tableData
 // 版本号
 const state = reactive({
-<<<<<<< HEAD
     work_order_type: 0,
     // 版本号
     version_num: '',
@@ -216,35 +129,6 @@ const state = reactive({
     // 版本号
     versionsData: {}
 })
-=======
-  work_order_type: 0,
-  // 版本号
-  version_num: '',
-  options: [], // 版本号选项
-  sheets: [], // sheet选项
-  queryForm: {
-    projectId: currentProject.value?.id,
-    versions: '',
-    sheet: '',
-    pageSize: 20,
-    pageNum: 1
-  },
-  loading: {
-    versions: false,
-    sheets: false,
-    list: false
-  },
-  error: null,
-  // 前三个
-  tableData: [],
-  // 物质设备清单
-  // tableData_sdsqd: [],
-  // 展开收起
-  isOpen: false,
-  // 版本号
-  versionsData: {}
-});
->>>>>>> 3158dc84f7a6ef4568e1eeaf33df5b4b2fd1768f
 // tab切换
 const handleTabChange = (tab) => {
     state.tableData = [];
@@ -276,7 +160,6 @@ async function getVersionNums(isSheet = true) {
             pageNum: 1
         });
 
-<<<<<<< HEAD
         const { code, rows } = res || {};
         if (code === 200) {
             state.options = rows || [];
@@ -294,25 +177,9 @@ async function getVersionNums(isSheet = true) {
                     await handleQueryList(isSheet);
                 }
             }
-=======
-    const { code, rows } = res || {};
-    if (code === 200) {
-      state.options = rows || [];
-      if (state.options.length > 0) {
-        state.queryForm.versions = state.options[0].versions;
-        // 等待表名加载完成
-        console.log(isSheet, state.sheets.length);
-        if (isSheet) {
-          await handleSheetName();
->>>>>>> 3158dc84f7a6ef4568e1eeaf33df5b4b2fd1768f
         } else {
             await handleQueryList(isSheet);
         }
-      }
-    } else {
-      state.error = `获取版本号失败: 错误码 ${code}`;
-      console.error(state.error);
-    }
     } catch (err) {
         state.error = `获取版本号时发生错误: ${err.message}`;
         console.error(state.error, err);
@@ -355,7 +222,6 @@ async function handleSheetName() {
 
 // 获取列表
 async function handleQueryList(isSheet = true) {
-<<<<<<< HEAD
     if (isSheet && !state.queryForm.sheet) {
         console.warn('表名不存在，无法获取列表数据');
         return;
@@ -378,38 +244,10 @@ async function handleQueryList(isSheet = true) {
         console.error(state.error, err);
     } finally {
         state.loading.list = false;
-=======
-  if (isSheet && !state.queryForm.sheet) {
-    console.warn('表名不存在，无法获取列表数据');
-    return;
-  }
-
-  try {
-    state.loading.list = true;
-    state.error = null;
-
-    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}`;
-      console.error(state.error);
->>>>>>> 3158dc84f7a6ef4568e1eeaf33df5b4b2fd1768f
-    }
-  } catch (err) {
-    state.error = `获取列表数据时发生错误: ${err.message}`;
-    console.error(state.error, err);
-  } finally {
-    state.loading.list = false;
     }
 }
 // 上传excel
 function importExcel(options) {
-<<<<<<< HEAD
     console.log(options);
     let formData = new FormData();
     formData.append("file", options.file);
@@ -426,26 +264,6 @@ function importExcel(options) {
         }
     }).finally(() => {
         state.loading.list = false;
-=======
-  console.log(options);
-  const loading = ElLoading.service({
-    lock: true,
-    text: '正在导入，请稍候...',
-    background: 'rgba(0, 0, 0, 0.7)'
-  });
-  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(false);
-      } else {
-        proxy.$modal.msgError(res.msg || '导入失败');
-      }
->>>>>>> 3158dc84f7a6ef4568e1eeaf33df5b4b2fd1768f
     })
         .finally(() => {
             loading.close();