Browse Source

perf(table-select): 优化table-select组件单选模式下可能报错的问题

shizhongming 2 years ago
parent
commit
5aa54528a3
  1. 36
      src/components/Form/src/smart-boot/components/base/SmartTableSelect.tsx
  2. 1
      src/components/Form/src/smart-boot/components/base/SmartTableSelectModal.tsx
  3. 35
      src/components/Form/src/smart-boot/components/user/SmartUserTableSelect.vue

36
src/components/Form/src/smart-boot/components/base/SmartTableSelect.tsx

@ -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}
>

1
src/components/Form/src/smart-boot/components/base/SmartTableSelectModal.tsx

@ -187,7 +187,6 @@ const renderTable = (instance) => {
<Col span={showSelect ? 12 : 24}>
<SmartTable
onRegister={registerTable}
checkboxConfig={getTableCheckboxConfig}
onCheckboxChange={handleCheckboxChange}
onCheckboxAll={handleCheckboxAll}
{...tableAttrs}

35
src/components/Form/src/smart-boot/components/user/SmartUserTableSelect.vue

@ -12,6 +12,10 @@
import { useI18n } from '@/hooks/web/useI18n';
import { listUserApi } from '@/api/sys/SystemApi';
const props = defineProps({
parameterHandler: Function as PropType<(parameter?: Recordable) => Recordable>,
});
const { t } = useI18n();
const listUserById = (ids) => {
@ -27,13 +31,19 @@
useSearchForm: true,
proxyConfig: {
ajax: {
query: ({ ajaxParameter }) => listUserApi(ajaxParameter),
query: ({ ajaxParameter }) => {
let parameter = ajaxParameter;
if (props.parameterHandler) {
parameter = props.parameterHandler(ajaxParameter);
}
return listUserApi(parameter);
},
},
},
checkboxConfig: {
rowTrigger: 'multiple',
highlight: true,
},
// checkboxConfig: {
// rowTrigger: 'multiple',
// highlight: true,
// },
rowConfig: {
isHover: true,
},
@ -43,9 +53,6 @@
layout: 'inline',
searchWithSymbol: true,
actionColOptions: { span: undefined },
baseColProps: {
span: 12,
},
schemas: [
{
label: t('system.views.user.table.fullName'),
@ -56,12 +63,12 @@
],
},
columns: [
{
type: 'checkbox',
width: 60,
align: 'center',
fixed: 'left',
},
// {
// type: 'checkbox',
// width: 60,
// align: 'center',
// fixed: 'left',
// },
{
title: '{system.views.user.table.username}',
field: 'username',

Loading…
Cancel
Save