57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<el-tree-select
|
|
v-model="selectId"
|
|
:data="deptOptions"
|
|
:props="{ value: 'id', label: 'name', children: 'children' }"
|
|
class="w100"
|
|
filterable
|
|
clearable
|
|
check-strictly
|
|
:render-after-expand="false"
|
|
:placeholder="placeholder"
|
|
@change="handleChange"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="SelectDept">
|
|
import { ref, onMounted } from "vue"
|
|
import { deptTree } from "/@/api/admin/dept"
|
|
import { useMessage } from "/@/hooks/message"
|
|
|
|
const selectId = defineModel()
|
|
|
|
defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: "请选择部门",
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(["update:modelValue", "change"])
|
|
|
|
const deptOptions = ref<any[]>([])
|
|
|
|
// 加载部门树数据
|
|
const loadDeptTree = async () => {
|
|
try {
|
|
const res = await deptTree()
|
|
if (res.code == 0) {
|
|
deptOptions.value = res.data || []
|
|
} else {
|
|
useMessage().error(res.msg || "获取部门数据失败")
|
|
}
|
|
} catch (error: any) {
|
|
useMessage().error(error.msg || "获取部门数据失败")
|
|
}
|
|
}
|
|
|
|
// 选择变更
|
|
const handleChange = (val: string | number) => {
|
|
emit("change", val)
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadDeptTree()
|
|
})
|
|
</script>
|