补提交遗漏的序列号添加文件

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

+<template>
+  <a-modal
+    :width="modalWidth"
+    :visible="visible"
+    :title="title"
+    @ok="handleSubmit"
+    @cancel="close"
+    cancelText="关闭"
+    style="top:5%;height: 100%;overflow-y: hidden"
+    wrapClassName="ant-modal-cust-warp">
+    <a-row :gutter="24">
+      <a-col :md="24" :sm="24">
+        <div>
+          <a-form layout="inline" @keyup.enter.native="onAdd">
+            <a-tabs default-active-key="1" tab-position="left">
+              <a-tab-pane key="1" tab="单个序列号" forceRender>
+                <a-row :gutter="24">
+                  <a-col :md="24" :sm="24">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
+                      <a-input ref="name" style="width:400px;" placeholder="请输入序列号并回车" v-model="queryParam.name"></a-input>
+                      <div style="float:left;">
+                        <a-button type="primary" @click="onAdd">添加</a-button>
+                        <a-button style="margin-left: 8px" @click="clearAllSn">清空</a-button>
+                      </div>
+                    </a-form-item>
+                  </a-col>
+                </a-row>
+              </a-tab-pane>
+              <a-tab-pane key="2" tab="多个序列号" forceRender>
+                <a-row :gutter="24">
+                  <a-col :md="24" :sm="24">
+                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
+                      <a-textarea style="width:400px;"
+                        placeholder="多个序列号用逗号隔开，请少于100个字符"
+                        :auto-size="{ minRows: 2, maxRows: 4 }"
+                        v-model="queryParam.multiName" />
+                      <div style="float:left;">
+                        <a-button type="primary" @click="onBatchAdd">批量添加</a-button>
+                        <a-button style="margin-left: 8px" @click="clearAllSn">清空</a-button>
+                      </div>
+                    </a-form-item>
+                  </a-col>
+                </a-row>
+              </a-tab-pane>
+            </a-tabs>
+          </a-form>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="10" style="padding: 10px;">
+      <a-col :md="24" :sm="24">
+        <a-table
+          ref="table"
+          :scroll="scrollTrigger"
+          size="middle"
+          rowKey="id"
+          :columns="columns"
+          :dataSource="checkDataSource"
+          :pagination="false"
+          :loading="loading">
+           <span slot="action" slot-scope="text, record">
+              <a @click="removeSn(record)">移除</a>
+           </span>
+        </a-table>
+      </a-col>
+    </a-row>
+  </a-modal>
+</template>
+
+<script>
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+
+  export default {
+    name: 'JSelectSnAddModal',
+    mixins:[JeecgListMixin],
+    components: {},
+    props: ['rows', 'multi', 'barCode'],
+    data() {
+      return {
+        modalWidth: 800,
+        queryParam: {
+          name: "",
+          multiName: ""
+        },
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 3 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 18 },
+        },
+        categoryTree:[],
+        columns: [
+          {dataIndex: 'serialNumber', title: '已录入的序列号', width: 100, align: 'left'},
+          {tdataIndex: 'action', title: '操作', align:"center", width: 50, scopedSlots: { customRender: 'action' }}
+        ],
+        scrollTrigger: {y: 460},
+        checkDataSource: [],
+        selectedRowKeys: [],
+        selectRows: [],
+        selectIds: [],
+        title: '录入序列号',
+        visible: false,
+        form: this.$form.createForm(this),
+        disableMixinCreated: true,
+        loading: false,
+      }
+    },
+    computed: {
+      // 计算属性的 getter
+      getType: function () {
+        return this.multi == true ? 'checkbox' : 'radio';
+      }
+    },
+    watch: {
+      barCode: {
+        immediate: true,
+        handler() {
+          this.initBarCode()
+        }
+      },
+    },
+    methods: {
+      initBarCode() {
+        if (this.barCode) {
+          this.$emit('initComp', this.barCode)
+        } else {
+          this.$emit('initComp', '')
+        }
+      },
+      showModal() {
+        this.visible = true
+        this.$nextTick(() => this.$refs.name.focus())
+        this.form.resetFields()
+      },
+      clearAllSn() {
+        this.checkDataSource = []
+      },
+      close() {
+        this.visible = false;
+      },
+      handleSubmit() {
+        let that = this;
+        this.getSelectRows();
+        that.$emit('ok', that.selectRows, that.selectIds);
+        that.close();
+      },
+      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)
+      },
+      onAdd() {
+        if(!this.queryParam.name) {
+          return
+        }
+        let checkObj = {
+          id: this.queryParam.name,
+          serialNumber: this.queryParam.name
+        }
+        let data = this.checkDataSource
+        let isExist = false
+        for (let i = 0; i < data.length; i++) {
+          if(data[i].serialNumber === this.queryParam.name) {
+            isExist = true
+          }
+        }
+        if(isExist) {
+          this.$message.warning('抱歉，此序列号已经添加过！');
+        } else {
+          this.checkDataSource.push(checkObj)
+          this.queryParam.name = ''
+        }
+      },
+      onBatchAdd() {
+        if(!this.queryParam.multiName) {
+          return
+        }
+        let nameArr = this.queryParam.multiName.split(',')
+        for (let i = 0; i < nameArr.length; i++) {
+          let checkObj = {
+            id: nameArr[i],
+            serialNumber: nameArr[i]
+          }
+          let data = this.checkDataSource
+          let isExist = false
+          for (let j = 0; j < data.length; j++) {
+            if(data[j].serialNumber === nameArr[i]) {
+              isExist = true
+            }
+          }
+          if(isExist) {
+            this.$message.warning('抱歉，序列号' + nameArr[i] + '已经添加过！');
+            return
+          } else {
+            this.checkDataSource.push(checkObj)
+          }
+        }
+        this.queryParam.multiName = ''
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  #components-layout-demo-custom-trigger .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color .3s;
+  }
+
+  .table-page-search-wrapper {
+    .ant-form-inline {
+      .ant-form-item {
+        margin-bottom: 12px;
+        margin-right: 0;
+      }
+    }
+
+  }
+</style>
\ No newline at end of file