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-12-02 15:37:29
 * @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="meteringType">
            <el-select
              v-model="warningSetupForm.meteringType"
              placeholder="请选择预警类型"
              style="width: 100%"
              clearable
              @change="changeMeteringType"
            >
              <el-option
                v-for="item in meteringList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" v-if="warningSetupForm.meteringType !== '面积'">
        <el-col :span="24">
          <el-form-item label="预警病害长度" prop="length">
            <el-input-number
              v-model="warningSetupForm.length"
              :min="0"
              placeholder="请输入预警病害长度"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" v-if="warningSetupForm.meteringType !== '长度'">
        <el-col :span="24">
          <el-form-item label="预警病害面积" prop="area">
            <el-input-number
              v-model="warningSetupForm.area"
              :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 { updateWarnSetup } from "@/api/xj/warnSetup";
export default {
  name: "AddSetup",
  props: {
    // 病害类型
    tableDefect: {
      type: Array,
      default: () => [],
    },
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      // 预警设置表单
      warningSetupForm: {
        // 预警类型
        meteringType: "",
        // 预警病害长度
        length: null,
        // 预警病害面积
        area: null,
      },
      // 预警类型列表
      meteringList: [
        {
          value: "长度",
          label: "长度",
        },
        {
          value: "面积",
          label: "面积",
        },
        {
          value: "长度/面积",
          label: "长度/面积",
        },
      ],
      // 表单验证规则
      rules: {
        meteringType: [
          { required: true, message: "请选择病害类型", trigger: "change" },
        ],
        length: [
          { required: true, message: "请输入预警病害长度", trigger: "blur" },
        ],
        area: [
          { required: true, message: "请输入预警病害面积", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    dialogItem: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.warningSetupForm = newVal;
          this.changeMeteringType(newVal.meteringType);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * @description: 选择预警类型改变事件
     * @return {*}
     */
    changeMeteringType(value) {
      if (value === "长度") {
        this.warningSetupForm.area = null;
      } else if (value === "面积") {
        this.warningSetupForm.length = null;
      }
    },

    /**
     * @description: 点击确定事件
     * @return {*}
     */
    submitForm() {
      this.$refs.warningSetupForm.validate((valid) => {
        if (valid) {
          const data = {
            ...this.warningSetupForm,
            id: this.dialogItem.id,
          };
          updateWarnSetup(data).then(({ code, data }) => {
            if (code === 200) {
              this.$modal.msgSuccess("更新成功");
              this.$emit("cancel");
            }
          });
        }
      });
    },

    /**
     * @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>