优化单据的序列号录入和选择功能

jshERP-web/src/components/jeecgbiz/JSelectList.vue

 <template>
   <div>
     <a-input-search v-if="kind === 'material'" v-model="names" placeholder="条码或名称" @pressEnter="onPressEnter" @search="onSearch"></a-input-search>
-    <a-input-search v-if="kind === 'batch'||kind === 'sn'" v-model="names" placeholder="请选择" readOnly @search="onSearch"></a-input-search>
+    <a-input-search v-if="kind === 'batch'||kind === 'sn'||kind === 'snAdd'" v-model="names" placeholder="请点开弹窗" readOnly @search="onSearch"></a-input-search>
     <j-select-material-modal v-if="kind === 'material'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
     <j-select-batch-modal v-if="kind === 'batch'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
     <j-select-sn-modal v-if="kind === 'sn'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
+    <j-select-sn-add-modal v-if="kind === 'snAdd'" ref="selectModal" :rows="rows" :multi="multi" :bar-code="value" @ok="selectOK" @initComp="initComp"/>
   </div>
 </template>
 
@@ -12,13 +13,14 @@
   import JSelectMaterialModal from './modal/JSelectMaterialModal'
   import JSelectBatchModal from './modal/JSelectBatchModal'
   import JSelectSnModal from './modal/JSelectSnModal'
