v3-lab-web/src/views/integratedManagement/laboratoryManagement/subject/index.vue

<template>
  <div class="app-container subject">
    <div class="page-container subject-page" v-if="pageType == 1">
      <div class="left-subject-list">
        <div class="page-form-title-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="" prop="searchValue">
              <el-input
                v-model="queryParams.searchValue"
                placeholder="实验室/房间号"
                clearable
                maxlength="10"
                style="width:150px;"
              />
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="queryParams.deptId" placeholder="二级单位" style="width:140px;">
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="buildId">
              <el-select v-model="queryParams.buildId" placeholder="楼栋" style="width:140px;">
                <el-option
                  v-for="dict in buildOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="typeId">
              <el-select v-model="queryParams.typeId" placeholder="安全分类" style="width:140px;">
                <el-option
                  v-for="dict in typeList"
                  :key="dict.typeId"
                  :label="dict.typeName"
                  :value="dict.typeId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="levelId">
              <el-select v-model="queryParams.levelId" placeholder="安全分级" style="width:140px;">
                <el-option
                  v-for="dict in levelList"
                  :key="dict.levelId"
                  :label="dict.levelName"
                  :value="dict.levelId"
                ></el-option>
              </el-select>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <el-dropdown @command="commandButton" style="float: right;">
              <p class="page-submit-common-style-button" style="width:105px;"
              >操作<span class="el-icon-arrow-down" style="margin-left:10px;"></span></p>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{command:1}" v-hasPermiRouter="['system:subject:add']">新增</el-dropdown-item>
                <!--<el-dropdown-item :command="{command:2}">关联配置</el-dropdown-item>-->
                <!--<el-dropdown-item :command="{command:3}">准入配置</el-dropdown-item>-->
                <el-dropdown-item :command="{command:4}">下载二维码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-form-item v-hasPermiRouter="['system:subject:import']" style="float: right;">
              <import-component :importConfig="importConfig"></import-component>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-content-box">
          <el-table class="table-box" ref="table-box" border :data="dataList" highlight-current-row
                    @select-all="handleSelectionChange" @select="handleSelectionChange" :row-key="getRowKeys"
                    @current-change="handleCurrentChange">
            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="排序" align="left" prop="orderNum" width="75">
              <template slot-scope="scope">
                <el-input maxlength="4" type="text" oninput="value=value.replace(/[^0-9.]/g,'')"
                          v-model="scope.row.orderNum" @focus="liveSort(scope.row)"
                          @blur="editSort(scope.row)">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="实验室名称" align="left" prop="subName" show-overflow-tooltip/>
            <el-table-column label="房间号" align="left" prop="roomName" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.roomName?scope.row.roomName:'未绑定'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="left" prop="deptName" width="130" show-overflow-tooltip/>
            <el-table-column label="楼栋/楼层" align="left" prop="buildName" width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.buildName}}/{{scope.row.floorName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="分类/分级" align="left" prop="levelName" width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.typeName}}/</span>
                <span :style="'color:'+scope.row.levelColor+';'">{{scope.row.levelName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="实验室责任人" align="left" prop="adminName" width="120" show-overflow-tooltip/>
            <el-table-column label="安全员" align="left" prop="safeUserNames" width="120" show-overflow-tooltip/>
            <el-table-column label="操作" align="left" width="140">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p" v-hasPermiRouter="['system:subject:detail']"
                     @click.stop="clickPage(7,scope.row)">详情</p>
                  <el-dropdown trigger="click" size="mini" @command="(command) => handleCommand(command, scope.row)">
                    <p class="table-button-p">更多>></p>
                    <el-dropdown-menu slot="dropdown" style="margin:0!important;">
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="1"
                                        v-hasPermiRouter="['system:subject:edit']">关联配置
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="2"
                                        v-hasPermiRouter="['system:subject:edit']">准入配置
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="3"
                                        v-hasPermiRouter="['system:subject:edit']">编辑
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="5"
                                        v-hasPermiRouter="['system:subject:edit']">信息牌下载
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
      <index-right-page ref="indexRightPage"></index-right-page>
    </div>
    <!--电子信息牌导出-->
    <el-dialog class="subject-dialog" title='' width="1354px" append-to-body
               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="subject-dialog-button-box">
        <p @click="dialogOff">取消</p>
        <p @click="downloadImg">下载</p>
      </div>
      <div id="subject-dialog-print-box" ref="canvasImg">
        <div class="subject-dialog-print-big-box">
          <!--信息栏-->
          <div class="subject-dialog-print-top-box">
            <div class="subject-dialog-print-top-left-box">
              <div class="subject-dialog-print-top-left-top-box">
                <!--实验室名称-->
                <div class="subject-dialog-name-box">
                  <div class="title-box-1">
                    <div class="title-box-2" :style="'background-color:'+dialogData.filedColor+';'">
                      <div class="title-box-3">
                        <p :style="'background-color:'+dialogData.filedColor+';'">{{dialogData.levelName}}丨{{dialogData.typeName}}</p>
                      </div>
                    </div>
                  </div>
                  <p class="title-p">实验室安全信息牌</p>
                </div>
                <!--实验室信息-->
                <div class="subject-dialog-info-box">
                  <div class="subject-dialog-info-left-box">
                    <p>实验室名称：{{dialogData.subjectName}} - {{dialogData.room}}</p>
                    <p>责 任 单 位：{{dialogData.deptName}}</p>
                    <p>实验室负责人：{{dialogData.adminName}}｜{{dialogData.adminPhone}}</p>
                    <p>安全责任人：<span v-for="(item,index) in dialogData.safeUserVoList" :key="index">{{item.safeUserName}}｜{{item.safeUserPhone}}{{index==0?' 、':''}}</span></p>
                  </div>
                  <div class="subject-dialog-info-right-box">
                    <img :src="dialogData.qrCodeUrl">
                  </div>
                </div>
              </div>
              <div class="subject-dialog-print-top-left-bottom-box">
                <!--1号右侧信息栏-->
                <div class="subject-dialog-print-top-left-bottom-left-box" v-if="dialogData.dataOne">
                  <p class="data-title" :style="'background-color:'+dialogData.dataOne.showColour+';'">{{dialogData.dataOne.classifyName}}</p>
                  <div class="data-for-text" v-if="dialogData.dataOne.classifyType == 1">
                    <p v-for="(item,index) in dialogData.dataOne.classifyList" :key="index">{{index+1}}、{{item}}</p>
                  </div>
                  <div class="data-for-img" v-if="dialogData.dataOne.classifyType == 2">
                    <img v-for="(item,index) in dialogData.dataOne.classifyList" :key="index" :src="item">
                  </div>
                </div>
                <!--2号右侧信息栏-->
                <div class="subject-dialog-print-top-left-bottom-right-box" v-if="dialogData.dataTwo">
                  <p class="data-title" :style="'background-color:'+dialogData.dataTwo.showColour+';'">{{dialogData.dataTwo.classifyName}}</p>
                  <div class="data-for-text" v-if="dialogData.dataTwo.classifyType == 1">
                    <p v-for="(item,index) in dialogData.dataTwo.classifyList" :key="index">{{index+1}}、{{item}}</p>
                  </div>
                  <div class="data-for-img" v-if="dialogData.dataTwo.classifyType == 2">
                    <img v-for="(item,index) in dialogData.dataTwo.classifyList" :key="index" :src="item">
                  </div>
                </div>
              </div>
            </div>
            <!--3号右侧信息栏-->
            <div class="subject-dialog-print-top-right-box" v-if="dialogData.dataThree">
              <p class="data-title" :style="'background-color:'+dialogData.dataThree.showColour+';'">{{dialogData.dataThree.classifyName}}</p>
              <div class="data-for-text" v-if="dialogData.dataThree.classifyType == 1">
                <p v-for="(item,index) in dialogData.dataThree.classifyList" :key="index">{{index+1}}、{{item}}</p>
              </div>
              <div class="data-for-img" v-if="dialogData.dataThree.classifyType == 2">
                <img v-for="(item,index) in dialogData.dataThree.classifyList" :key="index" :src="item">
              </div>
            </div>
          </div>
          <!--特殊类目-->
          <div class="subject-dialog-print-button-box" :style="'background:'+dialogData.specialBrandInfo.showColour+';'">
            <span v-for="(item,index) in dialogData.specialBrandInfo.classifyList" :key="index">{{item}}</span>
          </div>
        </div>
      </div>
      <div class="subject-dialog-shade" v-if="dialogShadeType"></div>
    </el-dialog>
    <!--新增/编辑-->
    <add-subject v-if="pageType == 2" :subjectData="subjectData"></add-subject>
    <!--准入配置-->
    <admission-configuration v-if="pageType == 4" :subjectData="subjectData"></admission-configuration>
    <!--关联配置-->
    <association-configuration v-if="pageType == 5" :subjectData="subjectData"></association-configuration>
    <!--详情-->
    <info-page v-if="pageType == 6" :subjectData="subjectData"></info-page>
    <!--批量二维码-->
    <batchQrCodeDialog ref="batchQrCodeDialog" :batchQrCodeDialogData="batchQrCodeDialogData"></batchQrCodeDialog>
  </div>
</template>

<script>
  /********************** V3 **********************/
  import html2canvas from 'html2canvas'
  import importComponent from "@/components/importComponent/importComponent.vue";
  import batchQrCodeDialog from "@/components/batchQrCodeDialog/batchQrCodeDialog.vue";
  import {
    getDeptDropList,
    systemBuildingGetTreeList,
    laboratoryClassTypeGetList,
    laboratoryClassLevelGetList,
  } from '@/api/commonality/permission'
  import {
    laboratorySubRelInfoList,
    laboratorySubRelInfoGetDetailInfo,
    laboratorySubRelInfoGetHazardSubRelInfo,
    laboratorySubRelInfoUpdateBySort,
    laboratorySubRelInfoUpdateByControl,
    laboratoryBoardExportBoardInfo,
  } from '@/api/integratedManagement/index'
  import indexRightPage from './indexRightPage/indexRightPage.vue'
  import addSubject from './addSubject.vue'
  import admissionConfiguration from './admissionConfiguration.vue'
  import associationConfiguration from './associationConfiguration.vue'
  import infoPage from './infoPage.vue'
  export default {
    name: 'subject',
    components: {
      importComponent,
      addSubject,
      admissionConfiguration,
      associationConfiguration,
      infoPage,
      indexRightPage,
      batchQrCodeDialog
    },
    data() {
      return {
        //批量二维码
        batchQrCodeDialogData:{},
        //电子信息牌
        dialogType:false,
        dialogData:{},
        dialogShadeType:false,
        //导入数据
        importConfig:{
          upLoadApi:'/laboratory/subRelInfo/importSubData',                //上传接口地址
          downloadApi:'/laboratory/subRelInfo/exportSubTemplate',          //下载模板接口地址
          loseApi:'/laboratory/subRelInfo/exportProblemData',             //失败报表接口地址
          fileName:'实验室导入模板',                                   //下载模板命名
        },
        //页面状态
        pageType: 1,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 20,
          searchValue: '',
          deptId: '',
          typeId: '',
          levelId: ''
        },
        // 实验室表格数据
        dataList: [],
        // 楼栋
        buildOptions:[],
        // 总条数
        total: 0,
        //学院列表
        deptOptions: [],
        //实验室数据
        subjectData: {},
        // 临时保存排序
        orderNum: '',
        //分类数据
        typeList: [],
        //分级数据
        levelList: [],
        //二维码勾选数据
        codeList:'',
      }
    },
    created() {
    },
    mounted() {
      //获取院系列表
      this.getDeptDropList()
      //获取楼栋列表
      this.systemBuildingGetTreeList()
      //获取分类列表
      this.laboratoryClassTypeGetList()
      //获取分级列表
      this.laboratoryClassLevelGetList()
      //获取列表数据
      this.getList()
    },
    methods: {
      //操作按钮
      commandButton(item){
        if(item.command == 1){
          this.clickPage(2);
        }else if(item.command == 2){

        }else if(item.command == 3){

        }else if(item.command == 4){
          if(this.codeList.length>0){
            let list = [];
            this.codeList.forEach((item)=>{
              list.push({
                code:item.infoId+'&subId='+item.subId,
                name:item.subName
              })
            })
            this.$set(this,'batchQrCodeDialogData',{
              title:'实验室二维码批量下载',                                               //弹窗名称(非必传)
              type:'5',                                                     //二维码类型 用于区分二维码功能类型
              codeList:list
            });
            this.$nextTick(function () {
              this.$refs['batchQrCodeDialog'].initialize();
            })
          }else{
            this.msgError('请勾选实验室')
          }
        }
      },
      // 页面切换
      clickPage(type, row) {
        if (this.pageType != type) {
          if (type == 1) {
            //列表页面
            this.pageType = type
            this.getList()
            this.$set(this, 'subjectData', {})
          } else if (type == 2) {
            //新增页面
            this.pageType = type
          }else if (type == 7) {
            //实验室详情
            this.getSubInfo(row,1)
          }
        }
      },
      //更多按钮
      handleCommand(command, row) {
        let self = this
        switch (command) {
          case '1':
            //关联配置
            laboratorySubRelInfoGetHazardSubRelInfo({ infoId: row.infoId }).then(response => {
              this.$set(this, 'subjectData', response.data)
              this.$set(this, 'pageType', 5)
            })
            break
          case '2':
            //准入配置
            this.pageType = 4
            this.$set(this, 'subjectData', row)
            break
          case '3':
            //编辑页面
            this.getSubInfo(row,2)
            break
          case '4':
            let text = row.accessControl?'关闭':'开启'
            //开启/关闭门禁权限
            self.$confirm('是否确认'+text+'实验室准入?', '', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function() {
              laboratorySubRelInfoUpdateByControl({
                infoId: row.infoId,
                accessControl:!row.accessControl
              }).then(response => {
                self.msgSuccess(response.message)
                self.getList()
              })
            }).then(() => {
            }).catch(() => {
            })
            break
          case '5':
            laboratoryBoardExportBoardInfo({
              labId: row.subId,
            }).then(response => {
              let textLength = 0;
              let textIndex = null;
              for(let i=0;i<response.data.nonspecialBrandList.length;i++){
                if(response.data.nonspecialBrandList[i].classifyType == 1){
                  response.data.nonspecialBrandList[i].length = 0;
                  for(let o=0;o<response.data.nonspecialBrandList[i].classifyList.length;o++){
                    response.data.nonspecialBrandList[i].length = response.data.nonspecialBrandList[i].length + response.data.nonspecialBrandList[i].classifyList[o].length;
                  }
                  if(response.data.nonspecialBrandList[i].length>textLength){
                    textLength = response.data.nonspecialBrandList[i].length
                    textIndex = i
                  }
                }
              }
              if(textIndex != null){
                for(let i=0;i<response.data.nonspecialBrandList.length;i++){
                  if(textIndex == i){
                    response.data.dataThree = response.data.nonspecialBrandList[i]
                  }else{
                    if(!response.data.dataOne){
                      response.data.dataOne = response.data.nonspecialBrandList[i]
                    }else if(!response.data.dataTwo){
                      response.data.dataTwo = response.data.nonspecialBrandList[i]
                    }
                  }
                }
              }else{
                if (response.data.nonspecialBrandList[0]){
                  response.data.dataOne = response.data.nonspecialBrandList[0];
                }
                if (response.data.nonspecialBrandList[1]){
                  response.data.dataTwo = response.data.nonspecialBrandList[1];
                }
                if (response.data.nonspecialBrandList[2]){
                  response.data.dataThree = response.data.nonspecialBrandList[2];
                }
              }
              this.$nextTick(() => {
                this.$set(this,'dialogData',response.data);
                this.$set(this,'dialogType',true);
                this.$set(this,'dialogShadeType',false);
              })
            })
            break
          default:
            break
        }
      },
      //电子信息牌导出关闭按钮
      dialogOff(){
        this.$set(this,'dialogType',false);
        this.$set(this,'dialogData',{});
      },
      downloadImg(){
        if(!this.dialogShadeType){
          this.$set(this,'dialogShadeType',true);
          this.$nextTick(() => {
            this.createImage();
          })
        }
      },
      //下载电子信息牌
      async createImage() {
        try {
          const canvas = await html2canvas(this.$refs.canvasImg) // 在这里，将需要转换成图片的部分作为参数传入html2canvas
          const image = canvas.toDataURL() // 将生成的canvas转换为DataURL格式
          console.log(image) // 可以将image自行存储
          this.$nextTick(() => {
            this.downloadQrCode(image);
          })
        } catch (e) {
          throw new Error(e)
        }
      },
      //下载BASE64图片
      downloadQrCode(image) {
        const blob = this.base64ToBlob(image, 'image/png')
        const url = URL.createObjectURL(blob)

        const link = document.createElement('a')
        link.href = url
        link.download = this.dialogData.subjectName+' - '+this.dialogData.room
        document.body.appendChild(link)
        link.click()
        // 清理
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
        this.$nextTick(() => {
          this.msgSuccess('下载成功')
          this.$set(this,'dialogType',false);
          this.$set(this,'dialogData',{});
        })
      },
      base64ToBlob(base64Str, contentType, sliceSize) {
        contentType = contentType || ''
        sliceSize = sliceSize || 512

        const byteCharacters = atob(base64Str.split(',')[1])
        const byteArrays = []

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          const slice = byteCharacters.slice(offset, offset + sliceSize)

          const byteNumbers = new Array(slice.length)
          for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i)
          }

          const byteArray = new Uint8Array(byteNumbers)
          byteArrays.push(byteArray)
        }

        const blob = new Blob(byteArrays, { type: contentType })
        return blob
      },
      //获取实验室详情 type:1.详情 2.编辑
      getSubInfo(row,type){
        laboratorySubRelInfoGetDetailInfo({ infoId: row.infoId }).then(response => {
          let classifyList = [];
          for(let i=0;i<response.data.labInfoBrandModels.length;i++){
            if(response.data.labInfoBrandModels[i].privateList.length>0 && (response.data.labInfoBrandModels[i].brandType==1||response.data.labInfoBrandModels[i].brandType==2)){
              classifyList.push(response.data.labInfoBrandModels[i]);
            }
          }
          response.data.classifyList = classifyList;
          if(response.data.safeUserList[0]){
            response.data.safeUserId = [];
            response.data.safeUserList.forEach((item)=>{
              response.data.safeUserId.push(item.safeUserId);
            })
          }
          this.$set(this, 'subjectData', response.data)
          if(type == 1){
            //详情
            this.$set(this, 'pageType', 6)
          }else if(type == 2){
            //编辑
            this.$set(this, 'pageType', 2)
          }
        })
      },
      //保存当前排序
      liveSort(row) {
        let obj = {
          orderNum: row.orderNum
        }
        this.orderNum = JSON.parse(JSON.stringify(obj))
      },
      //编辑排序
      editSort(row) {
        let self = this
        if (row.orderNum != this.orderNum.orderNum) {
          self.$confirm('是否确认修改排序?', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            let obj = {
              infoId: row.infoId,
              orderNum: row.orderNum
            }
            laboratorySubRelInfoUpdateBySort(obj).then(response => {
              self.msgSuccess('修改成功')
              self.getList()
            })
          }).then(() => {
          }).catch(() => {
            let obj = JSON.parse(JSON.stringify(self.orderNum))
            row.orderNum = obj.orderNum
          })
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams,'page',1);
        this.$set(this,'codeList','');
        this.$refs['table-box'].clearSelection();
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          searchValue: '',
          deptId: '',
          buildId: '',
          typeId: '',
          levelId: ''
        })
        this.$set(this,'codeList','');
        this.$refs['table-box'].clearSelection();
        this.getList()
      },
      //选中实验室
      handleCurrentChange(val) {
        this.$refs.indexRightPage.initialize(val);
      },
      /** 查询实验室列表 */
      getList() {
        laboratorySubRelInfoList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
          if (response.data.records[0]) {
            this.$refs['table-box'].setCurrentRow(response.data.records[0])
          }
        })
      },
      /** 查询学院列表 */
      getDeptDropList() {
        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
          this.$set(this, 'deptOptions', response.data)
        })
      },
      //查询楼栋楼层
      systemBuildingGetTreeList(){
        systemBuildingGetTreeList({}).then(response => {
          let newList = [];
          if (response.data[0]) {
            let list = this.forBuildFloor(response.data);
            for(let i=0;i<list.length;i++){
              if(list[i].buildFloorVoList){
                for(let o=0;o<list[i].buildFloorVoList.length;o++){
                  if(list[i].buildFloorVoList[o].buildFloorVoList){
                    newList.push(list[i].buildFloorVoList[o])
                  }
                }
              }
            }
          }
          this.$set(this, 'buildOptions', newList)
        })
      },
      //处理楼栋楼层数据
      forBuildFloor(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].buildFloorVoList){
            if(list[i].buildFloorVoList[0]){
              list[i].buildFloorVoList = self.forBuildFloor(list[i].buildFloorVoList);
            }else{
              delete list[i].buildFloorVoList;
            }
          }else{
            delete list[i].buildFloorVoList;
          }
        }
        return list
      },
      //查询安全分级
      laboratoryClassLevelGetList() {
        laboratoryClassLevelGetList({}).then(response => {
          this.$set(this, 'levelList', response.data)
        })
      },
      //查询安全分类
      laboratoryClassTypeGetList() {
        laboratoryClassTypeGetList({}).then(response => {
          this.$set(this, 'typeList', response.data)
        })
      },
      //****************************************导入功能**************************************
      // 多选框选中数据
      handleSelectionChange(selection) {
        let self = this;
        if(selection[40]){
          this.$refs['table-box'].clearSelection();
          this.$nextTick(()=>{
            let ids = [];
            for(let i=0;i<selection.length;i++){
              if(i<40){
                ids.push(selection[i]);
                self.$refs['table-box'].toggleRowSelection(selection[i],true);
              }
            }
            self.$set(self,'codeList',ids);
          })
          this.msgError('最多勾选40条')
        }else{
          this.$set(this,'codeList',selection.map(item => item));
        }
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.subId
      },
    },
  }
