<!--分级管控管理-->
<template>
  <div class="gradeManage">
    <div class="app-container" v-if="pageType == 1">
      <div class="page-container gradeManage-page">
        <div class="page-form-title-box">
          <el-form :model="queryParams" class="form-box" ref="queryForm"
                   :inline="true" style="width:100%;">
            <el-form-item label="" prop="searchValue">
              <el-input
                maxLength="30"
                v-model="queryParams.searchValue"
                placeholder="请输入名称"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="queryParams.deptId" placeholder="请选择学院" style="width: 200px">
                <el-option
                  v-for="dict in deptIdOptionList"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="typeId">
              <el-select v-model="queryParams.typeId" placeholder="请选择安全分类" style="width: 200px">
                <el-option
                  v-for="dict in typeOptionList"
                  :key="dict.typeId"
                  :label="dict.typeName"
                  :value="dict.typeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="levelId">
              <el-select v-model="queryParams.levelId" placeholder="请选择安全分级" style="width: 200px">
                <el-option
                  v-for="dict in levelOptionList"
                  :key="dict.levelId"
                  :label="dict.levelName"
                  :value="dict.levelId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 200px">
                <el-option
                  v-for="dict in statusOptionList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="moldId">
              <el-select v-model="queryParams.moldId" placeholder="请选择类型" style="width: 200px">
                <el-option
                  v-for="dict in moldIdOptionList"
                  :key="dict.moldId"
                  :label="dict.moldName"
                  :value="dict.moldId"
                />
              </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>
            <p class="page-add-common-style-button"
               style="float: right;"
               @click="clickPageType(2)"
               v-hasPermiRouter="['lab:gradeManage:add']"
            >新增</p>
          </el-form>
        </div>
        <div class="page-content-box">
          <el-table class="table-box" v-loading="loading" border :data="dataList">
            <!--<el-table-column type="selection" width="55" align="center" />-->
            <el-table-column label="管控名称" align="left" prop="name" show-overflow-tooltip/>
            <el-table-column label="学院" align="left" prop="deptName" width="149" show-overflow-tooltip/>
            <el-table-column label="实验室类型" align="left" prop="moldName" width="149">
              <template slot-scope="scope">{{scope.row.moldName?scope.row.moldName:'--'}}</template>
            </el-table-column>
            <el-table-column label="安全分类" align="left" prop="typeName" width="130">
              <template slot-scope="scope">{{scope.row.typeName?scope.row.typeName:'--'}}</template>
            </el-table-column>
            <el-table-column label="安全分级" align="left" prop="levelName" width="130">
              <template slot-scope="scope">{{scope.row.levelName?scope.row.levelName:'--'}}</template>
            </el-table-column>
            <el-table-column label="管控规则数" align="left" prop="ruleNum" width="130"/>
            <el-table-column label="状态" align="left" prop="status" width="149">
              <template slot-scope="scope">
                <span :class="scope.row.status == 1?'tableTypeColorA':(scope.row.status == 0?'tableTypeColorB':'')">{{scope.row.status == 1?'开启':(scope.row.status == 0?'关闭':'')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="编辑人" align="left" prop="createName" width="149"/>
            <el-table-column label="编辑时间" align="left" prop="createTime" width="179"/>
            <!--<el-table-column label="适配实验室数" align="left" prop="subNum" />-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px" v-if="tableButtonType">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="clickPageType(3,scope.row)"
                     v-hasPermiRouter="['lab:gradeManage:edit']"
                  >编辑</p>
                  <p class="table-button-p"
                     @click="handleDelete(scope.row)"
                     v-hasPermiRouter="['lab:gradeManage:del']"
                  >删除</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      v-show="total>0"
                      :total="total"
                      :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"
          />
        </div>
      </div>
    </div>
    <!-- 新增编辑 -->
    <add-page v-if="pageType == 2" :propsType="propsType" :propsId="propsId"></add-page>
  </div>
</template>

<script>
  import {
    getGradeManage,
    addGradeManage,
    updateGradeManage,
  } from "@/api/hierarchicalControl/indexDemo";
  import {
    laboratoryGradeManageDelete,
  } from "@/api/hierarchicalControl/index";
  import {
    systemDeptGetLoginUserByDeptList,
    laboratoryClassLevelGetList,
    laboratoryClassTypeGetList,
    laboratoryClassMoldGetList,
  } from '@/api/commonality/permission'
  import {
    laboratoryGradeManageList
  } from "@/api/hierarchicalControl/index";
  import addPage from "./addPage.vue"

  export default {
    name: "GradeManage",
    components: {
      addPage,
    },
    data() {
      return {
        tableButtonType:this.hasPermiDom(['lab:gradeManage:edit','lab:gradeManage:remove']),
        //页面状态
        pageType:1,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 分级管控管理表格数据
        dataList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize:20,
          searchValue: null,
          status:null,
          typeId:null,
          levelId:null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        // //分类数据
        typeList:[],
        // //分级数据
        levelList:[],
        propsType:false,
        propsId:{},
        //学院
        deptIdOptionList:[],
        //安全分类
        typeOptionList:[],
        //安全分级
        levelOptionList:[],
        //状态
        statusOptionList:[{label:"开启",value:"1"},{label:"关闭",value:"0"},],
        //类型
        moldIdOptionList:[],
        //高级搜索组件参数
        searchData:{
          buttonList:[
            {
              name:"新增",
              parameter:"add",
              type:"1", //按钮类型 1.按钮 2.导入 3.导出
              hasPermi:['lab:gradeManage:add'] // 权限字段
            },
          ],
          searchList:[
            {
              name:"关键字",//名称
              key:"searchValue",//键名 用于返回数据
              value:"",//内容
              placeholder:"请输入名称/学院",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"1",//类型 1.input 2.select 3.TimePicker
              universal:'10',//input 最大长度
            },
            {
              name:"学院",//名称
              key:"deptId",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择学院",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
            {
              name:"安全分类",//名称
              key:"typeId",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择安全分类",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
            {
              name:"安全分级",//名称
              key:"level",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择安全分级",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
            {
              name:"状态",//名称
              key:"status",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择状态",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[
                {label:"开启",value:"1"},{label:"关闭",value:"0"},
              ],//select列表数据
            },
            {
              name:"类型",//名称
              key:"moldId",//键名 用于返回数据
              value:"",//内容
              placeholder:"请选择类型",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],//select列表数据
            },
          ]

        }
      };
    },
    created() {

    },
    mounted(){
      this.laboratoryClassLevelGetList();
      this.laboratoryClassTypeGetList();
      this.systemDeptGetLoginUserByDeptList();
      this.laboratoryClassMoldGetList();
      this.getList();
    },
    methods: {
      //获取实验室类型
      laboratoryClassMoldGetList(){
        laboratoryClassMoldGetList({}).then(response => {
          this.$set(this,'moldIdOptionList',response.data);
        });
      },
      //获取学院
      systemDeptGetLoginUserByDeptList(){
        systemDeptGetLoginUserByDeptList({}).then(response => {
          this.$set(this,'deptIdOptionList',response.data);
        });
      },
      //查询安全分级
      laboratoryClassLevelGetList(){
        laboratoryClassLevelGetList({}).then(response=>{
          this.$set(this,'levelOptionList',response.data);
        })
      },
      //查询安全分类
      laboratoryClassTypeGetList(){
        laboratoryClassTypeGetList({}).then(response=>{
          this.$set(this,'typeOptionList',response.data);
        });
      },
      //页面切换
      clickPageType(type,row){
        if(this.pageType != type){
          if(type == 1){
            this.getList();
            this.pageType = 1;
          }else if(type == 2){
            this.pageType = 2;
            this.propsType = false;
          }else if(type == 3){
            this.pageType = 2;
            this.propsType = true;
            this.propsId = row.id;
          }
        }
      },
      /** 查询分级管控管理列表 */
      getList() {
        this.$set(this,'loading',true);
        laboratoryGradeManageList(this.queryParams).then( response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
          this.$set(this,'loading',false);
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          deptName: null,
          userId: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          level: null,
          typeId: null,
          subIds: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          searchValue:'',
          deptId:null,
          typeId:null,
          levelId:null,
          status:null,
          moldId:null,
        })
        this.handleQuery();
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.laboratoryGradeManageDelete(row);
        }).then(() => {
        }).catch(() => {});
      },
      laboratoryGradeManageDelete(row){
        laboratoryGradeManageDelete({id:row.id}).then( response => {
          this.getList();
          this.msgSuccess("删除成功");
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .gradeManage{
    flex:1;
    display: flex;
    overflow: hidden;
    .gradeManage-page{
      .button-box{
        margin:0 auto;
        width:190px;
        display: flex;
      }
      .tableTypeColorA{
        color:#2AA408;
      }
      .tableTypeColorB{
        color:#FF3131;
      }
    }
  }
</style>
