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

<!--设备检查配置-->
<template>
  <div class="app-container approval_handle">
    <div class="approval_handle-page" v-if="pageType == 1">
      <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true">
        <el-form-item label="类型:" prop="checkLevel">
          <el-select  v-model="queryParams.hazardType" placeholder="请选择检查项">
            <el-option
              v-for="item in dangerArr"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="name">
          <el-input
            v-model="queryParams.searchValue"
            placeholder="名称/型号"
            clearable
            maxLength="30"
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
        <el-form-item style="float: right;">
          <p class="inquire-button-one" style="width:120px;" @click="handleClick('','','add')">+ 新增检查内容</p>
        </el-form-item>
      </el-form>
      <el-table border v-loading="loading" :data="tableData">
        <el-table-column label="序号"  width="100" align="left"  type="index"/>
        <el-table-column label="类型" align="left" prop="dictLabel"/>
        <el-table-column label="名称" align="left" prop="anotherName"></el-table-column>
        <el-table-column label="型号" align="left" prop="anotherCode"></el-table-column>
        <el-table-column label="检查项目数" align="left" prop="checkNum"></el-table-column>
        <el-table-column label="编辑时间" align="left" prop="createTimeStr"></el-table-column>
        <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" @click="handleClick('',scope.row,'detail')">详情</p>
              <p class="table-button-p" @click="handleClick('',scope.row,'edit')">编辑</p>
              <p class="table-button-p" @click="handleClick('',scope.row,'delete')">删除</p>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
                  :total="total"
                  layout="total, prev, pager, next, sizes, jumper"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
      />
    </div>
    <!--添加窗口-->
    <el-dialog :title="addDialogTitle" :visible.sync="addDialogType" @close="addDialogOff" width="780px" append-to-body class="checkItemLibrary-dialog-box"
               :close-on-click-modal="false">
      <el-form ref="addDialogForm" :model="addDialogForm" :rules="rules" label-width="120px">
        <el-form-item label="检查内容:" prop="joinHazardReid">
          <el-select  v-model="addDialogForm.joinHazardReid" clearable placeholder="请选择检查项" :disabled="isDetail" style="width:548px;">
            <el-option
              v-for="item in materialTypeList"
              :key="item.id"
              :label="item.anotherName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="small_title">对应检查项目</div>
        <el-form-item label="检查类目" prop="joinCheckOpList" v-if="!isDetail">
          <el-cascader
            style="width:548px;"
            v-model="addDialogForm.joinCheckOpList"
            :options="cascaderData"
            :props="{ multiple: 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>
        <div style="height: 300px;overflow-y: auto">
          <el-form-item label="">
            <el-tree
              ref="tree"
              :data="cascaderTreeData"
              :props="defaultProps"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="cascaderCheckedData"
              >
            </el-tree>
          </el-form-item>
        </div>

      </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 { dangerList, gasApplyDetail, gasApplyList } from '@/api/gasManage3_0/gasManage'
