办公用品组件与相关页面调整

src/view/key-person/key_dm_conf/materialSelector.vue

@@ -23,14 +23,7 @@
       </Row>
     </div>
 
-    <Table :data="rows" :loading="loading" @on-selection-change="onSelectionChange" border>
-      <TableColumn type="selection" width="60"></TableColumn>
-      <TableColumn prop="material_code" title="物料编码" align="center" />
-      <TableColumn prop="material_name" title="物料名称" align="center" />
-      <TableColumn prop="unit" title="单位" align="center" width="80" />
-      <TableColumn prop="available_quantity" title="可用库存" align="center" width="120" />
-      <TableColumn prop="category_Name" title="分类" align="center" />
-    </Table>
+    <Table :data="rows" :loading="loading" :columns="columns" @on-selection-change="onSelectionChange" border />
 
     <Page class="page_style" :total="pager.totalRecord" :current="pager.pageNo" :page-size="pager.pageSize" show-total show-sizer
       @on-change="pageChange" @on-page-size-change="sizeChange" />
@@ -63,6 +56,15 @@ export default {
       selectedRows: [],
       confirming: false,
       categoryOptions: []
+      ,
+      columns: [
+        { type: 'selection', width: 60 },
+        { title: '物料编码', key: 'material_code', align: 'center' },
+        { title: '物料名称', key: 'material_name', align: 'center' },
+        { title: '单位', key: 'unit', align: 'center', width: 80 },
+        { title: '可用库存', key: 'available_quantity', align: 'center', width: 120 },
+        { title: '分类', key: 'category_Name', align: 'center' }
+      ]
     }
   },
   computed: {

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

@@ -67,13 +67,14 @@
         </FormItem>
 
         <h4>申请明细</h4>
-        <Table :data="applyModal.details" size="small" border>
-          <TableColumn prop="material_code" title="物料编码" />
-          <TableColumn prop="material_name" title="物料名称" />
-          <TableColumn prop="apply_quantity" title="申请数量" />
-          <TableColumn prop="unit" title="单位" />
-          <TableColumn prop="issue_remark" title="备注" />
-        </Table>
+        <Row type="flex" justify="end" class="mb8">
+          <Col>
+            <Button size="small" class="mr5" type="primary" @click="showMaterialSelector = true">添加</Button>
+            <Button size="small" type="error" @click="deleteSelectedDetails">删除</Button>
+          </Col>
+        </Row>
+        <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 slot="footer">
         <Button @click="applyModal.visible=false">取消</Button>
@@ -87,12 +88,7 @@
         <FormItem label="申请单号"><span>{{ approveModal.record.application_no }}</span></FormItem>
         <FormItem label="申请人"><span>{{ approveModal.record.applicant_name }}</span></FormItem>
         <FormItem label="申请明细">
-          <Table :data="approveModal.details" size="small" border>
-            <TableColumn prop="material_name" title="物料名称" />
-            <TableColumn prop="apply_quantity" title="申请数量" />
-            <TableColumn prop="unit" title="单位" />
-            <TableColumn prop="available_quantity" title="可用库存" />
-          </Table>
+          <Table :data="approveModal.details" :columns="approveDetailColumns" size="small" border />
         </FormItem>
         <FormItem label="审批意见">
           <Input type="textarea" v-model="approveModal.opinion" placeholder="驳回时必填" />
@@ -112,20 +108,9 @@
         <Row :gutter="16"><Col span="12"><p><strong>申请人：</strong>{{ detailModal.data.applicant_name }}</p></Col><Col span="12"><p><strong>部门：</strong>{{ detailModal.data.department_name }}</p></Col></Row>
         <Row class="mt8"><Col span="24"><p><strong>领用用途：</strong>{{ detailModal.data.borrow_purpose }}</p></Col></Row>
         <Row class="mt8"><Col span="24"><h4>明细</h4></Col></Row>
-        <Table :data="detailModal.details" size="small" border>
-          <TableColumn prop="material_code" title="物料编码" />
-          <TableColumn prop="material_name" title="物料名称" />
-          <TableColumn prop="apply_quantity" title="申请数量" />
-          <TableColumn prop="unit" title="单位" />
-          <TableColumn prop="returned_quantity" title="已归还" />
-        </Table>
+        <Table :data="detailModal.details" :columns="detailDetailColumns" size="small" border />
         <Row class="mt8"><Col span="24"><h4>审批记录</h4></Col></Row>
-        <Table :data="detailModal.logs" size="small" border>
-          <TableColumn prop="op_type" title="操作类型" />
-          <TableColumn prop="quantity" title="数量" />
-          <TableColumn prop="create_time" title="时间" />
-          <TableColumn prop="create_by" title="操作人" />
-        </Table>
+        <Table :data="detailModal.logs" :columns="detailLogsColumns" size="small" border />
       </div>
       <div slot="footer"><Button type="primary" @click="detailModal.visible=false">关闭</Button></div>
     </Modal>
@@ -143,9 +128,11 @@ import {
   rejectBorrow,
   getBorrowById
 } from '@/api/key-dm-inventory'
+import MaterialSelector from '@/view/key-person/key_dm_conf/materialSelector.vue'
 
 export default {
   name: 'key-dm-inventory-index',
+  components: { MaterialSelector },
   data () {
     return {
       activeTab: 'apply',
@@ -180,6 +167,37 @@ export default {
         { title: '审批完成时间', key: 'approval_complete_time', align: 'center' },
         { title: '操作', slot: 'action', width: 100, align: 'center' }
       ],
+      // 模态窗口内表格列定义
+      applyDetailColumns: [
+        { type: 'selection', width: 60 },
+        { title: '物料编码', key: 'material_code' },
+        { title: '物料名称', key: 'material_name' },
+        { title: '申请数量', key: 'apply_quantity' },
+        { title: '单位', key: 'unit' },
+        { title: '备注', key: 'issue_remark' }
+      ],
+      approveDetailColumns: [
+        { title: '物料名称', key: 'material_name' },
+        { title: '申请数量', key: 'apply_quantity' },
+        { title: '单位', key: 'unit' },
+        { title: '可用库存', key: 'available_quantity' }
+      ],
+      detailDetailColumns: [
+        { title: '物料编码', key: 'material_code' },
+        { title: '物料名称', key: 'material_name' },
+        { title: '申请数量', key: 'apply_quantity' },
+        { title: '单位', key: 'unit' },
+        { title: '已归还', key: 'returned_quantity' }
+      ],
+      detailLogsColumns: [
+        { title: '操作类型', key: 'op_type' },
+        { title: '数量', key: 'quantity' },
+        { title: '时间', key: 'create_time' },
+        { title: '操作人', key: 'create_by' }
+      ],
+      // 选择器控制与已选明细
+      showMaterialSelector: false,
+      applySelectedDetails: [],
       applyModal: { visible: false, isEdit: false, saving: false, form: {}, details: [] },
       approveModal: { visible: false, record: {}, details: [], opinion: '', submitting: false },
       detailModal: { visible: false, loading: false, data: {}, details: [], logs: [] }
@@ -227,6 +245,41 @@ export default {
       })
       this.applyModal.visible = true
     },
+    onApplyDetailSelectionChange (list) {
+      this.applySelectedDetails = list || []
+    },
+    handleMaterialSelectorOk (selectedRows) {
+      if (!Array.isArray(selectedRows) || selectedRows.length === 0) {
+        this.$Message.warning('未选择物料')
+        return
+      }
+      selectedRows.forEach(sel => {
+        const code = sel.material_code
+        const exist = this.applyModal.details.find(d => d.material_code === code)
+        if (exist) {
+          exist.apply_quantity = Number(exist.apply_quantity || 0) + 1
+        } else {
+          this.applyModal.details.push({
+            material_code: sel.material_code,
+            material_name: sel.material_name,
+            apply_quantity: 1,
+            unit: sel.unit,
+            issue_remark: '',
+            available_quantity: sel.available_quantity || 0
+          })
+        }
+      })
+      this.showMaterialSelector = false
+    },
+    deleteSelectedDetails () {
+      if (!this.applySelectedDetails || this.applySelectedDetails.length === 0) {
+        this.$Message.warning('请先选择要删除的明细行')
+        return
+      }
+      const toRemoveCodes = this.applySelectedDetails.map(r => r.material_code)
+      this.applyModal.details = this.applyModal.details.filter(d => !toRemoveCodes.includes(d.material_code))
+      this.applySelectedDetails = []
+    },
     saveApplication () {
       this.applyModal.saving = true
       const payload = Object.assign({}, this.applyModal.form, { details: this.applyModal.details })