feijinping
3 years ago
parent
88e110b6b0
commit
810939b3e9
@ -1,52 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(item, index) in options">
|
||||
<template v-if="values.includes(item.value)">
|
||||
<span
|
||||
v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
|
||||
:key="item.value"
|
||||
:index="index"
|
||||
:class="item.raw.cssClass"
|
||||
>{{ item.label }}</span
|
||||
>
|
||||
<el-tag
|
||||
v-else
|
||||
:disable-transitions="true"
|
||||
:key="item.value"
|
||||
:index="index"
|
||||
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
|
||||
:class="item.raw.cssClass"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<el-tag>{{valueLabel}}</el-tag>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "DictTag",
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
value: [Number, String, Array],
|
||||
},
|
||||
props: ["value", "propName"],
|
||||
computed: {
|
||||
values() {
|
||||
if (this.value !== null && typeof this.value !== 'undefined') {
|
||||
return Array.isArray(this.value) ? this.value : [String(this.value)];
|
||||
} else {
|
||||
...mapGetters(['dictMap']),
|
||||
options() {
|
||||
if (!this.propName) {
|
||||
return [];
|
||||
}
|
||||
return this.dictMap[this.propName] || []
|
||||
},
|
||||
valueLabel() {
|
||||
return this.options.find(it => it.value == this.value)?.label;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<treeselect
|
||||
v-model="value1"
|
||||
:options="menuOptions"
|
||||
:show-count="true"
|
||||
placeholder="选择上级菜单"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {mapGetters} from "vuex";
|
||||
export default {
|
||||
name: "ProdCategory",
|
||||
components: {Treeselect},
|
||||
props: ['value'],
|
||||
computed: {
|
||||
...mapGetters(['productCategories']),
|
||||
value1: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('input', v);
|
||||
}
|
||||
},
|
||||
menuOptions() {
|
||||
if (!this.productCategories || this.productCategories.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const map = {}
|
||||
this.productCategories.forEach(it => {
|
||||
let list = map[it.parentId]
|
||||
if (!list) {
|
||||
list = [];
|
||||
map[it.parentId] = list;
|
||||
}
|
||||
list.push({id: it.id, label: it.name, parentId: it.parentId});
|
||||
})
|
||||
const stack = [...map['0']];
|
||||
while (stack.length > 0) {
|
||||
const p = stack.shift();
|
||||
if (!map[p.id]) {
|
||||
continue
|
||||
}
|
||||
p.children = map[p.id];
|
||||
stack.push(...map[p.id])
|
||||
}
|
||||
return [{id: 0, label: '根节点', children: map['0']}];
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('loadProductCategories')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue