bug-605

src/pages/index/system/institution.vue

@@ -1,30 +1,45 @@
 <script setup lang="ts">
 import InstitutionEdit from '@/components/InstitutionEdit.vue';
-import UserPassword from '@/components/UserPassword.vue';
-import UserPreview from '@/components/UserPreview.vue';
-import UserQRCode from '@/components/UserQRCode.vue';
 import { type InstitutionModel, type InstitutionQuery } from '@/model/system.model';
 
-import { branchMethod, institutionMethod, editInstitutionMethod, deleteInstitutionMethod } from '@/request/api/system.api';
+import { branchMethod, institutionMethod, deleteInstitutionMethod } from '@/request/api/system.api';
 import { usePagination, useRequest } from 'alova/client';
 import { notification } from 'ant-design-vue';
 
 import { VxeButton, type VxeFormListeners, type VxeFormProps, type VxeGridInstance, type VxeGridListeners, type VxeGridProps, VxeUI } from 'vxe-pc-ui';
 
-const { data: branch, loading: branchLoading } = useRequest(branchMethod);
-const organizationOptions = ref<{ label: string; value: string }[]>([
-  { label: 'liuzhi', value: '1' },
-  { label: 'alice', value: '2' },
-]);
+const { data: branch, loading: branchLoading } = useRequest(branchMethod(0, 1, 1));
 const model = shallowRef<InstitutionQuery>();
