xjsaas-ui/src/views/xj/inspection-warn/warning-setup/components/add-setup.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-01-08 11:56:02
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-01-08 13:52:47
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\components\add-setup.vue
 * @Description: 预警中心-预警设置-新增/编辑组件
-->
<template>
  <div class="add-setup">
    <el-form
      class="addForm"
      ref="warningSetupForm"
      :model="warningSetupForm"
      :rules="rules"
      label-width="7rem"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="病害类型" prop="defectType">
            <el-cascader
              placeholder="请选择病害类型"
              v-model="warningSetupForm.defectType"
              :options="tableDefect"
              :props="{
                checkStrictly: false,
                emitPath: false,
                children: 'subTypes',
              }"
              style="width: 100%"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="预警病害长度" prop="targetLen">
            <el-input-number
              v-model="warningSetupForm.targetLen"
              :min="0"
              placeholder="请输入预警病害长度"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="预警病害面积" prop="targetArea">
            <el-input-number
              v-model="warningSetupForm.targetArea"
              :min="0"
              placeholder="请输入预警病害面积"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import m from "diagram-js/lib/core";

export default {
  name: "AddSetup",
  props: {
    // 病害类型
    tableDefect: {
      type: Array,
      default: () => [],
    },
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      // 预警设置表单
      warningSetupForm: {
        // 病害类型
        defectType: "",
        // 预警病害长度
        targetLen: null,
        // 预警病害面积
        targetArea: null,
      },
      // 表单验证规则
      rules: {
        defectType: [
          { required: true, message: "请选择病害类型", trigger: "change" },
        ],
        targetLen: [
          { required: true, message: "请输入预警病害长度", trigger: "blur" },
        ],
        targetArea: [
          { required: true, message: "请输入预警病害面积", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    dialogItem: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          console.log(newVal, "sddd");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs.warningSetupForm.validate((valid) => {
        if (valid) {
          console.log(this.warningSetupForm);
        }
      });
    },

    /**
     * @description: 点击取消事件
     * @return {*}
     */
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
.add-setup {
  width: 100%;
  height: 100%;
}

/* 页脚 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>