house/fount/modules/config/add-or-update.vue

<template>
  <!-- 主容器块，用于样式隔离与布局 -->
  <div class="addEdit-block">
    <!-- 表单组件，绑定ruleForm数据模型，使用ref方便在JS中引用 -->
    <el-form
      class="detail-form-content"
      ref="ruleForm"                      <!-- 表单引用 -->
      :model="ruleForm"                  <!-- 数据模型 -->
      :rules="rules"                     <!-- 校验规则 -->
      label-width="80px"                 <!-- 标签宽度 -->
	  :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 动态背景色 -->
    >
      <!-- 布局行，用于排列表单项 -->
      <el-row>
        <!-- 左半列，跨度12（占50%） -->
        <el-col :span="12">
          <!-- 非查看模式时显示可编辑名称输入框 -->
          <el-form-item class="input" v-if="type!='info'" label="名称" prop="name">
            <!-- 输入框，双向绑定ruleForm.name -->
            <el-input v-model="ruleForm.name"
              placeholder="名称" clearable  :readonly="ro.name"></el-input> <!-- 可清空、只读控制 -->
          </el-form-item>
          <!-- 查看模式下显示只读名称输入框 -->
          <div v-else>
            <el-form-item class="input" label="名称" prop="name">
              <!-- 强制只读状态 -->
              <el-input v-model="ruleForm.name"
                placeholder="名称" readonly></el-input> <!-- 只读模式 -->
            </el-form-item>
          </div>
        </el-col>
        <!-- 全宽列，跨度24（占100%） -->
        <el-col :span="24">
          <!-- 非查看模式且value未锁定时显示上传组件 -->
          <el-form-item class="upload" v-if="type!='info' && !ro.value" label="值" prop="value">
            <!-- 文件上传组件 -->
            <file-upload
              tip="点击上传值"               <!-- 提示文字 -->
              action="file/upload"           <!-- 上传接口地址 -->
              :limit="3"                     <!-- 最多上传3个文件 -->
              :multiple="true"               <!-- 支持多选 -->
              :fileUrls="ruleForm.value?ruleForm.value:''"  <!-- 初始文件路径 -->
              @change="valueUploadChange"    <!-- 上传完成后的回调 -->
            ></file-upload>
          </el-form-item>
          <!-- 查看模式下展示图片预览 -->
          <div v-else>
            <el-form-item v-if="ruleForm.value" label="值" prop="value">
              <!-- 循环展示多个图片 -->
              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.value.split(',')" :src="item" width="100" height="100"> <!-- 图片预览 -->
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <!-- 提交/取消按钮组 -->
      <el-form-item class="btn">
        <!-- 非查看模式显示提交按钮 -->
        <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button> <!-- 提交操作 -->
        <!-- 非查看模式显示取消按钮 -->
        <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button> <!-- 取消操作 -->
        <!-- 查看模式显示返回按钮 -->
        <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button> <!-- 返回操作 -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 导入校验工具函数：数字、整数、邮箱、手机号等
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";

