73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<template>
|
|
<el-tree-select class="w100" v-model="state.selectId" :data="state.options"
|
|
@visible-change="(e: boolean) => e && getOptions()"
|
|
:props="{ value: 'id', label: 'name', children: 'children' }" clearable check-strictly
|
|
:render-after-expand="false" :placeholder="props.placeholder" />
|
|
</template>
|
|
|
|
<script setup lang="ts" name="select-dept">
|
|
import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
|
|
import * as deptApi from "/@/api/admin/dept";
|
|
|
|
const selectId = defineModel()
|
|
|
|
export type Props = {
|
|
placeholder?: string,
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: "请选择",
|
|
})
|
|
|
|
const queryForm = reactive<any>({
|
|
name: "",
|
|
current: 1,
|
|
size: 10,
|
|
})
|
|
|
|
const state = reactive<any>({
|
|
loading: true,
|
|
selectId: selectId,
|
|
options: []
|
|
})
|
|
|
|
watch(selectId, (newVal, oldValue) => {
|
|
if (newVal == oldValue) return
|
|
state.selectId = newVal
|
|
getOptions()
|
|
}, { immediate: true })
|
|
|
|
async function getOptions() {
|
|
try {
|
|
state.loading = true
|
|
const _pa = {
|
|
...queryForm
|
|
}
|
|
const { data } = await deptApi.deptTree(_pa)
|
|
state.options = data ?? []
|
|
} finally {
|
|
setTimeout(() => state.loading = false, 500);
|
|
}
|
|
}
|
|
|
|
function remoteSearch(params: string) {
|
|
if (params != queryForm.name) {
|
|
queryForm.name = params
|
|
getOptions()
|
|
}
|
|
}
|
|
|
|
function filterTreeData(treeData: Array<any>) {
|
|
return treeData.filter(item => {
|
|
if (item.children && item.children.length) {
|
|
item.disabled = true;
|
|
item.children = filterTreeData(item.children)
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
|
|
function clear() {
|
|
state.selectId = null
|
|
getOptions()
|
|
}
|
|
</script> |