Commit 3ce2cc8e980ab7dc100c3a985193c69cd0b86662

Authored by xp.Huang
2 parents c8ac5b67 b65b995b

Merge branch 'dev-fix-ww' into 'main_dev'

feat: 新增组织下拉树

See merge request yunteng/thingskit-front!557
... ... @@ -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 + const props = withDefaults(
  12 + defineProps<{
  13 + value?: string | string[];
  14 + apiTreeSelectProps?: Recordable;
  15 + showCreate?: boolean;
  16 + }>(),
  17 + {
  18 + showCreate: true,
  19 + }
  20 + );
  21 +
  22 + const emit = defineEmits(['change']);
  23 +
  24 + const handleOpenCreate = () => {
  25 + openDrawer(true, { isUpdate: false });
  26 + };
  27 +
  28 + const timespan = ref(Date.now());
  29 +
  30 + const getBindProps = computed(() => {
  31 + const { value, apiTreeSelectProps = {} } = props;
  32 + const { params = {} } = apiTreeSelectProps;
  33 + return {
  34 + replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
  35 + getPopupContainer: () => document.body,
  36 + placeholder: '请选择所属组织',
  37 + maxLength: 250,
  38 + ...apiTreeSelectProps,
  39 + value,
  40 + api: getOrganizationList,
  41 + params: { ...params, _t: unref(timespan) },
  42 + onChange: (...args: any[]) => {
  43 + emit('change', ...args);
  44 + },
  45 + };
  46 + });
  47 +
  48 + const handleReload = () => {
  49 + timespan.value = Date.now();
  50 + };
  51 +</script>
  52 +
  53 +<template>
  54 + <section class="flex">
  55 + <ApiTreeSelect v-bind="getBindProps" />
  56 + <Button v-if="showCreate" type="link" @click="handleOpenCreate">新增组织</Button>
  57 + <OrganizationDrawer v-if="showCreate" @register="registerDrawer" @success="handleReload" />
  58 + </section>
  59 +</template>
... ...