zc

src/views/comprehensive/laboratoryManagement/subject/index.vue

@@ -44,12 +44,25 @@
             </el-form-item>
             <el-form-item style="float: right;">
               <el-col :span="1.5" style="margin-bottom:26px;margin-right: 20px">
-                <p class="add-button-one-120"
+                <p class="add-button-one-90"
                    @click="clickPage(2)"
                    v-hasPermi="['laboratory:subject:add']"
-                ><i class="el-icon-plus"></i>新增实验室</p>
+                ><i class="el-icon-plus"></i>新增</p>
               </el-col>
             </el-form-item>
+            <el-form-item style="float: right;margin-right:20px;" v-hasPermi="['laboratory:subject:import']">
+              <el-dropdown @command="importButton">
+                <div class="form-dropdown-box">
+                  <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_dr.png">
+                  <p>导入</p>
+                  <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">下载模板</el-dropdown-item>
+                  <el-dropdown-item style="margin:0 10px;color:#333;" :command="{command:2}">导入数据</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-form-item>
             <el-form-item style="margin-right: 20px;">
               <p class="inquire-button-one" style="margin-left:20px;" @click="handleQuery">查询</p>
               <p class="reset-button-one" style="margin-left:20px;" @click="resetQuery">重置</p>
@@ -337,11 +350,42 @@
         <el-button type="primary" @click="submitFormOne">确 定</el-button>
       </div>
     </el-dialog>
+    <!--导入窗口-->
+    <el-dialog title="导入数据" :visible.sync="importOpen" @close="importOpenOff" width="600px" append-to-body class="checkItemLibrary-dialog-box">
+      <el-upload
+        class="teacher-import-dialog-upLoad-box"
+        :drag="true"
+        :data="upImportData"
+        :action="uploadImgUrl"
+        :show-file-list="false"
+        :on-success="handleAvatarSuccess"
+        :headers="headers"
+        :before-upload="beforeAvatarUpload">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">仅允许导入xls、xlsx、格式文件。<span style="color:#0183FA;cursor: pointer" v-hasPermi="['system:user_teacher:exceltemplate']" @click="importTemplate">下载模板</span></div>
+        <div class="el-upload-text-box" slot="tip" v-if="getImportData.downFile">
+          <div class="img-text-box">
+            <img src="@/assets/ZDimages/personnelManagement/icon_dr_wj.png">
+            <p>{{getImportData.textName}}</p>
+          </div>
+          <p class="text-p">数据导入成功 <span style="color:#0183FA;">{{getImportData.successNum}}</span> 条，失败 <span style="color:#FF6464 ;">{{getImportData.failureNum}}</span> 条</p>
+          <div class="img-text-box" v-if="getImportData.failureNum">
+            <img src="@/assets/ZDimages/personnelManagement/icon_dr_sj.png">
+            <p style="color:#0183FA;cursor: pointer;" @click="failureExcel">点击下载失败数据报表</p>
+          </div>
+        </div>
+      </el-upload>
+      <div slot="footer" class="teacher-import-dialog-button-box">
+        <p class="inquire-button-one" @click="importOpenOff">确定</p>
+      </div>
+      <div class="teacher-import-dialog-position-box" v-if="loading"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import { controlSwitch } from "@/api/laboratory/hardware";
+import { controlSwitch } from "@/api/laboratory/hardware";
 import mqtt from 'mqtt'
 import flvjs from 'flv.js'
 import { hardWareControl,alarmControl } from "@/api/laboratory/hardware";
@@ -361,8 +405,9 @@ import admissionConfiguration from "./admissionConfiguration.vue";
 import associationConfiguration from "./associationConfiguration.vue";
 import infoPage from "./infoPage.vue";
 import { getHxpAlarmRecordNoAuthList,getEnablelist} from "@/api/medicUniversity-3_1/index";
