CRM系统前端
查看 | 历史 | 提交 | 提交对比
黄小民
2023-10-13 95ca2c3ae6085d97f24546e24117ee2518f33e2d
提交 | 用户 | age
400715 1 <template>
CZ 2   <Transfer
3     :data-source="getdataSource"
4     :filter-option="filterOption"
5     :render="(item) => item.title"
6     :showSelectAll="showSelectAll"
7     :selectedKeys="selectedKeys"
8     :targetKeys="getTargetKeys"
9     :showSearch="showSearch"
95ca2c 10     :disabled="disabled"
400715 11     @change="handleChange"
CZ 12   />
13 </template>
14
15 <script lang="ts">
ba2415 16   import { computed, defineComponent, watch, ref, unref, watchEffect, PropType } from 'vue';
400715 17   import { Transfer } from 'ant-design-vue';
CZ 18   import { isFunction } from '/@/utils/is';
19   import { get, omit } from 'lodash-es';
20   import { propTypes } from '/@/utils/propTypes';
21   import { useI18n } from '/@/hooks/web/useI18n';
22   import { TransferDirection, TransferItem } from 'ant-design-vue/lib/transfer';
746931 23
400715 24   export default defineComponent({
CZ 25     name: 'ApiTransfer',
26     components: { Transfer },
27     props: {
692df3 28       value: { type: Array as PropType<Array<string>> },
400715 29       api: {
ba2415 30         type: Function as PropType<(arg) => Promise<TransferItem[]>>,
400715 31         default: null,
CZ 32       },
33       params: { type: Object },
692df3 34       dataSource: { type: Array as PropType<Array<TransferItem>> },
400715 35       immediate: propTypes.bool.def(true),
CZ 36       alwaysLoad: propTypes.bool.def(false),
ba2415 37       afterFetch: { type: Function },
400715 38       resultField: propTypes.string.def(''),
CZ 39       labelField: propTypes.string.def('title'),
40       valueField: propTypes.string.def('key'),
41       showSearch: { type: Boolean, default: false },
42       disabled: { type: Boolean, default: false },
43       filterOption: {
44         type: Function as PropType<(inputValue: string, item: TransferItem) => boolean>,
45       },
692df3 46       selectedKeys: { type: Array as PropType<Array<string>> },
400715 47       showSelectAll: { type: Boolean, default: false },
692df3 48       targetKeys: { type: Array as PropType<Array<string>> },
400715 49     },
CZ 50     emits: ['options-change', 'change'],
51     setup(props, { attrs, emit }) {
52       const _dataSource = ref<TransferItem[]>([]);
53       const _targetKeys = ref<string[]>([]);
54       const { t } = useI18n();
55
56       const getAttrs = computed(() => {
57         return {
58           ...(!props.api ? { dataSource: unref(_dataSource) } : {}),
59           ...attrs,
60         };
61       });
62       const getdataSource = computed(() => {
63         const { labelField, valueField } = props;
64
ba2415 65         return unref(_dataSource).reduce((prev, next) => {
400715 66           if (next) {
CZ 67             prev.push({
68               ...omit(next, [labelField, valueField]),
69               title: next[labelField],
70               key: next[valueField],
71             });
72           }
73           return prev;
74         }, [] as TransferItem[]);
75       });
76       const getTargetKeys = computed<string[]>(() => {
c0c311 77         /* if (unref(_targetKeys).length > 0) {
400715 78           return unref(_targetKeys);
c0c311 79         } */
400715 80         if (Array.isArray(props.value)) {
CZ 81           return props.value;
82         }
ba2415 83         if (Array.isArray(props.targetKeys)) {
d7f5df 84           return props.targetKeys;
Q 85         }
400715 86         return [];
CZ 87       });
88
89       function handleChange(keys: string[], direction: TransferDirection, moveKeys: string[]) {
90         _targetKeys.value = keys;
91         console.log(direction);
92         console.log(moveKeys);
93         emit('change', keys);
94       }
95
96       watchEffect(() => {
97         props.immediate && !props.alwaysLoad && fetch();
98       });
99
100       watch(
101         () => props.params,
102         () => {
103           fetch();
104         },
105         { deep: true },
106       );
107
108       async function fetch() {
109         const api = props.api;
110         if (!api || !isFunction(api)) {
111           if (Array.isArray(props.dataSource)) {
112             _dataSource.value = props.dataSource;
113           }
114           return;
115         }
116         _dataSource.value = [];
117         try {
118           const res = await api(props.params);
119           if (Array.isArray(res)) {
120             _dataSource.value = res;
121             emitChange();
122             return;
123           }
124           if (props.resultField) {
125             _dataSource.value = get(res, props.resultField) || [];
126           }
127           emitChange();
128         } catch (error) {
129           console.warn(error);
130         }
131       }
132       function emitChange() {
133         emit('options-change', unref(getdataSource));
134       }
135       return { getTargetKeys, getdataSource, t, getAttrs, handleChange };
136     },
137   });
138 </script>