+function findDeptLabelById(id: any, nodes?: any[]): string | undefined {
+  if (!id || !Array.isArray(nodes)) return;
+  const target = String(id);
+  for (const n of nodes) {
+    if (n?.id !== undefined && String(n.id) === target) return n?.label;
+    const hit = findDeptLabelById(id, n?.children);
+    if (hit) return hit;
+  }
+}
 const searchFormProps = reactive<VxeFormProps<InstitutionQuery>>({
   titleWidth: 100,
   titleAlign: 'right',
   titleColon: true,
   data: {},
   items: [
-    { field: 'userName', title: '组织名称', span: 8, itemRender: { name: 'VxeSelect', props: { options: organizationOptions, optionProps: { value: 'value', label: 'label' } } } },
-    { field: 'nickName', title: '机构名称', span: 8, itemRender: { name: 'VxeInput' } },
+    {
+      field: 'orgName',
+      title: '组织名称',
+      span: 8,
+      itemRender: {
+        name: 'VxeTreeSelect',
+        props: {
+          loading: computed(() => branchLoading.value),
+          options: computed(() => branch.value),
+          optionProps: { value: 'id', label: 'label' },
+          clearable: true,
+        },
+      },
+    },
+    { field: 'name', title: '机构名称', span: 8, itemRender: { name: 'VxeInput' } },
     {
       span: 8,
       itemRender: {
@@ -39,13 +54,15 @@ const searchFormProps = reactive<VxeFormProps<InstitutionQuery>>({
 });
 const searchFormEmits: VxeFormListeners<InstitutionQuery> = {
   submit({ data }) {
-    model.value = { ...data };
+    const orgName = findDeptLabelById((data as any)?.orgName, branch.value as any) ?? (data as any)?.orgName;
+    model.value = { ...(data as any), orgName };
   },
   reset({ data }) {
     model.value = { ...data };
   },
 };
 
+const gridEvents: VxeGridListeners = {};
 const gridRef = ref<VxeGridInstance<InstitutionModel>>();
 const gridOptions = reactive<VxeGridProps<InstitutionModel>>({
   id: 'user-list',
@@ -96,7 +113,7 @@ const gridOptions = reactive<VxeGridProps<InstitutionModel>>({
           { content: '小程序码', status: 'primary', name: 'QRCode' },
         ],
         events: {
-          click({ row, rowIndex }, { name }) {
+          click({ row, rowIndex }: any, { name }: any) {
             let method;
             if (name === 'editInstitution') {
               method = editInstitution;
@@ -157,13 +174,16 @@ function editInstitution(model?: InstitutionModel, index?: number) {
     storage: true,
     slots: {
       default() {
-        return h(InstitutionEdit, <any>{
-          data: model,
-          onSubmit(data?: InstitutionModel) {
-            refresh(page.value);
-            VxeUI.modal.close(`institution-edit-modal`);
-          },
-        });
+        return h(
+          InstitutionEdit,
+          {
+            data: model,
+            onSubmit(data?: InstitutionModel) {
+              refresh(page.value);
+              VxeUI.modal.close(`institution-edit-modal`);
+            },
+          } as any
+        );
       },
     },
   });
@@ -183,9 +203,12 @@ function QRCode(model: InstitutionModel) {
     width: 256 + 12 * 2,
     slots: {
       default() {
-        return h(UserQRCode, <any>{
-          dataset: model,
-        });
+        return h(
+          UserQRCode,
+          {
+            dataset: model,
+          } as any
+        );
       },
     },
   });
@@ -207,12 +230,8 @@ function QRCode(model: InstitutionModel) {
       </vxe-grid>
     </main>
     <footer class="flex-none">
-      <vxe-pager
-        v-model:current-page="page"
-        v-model:page-size="pageSize"
-        :total="total"
-        :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
-      />
+      <vxe-pager v-model:current-page="page" v-model:page-size="pageSize" :total="total"
+        :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']" />
     </footer>
   </div>
 </template>

src/pages/index/system/organization.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import OrganizationManagement from '@/components/OrganizationManagement.vue';
 import type { OrganizationModel, OrganizationQuery } from '@/model/system.model';
-
 import { organizationMethod, deleteOrganizationMethod } from '@/request/api/system.api';
-import { usePagination } from 'alova/client';
+import { usePagination, useRequest } from 'alova/client';
 import { notification } from 'ant-design-vue';
 import PatientBelong from '@/components/PatientBelong.vue';
 import { type VxeFormListeners, type VxeFormProps, type VxeGridInstance, type VxeGridListeners, type VxeGridProps, VxeUI } from 'vxe-pc-ui';
-const organizationOptions = ref<{ label: string; value: string }[]>([
-  { label: 'liuzhi', value: '1' },
-  { label: 'alice', value: '2' },
-]);
+import { branchMethod } from '@/request/api/system.api';
 const model = shallowRef<OrganizationQuery>();
+const { data: branch, loading: branchLoading } = useRequest(branchMethod(0, 1, 1));
+function findDeptLabelById(id: any, nodes?: any[]): string | undefined {
+  if (!id || !Array.isArray(nodes)) return;
+  const target = String(id);
+  for (const n of nodes) {
+    if (n?.id !== undefined && String(n.id) === target) return n?.label;
+    const hit = findDeptLabelById(id, n?.children);
+    if (hit) return hit;
+  }
+}
 const searchFormProps = reactive<VxeFormProps<OrganizationQuery>>({
   titleWidth: 100,
   titleAlign: 'right',
@@ -20,8 +26,18 @@ const searchFormProps = reactive<VxeFormProps<OrganizationQuery>>({
     name: '',
   },
   items: [
-    { field: 'name', title: '组织名称', span: 8, itemRender: { name: 'VxeSelect', props: { options: organizationOptions, optionProps: { value: 'value', label: 'label' } } } },
-
+    {
+      field: 'name', title: '组织名称', span: 8,
+      itemRender: {
+        name: 'VxeTreeSelect',
+        props: {
+          loading: computed(() => branchLoading.value),
+          options: computed(() => branch.value),
+          optionProps: { value: 'id', label: 'label' },
+          clearable: true,
+        },
+      },
+    },
     {
       span: 16,
       itemRender: {
@@ -39,7 +55,8 @@ const searchFormProps = reactive<VxeFormProps<OrganizationQuery>>({
 });
 const searchFormEmits: VxeFormListeners<OrganizationQuery> = {
   submit({ data }) {
-    model.value = { ...data };
+    const name = findDeptLabelById((data as any)?.name, branch.value as any) ?? (data as any)?.name;
+    model.value = { ...(data as any), name };
   },
   reset({ data }) {
     model.value = { ...data };
@@ -164,13 +181,16 @@ function editOrganization(model?: OrganizationModel, index?: number) {
     height: 600,
     slots: {
       default() {
-        return h(OrganizationManagement, <any>{
-          data: model,
-          onSubmit(data: OrganizationModel) {
-            refresh(page.value);
-            VxeUI.modal.close(`organization-edit-modal`);
-          },
-        });
+        return h(
+          OrganizationManagement,
+          {
+            data: model,
+            onSubmit(data: OrganizationModel) {
+              refresh(page.value);
+              VxeUI.modal.close(`organization-edit-modal`);
+            },
+          } as any
+        );
       },
     },
   });
@@ -188,13 +208,16 @@ function setPatientBelong(model: OrganizationModel, index: number) {
     height: 600,
     slots: {
       default() {
-        return h(PatientBelong, <any>{
-          data: model,
-          onSubmit(data: OrganizationModel) {
-            refresh(page.value);
-            VxeUI.modal.close(`patient-belong-modal`);
-          },
-        });
+        return h(
+          PatientBelong,
+          {
+            data: model,
+            onSubmit(data: OrganizationModel) {
+              refresh(page.value);
+              VxeUI.modal.close(`patient-belong-modal`);
+            },
+          } as any
+        );
       },
     },
   });
@@ -216,12 +239,8 @@ function setPatientBelong(model: OrganizationModel, index: number) {
       </vxe-grid>
     </main>
     <footer class="flex-none">
-      <vxe-pager
-        v-model:current-page="page"
-        v-model:page-size="pageSize"
-        :total="total"
-        :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
-      />
+      <vxe-pager v-model:current-page="page" v-model:page-size="pageSize" :total="total"
+        :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']" />
     </footer>
   </div>
 </template>