工艺管理：物料查询改为组件

src/views/modules/common/craft-product-component.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <el-select
+      :disabled="disabled"
+      v-model="value"
+      ref="select"
+      placeholder="请选择"
+      clearable
+      filterable
+      remote
+      :remote-method="remoteMethod"
+      @change = "onChange"
+      @focus="cancelReadOnly"
+      @hook:mounted="cancelReadOnly"
+      @visible-change="cancelReadOnly">
+      <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: 'craft-product-component',
+    props: {
+      productId: {
+        type: String,
+        default: ''
+      },
+      disabled: {
+        type: Boolean,
+        default: true
+      }
+    },
+    model: {
+      prop: 'productId',
+      event: 'productSelected'
+    },
+    data () {
+      return {
+        value: '',
+        current: 1,
+        size: 10,
+        name: '',
+        options: [],
+        loading: false,
+        noMore: false
+      }
+    },
+    mounted () {
+      this.init()
+    },
+    watch: {
+      productId (value) {
+        this.value = value
+      }
+    },
+    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/product/list`),
+          method: 'get',
+          params: this.$http.adornParams({
+            'current': this.current,
+            'size': this.size,
+            'productName': 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.productName + '-' + item.mapNumber + '-' + (item.techId && item.techId !== 0 ? '有' : '无'),
+                value: item.productId
+              })
+            })
+          } else {
+            this.options = []
+          }
+        })
+      },
+      handleClick () {
+        this.loadMore()
+      },
+      loadMore () {
+        this.current ++
+        this.getList()
+      },
+      onChange (item) {
+        if (item === 'undefined') {
+          this.value = null
+        }
+        let obj = this.options.find((t) => t.value === item)
+        this.$emit('productSelected', obj)
+      },
+      cancelReadOnly (onOff) {
+        this.$nextTick(() => {
+          if (!onOff) {
+            const input = this.$refs.select.$el.querySelector('.el-input__inner')
+            const timer = setTimeout(() => {
+              input.removeAttribute('readonly')
+              clearTimeout(timer)
+            }, 200)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/tech/ctafts-add-or-detail.vue

@@ -28,23 +28,7 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="物料" prop="productId">
-              <el-select
-                v-model="dataForm.productId"
-                :disabled="display || isEdit"
-                remote
-                filterable
-                placeholder="请选择"
-                style="width:100%"
-                @change="productIdChangeHandle"
-              >
-                <el-option
-                  v-for="item in optionLevel"
-                  :key="item.productId"
-                  :label="item.productNameStr"
-                  :value="item.productId"
-                >
-                </el-option>
-              </el-select>
+              <craft-product-component :disabled="display || isEdit" v-model="dataForm.productId" :product-id.sync="dataForm.productId" @productSelected="prodSelected"/>
             </el-form-item>
           </el-col>
         </el-row>
@@ -103,14 +87,15 @@
 </template>
 
 <script>
-import { getInfo, getProduct, getWorkType } from '@/api/crafts'
+import { getInfo, getWorkType } from '@/api/crafts'
 import UploadComponent from '../common/upload-component'
 import WorkFlow from '@/components/work-flow/home'
 // import data from "@/components/work-flow/config/data.json";
 import { GenNonDuplicateID } from '@/components/work-flow/until'
+import CraftProductComponent from '@/views/modules/common/craft-product-component'
 export default {
   name: 'add-or-update',
-  components: { UploadComponent, WorkFlow },
+  components: { CraftProductComponent, UploadComponent, WorkFlow },
   computed: {
     orgId: {
       get () {
@@ -203,14 +188,6 @@ export default {
       this.isEdit = isEdit && !isCopy
       this.isCopy = isCopy
 
-      await getProduct({ current: 1, size: 50 }).then(({ data }) => {
-        if (data && data.code === '200') {
-          this.optionLevel = data.data.records
-          this.optionLevel.forEach(item => {
-            item.productNameStr = item.productName + '-' + item.mapNumber + '-' + (item.techId && item.techId !== 0 ? '有' : '无')
-          })
-        }
-      })
       if (!id) return
       await getInfo(id).then(async ({ data }) => {
         if (data && data.code === '200') {
@@ -377,9 +354,13 @@ export default {
       await getWorkType().then(({ data }) => {
         if (data && data.code === '200') {
           this.workTypeOptions = data.data
-          console.log(data.data)
+          // console.log(data.data)
         }
       })
+    },
+    prodSelected (item) {
+      console.log(JSON.stringify(item))
+      this.dataForm.productId = item.value
     }
   }
 }