fix: 调整网络错误的提示形式，出现网络超时不再踢出登录
fix: 修复当key为数字类型时，联想弹层第一次选择显示title失败的bug
This commit is contained in:
gaoyunqi
@ -1,206 +1,212 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-input
|
||||
v-model:value="popupValue"
|
||||
:placeholder="placeholder"
|
||||
:addonBefore="addonBefore"
|
||||
:addonAfter="addonAfter"
|
||||
:disabled="disabled"
|
||||
:bordered="bordered"
|
||||
autoComplete="off"
|
||||
:size="size"
|
||||
allowClear
|
||||
@click="showDialog"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #prefix v-if="prefix">
|
||||
<Icon :icon="prefix" />
|
||||
</template>
|
||||
<template #suffix v-if="suffix">
|
||||
<Icon :icon="suffix" />
|
||||
</template>
|
||||
</a-input>
|
||||
<FormItemRest>
|
||||
<MultipleSelect
|
||||
ref="MultipleSelectRef"
|
||||
v-model:multipleDialog="multipleDialog"
|
||||
:popupType="popupType"
|
||||
:dataSourceOptions="dataSourceOptions"
|
||||
:params="params"
|
||||
v-model:value="defaultVal"
|
||||
v-model:popupValue="popupValue"
|
||||
:labelField="labelField"
|
||||
:valueField="valueField"
|
||||
:datasourceType="datasourceType"
|
||||
:dicOptions="dicOptions"
|
||||
:apiConfig="apiConfig"
|
||||
v-model:selectedDataSource="selectedDataSourceVal"
|
||||
:mainKey="mainKey"
|
||||
:subTableIndex="index"
|
||||
@get-list="getList"
|
||||
@submit="handleSubmit"
|
||||
/>
|
||||
</FormItemRest>
|
||||
</div>
|
||||
<div>
|
||||
<a-input
|
||||
v-model:value="popupValue"
|
||||
:addonAfter="addonAfter"
|
||||
:addonBefore="addonBefore"
|
||||
:bordered="bordered"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:size="size"
|
||||
allowClear
|
||||
autoComplete="off"
|
||||
@change="handleChange"
|
||||
@click="showDialog"
|
||||
>
|
||||
<template v-if="prefix" #prefix>
|
||||
<Icon :icon="prefix"/>
|
||||
</template>
|
||||
<template v-if="suffix" #suffix>
|
||||
<Icon :icon="suffix"/>
|
||||
</template>
|
||||
</a-input>
|
||||
<FormItemRest>
|
||||
<MultipleSelect
|
||||
ref="MultipleSelectRef"
|
||||
v-model:multipleDialog="multipleDialog"
|
||||
v-model:popupValue="popupValue"
|
||||
v-model:selectedDataSource="selectedDataSourceVal"
|
||||
v-model:value="defaultVal"
|
||||
:apiConfig="apiConfig"
|
||||
:dataSourceOptions="dataSourceOptions"
|
||||
:datasourceType="datasourceType"
|
||||
:dicOptions="dicOptions"
|
||||
:labelField="labelField"
|
||||
:mainKey="mainKey"
|
||||
:params="params"
|
||||
:popupType="popupType"
|
||||
:subTableIndex="index"
|
||||
:valueField="valueField"
|
||||
@submit="handleSubmit"
|
||||
@get-list="getList"
|
||||
/>
|
||||
</FormItemRest>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, nextTick, inject, onMounted } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import MultipleSelect from './components/MultipleSelect.vue';
|
||||
import { camelCaseString, isValidJSON } from '/@/utils/event/design';
|
||||
import {ref, watch, nextTick, inject, onMounted} from 'vue';
|
||||
import {Form} from 'ant-design-vue';
|
||||
import {Icon} from '/@/components/Icon';
|
||||
import MultipleSelect from './components/MultipleSelect.vue';
|
||||
import {camelCaseString, isValidJSON} from '/@/utils/event/design';
|
||||
|
||||
const props = defineProps({
|
||||
popupType: { type: String },
|
||||
value: { type: String },
|
||||
labelField: { type: String, default: 'label' },
|
||||
valueField: { type: String, default: 'value' },
|
||||
placeholder: { type: String },
|
||||
addonBefore: { type: String },
|
||||
addonAfter: { type: String },
|
||||
prefix: { type: String },
|
||||
suffix: { type: String },
|
||||
disabled: { type: Boolean },
|
||||
params: { type: [Array, Object, String, Number] },
|
||||
dataSourceOptions: { type: Array },
|
||||
dicOptions: { type: Array },
|
||||
//数据来源 默认为空 如果不为空 则参数 api
|
||||
datasourceType: String,
|
||||
apiConfig: { type: Object },
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mainKey: String,
|
||||
index: Number,
|
||||
size: String,
|
||||
});
|
||||
const FormItemRest = Form.ItemRest;
|
||||
const formModel = inject<any>('formModel', null);
|
||||
const isCamelCase = inject<boolean>('isCamelCase', false);
|
||||
const multipleDialog = ref<boolean>(false);
|
||||
const popupValue = ref('');
|
||||
const defaultVal = ref<string | undefined>('');
|
||||
const selectedDataSourceVal = ref<any[]>([]);
|
||||
const MultipleSelectRef = ref();
|
||||
const dataSourceList = ref<string[]>([]);
|
||||
|
||||
const emit = defineEmits(['update:value', 'change']);
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
popupValue.value = '';
|
||||
nextTick(async () => {
|
||||
await getSubDatasourceList();
|
||||
setFormModel();
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const getList = (list) => {
|
||||
dataSourceList.value = list;
|
||||
};
|
||||
|
||||
const showDialog = () => {
|
||||
multipleDialog.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = (saveValue) => {
|
||||
emit('update:value', saveValue);
|
||||
emit('change');
|
||||
};
|
||||
|
||||
const getSubDatasourceList = async () => {
|
||||
let showValueArr: string[] = [];
|
||||
await MultipleSelectRef.value?.getDatasourceList();
|
||||
|
||||
selectedDataSourceVal.value = [];
|
||||
defaultVal.value = props.value;
|
||||
const selectedArr = props.value?.split(',');
|
||||
dataSourceList.value?.map((item) => {
|
||||
selectedArr?.map((selected) => {
|
||||
if (item[props.valueField] === selected) {
|
||||
selectedDataSourceVal.value?.push(item);
|
||||
}
|
||||
});
|
||||
const props = defineProps({
|
||||
popupType: {type: String},
|
||||
value: {type: String},
|
||||
labelField: {type: String, default: 'label'},
|
||||
valueField: {type: String, default: 'value'},
|
||||
placeholder: {type: String},
|
||||
addonBefore: {type: String},
|
||||
addonAfter: {type: String},
|
||||
prefix: {type: String},
|
||||
suffix: {type: String},
|
||||
disabled: {type: Boolean},
|
||||
params: {type: [Array, Object, String, Number]},
|
||||
dataSourceOptions: {type: Array},
|
||||
dicOptions: {type: Array},
|
||||
//数据来源 默认为空 如果不为空 则参数 api
|
||||
datasourceType: String,
|
||||
apiConfig: {type: Object},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mainKey: String,
|
||||
index: Number,
|
||||
size: String,
|
||||
});
|
||||
const FormItemRest = Form.ItemRest;
|
||||
const formModel = inject<any>('formModel', null);
|
||||
const isCamelCase = inject<boolean>('isCamelCase', false);
|
||||
const multipleDialog = ref<boolean>(false);
|
||||
const popupValue = ref('');
|
||||
const defaultVal = ref<string | undefined>('');
|
||||
const selectedDataSourceVal = ref<any[]>([]);
|
||||
const MultipleSelectRef = ref();
|
||||
const dataSourceList = ref<string[]>([]);
|
||||
|
||||
showValueArr = selectedDataSourceVal.value?.map((item: any) => {
|
||||
return item[props.labelField!];
|
||||
});
|
||||
const emit = defineEmits(['update:value', 'change']);
|
||||
|
||||
popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
|
||||
};
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
popupValue.value = '';
|
||||
nextTick(async () => {
|
||||
await getSubDatasourceList();
|
||||
setFormModel();
|
||||
});
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (!e.target.value) {
|
||||
emit('update:value', e.target.value);
|
||||
emit('change');
|
||||
MultipleSelectRef.value.setFormModel(true);
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
if (props.datasourceType === 'api') {
|
||||
props.apiConfig?.apiParams?.forEach((params) => {
|
||||
params.tableInfo?.forEach((o) => {
|
||||
if (o.bindType == 'data') {
|
||||
let val = isValidJSON(o.value);
|
||||
let field = '';
|
||||
if (val && val.bindTable) {
|
||||
let table = !isCamelCase
|
||||
? val.bindTable + 'List'
|
||||
: camelCaseString(val.bindTable + '_List');
|
||||
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
|
||||
formModel &&
|
||||
formModel[table!][props.index || 0] &&
|
||||
formModel[table!][props.index || 0][field];
|
||||
} else if (val && val.bindField) {
|
||||
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
|
||||
formModel && formModel[field];
|
||||
}
|
||||
}
|
||||
const getList = (list) => {
|
||||
dataSourceList.value = list;
|
||||
};
|
||||
|
||||
const showDialog = () => {
|
||||
multipleDialog.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = (saveValue) => {
|
||||
emit('update:value', saveValue);
|
||||
emit('change');
|
||||
};
|
||||
|
||||
const getSubDatasourceList = async () => {
|
||||
debugger;
|
||||
let showValueArr: string[] = [];
|
||||
await MultipleSelectRef.value?.getDatasourceList();
|
||||
|
||||
selectedDataSourceVal.value = [];
|
||||
defaultVal.value = props.value;
|
||||
const selectedArr = props.value?.split(',');
|
||||
dataSourceList.value?.map((item) => {
|
||||
selectedArr?.map((selected) => {
|
||||
let itemVal = item[props.valueField];
|
||||
if ((itemVal || itemVal === 0) && typeof selected === 'string') {
|
||||
// 处理当key为数字类型时
|
||||
itemVal += '';
|
||||
}
|
||||
if (itemVal === selected) {
|
||||
selectedDataSourceVal.value?.push(item);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
getSubDatasourceList();
|
||||
}
|
||||
});
|
||||
const setFormModel = (isNull?) => {
|
||||
if (props.popupType === 'associate') {
|
||||
let assoConfig = props.datasourceType == 'dic' ? props.dicOptions : [];
|
||||
if (!formModel) return;
|
||||
|
||||
assoConfig?.map((item: any) => {
|
||||
if (item.bindField) {
|
||||
const value = selectedDataSourceVal.value.length
|
||||
? selectedDataSourceVal.value![0][item.name]
|
||||
: '';
|
||||
let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
|
||||
let bindTable = '';
|
||||
if (item.bindTable) {
|
||||
bindTable = !isCamelCase
|
||||
? item.bindTable + 'List'!
|
||||
: camelCaseString(item.bindTable + '_List')!;
|
||||
}
|
||||
let val = isNull ? '' : value;
|
||||
if (props.mainKey) {
|
||||
if (!item.bindTable) {
|
||||
formModel[bindField!] = val;
|
||||
} else {
|
||||
formModel[props.mainKey][props.index!][bindField!] = val;
|
||||
}
|
||||
} else {
|
||||
if (item.bindTable) {
|
||||
formModel[bindTable][0][bindField!] = val;
|
||||
} else {
|
||||
formModel[bindField!] = val;
|
||||
}
|
||||
}
|
||||
showValueArr = selectedDataSourceVal.value?.map((item: any) => {
|
||||
return item[props.labelField!];
|
||||
});
|
||||
|
||||
popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (!e.target.value) {
|
||||
emit('update:value', e.target.value);
|
||||
emit('change');
|
||||
MultipleSelectRef.value.setFormModel(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
onMounted(() => {
|
||||
if (props.datasourceType === 'api') {
|
||||
props.apiConfig?.apiParams?.forEach((params) => {
|
||||
params.tableInfo?.forEach((o) => {
|
||||
if (o.bindType == 'data') {
|
||||
let val = isValidJSON(o.value);
|
||||
let field = '';
|
||||
if (val && val.bindTable) {
|
||||
let table = !isCamelCase
|
||||
? val.bindTable + 'List'
|
||||
: camelCaseString(val.bindTable + '_List');
|
||||
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
|
||||
formModel &&
|
||||
formModel[table!][props.index || 0] &&
|
||||
formModel[table!][props.index || 0][field];
|
||||
} else if (val && val.bindField) {
|
||||
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
|
||||
formModel && formModel[field];
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
getSubDatasourceList();
|
||||
}
|
||||
});
|
||||
const setFormModel = (isNull?) => {
|
||||
if (props.popupType === 'associate') {
|
||||
let assoConfig = props.datasourceType == 'dic' ? props.dicOptions : [];
|
||||
if (!formModel) return;
|
||||
|
||||
assoConfig?.map((item: any) => {
|
||||
if (item.bindField) {
|
||||
const value = selectedDataSourceVal.value.length
|
||||
? selectedDataSourceVal.value![0][item.name]
|
||||
: '';
|
||||
let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
|
||||
let bindTable = '';
|
||||
if (item.bindTable) {
|
||||
bindTable = !isCamelCase
|
||||
? item.bindTable + 'List'!
|
||||
: camelCaseString(item.bindTable + '_List')!;
|
||||
}
|
||||
let val = isNull ? '' : value;
|
||||
if (props.mainKey) {
|
||||
if (!item.bindTable) {
|
||||
formModel[bindField!] = val;
|
||||
} else {
|
||||
formModel[props.mainKey][props.index!][bindField!] = val;
|
||||
}
|
||||
} else {
|
||||
if (item.bindTable) {
|
||||
formModel[bindTable][0][bindField!] = val;
|
||||
} else {
|
||||
formModel[bindField!] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user