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

<template>
  <el-dialog
    class="addPhotoDialog"
    :title="photoDialogTitle"
    :visible.sync="photoDialog"
    width="830px"
  >
    <el-form
      label-position="left"
      label-width="98px"
      ref="formPhotoInfo"
      :rules="rules"
      :model="formInfo"
    >
      <el-form-item label="显示名：" prop="displayName" required>
        <el-input v-model="formInfo.displayName"></el-input>
      </el-form-item>
      <el-form-item label="装置ID：" prop="cmdid" required>
        <el-input v-model="formInfo.cmdid"></el-input>
      </el-form-item>
      <el-form-item label="线路编号：" prop="lineid" required>
        <el-input v-model="formInfo.lineid"></el-input>
      </el-form-item>
      <el-form-item label="杆塔编号：" prop="towerid" required>
        <el-input v-model="formInfo.towerid"></el-input>
      </el-form-item>
      <el-form-item label="是否带云台：" prop="hasPan" required>
        <el-input v-model="formInfo.hasPan"></el-input>
      </el-form-item>

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

      <el-form-item label="经度：" prop="longitude" required>
        <el-input v-model.number="formInfo.longitude"></el-input>
      </el-form-item>
      <el-form-item label="原始 ID：" prop="orgId" required>
        <el-input v-model="formInfo.orgId"></el-input>
      </el-form-item>
      <el-form-item label="版本号：" prop="essentialInfoVersion" required>
        <el-input v-model="formInfo.essentialInfoVersion"></el-input>
      </el-form-item>
      <el-form-item label="出厂编号：" prop="bsIdentifier" required>
        <el-input v-model="formInfo.bsIdentifier"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家：" prop="bsManufacturer" required>
        <el-input v-model="formInfo.bsManufacturer"></el-input>
      </el-form-item>
      <el-form-item label="生产日期：" prop="bsProductionDate" required>
        <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 } from "@/utils/api/index";
export default {
  props: {
    photoDialog: {
      type: Boolean,
    },
    photoDialogTitle: {
      type: String,
      default: "新增",
    },
    formItem: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  data() {
    return {
      formInfo: {},
      rules: {
        displayName: [
          { required: true, message: "请输入显示名", trigger: "blur" },
        ],
        cmdid: [{ required: true, message: "请输入装置ID", trigger: "blur" }],
        lineid: [
          { required: true, message: "请输入线路编号", trigger: "blur" },
        ],
        towerid: [
          { required: true, message: "请输入杆塔编号", trigger: "blur" },
        ],
        hasPan: [
          { required: true, message: "请输入是否带云台", trigger: "blur" },
        ],

        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) {
          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.$emit("photoDialogClose", flag);
    },
  },
  mounted() {
    console.log("打印传过来的对象", this.formItem);
    console.log("打印传过来的对象", this.formItem.bsIdentifier);
    this.formInfo = JSON.parse(JSON.stringify(this.formItem));
  },
  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: 246px;
        margin-right: 16px;
        .el-form-item__label {
          padding-right: 0px;
        }
      }
    }
  }
}
</style>