FE-V2-PC/src/views/emergencyManagement/electronicInformationBoard/index.vue

<template>
  <div class="app-container electronicInformationBoard">
    <el-form class="form-box" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="关键字" prop="searchValue" label-width="54px">
        <el-input
          maxLength="20"
          v-model="queryParams.searchValue"
          placeholder="设备名称/设备编号/实验室"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="部门" prop="type" label-width="56px">
        <el-select v-model="queryParams.deptId" 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="lightStatus">-->
      <!--<el-select v-model="queryParams.lightStatus" placeholder="请选择状态" clearable size="small" label-width="60px">-->
      <!--<el-option label="请选择字典生成" value="" />-->
      <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item>
        <p class="inquire-button-one" @click="handleQuery" style="margin:0 20px;">查询</p>
        <p class="reset-button-one" @click="resetQuery">重置</p>
      </el-form-item>
      <el-form-item
        style="float: right;">
        <p class="inquire-button-one"
           v-hasPermi="['laboratory:cardInfo:add']"
           @click="addButton(1)"
        >+ 新增</p>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" border :data="dataList" style="margin-bottom:10px;">
      <el-table-column label="设备名称" align="center" prop="cardName" show-overflow-tooltip/>
      <el-table-column label="设备编号" align="center" prop="cardNum" show-overflow-tooltip width="210"/>
      <el-table-column label="部门" align="center" prop="deptName" show-overflow-tooltip width="200"/>
      <el-table-column label="位置" align="center" prop="location" show-overflow-tooltip width="200"/>
      <el-table-column label="设备状态" align="center" prop="operate" show-overflow-tooltip width="150">
        <template slot-scope="scope">
          <span>{{scope.row.operate==2?'在线':'离线'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy" show-overflow-tooltip width="150"/>
      <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip width="230"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" v-if="tableButtonType">
        <template slot-scope="scope">
          <div class="table-button-box">
            <p class="table-button-null"></p>
            <p class="table-button-p" @click="addButton(2,scope.row)" v-hasPermi="['laboratory:cardInfo:edit']">编辑</p>
            <p class="table-button-p" @click="delButton(scope.row)" v-hasPermi="['laboratory:cardInfo: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"
    />
    <el-dialog :title="dialogTitle" :visible.sync="addDialogType" v-if="addDialogType"
               :close-on-click-modal="false"
               width="520px" append-to-body id="onDutyConfiguration-dialog-box">
      <el-form ref="form" :model="addForm" :rules="rules" label-width="100px">
        <el-form-item label="设备编号：" prop="cardNum">
          <el-input v-model="addForm.cardNum" placeholder="请输入设备编号" maxlength="50" style="width:360px;"/>
        </el-form-item>
        <el-form-item label="实验室：" prop="subjectId">
          <el-select
            style="width:360px;"
            v-model="addForm.subjectId"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="输入关键字检索选择"
            :remote-method="getSelectList"
            @change="selectChange"
            :loading="loading">
            <el-option
              v-for="item in selectList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安装位置：" prop="location">
          <el-input v-model="addForm.location" placeholder="请输入安装位置" maxlength="10" style="width:360px;"/>
        </el-form-item>
        <el-form-item label="关联门禁：" prop="isStart">
          <el-radio-group v-model="addForm.isStart" style="margin-top:4px;">
            <el-radio :label="1" style="margin-right:30px;">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center;">
        <el-button @click="cancel" style="height:30px;line-height:30px;">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { XxpCardInfoList,XxpCardInfo,XxpCardInfoPut,XxpCardInfoDelete,getSubList } from "@/api/laboratory/electronicInformationBoard";
  // import { filterDept,getSubList } from "@/api/medicUniversity-3_1/index";
  import {listDepartments} from "@/api/system/dept";
  import {subjectList } from "@/api/laboratory/approval";
  export default {
    name: 'index',
    data(){
      return{
        tableButtonType:this.hasPermiDom(['laboratory:cardInfo:edit','laboratory:cardInfo:remove']),
        showSearch: true,
        loading: false,
        deptOptions:[],
        queryParams: {
          pageNum: 1,
          pageSize:20,
          searchValue:"",
          deptId:"",
        },
        dataList: [],
        total: 0,
        addDialogType:false,
        dialogType:null,
        dialogTitle:"",
        addForm:{},
        rules:{
          cardNum: [
            { required: true, message: "请输入设备编号", trigger: "change" },
            { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "change" },
          ],
          subjectId: [
            { required: true, message: "请选择实验室", trigger: "change" },
            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "change" },
          ],
          // location: [
          //   { required: true, message: "请输入安装位置", trigger: "change" },
          //   { required: true, message: "请输入安装位置", validator: this.spaceJudgment, trigger: "change" },
          // ],
          // isStart: [
          //   { required: true, message: "请选择是否关联门禁", trigger: "change" },
          //   { required: true, message: "请选择是否关联门禁", validator: this.spaceJudgment, trigger: "change" },
          // ],
        },
        selectList:[],
        selectListData:[],
      }
    },
    created(){
      this.getDeptListTow();
      // this.getSubList();
      // this.filterDept();
      this.getList();
    },
    mounted(){

    },
    methods:{
      delButton(row){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          XxpCardInfoDelete(row.id).then(response => {
            self.msgSuccess(response.msg);
            self.getList();
          });
        }).then(() => {
        }).catch(() => {});
      },
      //新增编辑按钮
      addButton(type,row){
        if(type == 1){
          this.$set(this,'dialogType','1');
          this.$set(this,'dialogTitle','新增电子信息牌');
          this.$set(this,'addForm',{
            cardNum:"",
            subjectId:"",
            subjectName:"",
            deptId:"",
            deptName:"",
            location:"",
            isStart:1,
          });
          this.$set(this,'selectList',[]);
        }else if(type == 2){
          this.$set(this,'dialogType','2');
          this.$set(this,'dialogTitle','编辑电子信息牌');
          this.$set(this,'addForm',{
            id:row.id,
            cardNum:row.cardNum,
            subjectId:row.subjectId,
            subjectName:row.subjectName,
            deptId:row.deptId,
            deptName:row.deptName,
            location:row.location,
            isStart:row.isStart,
          });
          this.getSelectList(row.subjectName);
        }
        this.$set(this,'addDialogType',true);
      },
      getSelectList(val){
        if(val){
          let obj = {}
          if(this.dialogType == 1){
            obj.name = val
          }else if(this.dialogType == 2){
            obj.name = val
            obj.id = this.addForm.subjectId
          }
          subjectList(obj).then(response => {
            this.$set(this,'selectList',response.data);
          })
        }else{
          this.$set(this,'selectList',[]);
        }
      },
      //实验室选中
      selectChange(id){
        let self = this;
        for(let i=0;i<self.selectList.length;i++){
          if(id == self.selectList[i].id){
            this.$set(this.addForm,'subjectName',self.selectList[i].name);
            this.$set(this.addForm,'deptId',self.selectList[i].deptId);
            this.$set(this.addForm,'deptName',self.selectList[i].deptName);
          }
        }
      },
      submitForm(){
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if(this.addForm.id){
              //编辑
              XxpCardInfoPut(this.addForm).then(response => {
                //当前列表
                this.msgSuccess(response.msg);
                this.getList();
                this.addDialogType = false;
              });
            }else{
              //新增
              XxpCardInfo(this.addForm).then(response => {
                //当前列表
                this.msgSuccess(response.msg);
                this.getList();
                this.addDialogType = false;
              });
            }
          }
        })
      },
      cancel(){
        this.addDialogType = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this.queryParams,'searchValue','')
        this.$set(this.queryParams,'deptId','')
        this.handleQuery();
      },
      getList() {
        this.loading = true;
        XxpCardInfoList(this.queryParams).then( response => {
          this.dataList =  response.rows;
          this.total =  response.total;
          this.loading = false;
        });
      },
      /** 查询学院列表 */
      getDeptListTow() {
        listDepartments().then(response => {
          // this.deptOptionsTwo = response.data;
          this.$set(this, 'deptOptions', response.data)
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .electronicInformationBoard{
    display: flex;
    flex-direction: column;
    font-weight:500;
    padding:20px 20px 10px!important;
    *{
      margin:0;
      padding:0;
    }
    .form-box{
      height:60px;
    }
  }
</style>