分类

src/components/search/src/sort.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="select-goodsClass">
+    <el-cascader
+      v-if="!loading"
+      v-model="value"
+      :size="size || 'medium'"
+      style="width: 100%"
+      filterable
+      clearable
+      :options="options"
+      :placeholder="placeholder || ''"
+      :props="props"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import asyncRequest from '@/apis/components/search'
+import resToken from '@/mixins/resToken'
+export default {
+  name: 'SearchSort',
+  mixins: [resToken],
+  props: ['size', 'value', 'placeholder', 'isDetail', 'disabled', 'companyNo'],
+  /**
+   * 属性集合
+   * @param {String}        size             : 组件大小            非必填
+   * @param {Array}         value            : 选中值              必填
+   * @param {String}        placeholder      : 提示信息            非必填
+   * @param {Boolean}       isDetail         : 是否是详情逻辑       必填
+   * @param {Boolean}       disabled         : 是否禁用            必填
+   */
+  /**
+   * 事件集合
+   * @searchChange             : 选中值变化调用   抛出选中数据
+   */
+  data() {
+    return {
+      loading: false,
+      options:[],
+      props: {
+        checkStrictly: true,
+        expandTrigger: 'hover',
+        lazy: true, // 开启远程加载
+        lazyLoad: async(node, resolve) => {
+          const { level, value } = node
+
+          const model = {
+            cat_name: '',
+            pid: '',
+            status: '',
+            size: 1000
+          }
+          const list = []
+          if (level === 0) {
+            model.pid = '0'
+          } else {
+            model.pid = value
+          }
+
+          const res = await asyncRequest.category(model)
+          const { code, data } = res
+          if (code === 1) {
+            data.forEach((v1) => {
+              const province = {
+                value: v1.id,
+                label: v1.cat_name,
+                leaf: level >= 2,
+              }
+              String(v1.status) !== '0' && v1.status !== null && list.push(province)
+            })
+            resolve(list)
+          } else {
+            resolve([])
+          }
+        }
+      }
+    }
+  },
+  // watch: {
+  //   // value: function (val, old) {
+  //   //   if (val) {
+  //   //     this.loading = true;
+  //   //     setTimeout(() => {
+  //   //       this.loading = false;
+  //   //     }, 10);
+  //   //   }
+  //   // },
+  // },
+  mounted() {
+    this.options = []
+    this.selectLoading = false
+  },
+  methods: {
+    async handleChange(value) {
+      this.$emit('handleChange', value)
+    },
+    async loadData(pid,leaf = false){
+      const list = []
+      const res = await asyncRequest.category({pid})
+      const { code, data } = res
+      if (code !== 1) return
+
+       data.forEach((v1) => {
+         const province = {
+           value: v1.id,
+           label: v1.cat_name,
+           leaf,
+           children:[]
+         }
+
+         String(v1.status) !== '0' && v1.status !== null && list.push(province)
+       })
+
+       return list
+    },
+    async init(_v){
+      const list = await this.loadData(0)
+      const index = list.findIndex(({value}) => String(value) === String(_v[1]))
+      const list2 = await this.loadData(_v[1])
+      list[index].children = list2      
+      const index2 = list2.findIndex(({value}) => String(value) === String(_v[2]))
+      const list3 = await this.loadData(_v[2])
+      list2[index2].children = list3
+      const index3 = list3.findIndex(({value}) => String(value) === String(_v[3]))
+      list3[index3].leaf = true
+      this.options = list
+
+      console.log(JSON.parse(JSON.stringify(this.options)))
+      this.$emit('handleChange',_v.slice(1))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-goodsClass {
+  .loading-input {
+    background-color: transparent;
+    border: 1px solid #dfe4ed;
+    color: #c0c4cc;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 30px 0 12px;
+    border-radius: 4px;
+    &.disabled {
+      background-color: #f5f7fa;
+    }
+    span {
+      font-size: 16px;
+      height: 36px;
+      line-height: 36px;
+      padding: 0 0 0 3px;
+      vertical-align: top;
+    }
+  }
+}
+</style>