v3-lab-web/src/views/safetyCheck/schoolInspection/inspectionGroup/index.vue

<!--校院巡查组-->
<template>
  <div class="app-container inspectionGroup">
    <div class="title-box">
      <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxLength="30"
            v-model="queryParams.searchValue"
            placeholder="巡查组名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="状态" prop="enable" label-width="60px">
          <el-select v-model="queryParams.enable" clearable placeholder="请选择状态" style="width: 150px">
            <el-option
              v-for="item in optionsTwo"
              :key="item.key"
              :label="item.label"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
        <el-form-item style="float: right;" v-hasPermi="['security:checkGroup:add']">
          <el-col :span="1.5">
            <p class="inquire-button-one"
               style="width:130px;"
               @click="addDialogOpen(1)"
            ><i class="el-icon-plus"></i>添加巡查组</p>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-box">
      <el-table  border :data="tableList" ref="multipleTable">
        <el-table-column label="序号"  width="60" align="center"  type="index"/>
        <el-table-column label="巡查组名称" align="center" prop="groupName" show-overflow-tooltip/>
        <el-table-column label="成员人数" align="center" prop="peopleNum" show-overflow-tooltip width="150"/>
        <el-table-column label="是否启用" align="center" prop="enable" show-overflow-tooltip width="185">
          <template slot-scope="scope">
            <div style="width:70px;margin-left:50px;">
              <el-switch
                @click.native="switchClick(scope.row)"
                class="switch"
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
                active-color="#0183FA"
                inactive-color="#E0E0E0"
                active-text="启用"
                inactive-text="停用"
                disabled
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作人" align="center" prop="deptName" show-overflow-tooltip width="150">
          <template slot-scope="scope">{{scope.row.updateName?scope.row.updateName:scope.row.createName}}</template>
        </el-table-column>
        <el-table-column label="操作时间" align="center" prop="updateTime" show-overflow-tooltip width="250">
          <template slot-scope="scope">{{scope.row.updateTime?scope.row.updateTime:scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="deptName" width="200" v-if="tableButtonType">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p" @click="addDialogOpen(3,scope.row)" v-hasPermi="['security:checkGroup:query']">详情</p>
              <p class="table-button-p" @click="addDialogOpen(2,scope.row)" v-hasPermiAnd="['security:checkGroup:query','security:checkGroup:edit']">编辑</p>
              <p class="table-button-p" @click="deleteObj(scope.row)" v-hasPermi="['security:checkGroup: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>
    <addDialog v-if="addDialogType" :addDialogData="addDialogData"></addDialog>
  </div>
</template>

<script>
  import addDialog from './addDialog.vue'
  import { checkGroupList,checkGroupDelete,checkGroupEnable } from '@/apiDemo/safetyCheck/index'
  export default {
    name: 'index',
    components: {
      addDialog,
    },
    data(){
      return{
        tableButtonType:this.hasPermiDom(['security:checkGroup:query','security:checkGroup:edit','security:checkGroup:remove']),
        addDialogType:false,
        addDialogData:{},
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          enable:"",
        },
        tableList:[],
        total:0,
        optionsOne:[{key:1,label:"校级"},{key:2,label:"院级"}],
        optionsTwo:[{key:1,label:"启用"},{key:0,label:"停用"}],
      }
    },
    created(){

    },
    mounted(){
      this.getList();
    },
    methods:{
      //弹窗开启
      addDialogOpen(type,data){
        if(type==1){
          this.$set(this,'addDialogData',{
            title:"新增巡查组",
            addType:true,
            lookInfoType:false,
          })
          this.$set(this,'addDialogType',true)
        }else if(type == 2){
          this.$set(this,'addDialogData',{
            title:"编辑巡查组",
            addType:false,
            lookInfoType:false,
            id:data.id
          })
          this.$set(this,'addDialogType',true)
        }else if(type == 3){
          this.$set(this,'addDialogData',{
            title:"巡查组详情",
            addType:false,
            lookInfoType:true,
            id:data.id
          })
          this.$set(this,'addDialogType',true)
        }else if(type == 5){
          this.getList();
          this.$set(this,'addDialogType',false)
        }else{
          this.$set(this,'addDialogType',false)
        }
      },
      // 开关
      switchClick(data){
        console.log('data',data);
        let self = this;
        this.$confirm('是否确认'+(data.enable==1?'停用':'启用')+'?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          let obj = {
            checkGroupId:data.id,
            enable:data.enable==1?0:1
          };
          checkGroupEnable(obj).then(response => {
            self.msgSuccess(response.msg)
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      },
      //获取数据列表
      getList(){
        checkGroupList(this.queryParams).then(response => {
          this.total = response.data.total;
          this.tableList = response.data.records;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams,'pageNum',1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          enable:"",
        });
        this.handleQuery();
      },
      //删除
      deleteObj(data){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          checkGroupDelete({id:data.id}).then(response => {
            self.msgSuccess(response.msg)
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      },
    }
  }
</script>

<style scoped lang="scss">
  .inspectionGroup {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    .title-box{
      padding-top:20px;
      border-bottom:1px solid #dedede;
    }
    .content-box{
      flex: 1;
      display: flex;
      flex-direction: column;
      padding:20px;
      overflow: hidden;
    }
  }
</style>