FE-V2-PC/src/views/safetyCheck/checkItemLibrary/index.vue

<!--检查项目库-->
<template>
  <div class="app-container checkItemLibrary">
    <div class="title-box">
      <el-form class="form-box" :model="queryParams" ref="examineForm" :inline="true" label-width="80px">
        <el-form-item label="关键字" prop="name">
          <el-input
            maxlength="10"
            v-model="queryParams.searchValue"
            placeholder="预案名称/创建人"
            clearable
            size="small"/>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="onSearch">查询</p>
          <p class="reset-button-one" @click="resetForm">重置</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <p class="inquire-button-one" style="width:80px;" @click="addDialogOpen(1)">+ 添加</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <p class="add-button-two-90" style="width:100px;" @click="allDel">批量删除</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-dropdown @command="exportButton">
            <div class="form-dropdown-box">
              <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_sc.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="float: right;">
          <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>
    </div>
    <div class="content-box">
      <el-table border
                :data="tableData"
                ref="multipleTable" :row-key="getRowKeys"
                default-expand-all
                :select-on-indeterminate="false"
                @select="select"
                @select-all="selectAll"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="序号" prop="code" width="140"/>
        <el-table-column label="检查项目" prop="name"/>
        <el-table-column label="检查要点" prop="mainPoint" width="700"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p" v-if="scope.row.level != 3" @click="addDialogOpen(2,scope.row)">新增</p>
              <p class="table-button-p" @click="addDialogOpen(3,scope.row)">编辑</p>
              <p class="table-button-p" @click="delItem(scope.row)">删除</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--导入窗口-->
    <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">
          <el-checkbox v-model="upImportData.upDate">更新替换已存在序号的数据</el-checkbox>
        </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">
            <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>
    <!--添加窗口-->
    <el-dialog :title="addDialogTitle" :visible.sync="addDialogType" v-if="addDialogType" @close="addDialogOff" width="780px" append-to-body class="checkItemLibrary-dialog-box">
      <el-form ref="addDialogForm" :model="addDialogForm" :rules="rules" label-width="120px">
        <el-form-item label="上级指标" prop="parentId">
          <el-cascader
            style="width:548px;"
            v-model="addDialogForm.parentId"
            :options="cascaderData"
            :props="{ checkStrictly: true, value: 'id', label: 'labelName',emitPath:false }"
            @change="cascaderCheck">
            <template slot-scope="{data}">
              <el-tooltip :content="data.labelName" v-if="data.labelName.length>22">
                <p style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
              </el-tooltip>
              <p v-else style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="添加序号" prop="code">
          <el-input v-model="addDialogForm.code" placeholder="未选择指标" maxLength="6" disabled style="width:548px;"/>
        </el-form-item>
        <el-form-item label="检查项目" prop="name">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 5}"
            placeholder="请输入检查项目内容"
            v-model="addDialogForm.name"
            maxlength="100"
            resize="none"
            show-word-limit
            style="width:548px;">
          </el-input>
        </el-form-item>
        <el-form-item label="检查要点" prop="mainPoint" v-if="addDialogLevel>1">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 8}"
            placeholder="请输入检查检查要点："
            v-model="addDialogForm.mainPoint"
            maxlength="300"
            resize="none"
            show-word-limit
            style="width:548px;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="addDialogOff">取消</p>
        <p class="dialog-footer-button-primary" @click="upDataButton">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { checkOptionList,checkOptionAdd,checkOptionUpdate,checkOptionDelete,checkOptionBatchDelete } from '@/api/safetyCheck/index'
  import { getToken } from "@/utils/auth";
  export default {
    name: 'index',
    data(){
      return{
        uploadImgUrl: window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/system/user/teacher/importData", // 上传地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 遮罩层
        loading: false,
        queryParams:{
          searchValue:"",
        },
        //导入弹层开关
        importOpen:false,
        //导入数据
        upImportData:{
          sysUserEnable:true,
          upDate:false,
        },
        getImportData:{
          downFile:false,
          successNum:0,
          failureNum:0,
          textName:"",
        },
        // 检查项选项表格数据
        tableData: [],
        cascaderData:[],
        cascaderDataPrimitive:[],
        total:0,
        addDialogType:false,
        addDialogTitle:null,
        addDialogLevel:0,
        addDialogForm:{
          parentId:"",
          code:"",
          name:"",
          mainPoint:"",
        },
        // 表单校验
        rules: {
          parentId: [
            { required: true, message: "请选择上级指标", trigger: "change" },
            { required: true, message: "请选择上级指标", validator: this.spaceJudgment, trigger: "change" },
          ],
          name: [
            { required: true, message: "请输入检查项目内容", trigger: "change" },
            { required: true, message: "请输入检查项目内容", validator: this.spaceJudgment, trigger: "change" },
          ],
        },
      }
    },
    created(){

    },
    mounted(){
      this.getList();
    },
    methods:{
      //确定按钮
      upDataButton(){
        this.$refs["addDialogForm"].validate(valid => {
          if (valid) {
            if(this.addDialogForm.id){
              //编辑
              let obj = JSON.parse(JSON.stringify(this.addDialogForm))
              obj.level = this.addDialogLevel+1;
              obj.mainPoint = this.addDialogLevel>1?obj.mainPoint:'';
              checkOptionUpdate(obj).then( response => {
                this.msgSuccess(response.msg)
                this.addDialogOff();
                this.getList();
              })
            }else{
              //新增
              let obj = JSON.parse(JSON.stringify(this.addDialogForm))
              obj.level = this.addDialogLevel+1;
              checkOptionAdd(obj).then( response => {
                this.msgSuccess(response.msg)
                this.addDialogOff();
                this.getList();
              })
            }
          }
        })
      },
      //添加页面开启
      addDialogOpen(type,row){
        if(type == 1){
          //新增
          this.$set(this,'addDialogTitle','添加检查项目');
          this.$set(this,'addDialogLevel',0);
          this.$set(this,'addDialogForm',{
            parentId:"",
            code:"",
            name:"",
            mainPoint:"",
          });
          this.$set(this,'addDialogType',true);
        }else if(type == 2){
          //列表新增
          this.$set(this,'addDialogTitle','添加检查项目');
          let obj = this.cascaderCheckData(row.id,this.cascaderDataPrimitive);
          this.$set(this,'addDialogLevel',obj.level);
          this.$set(this,'addDialogForm',{
            parentId:row.id,
            code:obj.key,
            name:"",
            mainPoint:"",
          });
          this.$set(this,'addDialogType',true);
        }else if(type == 3){
          //编辑
          this.$set(this,'addDialogTitle','编辑检查项目');
          this.$set(this,'addDialogLevel',row.level-1);
          this.$set(this,'addDialogForm',{
            id:row.id,
            parentId:row.parentId,
            code:row.code,
            name:row.name,
            mainPoint:row.mainPoint,
          });
          this.$set(this,'addDialogType',true);
        }
      },
      //添加页面关闭
      addDialogOff(){
        this.$set(this,'addDialogType',false);
      },
      //联级选中
      cascaderCheck(val){
        let obj = this.cascaderCheckData(val,this.cascaderDataPrimitive);
        this.$set(this.addDialogForm,'code',obj.key);
        this.$set(this,'addDialogLevel',obj.level);
      },
      cascaderCheckData(val,list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].id == val){
            let obj = {
              parentId:list[i].id,
              parentKey:list[i].code,
              level:list[i].level,
              key:'',
            }
            if(list[i].children){
              if(list[i].children[0]){
                let minList = list[i].children[list[i].children.length-1].code.split('.')
                obj.key = list[i].code ? list[i].code + '.' + ((parseInt(minList[minList.length-1]))+1) : (parseInt(minList[minList.length-1]))+1
              }else{
                obj.key = list[i].code ? list[i].code+'.1':'1'
              }
            }else{
              obj.key = list[i].code ? list[i].code+'.1':'1'
            }
            return obj
          }else{
            if (list[i].level<3){
              if(list[i].children){
                if(list[i].children[0]){
                  let obj = self.cascaderCheckData(val,list[i].children);
                  if(obj){
                    return obj
                  }
                }
              }
            }
          }
        }
      },
      //删除
      delItem(row){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          checkOptionDelete(row.id).then( response => {
            self.msgSuccess(response.msg)
            self.getList();
          })
        }).then(() => {
        }).catch(() => {});
      },
      //批量删除
      allDel(){
        let self = this;
        if(!this.$refs.multipleTable.selection[0]){
          this.msgError('请勾选数据')
          return
        }
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          let list = self.$refs.multipleTable.selection;
          let ids = [];
          for(let i=0;i<list.length;i++){
            ids.push(list[i].id)
          }
          checkOptionBatchDelete(ids+'').then( response => {
            self.msgSuccess(response.msg);
            self.getList();
          })
        }).then(() => {
        }).catch(() => {});
      },
      /** 查询检查项选项列表 */
      getList() {
        this.loading = true;
        checkOptionList(this.queryParams).then( response => {
          this.$set(this,'tableData',JSON.parse(JSON.stringify(response.data)));
          let list = [{
            id:'0',
            name:"最上级",
            code:false,
            level:0,
            children:JSON.parse(JSON.stringify(response.data)),
          }]
          this.$set(this,'cascaderData',list);
          this.$set(this,'cascaderDataPrimitive',JSON.parse(JSON.stringify(list)));
          this.getCascaderData(this.cascaderData);
          this.$set(this,'total',response.total);
          this.loading = false;
        });
      },
      //联级选择器数据处理
      getCascaderData(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
          if(list[i].level == 0 || list[i].level == 1){
            self.getCascaderData(list[i].children)
          }else{
            delete list[i].children
          }
        }
      },
      //查询
      onSearch() {
        this.getList();
      },
      //重置
      resetForm() {
        this.$set(this.queryParams,'searchValue',null);
        this.$set(this,'total',0);
        this.onSearch();
      },
      //****************************************导入功能**************************************
      handleAvatarSuccess(res, file) {
        if(res.code == 200){
          this.getImportData.downFile = res.data.downFile
          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') {
          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('/system/user/teacher/importTemplate', {}, `导入模板.xlsx`)
        }else if(item.command == 2){
          //  导入数据
          console.log('导入数据');
          this.importOpen = true;
        }
      },
      /** 当前时间 */
      getCurrentTime () {
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        const hh = new Date().getHours()
        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        return yy + '-' + mm + '-' + dd
      },
      /** 导出按钮操作 */
      exportButton(item) {
        let self = this;
        this.currentDate=this.getCurrentTime()

        if(item.command == 1){
          self.$confirm(`确认导出全部数据?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            self.download('/system/user/teacher/export/', {...self.queryParams}, '教职工信息-'+this.currentDate+'.xlsx')
          }).catch(() => {})
        }else if(item.command == 2){
          if(self.ids.length>0) {
            self.$confirm(`确认导出选中数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              let ids = self.ids.join(',');
              let obj = {
                ids :ids
              }
              self.download(`/system/user/teacher/export/`,obj, '教职工信息-'+this.currentDate+'.xlsx')
            }).catch(() => {})
          }else {
            Message({
              message: "请选择要导出的数据",
              type: 'error'
            });
          }
        }
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('/system/user/teacher/importTemplate', {}, `导入模板.xlsx`)
      },
      /*下载失败列表*/
      failureExcel(){
        this.download('/system/user/teacher/importErrorData', {}, `失败报表.xlsx`)
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
      // 单选
      select (selection, row) {
        if (selection.some(el => { return row.id === el.id })) {
          if (row.children) {
            this.setChildren(row.children, true)
          }
        } else {
          if (row.children) {
            this.setChildren(row.children, false)
          }
        }
      },
      // 全选
      selectAll (selection) {
        const isSelect = selection.some(el => {
          const tableDataIds = this.tableData.map(j => j.id)
          return tableDataIds.includes(el.id)
        })
        const isCancel = !this.tableData.every(el => {
          const selectIds = selection.map(j => j.id)
          return selectIds.includes(el.id)
        })
        if (isSelect) {
          selection.map(el => {
            if (el.children) {
              this.setChildren(el.children, true)
            }
          })
        }
        if (isCancel) {
          this.tableData.map(el => {
            if (el.children) {
              this.setChildren(el.children, false)
            }
          })
        }
      },
      setChildren (children, type) {
        children.map(j => {
          this.toggleSelection(j, type)
          if (j.children) {
            this.setChildren(j.children, type)
          }
        })
      },
      toggleSelection (row, select) {
        if (row) {
          this.$nextTick(() => {
            this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, select)
          })
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .checkItemLibrary{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .title-box{
      padding-top:20px;
      .form-box{
        border-bottom:1px solid #E0E0E0;
        .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;
          }
        }
      }
    }
    .content-box{
      flex:1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding:20px;
    }
  }
</style>
<style lang="scss">
  .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;
    }
  }
</style>