初始版本提交
This commit is contained in:
yaoyn
6
src/components/MultiplePopup/index.ts
Normal file
6
src/components/MultiplePopup/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { withInstall } from '/@/utils';
|
||||
import multiplePopup from './src/MultiplePopup.vue';
|
||||
import multipleSelect from './src/components/MultipleSelect.vue';
|
||||
|
||||
export const MultiplePopup = withInstall(multiplePopup);
|
||||
export const MultipleSelect = withInstall(multipleSelect);
|
||||
206
src/components/MultiplePopup/src/MultiplePopup.vue
Normal file
206
src/components/MultiplePopup/src/MultiplePopup.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<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>
|
||||
</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';
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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>
|
||||
400
src/components/MultiplePopup/src/components/MultipleSelect.vue
Normal file
400
src/components/MultiplePopup/src/components/MultipleSelect.vue
Normal file
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:width="800"
|
||||
:visible="props.multipleDialog"
|
||||
:title="title"
|
||||
:destroyOnClose="true"
|
||||
@ok="submitDialog"
|
||||
@cancel="closeDialog"
|
||||
:okText="t('确认')"
|
||||
:cancelText="t('取消')"
|
||||
:bodyStyle="{ padding: '20px' }"
|
||||
>
|
||||
<a-row :gutter="12" style="margin-bottom: 10px">
|
||||
<a-col :span="8">
|
||||
<a-input v-model:value="state.searchText" :placeholder="t('请输入要查询的关键字')" />
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-button type="primary" @click="getDatasourceList(1)">
|
||||
<template #icon><Icon icon="ant-design:search-outlined" /></template>
|
||||
{{ t('搜索') }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-button @click="resetSearch">
|
||||
<template #icon><Icon icon="ant-design:sync-outlined" /></template>
|
||||
{{ t('重置') }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-tabs
|
||||
v-model:activeKey="state.activeKey"
|
||||
v-if="popupType === 'multiple' || popupType === 'preload' || popupType === 'button'"
|
||||
>
|
||||
<a-tab-pane key="1" :tab="t('数据选择')" style="overflow-y: auto">
|
||||
<a-table
|
||||
:dataSource="state.dataSourceList"
|
||||
:columns="state.sourceColumns"
|
||||
:row-selection="{
|
||||
selectedRowKeys: state.selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
:pagination="paginationProps"
|
||||
:scroll="{ y: '200px' }"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" :tab="t('已选记录')" force-render>
|
||||
<a-table
|
||||
:dataSource="selectedList"
|
||||
:columns="state.selectedColumns"
|
||||
:scroll="{ y: '200px' }"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'delete'">
|
||||
<Icon
|
||||
icon="ant-design:delete-outlined"
|
||||
color="#f56c6c"
|
||||
@click="deleteSelected(record, index)"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-table
|
||||
v-else-if="popupType === 'associate'"
|
||||
:dataSource="state.dataSourceList"
|
||||
:columns="state.sourceColumns"
|
||||
:pagination="paginationProps"
|
||||
:row-selection="{
|
||||
selectedRowKeys: state.selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
type: 'radio',
|
||||
}"
|
||||
:scroll="{ y: '200px' }"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, watch, reactive, computed, inject, ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { getDatasourceById } from '/@/api/system/datasource';
|
||||
import { getDicDetailPageList } from '/@/api/system/dic';
|
||||
import { isFunction } from '/@/utils/is';
|
||||
import type { ColumnProps } from 'ant-design-vue/lib/table';
|
||||
import { apiConfigFunc, camelCaseString } from '/@/utils/event/design';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
multipleDialog: { type: Boolean },
|
||||
popupType: { type: String },
|
||||
dataSourceOptions: { type: Array },
|
||||
params: {
|
||||
type: [Array, Object, String, Number],
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
popupValue: { type: String },
|
||||
labelField: { type: String },
|
||||
valueField: { type: String },
|
||||
selectedDataSource: {
|
||||
type: Array as PropType<any[]>,
|
||||
default: () => [],
|
||||
},
|
||||
dicOptions: { type: Array as PropType<any[]> },
|
||||
//数据来源 默认为空 如果不为空
|
||||
datasourceType: String,
|
||||
apiConfig: Object,
|
||||
tableColumns: { type: Array },
|
||||
//是否子表按钮选数据使用
|
||||
isSubFormUse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
mainKey: String,
|
||||
subTableIndex: Number,
|
||||
});
|
||||
const emit = defineEmits([
|
||||
'update:multipleDialog',
|
||||
'update:popupValue',
|
||||
'update:selectedDataSource',
|
||||
'getList',
|
||||
'submit',
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
if (props.isSubFormUse) {
|
||||
await getDatasourceList(1);
|
||||
}
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
selectedRowKeys: [] as any[],
|
||||
activeKey: '1',
|
||||
searchText: '',
|
||||
sourceColumns: [] as ColumnProps[],
|
||||
selectedColumns: [] as ColumnProps[],
|
||||
dataSourceList: [] as any[],
|
||||
assoComponent: {},
|
||||
});
|
||||
|
||||
const selectedList = ref(props.selectedDataSource);
|
||||
|
||||
const paginationProps = reactive({
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
onChange: (page) => getDatasourceList(page),
|
||||
});
|
||||
const formModel = inject<any>('formModel', null);
|
||||
const isCamelCase = inject<boolean>('isCamelCase', false);
|
||||
const title = computed(() => {
|
||||
switch (props.popupType) {
|
||||
case 'multiple':
|
||||
return t('多选弹层-选择记录');
|
||||
case 'associate':
|
||||
return t('联想弹层-联想数据配置');
|
||||
case 'preload':
|
||||
case 'button':
|
||||
return t('选择数据');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.datasourceType,
|
||||
(val) => {
|
||||
let options = [] as any[];
|
||||
if (val === 'datasource' && props.dataSourceOptions?.length) {
|
||||
options = props.dataSourceOptions as any[];
|
||||
}
|
||||
if (val === 'dic' && props.dicOptions?.length) {
|
||||
options = props.dicOptions as any[];
|
||||
}
|
||||
if (val === 'api') {
|
||||
options = props.apiConfig?.outputParams as any[];
|
||||
}
|
||||
options?.map((item: any) => {
|
||||
if (item.show || !Object.keys(item).includes('show')) {
|
||||
state.sourceColumns.push({
|
||||
title: item.tableTitle,
|
||||
dataIndex: item.name,
|
||||
align: 'center',
|
||||
width: Number(item.width),
|
||||
});
|
||||
}
|
||||
});
|
||||
state.selectedColumns = cloneDeep(state.sourceColumns);
|
||||
state.selectedColumns.unshift({
|
||||
align: 'center',
|
||||
title: '',
|
||||
dataIndex: 'delete',
|
||||
key: 'delete',
|
||||
width: 50,
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [state.dataSourceList, props.selectedDataSource, props.value],
|
||||
() => {
|
||||
emit('getList', state.dataSourceList);
|
||||
if (!state.dataSourceList.length) return;
|
||||
selectedList.value = [];
|
||||
state.selectedRowKeys = [];
|
||||
state.dataSourceList.map((data: any, index: number) => {
|
||||
data.key = index + 1;
|
||||
if (props.value) {
|
||||
props.selectedDataSource.map((select: any) => {
|
||||
if (data.key === select.key) {
|
||||
selectedList.value.push(data);
|
||||
state.selectedRowKeys.push(data.key);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
const resetSearch = () => {
|
||||
state.searchText = '';
|
||||
getDatasourceList(1);
|
||||
};
|
||||
const closeDialog = () => {
|
||||
emit('update:multipleDialog', false);
|
||||
};
|
||||
|
||||
const submitDialog = () => {
|
||||
let saveValueArr: string[] = [];
|
||||
let showValueArr: string[] = [];
|
||||
let saveValue = '';
|
||||
let showValue = '';
|
||||
selectedList.value?.map((item: any) => {
|
||||
saveValueArr.push(item[props.valueField!]);
|
||||
showValueArr.push(item[props.labelField!]);
|
||||
});
|
||||
//value相同去重
|
||||
saveValue = [...new Set(saveValueArr)].join(',');
|
||||
showValue = showValueArr.join(',');
|
||||
|
||||
setFormModel();
|
||||
|
||||
emit('update:multipleDialog', false);
|
||||
emit('update:popupValue', showValue);
|
||||
emit('update:selectedDataSource', selectedList.value);
|
||||
emit('submit', props.isSubFormUse ? selectedList.value : saveValue);
|
||||
};
|
||||
|
||||
const setFormModel = (isNull?) => {
|
||||
if (props.popupType === 'associate') {
|
||||
let assoConfig;
|
||||
switch (props.datasourceType) {
|
||||
case 'datasource':
|
||||
assoConfig = props.dataSourceOptions;
|
||||
break;
|
||||
case 'dic':
|
||||
assoConfig = props.dicOptions;
|
||||
break;
|
||||
case 'api':
|
||||
assoConfig = props.apiConfig?.outputParams;
|
||||
break;
|
||||
}
|
||||
if (!formModel) return;
|
||||
assoConfig?.map((item: any) => {
|
||||
if (item.bindField) {
|
||||
const value = selectedList.value.length ? selectedList.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.subTableIndex!][bindField!] = val;
|
||||
}
|
||||
} else {
|
||||
if (item.bindTable) {
|
||||
formModel[bindTable][0][bindField!] = val;
|
||||
} else {
|
||||
formModel[bindField!] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (props.popupType === 'button') {
|
||||
let table = '';
|
||||
selectedList.value?.forEach((x) => {
|
||||
const dataObj = {};
|
||||
props.tableColumns?.map((item: any) => {
|
||||
if (!item?.bindField) return;
|
||||
if (item.bindTable && !table)
|
||||
table = !isCamelCase
|
||||
? item.bindTable + 'List'!
|
||||
: camelCaseString(item.bindTable + '_List')!;
|
||||
let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
|
||||
dataObj[bindField as string] = item.prestrainField ? x[item.prestrainField] : null;
|
||||
});
|
||||
if (formModel[table]) formModel[table].push(dataObj);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getDatasourceList = async (limit = 1) => {
|
||||
paginationProps.current = limit;
|
||||
let api;
|
||||
if (props.datasourceType) {
|
||||
if (props.datasourceType === 'dic') {
|
||||
api = getDicDetailPageList;
|
||||
}
|
||||
if (props.datasourceType === 'datasource') {
|
||||
api = getDatasourceById;
|
||||
}
|
||||
if (props.datasourceType === 'api') {
|
||||
const apiConfigParams = cloneDeep(props.apiConfig);
|
||||
if (!!state.searchText) {
|
||||
const keywordInfo = apiConfigParams!.apiParams[0].tableInfo?.find(
|
||||
(item) => item.name === 'keyword',
|
||||
);
|
||||
if (keywordInfo) {
|
||||
keywordInfo.value = state.searchText;
|
||||
keywordInfo.bindType = 'value';
|
||||
} else {
|
||||
apiConfigParams!.apiParams[0].tableInfo.push({
|
||||
name: 'keyword',
|
||||
value: state.searchText,
|
||||
bindType: 'value',
|
||||
});
|
||||
}
|
||||
state.dataSourceList = await apiConfigFunc(
|
||||
apiConfigParams,
|
||||
isCamelCase,
|
||||
formModel,
|
||||
props.subTableIndex,
|
||||
);
|
||||
} else {
|
||||
state.dataSourceList = await apiConfigFunc(
|
||||
props.apiConfig,
|
||||
isCamelCase,
|
||||
formModel,
|
||||
props.subTableIndex,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!api || !isFunction(api)) return;
|
||||
state.dataSourceList = [];
|
||||
try {
|
||||
let dataParams = {};
|
||||
const pageParams = { order: 'desc', size: 10, limit, keyword: state.searchText };
|
||||
if (props.datasourceType === 'dic') {
|
||||
Object.assign(dataParams, props.params, pageParams);
|
||||
}
|
||||
if (props.datasourceType === 'datasource') {
|
||||
Object.assign(
|
||||
dataParams,
|
||||
{
|
||||
id: props.params as string,
|
||||
},
|
||||
pageParams,
|
||||
);
|
||||
}
|
||||
const res = await api(dataParams);
|
||||
state.dataSourceList = res.list;
|
||||
paginationProps.total = Number(res.total);
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
}
|
||||
};
|
||||
|
||||
const onSelectChange = (rowKeys, selectedRows) => {
|
||||
state.selectedRowKeys = rowKeys;
|
||||
selectedList.value = selectedRows;
|
||||
};
|
||||
|
||||
const deleteSelected = (record, index) => {
|
||||
selectedList.value.splice(index, 1);
|
||||
state.selectedRowKeys = state.selectedRowKeys.filter((item) => {
|
||||
return item !== record.key;
|
||||
});
|
||||
};
|
||||
defineExpose({ getDatasourceList, setFormModel });
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
Reference in New Issue
Block a user