import { getToken } from "@/utils/auth";
import {
  checkOptionAdd,
  checkOptionList,
  checkOptionUpdate,
  checkDeviceList,
  checkDeviceAdd,
  inspectContentList, checkDeviceDetail, checkDeviceEdit, checkDeviceDelete, checkOptionDelete
} from '@/api/safetyCheck'
import { delCertificate } from '@/api/exam/certificate'
import { delHxpChemicalInfo } from '@/api/medicUniversity-3_1'
export default {
  name: "Approval",
  components: {

  },
  data() {
    return {
      //页面状态
      pageType:1,
      loading:false,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        hazardType:'',
        searchValue:'',
      },
      total:0,
      tableData:[{}],
      dateRange:[],
      pageData2:{},
      addDialogTitle:'新增检查项',
      addDialogType:false,
      addDialogForm:{
        joinHazardReid:'',
        joinCheckOpList:[],
      },
      //检查项
      cascaderData:[],
      cascaderTreeData:[],
      cascaderDataPrimitive:[],
      dangerArr:[],//危险源类型
      materialTypeList:[],//检查内容
      // 表单校验
      rules: {
        joinCheckOpList: [
          { required: true, message: "请选择", trigger: "change" },
          { required: true, message: "请选择", validator: this.spaceJudgment, trigger: "change" },
        ],
        joinHazardReid: [
          { required: true, message: "请输入检查项目内容", trigger: "change" },
          { required: true, message: "请输入检查项目内容", validator: this.spaceJudgment, trigger: "change" },
        ],
      },

      defaultProps: {
        children: 'children',
        label: 'labelName'
      },
      cascaderCheckedData:[],//检查类目树回显
      isDetail:false,
    }

  },
  methods: {

    handleClick(index,row,doType){
      let _this=this;
      if(doType=='add'){//新增
        this.isDetail=false;
        this.$set(this,'addDialogType',true);
        this.$set(this,'addDialogTitle','新增检查项');
        this.$set(this,'addDialogForm',{
          joinHazardReid:'',
          joinCheckOpList:[],
        });
        this.inspectContentList()//检查内容
        this.$nextTick(function () {
          //Dom更新完毕
          this.$refs.tree.setCheckedKeys([]);
        });
      }else if(doType=='detail'){//详情
        this.isDetail=true;
        this.$set(this,'addDialogType',true);
        this.$set(this,'addDialogTitle','编辑检查项');
        this.getInfo(row.id)
        this.inspectContentList(row.id)//检查内容
        this.$nextTick(function () {
          //Dom更新完毕
          this.$refs.tree.setCheckedKeys([]);
        });
      }else if(doType=='edit'){//编辑
        this.isDetail=false;
        this.$set(this,'addDialogType',true);
        this.$set(this,'addDialogTitle','编辑检查项');
        this.getInfo(row.id)
        this.inspectContentList(row.id)//检查内容
        this.$nextTick(function () {
          //Dom更新完毕
          this.$refs.tree.setCheckedKeys([]);
        });

      }else if(doType=='delete'){//删除
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          checkDeviceDelete(row.id).then(response => {
            if(response.code == 200){
              this.getList();
              this.msgSuccess("删除成功");
            }
          });
        }).catch(() => {});
      }
    },
    //添加页面关闭
    addDialogOff(){
      this.$set(this,'addDialogType',false);
    },
    //联级选中
    cascaderCheck(val){

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.searchValue = "";
      this.queryParams.hazardType='',
        this.handleQuery();
    },
    /** 查询检查项选项列表 */
    checkOptionList() {
      this.loading = true;
      checkOptionList(this.queryParams).then( response => {
        let list=JSON.parse(JSON.stringify(response.data))
        this.$set(this,'cascaderData',list);
        this.$set(this,'cascaderTreeData',JSON.parse(JSON.stringify(list)));
        this.$set(this,'cascaderDataPrimitive',JSON.parse(JSON.stringify(list)));
        this.getCascaderData(this.cascaderData);
        this.getCascaderTreeData(this.cascaderTreeData);
        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 == 1 || list[i].level == 2 || list[i].level == 3){
          self.getCascaderData(list[i].children)
        }else{
          delete list[i].children
        }
      }
    },
    //树形选择器数据处理
    getCascaderTreeData(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
        list[i].disabled = true;
        if(list[i].level == 1 || list[i].level == 2 || list[i].level == 3){
          self.getCascaderTreeData(list[i].children)
        }else{
          delete list[i].children
        }
      }
    },
    //获取危险源类型
    dangerList(){
      let _this=this;
      dangerList().then( response => {
        let res=response.rows;
        _this.dangerArr=res;
      });
    },
    //检查内容
    inspectContentList(joinHazardReid){
      let _this=this;
      if(joinHazardReid){//编辑的时候
        inspectContentList({joinHazardReid:joinHazardReid}).then( response => {
          let res=response.data;
          _this.materialTypeList=res;
        });
      }else{//新增的时候
        inspectContentList().then( response => {
          let res=response.data;
          _this.materialTypeList=res;
        });
      }

    },
    //详情
    getInfo(id){
      let _this=this;
      checkDeviceDetail(({id:id})).then( response => {
        let res=response.data;
        if(response.code==200){
          let list=[];
          this.addDialogForm.joinHazardReOldid=res.hazardId;
          this.addDialogForm.joinHazardReid=res.hazardId;
          res.checkList.forEach(function(item) {
            list.push(item.joinCheckOpid)
          })
          this.addDialogForm.joinCheckOpList=list
          this.cascaderCheckedData=list
        }
      });
    },
    //列表
    getList(){
      let _this=this;
      checkDeviceList(_this.queryParams).then( response => {
        let res=response.data.records;
        _this.tableData=res;
        _this.total=response.data.total;
      });
    },
    //新增编辑
    upDataButton(){
      this.$refs["addDialogForm"].validate(valid => {
        if (valid) {
          if(this.addDialogForm.joinHazardReOldid){
            //编辑
            let obj={
              joinHazardReOldid:JSON.parse(JSON.stringify(this.addDialogForm)).joinHazardReOldid,
              joinHazardReid:JSON.parse(JSON.stringify(this.addDialogForm)).joinHazardReid,
              joinCheckOpList:JSON.parse(JSON.stringify(this.addDialogForm)).joinCheckOpList,
            }
            checkDeviceEdit(obj).then( response => {
              this.msgSuccess(response.msg)
              this.addDialogOff();
              this.getList();
              this.inspectContentList()
            })
          }else{
            //新增
            let obj={
              joinHazardReid:JSON.parse(JSON.stringify(this.addDialogForm)).joinHazardReid,
              joinCheckOpList:JSON.parse(JSON.stringify(this.addDialogForm)).joinCheckOpList,
            }
            checkDeviceAdd(obj).then( response => {
              this.msgSuccess(response.msg)
              this.addDialogOff();
              this.getList();
              this.inspectContentList()
            })
          }
        }
      })
    },
  },
  mounted() {
    this.checkOptionList();
    this.inspectContentList()
    this.dangerList()
    this.getList()
  }
};
</script>

<style scoped lang="scss">
.approval_handle {
  display: flex!important;
  flex-direction: column;
  .goods-category-cascader-stocking-page .el-cascader-menu:nth-of-type(1) .el-checkbox__input {
    display: none !important;
  }
  .approval_handle-page{
    flex:1;
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px 20px 20px!important;
    border-radius:10px;

    .button-box{
      width:200px;
      display: flex;
    }

  }

}
.el-dialog__body{
  padding: 20px 0!important;
}

.small_title{
  width: 100%;
  height: 40px;
  background: #F5F5F5;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #0045AF;
  line-height: 40px;
  padding-left: 50px;
  margin-bottom:20px;
}
</style>