做了几个组件

klp-ui/src/components/KLPService/CategorySelect/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-select
+    v-model="innerValue"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filterable="filterable"
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in categoryOptions"
+      :key="item.categoryId"
+      :label="item.categoryName"
+      :value="item.categoryId"
+    />
+  </el-select>
+</template>
+
+<script>
+import { listCategory } from '@/api/wms/category';
+
+export default {
+  name: 'CategorySelect',
+  props: {
+    value: {
+      type: [Number, String, null],
+      default: null
+    },
+    categoryType: {
+      type: String,
+      required: true,
+      validator: v => [
+        'base_material',
+        'surface_treatment',
+        'customer_req',
+        'spec_packaging'
+      ].includes(v)
+    },
+    placeholder: {
+      type: String,
+      default: '请选择分类'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      categoryOptions: [],
+      innerValue: this.value
+    };
+  },
+  watch: {
+    value(val) {
+      this.innerValue = val;
+    },
+    categoryType: {
+      handler() {
+        this.loadOptions();
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.loadOptions();
+  },
+  methods: {
+    loadOptions() {
+      listCategory({ categoryType: this.categoryType, isEnabled: 1 }).then(res => {
+        this.categoryOptions = res.rows || [];
+      });
+    },
+    onChange(val) {
+      this.$emit('input', val);
+      this.$emit('change', val);
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>

klp-ui/src/components/KLPService/ProductSelect/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-select
+    v-model="selected"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    filterable
+    @change="onChange"
+    style="width: 100%"
+  >
+    <el-option
+      v-for="item in productOptions"
+      :key="item.productId"
+      :label="item.productName"
+      :value="item.productId"
+    />
+  </el-select>
+</template>
+
+<script>
+import { listProduct } from '@/api/wms/product';
+
+export default {
+  name: 'ProductSelect',
+  props: {
+    value: [String, Number],
+    disabled: Boolean,
+    placeholder: {
+      type: String,
+      default: '请选择产品'
+    }
+  },
+  data() {
+    return {
+      productOptions: [],
+      selected: this.value
+    };
+  },
+  watch: {
+    value(val) {
+      this.selected = val;
+    },
+    selected(val) {
+      this.$emit('input', val);
+      this.$emit('change', val);
+    }
+  },
+  created() {
+    this.getProductOptions();
+  },
+  methods: {
+    getProductOptions() {
+      listProduct({ pageNum: 1, pageSize: 1000 }).then(res => {
+        this.productOptions = res.rows || [];
+      });
+    },
+    onChange(val) {
+      this.$emit('change', val);
+    }
+  }
+};
+</script>

klp-ui/src/components/WarehouseSelect/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <treeselect
+    v-model="innerValue"
+    :options="warehouseOptions"
+    :normalizer="normalizer"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    @input="onInput"
+  />
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect';
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+import { listWarehouse } from '@/api/wms/warehouse';
+
+export default {
+  name: 'WarehouseSelect',
+  components: { Treeselect },
+  props: {
+    value: {
+      type: [Number, String, null],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: '请选择库区/仓库/库位'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    showTop: {
+      type: Boolean,
+      default: true // 是否显示顶级节点
+    }
+  },
+  data() {
+    return {
+      warehouseOptions: [],
+      innerValue: this.value
+    };
+  },
+  watch: {
+    value(val) {
+      this.innerValue = val;
+    }
+  },
+  mounted() {
+    this.loadOptions();
+  },
+  methods: {
+    loadOptions() {
+      listWarehouse().then(response => {
+        const options = [];
+        if (this.showTop) {
+          const top = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
+          top.children = this.handleTree(response.data, 'warehouseId', 'parentId');
+          options.push(top);
+        } else {
+          options.push(...this.handleTree(response.data, 'warehouseId', 'parentId'));
+        }
+        this.warehouseOptions = options;
+      });
+    },
+    handleTree(data, id, parentId) {
+      const cloneData = JSON.parse(JSON.stringify(data));
+      return cloneData.filter(father => {
+        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
+        if (branchArr.length > 0) father.children = branchArr;
+        return father[parentId] === 0 || father[parentId] === null;
+      });
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.warehouseId,
+        label: node.warehouseName,
+        children: node.children
+      };
+    },
+    onInput(val) {
+      // 选中顶级节点时，返回null
+      if (val === 0) {
+        this.$emit('input', null);
+        this.innerValue = null;
+      } else {
+        this.$emit('input', val);
+      }
+    }
+  }
+};
+</script>