入库调用窗口及样式调整

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

@@ -82,14 +82,14 @@
           <Input type="textarea" v-model="inboundModal.form.remark" :rows="2" />
         </FormItem>
 
-        <h4>明细（从物料库选择）</h4>
-        <Table :data="inboundModal.details" size="small" border>
-          <TableColumn prop="material_code" title="物料编码" />
-          <TableColumn prop="material_name" title="物料名称" />
-          <TableColumn prop="inbound_quantity" title="入库数量" />
-          <TableColumn prop="unit_price" title="单价" />
-          <TableColumn prop="total_amount" title="总金额" />
-        </Table>
+        <h4>明细（从物料库选择）
+          <div style="float: right;">
+            <Button size="small" class="mr5" type="primary" @click="showMaterialSelector = true">添加</Button>
+            <Button size="small" type="error" @click="deleteSelectedInboundDetails">删除</Button>
+          </div>
+        </h4>
+        <Table :data="inboundModal.details" :columns="inboundDetailColumns" size="small" border @on-selection-change="onInboundDetailSelectionChange" style="width: 100%" />
+        <MaterialSelector v-model="showMaterialSelector" :selected="[]" @on-ok="handleInboundMaterialSelectorOk" @cancel="showMaterialSelector = false" />
       </Form>
       <div slot="footer">
         <Button @click="inboundModal.visible=false">取消</Button>
@@ -103,11 +103,7 @@
         <FormItem label="申请单号"><span>{{ returnModal.record.application_no }}</span></FormItem>
         <FormItem label="申请人"><span>{{ returnModal.record.applicant_name }}</span></FormItem>
         <FormItem label="归还明细">
-          <Table :data="returnModal.details" size="small" border>
-            <TableColumn prop="material_name" title="物料名称" />
-            <TableColumn prop="apply_quantity" title="申请数量" />
-            <TableColumn prop="returned_quantity" title="归还数量" />
-          </Table>
+          <Table :data="returnModal.details" :columns="returnDetailColumns" size="small" border />
         </FormItem>
       </Form>
       <div slot="footer">
@@ -122,18 +118,9 @@
       <div v-else>
         <Row :gutter="16"><Col span="12"><p><strong>单号：</strong>{{ detailModal.data.inbound_no || detailModal.data.application_no }}</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="inbound_quantity" title="数量" />
-          <TableColumn prop="unit_price" 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="时间" />
-        </Table>
+        <Table :data="detailModal.logs" :columns="detailLogsColumns" size="small" border />
       </div>
       <div slot="footer"><Button type="primary" @click="detailModal.visible=false">关闭</Button></div>
     </Modal>
@@ -151,9 +138,11 @@ import {
   getInventoryList,
   getInboundById
 } from '@/api/key-dm-inbound'
+import MaterialSelector from '@/view/key-person/key_dm_conf/materialSelector.vue'
 
 export default {
   name: 'key-dm-inbound-index',
+  components: { MaterialSelector },
   data () {
     return {
       activeTab: 'inbound',
@@ -186,6 +175,67 @@ export default {
         { title: '可用', key: 'available_quantity', align: 'center' },
         { title: '借出', key: 'borrowed_quantity', align: 'center' }
       ],
+      // 模态窗口内表格列定义
+      inboundDetailColumns: [
+        { type: 'selection', width: 60 },
+        { title: '物料编码', key: 'material_code', minWidth: 120 },
+        { title: '物料名称', key: 'material_name', minWidth: 150 },
+        { title: '入库数量', key: 'inbound_quantity', minWidth: 120, render: (h, params) => {
+          return h('InputNumber', {
+            props: {
+              value: params.row.inbound_quantity || 0,
+              min: 0,
+              precision: 0
+            },
+            style: { width: '100px' },
+            on: {
+              input: (val) => {
+                params.row.inbound_quantity = val || 0
+                params.row.total_amount = ((params.row.inbound_quantity || 0) * (params.row.unit_price || 0)).toFixed(2)
+              }
+            }
+          })
+        }},
+        { title: '单价', key: 'unit_price', minWidth: 120, render: (h, params) => {
+          return h('InputNumber', {
+            props: {
+              value: params.row.unit_price || 0,
+              min: 0,
+              precision: 2
+            },
+            style: { width: '100px' },
+            on: {
+              input: (val) => {
+                params.row.unit_price = val || 0
+                params.row.total_amount = ((params.row.inbound_quantity || 0) * (params.row.unit_price || 0)).toFixed(2)
+              }
+            }
+          })
+        }},
+        { title: '总金额', key: 'total_amount', minWidth: 120, render: (h, params) => {
+          const amount = ((params.row.inbound_quantity || 0) * (params.row.unit_price || 0)).toFixed(2)
+          return h('span', amount)
+        }}
+      ],
+      returnDetailColumns: [
+        { title: '物料名称', key: 'material_name' },
+        { title: '申请数量', key: 'apply_quantity' },
+        { title: '归还数量', key: 'returned_quantity' }
+      ],
+      detailDetailColumns: [
+        { title: '物料编码', key: 'material_code' },
+        { title: '物料名称', key: 'material_name' },
+        { title: '数量', key: 'inbound_quantity' },
+        { title: '单价', key: 'unit_price' }
+      ],
+      detailLogsColumns: [
+        { title: '操作类型', key: 'op_type' },
+        { title: '数量', key: 'quantity' },
+        { title: '时间', key: 'create_time' }
+      ],
+      // 选择器控制与已选明细
+      showMaterialSelector: false,
+      inboundSelectedDetails: [],
       inboundModal: { visible: false, isEdit: false, saving: false, form: {}, details: [] },
       returnModal: { visible: false, record: {}, details: [], saving: false },
       detailModal: { visible: false, loading: false, data: {}, details: [], logs: [] }
@@ -222,6 +272,40 @@ export default {
       this.inboundModal.details = []
       this.inboundModal.visible = true
     },
+    onInboundDetailSelectionChange (list) {
+      this.inboundSelectedDetails = list || []
+    },
+    handleInboundMaterialSelectorOk (selectedRows) {
+      if (!Array.isArray(selectedRows) || selectedRows.length === 0) {
+        this.$Message.warning('未选择物料')
+        return
+      }
+      selectedRows.forEach(sel => {
+        const code = sel.material_code
+        const exist = this.inboundModal.details.find(d => d.material_code === code)
+        if (exist) {
+          exist.inbound_quantity = Number(exist.inbound_quantity || 0) + 1
+        } else {
+          this.inboundModal.details.push({
+            material_code: sel.material_code,
+            material_name: sel.material_name,
+            inbound_quantity: 0,
+            unit_price: 0,
+            total_amount: 0
+          })
+        }
+      })
+      this.showMaterialSelector = false
+    },
+    deleteSelectedInboundDetails () {
+      if (!this.inboundSelectedDetails || this.inboundSelectedDetails.length === 0) {
+        this.$Message.warning('请先选择要删除的明细行')
+        return
+      }
+      const toRemoveCodes = this.inboundSelectedDetails.map(r => r.material_code)
+      this.inboundModal.details = this.inboundModal.details.filter(d => !toRemoveCodes.includes(d.material_code))
+      this.inboundSelectedDetails = []
+    },
     openEdit (row) {
       this.inboundModal.isEdit = true
       getInboundById({ id: row.id }).then(ret => {