diff --git a/src/common/data-import2/data-import2.scss b/src/common/data-import2/data-import2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..40c4c927118e0e3b6efc1a28b96f60ea7e98b689
--- /dev/null
+++ b/src/common/data-import2/data-import2.scss
@@ -0,0 +1,40 @@
+@include b(data-import2) {
+  @include flex(column);
+
+  min-width: 644px;
+  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') {
+    height: 100%;
+   }
+   @include e('empty') {
+    width: 100%;
+    height: 100%;
+    @include flex(row,center,center);
+   }
+   @include e('dataimport-select') {
+    margin-top: -5px;
+   }
+   @include e('select') {
+    width: 100%;
+   }
+   @include e('select-option') {
+    padding: 0 0px 0 20px;
+   }
+   @include e('select-option-item') {
+    @include flex(row,center,center);
+    height: 100%;
+   }
+   @include e('select-option-item-button') {
+    height: 100%;
+   }
+}
+
diff --git a/src/common/data-import2/data-import2.tsx b/src/common/data-import2/data-import2.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b966b662fd6e3c4a33c8d0b8b795e524b4aa4681
--- /dev/null
+++ b/src/common/data-import2/data-import2.tsx
@@ -0,0 +1,543 @@
+import {
+  IAppDataEntity,
+  IAppDEDataImport,
+  IAppDEField,
+} from '@ibiz/model-core';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import {
+  defineComponent,
+  ref,
+  PropType,
+  Ref,
+  computed,
+  onMounted,
+  watch,
+} from 'vue';
+import { importMapping } from '@ibiz-template/runtime';
+import './data-import2.scss';
+import qs from 'qs';
+import { getCookie } from 'qx-util';
+import { CoreConst } from '@ibiz-template/core';
+import { pluralLower } from '@ibiz-template/model-helper/out/utils';
+
+export const DataImport2 = defineComponent({
+  name: 'DataImport2',
+  props: {
+    dismiss: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
+    appDataEntity: {
+      type: Object as PropType<IAppDataEntity>,
+      required: true,
+    },
+    dataImport: {
+      type: Object as PropType<IAppDEDataImport>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('data-import2');
+
+    const isLoading = ref(false);
+
+    const onCancelButtonClick = () => {
+      props.dismiss();
+    };
+
+    const previewinfo: Ref<[string[]]> = ref([[]]);
+
+    const columnMap = new Map();
+
+    const selectValues: Ref<string[]> = ref([]);
+
+    let dataOption: IAppDEField[] = [];
+
+    const dataimport2 = ref();
+
+    const select = ref();
+    // 文件名
+    let fileName = '';
+
+    // 文件ID
+    let fileid = '';
+
+    // 是否已列映射保存
+    const ColumnMappingSave = ref(false);
+
+    // 列映射保存的name
+    const columnMappingSaveName = ref('');
+    //
+    const listValue = ref('');
+    const columnMappingListMap = new Map();
+    const options: Ref<{ value: string; label: string }[]> = ref([]);
+    const isNoPersonel = ref(false);
+    // 列映射列表值改变
+    const watchValue = async (listvalue: string) => {
+      if (listvalue) {
+        const columnData = columnMappingListMap.get(listvalue);
+        let columnMapData = columnData.fields;
+        if (!columnData.fields) {
+          const res = await importMapping('get', columnData.id);
+          if (res.status === 200 && res.data) {
+            columnMapData = res.data.fields;
+          }
+          columnData.fields = res.data.fields;
+          columnMappingListMap.set(listvalue, columnData);
+        }
+        if (
+          columnData.owner_type !== '' &&
+          columnData.owner_type !== 'PERSONAL'
+        ) {
+          isNoPersonel.value = true;
+        }
+        const keys = [...columnMap.keys()];
+        const captionMap = new Map();
+        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);
+            index = 0;
+          }
+          const filteredObjects = columnMapData.filter(
+            (columnitem: { caption: string }) =>
+              columnitem.caption === itemName,
+          );
+          const newColumnValue = filteredObjects[index];
+          if (newColumnValue) {
+            captionMap.set(itemName, index + 1);
+            newColumnValue.index = columnMapValue.index;
+            columnMap.set(item, newColumnValue);
+            selectValues.value[newColumnValue.index] = newColumnValue.name;
+          }
+        });
+      } 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] = '';
+          }
+        });
+      }
+    };
+
+    watch(listValue, (newValue, _oldValue) => {
+      if (columnMappingSaveName.value !== newValue) {
+        ColumnMappingSave.value = false;
+      }
+      columnMappingSaveName.value = '';
+      watchValue(newValue);
+    });
+
+    // 列映射保存
+    const onButtonColumnMappingImportClick = async () => {
+      if (previewinfo.value[0].length) {
+        ColumnMappingSave.value = true;
+        const columnMapArr = [...columnMap.values()];
+        const fields = columnMapArr.filter(
+          (columnitem: { name: string }) => columnitem.name !== '',
+        );
+        const data = {
+          // schame_tag: '', // 导入模式标记 不传
+          // id: '', // 导入模式标识 也不用传
+          name: `${fileName.split('.')[0]}|${new Date().toLocaleString()}`, // 导入模式名称 按照导入的名称|时间来生成
+          // order_value: '', // 排序值  也不用传
+          fields, // 导入模式属性 {name:'',order_value:1}
+          // type: '', // 导入模式类型  暂时不用传
+          system_tag: ibiz.appData?.context.srfsystemid, // 系统标记
+          data_entity_tag: props.appDataEntity.codeName, // 数据实体标记
+          import_tag: props.appDataEntity.defaultAppDEDataImportId, // 导入标记 导入模型的代码名称
+          owner_type: 'PERSONAL', // 所有者类型
+        };
+        if (listValue.value) {
+          const columnData = columnMappingListMap.get(listValue.value);
+          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 });
+          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 {
+        ibiz.message.warning('请上传文件');
+      }
+    };
+
+    // 导入
+    const onButtonImportClick = async () => {
+      if (previewinfo.value[0].length) {
+        if (listValue.value) {
+          const data = columnMappingListMap.get(listValue.value);
+          const { id } = data;
+          const dataEntityTag = data.data_entity_tag;
+          const url = `${pluralLower(
+            dataEntityTag,
+          )}/asyncimportdata2?srfimporttag=${
+            props.appDataEntity.defaultAppDEDataImportId
+          }&srfossfileid=${fileid}&srfimportschemaid=${id}`;
+          await ibiz.net.request(url, {
+            method: 'get',
+          });
+          ibiz.notification.info({
+            desc: '开始导入，详细进度和结果请看应用通知',
+          });
+          onCancelButtonClick();
+        } else {
+          await onButtonColumnMappingImportClick();
+          await onButtonImportClick();
+        }
+      } else {
+        ibiz.message.warning('请上传文件');
+      }
+    };
+
+    const findDialog = (el: HTMLDivElement) => {
+      const regex = /\bel-dialog\b/;
+      if (!regex.test(el.className)) {
+        if (el.parentElement) {
+          findDialog(el.parentElement as HTMLDivElement);
+        }
+      } else {
+        el.style.maxWidth = 'calc(100% - 100px)';
+      }
+    };
+
+    // 列映射列表查询
+    const columnMappingListQuery = async () => {
+      const params = {
+        n_import_tag_eq: props.appDataEntity.defaultAppDEDataImportId,
+        n_system_tag_eq: ibiz.appData?.context.srfsystemid,
+        n_data_entity_tag_eq: props.appDataEntity.codeName,
+      };
+      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 });
+          columnMappingListMap.set(item.name, item);
+        });
+      }
+    };
+
+    onMounted(() => {
+      const dataImport = props.appDataEntity.appDEDataImports?.find(
+        (importItem: IAppDEDataImport) =>
+          importItem.id === props.appDataEntity.defaultAppDEDataImportId,
+      );
+      if (dataImport && dataImport.dedataImportItems) {
+        dataOption = dataImport.dedataImportItems;
+      } else if (props.appDataEntity.appDEFields) {
+        dataOption = props.appDataEntity.appDEFields;
+      }
+      findDialog(dataimport2.value.parentElement);
+      columnMappingListQuery();
+    });
+
+    // 绘制下拉选择
+    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);
+        ColumnMappingSave.value = false;
+      };
+      return (
+        <el-select
+          modelValue={selectValues.value[index]}
+          placeholder='选择当前列对应的导入属性'
+          onChange={change}
+          key={index}
+          popper-class={ns.e('dataimport-select')}
+          class={ns.e('select')}
+        >
+          {dataOption.map(item => {
+            return (
+              <el-option
+                key={item.name}
+                value={item.id}
+                label={item.caption ? item.caption : item.logicName}
+              ></el-option>
+            );
+          })}
+        </el-select>
+      );
+    };
+
+    // 绘制表格
+    const renderTable = () => {
+      const arr = previewinfo.value;
+      // 创建表格行
+      const rows = arr.map((row: string[], rowIndex: number) => (
+        <tr key={rowIndex}>
+          {row.map((cell, cellIndex) =>
+            rowIndex === 0 ? (
+              <th
+                key={cellIndex}
+                style={{
+                  border: '1px solid #e5e5e5',
+                  padding: '4px',
+                  'min-width': '132px',
+                }}
+              >
+                {cell}
+              </th>
+            ) : (
+              <td
+                key={cellIndex}
+                style={{
+                  border: '1px solid #e5e5e5',
+                  padding: '4px',
+                  'min-width': '132px',
+                }}
+              >
+                {cell}
+              </td>
+            ),
+          )}
+        </tr>
+      ));
+      const newRows = [
+        <tr key='newRow'>
+          {arr[0].map((item: string, index: number) => (
+            <td
+              key={index}
+              style={{ border: '1px solid #e5e5e5', 'min-width': '132px' }}
+            >
+              {renderSelect(item, index)}
+            </td>
+          ))}
+        </tr>,
+        ...rows,
+      ];
+      // 返回表格元素
+      return (
+        <table style={'border-collapse:collapse;border-spacing:0'}>
+          <tbody>{newRows}</tbody>
+        </table>
+      );
+    };
+
+    // 请求头
+    const headers: Ref<IData> = ref({
+      Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`,
+    });
+
+    // 请求地址
+    const UploadUrl = computed(() => {
+      let uploadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.uploadFileUrl}/temp`;
+      uploadUrl += qs.stringify({ preview: true }, { addQueryPrefix: true });
+      return uploadUrl;
+    });
+
+    // 上传前
+    const beforeUpload = () => {
+      isLoading.value = true;
+    };
+
+    // 上传成功
+    const onSuccess = (response: IData, _file: IData, _fileList: []) => {
+      fileName = '';
+      fileid = '';
+      if (response.name) {
+        fileName = response.name;
+      }
+      if (response.fileid) {
+        fileid = response.fileid;
+      }
+      if (response.previewinfo) {
+        previewinfo.value = JSON.parse(response.previewinfo);
+
+        if (previewinfo.value[0] && previewinfo.value[0].length > 0) {
+          // 获取第一个数组的长度
+          const firstArrayLength = previewinfo.value[0].length;
+
+          // 补全其他数组
+          for (let i = 1; i < previewinfo.value.length; i++) {
+            const currentArray = previewinfo.value[i];
+            const currentArrayLength = currentArray.length;
+
+            // 如果当前数组长度小于第一个数组长度，则进行补全
+            if (currentArrayLength < firstArrayLength) {
+              const diff = firstArrayLength - currentArrayLength;
+              for (let j = 0; j < diff; j++) {
+                currentArray.push('');
+              }
+            }
+          }
+
+          columnMap.clear();
+          previewinfo.value[0].forEach((item: string, index: number) => {
+            columnMap.set(`${item}-${index}`, {
+              name: '',
+              index,
+              caption: item,
+            });
+            selectValues.value[index] = '';
+          });
+        }
+      }
+      ColumnMappingSave.value = false;
+      isLoading.value = false;
+      watchValue(listValue.value);
+    };
+
+    const renderEmpty = () => {
+      return <div class={ns.e('empty')}>暂无数据</div>;
+    };
+
+    const handleDeleteOption = async (e: Event, str: string) => {
+      e.stopPropagation();
+      const columnData = columnMappingListMap.get(str);
+      const res = await importMapping('delete', columnData.id);
+      // 删除之后把下拉里的也删除
+      if (res.status === 200 && res.ok) {
+        const index = options.value.findIndex(obj => obj.label === str);
+        if (index !== -1) {
+          options.value.splice(index, 1);
+        }
+        columnMappingListMap.delete(str);
+        if (listValue.value === str) {
+          listValue.value = '';
+        }
+        select.value.blur();
+      }
+    };
+
+    return {
+      ns,
+      onButtonColumnMappingImportClick,
+      onButtonImportClick,
+      onCancelButtonClick,
+      isLoading,
+      UploadUrl,
+      headers,
+      onSuccess,
+      renderTable,
+      renderSelect,
+      previewinfo,
+      selectValues,
+      renderEmpty,
+      beforeUpload,
+      dataimport2,
+      listValue,
+      options,
+      handleDeleteOption,
+      select,
+      isNoPersonel,
+    };
+  },
+  render() {
+    return (
+      <div
+        class={[this.ns.b(), 'ibiz-view']}
+        v-loading={this.isLoading}
+        ref='dataimport2'
+      >
+        <div
+          class={[this.ns.e('data-import2-toolbar'), 'ibiz-panel-view-header']}
+        >
+          <div class={[this.ns.e('caption')]}>
+            <div class='ibiz-panel-container'>
+              <div class='ibiz-control-captionbar'>
+                <div class='ibiz-control-captionbar-caption'>导入数据</div>
+              </div>
+            </div>
+          </div>
+          <div
+            class={[
+              this.ns.e('data-import2-toolbar-container'),
+              'ibiz-panel-container--view_header_right',
+            ]}
+          >
+            <div class='ibiz-panel-container'>
+              <div class='ibiz-control-toolbar'>
+                <div class='ibiz-control-toolbar__item'>
+                  <el-select
+                    ref='select'
+                    v-model={this.listValue}
+                    clearable
+                    placeholder='选择导入模式'
+                    disabled={
+                      !(this.previewinfo[0] && this.previewinfo[0].length)
+                    }
+                    popper-class={this.ns.e('dataimport-select')}
+                  >
+                    {this.options.map(item => {
+                      return (
+                        <el-option
+                          label={item.label}
+                          value={item.value}
+                          class={[this.ns.e('select-option')]}
+                        >
+                          {{
+                            default: () => (
+                              <div class={[this.ns.e('select-option-item')]}>
+                                <span>{item.label}</span>
+                                <el-button
+                                  text
+                                  size='small'
+                                  onClick={(e: Event) =>
+                                    this.handleDeleteOption(e, item.value)
+                                  }
+                                  class={this.ns.e('select-option-item-button')}
+                                >
+                                  删除
+                                </el-button>
+                              </div>
+                            ),
+                          }}
+                        </el-option>
+                      );
+                    })}
+                  </el-select>
+                </div>
+                <el-upload
+                  class='ibiz-control-toolbar__item'
+                  action={this.UploadUrl}
+                  headers={this.headers}
+                  show-file-list={false}
+                  onSuccess={this.onSuccess}
+                  before-upload={this.beforeUpload}
+                >
+                  <el-button>文件上传</el-button>
+                </el-upload>
+                <div class='ibiz-control-toolbar__item'>
+                  <el-button
+                    onClick={this.onButtonColumnMappingImportClick}
+                    disabled={this.isNoPersonel}
+                  >
+                    导入模式保存
+                  </el-button>
+                </div>
+                <div class='ibiz-control-toolbar__item'>
+                  <el-button onClick={this.onButtonImportClick}>导入</el-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class={[this.ns.e('template-container'), 'ibiz-panel-view-content']}
+        >
+          {this.previewinfo[0] && this.previewinfo[0].length
+            ? this.renderTable()
+            : this.renderEmpty()}
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/src/common/index.ts b/src/common/index.ts
index 213ab8be46f34dd7cca6088e06e6fa7f2261b9e9..be15fde9e90305f7e27203bce469e2f4ca5d0c8e 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -19,6 +19,7 @@ import { ViewMessage } from './view-message/view-message';
 import { IBizPagination } from './pagination/pagination';
 import { IBizSortBar } from './sort-bar/sort-bar';
 import { DataImport } from './data-import/data-import';
+import { DataImport2 } from './data-import2/data-import2';
 
 export * from './col/col';
 export * from './row/row';
@@ -49,6 +50,7 @@ export const IBizCommonComponents = {
     v.component(IBizPagination.name, IBizPagination);
     v.component(IBizSortBar.name, IBizSortBar);
     v.component(DataImport.name, DataImport);
+    v.component(DataImport2.name, DataImport2);
     v.component(
       'IBizMapChart',
       defineAsyncComponent({