Fix: 044

src/views/modules/common/template-out-component.vue

@@ -0,0 +1,104 @@
+<template>
+    <div>
+      <el-select
+        v-model="value"
+        ref="select"
+        placeholder="请选择"
+        clearable
+        filterable
+        remote
+        :remote-method="remoteMethod"
+        @change = "onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+        <el-option v-if="options.length > 0" label="加载更多" style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
+      </el-select>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'template-out-component',
+    props: {
+      templateId: {
+        type: String,
+        default: ''
+      }
+    },
+    model: {
+      prop: 'templateId',
+      event: 'templateSelected'
+    },
+    data () {
+      return {
+        value: '',
+        current: 1,
+        size: 10,
+        name: '',
+        options: [],
+        loading: false,
+        noMore: false
+      }
+    },
+    mounted () {
+      this.init()
+    },
+    methods: {
+      async init () {
+        this.getList()
+      },
+      remoteMethod (query) {
+        this.options = []
+        this.current = 1
+        this.name = query
+        this.getList()
+      },
+      getList () {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/TemplateMgCtl/list`),
+          method: 'get',
+          params: this.$http.adornParams({
+            'current': this.current,
+            'size': this.size,
+            'templateName': this.name
+          })
+        }).then(({data}) => {
+          if (data && data.code === '200') {
+            if (this.current > data.data.pages) {
+              return
+            }
+            data.data.records.forEach(item => {
+              this.options.push({
+                label: item.templateName,
+                value: item.templateId
+              })
+            })
+          } else {
+            this.options = []
+          }
+        })
+      },
+      handleClick () {
+        this.loadMore()
+      },
+      loadMore () {
+        this.current ++
+        this.getList()
+      },
+      onChange (item) {
+        if (item === 'undefined') {
+          this.value = null
+        }
+        this.$emit('templateSelected', item)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/warehouse/template-outbound.vue

@@ -13,19 +13,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="模板" prop="templateId">
-            <el-select
-              v-model="dataForm.templateId"
-              remote
-              filterable
-              :remote-method="remoteTemplate"
-              placeholder="请选择">
-              <el-option
-                v-for="item in optionsTemplate"
-                :key="item.code"
-                :label="item.value"
-                :value="item.code">
-              </el-option>
-            </el-select>
+            <template-out-component v-model="dataForm.templateId" :template-id="dataForm.templateId"></template-out-component>
           </el-form-item>
         </el-col>
       </el-row>
@@ -43,14 +31,14 @@
 </template>
 
 <script>
-  import {getTemplateList} from '@/api/warehouse'
+  import TemplateOutComponent from '../common/template-out-component'
   export default {
     name: 'template-outbound',
+    components: {TemplateOutComponent},
     data () {
       return {
         visible: false,
         dataForm: { },
-        optionsTemplate: [],
         dataRule: {
           recordNumber: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }],
           templateId: [{ required: true, message: '模板不能为空', trigger: 'change' }]
@@ -94,24 +82,6 @@
       },
       validateField (type) {
         this.$refs.dataForm.validateField(type)
-      },
-      // 远程方法：获取模板
-      async remoteTemplate (query) {
-        if (!query) return
-        const params = {
-          templateName: query.trimStart()
-        }
-        await getTemplateList(params).then(({data}) => {
-          if (data && data.code === '200') {
-            this.optionsTemplate = []
-            data.data.records.forEach((item) => {
-              this.optionsTemplate.push({
-                code: item.templateId,
-                value: item.templateName
-              })
-            })
-          }
-        })
       }
     }
   }