</script>

<style scoped lang="scss">
  .subject {
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    margin:0;
    .subject-page {
      flex:1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      .left-subject-list {
        flex: 1;
        width: 1143px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
        border-radius: 10px 10px 10px 10px;
        margin: 5px 7px 20px 10px;
        .page-content-box {
          .table-box{
            ::v-deep .el-input--medium .el-input__inner {
              height: 26px;
              line-height: 26px;
              width: 55px;
              text-align: center;
              padding: 0 10px;
            }
          }
        }
      }
    }
    ::v-deep .el-table__row {
      td:nth-child(1) {
        padding: 0;
      }
    }
    ::v-deep .el-table__row{
      cursor: pointer;
    }
  }
</style>
<style lang="scss">
  .subject-dialog{
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      height:839px;
      position: relative;
      padding:0;
      margin:0;
      overflow: hidden;
      .subject-dialog-button-box{
        position: absolute;
        right:67px;
        top:50px;
        display: flex;
        p{
          cursor: pointer;
          width: 70px;
          height: 30px;
          font-size:14px;
          text-align: center;
          line-height:30px;
        }
        p:nth-child(1){
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #E0E0E0;
          margin-right:9px;
        }
        p:nth-child(2){
          background: #0045AF;
          color: #fff;
          border-radius: 6px 6px 6px 6px;
        }
      }
    }
    #subject-dialog-print-box{
      width:1268px;
      height:739px;
      /*background-color: red;*/
      margin:98px 43px 0;
      overflow: hidden;
      .subject-dialog-print-big-box{
        z-index:5;
        width:1228px;
        height:699px;
        margin:20px;
        /*background-color: blue;*/
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .subject-dialog-print-top-box{
          flex:1;
          display: flex;
          overflow: hidden;
          .subject-dialog-print-top-left-box{
            flex:1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .subject-dialog-print-top-left-top-box{
              .subject-dialog-name-box{
                height:60px;
                display: flex;
                overflow: hidden;
                background-color: #0045AF;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                position: relative;
                .title-box-1{
                  position: absolute;
                  left:0;
                  top:-10px;
                  width:174px;
                  height:80px;
                  background-color: #fff;
                  border-top-right-radius: 100px;
                  border-bottom-right-radius: 100px;
                  overflow: hidden;
                  .title-box-2{
                    margin-top:10px;
                    width:170px;
                    height:60px;
                    border-radius: 100px;
                    overflow: hidden;
                    .title-box-3{
                      margin:3px;
                      width: 164px;
                      height: 54px;
                      background-color: #fff;
                      border-radius: 100px;
                      overflow: hidden;
                      p{
                        margin:3px;
                        width: 158px;
                        height: 48px;
                        line-height:48px;
                        text-align: center;
                        border-radius: 100px;
                        overflow: hidden;
                        font-size:20px;
                        color:#fff;
                      }
                    }
                  }
                }
                .title-p{
                  margin-left:204px;
                  line-height: 60px;
                  font-size:30px;
                  color:#fff;
                }
              }
              .subject-dialog-info-box{
                margin-top:12px;
                height: 159px;
                background: #F5F5F5;
                border-radius: 10px 10px 10px 10px;
                display: flex;
                overflow: hidden;
                .subject-dialog-info-left-box{
                  flex:1;
                  padding-top:9px;
                  p{
                    color:#333;
                    margin:7px 29px 11px 29px;
                    height:24px;
                    line-height:24px;
                    font-size:18px;
                    overflow: hidden;
                  }
                }
                .subject-dialog-info-right-box{
                  height:110px;
                  width:110px;
                  margin:24px 18px 0 0;
                  img{
                    display: block;
                    height:110px;
                    width:110px;
                  }
                }
              }
            }
            .subject-dialog-print-top-left-bottom-box{
              flex:1;
              display: flex;
              overflow: hidden;
              .subject-dialog-print-top-left-bottom-left-box{
                margin-top:17px;
                flex:1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .data-title{
                  height:60px;
                  line-height:60px;
                  color:#fff;
                  text-align: center;
                  font-size:24px;
                  border-top-left-radius: 10px;
                  border-top-right-radius: 10px;
                }
                .data-for-text{
                  flex:1;
                  border: 2px solid #E0E0E0;
                  border-top:none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  padding:12px 14px;
                  p{
                    font-size:12px;
                    color:#3D3D3D;
                    line-height:18px;
                  }
                }
                .data-for-img{
                  flex:1;
                  border: 2px solid #E0E0E0;
                  border-top:none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  img{
                    display: inline-block;
                    height:80px;
                    width:80px;
                    margin:10px 0 0 6px;
                  }
                }
              }
              .subject-dialog-print-top-left-bottom-right-box{
                margin-left:20px;
                margin-top:17px;
                flex:1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .data-title{
                  height:60px;
                  line-height:60px;
                  color:#fff;
                  text-align: center;
                  font-size:24px;
                  border-top-left-radius: 10px;
                  border-top-right-radius: 10px;
                }
                .data-for-text{
                  flex:1;
                  border: 2px solid #E0E0E0;
                  border-top:none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  padding:12px 14px;
                  p{
                    font-size:12px;
                    color:#3D3D3D;
                    line-height:18px;
                  }
                }
                .data-for-img{
                  flex:1;
                  border: 2px solid #E0E0E0;
                  border-top:none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  img{
                    display: inline-block;
                    height:80px;
                    width:80px;
                    margin:10px 0 0 6px;
                  }
                }
              }
            }
          }
          .subject-dialog-print-top-right-box{
            margin-left:20px;
            width:308px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .data-title{
              height:60px;
              line-height:60px;
              color:#fff;
              text-align: center;
              font-size:24px;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
            }
            .data-for-text{
              flex:1;
              border: 2px solid #E0E0E0;
              border-top:none;
              overflow: hidden;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
              padding:12px 14px;
              p{
                font-size:12px;
                color:#3D3D3D;
                line-height:18px;
              }
            }
            .data-for-img{
              flex:1;
              border: 2px solid #E0E0E0;
              border-top:none;
              overflow: hidden;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
              img{
                display: inline-block;
                height:80px;
                width:80px;
                margin:16px 0 0 16px;
              }
            }
          }
        }
        .subject-dialog-print-button-box{
          margin-top:20px;
          width: 1228px;
          height: 50px;
          border-radius: 10px 10px 10px 10px;
          padding:0 28px;
          overflow: hidden;
          span{
            font-size:18px;
            line-height:50px;
            margin-right:10px;
            color:#fff;
          }
        }
      }
    }
  }
</style>