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="660px"
    @close="handleclose"
  >
    <el-form
      label-position="left"
      label-width="98px"
      ref="formgrapInfo"
      :rules="rules"
      :model="formInfo"
    >
      <el-form-item label="线路" prop="lineVal">
        <el-select v-model="formInfo.lineVal" placeholder="请选择">
          <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="towerVal">
        <el-select v-model="formInfo.towerVal" 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="simCard">
        <el-input v-model="formInfo.simCard" auto-complete="on"></el-input>
      </el-form-item>
      <el-form-item label="通道(可多选)：" prop="channelVal">
        <el-checkbox-group
          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: {
        // lineVal: "",
        // towerVal: "",
        // equipName: "",
        // cmdid: "",
        // simCard: "",
        // displayName: "",
        channelVal: [],
      },
      channelOptions: [], //所有通道列表
      lineOptions: [], //线路
      toweridOptions: [], //杆塔
      rules: {
        cmdid: [
          { required: true, message: "请输入装置ID", trigger: "blur" },
          { validator: validCmid, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  created() {},
  watch: {},
  methods: {
    //判断
    getdataform(val) {
      console.log(val);
      this.getLine();
      this.getChannel();
      if (val == null) {
        return (this.formInfo = {
          channelVal: [],
        });
      }
      this.formInfo = val;
    },
    // 保存确定操作
    submitForm() {
      this.$refs.formgrapInfo.validate((valid) => {
        if (valid) {
          console.log(valid);
          if (this.photoDialogTitle == "新增") {
            console.log(this.formInfo);
            this.formInfo = {
              channelid: this.formInfo.channelVal,
              cmdid: this.formInfo.cmdid,
              lineid: this.formInfo.lineVal,
              equipName: this.formInfo.equipName,
              sim: this.formInfo.simCard,
              displayName: this.formInfo.cmdid,
              towerid: this.formInfo.towerVal,
            };
            addTerminalJoggle(this.formInfo)
              .then((res) => {
                this.isShow = false;
                this.$message.success("添加成功");
                this.$parent.terminalList(); //刷新
              })
              .catch((err) => {
                console.log(err); //代码错误、请求失败捕获
                this.$message.error("添加失败");
              });
          } else {
            this.formInfo = {
              channelid: this.formInfo.channelVal,
              cmdid: this.formInfo.cmdid,
              lineid: this.formInfo.lineVal,
              equipName: this.formInfo.equipName,
              sim: this.formInfo.simCard,
              displayName: this.formInfo.cmdid,
              towerid: this.formInfo.towerVal,
            };
            updateTerminalJoggle(this.formInfo)
              .then((res) => {
                this.isShow = false;
                this.$message.success("修改成功");
                this.$parent.terminalList();
              })
              .catch((err) => {
                this.$message.error("修改失败");
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //获取所有线路
    getLine() {
      getSearchInfo({ type: 2 }).then((res) => {
        console.log(res);
        this.lineOptions = res.data.list;
        if (res.data.list.length == 0) {
          this.lineOptions = [];
          this.formInfo.lineVal = "";
        } else {
          this.lineOptions = res.data.list;
          this.formInfo.lineVal = 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.lineVal })
        .then((res) => {
          console.log(res);
          if (res.data.list.length == 0) {
            this.toweridOptions = [];
            this.formInfo.towerVal = "";
          } else {
            this.toweridOptions = res.data.list;
            this.formInfo.towerVal = res.data.list[0].id;
          }
        })
        .catch((err) => {});
    },
    //获取所有通道
    getChannel() {
      getAllChannelListJoggle()
        .then((res) => {
          this.channelOptions = res.data.list;
          console.log(this.channelOptions);
        })
        .catch((err) => {
          console.log(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;
        }
      }
    }
  }
}
</style>