BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 1335a7aef79de21832a4dff6fa35f91326d61147

Authored by xingyu
1 parent 90db83e1

feat: add dept tree select

Inline Side-by-side
Showing 2 changed files with 20 additions and 9 deletions
yudao-ui-admin-vue3/src/views/system/dept/index.vue
  View file @1335a7a
1 1 <script setup lang="ts">
2 2 import { useI18n } from '@/hooks/web/useI18n'
3   -import { ElCard, ElTree, ElTreeSelect, ElMessage, ElMessageBox } from 'element-plus'
  3 +import { ElInput, ElCard, ElTree, ElTreeSelect, ElMessage, ElMessageBox } from 'element-plus'
4 4 import { handleTree } from '@/utils/tree'
5   -import { onMounted, ref, unref } from 'vue'
  5 +import { onMounted, ref, unref, watch } from 'vue'
6 6 import * as DeptApi from '@/api/system/dept'
7 7 import { Form, FormExpose } from '@/components/Form'
8 8 import { modelSchema } from './dept.data'
... ... @@ -28,6 +28,7 @@ const deptParentId = ref(0) // 上级ID
28 28 const formRef = ref<FormExpose>()
29 29  
30 30 // ========== 创建部门树结构 ==========
  31 +const filterText = ref('')
31 32 const deptOptions = ref([]) // 树形结构
32 33 const treeRef = ref<InstanceType<typeof ElTree>>()
33 34 const getTree = async () => {
... ... @@ -38,9 +39,13 @@ const filterNode = (value: string, data: Tree) =&gt; {
38 39 if (!value) return true
39 40 return data.name.includes(value)
40 41 }
  42 +watch(filterText, (val) => {
  43 + treeRef.value!.filter(val)
  44 +})
41 45 // 新增
42   -const handleAdd = () => {
  46 +const handleAdd = (data: { id: number }) => {
43 47 // 重置表单
  48 + deptParentId.value = data.id
44 49 formTitle.value = '新增部门'
45 50 unref(formRef)?.getElFormRef()?.resetFields()
46 51 showForm.value = true
... ... @@ -73,7 +78,7 @@ const submitForm = async () =&gt; {
73 78 // 提交请求
74 79 try {
75 80 const data = unref(formRef)?.formModel as DeptVO
76   - deptParentId.value = data.parentId
  81 + data.parentId = deptParentId.value
77 82 // TODO: 表单提交待完善
78 83 if (formTitle.value.startsWith('新增')) {
79 84 await DeptApi.createDeptApi(data)
... ... @@ -104,6 +109,7 @@ onMounted(async () =&gt; {
104 109 <div class="custom-tree-container">
105 110 <!-- <p>部门列表</p> -->
106 111 <!-- 操作工具栏 -->
  112 + <el-input v-model="filterText" placeholder="搜索部门" />
107 113 <el-tree
108 114 ref="treeRef"
109 115 node-key="id"
... ... @@ -111,13 +117,13 @@ onMounted(async () =&gt; {
111 117 :props="defaultProps"
112 118 :highlight-current="true"
113 119 default-expand-all
114   - :filter-method="filterNode"
  120 + :filter-node-method="filterNode"
115 121 >
116 122 <template #default="{ node, data }">
117 123 <span class="custom-tree-node">
118 124 <span>{{ node.label }}</span>
119 125 <span>
120   - <el-button link v-hasPermi="['system:dept:create']" @click="handleAdd()">
  126 + <el-button link v-hasPermi="['system:dept:create']" @click="handleAdd(data)">
121 127 <Icon icon="ep:plus" class="mr-5px" />
122 128 </el-button>
123 129 <el-button link v-hasPermi="['system:dept:update']" @click="handleUpdate(data)">
... ...
yudao-ui-admin-vue3/src/views/system/user/index.vue
  View file @1335a7a
1 1 <script setup lang="ts">
2   -import { onMounted, ref, unref } from 'vue'
  2 +import { onMounted, ref, unref, watch } from 'vue'
3 3 import dayjs from 'dayjs'
4 4 import {
  5 + ElInput,
5 6 ElMessage,
6 7 ElCard,
7 8 ElTree,
... ... @@ -55,6 +56,7 @@ const { register, tableObject, methods } = useTable&lt;UserVO&gt;({
55 56 const { getList, setSearchParams, delList, exportList } = methods
56 57  
57 58 // ========== 创建部门树结构 ==========
  59 +const filterText = ref('')
58 60 const deptOptions = ref([]) // 树形结构
59 61 const searchForm = ref<FormExpose>()
60 62 const treeRef = ref<InstanceType<typeof ElTree>>()
... ... @@ -73,7 +75,9 @@ const handleDeptNodeClick = (data: { [key: string]: any }) =&gt; {
73 75 tableTitle.value = data.name
74 76 methods.getList()
75 77 }
76   -
  78 +watch(filterText, (val) => {
  79 + treeRef.value!.filter(val)
  80 +})
77 81 // ========== CRUD 相关 ==========
78 82 const loading = ref(false) // 遮罩层
79 83 const actionType = ref('') // 操作按钮的类型
... ... @@ -265,6 +269,7 @@ getList()
265 269 <span>部门列表</span>
266 270 </div>
267 271 </template>
  272 + <el-input v-model="filterText" placeholder="搜索部门" />
268 273 <el-tree
269 274 ref="treeRef"
270 275 node-key="id"
... ... @@ -272,7 +277,7 @@ getList()
272 277 :data="deptOptions"
273 278 :props="defaultProps"
274 279 :highlight-current="true"
275   - :filter-method="filterNode"
  280 + :filter-node-method="filterNode"
276 281 :expand-on-click-node="false"
277 282 @node-click="handleDeptNodeClick"
278 283 />
... ...