FE-V2-PC/src/views/emergencyManagement/evacuation/sparseHardware/addPage.vue

<template>
    <div class="sparseHardwareAddPage">
      <div class="top-title-box">{{form.id?'编辑疏散设备':'新增疏散设备'}}</div>
      <el-form :model="form" ref="form" :rules="rules" label-width="100px" style="margin-top:20px;">
        <el-form-item label="设备名称" prop="name">
          <el-input
            style="width:400px;"
            v-model="form.name"
            placeholder="请输入设备名称"
            maxLength="50"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="form.type" clearable @change="typeChange" placeholder="请选择设备类型" style="width:400px;">
            <el-option
              v-for="dict in typeList"
              :key="dict.value"
              :label="dict.name"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="喇叭音量" prop="deviceVol" v-if="typeDisabled">
          <el-slider :min="0" :max="100" v-model="form.deviceVol" :step="1" style="width:400px;"></el-slider>
        </el-form-item>
        <el-form-item label="设备编号" prop="hardwareNum" >
          <el-input
            style="width:400px;"
            v-model="form.hardwareNum"
            placeholder="请输入设备编号"
            maxLength="40"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="远程端口" prop="port" >
          <el-input
            style="width:400px;"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="form.port"
            placeholder="请输入远程端口"
            maxLength="6"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="设备类别" prop="deviceType">
          <template>
            <el-radio v-model="form.deviceType" :label="1" @change="radioChange">楼层设备</el-radio>
            <el-radio v-model="form.deviceType" :label="2" @change="radioChange">实验室设备</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="楼栋" prop="buildId" v-if="form.deviceType == '1'">
          <el-select v-model="form.buildId" placeholder="请选择楼栋" @change="buildChange" style="width:400px;">
            <el-option
              v-for="dict in buildList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层" prop="floorId" v-if="form.deviceType == '1'">
          <el-select v-model="form.floorId" placeholder="请选择楼层" @change="floorChange" style="width:400px;">
            <el-option
              v-for="dict in floorList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室" prop="subjectId" v-if="form.deviceType == '2'">
          <el-select v-model="form.subjectId" placeholder="请选择实验室" @change="layoutChange">
            <el-option
              v-for="dict in subjectAddOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="bottom-button-box">
          <p class="reset-button-one" @click="backPage">返回</p>
          <p class="inquire-button-one" @click="upData">提交</p>
        </div>
      </el-form>
    </div>
</template>

