批量导入 静态页面

src/views/artisanManage/components/importArtisan.vue

+<template>
+  <div>
+    <el-dialog
+      visible
+      width="400px"
+      custom-class="importArtisanClass"
+      :destroy-on-close="true"
+      :show-close="false"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div class="topHeader">
+        批量导入
+        <i
+          class="elIcon el-icon-close"
+          @click="$emit('close')"
+        ></i>
+      </div>
+      <div class="botCont">
+        <div class="contents">
+          <p class="leftWord">下载模版：</p>
+          <div class="fileCon">技术人员数据模版.doc</div>
+          <div class="downCon"></div>
+        </div>
+        <div
+          class="contents"
+          style="justify-content: flex-start;"
+        >
+          <p class="leftWord">上传数据：</p>
+          <div class="uploadFileClass">
+            <el-upload
+              class="upload-demo"
+              :auto-upload="false"
+              :disabled="isUpload"
+              action="#"
+              :limit="limit"
+              :on-preview="handlePreview"
+              :on-change="handleChange"
+              :on-remove="handleRemove"
+              :on-exceed="handleExceed"
+              :file-list="fileList"
+            >
+              <el-button
+                size="small"
+                type="primary"
+                icon="el-icon-upload2"
+                :disabled="isUpload"
+              >{{ isUpload ? '上传中' : '上传文件' }}</el-button>
+            </el-upload>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "importArtisan",
+  data() {
+    return {
+      isUpload: false,
+      limit: 1,
+      fileList: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    handlePreview() {},
+    handleChange() {},
+    handleRemove() {},
+    handleExceed() {},
+  },
+};
+</script>
+
+<style lang="scss">
+.importArtisanClass {
+  * {
+    box-sizing: border-box;
+  }
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 0 !important;
+    .topHeader {
+      width: 100%;
+      height: 56px;
+      line-height: 56px;
+      border-bottom: 1px solid #eeeeee;
+      font-size: 16px;
+      color: #333;
+      position: relative;
+      padding-left: 24px;
+      .elIcon {
+        position: absolute;
+        right: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+    }
+    .botCont {
+      padding: 32px 24px;
+      .contents {
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+        .leftWord {
+          width: 70px;
+          font-size: 14px;
+          color: #333333;
+        }
+        .fileCon {
+          width: 230px;
+          height: 100%;
+          background: #f4f6f7 url("../../../assets/img/icons/fileImg@2x.png")
+            no-repeat 16px center;
+          background-size: 16px 16px;
+          border-radius: 4px;
+          padding-left: 38px;
+          font-size: 14px;
+          color: #333333;
+        }
+        .downCon {
+          width: 32px;
+          height: 100%;
+          background: #e6f0ff url("../../../assets/img/icons/doImg@2x.png")
+            no-repeat center;
+          background-size: 14px 14px;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        .uploadFileClass {
+          width: 120px;
+          height: 32px;
+          margin-left: 10px;
+          .el-upload,
+          .el-button {
+            width: 100%;
+            margin-right: 0 !important;
+          }
+          .el-button {
+            background: #2259ee;
+            border: 1px solid #2259ee;
+          }
+        }
+      }
+      .contents:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>

src/views/artisanManage/index.vue

@@ -207,6 +207,12 @@
         </el-pagination>
       </div>
     </div>
+    <!-- 批量导入 -->
+    <importArtisan
+      v-if="showImportBox"
+      @close="showImportBox = false"
+    >
+    </importArtisan>
   </div>
 </template>
 
@@ -219,8 +225,13 @@ import {
 import { getJsonDataApi } from "@/utils/getJsonData.js";
 import { getCodeName, handleDownFile } from "@/utils/mk.js";
 
+import importArtisan from "./components/importArtisan.vue";
+
 export default {
   name: "artisanManage",
+  components: {
+    importArtisan,
+  },
   data() {
     return {
       formData: {
@@ -239,6 +250,8 @@ export default {
       sexOptions: enumeration.sexOptions,
       shifouOptions: [],
       jwjsxlOptions: [],
+
+      showImportBox: false,
     };
   },
   async mounted() {
@@ -395,7 +408,9 @@ export default {
         });
     },
     // 导入
-    importData() {},
+    importData() {
+      this.showImportBox = true;
+    },
   },
   watch: {},
 };