+  import JSelectSnAddModal from './modal/JSelectSnAddModal'
   import { getMpListShort } from "@/utils/util"
   import {getMaterialByBarCode} from '@/api/api'
   import Vue from 'vue'
 
   export default {
     name: 'JSelectList',
-    components: {JSelectMaterialModal, JSelectBatchModal, JSelectSnModal},
+    components: {JSelectMaterialModal, JSelectBatchModal, JSelectSnModal, JSelectSnAddModal},
     props: {
       value: {
         type: String,

jshERP-web/src/components/jeecgbiz/modal/JSelectBatchModal.vue

@@ -18,13 +18,14 @@
             <a-row :gutter="24">
               <a-col :md="12" :sm="24">
                 <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="批号">
-                  <a-input placeholder="请输入批号" v-model="queryParam.name"></a-input>
+                  <a-input ref="name" placeholder="请输入批号" v-model="queryParam.name"></a-input>
                 </a-form-item>
               </a-col>
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                 <a-col :md="12" :sm="24">
-                  <a-button type="primary" @click="onSearch">查询</a-button>
+                  <a-button type="primary" @click="loadData(1)">查询</a-button>
                   <a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button>
+                  <span style="margin-left: 20px">提示：双击行可以直接选中</span>
                 </a-col>
               </span>
             </a-row>
@@ -127,7 +128,7 @@
           this.$emit('initComp', '')
         }
       },
-      async loadData(arg) {
+      loadData(arg) {
         if(this.rows) {
           if(JSON.parse(this.rows).depotId && JSON.parse(this.rows).barCode ){
             let depotItemId = JSON.parse(this.rows).id
@@ -143,7 +144,7 @@
         }
         this.loading = true
         let params = this.getQueryParams()//查询条件
-        await getBatchNumberList(params).then((res) => {
+        getBatchNumberList(params).then((res) => {
           if (res && res.code === 200) {
             this.dataSource = res.data.rows
             this.ipagination.total = res.data.total
@@ -153,9 +154,10 @@
         })
       },
       showModal() {
-        this.visible = true;
-        this.loadData();
-        this.form.resetFields();
+        this.visible = true
+        this.$nextTick(() => this.$refs.name.focus())
+        this.loadData()
+        this.form.resetFields()
       },
       getQueryParams() {
         let param = Object.assign({}, this.queryParam, this.isorter);
@@ -216,7 +218,18 @@
         this.selectionRows = selectionRows;
       },
       onSearch() {
-        this.loadData(1);
+        if(this.dataSource && this.dataSource.length===1) {
+          if(this.queryParam.name === this.dataSource[0].batchNumber) {
+            let arr = []
+            arr.push(this.dataSource[0].id)
+            this.selectedRowKeys = arr
+            this.handleSubmit()
+          } else {
+            this.loadData(1)
+          }
+        } else {
+          this.loadData(1)
+        }
       },
       modalFormOk() {
         this.loadData();

jshERP-web/src/components/jeecgbiz/modal/JSelectSnModal.vue

@@ -7,10 +7,9 @@
     @cancel="close"
     cancelText="关闭"
     style="top:5%;height: 100%;overflow-y: hidden"
-    wrapClassName="ant-modal-cust-warp"
-  >
+    wrapClassName="ant-modal-cust-warp">
     <a-row :gutter="10" style="padding: 10px; margin: -10px">
-      <a-col :md="24" :sm="24">
+      <a-col :md="16" :sm="24">
         <!-- 查询区域 -->
         <div class="table-page-search-wrapper">
           <!-- 搜索区域 -->
@@ -18,32 +17,59 @@
             <a-row :gutter="24">
               <a-col :md="12" :sm="24">
                 <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
-                  <a-input placeholder="请输入序列号" v-model="queryParam.name"></a-input>
+                  <a-input ref="name" placeholder="请输入序列号并回车" v-model="queryParam.name"></a-input>
                 </a-form-item>
               </a-col>
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                 <a-col :md="12" :sm="24">
                   <a-button type="primary" @click="onSearch">查询</a-button>
+                  <a-button style="margin-left: 8px" type="primary" @click="checkAll">全选</a-button>
                   <a-button style="margin-left: 8px" @click="searchReset(1)">重置</a-button>
                 </a-col>
               </span>
             </a-row>
           </a-form>
-          <a-table
-            ref="table"
-            :scroll="scrollTrigger"
-            size="middle"
-            rowKey="id"
-            :columns="columns"
-            :dataSource="dataSource"
-            :pagination="ipagination"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
-            :loading="loading"
-            :customRow="rowAction"
-            @change="handleTableChange">
-          </a-table>
         </div>
       </a-col>
+      <a-col :md="8" :sm="24">
+        <span style="font-size: 16px;font-weight: bold;">此处为已选中的序列号列表</span>
+        <a-button style="margin-left: 8px" @click="clearAllSn">清空</a-button>
+      </a-col>
+    </a-row>
+    <a-row :gutter="10" style="padding: 10px; margin: -10px">
+      <a-col :md="16" :sm="24">
+        <a-table
+          ref="table"
+          style="width:95%"
+          :scroll="scrollTrigger"
+          size="middle"
+          rowKey="id"
+          :columns="leftColumns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          @change="handleTableChange">
+          <span slot="action" slot-scope="text, record">
+              <a @click="checkSn(record)">选中</a>
+          </span>
+        </a-table>
+      </a-col>
+      <a-col :md="8" :sm="24">
+        <a-table
+          ref="table"
+          :scroll="scrollTrigger"
+          size="middle"
+          rowKey="id"
+          :columns="rightColumns"
+          :dataSource="checkDataSource"
+          :pagination="false"
+          :loading="loading"
+          @change="handleTableChange">
+           <span slot="action" slot-scope="text, record">
+              <a @click="removeSn(record)">移除</a>
+           </span>
+        </a-table>
+      </a-col>
     </a-row>
   </a-modal>
 </template>
@@ -60,7 +86,7 @@
     props: ['rows', 'multi', 'barCode'],
     data() {
       return {
-        modalWidth: 800,
+        modalWidth: 1000,
         queryParam: {
           name: "",
           depotItemId: '',
@@ -76,13 +102,19 @@
           sm: { span: 16 },
         },
         categoryTree:[],
-        columns: [
+        leftColumns: [
           {dataIndex: 'serialNumber', title: '序列号', width: 100, align: 'left'},
           {dataIndex: 'inBillNo', title: '入库单号', width: 100, align: 'left'},
           {dataIndex: 'createTimeStr', title: '创建时间', width: 100, align: 'left'},
+          {dataIndex: 'action', title: '操作', align:"center", width: 50, scopedSlots: { customRender: 'action' }}
+        ],
+        rightColumns: [
+          {dataIndex: 'serialNumber', title: '序列号', width: 100, align: 'left'},
+          {tdataIndex: 'action', title: '操作', align:"center", width: 50, scopedSlots: { customRender: 'action' }}
         ],
-        scrollTrigger: {},
+        scrollTrigger: {y: 460},
         dataSource: [],
+        checkDataSource: [],
         selectedRowKeys: [],
         selectRows: [],
         selectIds: [],
@@ -132,11 +164,10 @@
         if (this.barCode) {
           this.$emit('initComp', this.barCode)
         } else {
-          // JSelectUserByDep组件bug issues/I16634
           this.$emit('initComp', '')
         }
       },
-      async loadData(arg) {
+      loadData(arg) {
         if(this.rows) {
           if(JSON.parse(this.rows).depotId && JSON.parse(this.rows).barCode ){
             let depotItemId = JSON.parse(this.rows).id
@@ -152,19 +183,30 @@
         }
         this.loading = true
         let params = this.getQueryParams()//查询条件
-        await getEnableSerialNumberList(params).then((res) => {
+        getEnableSerialNumberList(params).then((res) => {
           if (res && res.code === 200) {
             this.dataSource = res.data.rows
             this.ipagination.total = res.data.total
+            if(res.data.total ===1) {
+              if(this.queryParam.name === this.dataSource[0].serialNumber) {
+                let obj = {
+                  id: this.dataSource[0].id,
+                  serialNumber: this.dataSource[0].serialNumber
+                }
+                this.checkSn(obj)
+                this.queryParam.name = ''
+              }
+            }
           }
         }).finally(() => {
           this.loading = false
         })
       },
       showModal() {
-        this.visible = true;
-        this.loadData();
-        this.form.resetFields();
+        this.visible = true
+        this.$nextTick(() => this.$refs.name.focus())
+        this.loadData()
+        this.form.resetFields()
       },
       getQueryParams() {
         let param = Object.assign({}, this.queryParam, this.isorter);
@@ -179,6 +221,20 @@
         }
         return str;
       },
+      checkAll() {
+        this.checkDataSource = []
+        let data = this.dataSource
+        for (let i = 0; i < data.length; i++) {
+          let checkObj = {
+            id: data[i].id,
+            serialNumber: data[i].serialNumber
+          }
+          this.checkDataSource.push(checkObj)
+        }
+      },
+      clearAllSn() {
+        this.checkDataSource = []
+      },
       searchReset(num) {
         let that = this;
         if (num !== 0) {
@@ -217,18 +273,43 @@
         that.searchReset(0)
         that.close();
       },
-      //获取选择信息
-      getSelectRows(rowId) {
-        let dataSource = this.dataSource;
-        let ids = "";
-        this.selectRows = [];
-        for (let i = 0, len = dataSource.length; i < len; i++) {
-          if (this.selectedRowKeys.includes(dataSource[i].id)) {
-            this.selectRows.push(dataSource[i]);
-            ids = ids + "," + dataSource[i].serialNumber
+      checkSn(record) {
+        let checkObj = {
+          id: record.id,
+          serialNumber: record.serialNumber
+        }
+        let data = this.checkDataSource
+        let isExist = false
+        for (let i = 0; i < data.length; i++) {
+          if(data[i].serialNumber === record.serialNumber) {
+            isExist = true
+          }
+        }
+        if(isExist) {
+          this.$message.warning('抱歉，此序列号已经选择过！');
+        } else {
+          this.checkDataSource.push(checkObj)
+        }
+      },
+      removeSn(record) {
+        let oldArr = this.checkDataSource
+        let newArr = []
+        for (let i = 0; i < oldArr.length; i++) {
+          if(oldArr[i].id !== record.id) {
+            newArr.push(oldArr[i])
           }
         }
-        this.selectIds = ids.substring(1);
+        this.checkDataSource = newArr
+      },
+      //获取选择信息
+      getSelectRows() {
+        let ids = ""
+        this.selectRows = this.checkDataSource
+        let data = this.checkDataSource
+        for (let i = 0; i < data.length; i++) {
+          ids = ids + "," + data[i].serialNumber
+        }
+        this.selectIds = ids.substring(1)
       },
       onSelectChange(selectedRowKeys, selectionRows) {
         this.selectedRowKeys = selectedRowKeys;
@@ -239,23 +320,6 @@
       },
       modalFormOk() {
         this.loadData();
-      },
-      rowAction(record, index) {
-        return {
-          on: {
-            click: () => {
-              let arr = []
-              arr.push(record.id)
-              this.selectedRowKeys = arr
-            },
-            dblclick: () => {
-              let arr = []
-              arr.push(record.id)
-              this.selectedRowKeys = arr
-              this.handleSubmit()
-            }
-          }
-        }
       }
     }
   }

jshERP-web/src/views/bill/mixins/BillModalMixin.js

@@ -125,7 +125,7 @@ export const BillModalMixin = {
                 columns[i].type = FormTypes.popupJsh //显示
               } else {
                 if(key === 'snList') {
-                  columns[i].type = FormTypes.input_pop //显示
+                  columns[i].type = FormTypes.popupJsh //显示
                 } else {
                   columns[i].type = FormTypes.input //显示
                 }

jshERP-web/src/views/bill/modules/OtherInModal.vue

@@ -172,9 +172,7 @@
             { title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal },
             { title: '库存', key: 'stock', width: '5%', type: FormTypes.normal },
             { title: '单位', key: 'unit', width: '4%', type: FormTypes.normal },
-            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号用逗号隔开，请少于100个字符',
-              validateRules: [{ pattern: /^.{1,100}$/, message: '请小于100位字符' }]
-            },
+            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.popupJsh, kind: 'snAdd', multi: true },
             { title: '批号', key: 'batchNumber', width: '7%', type: FormTypes.input },
             { title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date },
             { title: '多属性', key: 'sku', width: '9%', type: FormTypes.normal },

jshERP-web/src/views/bill/modules/PurchaseInModal.vue

@@ -269,9 +269,7 @@
             { title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal },
             { title: '库存', key: 'stock', width: '5%', type: FormTypes.normal },
             { title: '单位', key: 'unit', width: '4%', type: FormTypes.normal },
-            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号用逗号隔开，请少于100个字符',
-              validateRules: [{ pattern: /^.{1,100}$/, message: '请小于100位字符' }]
-            },
+            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.popupJsh, kind: 'snAdd', multi: true },
             { title: '批号', key: 'batchNumber', width: '7%', type: FormTypes.input },
             { title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date },
             { title: '多属性', key: 'sku', width: '9%', type: FormTypes.normal },

jshERP-web/src/views/bill/modules/RetailBackModal.vue

@@ -231,9 +231,7 @@
             { title: '扩展信息', key: 'materialOther', width: '7%', type: FormTypes.normal },
             { title: '库存', key: 'stock', width: '5%', type: FormTypes.normal },
             { title: '单位', key: 'unit', width: '5%', type: FormTypes.normal },
-            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号用逗号隔开，请少于100个字符',
-              validateRules: [{ pattern: /^.{1,100}$/, message: '请小于100位字符' }]
-            },
+            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.popupJsh, kind: 'snAdd', multi: true },
             { title: '批号', key: 'batchNumber', width: '8%', type: FormTypes.input },
             { title: '有效期', key: 'expirationDate',width: '9%', type: FormTypes.date },
             { title: '多属性', key: 'sku', width: '9%', type: FormTypes.normal },

jshERP-web/src/views/bill/modules/SaleBackModal.vue

@@ -247,9 +247,7 @@
             { title: '扩展信息', key: 'materialOther', width: '5%', type: FormTypes.normal },
             { title: '库存', key: 'stock', width: '5%', type: FormTypes.normal },
             { title: '单位', key: 'unit', width: '4%', type: FormTypes.normal },
-            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.input, placeholder: '多个序列号用逗号隔开，请少于100个字符',
-              validateRules: [{ pattern: /^.{1,100}$/, message: '请小于100位字符' }]
-            },
+            { title: '序列号', key: 'snList', width: '12%', type: FormTypes.popupJsh, kind: 'snAdd', multi: true },
             { title: '批号', key: 'batchNumber', width: '7%', type: FormTypes.input },
             { title: '有效期', key: 'expirationDate',width: '7%', type: FormTypes.date },
             { title: '多属性', key: 'sku', width: '9%', type: FormTypes.normal },