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

<template>
  <el-dialog
    class="addPhotoDialog"
    :title="photoDialogTitle"
    :visible.sync="photoDialog"
    width="868px"
  >
    <el-form
      label-position="left"
      label-width="98px"
      ref="formPhotoInfo"
      :rules="rules"
      :model="formInfo"
    >
      <el-form-item label="装置ID：" prop="cmdid" required>
        <el-input v-model="formInfo.cmdid" 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="towerid" required>
        <el-select
          v-model="formInfo.towerid"
          multiple
          placeholder="请选择"
          @change="changetowerid"
        >
          <el-option
            v-for="item in toweridOptions"
            :key="item.id"
            :label="item.channelname"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- <el-input v-model="formInfo.towerid" auto-complete="on"></el-input> -->
      </el-form-item>

      <!-- <el-form-item label="线路编号：" prop="lineid" required>
        <el-input v-model="formInfo.lineid" auto-complete="on"></el-input>
      </el-form-item> -->

      <el-form-item label="通道：" prop="channelVal" required>
        <el-select
          v-model="formInfo.channelVal"
          multiple
          placeholder="请选择"
          @change="changeChannelId"
        >
          <el-option
            v-for="item in channelOptions"
            :key="item.id"
            :label="item.channelname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否带云台：" prop="hasPan">
        <!-- <el-input v-model="formInfo.hasPan"></el-input> -->
        <el-radio-group v-model="formInfo.hasPan">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示名：" prop="displayName">
        <el-input v-model="formInfo.displayName"></el-input>
      </el-form-item>
      <el-form-item label="装置名称：" prop="equipName">
        <el-input v-model="formInfo.equipName"></el-input>
      </el-form-item>
      <el-form-item label="装置型号：" prop="model">
        <el-input v-model="formInfo.model"></el-input>
      </el-form-item>
      <!-- <el-form-item label="纬度：" prop="latitude">
        <el-input v-model.number="formInfo.latitude"></el-input>
      </el-form-item>

      <el-form-item label="经度：" prop="longitude">
        <el-input v-model.number="formInfo.longitude"></el-input>
      </el-form-item> -->
      <el-form-item label="原始 ID：" prop="orgId">
        <el-input v-model="formInfo.orgId"></el-input>
      </el-form-item>
      <el-form-item label="版本号：" prop="essentialInfoVersion">
        <el-input v-model="formInfo.essentialInfoVersion"></el-input>
      </el-form-item>
      <el-form-item label="出厂编号：" prop="bsIdentifier">
        <el-input v-model="formInfo.bsIdentifier"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家：" prop="bsManufacturer">
        <el-input v-model="formInfo.bsManufacturer"></el-input>
      </el-form-item>
      <el-form-item label="生产日期：" prop="bsProductionDate">
        <el-input v-model="formInfo.bsProductionDate"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog(0)">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  addTerminalJoggle,
  updateTerminalJoggle,
  getChannelListapi,
} from "@/utils/api/index";
export default {
  props: {
    photoDialog: {
      type: Boolean,
    },
    photoDialogTitle: {
      type: String,
      default: "新增",
    },
    formItem: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  data() {
    let validCmid = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{17}$/;
      if (!reg.test(value)) {
        callback(new Error("装置id是由17位字母+数字组合"));
      } else {
        callback();
      }
    };
    return {
      page: 1, // 当前页数
      pageSize: 10, // 每页数量
      channelOptions: "",
      channelArr: [],
      toweridOptions: "",
      formInfo: {},
      rules: {
        // displayName: [
        //   { required: true, message: "请输入显示名", trigger: "blur" },
        // ],
        cmdid: [
          { required: true, message: "请输入装置ID", trigger: "blur" },
          { validator: validCmid, trigger: "blur" },
        ],
        // lineid: [
        //   { required: true, message: "请输入线路编号", trigger: "blur" },
        // ],
        towerid: [
          { required: true, message: "请输入杆塔编号", trigger: "change" },
        ],
        // hasPan: [
        //   { required: true, message: "请输入是否带云台", trigger: "change" },
        // ],
        channelVal: [
          { required: true, message: "请选择通道", trigger: "change" },
        ],
        // equipName: [
        //   { required: true, message: "请输入装置名称", trigger: "blur" },
        // ],
        // model: [{ required: true, message: "请输入装置型号", trigger: "blur" }],
        // latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        // longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        // orgId: [{ required: true, message: "请输入原始 ID", trigger: "blur" }],
        // essentialInfoVersion: [
        //   { required: true, message: "请输入版本号", trigger: "blur" },
        // ],
        // bsIdentifier: [
        //   { required: true, message: "请输入出厂编号", trigger: "blur" },
        // ],
        // bsManufacturer: [
        //   { required: true, message: "请输入生产厂家", trigger: "blur" },
        // ],
        // bsProductionDate: [
        //   { required: true, message: "请输入生产日期", trigger: "blur" },
        // ],
      },
      //表单数组，对象
      formArr: [],
    };
  },
  methods: {
    // 保存确定操作
    submitForm() {
      this.$refs.formPhotoInfo.validate((valid) => {
        if (valid) {
          console.log(this.channelArr);
          let formObj = {
            bsIdentifier: this.formInfo.bsIdentifier,
            bsManufacturer: this.formInfo.bsManufacturer,
            bsProductionDate: this.formInfo.bsProductionDate,
            cmdid: this.formInfo.cmdid,
            displayName: this.formInfo.displayName,
            equipName: this.formInfo.equipName,
            essentialInfoVersion: this.formInfo.essentialInfoVersion,
            hasPan: this.formInfo.hasPan,
            latitude: this.formInfo.latitude,
            //lineid: this.formInfo.lineid,
            longitude: this.formInfo.longitude,
            model: this.formInfo.model,
            orgId: this.formInfo.orgId,
            towerid: this.formInfo.towerid,
          };
          this.formArr.push(formObj);
          console.log(this.formArr);
          // 走保存请求
          if (this.photoDialogTitle == "新增") {
            addTerminalJoggle({ list: this.formArr })
              .then((res) => {
                console.log(res);
                this.$emit("photoDialogClose", 1); //关闭弹窗
                this.formArr = [];

                this.$message.success("添加成功");
              })
              .catch((err) => {
                console.log(err); //代码错误、请求失败捕获
                this.$message.error("添加失败");
              });
          } else if (this.photoDialogTitle == "修改") {
            let changeformObj = {
              bsIdentifier: this.formInfo.bsIdentifier,
              bsManufacturer: this.formInfo.bsManufacturer,
              bsProductionDate: this.formInfo.bsProductionDate,
              cmdid: this.formInfo.cmdid,
              displayName: this.formInfo.displayName,
              equipName: this.formInfo.equipName,
              essentialInfoVersion: this.formInfo.essentialInfoVersion,
              hasPan: this.formInfo.hasPan,
              latitude: this.formInfo.latitude,
              // lineid: this.formInfo.lineid,
              longitude: this.formInfo.longitude,
              model: this.formInfo.model,
              orgId: this.formInfo.orgId,
              towerid: this.formInfo.towerid,
              id: this.formInfo.id,
            };
            updateTerminalJoggle(changeformObj)
              .then((res) => {
                console.log(res);
                this.$emit("photoDialogClose", 1); //关闭弹窗
                this.$message.success("修改成功");
              })
              .catch((err) => {
                console.log(err); //代码错误、请求失败捕获
                this.$message.error("修改失败");
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消关闭弹窗
    closeDialog(flag) {
      this.$refs.formPhotoInfo.resetFields();
      this.formInfo.hasPan = 0;
      this.$emit("photoDialogClose", flag);
    },
    //获取所有通道
    getChannel() {
      getChannelListapi({
        pageindex: this.page,
        pagesize: this.pageSize,
      })
        .then((res) => {
          this.channelOptions = res.data.list;
          console.log(this.channelOptions);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //通道id 选择
    changeChannelId(val) {
      console.log(val);
      this.channelArr = val;
    },
    //杆塔编号选择
    changetowerid() {},
  },
  mounted() {
    console.log("打印传过来的对象", this.formItem);
    console.log("打印传过来的对象", this.formItem.bsIdentifier);
    this.formInfo = JSON.parse(JSON.stringify(this.formItem));
  },
  created() {
    this.getChannel();
  },
  watch: {
    formItem: {
      handler(newVal, oldVal) {
        // 调用函数
        this.$nextTick(() => {
          this.formInfo = JSON.parse(JSON.stringify(this.formItem));
        });
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="less">
.addPhotoDialog {
  .el-dialog {
    .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        width: 260px;
        margin-right: 16px;
        .el-form-item__label {
          padding-right: 0px;
        }
      }
    }
  }
}
</style>