瀏覽代碼

feat(user): change tree select

gemercheung 1 年之前
父節點
當前提交
ad1672426f
共有 1 個文件被更改,包括 21 次插入19 次删除
  1. 21 19
      src/view/users-edit.vue

+ 21 - 19
src/view/users-edit.vue

@@ -4,9 +4,12 @@
     <el-form-item label="单位名称" prop="orgId" required>
       <!-- <el-autocomplete style="width: 300px" v-model="data.orgName" :fetch-suggestions="querySearch" clearable
         class="inline-input w-50" placeholder="请输入" @select="handleSelect" /> -->
-      <el-select style="width: 300px" v-model="data.orgId" clearable @change="handleSelect">
-        <el-option :value="Number(id)" :label="value" v-for="{ value, id } in allOrgs" />
-      </el-select>
+      <el-tree-select :props="{
+        value: 'orgId',
+        label: (data: any) => data.orgName,
+      }" style="width: 300px" v-model="data.orgId" :data="allOrgs" node-key="orgId" @node-click="handleNodeClick" clearable>
+
+      </el-tree-select>
     </el-form-item>
 
     <el-form-item label="姓名" prop="nickName" required>
@@ -21,7 +24,8 @@ import { ElMessage, type FormInstance, type FormRules } from "element-plus";
 // import { ElMessage } from "element-plus";
 import type { OrganizationType } from '@/request/organization'
 import {
-  getOrgListFetch,
+  // getOrgListFetch,
+  getOrgListFetchList,
   UserType
 } from "@/request";
 
@@ -31,7 +35,9 @@ import { ref, reactive, unref, onMounted, watchEffect } from "vue";
 const baseFormRef = ref<FormInstance>();
 
 type SelectType = {
-  value: string, id: number
+  orgName: string,
+  orgId: number
+  children: SelectType[]
 }
 
 const allOrgs = ref<SelectType[]>([]);
@@ -60,15 +66,10 @@ const data = ref<Partial<OrganizationType> & Partial<UserType>>({
 });
 
 onMounted(async () => {
-  const data = await getOrgListFetch({
-    pageNum: 1,
-    pageSize: 10000,
-  })
-  // console.log('allOrgs', data.records);
-  allOrgs.value = Array.from(data.records).map((item: OrganizationType) => {
-    const i: SelectType = { value: item['orgName'], id: item['orgId'] }
-    return i
-  });
+
+  const data = await getOrgListFetchList()
+  console.log('list', data)
+  allOrgs.value = data as any as SelectType[]
 
 })
 
@@ -83,12 +84,13 @@ watchEffect(() => {
     data.value = { ...props.user }
   }
 })
-const handleSelect = (orgId: number) => {
-  const item = Array.from(allOrgs.value).find(i => i.id === orgId)
-  if (item) {
-    data.value.orgName = item.value
-  }
+
+const handleNodeClick = (node: SelectType) => {
+  data.value.orgId = node.orgId
+  data.value.orgName = node.orgName
+  console.log('handleNodeClick', node.orgId, node.orgName)
 }
+
 defineExpose<QuiskExpose>({
   async submit() {
     if (unref(baseFormRef)) {