数据加载

src/view/key-person/key_dm_inventory/index.vue

@@ -316,6 +316,8 @@
 
     <!-- 申请弹窗 -->
     <Modal v-model="applyModal.visible" :title="applyModal.isEdit ? '修改领用申请' : '新增领用申请'" width="800">
+      <Spin fix v-if="applyModalLoading"></Spin>
+      <div v-else>
         <Form :model="applyModal.form" :rules="applyRules" :label-width="120" ref="applyForm">
           <!-- <FormItem label="申请人">
             <Input v-model="applyModal.form.applicant_name" disabled />
@@ -362,6 +364,7 @@
           <Table :data="applyModal.details" :columns="applyDetailColumns" size="small" border @on-selection-change="onApplyDetailSelectionChange" />
           <MaterialSelector v-model="showMaterialSelector" :selected="[]" @on-ok="handleMaterialSelectorOk" @cancel="showMaterialSelector = false"/>
         </Form>
+      </div>
       <div slot="footer">
         <Button @click="applyModal.visible=false">取消</Button>
         <Button type="primary" :loading="applyModal.saving" @click="saveApplication">保存</Button>
@@ -370,6 +373,8 @@
 
     <!-- 审批弹窗 -->
     <Modal v-model="approveModal.visible" title="申请处理" width="700">
+      <Spin fix v-if="approveModalLoading"></Spin>
+      <div v-else>
         <Form :model="approveModal.record" :label-width="120">
           <FormItem label="部门"><span>{{ approveModal.record.department_name }}</span></FormItem>
           <FormItem label="申请人"><span>{{ approveModal.record.applicant_name }}</span></FormItem>
@@ -380,6 +385,7 @@
             <Input type="textarea" v-model="approveModal.opinion" placeholder="驳回时必填" />
           </FormItem>
         </Form>
+      </div>
       <div slot="footer">
         <Button @click="approveModal.visible=false">取消</Button>
         <Button type="success" :loading="approveModal.submitting" @click="confirmApprove">通过</Button>
@@ -406,6 +412,8 @@
 
     <!-- 入库弹窗 -->
     <Modal v-model="inboundModal.visible" :title="inboundModal.isEdit ? '修改入库' : '新增入库'" width="800">
+      <Spin fix v-if="inboundModalLoading"></Spin>
+      <div v-else>
         <Form :model="inboundModal.form" :rules="inboundRules" :label-width="120" ref="inboundForm">
           <FormItem label="入库单号" prop="inbound_no">
             <Input v-model="inboundModal.form.inbound_no" />
@@ -438,6 +446,7 @@
           <Table :data="inboundModal.details" :columns="inboundDetailColumns" size="small" border @on-selection-change="onInboundDetailSelectionChange" style="width: 100%" />
           <MaterialSelector v-model="showInboundMaterialSelector" :selected="[]" @on-ok="handleInboundMaterialSelectorOk" @cancel="showInboundMaterialSelector = false" />
         </Form>
+      </div>
       <div slot="footer">
         <Button @click="inboundModal.visible=false">取消</Button>
         <Button type="primary" :loading="inboundModal.saving" @click="saveInbound">保存</Button>
@@ -446,6 +455,8 @@
 
     <!-- 归还弹窗 -->
     <Modal v-model="returnModal.visible" title="归还物品" width="700">
+      <Spin fix v-if="returnModalLoading"></Spin>
+      <div v-else>
         <Form :model="returnModal.record" :label-width="120">
           <FormItem label="部门"><span>{{ returnModal.record.department_name }}</span></FormItem>
           <FormItem label="申请人"><span>{{ returnModal.record.applicant_name }}</span></FormItem>
@@ -453,6 +464,7 @@
             <Table :data="returnModal.details" :columns="returnDetailColumns" size="small" border />
           </FormItem>
         </Form>
+      </div>
       <div slot="footer">
         <Button @click="returnModal.visible=false">取消</Button>
         <Button type="primary" :loading="returnModal.saving" @click="confirmReturn">归还</Button>
@@ -590,6 +602,10 @@ export default {
         approverList: [], // 审批人列表
         currentBorrowId: '' // 暂存当前提交的申请ID
       },
+      approveModalLoading: false,
+      returnModalLoading: false,
+      applyModalLoading: false,
+      inboundModalLoading: false,
       pushBadgeShow: false,
       // 申请弹窗中的可编辑行状态
       editingRowIndex: -1,