<script>
  import { addSparseHardware, updateSparseHardware,getBuildsList } from "@/api/laboratory/sparseHardware";
  import { listFloorByBuildId } from "@/api/laboratory/building";
  import { subjectDictList } from "@/api/laboratory/group";
  import { selBuildOrFloorList } from "@/api/evacuation3_2/index";
  export default {
    name: 'addPage',
    props:{
      propsData:{},
    },
    data() {
      return {
        form:{
          name:"",
          type:"",
          deviceType:1,
          hardwareNum:"",
          port:"",
          buildId:"",
          floorId:"",
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: "请输入设备名称", trigger: "change" },
            { required: true, message: "请输入设备名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          type: [
            { required: true, message: "请选择设备类型", trigger: "change" }
          ],
          // deviceVol: [
          //   { required: true, message: "请设置喇叭音量", trigger: "change" }
          // ],
          hardwareNum: [
            { required: true, message: "请输入设备编号", trigger: "change" },
            { required: true, message: "请输入设备编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          port: [
            { required: true, message: "请输入远程端口", trigger: "change" },
            { required: true, message: "请输入远程端口", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deviceType: [
            { required: true, message: "请选择设备类型", trigger: "change" }
          ],
          buildId: [
            { required: true, message: "请选择楼栋", trigger: "change" }
          ],
          floorId: [
            { required: true, message: "请选择楼层", trigger: "change" }
          ],
          subjectId: [
            { required: true, message: "请选择实验室", trigger: "change" }
          ],
        },
        //设备类型
        typeList:[
          {name:"摄像头",value:1},{name:"喇叭",value:2},
        ],
        //楼栋数据
        buildList:[],
        //楼层数据
        floorList:[],
        //实验室数据
        subjectAddOptions:[],
        typeDisabled:false,
      }
    },
    created() {
      if(this.propsData){
        this.$set(this,'form',JSON.parse(JSON.stringify(this.propsData)));
        this.form.type = parseInt(this.form.type);
        if(this.form.type == 2){
          this.$set(this,'typeDisabled',true);
          this.$set(this.form,'deviceVol',parseInt(this.form.deviceVol));
        }
        if(this.form.deviceType == 1){
          this.form.buildId = parseInt(this.form.buildId);
          this.form.floorId = parseInt(this.form.floorId);
          selBuildOrFloorList({type:2}).then(response => {
            this.$set(this,'buildList', response.data)
            selBuildOrFloorList({type:3,parentId:this.form.buildId}).then(response => {
              this.$set(this,'floorList', response.data)
            })
          });
        }
        console.log("12")
      }else{
        console.log("32")
      }
    },
    mounted(){
      this.getDeptListTow();
      this.subjectDictList();
    },
    methods: {
      //设备状态切换
      typeChange(val){
        if(val == 1){
          this.$set(this,'typeDisabled',false);
        }else if(val == 2){
          this.$set(this.form,'deviceType',1);
          this.$set(this,'typeDisabled',true);
        }
      },
      radioChange(){
        if(this.form.buildId){
          selBuildOrFloorList({type:2}).then(response => {
            this.$set(this,'buildList', response.data)
            selBuildOrFloorList({type:3,parentId:this.form.buildId}).then(response => {
              this.$set(this,'floorList', response.data)
            })
          });
        }
      },
      //提交按钮
      upData(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.propsData){
              //编辑
              let obj = {
                id:this.form.id,
                name:this.form.name,
                type:this.form.type,
                hardwareNum:this.form.hardwareNum,
                port:this.form.port,
                deviceType:this.form.deviceType,
              };
              if(this.form.deviceType == '1'){
                obj.buildId = this.form.buildId;
                obj.floorId = this.form.floorId;
              }else if(this.form.deviceType == '2'){
                obj.subjectId = this.form.subjectId;
              }
              if(this.form.type == '2'){
                obj.deviceVol = this.form.deviceVol;
              }
              updateSparseHardware(obj).then( response => {
                this.msgSuccess("操作成功");
                this.$parent.pageTypeClick(1);
              });
            }else{
              //新增
              let obj = {
                name:this.form.name,
                type:this.form.type,
                hardwareNum:this.form.hardwareNum,
                port:this.form.port,
                deviceType:this.form.deviceType,
              };
              if(this.form.deviceType == '1'){
                obj.buildId = this.form.buildId;
                obj.floorId = this.form.floorId;
              }else if(this.form.deviceType == '2'){
                obj.subjectId = this.form.subjectId;
              }
              if(this.form.type == '2'){
                obj.deviceVol = this.form.deviceVol;
              }
              addSparseHardware(obj).then( response => {
                this.msgSuccess("操作成功");
                this.$parent.pageTypeClick(1);
              });
            }
          }
        })
      },
      /** 查询楼栋列表 */
      getDeptListTow() {
        selBuildOrFloorList({type:2}).then(response => {
          this.$set(this,'buildList', response.data)
        })
        // getBuildsList().then(response => {
        //   // this.deptOptionsTwo = response.data;
        //   this.$set(this,'buildList', response.data)
        // });
      },
      //选择楼栋
      buildChange(e){
        console.log("选择楼栋",e)
        selBuildOrFloorList({type:3,parentId:e}).then(response => {
            this.$set(this,'floorList', response.data)
            this.$set(this.form,'floorId', "")
        })
        //根据学院获取楼栋
        // listFloorByBuildId(this.form.buildId).then(response => {
        //   this.$set(this,'floorList', response.data)
        //   this.$set(this.form,'floorId', "")
        // });
      },
      //选择楼层
      floorChange(e){
        console.log("选择楼层",e)
      },
      //选择实验室
      layoutChange(e){
        console.log("实验室",e)
      },
      subjectDictList(){
        subjectDictList({}).then(response => {
          this.subjectAddOptions = response.data;
        });
      },
      //返回
      backPage(){
        this.$parent.pageTypeClick(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .sparseHardwareAddPage {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding:20px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    .top-title-box{
      line-height:60px;
      padding-bottom:20px;
      border-bottom:1px solid #dedede;
      color: #0045AF;
      font-size:18px;
      p{
        margin:0;
      }
    }
    .bottom-button-box{
      display: flex;
      margin-top:50px;
      p:nth-child(1){
        margin:0 20px 0 200px;
      }
    }
  }
</style>