添加模板导入

src/views/expertSystem/expertForm.vue

@@ -7,17 +7,23 @@
       <el-input v-model="searchInfo.keyWords" suffix-icon="el-icon-edit" clearable placeholder="请输入专家姓名">
         <el-button slot="append" icon="el-icon-search" @click="nameSearch"></el-button>
       </el-input>
-
-
-
+      <el-button type="primary" @click="dialogVisible = true" style="margin-left: 10px" >一键导入专家信息</el-button>
+      <el-button type="primary" style="margin-left: 10px">生成专家咨询费发放表</el-button>
 
 
     </div>
 
     <el-table
       :data="tableData"
+      @selection-change="handleSelectionChange"
+
+      :row-class-name="rowClassName"
       stripe
       style="width: 100%">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
       <el-table-column
         prop="expertId"
         label="ID"
@@ -55,6 +61,32 @@
       </el-table-column>
 
     </el-table>
+
+
+    <el-dialog
+      title="专家导入"
+      :visible.sync="dialogVisible"
+      width="50%"
+      custom-class="mkdirDialog"
+      :before-close="handleClose">
+      <el-form label-position="top" label-width="80px" :model="filesInfo" :rules="rules" style="text-align: left">
+        <el-form-item label="请上传专家信息模板进行导入（模板请脱水印，否则导入失败）" prop="upload">
+          <el-upload
+            class="upload-demo"
+            drag
+            ref="fileUpload"
+            :headers="headers"
+            action="/api/expert/importExpertInfo"
+            :on-success="uploadSuccess"
+            :limit="1">
+
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+
+    </el-dialog>
   </div>
 </template>
 
@@ -74,10 +106,69 @@ export default {
         kind: "",
       },
       tableData: [
-      ]
+      ],
+
+      //token
+      headers:{
+        "Authorization": localStorage.getItem("systemToken")
+      },
+
+      // 上传文件弹窗状态
+      dialogVisible: false,
+
+      //重复人员id数组
+      highlightedExpertIds: [],
+
     }
   },
   methods:{
+
+    //标红重复人员
+    rowClassName({ row, rowIndex }){
+
+      console.log('rowClassName called for row', row);
+      if (this.highlightedExpertIds.includes(row.expertId)) {
+        return 'red-row';
+      }
+      return '';
+    },
+
+
+    //导入专家调用接口返回
+    uploadSuccess(response){
+      if (response.status == 0) {
+        Message.success(response.msg)
+        this.dialogVisible = false
+        this.$refs.fileUpload.clearFiles()
+        this.highlightedExpertIds = []
+        this.getAllExpertInfo()
+      }else if (response.status == 10){
+        //有重复信息
+        Message.warning(response.msg)
+        this.dialogVisible = false
+        this.$refs.fileUpload.clearFiles()
+        //重复专家标红
+
+        //取出data中的expertId并添加到highlightedExpertIds数组
+        let data = response.data
+        this.highlightedExpertIds = data.map(item => item.expertId);
+
+
+
+        console.log(this.highlightedExpertIds)
+      }
+    },
+
+
+
+
+
+    //多选
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      console.log(val)
+    },
+
     nameSearch(){
       if (this.searchInfo.keyWords != null && this.searchInfo.keyWords != '' && this.searchInfo.keyWords != undefined){
         //have search content
@@ -122,4 +213,17 @@ export default {
 .manageList-header-input .el-select {
   width: 8rem;
 }
+
+
+/deep/ .el-dialog.mkdirDialog{
+  background: rgba(255, 255, 255, 0.62);
+  border-radius: 5px;
+  backdrop-filter: saturate(50%) blur(8px);
+}
+
+
+
+/deep/ .red-row {
+  color: red;
+}
 </style>