物料关键字组件自定义

applications/dee-mes/src/privateComponents/components/MaterialKeywordsSelect/index.vue

+<template>
+  <div class="MaterialKeywordsSelect">
+    <el-select
+      :value="value"
+      :loading="loading"
+      filterable
+      remote
+      clearable
+      :remote-method="remoteMethod"
+      :disabled="disabled"
+      :placeholder="!options.length?'至少输入三位进行查询':'暂无数据'"
+      @change="change"
+      @clear="clear"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.key"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MaterialKeywordsSelect',
+  componentName: '物料关键词',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    basicData: {
+      type: Object,
+      default: () => ({})
+    },
+    form: {
+      type: Object,
+      default: () => ({ sorties: '' })
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      options: [],
+      remoteFlag: true,
+      material: []
+    }
+  },
+  computed: {},
+  watch: {
+  },
+  methods: {
+    remoteMethod(query, id) {
+      if ((!query || query.length < 3) && !id) return
+      if (this.remoteFlag) {
+        this.remoteFlag = false
+        this.tableColumnSelect = true
+        const params = {
+          'pageFrom': 1,
+          'pageSize': 20,
+          'searchItems': {
+            'children': [
+              {
+                'items': [
+                  {
+                    'fieldName': 'resCode',
+                    'operator': 'LIKE',
+                    'value': query
+                  },
+                  {
+                    'fieldName': 'resName',
+                    'operator': 'LIKE',
+                    'value': query
+                  },
+                  {
+                    'fieldName': 'modelNo',
+                    'operator': 'LIKE',
+                    'value': query
+                  },
+                  {
+                    'fieldName': 'spec',
+                    'operator': 'LIKE',
+                    'value': query
+                  },
+                  {
+                    'fieldName': 'techSpec',
+                    'operator': 'LIKE',
+                    'value': query
+                  }
+                ],
+                'operator': 'OR'
+              }
+            ],
+            'items': []
+          },
+          'openProps': [
+            {
+              'name': 'extUnit'
+            },
+            {
+              'name': 'resType2'
+            }
+          ],
+          'sortItem': [
+            {
+              'fieldName': 'modifyTime',
+              'sortOrder': 'desc'
+            }
+          ]
+        }
+        this.loading = true
+        this.options = []
+        this.$api.searchApi('ExtDxProcessMaterial', params).then(res => {
+          if (res.items && res.items.content.length) {
+            this.material = res.items.content
+            this.options = res.items.content.map(item => {
+              const labelParts = []
+              if (item.resName) labelParts.push(item.resName + '/')
+              if (item.modelNo) labelParts.push(item.modelNo + '/')
+              if (item.techSpec) labelParts.push(item.techSpec + '/')
+              if (item.spec) labelParts.push(item.spec + '/')
+              if (item.supplyStatus) labelParts.push(item.supplyStatus + '/')
+              if (item.supplierName) labelParts.push(item.supplierName + '/')
+
+              const label = labelParts.join('')
+
+              return {
+                label,
+                value: item.resCode
+              }
+            })
+          } else {
+            this.options = []
+          }
+        })
+          .catch((err) => console.log(err))
+          .finally(() => {
+            this.loading = false
+            this.remoteFlag = true
+            this.tableColumnSelect = false
+          })
+      } else {
+        this.$utils.showMessageWarning('上一步请求正在查询中,请稍后')
+      }
+    },
+    // 切换物料下拉
+    changeMaterial(v) {
+      // 带出物料相关默认值
+      const SELECT_MATERIAL = this.material.find((item) => item.resCode === v)
+      if (SELECT_MATERIAL) {
+        this.$set(this.form, 'partName', SELECT_MATERIAL.resName)
+      }
+    },
+    change(val) {
+      this.changeMaterial(val)
+      this.$emit('input', val)
+    },
+    clear() {
+      this.$set(this.form, 'partName', '')
+      this.$emit('input')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>