shuili-vue/src/views/dyke/engineeringCondition/identificationPlate/components/markForm.vue

<template>
  <el-row :gutter="15">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-col :span="8">
        <el-form-item label="标志名称" prop="markName">
          <el-input v-model="form.markName" placeholder="请输入标志名称" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="标识位置" prop="markLocation">
          <el-input v-model="form.markLocation" placeholder="请输入标识位置" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="标识类型" prop="markType">
          <el-select
            v-model="form.markType"
            placeholder="请选择标识类型"
            style="width: 100%"
          >
            <el-option
              v-for="dict in markTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上传图片" prop="photo">
          <el-input v-model="form.photo" placeholder="请输入上传图片" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-button-group>
          <el-button icon="el-icon-plus" @click="addFormFarther"></el-button>
          <el-button icon="el-icon-minus" v-if="!isFirst"></el-button>
        </el-button-group>
      </el-col>
    </el-form>
  </el-row>
</template>
<script>
export default {
  props: {
    formName: {
      default() {
        return "form";
      },
    },
    // firstForm: {
    //   default() {
    //     return {};
    //   },
    // },
    // form: {
    //   default() {
    //     return {};
    //   },
    // },
    rules: {
      default() {
        return {};
      },
    },
    markTypeOptions: {
      default() {
        return [];
      },
    },
    isFirst: {
      default() {
        return false;
      },
    },
    addForm: {
      type: Function,
      default: () => {
        console.log(777);
      },
    },
    index: {},
    type: {},
    editItem: {},
    status: {},
    comForm: {},
  },
  data() {
    return {
      form: {},
      valid: false,
    };
  },
  created() {
    // 判断打开的弹出框，是新增还是编辑
    if (this.status) {
      this.form = this.editItem;

      this.form.type = this.type;
      this.form.sluiceName = this.comForm.sluiceName;
      this.form.sluiceCode = this.comForm.sluiceCode;
    } else {
      this.form = {
        id: null,
        adcd: null,
        sluiceCode: null,
        markName: null,
        sluiceName: null,
        markLocation: null,
        type: null,
        markType: null,
        photo: null,
        markCode: null,
        proNo: null,
        proCode: null,
        createUid: null,
        updateUid: null,
        createTime: null,
        updateTime: null,
        owerDept: null,
        remark: null,
      };
      this.form.type = this.type;
      this.form.sluiceName = this.comForm.sluiceName;
      this.form.sluiceCode = this.comForm.sluiceCode;
    }
    console.log("this.form in components", this.form);
    // 当时是第一个表单时，form有父组件传入
    // if (this.isFirst) {
    //   this.form = this.firstForm;
    //   console.log(" this.firstForm;", this.firstForm);
    // }
    // console.log("isFirst", this.isFirst);
    // console.log("markTypeOptions", this.markTypeOptions);
  },
  watch: {
    "comForm.sluiceName": {
      // deep: true, //深度监听设置为 true
      handler(newVal, oldVal) {
        // console.log("新的name", newVal);
        // console.log("旧的name", oldVal);
        this.form.sluiceName = newVal;
        // this.form.sluiceCode = newVal;
      },
    },
    "comForm.sluiceCode": {
      // deep: true, //深度监听设置为 true
      handler(newVal, oldVal) {
        // console.log("新的code", newVal);
        // console.log("旧的code", oldVal);
        // this.form.sluiceName = newVal;
        this.form.sluiceCode = newVal;
      },
    },
    // status: function (n, o) {
    //   if (!n) {
    //     this.form = {
    //       id: null,
    //       adcd: null,
    //       sluiceCode: null,
    //       markName: null,
    //       suliceName: null,
    //       markLocation: null,
    //       type: "0",
    //       markType: null,
    //       photo: null,
    //       markCode: null,
    //       proNo: null,
    //       proCode: null,
    //       createUid: null,
    //       updateUid: null,
    //       createTime: null,
    //       updateTime: null,
    //       owerDept: null,
    //       remark: null,
    //     };
    //   } else {
    //     console.log(this.type, this.editItem);
    //     this.form = this.editItem;
    //   }
    // },
  },
  methods: {
    addFormFarther() {
      this.addForm(this.index, this.type, this.formName);
    },
    validateForm() {
      this.$refs.form.validate((valid) => (this.valid = valid));
    },
  },
};
</script>