export default {
  data() {
    let self = this;

    // 身份证号码校验函数
    var validateIdCard = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!checkIdCard(value)) {       // 校验身份证号码格式
        callback(new Error("请输入正确的身份证号码")); // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    // URL地址校验函数
    var validateUrl = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!isURL(value)) {             // 校验URL格式
        callback(new Error("请输入正确的URL地址")); // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    // 手机号码校验函数
    var validateMobile = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!isMobile(value)) {          // 校验手机号码格式
        callback(new Error("请输入正确的手机号码")); // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    // 固定电话号码校验函数
    var validatePhone = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!isPhone(value)) {           // 校验固定电话格式
        callback(new Error("请输入正确的电话号码")); // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    // 邮箱地址校验函数
    var validateEmail = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!isEmail(value)) {           // 校验邮箱格式
        callback(new Error("请输入正确的邮箱地址")); // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    // 数字校验函数
    var validateNumber = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!isNumber(value)) {          // 校验是否为数字
        callback(new Error("请输入数字"));     // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    // 整数校验函数
    var validateIntNumber = (rule, value, callback) => {
      if(!value){                             // 如果值为空
        callback();                           // 不触发错误
      } else if (!isIntNumer(value)) {        // 校验是否为整数
        callback(new Error("请输入整数"));     // 触发错误提示
      } else {
        callback();                           // 校验通过
      }
    };

    return {
      // 表单样式配置对象（包含所有样式参数）
      addEditForm: {"btnSaveFontColor":"#fff", ...},  // 省略完整样式配置

      id: '',                 // 当前记录ID
      type: '',               // 操作类型（add/edit/view）

      ro:{                    // 只读字段标识
		name : false,         // 名称字段是否只读
		value : false,        // 值字段是否只读
      },

      ruleForm: {             // 表单数据模型
		name: '',             // 名称字段初始值
		value: '',            // 值字段初始值
      },

      rules: {                // 表单验证规则
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },  // 必填项
        ],
        value: []             // 空规则占位
      }
    };
  },
  props: ["parent"],        // 接收父组件传参

  computed: {},              // 计算属性（暂无）

  created() {               // 组件创建后执行
	this.addEditStyleChange();       // 初始化表单样式
	this.addEditUploadStyleChange(); // 初始化上传区域样式
  },

  methods: {

    // 下载方法：打开文件链接
    download(file){
      window.open(`${file}`)  // 新窗口打开文件链接
    },

    // 初始化方法，带id和type参数
    init(id,type) {
      if (id) {
        this.id = id;         // 设置当前记录ID
        this.type = type;     // 设置操作类型
      }

      // 根据类型加载数据
      if(this.type == 'info' || this.type == 'else'){
        this.info(id);        // 加载详情信息
      } else if (this.type == 'cross') {  // 处理跨模块数据
        var obj = this.$storage.getObj('crossObj');  // 获取跨页传递数据
        for (var o in obj){
          	if(o == 'name'){   // 名称字段处理
            	this.ruleForm.name = obj[o];
	            this.ro.name = true;
            	continue;
          	}
          	if(o == 'value'){  // 值字段处理
            	this.ruleForm.value = obj[o];
	            this.ro.value = true;
            	continue;
          	}
        }
      }
    },

    // 加载指定ID的详情数据
    info(id) {
      this.$http({            // 发起HTTP请求
        url: `config/info/${id}`,  // 请求URL
        method: "get"         // 请求方法
      }).then(({ data }) => { // 成功回调
        if (data && data.code === 0) {
          this.ruleForm = data.data;  // 填充表单数据
        } else {
          this.$message.error(data.msg);  // 错误提示
        }
      });
    },

    // 表单提交处理
    onSubmit() {
      this.$refs["ruleForm"].validate(valid => {  // 表单校验
        if (valid) {
          this.$http({  // 提交请求
            url: `config/${!this.ruleForm.id ? "save" : "update"}`,  // 动态URL
            method: "post",  // 请求方法
            data: this.ruleForm  // 提交数据
          }).then(({ data }) => {
            if (data && data.code === 0) {  // 成功处理
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.parent.showFlag = true;
                  this.parent.addOrUpdateFlag = false;
                  this.parent.configCrossAddOrUpdateFlag = false;
                  this.parent.search();  // 刷新父组件数据
                  this.parent.contentStyleChange();
                }
              });
            } else {
              this.$message.error(data.msg);  // 失败提示
            }
          });
        }
      });
    },

    // UUID生成方法
    getUUID () {
      return new Date().getTime();  // 返回时间戳作为UUID
    },

    // 返回操作
    back() {
      // 重置父组件状态
      this.parent.showFlag = true;
      this.parent.addOrUpdateFlag = false;
      this.parent.configCrossAddOrUpdateFlag = false;
      this.parent.contentStyleChange();
    },

    // 文件上传变更处理
    valueUploadChange(fileUrls) {
      this.ruleForm.value = fileUrls;  // 更新文件路径
      this.addEditUploadStyleChange()  // 重新计算上传区样式
    },

    // 动态样式设置
    addEditStyleChange() {
      this.$nextTick(() => {
        // input样式设置
        document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el => {
          el.style.height = this.addEditForm.inputHeight
          el.style.color = this.addEditForm.inputFontColor
          el.style.fontSize = this.addEditForm.inputFontSize
          el.style.borderWidth = this.addEditForm.inputBorderWidth
          el.style.borderStyle = this.addEditForm.inputBorderStyle
          el.style.borderColor = this.addEditForm.inputBorderColor
          el.style.borderRadius = this.addEditForm.inputBorderRadius
          el.style.backgroundColor = this.addEditForm.inputBgColor
        })

        // label样式设置
        document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el => {
          el.style.lineHeight = this.addEditForm.inputHeight
          el.style.color = this.addEditForm.inputLableColor
          el.style.fontSize = this.addEditForm.inputLableFontSize
        })
        // 其他组件样式设置（select/date/upload/textarea等）...
      })
    },

    // 上传组件样式调整
    addEditUploadStyleChange() {
      this.$nextTick(() => {
        document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el => {
          el.style.width = this.addEditForm.uploadHeight
          el.style.height = this.addEditForm.uploadHeight
          el.style.borderWidth = this.addEditForm.uploadBorderWidth
          el.style.borderStyle = this.addEditForm.uploadBorderStyle
          el.style.borderColor = this.addEditForm.uploadBorderColor
          el.style.borderRadius = this.addEditForm.uploadBorderRadius
          el.style.backgroundColor = this.addEditForm.uploadBgColor
        })
      })
    },
  }
};
</script>
<style lang="scss">
.editor{
  height: 500px;  // 编辑器高度

  & /deep/ .ql-container {
	  height: 310px;  // Quill编辑器内容区域高度
  }
}

.amap-wrapper {
  width: 100%;    // 地图容器宽度
  height: 500px;  // 地图容器高度
}

.search-box {
  position: absolute;  // 搜索框绝对定位
}

.addEdit-block {
	margin: -10px;  // 容器外边距
}

.detail-form-content {
	padding: 12px;  // 表单内容内边距
}

.btn .el-button {
  padding: 0;  // 按钮内边距设为0
}
</style>