From b989e45c274eb1d792b57a22d706a3c74cb9e2ca Mon Sep 17 00:00:00 2001 From: fzh <1399952343@qq.com> Date: Fri, 1 Dec 2023 19:06:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9A=E5=88=B6=E5=AF=BC=E5=85=A5?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A8=A1=E5=BC=8F=E4=B8=8B=E6=8B=89=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E6=94=AF=E6=8C=81=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/data-import2/data-import2.scss | 91 ++++-- src/common/data-import2/data-import2.tsx | 371 +++++++++++++++------- 2 files changed, 331 insertions(+), 131 deletions(-) diff --git a/src/common/data-import2/data-import2.scss b/src/common/data-import2/data-import2.scss index 0e91fcc32..0ed2eb76c 100644 --- a/src/common/data-import2/data-import2.scss +++ b/src/common/data-import2/data-import2.scss @@ -5,37 +5,78 @@ height: 568px; background: getCssVar(color, bg, 1); - @include e('data-import2-toolbar') { - @include flex(row,space-between,center); - } - - @include e('data-import2-toolbar-container') { - @include flex(row,space-between,center); - } - @include e('template-container') { + @include e('data-import2-toolbar') { + @include flex(row, space-between, center); + } + + @include e('data-import2-toolbar-container') { + @include flex(row, space-between, center); + } + + @include e('template-container') { height: 100%; - } - @include e('empty') { + } + + @include e('empty') { width: 100%; height: 100%; - @include flex(row,center,center); - } - @include e('dataimport-select') { + @include flex(row, center, center); + } + + @include e('dataimport-select') { margin-top: -5px; - } - @include e('select') { + } + + @include e('select') { width: 100%; - } - @include e('select-option') { - padding: 0 0 0 20px; - } - @include e('select-option-item') { - @include flex(row,center,center); + } + + @include e('dataimport-table') { + border-spacing: getCssVar(spacing, none); + border-collapse: collapse; + } + @include e('dataimpoer2-table-select') { + border: 1px solid getCssVar(color, border); + min-width: 132px; + } + + @include e('dataimport2-table-th') { + border: 1px solid getCssVar(color, border); + padding: getCssVar(spacing, 'extra-tight'); + min-width: 132px; + } + + @include e('dataimport2-table-td') { + border: 1px solid getCssVar(color, border); + padding: getCssVar(spacing, 'extra-tight'); + min-width: 132px; + } + + @include e('select-option') { + padding: getCssVar(spacing, none); + } + + @include e('select-option-item') { + padding: getCssVar(spacing, none) 30px getCssVar(spacing, none) 10px; + @include flex(row, space-between, center); height: 100%; - } - @include e('select-option-item-button') { + + &:hover { + @include e('select-option-item-button-delete') { + display: block; + } + } + } + + @include e('select-option-item-button') { height: 100%; - } -} + } + @include e('select-option-item-button-delete') { + position: absolute; + color: getCssVarName(red, 0); + right: getCssVar(spacing, none); + display: none; + } +} \ No newline at end of file diff --git a/src/common/data-import2/data-import2.tsx b/src/common/data-import2/data-import2.tsx index c6add69bb..e1271d06f 100644 --- a/src/common/data-import2/data-import2.tsx +++ b/src/common/data-import2/data-import2.tsx @@ -1,4 +1,9 @@ -import { IAppDataEntity, IAppDEDataImport } from '@ibiz/model-core'; +import { + IAppDataEntity, + IAppDEDataImport, + IAppDEField, + IDEDataImportItem, +} from '@ibiz/model-core'; import { useNamespace } from '@ibiz-template/vue3-util'; import { defineComponent, @@ -14,6 +19,15 @@ import qs from 'qs'; import { getCookie } from 'qx-util'; import { CoreConst } from '@ibiz-template/core'; import { pluralLower } from '@ibiz-template/model-helper/out/utils'; +import { clone } from 'ramda'; + +interface ISharedProperties { + logicName?: string; + caption?: string; +} +type DataOption = + | (IAppDEField & ISharedProperties) + | (IDEDataImportItem & ISharedProperties); async function importMapping( method: string, @@ -56,37 +70,68 @@ export const DataImport2 = defineComponent({ props.dismiss(); }; + // excel表格数据 const previewinfo: Ref<[string[]]> = ref([[]]); + // 列映射集合 const columnMap = new Map(); + // 维护表格中多个下拉选择属性值 const selectValues: Ref = ref([]); - let dataOption: IData[] = []; + // 表格中下拉的属性 + let dataOption: DataOption[] = []; + // 定制导入组件 const dataimport2 = ref(); + // 导入模式下拉选择器 const select = ref(); - // 文件名 - let fileName = ''; - // 文件ID + // 上传的文件名 + const fileName = ref(''); + + // 上传的文件ID let fileid = ''; // 是否已列映射保存 - const ColumnMappingSave = ref(false); + const ColumnMappingSave = ref(true); - // 列映射保存的name - const columnMappingSaveName = ref(''); - // + // 导入模式下拉选择器选项值 const listValue = ref(''); + // 维护所有的导入模式信息 const columnMappingListMap = new Map(); - const options: Ref<{ value: string; label: string }[]> = ref([]); - + // // 导入模式下拉选择器选项集合 + const options: Ref< + { + value: string; + label: string; + oldLabel: string; + edit: boolean; + checkmark: boolean; + close: boolean; + }[] + > = ref([]); + + // 是否是私人导入模式 const isNoPersonel = ref(false); + // 重置表格中多个下拉选择属性值和列映射集合 + const clearSelect = () => { + const keys = [...columnMap.keys()]; + keys.forEach(item => { + const data = columnMap.get(item); + const cloneData = clone(data); + if (data) { + cloneData.name = ''; + columnMap.set(item, cloneData); + selectValues.value[data.index] = ''; + } + }); + }; + // 列映射列表值改变 const watchValue = async (listvalue: string) => { if (listvalue) { @@ -108,11 +153,11 @@ export const DataImport2 = defineComponent({ } const keys = [...columnMap.keys()]; const captionMap = new Map(); + clearSelect(); keys.forEach(item => { const columnMapValue = columnMap.get(item); const lastIndex = item.lastIndexOf('-'); // "MXCOUNT-0-0-0" const itemName = item.substring(0, lastIndex); // "MXCOUNT-0-0" - // const itemIndex = item.substring(lastIndex + 1); // '0' let index = captionMap.get(itemName); // 取第几个 if (!index) { captionMap.set(itemName, 0); @@ -131,28 +176,22 @@ export const DataImport2 = defineComponent({ } }); } else { - const keys = [...columnMap.keys()]; - keys.forEach(item => { - const data = columnMap.get(item); - if (data) { - data.name = ''; - columnMap.set(item, data); - selectValues.value[data.index] = ''; - } - }); + clearSelect(); } }; + // 监听导入模式下拉选择器值变化 watch(listValue, (newValue, _oldValue) => { - if (columnMappingSaveName.value !== newValue) { - ColumnMappingSave.value = false; - } - columnMappingSaveName.value = ''; watchValue(newValue); }); // 列映射保存 const onButtonColumnMappingImportClick = async () => { + const string = selectValues.value.join(''); + if (string === '') { + ibiz.message.warning('至少选择一个映射属性'); + return; + } if (previewinfo.value[0].length) { ColumnMappingSave.value = true; const columnMapArr = [...columnMap.values()]; @@ -162,7 +201,9 @@ export const DataImport2 = defineComponent({ const data = { // schame_tag: '', // 导入模式标记 不传 // id: '', // 导入模式标识 也不用传 - name: `${fileName.split('.')[0]}|${new Date().toLocaleString()}`, // 导入模式名称 按照导入的名称|时间来生成 + name: `${ + fileName.value.split('.')[0] + }|${new Date().toLocaleString()}`, // 导入模式名称 按照导入的名称|时间来生成 // order_value: '', // 排序值 也不用传 fields, // 导入模式属性 {name:'',order_value:1} // type: '', // 导入模式类型 暂时不用传 @@ -173,17 +214,24 @@ export const DataImport2 = defineComponent({ }; if (listValue.value) { const columnData = columnMappingListMap.get(listValue.value); + data.name = columnData.name; const resput = await importMapping('put', columnData.id, data); if (resput.status === 200 && resput.ok) { columnMappingListMap.set(listValue.value, resput.data); } } else { - options.value.push({ value: data.name, label: data.name }); + options.value.push({ + value: data.name, + label: data.name, + oldLabel: data.name, + edit: true, + checkmark: false, + close: false, + }); const res = await importMapping('post', '', data); if (res.status === 200 && res.ok) { columnMappingListMap.set(data.name, res.data); } - columnMappingSaveName.value = data.name; listValue.value = data.name; } } else { @@ -194,7 +242,7 @@ export const DataImport2 = defineComponent({ // 导入 const onButtonImportClick = async () => { if (previewinfo.value[0].length) { - if (listValue.value) { + if (listValue.value && ColumnMappingSave.value) { const data = columnMappingListMap.get(listValue.value); const { id } = data; const dataEntityTag = data.data_entity_tag; @@ -240,7 +288,14 @@ export const DataImport2 = defineComponent({ const res = await importMapping('post', 'fetch_cur_user', params); if (res.status === 200 && res.data) { res.data.forEach((item: IData) => { - options.value.push({ value: item.name, label: item.name }); + options.value.push({ + value: item.name, + label: item.name, + oldLabel: item.name, + edit: true, + checkmark: false, + close: false, + }); columnMappingListMap.set(item.name, item); }); } @@ -264,7 +319,6 @@ export const DataImport2 = defineComponent({ const renderSelect = (itemx: string, index: number) => { const change = (item: string) => { selectValues.value[index] = item; - // columnMap.set(itemx, { name: item, index }); const data = columnMap.get(`${itemx}-${index}`); data.name = item; columnMap.set(`${itemx}-${index}`, data); @@ -300,25 +354,11 @@ export const DataImport2 = defineComponent({ {row.map((cell, cellIndex) => rowIndex === 0 ? ( - + {cell} ) : ( - + {cell} ), @@ -328,10 +368,7 @@ export const DataImport2 = defineComponent({ const newRows = [ {arr[0].map((item: string, index: number) => ( - + {renderSelect(item, index)} ))} @@ -340,7 +377,7 @@ export const DataImport2 = defineComponent({ ]; // 返回表格元素 return ( - +
{newRows}
); @@ -365,10 +402,10 @@ export const DataImport2 = defineComponent({ // 上传成功 const onSuccess = (response: IData, _file: IData, _fileList: []) => { - fileName = ''; + fileName.value = ''; fileid = ''; if (response.name) { - fileName = response.name; + fileName.value = response.name; } if (response.fileid) { fileid = response.fileid; @@ -405,7 +442,6 @@ export const DataImport2 = defineComponent({ }); } } - ColumnMappingSave.value = false; isLoading.value = false; watchValue(listValue.value); }; @@ -414,6 +450,7 @@ export const DataImport2 = defineComponent({ return
暂无数据
; }; + // 删除导入模式 const handleDeleteOption = async (e: Event, str: string) => { e.stopPropagation(); const columnData = columnMappingListMap.get(str); @@ -428,10 +465,52 @@ export const DataImport2 = defineComponent({ if (listValue.value === str) { listValue.value = ''; } - select.value.blur(); } }; + // 开启导入模式编辑 + const editLabel = (e: Event, item: IData) => { + e.stopPropagation(); + item.edit = false; + item.checkmark = true; + item.close = true; + }; + + // 点击input,禁止下拉框关闭 + const inputClick = (e: Event) => { + e.stopPropagation(); + }; + + // 保存已修改的导入模式名称 + const saveLabel = async (e: Event, item: IData) => { + e.stopPropagation(); + item.edit = true; + item.checkmark = false; + item.close = false; + // 更新下拉列表 + item.value = item.label; + const data = columnMappingListMap.get(item.oldLabel); + data.name = item.label; + // 请求更新 + const result = await importMapping('put', data.id, data); + if (result.status === 200 && result.ok) { + columnMappingListMap.set(item.label, result.data); + } + if (listValue.value === item.oldLabel) { + listValue.value = item.label; + } + item.oldLabel = item.label; + }; + + // 不保存已修改的导入模式名称 + const notSaveLabel = (e: Event, item: IData) => { + e.stopPropagation(); + item.edit = true; + item.checkmark = false; + item.close = false; + // 还原label的修改 + item.label = item.oldLabel; + }; return { ns, onButtonColumnMappingImportClick, @@ -453,6 +532,11 @@ export const DataImport2 = defineComponent({ handleDeleteOption, select, isNoPersonel, + fileName, + editLabel, + inputClick, + saveLabel, + notSaveLabel, }; }, render() { @@ -481,45 +565,118 @@ export const DataImport2 = defineComponent({
- - {this.options.map(item => { - return ( - - {{ - default: () => ( -
- {item.label} - - this.handleDeleteOption(e, item.value) - } - class={this.ns.e('select-option-item-button')} - > - 删除 - -
- ), - }} - - ); - })} - + {this.fileName ? `当前文件名:${this.fileName}` : ''}
+ {this.previewinfo[0] && this.previewinfo[0].length ? ( +
+ + {this.options.map(item => { + return ( + + {{ + default: () => ( +
+ {item.edit ? {item.label} : ''} + {item.edit ? ( + '' + ) : ( + this.inputClick(e)} + style={'width:100%'} + onInput={(args: string) => { + item.label = args; + }} + > + )} + {item.edit ? ( + + this.editLabel(e, item) + } + > + 编辑 + + ) : ( + '' + )} + {item.checkmark ? ( + + this.saveLabel(e, item) + } + > + + + ) : ( + '' + )} + {item.close ? ( + + this.notSaveLabel(e, item) + } + > + + + ) : ( + '' + )} + + this.handleDeleteOption(e, item.value) + } + class={this.ns.e( + 'select-option-item-button-delete', + )} + > + + +
+ ), + }} + + ); + })} + +
+ ) : ( + '' + )} + {this.previewinfo[0] && this.previewinfo[0].length ? ( +
+ + 导入模式保存 + +
+ ) : ( + '' + )} - 文件上传 - -
- - 导入模式保存 + + {this.previewinfo[0] && this.previewinfo[0].length + ? '重新文件上传' + : '文件上传'} -
-
- 导入 -
+ + {this.previewinfo[0] && this.previewinfo[0].length ? ( +
+ + 导入 + +
+ ) : ( + '' + )}
-- Gitee