-  import { listClassifiedAll } from "@/api/laboratory/classified";
-  import { listClasstypeAll } from "@/api/laboratory/classtype";
+import { listClassifiedAll } from "@/api/laboratory/classified";
+import { listClasstypeAll } from "@/api/laboratory/classtype";
+import { getToken } from "@/utils/auth";
 import store from '@/store'
 export default {
   filters:{
@@ -384,6 +429,23 @@ export default {
   },
   data(){
     return{
+      uploadImgUrl: window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/zd-laboratory/subject/importSubData", // 上传地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      //导入弹层开关
+      importOpen:false,
+      //导入数据
+      upImportData:{
+        sysUserEnable:true,
+        upDate:false,
+      },
+      getImportData:{
+        downFile:false,
+        successNum:0,
+        failureNum:0,
+        textName:"",
+      },
       pageType:1,
       // 遮罩层
       loading: true,
@@ -1266,6 +1328,63 @@ export default {
         }
       });
     },
+    //****************************************导入功能**************************************
+    handleAvatarSuccess(res, file) {
+      if(res.code == 200){
+        this.getImportData.downFile = true
+        this.getImportData.successNum = res.data.successNum
+        this.getImportData.failureNum = res.data.failureNum
+        // this.importOpen = false;
+        // this.getList();
+      }else{
+        this.msgError(res.msg);
+      }
+      this.loading = false;
+    },
+    beforeAvatarUpload(file) {
+      let type = false;
+      console.log('file',file);
+      if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
+        if(file.size> 5250000){
+          this.msgError('上传大小不能超过5M')
+          return false
+        }
+        this.getImportData.textName = file.name;
+        type = true;
+        this.loading = true;
+      }else{
+        this.$message.error('只能上传xls/xlsx格式文件');
+        type = false;
+      }
+      return type;
+    },
+    //导入页面关闭
+    importOpenOff(){
+      this.importOpen = false;
+      this.getImportData.downFile = false;
+      this.getImportData.successNum = 0;
+      this.getImportData.failureNum = 0;
+      this.getImportData.textName = "";
+    },
+    /** 导入按钮操作 */
+    importButton(item){
+      if(item.command == 1){
+        //  下载模板
+        this.download('/zd-laboratory/subject/exportSubTemplate', {}, `实验室导入模板.xlsx`)
+      }else if(item.command == 2){
+        //  导入数据
+        console.log('导入数据');
+        this.importOpen = true;
+      }
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download('/zd-laboratory/subject/exportSubTemplate', {}, `实验室导入模板.xlsx`)
+    },
+    /*下载失败列表*/
+    failureExcel(){
+      this.download('/zd-laboratory/subject/exportProblemData', {}, `实验室导入模板失败报表.xlsx`)
+    },
   },
   beforeDestroy() {
     //清除定时器
@@ -1304,6 +1423,30 @@ export default {
       overflow: hidden;
       padding: 2px 0 10px 10px;
       box-sizing: border-box;
+      .form-dropdown-box{
+        display: flex;
+        margin:0;
+        padding:0 10px;
+        cursor: pointer;
+        height:40px;
+        img:nth-child(1){
+          width:16px;
+          height:16px;
+          margin-top:12px;
+        }
+        p{
+          width:47px;
+          text-align: center;
+          font-size:14px;
+          margin:0;
+          line-height:40px;
+        }
+        img:nth-child(3){
+          width:10px;
+          height:6px;
+          margin-top:17px;
+        }
+      }
     }
     .left-subject-list-flex{
       flex:1;
@@ -1890,4 +2033,112 @@ export default {
     background-size: 45%;
   }
 }
+.checkItemLibrary-dialog-box{
+  .teacher-import-dialog-upLoad-box{
+    .el-upload{
+      width:450px;
+      margin:0 55px;
+      .el-upload-dragger{
+        width:450px;
+        .el-icon-upload{
+          font-size:100px;
+          color:#CBE6FE;
+        }
+        .el-upload__text{
+          margin-top:20px;
+        }
+      }
+    }
+    .el-upload__tip{
+      margin-left:60px;
+      font-size:14px;
+      margin-top:10px;
+    }
+    .el-upload-text-box{
+      background: #F5F5F5;
+      border-radius: 10px;
+      margin:15px 30px 0;
+      padding:0 20px 15px;
+      overflow: hidden;
+      *{
+        margin:0;
+      }
+      .img-text-box{
+        display: flex;
+        margin-top:15px;
+        img{
+          width:16px;
+          height:16px;
+          margin-right:13px;
+        }
+        p{
+          height:16px;
+          line-height:16px;
+          font-size:12px;
+        }
+      }
+      .text-p{
+        margin-top:15px;
+        margin-left:29px;
+        height:16px;
+        line-height:16px;
+        font-size:12px;
+      }
+    }
+  }
+  .teacher-import-dialog-button-box{
+    display: flex;
+    width:190px;
+    margin:0 auto;
+    p{
+      width:70px;
+      height:30px;
+      line-height:30px;
+      font-size:14px;
+      margin:0 auto;
+    }
+  }
+  .teacher-import-dialog-position-box{
+    width:100%;
+    height:100%;
+    position: absolute;
+    top:0;
+    left:0;
+    z-index: 999;
+    background: rgba(255,255,255,0.4);
+    border-radius:20px;
+  }
+  .code-max-box{
+    display: flex;
+    .code-button-box{
+      display: flex;
+      flex-direction: column;
+      margin-left:8px;
+      p{
+        width:40px;
+        text-align: center;
+        line-height:19px;
+        font-size:14px;
+        cursor: pointer;
+        color:#d8d8d8;
+      }
+      p:nth-child(1){
+        border:1px solid #d8d8d8;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+      p:nth-child(2){
+        border-bottom:1px solid #d8d8d8;
+        border-left:1px solid #d8d8d8;
+        border-right:1px solid #d8d8d8;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+      p:hover{
+        color:#fff;
+        background-color: #d8d8d8;
+      }
+    }
+  }
+}
 </style>