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

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' }}
         ],
-        scrollTrigger: {},
+        rightColumns: [
+          {dataIndex: 'serialNumber', title: '序列号', width: 100, align: 'left'},
+          {tdataIndex: 'action', title: '操作', align:"center", width: 50, scopedSlots: { customRender: 'action' }}
+        ],
+        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
           }
         }
-        this.selectIds = ids.substring(1);
+        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.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()
-            }
-          }
-        }
       }
     }
   }