FE-V2-PC/src/views/emergencyManagement/smartLoT/bluetoothGateway/index.vue

<!--蓝牙网关-->
<template>
  <div class="app-container bluetoothGateway">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="form-box">
      <el-form-item label="关键字" prop="searchValue">
        <el-input
          maxlength="10"
          v-model="queryParams.searchValue"
          placeholder="实验室"
          clearable
        />
      </el-form-item>
      <el-form-item label="学院" prop="deptId">
        <el-select v-model="queryParams.deptId" clearable placeholder="请选择学院">
          <el-option
            v-for="dict in deptOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="gatewayOnline">
        <el-select v-model="queryParams.gatewayOnline" clearable placeholder="请选择状态">
          <el-option label="离线" value="0" />
          <el-option label="在线" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item style="float: right;">
        <el-col :span="1.5">
          <p class="page-add-common-style-button"
             @click="tableButton(1)"
             v-hasPermi="['demo:demo:demo']"
          >+  新增蓝牙网关</p>
        </el-col>
      </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>
    <el-table v-loading="loading" border :data="dataList">
      <el-table-column label="名称" align="left" prop="gatewayName"/>
      <el-table-column label="网关" align="left" prop="gatewayMac" width="249" show-overflow-tooltip/>
      <el-table-column label="状态" align="left" prop="gatewayOnline" width="200" show-overflow-tooltip>
        <template slot-scope="scope">{{scope.row.gatewayOnline==0?'离线':'在线'}}</template>
      </el-table-column>
      <el-table-column label="学院" align="left" prop="deptName" width="300" show-overflow-tooltip/>
      <el-table-column label="实验室名称" align="left" prop="subName" width="350" show-overflow-tooltip/>
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="160" v-if="tableButtonType">
        <template slot-scope="scope">
          <div class="table-button-box">
            <p class="table-button-null"></p>
            <p class="table-button-p" @click="tableButton(2,scope.row)" v-hasPermiAnd="['demo:demo:demo','demo:demo:demo']">编辑</p>
            <p class="table-button-p" @click="tableButton(3,scope.row)" v-hasPermi="['demo:demo:demo']">删除</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"
                layout="total, prev, pager, next, sizes, jumper"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />

    <el-dialog :title="dialogTitle" :visible.sync="dialogType" v-if="dialogType"
               :close-on-click-modal="false" width="600px" append-to-body>
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="gatewayName">
          <el-input v-model="dialogForm.gatewayName" placeholder="请输入名称" maxLength="20" style="width:450px;"/>
        </el-form-item>
        <el-form-item label="网关" prop="gatewayMac">
          <el-input v-model="dialogForm.gatewayMac" placeholder="请输入网关" maxLength="20" style="width:450px;"/>
        </el-form-item>
        <el-form-item label="实验室" prop="subId">
          <el-select
            style="width:450px;"
            v-model="dialogForm.subId"
            filterable
            remote
            clearable
            reserve-keyword
            @focus="selectFocus"
            @change="selectChange"
            placeholder="请选择实验室"
            :remote-method="getSub"
            :loading="loading">
            <el-option
              v-for="item in laboratoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <p class="dialog-footer-null-p"></p>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        <p class="dialog-footer-null-p"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { airbottleBluetoothList, airbottleBluetoothInfo,
    airbottleBluetoothAdd, laboratoryBuildingPut,
    laboratoryBuildingDel } from '@/api/lanyadingwei/index'
  import {listDepartments} from "@/api/system/dept";
  import { subjectList } from '@/api/gasManage3_0/gasManage'
  export default {
    name: 'index',
    data(){
      return{
        tableButtonType:this.hasPermiDom(['demo:demo:demo','demo:demo:demo']),
        loading:false,
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
          gatewayOnline:"",
        },
        deptOptions:{},
        dataList:[],
        total:0,
        dialogTitle:"",
        dialogType:false,
        dialogLookType:false,
        dialogForm:{
          gatewayName:"",
          gatewayMac:"",
          subName:"",
          subId:"",
          deptId:"",
          deptName:"",
        },
        laboratoryOptions:[],
        // 表单校验
        rules: {
          gatewayName: [
            { required: true, message: "请输入名称", trigger: "change" },
            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          gatewayMac: [
            { required: true, message: "请输入网关", trigger: "change" },
            { required: true, message: "请输入网关", validator: this.spaceJudgment, trigger: "blur" }
          ],
          subId: [
            { required: true, message: "请选择实验室", trigger: "change" },
          ],
        },
      }
    },
    created(){

    },
    mounted(){
      this.listDepartments();
      this.getList();
    },
    methods:{
      cancel(){
        this.$set(this,'dialogType',false);
      },
      submit(){
        this.$refs["dialogForm"].validate((valid) => {
          if (valid) {
            if(!this.dialogForm.id){
              //新增
              airbottleBluetoothAdd(this.dialogForm).then(response => {
                this.msgSuccess(response.msg)
                this.getList();
                this.$set(this,'dialogType',false);
              });
            }else{
              //修改
              laboratoryBuildingPut(this.dialogForm).then(response => {
                this.msgSuccess(response.msg)
                this.getList();
                this.$set(this,'dialogType',false);
              });
            }
          }
        })
      },
      selectChange(val){
        let self = this;
        for(let i=0;i<self.laboratoryOptions.length;i++){
          if(val == self.laboratoryOptions[i].id){
            this.$set(this.dialogForm,'subName',self.laboratoryOptions[i].name);
            this.$set(this.dialogForm,'deptId',self.laboratoryOptions[i].deptId);
            this.$set(this.dialogForm,'deptName',self.laboratoryOptions[i].deptName);
          }
        }
      },
      selectFocus(){
        if(!this.laboratoryOptions[0]){
          this.getSub("");
        }
      },
      //懒加载实验室
      getSub(e){
        subjectList({name:e}).then(response => {
          this.$set(this,'laboratoryOptions',response.data);
        });
      },
      //学院
      listDepartments(){
        listDepartments({}).then(response => {
          this.$set(this, 'deptOptions', response.data)
        });
      },
      // 列表
      getList(){
        airbottleBluetoothList(this.queryParams).then(response => {
          this.$set(this, 'dataList', response.rows)
          this.$set(this, 'total', response.total)
        });
      },
      //表格按钮
      tableButton(type,row){
        let self = this;
        if (type == 1){
          this.$set(this,'dialogForm',{
            gatewayName:"",
            gatewayMac:"",
            subName:"",
            subId:"",
            deptId:"",
            deptName:"",
          });
          this.$set(this,'dialogType',true);
        } else if(type == 2){
          this.$set(this,'dialogForm',{
            id:row.id,
            gatewayName:row.gatewayName,
            gatewayMac:row.gatewayMac,
            subName:row.subName,
            subId:row.subId,
            deptId:row.deptId,
            deptName:row.deptName,
          });
          this.getSub(row.subName);
          this.$set(this,'dialogType',true);
        } else if(type == 3){
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            laboratoryBuildingDel(row.id).then(response => {
              self.msgSuccess(response.msg)
              self.getList();
            });
          }).then(() => {
          }).catch(() => {});
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 20;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          searchValue:"",
          deptId:"",
          gatewayOnline:"",
        });
        this.handleQuery();
      },
    }
  }
</script>
<style scoped lang="scss">
  .bluetoothGateway{
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px!important;

  }
</style>