Commit 818e532025809a3a3ee2efb0f71526dcf9fbda88

Authored by ww
1 parent 09ba7a46

perf: 新增组织下拉树选择组件

... ... @@ -128,4 +128,5 @@ export type ComponentType =
128 128 | 'PollCommandInput'
129 129 | 'RegisterAddressInput'
130 130 | 'ControlGroup'
131   - | 'JSONEditor';
  131 + | 'JSONEditor'
  132 + | 'OrgTreeSelect';
... ...
  1 +export { default as OrgTreeSelect } from './index.vue';
... ...
  1 +<script lang="ts" setup>
  2 + import { ApiTreeSelect } from '/@/components/Form';
  3 + import { Button } from 'ant-design-vue';
  4 + import { getOrganizationList } from '/@/api/system/system';
  5 + import { computed, ref, unref } from 'vue';
  6 + import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
  7 + import { useDrawer } from '/@/components/Drawer';
  8 +
  9 + const [registerDrawer, { openDrawer }] = useDrawer();
  10 +
  11 + withDefaults(
  12 + defineProps<{
  13 + apiTreeSelect?: Recordable;
  14 + showCreate?: boolean;
  15 + }>(),
  16 + {
  17 + showCreate: true,
  18 + }
  19 + );
  20 +
  21 + const handleOpenCreate = () => {
  22 + openDrawer(true, { isUpdate: false });
  23 + };
  24 +
  25 + const timespan = ref(Date.now());
  26 +
  27 + const getBindProps = computed(() => {
  28 + return {
  29 + maxLength: 250,
  30 + placeholder: '请选择所属组织',
  31 + api: getOrganizationList,
  32 + params: { _t: unref(timespan) },
  33 + replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
  34 + };
  35 + });
  36 +
  37 + const handleReload = () => {
  38 + timespan.value = Date.now();
  39 + };
  40 +</script>
  41 +
  42 +<template>
  43 + <section class="flex">
  44 + <ApiTreeSelect v-bind="getBindProps" />
  45 + <Button v-if="showCreate" type="link" @click="handleOpenCreate">新增组织</Button>
  46 + <OrganizationDrawer v-if="showCreate" @register="registerDrawer" @success="handleReload" />
  47 + </section>
  48 +</template>
... ...