feat：选择部门组件

src/components/Select/SelectDept.vue

@@ -0,0 +1,63 @@
+<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()
+        state.options = data ?? []
+    } finally {
+        setTimeout(() => state.loading = false, 500);
+    }
+}
+
+function remoteSearch(params: string) {
+    if (params != queryForm.name) {
+        queryForm.name = params
+        getOptions()
+    }
+}
+
+function clear() {
+    state.selectId = null
+    getOptions()
+}
+</script>

src/components/Select/SelectMerchant.vue

@@ -70,5 +70,4 @@ function clear() {
     state.selectId = null
     getOptions()
 }
-
 </script>