|
|
@@ -1,6 +1,6 @@
|
|
|
import type { SmartTableProps } from '@/components/SmartTable';
|
|
|
|
|
|
-import { defineComponent, ref } from 'vue';
|
|
|
+import { computed, defineComponent, ref, toRefs, unref } from 'vue';
|
|
|
import { Row, Col } from 'ant-design-vue';
|
|
|
|
|
|
import { propTypes } from '@/utils/propTypes';
|
|
|
@@ -19,7 +19,7 @@ export default defineComponent({
|
|
|
props: {
|
|
|
// 是否支持多选
|
|
|
multiple: propTypes.bool.def(true),
|
|
|
- value: propTypes.oneOfType([propTypes.string, propTypes.array]),
|
|
|
+ value: propTypes.oneOfType([propTypes.string, propTypes.array, propTypes.number]),
|
|
|
// label字段
|
|
|
labelField: propTypes.string.isRequired,
|
|
|
// value字段
|
|
|
@@ -33,6 +33,7 @@ export default defineComponent({
|
|
|
},
|
|
|
emits: ['update:value', 'change'],
|
|
|
setup(props, { emit }) {
|
|
|
+ const { value: valueRef, multiple: multipleRef } = toRefs(props);
|
|
|
const [registerModal, { openModal }] = useModal();
|
|
|
const optionsRef = ref<Array<any>>([]);
|
|
|
|
|
|
@@ -40,20 +41,27 @@ export default defineComponent({
|
|
|
optionsRef.value = options;
|
|
|
};
|
|
|
const handleSelectData = (options: any[]) => {
|
|
|
- emit(
|
|
|
- 'update:value',
|
|
|
- options.map((item) => item.value),
|
|
|
- );
|
|
|
- emit(
|
|
|
- 'change',
|
|
|
- options.map((item) => item.value),
|
|
|
- );
|
|
|
+ handleEmit(options.map((item) => item.value));
|
|
|
};
|
|
|
const handleDeselect = (value) => {
|
|
|
const data = (props.value as any[]).filter((item) => item !== value);
|
|
|
- emit('update:value', data);
|
|
|
- emit('change', data);
|
|
|
+ handleEmit(data);
|
|
|
};
|
|
|
+ const handleEmit = (data: any[]) => {
|
|
|
+ let value: any | undefined = undefined;
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ value = data;
|
|
|
+ }
|
|
|
+ if (value && !props.multiple) {
|
|
|
+ value = value[0];
|
|
|
+ }
|
|
|
+ emit('update:value', value);
|
|
|
+ emit('change', value);
|
|
|
+ };
|
|
|
+ const computedSelectValue = computed(() => {
|
|
|
+ const value = unref(valueRef);
|
|
|
+ return value ? (unref(multipleRef) ? value : [value]) : value;
|
|
|
+ });
|
|
|
return {
|
|
|
registerModal,
|
|
|
openModal,
|
|
|
@@ -61,6 +69,7 @@ export default defineComponent({
|
|
|
optionsRef,
|
|
|
handleDeselect,
|
|
|
handleOptionChange,
|
|
|
+ computedSelectValue,
|
|
|
};
|
|
|
},
|
|
|
render() {
|
|
|
@@ -81,6 +90,7 @@ export default defineComponent({
|
|
|
handleDeselect,
|
|
|
handleOptionChange,
|
|
|
size,
|
|
|
+ computedSelectValue,
|
|
|
} = this;
|
|
|
const modalSlots: any = {
|
|
|
table: $slots.table,
|
|
|
@@ -120,7 +130,7 @@ export default defineComponent({
|
|
|
onSelectData={handleSelectData}
|
|
|
valueField={valueField}
|
|
|
// @ts-ignore
|
|
|
- selectValues={value}
|
|
|
+ selectValues={computedSelectValue}
|
|
|
multiple={multiple}
|
|
|
tableProps={tableProps}
|
|
|
>
|