@@ -1217,6 +1233,7 @@ export default {
     openEdit (row) {
       console.log(row)
       this.applyModal.isEdit = true
+      this.applyModalLoading = true
       this.applyModal.form = Object.assign({}, row)
       // 关键：时间戳转 yyyy-MM-dd 字符串
       if (this.applyModal.form.expected_return_date) {
@@ -1234,6 +1251,15 @@ export default {
         if (ret.data && ret.data.errcode === 0) {
           this.applyModal.details = ret.data.data.details || []
         }
+      }).catch(err => {
+        // 捕获所有异常（网络错误、接口抛错、代码逻辑错）
+        this.$Notice.error({
+          title: '查询失败',
+          desc: err.message || '网络异常，请稍后重试'
+        })
+      }).finally(() => {
+        // 无论成功/失败，最终都会执行（关闭loading）
+        this.applyModalLoading = false
       })
       this.applyModal.visible = true
       this.exitEditMode()
@@ -1366,6 +1392,8 @@ export default {
     revoke (row) { revokeBorrow({ id: row.id }).then(ret => { if (ret.data && ret.data.errcode === 0) { this.$Message.success('撤回成功'); this.fetchList('apply') } else this.$Notice.error({ title: '撤回失败', desc: ret.data && ret.data.errmsg }) }) },
 
     openApproveModal (row) {
+      this.approveModal.visible = true
+      this.approveModalLoading = true
       this.approveModal.record = Object.assign({}, row)
       this.approveModal.opinion = ''
       // load details and current inventory for display
@@ -1373,8 +1401,16 @@ export default {
         if (ret.data && ret.data.errcode === 0) {
           this.approveModal.details = ret.data.data.details || []
         }
+      }).catch(err => {
+        // 捕获所有异常（网络错误、接口抛错、代码逻辑错）
+        this.$Notice.error({
+          title: '查询失败',
+          desc: err.message || '网络异常，请稍后重试'
+        })
+      }).finally(() => {
+        // 无论成功/失败，最终都会执行（关闭loading）
+        this.approveModalLoading = false
       })
-      this.approveModal.visible = true
     },
     confirmApprove () {
       this.approveModal.submitting = true
@@ -1534,6 +1570,7 @@ export default {
     },
     openEditInbound (row) {
       this.inboundModal.isEdit = true
+      this.inboundModalLoading = true
       getInboundById({ id: row.id }).then(ret => {
         if (ret.data && ret.data.errcode === 0) {
           this.inboundModal.form = ret.data.data || {}
@@ -1544,6 +1581,14 @@ export default {
           }
           this.inboundModal.details = ret.data.data.details || []
         }
+      }).catch(err => {
+        // 捕获所有异常（网络错误、接口抛错、代码逻辑错）
+        this.$Notice.error({
+          title: '查询失败',
+          desc: err.message || '网络异常，请稍后重试'
+        })
+      }).finally(() => {
+        this.inboundModalLoading = false
       })
       this.inboundModal.visible = true
     },
@@ -1628,12 +1673,22 @@ export default {
       })
     },
     openReturnModal (row) {
+      this.returnModal.visible = true
+      this.returnModalLoading = true
       this.returnModal.record = Object.assign({}, row)
       this.returnModal.details = []
       getPendingReturnById({ id: row.id }).then(ret => {
         if (ret.data && ret.data.errcode === 0) this.returnModal.details = ret.data.data.details || []
+      }).catch(err => {
+        // 捕获所有异常（网络错误、接口抛错、代码逻辑错）
+        this.$Notice.error({
+          title: '查询失败',
+          desc: err.message || '网络异常，请稍后重试'
+        })
+      }).finally(() => {
+        // 无论成功/失败，最终都会执行（关闭loading）
+        this.returnModalLoading = false
       })
-      this.returnModal.visible = true
     },
     confirmReturn () {
       this.returnModal.saving = true

src/view/key-person/key_dm_inventory/stats.vue

@@ -53,7 +53,7 @@
 
     <!-- 使用明细弹窗 -->
     <Modal v-model="detailModal.visible" title="明细" width="800">
-      <Table :data="detailModal.rows" :columns="detailModal.columns" size="small" border />
+      <Table :data="detailModal.rows" :loading="loading.detail" :columns="detailModal.columns" size="small" border />
       <div slot="footer"><Button type="primary" @click="detailModal.visible=false">关闭</Button></div>
     </Modal>
   </div>
@@ -75,7 +75,7 @@ export default {
       workStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
       workEnd: new Date(),
       tables: { usage: [], workload: [] },
-      loading: { usage: false, workload: false },
+      loading: { usage: false, workload: false, detail: false },
       usageColumns: [
         { type: 'index', title: '序号', width: 60, align: 'center' },
         { title: '部门', key: 'department_name', align: 'center' },
@@ -135,12 +135,37 @@ export default {
         { title: '已归还数量', key: 'returned_quantity', align: 'center' }
       ]
       this.detailModal.visible = true
+      this.loading.detail = true
+      this.detailModal.rows = []
       const st = this.usageStart ? normalizeVisitTimeValue(this.usageStart) : null
       const et = this.usageEnd ? normalizeVisitTimeValue(this.usageEnd).substring(0, 10) + ' 23:59:59' : null
-      getUsageDetails({ start: st, end: et, material: row.material_id, department: row.department_id }).then(ret => {
-        console.log(ret)
-        if (ret.data && ret.data.errcode === 0) this.detailModal.rows = ret.data.data || []
-        else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
+      getUsageDetails({
+        start: st,
+        end: et,
+        material: row.material_id,
+        department: row.department_id
+      }).then(ret => {
+        // 先判断 ret 是否存在，避免报错
+        if (!ret || !ret.data) {
+          throw new Error('接口返回格式异常')
+        }
+        if (ret.data.errcode === 0) {
+          this.detailModal.rows = ret.data.data || []
+        } else {
+          this.$Notice.error({
+            title: '查询失败',
+            desc: ret.data.errmsg || '未知错误'
+          })
+        }
+      }).catch(err => {
+        // 捕获所有异常（网络错误、接口抛错、代码逻辑错）
+        this.$Notice.error({
+          title: '查询失败',
+          desc: err.message || '网络异常，请稍后重试'
+        })
+      }).finally(() => {
+        // 无论成功/失败，最终都会执行（关闭loading）
+        this.loading.detail = false
       })
     },
     loadWorkload () {