Blame view

ant-design-vue-jeecg/src/components/jeecg/JCategorySelect.vue 5.67 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <a-tree-select
    allowClear
    labelInValue
    style="width: 100%"
    :disabled="disabled"
    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
    :placeholder="placeholder"
    :loadData="asyncLoadTreeData"
    :value="treeValue"
    :treeData="treeData"
    :multiple="multiple"
    @change="onChange">
  </a-tree-select>
</template>
<script>
肖超群 authored
18
import {getAction} from '@/api/manage'
肖超群 authored
19
肖超群 authored
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
export default {
  name: 'JCategorySelect',
  props: {
    value: {
      type: String,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    condition: {
      type: String,
      default: '',
      required: false
    },
    // 是否支持多选
    multiple: {
      type: Boolean,
      default: false,
    },
    loadTriggleChange: {
      type: Boolean,
      default: false,
      required: false
    },
    pid: {
      type: String,
      default: '',
      required: false
    },
    pcode: {
      type: String,
      default: '',
      required: false
    },
    back: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      treeValue: "",
      treeData: [],
      url: "/sys/category/loadTreeData",
      view: '/sys/category/loadDictItem/',
      tableName: "",
      text: "",
      code: "",

    }
  },
  watch: {
    value() {
      this.loadItemByCode()
    },
    pcode() {
      this.loadRoot();
    }
  },
  created() {
    this.validateProp().then(() => {
      this.loadRoot()
      this.loadItemByCode()
    })
  },
  methods: {
    /**加载一级节点 */
    loadRoot() {
      let param = {
        pid: this.pid,
        pcode: !this.pcode ? '0' : this.pcode,
        condition: this.condition
肖超群 authored
101
      }
肖超群 authored
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
      getAction(this.url, param).then(res => {
        if (res.success && res.result) {
          for (let i of res.result) {
            i.value = i.key
            if (i.leaf == false) {
              i.isLeaf = false
            } else if (i.leaf == true) {
              i.isLeaf = true
            }
          }
          this.treeData = [...res.result]
        } else {
          console.log("树一级节点查询结果-else", res)
        }
      })
肖超群 authored
117
118
    },
肖超群 authored
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
    /** 数据回显*/
    loadItemByCode() {
      if (!this.value || this.value == "0") {
        this.treeValue = []
      } else {
        getAction(this.view, {ids: this.value}).then(res => {
          if (res.success) {
            let values = this.value.split(',')
            this.treeValue = res.result.map((item, index) => ({
              key: values[index],
              value: values[index],
              label: item
            }))
            this.onLoadTriggleChange(res.result[0]);
          }
        })
肖超群 authored
135
136
      }
    },
肖超群 authored
137
138
139
140
    onLoadTriggleChange(text) {
      //只有单选才会触发
      if (!this.multiple && this.loadTriggleChange) {
        this.backValue(this.value, text)
肖超群 authored
141
142
      }
    },
肖超群 authored
143
144
145
146
147
148
    backValue(value, label) {
      let obj = {}
      if (this.back) {
        obj[this.back] = label
      }
      this.$emit('change', value, obj)
肖超群 authored
149
    },
肖超群 authored
150
151
152
153
154
155
156
    asyncLoadTreeData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.$vnode.children) {
          resolve()
          return
        }
        let pid = treeNode.$vnode.key
肖超群 authored
157
        let param = {
肖超群 authored
158
159
          pid: pid,
          condition: this.condition
肖超群 authored
160
        }
肖超群 authored
161
162
163
        getAction(this.url, param).then(res => {
          if (res.success) {
            for (let i of res.result) {
肖超群 authored
164
              i.value = i.key
肖超群 authored
165
166
167
168
              if (i.leaf == false) {
                i.isLeaf = false
              } else if (i.leaf == true) {
                i.isLeaf = true
肖超群 authored
169
170
              }
            }
肖超群 authored
171
172
            this.addChildren(pid, res.result, this.treeData)
            this.treeData = [...this.treeData]
肖超群 authored
173
          }
肖超群 authored
174
          resolve()
肖超群 authored
175
        })
肖超群 authored
176
177
178
179
180
181
182
183
184
185
      })
    },
    addChildren(pid, children, treeArray) {
      if (treeArray && treeArray.length > 0) {
        for (let item of treeArray) {
          if (item.key == pid) {
            if (!children || children.length == 0) {
              item.isLeaf = true
            } else {
              item.children = children
肖超群 authored
186
            }
肖超群 authored
187
188
189
            break
          } else {
            this.addChildren(pid, children, item.children)
肖超群 authored
190
191
          }
        }
肖超群 authored
192
193
      }
    },
肖超群 authored
194
肖超群 authored
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
    onChange(value) {
      if (!value) {
        this.$emit('change', '');
        this.treeValue = ''
      } else if (Array.isArray(value)) {
        let labels = []
        let values = value.map(item => {
          labels.push(item.label)
          return item.value
        })
        this.backValue(values.join(','), labels.join(','))
        this.treeValue = value
      } else {
        this.backValue(value.value, value.label)
        this.treeValue = value
      }
    },
    getCurrTreeData() {
      return this.treeData
    },
    validateProp() {
      let mycondition = this.condition
      return new Promise((resolve, reject) => {
        if (!mycondition) {
          resolve();
肖超群 authored
220
        } else {
肖超群 authored
221
222
223
224
225
          try {
            let test = JSON.parse(mycondition);
            if (typeof test == 'object' && test) {
              resolve()
            } else {
肖超群 authored
226
227
228
              this.$message.error("组件JTreeSelect-condition传值有误,需要一个json字符串!")
              reject()
            }
肖超群 authored
229
230
231
          } catch (e) {
            this.$message.error("组件JTreeSelect-condition传值有误,需要一个json字符串!")
            reject()
肖超群 authored
232
          }
肖超群 authored
233
234
        }
      })
肖超群 authored
235
    }
肖超群 authored
236
237
238
239
240
  },
  //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  model: {
    prop: 'value',
    event: 'change'
肖超群 authored
241
  }
肖超群 authored
242
}
肖超群 authored
243
</script>