xjsaas-ui/src/views/xj/hisense/station/components/add-station.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-02-12 16:44:44
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-02-17 16:18:20
 * @FilePath: \znxjxt-ui\src\views\xj\hisense\inter-change\components\add-inter.vue
 * @Description: 海信-收费站-新增/编辑
-->
<template>
  <div class="dialog-content">
    <el-form class="addForm" ref="addInterForm" :model="addInterForm" :rules="rules" label-width="8rem">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="收费站名称：" prop="stationName">
            <el-input v-model="addInterForm.stationName" placeholder="请填写名称" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="收费站Id：" prop="stationId">
            <el-input v-model="addInterForm.stationId" placeholder="请填写id" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="收费站code：" prop="stationCode">
            <el-input v-model="addInterForm.stationCode" placeholder="请填写收费站code" style="width: 100%" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="桩号：" prop="stake">
            <el-input v-model="addInterForm.stake" placeholder="请填写桩号" style="width: 100%" clearable>
            </el-input>
          </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 { add, updata } from '@/api/xj/hisense/station'

export default {
  name: "AddStation",
  props: {
    // 接收父组件传过来的数据
    dialogItem: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 新增表单
      addInterForm: {
        stationName: "",
        stationId: "",
        stationCode: "",
        stake: "",
      },
      // 表单校验规则
      rules: {
        stationName: [{ required: true, message: "请填写名称", trigger: "blur" }],
        stationCode: [{ required: true, message: "请填写code", trigger: "blur" }],
        stationId: [{ required: true, message: "请填写工作站id", trigger: "blur" }, {
          pattern: /^[1-9]\d*$/,
          message: "请输入正整数",
        }],
        stake: [{ required: true, message: "请填写桩号", trigger: "blur" }, {
          pattern: /^(0|[1-9]\d*)(\.\d{1,3})?$/,
          message: "请输入非负数",
        },],
      }
    }
  },
  watch: {
    dialogItem: {
      handler(val) {
        if (val) {
          this.addInterForm = JSON.parse(JSON.stringify(val))
        }
      }, immediate: true, deep: true
    }
  },
  mounted() {

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

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

<style lang="scss" scoped>
.dialog-content {
  width: 100%;
  // height: 20rem;
}

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