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

2022-09-30 00:21:33 +08:00
parent 5c02964145
commit c1c92d3479
8 changed files with 147 additions and 76 deletions
--- a/jshERP-web/src/components/jeecgbiz/JSelectList.vue
+++ b/jshERP-web/src/components/jeecgbiz/JSelectList.vue
@@ -1,10 +1,11 @@
 <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,
--- a/jshERP-web/src/components/jeecgbiz/modal/JSelectBatchModal.vue
+++ b/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();
--- a/jshERP-web/src/components/jeecgbiz/modal/JSelectSnModal.vue
+++ b/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()
-            }
-          }
-        }
      }
    }
  }
--- a/jshERP-web/src/views/bill/mixins/BillModalMixin.js
+++ b/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 //显示
                }
--- a/jshERP-web/src/views/bill/modules/OtherInModal.vue
+++ b/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 },
--- a/jshERP-web/src/views/bill/modules/PurchaseInModal.vue
+++ b/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 },
--- a/jshERP-web/src/views/bill/modules/RetailBackModal.vue
+++ b/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 },
--- a/jshERP-web/src/views/bill/modules/SaleBackModal.vue
+++ b/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 },