Fix: 044

src/views/modules/common/draw-components.vue

@@ -0,0 +1,111 @@
+<template>
+    <div>
+      <el-select
+        v-model="value"
+        ref="select"
+        placeholder="请选择"
+        clearable
+        filterable
+        remote
+        multiple
+        :disabled="disabled"
+        :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="noMore" label="加载更多" disabled style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
+      </el-select>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'draw-components',
+    props: {
+      drawIds: {
+        type: Array,
+        default: () => []
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        value: [],
+        current: 1,
+        size: 10,
+        name: '',
+        options: [],
+        loading: false,
+        noMore: false
+      }
+    },
+    watch: {
+      drawIds (value) {
+        this.value = value
+      }
+    },
+    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/drawing/list`),
+          method: 'get',
+          params: this.$http.adornParams({
+            'current': this.current,
+            'size': this.size,
+            'keyword': this.name
+          })
+        }).then(({data}) => {
+          if (data && data.code === '200') {
+            if (this.current > data.data.pages) {
+              return
+            }
+            this.noMore = data.data.records.length >= 10
+            data.data.records.forEach(item => {
+              this.options.push({
+                label: item.drawingName,
+                value: item.drawingId
+              })
+            })
+          } else {
+            this.options = []
+          }
+        })
+      },
+      handleClick () {
+        this.loadMore()
+      },
+      loadMore () {
+        this.current ++
+        this.getList()
+      },
+      onChange (item) {
+        this.$emit('change', item)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.el-select{
+  width: 100%;
+}
+</style>

src/views/modules/tech/product-add-or-update.vue

@@ -56,41 +56,12 @@
           <el-row class="my-row">
             <el-col :span="8">
               <el-form-item label="产品来源" prop="source">
-                <el-input v-if="display" v-model="dataForm.sourceName" disabled></el-input>
-                <el-select v-else
-                  v-model="dataForm.source"
-                  :disabled="display"
-                           filterable
-                  remote
-                           :remote-method="remoteCusList"
-                  placeholder="请选择">
-                  <el-option
-                    v-for="item in optionsSource"
-                    :key="item.code"
-                    :label="item.value"
-                    :value="item.code">
-                  </el-option>
-                </el-select>
+                <cus-component v-model="dataForm.source" :cus-id="dataForm.source"></cus-component>
               </el-form-item>
             </el-col>
             <el-col :span="16">
               <el-form-item label="产品图纸" prop="drawingIdList">
-                <upload-component v-if="display" :display="display" :title="'产品图纸'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
-                <el-select v-else
-                           v-model="dataForm.drawingIdList"
-                           filterable
-                           multiple
-                           remote
-                           :remote-method="remoteDraw"
-                           placeholder="请选择"
-                style="width: 100%">
-                  <el-option
-                    v-for="item in optionsDraw"
-                    :key="item.code"
-                    :label="item.value"
-                    :value="item.code">
-                  </el-option>
-                </el-select>
+                <draw-components v-model="dataForm.drawingIdList" :draw-ids="dataForm.drawingIdList" @change='receiverChange'></draw-components>
               </el-form-item>
             </el-col>
           </el-row>
@@ -222,14 +193,15 @@
   import templateChose from '../product/template-chose'
   import templateChoseMaterial from '../product/template-chose-material'
   import { getDictList } from '@/api/dict'
-  import { getProductDetail, getTechList, getDrawList } from '@/api/product'
-  import { getCusList } from '@/api/cus'
+  import { getProductDetail } from '@/api/product'
   import UploadComponent from '../common/upload-component'
   import { dealStepData, dealStepLogs } from '@/api/util'
+  import CusComponent from '../common/cus-component'
+  import DrawComponents from '../common/draw-components'
 
   export default {
     name: 'product-add-or-update',
-    components: {UploadComponent, templateChose, templateChoseMaterial},
+    components: {DrawComponents, CusComponent, UploadComponent, templateChose, templateChoseMaterial},
     computed: {
       orgId: {
         get () { return this.$store.state.user.orgId }
@@ -248,8 +220,6 @@
         display: false,
         optionsType: [],
         optionsTech: [],
-        optionsSource: [],
-        optionsDraw: [],
         fileList: [],
         dataList: [],
         id: 0,
@@ -277,9 +247,7 @@
         this.dataForm = {}
         this.productDetails = []
         this.materialList = []
-        this.optionsSource = []
         this.optionsTech = []
-        this.optionsDraw = []
         this.visible = true
         this.id = id || 0
         this.display = display
@@ -347,58 +315,6 @@
       uploadSuccess (fileList) {
         this.fileList = fileList
       },
-      // 产品来源（客户）列表
-      async remoteCusList (query) {
-        if (!query) {
-          query = ''
-        }
-        await getCusList({'customerName': query}).then(({data}) => {
-          if (data && data.code === '200') {
-            this.optionsSource = []
-            data.data.records.forEach((item) => {
-              this.optionsSource.push({
-                code: item.customerId,
-                value: item.customerName
-              })
-            })
-          }
-        }
-      )
-      },
-      // 产品工艺
-      async remoteTech (query) {
-        if (!query) {
-          query = ''
-        }
-        await getTechList().then(({data}) => {
-          if (data && data.code === '200') {
-            this.optionsTech = []
-            data.data.records.forEach((item) => {
-              this.optionsTech.push({
-                code: item.customerId,
-                value: item.customerName
-              })
-            })
-          }
-        })
-      },
-      // 图纸
-      async remoteDraw (query) {
-        if (!query) {
-          query = ''
-        }
-        await getDrawList({'keyword': query}).then(({data}) => {
-          if (data && data.code === '200') {
-            this.optionsDraw = []
-            data.data.records.forEach((item) => {
-              this.optionsDraw.push({
-                code: item.drawingId,
-                value: item.drawingName
-              })
-            })
-          }
-        })
-      },
       // 添加组合产品
       addProduct () {
         this.productListVisible = true
@@ -495,6 +411,9 @@
             })
           }
         })
+      },
+      receiverChange (val) {
+        this.dataForm.drawingIdList = val
       }
     }
   }