Showing
3 changed files
with
62 additions
and
1 deletions
src/views/common/OrgTreeSelect/index.ts
0 → 100644
| 1 | +export { default as OrgTreeSelect } from './index.vue'; | ... | ... |
src/views/common/OrgTreeSelect/index.vue
0 → 100644
| 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> | ... | ... |