提交 | 用户 | 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> |