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: 2025-01-15 14:54:44
 * @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="8rem"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="道路名称" prop="segmentId">
            <el-select
              v-model="warningSetupForm.segmentId"
              placeholder="请选择路段"
              style="width: 100%"
              filterable
              clearable
            >
              <el-option
                v-for="item in segmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="病害类型" prop="defectType">
            <el-select
              v-model="warningSetupForm.defectType"
              placeholder="请选择病害"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in tableDefect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <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-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="预警状态：" prop="status">
            <el-switch
              v-model="warningSetupForm.status"
              active-value="启用"
              inactive-value="停用"
            />
          </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, addWarnSetup } from "@/api/xj/warnSetup";
export default {
  name: "AddSetup",
  props: {
    // 道路下拉
    segmentList: {
      type: Array,
      default: () => [],
    },
    // 病害类型
    tableDefect: {
      type: Array,
      default: () => [],
    },
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      // 预警设置表单
      warningSetupForm: {
        // 病害类型绑定
        defectType: "",
        // 道路名称绑定
        segmentId: "",
        // 预警类型
        meteringType: "",
        // 预警病害长度
        length: null,
        // 预警病害面积
        area: null,
      },
      // 预警类型列表
      meteringList: [
        {
          value: "长度",
          label: "长度",
        },
        {
          value: "面积",
          label: "面积",
        },
        {
          value: "长度/面积",
          label: "长度/面积",
        },
      ],
      // 表单验证规则
      rules: {
        segmentId: [
          { required: true, message: "请选择道路名称", trigger: "change" },
        ],
        defectType: [
          { required: true, message: "请选择病害类型", trigger: "change" },
        ],
        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 = JSON.parse(JSON.stringify(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,
          };
          if (this.warningSetupForm.id) {
            updateWarnSetup(data).then(({ code }) => {
              if (code === 200) {
                this.$modal.msgSuccess("更新成功");
                this.$emit("cancel");
              }
            });
          } else {
            addWarnSetup(data).then(({ code }) => {
              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>