frontend/src/views/management/monitoringEquipment/photographicDevice/components/addPhotoDialog.vue

<template>
  <el-dialog
    class="addPhotoDialog"
    :title="photoDialogTitle"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="576px"
    @close="handleclose"
  >
    <el-form
      label-position="left"
      label-width="98px"
      ref="formgrapInfo"
      :rules="rules"
      :model="formInfo"
    >
      <el-form-item label="线路" prop="lineid">
        <el-select
          v-model="formInfo.lineid"
          placeholder="请选择"
          @change="getTowerchange"
        >
          <el-option
            v-for="item in lineOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="杆塔：" prop="towerid">
        <el-select v-model="formInfo.towerid" placeholder="请选择">
          <el-option
            v-for="item in toweridOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装置ID：" prop="cmdid">
        <el-input v-model="formInfo.cmdid" auto-complete="on"></el-input>
      </el-form-item>
      <!-- <el-form-item label="显示名：" prop="displayName" required>
        <el-input v-model="formInfo.displayName" auto-complete="on"></el-input>
      </el-form-item> -->

      <el-form-item label="装置名称：" prop="equipName">
        <el-input v-model="formInfo.equipName" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="SIM卡：" prop="sim">
        <el-input v-model="formInfo.sim" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="通道(可多选)：" prop="channelVal">
        <el-checkbox-group
          class="channelBox"
          v-model="formInfo.channelVal"
          v-if="channelOptions.length > 0"
        >
          <el-checkbox
            border
            v-for="item in channelOptions"
            :key="item.id"
            :label="item.id"
            :value="item.channelname"
            >{{ item.channelname }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  addTerminalJoggle,
  updateTerminalJoggle,
  getAllChannelListJoggle,
  getSearchInfo,
} from "@/utils/api/index";
export default {
  props: {
    photoDialog: {
      type: Boolean,
    },
    photoDialogTitle: {
      type: String,
      default: "新增",
    },
  },

  data() {
    let validCmid = (rule, value, callback) => {
      let reg = /^[0-9A-Za-z]{17}$/;
      if (!reg.test(value)) {
        callback(new Error("装置id为17位编码"));
      } else {
        callback();
      }
    };
    return {
      isShow: false,
      formInfo: {
        // lineid: "",
        // towerid: "",
        // equipName: "",
        // cmdid: "",
        // sim: "",
        // displayName: "",
        channelVal: [],
      },
      channelOptions: [], //所有通道列表
      lineOptions: [], //线路
      toweridOptions: [], //杆塔
      rules: {
        cmdid: [
          { required: true, message: "请输入装置ID", trigger: "blur" },
          { validator: validCmid, trigger: "blur" },
        ],
      },
      photoDialogtype: 0, //1 线路change时，修改杆塔数据
    };
  },
  mounted() {},
  created() {},
  watch: {},
  methods: {
    //判断
    getdataform(val) {
      console.log(val);
      this.getLine();
      this.getChannel();
      if (val == null) {
        return (this.formInfo = {
          channelVal: [],
        });
      }
      this.formInfo = val;
      let channelnr = [];
      val.list.forEach((item) => {
        channelnr.push(item.id);
      });
      this.$set(this.formInfo, "channelVal", channelnr);
    },
    // 保存确定操作
    submitForm() {
      this.$refs.formgrapInfo.validate((valid) => {
        if (valid) {
          if (this.photoDialogTitle == "新增") {
            this.formInfo = {
              channelid: this.formInfo.channelVal,
              cmdid: this.formInfo.cmdid,
              lineid: this.formInfo.lineid,
              equipName: this.formInfo.equipName,
              sim: this.formInfo.sim,
              displayName: this.formInfo.cmdid,
              towerid: this.formInfo.towerid,
            };
            addTerminalJoggle(this.formInfo)
              .then((res) => {
                this.isShow = false;
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
                this.$parent.terminalList(); //刷新
              })
              .catch((err) => {
                this.$message({
                  showClose: true,
                  message: "添加失败",
                  type: "error",
                });
              });
          } else {
            this.formInfo = {
              channelid: this.formInfo.channelVal,
              cmdid: this.formInfo.cmdid,
              lineid: this.formInfo.lineid,
              equipName: this.formInfo.equipName,
              sim: this.formInfo.sim,
              displayName: this.formInfo.cmdid,
              towerid: this.formInfo.towerid,
              id: this.formInfo.id,
            };
            updateTerminalJoggle(this.formInfo)
              .then((res) => {
                this.isShow = false;
                this.$message.success("修改成功");
                this.$parent.terminalList();
              })
              .catch((err) => {
                this.$message.error("修改失败");
              });
          }
        } else {
          return false;
        }
      });
    },

    //获取所有线路
    getLine() {
      getSearchInfo({ type: 2 }).then((res) => {
        this.lineOptions = res.data.list;
        if (res.data.list.length == 0) {
          this.lineOptions = [];
          this.formInfo.lineid = "";
        } else {
          this.lineOptions = res.data.list;
          if (this.photoDialogTitle == "新增") {
            // this.formInfo.lineid = res.data.list[0].id;
            this.$set(this.formInfo, "lineid", res.data.list[0].id);
          }
        }
        // this.dyOptions = res.data.list;
        // this.formdata.dyid = res.data.list == [] ? "" : res.data.list[0].id;
        this.getTower();
      });
    },
    //获取所有杆塔
    getTower() {
      getSearchInfo({ type: 3, id: this.formInfo.lineid })
        .then((res) => {
          if (res.data.list.length == 0) {
            this.toweridOptions = [];
            this.formInfo.towerid = "";
          } else {
            this.toweridOptions = res.data.list;
            if (this.photoDialogTitle == "新增" || this.photoDialogtype == 1) {
              // this.formInfo.towerid = res.data.list[0].id;
              this.$set(this.formInfo, "towerid", res.data.list[0].id);
              this.photoDialogtype = 0;
            }
          }
        })
        .catch((err) => {});
    },
    getTowerchange() {
      if (this.photoDialogTitle == "修改") {
        this.photoDialogtype = 1;
      }
      this.getTower();
    },
    //获取所有通道
    getChannel() {
      getAllChannelListJoggle()
        .then((res) => {
          this.channelOptions = res.data.list;
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.$parent.terminalList();
    },
  },
};
</script>
<style lang="less">
.addPhotoDialog {
  .el-dialog {
    .el-form {
      //display: flex;
      // flex-wrap: wrap;
      .el-form-item {
        // width: 260px;
        // margin-right: 16px;
        .el-select {
          width: 100%;
        }
        .el-checkbox-group {
          .el-checkbox {
            margin-right: 12px;
          }
        }
        .el-form-item__label {
          padding-right: 0px;
        }
      }
      .channelBox {
        .el-checkbox {
          margin-right: 12px;
          margin-left: 0px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>