63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<el-cascader ref="cascaderRef" v-model="modelValue" :props="cascaderProps" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
import { postRequest } from "../../axios/index.js";
|
||
|
|
import { ElCascader } from 'element-plus'
|
||
|
|
import "element-plus/es/components/cascader/style/css";
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: "AppCascader",
|
||
|
|
});
|
||
|
|
const props = defineProps({
|
||
|
|
id: { type: String, required: true, default: "" },
|
||
|
|
level: { type: [Number, String], default: 3 },
|
||
|
|
checkStrictly: { type: Boolean, default: true },
|
||
|
|
showAllLevels: { type: Boolean, default: true },
|
||
|
|
value: { type: String, default: "dictionariesId" },
|
||
|
|
joinSeparator: { type: String, default: "/" },
|
||
|
|
controlLevel: { type: Boolean, default: false },
|
||
|
|
});
|
||
|
|
const modelValue = defineModel({ type: Array, required: true });
|
||
|
|
const cascaderRef = ref(null);
|
||
|
|
const cascaderProps = {
|
||
|
|
lazy: true,
|
||
|
|
lazyLoad: async (node, resolve) => {
|
||
|
|
const { dictionariesList } = await postRequest("/sys/dictionaries/list", {
|
||
|
|
parentId: node.data.dictionariesId || props.id,
|
||
|
|
});
|
||
|
|
resolve(
|
||
|
|
dictionariesList.map((item) => {
|
||
|
|
return {
|
||
|
|
dictionariesId: item.dictionariesId,
|
||
|
|
bianma: item.bianma,
|
||
|
|
name: item.name,
|
||
|
|
leaf: props.controlLevel
|
||
|
|
? node.level >= props.level
|
||
|
|
: item.hasChildren === 0,
|
||
|
|
};
|
||
|
|
})
|
||
|
|
);
|
||
|
|
},
|
||
|
|
value: props.value,
|
||
|
|
id: "dictionariesId",
|
||
|
|
label: "name",
|
||
|
|
children: "children",
|
||
|
|
checkStrictly: props.checkStrictly,
|
||
|
|
};
|
||
|
|
const getCheckedNodes = () => {
|
||
|
|
return (
|
||
|
|
cascaderRef.value
|
||
|
|
.getCheckedNodes()[0]
|
||
|
|
?.pathLabels.join(props.joinSeparator) || ""
|
||
|
|
);
|
||
|
|
};
|
||
|
|
defineExpose({
|
||
|
|
getCheckedNodes,
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|