v3-lab-web/src/views/hierarchicalControl/gradeManage/index.vue

<!--分级管控管理-->
<template>
  <div class="app-container gradeManage">
    <div class="page-container gradeManage-page" v-if="pageType == 1">
      <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="level">
            <el-select v-model="queryParams.level" 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="state">
            <el-select v-model="queryParams.state" 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="['laboratory:gradeManage:add']"
          >新增</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange">
          <!--<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="updateBy" width="149"/>
          <el-table-column label="编辑时间" align="left" prop="updateTime" 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-hasPermiAnd="['laboratory:gradeManage:query','laboratory:gradeManage:edit']"
                >编辑</p>
                <p class="table-button-p"
                   @click="handleDelete(scope.row)"
                   v-hasPermi="['laboratory:gradeManage:remove']"
                >删除</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.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <!-- 新增编辑 -->
    <add-page v-if="pageType == 2" :propsType="propsType" :propsId="propsId"></add-page>
    <!-- 添加或修改分级管控管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="安全分级ID" prop="level">
          <el-input v-model="form.level" placeholder="请输入安全分级ID" />
        </el-form-item>
        <el-form-item label="安全分类ID" prop="typeId">
          <el-input v-model="form.typeId" placeholder="请输入安全分类ID" />
        </el-form-item>
        <el-form-item label="适配实验室多选逗号分隔" prop="subIds">
          <el-input v-model="form.subIds" placeholder="请输入适配实验室多选逗号分隔" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getGradeManage,
    delGradeManage, addGradeManage,
    updateGradeManage,
  } from "@/api/hierarchicalControl/indexDemo";
  import {
    getDeptDropList,
    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(['laboratory:gradeManage:query','laboratory:gradeManage:edit','laboratory:gradeManage:remove']),
        //页面状态
        pageType:1,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 分级管控管理表格数据
        dataList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
          searchValue: null,
          status:null,
          typeId:null,
          level: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:['laboratory: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.getDeptDropList();
      this.laboratoryClassMoldGetList();
      this.getList();
    },
    methods: {
      //获取实验室类型
      laboratoryClassMoldGetList(){
        laboratoryClassMoldGetList({}).then(response => {
          this.$set(this,'moldIdOptionList',response.data);
        });
      },
      //获取学院
      getDeptDropList(){
        getDeptDropList({level: 2, deptType: 1 }).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.loading = true;
        laboratoryGradeManageList(this.queryParams).then( response => {
          this.dataList =  response.rows;
          this.total =  response.total;
          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,'pageNum',1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          searchValue:'',
          deptId:null,
          typeId:null,
          level:null,
          status:null,
          moldId:null,
        })
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加分级管控管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getGradeManage(id).then( response => {
          this.form =  response.data;
          this.open = true;
          this.title = "修改分级管控管理";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateGradeManage(this.form).then( response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addGradeManage(this.form).then( response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delGradeManage(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
    }
  };
</script>

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