diff --git a/src/assets/images/index/loading.png b/src/assets/images/index/loading.png
new file mode 100644
index 000000000..5c8e36ff2
Binary files /dev/null and b/src/assets/images/index/loading.png differ
diff --git a/src/assets/scss/pages/smartImport.scss b/src/assets/scss/pages/smartImport.scss
new file mode 100644
index 000000000..b8863eb9f
--- /dev/null
+++ b/src/assets/scss/pages/smartImport.scss
@@ -0,0 +1,103 @@
+.m-detail-main {
+    padding: 20px 20px 0;
+    .title-small{
+        position: relative;
+        &::after{
+            content: '';
+            width: 4px;
+            height: 16px;
+            background-color: #0056d6;
+            position: absolute;
+            left: -20px;
+            top: 0px;
+        }
+    }
+  }
+
+  .content_box{
+    display: flex;
+    .left{
+        width: 50%;
+        .rotate{
+             animation: rotate 5s infinite linear;
+        }
+        .u-item-width-normal{
+            width: 240px; 
+         }
+         .text-center{
+            border: 1px #c5c9d1 dashed ;
+            width: calc( 100% - 20px);
+            height: 175px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .el-upload__text{
+                color: #c5c9d1;
+            }
+         }
+    }
+    .right{
+        padding: 15px;
+        width: 50%;
+        background: #f5f7fa;
+        border-radius: 3px;
+        h4{
+            margin-top: 0;
+            line-height: 19px;
+        }
+        .textBtn{
+            padding: 0px;
+            margin: 0 5px;     
+        }
+    }
+   
+  }
+  .steps {
+    width: 80%;
+    /deep/ .el-step__main {
+      position: absolute;
+      left: 24px;
+      top: -5px;
+      z-index: 10;
+      background: #fff;
+      width: 100px;
+      padding-left: 10px;
+    }
+    /deep/ .is-finish {
+      .el-step__icon {
+        background: #0056d6;
+        color: #fff;
+      }
+    }
+    /deep/ .is-process  {
+        color: #000;
+        font-weight: 400;
+        .el-step__icon {
+          background: #cbcbcb;
+          color: #fff;
+          border-color: #cbcbcb;
+        }
+      }
+      /deep/ .is-wait  {
+        color: #000;
+        .el-step__icon {
+          background: #cbcbcb;
+          color: #fff;
+          border-color: #cbcbcb;
+        }
+      }
+      /deep/ .el-step__description{
+        width: 300px;
+        color: #cbcbcb;
+      }
+      
+  }
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/views/modules/base/smartImport.vue b/src/views/modules/base/smartImport.vue
deleted file mode 100644
index bc0d46232..000000000
--- a/src/views/modules/base/smartImport.vue
+++ /dev/null
@@ -1,513 +0,0 @@
-<template>
-  <div class="g-main">
-    <div class="m-table">
-      <div class="u-table-btn1">
-        <el-dropdown size="small"
-                     type="primary"
-                     style="margin: 0 10px; height: 30px"
-                     trigger="hover">
-          <el-button type="primary"
-                     size="small">
-            表格导入<i class="el-icon-arrow-down el-icon--right"></i>
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item v-for="(item, index) in resiClass"
-                              :key="index"
-                              @click.native="handleImportType(item.value)">
-              {{ item.label }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <el-upload :headers="$getElUploadHeaders()"
-                   ref="upload"
-                   class="upload-btn"
-                   action="uploadUlr"
-                   :limit="1"
-                   :accept="'.xls,.xlsx'"
-                   :with-credentials="true"
-                   :show-file-list="false"
-                   :auto-upload="true"
-                   :on-progress="handleProgress"
-                   :on-success="handleExcelSuccess"
-                   :before-upload="beforeExcelUpload"
-                   :http-request="uploadHttpRequest"></el-upload>
-        <el-button class="diy-button--white"
-                   size="small"
-                   style="margin-left: 10px"
-                   @click="handleExportModule()">下载模板</el-button>
-      </div>
-      <div v-if="dataList.length > 0">
-        <el-table ref="ref_table"
-                  :data="dataList"
-                  border
-                  :height="tableHeight"
-                  class="m-table-item"
-                  v-loading="dataListLoading"
-                  style="width: 100%">
-          <el-table-column label="序号"
-                           header-align="center"
-                           align="center"
-                           type="index"
-                           width="100"></el-table-column>
-          <el-table-column prop="userTableHeader"
-                           header-align="center"
-                           align="center"
-                           label="表格信息"
-                           min-width="100">
-            <template slot-scope="scope">
-              {{ scope.row.userTableHeader || "--" }}
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="itemGroupId"
-                           header-align="center"
-                           align="center"
-                           label="平台对应信息"
-                           min-width="110">
-            <template slot-scope="scope">
-              <div>
-                <el-select class="item_width_sel"
-                           v-model="scope.row.itemGroupId"
-                           size="small"
-                           placeholder="请选择">
-                  <el-option v-for="item in groupList"
-                             @click.native="handleSelGroup(scope.$index, item, 'change')"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.label">
-                  </el-option>
-                </el-select>
-
-                <el-select class="item_width_sel"
-                           v-model="scope.row.itemId"
-                           size="small"
-                           style="margin-left: 10px"
-                           placeholder="请选择">
-                  <el-option v-for="item in scope.row.itemList"
-                             :key="item.itemId"
-                             :label="item.label"
-                             :value="item.label">
-                  </el-option>
-                </el-select>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div ref="divEditBtn"
-             class="m-edit-btn">
-          <el-button type="primary"
-                     size="small"
-                     class="diy-button--blue"
-                     @click="handleComfirm">保 存</el-button>
-        </div>
-      </div>
-      <div class="m-hint"
-           v-else>请先导入表格</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { requestPost } from "@/js/dai/request";
-import { mapGetters } from "vuex";
-
-export default {
-  data () {
-    return {
-      customerId: "", // 客户id，父组件传
-      customerName: "", // 客户名称，父组件传
-
-      tableParams: {
-        customerId: "",
-      },
-      search: "",
-      dataList: [],
-      dataListLoading: false,
-      total: 0,
-      pageSize:window.localStorage.getItem('pageSize') || 20,
-      pageNo: 0,
-
-      formShow: false,
-      formData: {},
-
-      scopeList: [],
-      dataSyncConfigId: "",
-      importLoading: false,
-
-      groupList: [],
-      sHeight: 100,
-
-      importCode: "",
-      importOption: { exist: {}, notExist: {} },
-
-      fileData: null,
-      resiClass: [],
-
-      importType: "",
-    };
-  },
-
-  computed: {
-    tableHeight () {
-      const h = this.clientHeight - this.sHeight + this.iframeHeigh;
-      const _h = this.clientHeight - this.sHeight;
-      return this.$store.state.inIframe ? h : _h;
-    },
-
-    ...mapGetters(["clientHeight", "iframeHeight"]),
-  },
-  components: {},
-  created () { },
-  watch: {
-    //监听dataList有数据才再让他给高度 解决报找不到dom节点错误
-    "dataList.length": {
-      immediate: true,
-      handler (newVal) {
-        this.$nextTick(() => {
-          if (newVal > 0) {
-            this.sHeight = this.$refs.divEditBtn.offsetHeight + 300;
-          }
-        });
-      },
-    },
-  },
-  async mounted () {
-    await this.loadPersonGroup();
-    this.getResident();
-  },
-  methods: {
-    diaClose () {
-      this.formShow = false;
-    },
-    handleDropdownClick (event) {
-      event.stopPropagation();
-    },
-    async loadPersonGroup () {
-      const url = "/oper/customize/icformitemgroup/list";
-      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
-      let params = {
-        formCode: "resident_base_info",
-        policyFlag: "1",
-      };
-
-      const { data, code, msg } = await requestPost(url, params);
-
-      if (code === 0) {
-        this.groupList = data;
-      } else {
-        this.$message.error(msg);
-      }
-    },
-
-    //选择人员信息第一列下拉框
-    async handleSelGroup (index, item, change) {
-      console.log(index, item, change);
-      const url = "/oper/customize/icformitem/getItemListV2";
-      // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
-      let params = {
-        // policyFlag: "1",
-        groupId: item.id,
-      };
-      const { data, code, msg } = await requestPost(url, params);
-
-      if (code === 0) {
-        let oneData = this.dataList[index];
-        if (change == "change") {
-          this.dataList[index].itemId = "";
-        }
-        oneData.itemList = data;
-        this.$set(this.dataList, index, oneData);
-      } else {
-        this.$message.error(msg);
-      }
-    },
-
-    // 加载列表数据
-    async loadData () {
-      this.dataListLoading = true;
-      // const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/dataSyncConfig/list'
-      const url = "/epmetuser/dataSyncConfig/list";
-
-      this.tableParams = {
-        pageSize: this.pageSize,
-        pageNo: this.pageNo,
-      };
-
-      const { data, code, msg } = await requestPost(url, this.tableParams);
-      this.dataListLoading = false;
-      if (code === 0) {
-        this.total = data.total;
-        this.dataList = data.list;
-        this.dataList.forEach((element) => {
-          element.stateShow = element.switchStatus === "open" ? true : false;
-        });
-      } else {
-        // this.$message.error(msg )
-      }
-    },
-    handleImportType (command) {
-      this.importType = command;
-      this.$refs["upload"].$children[0].$refs.input.click();
-    },
-    handleChangeScope (value) {
-      this.orgIdArray = value;
-      this.scopeList = [];
-      let selArray = this.$refs["myCascader"].getCheckedNodes();
-      // console.log('selArray', selArray)
-
-      selArray.forEach((element, index) => {
-        let obj = {
-          orgId: element.data.agencyId,
-          orgType: element.data.level,
-          orgIdPath: element.path.join(":"),
-        };
-        this.scopeList.push(obj);
-      });
-
-      console.log("this.scopeList", this.scopeList);
-    },
-    async getResident () {
-      try {
-        const { data } = await this.$http.post("sys/dict/data/dictlist", {
-          dictType: "resident_category_import",
-        });
-        this.resiClass = data.data;
-      } catch (error) {
-        console.log(error, "获取居民类别字典");
-      }
-    },
-    async handleExportModule () {
-      let url = "/actual/base/residentBaseInfo/import/download-template";
-
-      let params = {};
-      await this.$http({
-        method: "POST",
-        url,
-        responseType: "blob",
-        data: params,
-      })
-        .then((res) => {
-          const url = window.URL.createObjectURL(new Blob([res.data]));
-          const aLink = document.createElement("a");
-          aLink.style.display = "none";
-          aLink.href = url;
-          aLink.setAttribute("download", "人员导入模板.zip");
-          document.body.appendChild(aLink);
-          aLink.click();
-          document.body.removeChild(aLink);
-          window.URL.revokeObjectURL(url);
-          // // this.download(res.data, title + '.xls')
-          // if (res.headers["content-disposition"]) {
-          // 	let fileName = window.decodeURI(
-          // 		res.headers["content-disposition"]
-          // 			.split(";")[1]
-          // 			.split("=")[1]
-          // 	);
-          // 	console.log("filename", fileName);
-          // 	let blob = new Blob([res.data], {
-          // 		type: "application/vnd.ms-excel",
-          // 	});
-          // 	var url = window.URL.createObjectURL(blob);
-          // 	var aLink = document.createElement("a");
-          // 	aLink.style.display = "none";
-          // 	aLink.href = url;
-          // 	aLink.setAttribute("download", fileName);
-          // 	document.body.appendChild(aLink);
-          // 	aLink.click();
-          // 	document.body.removeChild(aLink); //下载完成移除元素
-          // 	window.URL.revokeObjectURL(url); //释放掉blob对象
-          // } else this.$message.error("下载失败");
-        })
-        .catch((err) => {
-          console.log("err", err);
-          return this.$message.error("网络错误");
-        });
-    },
-    // 上传大图标成功
-    handleExcelSuccess (res, file) {
-      console.log(res, file);
-      if (!res) return;
-      if (res.code === 0 && res.msg === "success") {
-        console.log("resss---ppp", res);
-      } else {
-        this.$message.error(res.msg);
-      }
-    },
-    handleProgress (event, file, fileList) {
-      console.log("percentage", file.percentage);
-    },
-
-    beforeExcelUpload (file) {
-      console.log("file", file);
-      console.log(this.importType);
-
-      const isType = file.type === "application/vnd.ms-excel";
-      const isTypeComputer =
-        file.type ===
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-      const fileType = isType || isTypeComputer;
-      const isLt1M = file.size / 1024 / 1024 < 10;
-      if (!fileType) {
-        this.$message.error("上传文件只能是xls/xlsx格式！");
-      }
-
-      if (!isLt1M) {
-        this.$message.error("上传文件大小不能超过 10MB!");
-      }
-
-      if (!this.importType) {
-        this.$message.error("请选择导入的类别");
-      }
-      return fileType && isLt1M;
-    },
-    async uploadHttpRequest (file) {
-      if (!this.importType) return;
-      this.importLoading = true;
-      this.importBtnTitle = "正在上传中...";
-      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
-      formData.append("file", file.file); //添加文件对象
-      formData.append("fileMode", this.importType); //添加文件对象
-      // http://127.0.0.1:4523/mock2/2515967/97869993
-      await this.$http
-        .post("/actual/base/importExcelData/extractExcelHead", formData)
-        .then((res) => {
-          console.log("res-up", res);
-          if (res.data.code == 0) {
-            const { metaListData, fileCode, msg } = res.data.data;
-            this.afterSuccess();
-            this.dataList = metaListData;
-            // 相等于在for循环中写filter过滤,这样写能够以 O(1) 的时间复杂度获取 itemGroupId 匹配的元素。
-            let groupMap = new Map(
-              this.groupList.map((item) => [item.label, item])
-            );
-            for (let i in this.dataList) {
-              this.handleSelGroup(
-                i,
-                groupMap.get(this.dataList[i].itemGroupId)
-              );
-            }
-            this.importCode = fileCode;
-            this.fileData = file;
-          } else {
-            this.$message.error(res.data.msg);
-          }
-        })
-        .catch((err) => {
-          console.log("失败", err);
-          file.onError(); //上传失败的文件会从文件列表中删除
-          this.$message.error("导入失败");
-        });
-      this.importLoading = false;
-      this.importBtnTitle = "导入";
-      this.$refs.upload.clearFiles();
-    },
-
-    async handleComfirm () {
-      this.importLoading = true;
-      this.importBtnTitle = "正在上传中...";
-      const { importOption, importCode, dataList } = this;
-      let obj = dataList.reduce((acc, item) => {
-        if (item.userTableHeader) {
-          acc[item.userTableHeader] = item.itemId;
-        }
-        return acc;
-      }, {});
-      const formData = new FormData();
-      formData.append("columnMateJson", JSON.stringify(obj));
-      formData.append("fileCode", importCode);
-      await this.$http
-        .post("/actual/base/importExcelData/importResiHouseExcel", formData)
-        .then((res) => {
-          console.log("res-up", res);
-          if (res.data.code == 0 && res.data.msg == "success") {
-            // this.upload2(this.fileData, this.importCode);
-            this.afterSuccess();
-          } else this.$message.error(res.data.msg);
-        })
-        .catch((err) => {
-          console.log("失败", err);
-          file.onError(); //上传失败的文件会从文件列表中删除
-          // this.$message.error('导入失败')
-        });
-      this.importLoading = false;
-      this.importBtnTitle = "导入";
-    },
-
-    async upload2 (file, code) {
-      this.importLoading = true;
-      this.importBtnTitle = "正在上传中...";
-      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
-      formData.append("file", file.file); //添加文件对象
-      formData.append("code", code); //添加文件对象
-      await this.$http
-        .post("/actual/base/residentBaseInfo/importExcel", formData)
-        .then((res) => {
-          console.log("res-up", res);
-          if (res.data.code == 0 && res.data.msg == "success") {
-            this.afterSuccess();
-          } else this.$message.error(res.data.msg);
-        })
-        .catch((err) => {
-          console.log("失败", err);
-          file.onError(); //上传失败的文件会从文件列表中删除
-          // this.$message.error('导入失败')
-        });
-      this.importLoading = false;
-      this.importBtnTitle = "导入";
-      this.$refs.upload.clearFiles();
-    },
-
-    afterSuccess () {
-      this.$message({
-        showClose: true,
-        dangerouslyUseHTMLString: true,
-        message:
-          "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
-        duration: 3000,
-      });
-      let than = this;
-      document.getElementById("clickA").addEventListener("click", function () {
-        than.$router.push("/main/importRecord-index");
-      });
-      this.dataList = [];
-      this.importOption = {};
-      this.importCode = "";
-      this.fileData = null;
-    },
-
-    // 取消
-    diaCancel () {
-      this.$emit("cancleBack");
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/assets/scss/modules/management/list-main.scss";
-
-.m-edit-btn {
-  display: flex;
-  margin-top: 20px;
-  margin-right: 16px;
-  justify-content: flex-end;
-  text-align: center;
-}
-
-.item_width_sel {
-  width: 200px;
-}
-
-.m-hint {
-  font-size: 50px;
-  line-height: 300px;
-  text-align: center;
-  color: #aaaaaa;
-}
-::v-deep .upload-btn {
-  .el-button {
-    padding: 7px 20px;
-  }
-}
-</style>
diff --git a/src/views/modules/base/smartImport/cpts/completeTask.vue b/src/views/modules/base/smartImport/cpts/completeTask.vue
new file mode 100644
index 000000000..fdc34df62
--- /dev/null
+++ b/src/views/modules/base/smartImport/cpts/completeTask.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="">
+    <div class="content_box">
+      <div class="left">
+        <i class="el-icon-success" style="font-size: 50px; color: #1cc58c;"></i>
+        <p>导入完成</p>
+      </div>
+      <div class="right">
+        <h4>
+          <el-icon
+            class="el-icon-warning-outline"
+            style="color: #0056d6; font-size: 18px; font-weight: 600"
+          ></el-icon>
+          操作说明
+        </h4>
+        <p>1、可以到居民信息中查看本次导入的数据。</p>
+        <p>2、导入失效的数据,您可以下载失败文件修改后,重新创建任务导入。</p>
+      </div>
+    </div>
+    <h3 class="title-small">数据导入明细</h3>
+  </div>
+</template>
+      <script>
+import { requestPost } from "@/js/dai/request";
+export default {
+  data() {
+    return {
+      form: {
+        importCategory: null,
+        taskName: null,
+      },
+      rules: {
+        importCategory: [
+          { required: true, message: "请选择任务类型", trigger: "change" },
+        ],
+        taskName: [
+          { required: true, message: "请输入任务名称", trigger: "change" },
+        ],
+      },
+      resident_category_import_list: [],
+    };
+  },
+  props: {},
+  created() {},
+  methods: {
+    handelClickUpload() {
+      this.$emit("handelClickUpload");
+    },
+    handelClickBack() {
+      //   this.$emit("handelClickBack");
+    },
+  },
+  components: {},
+  computed: {},
+  watch: {},
+};
+</script>
+      <style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/detail-main.scss";
+@import "@/assets/scss/pages/smartImport.scss";
+.left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #838383;
+}
+</style>
+      
\ No newline at end of file
diff --git a/src/views/modules/base/smartImport/cpts/createdTask.vue b/src/views/modules/base/smartImport/cpts/createdTask.vue
new file mode 100644
index 000000000..c49cb6233
--- /dev/null
+++ b/src/views/modules/base/smartImport/cpts/createdTask.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="">
+    <h3 class="title-small">基本信息</h3>
+    <div class="content_box">
+      <div class="left">
+        <el-form :model="form" :rules="rules" ref="importForm">
+          <el-form-item label="任务类型" prop="importCategory">
+            <el-select
+              v-model="form.importCategory"
+              placeholder="请选择"
+              size="small"
+              class="u-item-width-normal"
+            >
+              <el-option
+                v-for="item in resident_category_import_list"
+                :label="item.label"
+                :value="item.value"
+                clearable
+                :key="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="下载模板" prop="desc">
+            <span
+              >导入模板.xlsx <el-button type="text">点击下载</el-button></span
+            >
+          </el-form-item>
+          <el-form-item label="任务名称" prop="taskName">
+            <el-input
+              v-model="form.taskName"
+              size="small"
+              class="u-item-width-normal"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="right">
+        <h4>
+          <el-icon
+            class="el-icon-warning-outline"
+            style="color: #0056d6; font-size: 18px; font-weight: 600"
+          ></el-icon>
+          操作说明
+        </h4>
+        <p>
+          1、导入数据前请先确定您的网格组织已经维护完毕。<el-button
+            class="textBtn"
+            type="text"
+            >查看</el-button
+          >
+        </p>
+        <p>2、导入房屋和居民信息前请先确保已经导入了完整的小区楼栋信息。</p>
+        <p>
+          3、您也可以<el-button class="textBtn" type="text"
+            >点击这里下载</el-button
+          >全部的导入模板文件
+        </p>
+      </div>
+    </div>
+    <h3 class="title-small">上传数据</h3>
+    <div class="content_box">
+      <div class="left">
+        <el-upload
+          :headers="$getElUploadHeaders()"
+          name="processFile"
+          :action="url"
+          :show-file-list="false"
+          :on-progress="handleProgress"
+          :before-upload="beforeUploadHandle"
+          :on-success="successHandle"
+          :http-request="uploadHttpRequest"
+          class="text-center"
+        >
+          <i class="el-icon-upload" style="font-size: 58px; color: #c5c9d1"></i>
+          <div class="el-upload__text" v-html="$t('upload.text')"></div>
+        </el-upload>
+      </div>
+      <div class="right">
+        <p>4、上传按导入模板整理后的excel数据文件。</p>
+        <p>5、文件大小不超过50M。</p>
+      </div>
+    </div>
+    <el-row type="flex" style="margin-top: 15px">
+      <el-col :span="12" align="center">
+        <el-button
+          style="margin-left: 10px"
+          size="small"
+          class="diy-button--white"
+          plain
+          @click="handelClickBack"
+          >取消</el-button
+        >
+        <el-button class="diy-button--add" size="small" type="primary" @click="handelClickUpload">
+          开始导入</el-button
+        >
+      </el-col>
+    </el-row>
+  </div>
+</template>
+  <script>
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  data() {
+    return {
+      form: {
+        importCategory: null,
+        taskName: null,
+      },
+      rules: {
+        importCategory: [
+          { required: true, message: "请选择任务类型", trigger: "change" },
+        ],
+        taskName: [
+          { required: true, message: "请输入任务名称", trigger: "change" },
+        ],
+      },
+      resident_category_import_list: [],
+    };
+  },
+  props: {},
+  created() {
+    this.getDictList();
+  },
+  methods: {
+    async uploadHttpRequest (file) {
+      if (!this.importType) return;
+      this.importLoading = true;
+      this.importBtnTitle = "正在上传中...";
+      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
+      formData.append("file", file.file); //添加文件对象
+      formData.append("fileMode", this.importType); //添加文件对象
+      // http://127.0.0.1:4523/mock2/2515967/97869993
+      await this.$http
+        .post("/actual/base/importExcelData/extractExcelHead", formData)
+        .then((res) => {
+          console.log("res-up", res);
+          if (res.data.code == 0) {
+            const { metaListData, fileCode, msg } = res.data.data;
+            this.afterSuccess();
+            this.dataList = metaListData;
+            // 相等于在for循环中写filter过滤,这样写能够以 O(1) 的时间复杂度获取 itemGroupId 匹配的元素。
+            let groupMap = new Map(
+              this.groupList.map((item) => [item.label, item])
+            );
+            for (let i in this.dataList) {
+              this.handleSelGroup(
+                i,
+                groupMap.get(this.dataList[i].itemGroupId)
+              );
+            }
+            this.importCode = fileCode;
+            this.fileData = file;
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((err) => {
+          console.log("失败", err);
+          file.onError(); //上传失败的文件会从文件列表中删除
+          this.$message.error("导入失败");
+        });
+      this.importLoading = false;
+      this.importBtnTitle = "导入";
+      this.$refs.upload.clearFiles();
+    },
+    async getDictList() {
+      const url = "/sys/dict/data/dictlist";
+      const { data, code, msg } = await requestPost(url, {
+        dictType: "resident_category_import",
+      });
+      if (code === 0) {
+        this.resident_category_import_list = [...data];
+      } else {
+        this.$message.err("字典错误");
+      }
+    },
+    handelClickUpload(){
+        this.$emit('handelClickUpload')
+    },
+    handelClickBack(){
+        this.$emit('handelClickBack')
+    }
+  },
+  components: {},
+  computed: {},
+  watch: {},
+};
+</script>
+  <style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/detail-main.scss";
+@import "@/assets/scss/pages/smartImport.scss";
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/base/smartImport/cpts/executeTask.vue b/src/views/modules/base/smartImport/cpts/executeTask.vue
new file mode 100644
index 000000000..030144c8a
--- /dev/null
+++ b/src/views/modules/base/smartImport/cpts/executeTask.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="">
+    <div class="content_box">
+      <div class="left">
+        <img class="rotate" src="@/assets/images/index/loading.png" alt="" />
+        <p>请您耐心等待！如果您发现导入数据问题较多，可以取消导入</p>
+        <el-button
+          style="margin-left: 10px"
+          size="small"
+          class="diy-button--white"
+          plain
+          @click="handelClickBack"
+          >取消导入</el-button
+        >
+      </div>
+      <div class="right">
+        <h4>
+          <el-icon
+            class="el-icon-warning-outline"
+            style="color: #0056d6; font-size: 18px; font-weight: 600"
+          ></el-icon>
+          操作说明
+        </h4>
+        <p>1、导入数据多大，系统需要一定事件处理。</p>
+        <p>
+          2、导入过程中可查看导入明细，如果发现导入数据问题较多，可以取消本次导入，重新整理数据后，重新创建任务导入。
+        </p>
+        <p>3、导入失败的数据，您可以下载失败文件，修改后重新创建任务导入</p>
+      </div>
+    </div>
+    <h3 class="title-small">数据导入明细</h3>
+  </div>
+</template>
+    <script>
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  data() {
+    return {
+      form: {
+        importCategory: null,
+        taskName: null,
+      },
+      rules: {
+        importCategory: [
+          { required: true, message: "请选择任务类型", trigger: "change" },
+        ],
+        taskName: [
+          { required: true, message: "请输入任务名称", trigger: "change" },
+        ],
+      },
+      resident_category_import_list: [],
+    };
+  },
+  props: {},
+  created() {
+  },
+  methods: {
+ 
+    handelClickUpload() {
+      this.$emit("handelClickUpload");
+    },
+    handelClickBack() {
+        this.$confirm(`您确定要取消本次数据导入任务吗`, {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '再想想',
+                    type: 'warning'
+                }).then(() => {
+                    this.$emit("handelClickBack");
+                }).catch(() => {
+                    
+                });
+    },
+  },
+  components: {},
+  computed: {},
+  watch: {},
+};
+</script>
+    <style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/detail-main.scss";
+@import "@/assets/scss/pages/smartImport.scss";
+.left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #838383;
+}
+</style>
+    
\ No newline at end of file
diff --git a/src/views/modules/base/smartImport/cpts/smartImportAdd.vue b/src/views/modules/base/smartImport/cpts/smartImportAdd.vue
new file mode 100644
index 000000000..38d965da2
--- /dev/null
+++ b/src/views/modules/base/smartImport/cpts/smartImportAdd.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="m-detail-main">
+    <el-card>
+      <div class="steps">
+        <el-steps :active="progress" >
+            <!-- description="这是一段很长很长很长的描述性文字" -->
+          <el-step  title="创建任务" ></el-step>
+          <el-step title="正在导入"></el-step>
+          <el-step title="导入完成"></el-step>
+        </el-steps>
+      </div>
+      <div style="margin-top: 37px;">
+        <created-task v-if="progress == 1" @handelClickUpload="handelClickUpload" @handelClickBack="handelClickBack"></created-task>
+        <execute-task v-if="progress == 2"@handelClickBack="handelClickBack"></execute-task>
+        <complete-task v-if="progress == 3"@handelClickBack="handelClickBack"></complete-task>
+      </div>
+    </el-card>
+  </div>
+</template>
+  <script>
+import createdTask from './createdTask.vue'
+import executeTask from './executeTask.vue'
+import completeTask from './completeTask.vue'
+export default {
+  data() {
+    return {
+      progress:1,
+    };
+  },
+  props: {},
+  created() {
+  },
+  methods: {
+    handelClickUpload(){
+        this.progress = 2;
+    },
+    handelClickBack(){
+        this.$emit('handleClose');
+    },
+  },
+  components: {createdTask,executeTask,completeTask},
+  computed: {},
+  watch: {},
+};
+</script>
+  <style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/detail-main.scss";
+@import "@/assets/scss/pages/smartImport.scss";
+</style>
+  
\ No newline at end of file
diff --git a/src/views/modules/base/smartImport/cpts/smartImportDetail.vue b/src/views/modules/base/smartImport/cpts/smartImportDetail.vue
new file mode 100644
index 000000000..75baf8593
--- /dev/null
+++ b/src/views/modules/base/smartImport/cpts/smartImportDetail.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="">
+     detail
+    </div>
+  </template>
+  <script>
+  
+  export default {
+    data() {
+      return {};
+    },
+    props: {
+    },
+    created() {},
+    methods: {},
+    components: {},
+    computed: {},
+    watch: {},
+  };
+  </script>
+  <style lang="scss" scoped>
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/modules/base/smartImport/cpts/smartImportInfo.vue b/src/views/modules/base/smartImport/cpts/smartImportInfo.vue
new file mode 100644
index 000000000..a864362ac
--- /dev/null
+++ b/src/views/modules/base/smartImport/cpts/smartImportInfo.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="">
+    <div v-if="pageType == 'add'">
+        <smart-import-add @handleClose="handleClose" @handelClickCloseUpload="handelClickCloseUpload"></smart-import-add>
+    </div>
+    <div v-if="pageType == 'detail'">
+        <smart-import-detail></smart-import-detail>
+    </div>
+  </div>
+</template>
+<script>
+import smartImportAdd from "./smartImportAdd";
+import smartImportDetail from "./smartImportDetail";
+
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    pageType: String,
+    default: "",
+  },
+  created() {},
+  methods: {
+    handleClose(){
+      this.$emit("handleClose");
+    },
+    handelClickCloseUpload(){
+      this.$emit("handelClickCloseUpload");
+    },
+  },
+  components: {smartImportAdd,smartImportDetail},
+  computed: {},
+  watch: {},
+};
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/modules/base/smartImport/index.vue b/src/views/modules/base/smartImport/index.vue
new file mode 100644
index 000000000..d04815a3c
--- /dev/null
+++ b/src/views/modules/base/smartImport/index.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="g-main">
+    <div  v-show="pageType == 'list'">
+      <div class="m-search">
+        <el-form  :inline="true" :model="formData"  :label-width="'100px'">
+        <el-form-item label="任务类型">
+            <el-select v-model="formData.importCategory" placeholder="请输入" size="small" class="u-item-width-normal" clearable>
+              <el-option v-for="item in dicts.resident_category_import" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="状态">
+            <el-select v-model="formData.processStatus" placeholder="请输入" size="small" class="u-item-width-normal" clearable>
+              <el-option v-for="item in dicts.import_status" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="任务名称">
+            <el-input v-model="formData.taskName" placeholder="请输入" size="small" class="u-item-width-normal"
+              clearable></el-input>
+          </el-form-item>
+          <el-row type="flex">
+            <el-col :span="24" align="right">
+              <el-button style="margin-left: 30px" size="small" type="primary " @click="handleSearch">查询</el-button>
+              <el-button style="margin-left: 10px" is-plain class="diy-button--white el-button--default" size="small"
+                @click="resetSearch">重置</el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <div class="m-table">
+        <div class="div_btn">
+          <el-button size="small" @click="handleAdd" type="primary" icon="el-icon-plus">新建导入任务</el-button>
+        </div>
+
+        <el-table :data="tableData" border v-loading="tableLoading" class="m-table-item" style="width: 100%"
+          :height="maxTableHeight">
+          <el-table-column type="selection" fixed="left" align="center" width="50" />
+          <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
+
+          <el-table-column prop="originFileName" align="center"  label="任务名称" :show-overflow-tooltip="true">
+          </el-table-column>
+          <el-table-column prop="importCategory" align="center" width="100" label="任务类型" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{
+                scope.row.importCategory
+                ? scope.row.importCategory == "1"
+                  ? "导入房屋信息"
+                  : scope.row.importCategory == "2"
+                    ? "导入居民信息"
+                    : "--"
+                : "--"
+              }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="processStatus" align="center" width="200" label="状态" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ binaryText(scope.row.processStatus) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="importSuccessNum" align="center" width="80" label="成功数目" :show-overflow-tooltip="true">
+          </el-table-column>
+          <el-table-column prop="importFailNum" align="center" width="80" label="失败数目" :show-overflow-tooltip="true">
+          </el-table-column>
+          <el-table-column prop="createdByName" align="center" width="100" label="操作人" :show-overflow-tooltip="true"> 
+          </el-table-column>
+          <el-table-column prop="completedTime" align="center" width="180" label="操作完成时间"
+            :show-overflow-tooltip="true">
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" align="center" width="220">
+            <template slot-scope="scope">
+              <el-button @click="handleCloseImport(scope.row)" v-if="scope.row.importCategory === 'processing'" type="text" size="small">取消导入</el-button>
+              <!-- <el-button @click="handleCloseCheck(scope.row)"  v-if="scope.row.importCategory === 'processing'" type="text" size="small">确认完成</el-button> -->
+              <el-button @click="handleDetail(scope.row)" type="text" size="small">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div>
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
+            :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" layout="sizes, prev, pager, next, total"
+            :total="total">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <div v-if=" pageType == 'detail' || pageType == 'add'">
+      <!-- :eventDetailData="eventDetailData" -->
+            <smart-import-info ref="eleEditForm" :pageType="pageType"  
+                @handleClose="handleClose" @handleOk="handleOk"/>
+        </div>
+  </div>
+</template>
+  
+<script>
+import { requestPost } from "@/js/dai/request";
+import { genderList, binaryOptionList } from "@/js/columns/constants";
+import nextTick from "dai-js/tools/nextTick";
+import { mapGetters } from "vuex";
+import axios from "axios";
+import smartImportInfo from "./cpts/smartImportInfo";
+export default {
+  components: {smartImportInfo},
+
+  data() {
+    return {
+      tableLoading: false,
+      searchH: 170,
+      tableData: [],
+      genderList,
+      binaryOptionList,
+      formData: {},
+      pageNo: 1,
+      pageSize: window.localStorage.getItem("pageSize") || 20,
+      total: 1,
+      pageType: "add", // 列表list 新增add  详情detail
+
+      dicts: {
+        import_status:[],
+        resident_category_import:[],
+      
+      }, //字典对象
+    };
+  },
+  computed: {
+    maxTableHeight() {
+      const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;
+      const _h = this.clientHeight - 330 - this.searchH;
+      return this.$store.state.inIframe ? h : _h;
+    },
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+  },
+  watch: {},
+  async created() {
+    await this.getDicts();
+  },
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    // --------------------------------------字典------------------------------------------
+    async getDicts() {
+      try {
+        const dictTypes = ["import_status", 'resident_category_import']; // 把所有dictType放在这个数组里
+        const requests = dictTypes.map((dictType) => {
+          return this.$http.post("sys/dict/data/dictlist", {
+            dictType: dictType,
+          });
+        });
+        const results = await Promise.all(requests);
+        results.forEach((result, index) => {
+          if (result.data.code === 0) {
+            this.dicts[dictTypes[index]].push(...result.data.data);
+          } else {
+            console.log(`获取${dictTypes[index]}字典失败: ${result.msg}`);
+          }
+        });
+      } catch (error) {
+        console.log("获取字典失败: ", error);
+      }
+    },
+    binaryText(value) {
+      let text = "";
+      let foundItem = this.dicts.import_status.filter(
+        (item) => item.value == value
+      )[0];
+      text = foundItem ? foundItem.label : "--";
+      return text;
+    },
+    // ------------------------------------事件------------------------------------------
+    // 搜索事件
+    handleSearch(val) {
+      console.log(this.formData);
+      this.pageNo = 1;
+      this.getTableData();
+    },
+
+    //   调出新增组件
+    async handleAdd() {
+      this.pageType = "add";
+    },
+    //   查看详情触发事件
+    async handleDetail(row) {
+      this.pageType = "detail";
+    },
+   
+    //  新增弹出框组件取消事件
+    handleClose() {
+      this.pageType = "list";
+     
+    },
+    //  新增弹出框组件确定事件
+    handleOk(type) {
+     
+    },
+    //   删除触发事件
+    async handleDel(row) {
+      this.$confirm("确认删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.cancelFuwu([row.categorizedResiId]);
+        })
+        .catch((err) => {
+          if (err == "cancel") {
+            // this.$message({
+            //   type: "info",
+            //   message: "已取消删除"
+            // });
+          }
+        });
+    },
+    //   删除处理
+    async cancelFuwu(id) {
+      const url = "/actual/base/resiCategorized/disability/deleteBatch";
+      const { data, code, msg } = await requestPost(url, id);
+      if (code === 0) {
+        this.$message.success("删除成功！");
+        this.getTableData();
+      } else {
+        this.$message.error("操作失败！");
+      }
+    },
+    //   获取列表
+    async getTableData() {
+      this.tableLoading = true;
+      const url = "/commonservice/import-task/page";
+      const { pageSize, pageNo, formData } = this;
+      const { data, code, msg } = await requestPost(url, {
+        pageSize,
+        pageNo,
+        ...formData,
+      });
+      this.tableLoading = false;
+      if (code === 0) {
+        this.total = data.total || 0;
+        this.tableData = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //   分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      window.localStorage.setItem("pageSize", val);
+      this.getTableData();
+    },
+
+    //   分页
+    handleCurrentChange(val) {
+      this.pageNo = val;
+      this.getTableData();
+    },
+    //   重置
+    resetSearch() {
+      this.formData = {};
+
+      this.pageNo = 1;
+      this.getTableData();
+    },
+  },
+
+  props: {},
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/scss/buttonstyle.scss";
+@import "@/assets/scss/modules/management/list-main.scss";
+</style>
+  
\ No newline at end of file