feijinping
3 years ago
parent
88e110b6b0
commit
810939b3e9
@ -1,52 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<el-tag>{{valueLabel}}</el-tag>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {mapGetters} from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DictTag",
|
props: ["value", "propName"],
|
||||||
props: {
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
value: [Number, String, Array],
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
values() {
|
...mapGetters(['dictMap']),
|
||||||
if (this.value !== null && typeof this.value !== 'undefined') {
|
options() {
|
||||||
return Array.isArray(this.value) ? this.value : [String(this.value)];
|
if (!this.propName) {
|
||||||
} else {
|
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
return this.dictMap[this.propName] || []
|
||||||
},
|
},
|
||||||
|
valueLabel() {
|
||||||
|
return this.options.find(it => it.value == this.value)?.label;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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