diff --git a/fount/views/404.vue b/fount/views/404.vue
new file mode 100644
index 0000000..f9881af
--- /dev/null
+++ b/fount/views/404.vue
@@ -0,0 +1,61 @@
+<template>
+  <!-- 主容器 -->
+  <div class="content">
+    <!-- 错误页面背景图 -->
+    <img class="backgroud" src="@/assets/img/404.png" alt>
+
+    <!-- 主要提示文本 -->
+    <div class="text main-text">出错了...页面失踪了</div>
+
+    <!-- 返回按钮区域 -->
+    <div>
+      <!-- 点击返回上一页的按钮 -->
+      <el-button class="text" @click="back()" type="text" icon="el-icon-back">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// 定义 Vue 组件
+export default {
+  // 方法集合
+  methods: {
+    // 返回操作方法：如果历史记录中存在上一页则返回，否则跳转到首页
+    back() {
+      // 判断浏览器历史栈深度是否大于1
+      window.history.length > 1
+        ? this.$router.go(-1)       // 返回上一页
+        : this.$router.push("/");   // 否则跳转至首页
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;                  /* 使用弹性布局 */
+  align-items: center;            /* 垂直居中 */
+  flex-direction: column;         /* 子元素垂直排列 */
+  width: 100%;                    /* 宽度占满父容器 */
+  height: 100%;                   /* 高度占满父容器 */
+  min-height: 900px;              /* 最小高度为900px */
+  text-align: center;             /* 文字水平居中 */
+
+  .backgroud {
+    display: inline-block;        /* 行内块显示 */
+    width: 200px;                 /* 图片宽度 */
+    height: 200px;                /* 图片高度 */
+    margin-top: 80px;             /* 上边距 */
+  }
+
+  .main-text {
+    margin-top: 80px;             /* 提示文字顶部留白 */
+  }
+
+  .text {
+    font-size: 24px;              /* 字体大小 */
+    font-weight: bold;            /* 加粗字体 */
+    color: #333;                  /* 字体颜色 */
+  }
+}
+</style>
diff --git a/fount/views/center.vue b/fount/views/center.vue
new file mode 100644
index 0000000..85171b8
--- /dev/null
+++ b/fount/views/center.vue
@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <!-- 表单容器，使用 Element UI 的表单组件 -->
+    <el-form
+        class="detail-form-content"  <!-- 表单样式类 -->
+    ref="ruleForm"  <!-- 表单引用，用于表单验证 -->
+    :model="ruleForm"  <!-- 表单数据绑定 -->
+    label-width="80px"  <!-- 表单标签宽度 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 用户名表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item   v-if="flag=='yonghu'"  label="用户名" prop="yonghuming">
+          <!-- 用户名输入框，只读 -->
+          <el-input v-model="ruleForm.yonghuming" readonly  placeholder="用户名" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 姓名表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item   v-if="flag=='yonghu'"  label="姓名" prop="xingming">
+          <!-- 姓名输入框 -->
+          <el-input v-model="ruleForm.xingming"  placeholder="姓名" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">  <!-- 24列宽布局，占满整行 -->
+        <!-- 头像表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item v-if="flag=='yonghu'" label="头像" prop="touxiang">
+          <!-- 文件上传组件，用于上传头像 -->
+          <file-upload
+              tip="点击上传头像"  <!-- 提示信息 -->
+          action="file/upload"  <!-- 上传接口地址 -->
+          :limit="3"  <!-- 上传文件数量限制 -->
+          :multiple="true"  <!-- 是否支持多文件上传 -->
+          :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"  <!-- 已上传文件地址 -->
+          @change="yonghutouxiangUploadChange"  <!-- 文件上传变化事件 -->
+          ></file-upload>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 性别表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item v-if="flag=='yonghu'"  label="性别" prop="xingbie">
+          <!-- 性别选择下拉框 -->
+          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
+            <!-- 性别选项循环 -->
+            <el-option
+                v-for="(item,index) in yonghuxingbieOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 职业表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item   v-if="flag=='yonghu'"  label="职业" prop="zhiye">
+          <!-- 职业输入框 -->
+          <el-input v-model="ruleForm.zhiye"  placeholder="职业" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 联系电话表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item   v-if="flag=='yonghu'"  label="联系电话" prop="lianxidianhua">
+          <!-- 联系电话输入框 -->
+          <el-input v-model="ruleForm.lianxidianhua"  placeholder="联系电话" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 身份证表单项，仅当 flag 为 'yonghu' 时显示 -->
+        <el-form-item   v-if="flag=='yonghu'"  label="身份证" prop="shenfenzheng">
+          <!-- 身份证输入框 -->
+          <el-input v-model="ruleForm.shenfenzheng"  placeholder="身份证" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 房主账号表单项，仅当 flag 为 'fangzhu' 时显示 -->
+        <el-form-item   v-if="flag=='fangzhu'"  label="房主账号" prop="fangzhuzhanghao">
+          <!-- 房主账号输入框，只读 -->
+          <el-input v-model="ruleForm.fangzhuzhanghao" readonly  placeholder="房主账号" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 房主姓名表单项，仅当 flag 为 'fangzhu' 时显示 -->
+        <el-form-item   v-if="flag=='fangzhu'"  label="房主姓名" prop="fangzhuxingming">
+          <!-- 房主姓名输入框 -->
+          <el-input v-model="ruleForm.fangzhuxingming"  placeholder="房主姓名" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 性别表单项，仅当 flag 为 'fangzhu' 时显示 -->
+        <el-form-item v-if="flag=='fangzhu'"  label="性别" prop="xingbie">
+          <!-- 性别选择下拉框 -->
+          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
+            <!-- 性别选项循环 -->
+            <el-option
+                v-for="(item,index) in fangzhuxingbieOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">  <!-- 24列宽布局，占满整行 -->
+        <!-- 头像表单项，仅当 flag 为 'fangzhu' 时显示 -->
+        <el-form-item v-if="flag=='fangzhu'" label="头像" prop="touxiang">
+          <!-- 文件上传组件，用于上传头像 -->
+          <file-upload
+              tip="点击上传头像"  <!-- 提示信息 -->
+          action="file/upload"  <!-- 上传接口地址 -->
+          :limit="3"  <!-- 上传文件数量限制 -->
+          :multiple="true"  <!-- 是否支持多文件上传 -->
+          :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"  <!-- 已上传文件地址 -->
+          @change="fangzhutouxiangUploadChange"  <!-- 文件上传变化事件 -->
+          ></file-upload>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 手机表单项，仅当 flag 为 'fangzhu' 时显示 -->
+        <el-form-item   v-if="flag=='fangzhu'"  label="手机" prop="shouji">
+          <!-- 手机输入框 -->
+          <el-input v-model="ruleForm.shouji"  placeholder="手机" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">  <!-- 12列宽布局 -->
+        <!-- 身份证表单项，仅当 flag 为 'fangzhu' 时显示 -->
+        <el-form-item   v-if="flag=='fangzhu'"  label="身份证" prop="shenfenzheng">
+          <!-- 身份证输入框 -->
+          <el-input v-model="ruleForm.shenfenzheng"  placeholder="身份证" clearable></el-input>
+        </el-form-item>
+      </el-col>
+      <el-form-item v-if="flag=='users'" label="用户名" prop="username">
+        <!-- 用户名表单项，仅当 flag 为 'users' 时显示 -->
+        <el-input v-model="ruleForm.username"
+                  placeholder="用户名"></el-input>
+      </el-form-item>
+      <el-col :span="24">  <!-- 24列宽布局，占满整行 -->
+        <el-form-item>
+          <!-- 修改按钮，点击触发表单提交 -->
+          <el-button type="primary" @click="onUpdateHandler">修 改</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+// 引入表单验证工具函数
+import { isNumber,isIntNumer,isEmail,isMobile,isPhone,isURL,checkIdCard } from "@/utils/validate";
+
+export default {
+  data() {
+    return {
+      ruleForm: {},  // 表单数据对象
+      flag: '',  // 标志位，用于区分用户类型
+      usersFlag: false,  // 用户标志位
+      yonghuxingbieOptions: [],  // 用户性别选项
+      fangzhuxingbieOptions: [],  // 房主性别选项
+    };
+  },
+  mounted() {
+    // 组件挂载后执行
+    var table = this.$storage.get("sessionTable");  // 获取存储的会话表
+    this.flag = table;  // 设置标志位
+    // 发起 HTTP 请求获取表单数据
+    this.$http({
+      url: `${this.$storage.get("sessionTable")}/session`,
+      method: "get"
+    }).then(({ data }) => {
+      if (data && data.code === 0) {  // 请求成功
+        this.ruleForm = data.data;  // 填充表单数据
+      } else {
+        this.$message.error(data.msg);  // 显示错误消息
+      }
+    });
+    // 设置用户性别选项
+    this.yonghuxingbieOptions = "男,女".split(',')
+    // 设置房主性别选项
+    this.fangzhuxingbieOptions = "男,女".split(',')
+  },
+  methods: {
+    // 用户头像上传变化事件
+    yonghutouxiangUploadChange(fileUrls) {
+      this.ruleForm.touxiang = fileUrls;  // 更新表单头像数据
+    },
+    // 房主头像上传变化事件
+    fangzhutouxiangUploadChange(fileUrls) {
+      this.ruleForm.touxiang = fileUrls;  // 更新表单头像数据
+    },
+    // 表单修改提交事件
+    onUpdateHandler() {
+      // 用户名验证，当标志位为 'yonghu' 时
+      if((!this.ruleForm.yonghuming)&& 'yonghu'==this.flag){
+        this.$message.error('用户名不能为空');  // 提示用户名不能为空
+        return
+      }
+      // 密码验证，当标志位为 'yonghu' 时
+      if((!this.ruleForm.mima)&& 'yonghu'==this.flag){
+        this.$message.error('密码不能为空');  // 提示密码不能为空
+        return
+      }
+      // 联系电话格式验证，当标志位为 'yonghu' 时
+      if( 'yonghu' ==this.flag && this.ruleForm.lianxidianhua&&(!isMobile(this.ruleForm.lianxidianhua))){
+        this.$message.error(`联系电话应输入手机格式`);  // 提示联系电话格式错误
+        return
+      }
+      // 身份证格式验证，当标志位为 'yonghu' 时
+      if( 'yonghu' ==this.flag && this.ruleForm.shenfenzheng&&(!checkIdCard(this.ruleForm.shenfenzheng))){
+        this.$message.error(`身份证应输入身份证格式`);  // 提示身份证格式错误
+        return
+      }
+      // 房主账号验证，当标志位为 'fangzhu' 时
+      if((!this.ruleForm.fangzhuzhanghao)&& 'fangzhu'==this.flag){
+        this.$message.error('房主账号不能为空');  // 提示房主账号不能为空
+        return
+      }
+      // 密码验证，当标志位为 'fangzhu' 时
+      if((!this.ruleForm.mima)&& 'fangzhu'==this.flag){
+        this.$message.error('密码不能为空');  // 提示密码不能为空
+        return
+      }
+      // 房主姓名验证，当标志位为 'fangzhu' 时
+      if((!this.ruleForm.fangzhuxingming)&& 'fangzhu'==this.flag){
+        this.$message.error('房主姓名不能为空');  // 提示房主姓名不能为空
+        return
+      }
+      // 手机格式验证，当标志位为 'fangzhu' 时
+      if( 'fangzhu' ==this.flag && this.ruleForm.shouji&&(!isMobile(this.ruleForm.shouji))){
+        this.$message.error(`手机应输入手机格式`);  // 提示手机格式错误
+        return
+      }
+      // 身份证格式验证，当标志位为 'fangzhu' 时
+      if( 'fangzhu' ==this.flag && this.ruleForm.shenfenzheng&&(!checkIdCard(this.ruleForm.shenfenzheng))){
+        this.$message.error(`身份证应输入身份证格式`);  // 提示身份证格式错误
+        return
+      }
+      // 发起 HTTP 请求提交表单数据
+      this.$http({
+        url: `${this.$storage.get("sessionTable")}/update`,
+        method: "post",
+        data: this.ruleForm
+      }).then(({ data }) => {
+        if (data && data.code === 0) {  // 提交成功
+          this.$message({
+            message: "修改信息成功",  // 成功消息
+            type: "success",
+            duration: 1500,
+            onClose: () => {
+            }
+          });
+        } else {
+          this.$message.error(data.msg);  // 提交失败消息
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+// 组件私有样式，使用 SCSS 语法
+</style>
\ No newline at end of file
diff --git a/fount/views/home.vue b/fount/views/home.vue
new file mode 100644
index 0000000..fd2be32
--- /dev/null
+++ b/fount/views/home.vue
@@ -0,0 +1,68 @@
+<template>
+  <!-- 页面主容器 -->
+  <div class="content">
+
+    <!-- 欢迎语句，显示项目名称 -->
+    <div class="text main-text">欢迎使用 {{this.$project.projectName}}</div>
+
+  </div>
+</template>
+
+<script>
+// 导入静态路由模块，用于页面跳转
+import router from '@/router/router-static'
+
+export default {
+  // 生命周期钩子：组件挂载完成后执行初始化方法
+  mounted(){
+    this.init();
+  },
+  methods:{
+    // 初始化方法：验证用户登录状态
+    init(){
+      // 判断是否已保存 Token（登录凭证）
+      if(this.$storage.get('Token')){
+        // 发送请求获取当前用户信息
+        this.$http({
+          // 请求地址：根据 sessionTable 获取对应的用户信息接口
+          url: `${this.$storage.get('sessionTable')}/session`,
+          method: "get"
+        }).then(({ data }) => {
+          // 如果返回数据且 code 不为 0，表示未登录或会话失效
+          if (data && data.code != 0) {
+            // 跳转到登录页
+            router.push({ name: 'login' })
+          }
+        });
+      } else {
+        // 如果没有 Token，直接跳转到登录页
+        router.push({ name: 'login' })
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;                  /* 使用弹性布局 */
+  align-items: center;            /* 垂直居中 */
+  flex-direction: column;         /* 子元素垂直排列 */
+  width: 100%;                    /* 宽度占满父容器 */
+  height: 100%;                   /* 高度占满父容器 */
+  min-height: 500px;              /* 最小高度为500px */
+  text-align: center;             /* 文字水平居中 */
+
+  .main-text {
+    font-size: 38px;              /* 字体大小 */
+    font-weight: bold;            /* 加粗字体 */
+    margin-top: 15%;              /* 上边距为视口高度的15% */
+  }
+
+  .text {
+    font-size: 24px;              /* 字体大小 */
+    font-weight: bold;            /* 加粗字体 */
+    color: #333;                  /* 字体颜色 */
+  }
+}
+</style>
diff --git a/fount/views/index.vue b/fount/views/index.vue
new file mode 100644
index 0000000..83ce842
--- /dev/null
+++ b/fount/views/index.vue
@@ -0,0 +1,43 @@
+<template>
+	<!-- 主容器：使用 el-container 布局结构 -->
+	<el-container>
+		<!-- 引入顶部导航组件 -->
+		<index-header></index-header>
+		<!-- 内层容器 -->
+		<el-container>
+			<!-- 引入左侧菜单栏组件（静态） -->
+			<index-aside></index-aside>
+			<!-- 引入主内容区域组件 -->
+			<index-main></index-main>
+		</el-container>
+	</el-container>
+</template>
+
+<script>
+	// 导入顶部导航组件
+	import IndexHeader from '@/components/index/IndexHeader'
+	// 导入左侧菜单栏组件（静态）
+	import IndexAside from '@/components/index/IndexAsideStatic'
+	// 导入主内容区域组件
+	import IndexMain from '@/components/index/IndexMain'
+
+	export default {
+		// 注册组件，使其可以在模板中使用
+		components: {
+			IndexHeader, // 顶部导航组件
+			IndexAside,  // 左侧菜单栏组件
+			IndexMain    // 主内容区域组件
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// 铺满全屏样式
+	.el-container {
+		position: absolute;   /* 绝对定位 */
+		width: 100%;          /* 宽度占满整个视口 */
+		top: 0;               /* 距离顶部为0 */
+		left: 0;              /* 距离左侧为0 */
+		bottom: 0;            /* 距离底部为0，实现高度自适应 */
+	}
+</style>
diff --git a/fount/views/login.vue b/fount/views/login.vue
new file mode 100644
index 0000000..460ded8
--- /dev/null
+++ b/fount/views/login.vue
@@ -0,0 +1,397 @@
+<template>
+  <div>
+    <div class="container loginIn" style="backgroundImage: url(http://codegen.caihongy.cn/20210128/ac0684f4d39c4b5ebf6694a20d747cd6.jpg)">
+
+      <div :class="2 == 1 ? 'left' : 2 == 2 ? 'left center' : 'left right'" style="backgroundColor: rgba(206, 221, 207, 0.4)">
+        <el-form class="login-form" label-position="left" :label-width="2 == 3 ? '56px' : '0px'">
+          <div class="title-container"><h3 class="title" style="color: rgba(31, 147, 255, 0.73)">房屋租赁系统登录</h3></div>
+          <el-form-item :label="2 == 3 ? '用户名' : ''" :class="'style'+2">
+            <span v-if="2 != 3" class="svg-container" style="color:rgba(16, 17, 17, 1);line-height:44px"><svg-icon icon-class="user" /></span>
+            <el-input placeholder="请输入用户名" name="username" type="text" v-model="rulesForm.username" />
+          </el-form-item>
+          <el-form-item :label="2 == 3 ? '密码' : ''" :class="'style'+2">
+            <span v-if="2 != 3" class="svg-container" style="color:rgba(16, 17, 17, 1);line-height:44px"><svg-icon icon-class="password" /></span>
+            <el-input placeholder="请输入密码" name="password" type="password" v-model="rulesForm.password" />
+          </el-form-item>
+          <el-form-item v-if="0 == '1'" class="code" :label="2 == 3 ? '验证码' : ''" :class="'style'+2">
+            <span v-if="2 != 3" class="svg-container" style="color:rgba(16, 17, 17, 1);line-height:44px"><svg-icon icon-class="code" /></span>
+            <el-input placeholder="请输入验证码" name="code" type="text" v-model="rulesForm.code" />
+            <div class="getCodeBt" @click="getRandCode(4)" style="height:44px;line-height:44px">
+              <span v-for="(item, index) in codes" :key="index" :style="{color:item.color,transform:item.rotate,fontSize:item.size}">{{ item.num }}</span>
+            </div>
+          </el-form-item>
+          <el-form-item label="角色" prop="loginInRole" class="role">
+            <el-radio
+              v-for="item in menus"
+	      v-if="item.hasBackLogin=='是'"
+              v-bind:key="item.roleName"
+              v-model="rulesForm.role"
+              :label="item.roleName"
+            >{{item.roleName}}</el-radio>
+          </el-form-item>
+          <el-button type="primary" @click="login()" class="loginInBt" style="padding:0;font-size:16px;border-radius:22px;height:44px;line-height:44px;width:100%;backgroundColor:rgba(64, 158, 255, 1); borderColor:rgba(64, 158, 255, 1); color:rgba(255, 255, 255, 1)">{{'1' == '1' ? '登录' : 'login'}}</el-button>
+          <el-form-item class="setting">
+                                                            <div style="color:rgba(153, 153, 153, 1)" class="register" @click="register('fangzhu')">注册房主</div>
+                                                                                                                                                                                                                                                                                                                                                            <!-- <div style="color:rgba(153, 153, 153, 1)" class="reset">修改密码</div> -->
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+import menu from "@/utils/menu";
+export default {
+  data() {
+    return {
+      rulesForm: {
+        username: "",
+        password: "",
+        role: "",
+        code: '',
+      },
+      menus: [],
+      tableName: "",
+      codes: [{
+        num: 1,
+        color: '#000',
+        rotate: '10deg',
+        size: '16px'
+      },{
+        num: 2,
+        color: '#000',
+        rotate: '10deg',
+        size: '16px'
+      },{
+        num: 3,
+        color: '#000',
+        rotate: '10deg',
+        size: '16px'
+      },{
+        num: 4,
+        color: '#000',
+        rotate: '10deg',
+        size: '16px'
+      }],
+    };
+  },
+  mounted() {
+    let menus = menu.list();
+    this.menus = menus;
+  },
+  created() {
+    this.setInputColor()
+    this.getRandCode()
+  },
+  methods: {
+    setInputColor(){
+      this.$nextTick(()=>{
+        document.querySelectorAll('.loginIn .el-input__inner').forEach(el=>{
+          el.style.backgroundColor = "rgba(255, 255, 255, 1)"
+          el.style.color = "rgba(20, 21, 21, 0.91)"
+          el.style.height = "44px"
+          el.style.lineHeight = "44px"
+          el.style.borderRadius = "22px"
+        })
+        document.querySelectorAll('.loginIn .style3 .el-form-item__label').forEach(el=>{
+          el.style.height = "44px"
+          el.style.lineHeight = "44px"
+        })
+        document.querySelectorAll('.loginIn .el-form-item__label').forEach(el=>{
+          el.style.color = "rgba(16, 17, 17, 1)"
+        })
+        setTimeout(()=>{
+          document.querySelectorAll('.loginIn .role .el-radio__label').forEach(el=>{
+            el.style.color = "#fff"
+          })
+        },350)
+      })
+
+    },
+    register(tableName){
+      this.$storage.set("loginTable", tableName);
+      this.$router.push({path:'/register'})
+    },
+    // 登陆
+    login() {
+      let code = ''
+      for(let i in this.codes) {
+        code += this.codes[i].num
+      }
+	  if ('0' == '1' && !this.rulesForm.code) {
+	     this.$message.error("请输入验证码");
+	    return;
+	  }
+      if ('0' == '1' && this.rulesForm.code.toLowerCase() != code.toLowerCase()) {
+         this.$message.error("验证码输入有误");
+		this.getRandCode()
+        return;
+      }
+      if (!this.rulesForm.username) {
+         this.$message.error("请输入用户名");
+        return;
+      }
+      if (!this.rulesForm.password) {
+         this.$message.error("请输入密码");
+        return;
+      }
+      if (!this.rulesForm.role) {
+         this.$message.error("请选择角色");
+        return;
+      }
+      let menus = this.menus;
+      for (let i = 0; i < menus.length; i++) {
+        if (menus[i].roleName == this.rulesForm.role) {
+          this.tableName = menus[i].tableName;
+        }
+      }
+      this.$http({
+        url: `${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,
+        method: "post"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$storage.set("Token", data.token);
+          this.$storage.set("role", this.rulesForm.role);
+          this.$storage.set("sessionTable", this.tableName);
+          this.$storage.set("adminName", this.rulesForm.username);
+          this.$router.replace({ path: "/index/" });
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    getRandCode(len = 4){
+      this.randomString(len)
+    },
+    randomString(len = 4) {
+      let chars = [
+          "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k",
+          "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
+          "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G",
+          "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
+          "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2",
+          "3", "4", "5", "6", "7", "8", "9"
+      ]
+      let colors = ["0", "1", "2","3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]
+      let sizes = ['14', '15', '16', '17', '18']
+
+      let output = [];
+      for (let i = 0; i < len; i++) {
+        // 随机验证码
+        let key = Math.floor(Math.random()*chars.length)
+        this.codes[i].num = chars[key]
+        // 随机验证码颜色
+        let code = '#'
+        for (let j = 0; j < 6; j++) {
+          let key = Math.floor(Math.random()*colors.length)
+          code += colors[key]
+        }
+        this.codes[i].color = code
+        // 随机验证码方向
+        let rotate = Math.floor(Math.random()*60)
+        let plus = Math.floor(Math.random()*2)
+        if(plus == 1) rotate = '-'+rotate
+        this.codes[i].rotate = 'rotate('+rotate+'deg)'
+        // 随机验证码字体大小
+        let size = Math.floor(Math.random()*sizes.length)
+        this.codes[i].size = sizes[size]+'px'
+      }
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.loginIn {
+  min-height: 100vh;
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+
+  .left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 360px;
+    height: 100%;
+
+    .login-form {
+      background-color: transparent;
+      width: 100%;
+      right: inherit;
+      padding: 0 12px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+    }
+
+    .title-container {
+      text-align: center;
+      font-size: 24px;
+
+      .title {
+        margin: 20px 0;
+      }
+    }
+
+    .el-form-item {
+      position: relative;
+
+      .svg-container {
+        padding: 6px 5px 6px 15px;
+        color: #889aa4;
+        vertical-align: middle;
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        padding: 0;
+        line-height: 40px;
+        width: 30px;
+        text-align: center;
+      }
+
+      .el-input {
+        display: inline-block;
+        height: 40px;
+        width: 100%;
+
+        & /deep/ input {
+          background: transparent;
+          border: 0px;
+          -webkit-appearance: none;
+          padding: 0 15px 0 30px;
+          color: #fff;
+          height: 40px;
+        }
+      }
+
+    }
+
+
+  }
+
+  .center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 360px;
+    transform: translate3d(-50%,-50%,0);
+    height: 446px;
+    border-radius: 8px;
+  }
+
+  .right {
+    position: absolute;
+    left: inherit;
+    right: 0;
+    top: 0;
+    width: 360px;
+    height: 100%;
+  }
+
+  .code {
+    .el-form-item__content {
+      position: relative;
+
+      .getCodeBt {
+        position: absolute;
+        right: 0;
+        top: 0;
+        line-height: 40px;
+        width: 100px;
+        background-color: rgba(51,51,51,0.4);
+        color: #fff;
+        text-align: center;
+        border-radius: 0 4px 4px 0;
+        height: 40px;
+        overflow: hidden;
+
+        span {
+          padding: 0 5px;
+          display: inline-block;
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+
+      .el-input {
+        & /deep/ input {
+          padding: 0 130px 0 30px;
+        }
+      }
+    }
+  }
+
+  .setting {
+    & /deep/ .el-form-item__content {
+      padding: 0 15px;
+      box-sizing: border-box;
+      line-height: 32px;
+      height: 32px;
+      font-size: 14px;
+      color: #999;
+      margin: 0 !important;
+
+      .register {
+        float: left;
+        width: 50%;
+      }
+
+      .reset {
+        float: right;
+        width: 50%;
+        text-align: right;
+      }
+    }
+  }
+
+  .style2 {
+    padding-left: 30px;
+
+    .svg-container {
+      left: -30px !important;
+    }
+
+    .el-input {
+      & /deep/ input {
+        padding: 0 15px !important;
+      }
+    }
+  }
+
+  .code.style2, .code.style3 {
+    .el-input {
+      & /deep/ input {
+        padding: 0 115px 0 15px;
+      }
+    }
+  }
+
+  .style3 {
+    & /deep/ .el-form-item__label {
+      padding-right: 6px;
+    }
+
+    .el-input {
+      & /deep/ input {
+        padding: 0 15px !important;
+      }
+    }
+  }
+
+  .role {
+    & /deep/ .el-form-item__label {
+      width: 56px !important;
+    }
+
+    & /deep/ .el-radio {
+      margin-right: 12px;
+    }
+  }
+
+}
+</style>
diff --git a/fount/views/modules/config/add-or-update.vue b/fount/views/modules/config/add-or-update.vue
new file mode 100644
index 0000000..e07102c
--- /dev/null
+++ b/fount/views/modules/config/add-or-update.vue
@@ -0,0 +1,356 @@
+<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>
diff --git a/fount/views/modules/config/list.vue b/fount/views/modules/config/list.vue
new file mode 100644
index 0000000..5857629
--- /dev/null
+++ b/fount/views/modules/config/list.vue
@@ -0,0 +1,519 @@
+<template>
+  <!-- 主容器块 -->
+  <div class="main-content">
+    <!-- 列表页显示条件 -->
+    <div v-if="showFlag">
+      <!-- 表单组件，用于搜索 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框布局 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 名称输入框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '名称' : ''">
+            <!-- 带前置图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.name" placeholder="名称" clearable></el-input>
+            <!-- 带后置图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.name" placeholder="名称" clearable></el-input>
+            <!-- 无图标输入框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.name" placeholder="名称" clearable></el-input>
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <!-- 带前置图标的查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 带后置图标的查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 无图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 按钮组布局 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮（带前置图标） -->
+            <el-button
+              v-if="isAuth('config','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+              type="success"
+              icon="el-icon-plus"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 新增按钮（带后置图标） -->
+            <el-button
+              v-if="isAuth('config','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+              type="success"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <!-- 新增按钮（无图标） -->
+            <el-button
+              v-if="isAuth('config','新增') && contents.btnAdAllIcon == 0"
+              type="success"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮（带前置图标） -->
+            <el-button
+              v-if="isAuth('config','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              icon="el-icon-delete"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 删除按钮（带后置图标） -->
+            <el-button
+              v-if="isAuth('config','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <!-- 删除按钮（无图标） -->
+            <el-button
+              v-if="isAuth('config','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 数据表格 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+            :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+            :border="contents.tableBorder"
+            :fit="contents.tableFit"
+            :stripe="contents.tableStripe"
+            :row-style="rowStyle"
+            :cell-style="cellStyle"
+            :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+            v-if="isAuth('config','查看')"
+            :data="dataList"
+            v-loading="dataListLoading"
+            @selection-change="selectionChangeHandler">
+            <!-- 多选列 -->
+            <el-table-column  v-if="contents.tableSelection"
+                type="selection"
+                header-align="center"
+                align="center"
+                width="50">
+            </el-table-column>
+            <!-- 索引列 -->
+            <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+            <!-- 名称列 -->
+            <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                    prop="name"
+                    header-align="center"
+		    label="名称">
+		     <template slot-scope="scope">
+                       {{scope.row.name}} <!-- 显示名称字段 -->
+                     </template>
+                </el-table-column>
+            <!-- 值列 -->
+            <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="value"
+                    header-align="center"
+                    width="200"
+                    label="值">
+                    <template slot-scope="scope">
+                      <div v-if="scope.row.value"> <!-- 如果存在值，显示图片 -->
+                        <img :src="scope.row.value.split(',')[0]" width="100" height="100">
+                      </div>
+                      <div v-else>无图片</div> <!-- 否则显示“无图片” -->
+                    </template>
+                  </el-table-column>
+            <!-- 操作列 -->
+            <el-table-column width="300" :align="contents.tableAlign"
+                header-align="center"
+                label="操作">
+                <template slot-scope="scope">
+                  <!-- 查看详情按钮（带前置图标） -->
+                  <el-button v-if="isAuth('config','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+                  <!-- 查看详情按钮（带后置图标） -->
+                  <el-button v-if="isAuth('config','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+                  <!-- 查看详情按钮（无图标） -->
+                  <el-button v-if="isAuth('config','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+                  <!-- 修改按钮（带前置图标） -->
+                  <el-button v-if="isAuth('config','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+                  <!-- 修改按钮（带后置图标） -->
+                  <el-button v-if="isAuth('config','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+                  <!-- 修改按钮（无图标） -->
+                  <el-button v-if="isAuth('config','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+                  <!-- 删除按钮（带前置图标） -->
+                  <el-button v-if="isAuth('config','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+                  <!-- 删除按钮（带后置图标） -->
+                  <el-button v-if="isAuth('config','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+                  <!-- 删除按钮（无图标） -->
+                  <el-button v-if="isAuth('config','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+          clsss="pages"
+          :layout="layouts"
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="Number(contents.pageEachNum)"
+          :total="totalPage"
+          :small="contents.pageStyle"
+          class="pagination-content"
+          :background="contents.pageBtnBG"
+          :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+<script>
+// 导入子组件：添加/修改页面
+import AddOrUpdate from "./add-or-update";
+
+export default {
+  data() {
+    return {
+      // 搜索表单数据模型
+      searchForm: {
+        key: ""
+      },
+      dataList: [],           // 数据列表
+      pageIndex: 1,           // 当前页码
+      pageSize: 10,           // 每页条数
+      totalPage: 0,           // 总页数
+      dataListLoading: false, // 数据加载状态
+      dataListSelections: [], // 已选择的数据项
+      showFlag: true,         // 是否显示主内容
+      sfshVisiable: false,    // 审核弹窗可见性
+      shForm: {},             // 审核表单数据
+      chartVisiable: false,   // 图表可见性
+      addOrUpdateFlag: false, // 添加/修改页面标志
+      contents: { /* 样式配置对象 */ }, // 样式配置
+      layouts: '',            // 分页布局
+    };
+  },
+  created() {
+    this.init();              // 初始化方法
+    this.getDataList();       // 获取数据列表
+    this.contentStyleChange(); // 动态样式调整
+  },
+  mounted() {
+    // 组件挂载完成后执行的操作
+  },
+  filters: {
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,''); // 过滤HTML标签和undefined
+    }
+  },
+  components: {
+    AddOrUpdate, // 注册子组件
+  },
+  methods: {
+    contentStyleChange() {
+      this.contentSearchStyleChange(); // 搜索框样式调整
+      this.contentBtnAdAllStyleChange(); // 按钮组样式调整
+      this.contentSearchBtnStyleChange(); // 搜索按钮样式调整
+      this.contentTableBtnStyleChange(); // 表格按钮样式调整
+      this.contentPageStyleChange(); // 分页样式调整
+    },
+    contentSearchStyleChange() {
+      this.$nextTick(() => {
+        // 输入框样式调整
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left';
+          if (this.contents.inputFontPosition == 2) textAlign = 'center';
+          if (this.contents.inputFontPosition == 3) textAlign = 'right';
+          el.style.textAlign = textAlign;
+          el.style.height = this.contents.inputHeight;
+          el.style.lineHeight = this.contents.inputHeight;
+          el.style.color = this.contents.inputFontColor;
+          el.style.fontSize = this.contents.inputFontSize;
+          el.style.borderWidth = this.contents.inputBorderWidth;
+          el.style.borderStyle = this.contents.inputBorderStyle;
+          el.style.borderColor = this.contents.inputBorderColor;
+          el.style.borderRadius = this.contents.inputBorderRadius;
+          el.style.backgroundColor = this.contents.inputBgColor;
+        });
+        if (this.contents.inputTitle) {
+          // 标签样式调整
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor;
+            el.style.fontSize = this.contents.inputTitleSize;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+        }
+        setTimeout(() => {
+          // 图标样式调整
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+        }, 10);
+      });
+    },
+    // 搜索按钮样式调整
+    contentSearchBtnStyleChange() {
+      this.$nextTick(() => {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight;
+          el.style.color = this.contents.searchBtnFontColor;
+          el.style.fontSize = this.contents.searchBtnFontSize;
+          el.style.borderWidth = this.contents.searchBtnBorderWidth;
+          el.style.borderStyle = this.contents.searchBtnBorderStyle;
+          el.style.borderColor = this.contents.searchBtnBorderColor;
+          el.style.borderRadius = this.contents.searchBtnBorderRadius;
+          el.style.backgroundColor = this.contents.searchBtnBgColor;
+        });
+      });
+    },
+    // 新增、批量删除按钮样式调整
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(() => {
+        // 成功按钮样式调整
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllAddFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor;
+        });
+        // 危险按钮样式调整
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllDelFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor;
+        });
+        // 警告按钮样式调整
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllWarnFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor;
+        });
+      });
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        if (this.contents.tableStripe) {
+          return { color: this.contents.tableStripeFontColor }; // 斑马纹字体颜色
+        }
+      } else {
+        return '';
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        if (this.contents.tableStripe) {
+          return { backgroundColor: this.contents.tableStripeBgColor }; // 斑马纹背景颜色
+        }
+      } else {
+        return '';
+      }
+    },
+    // 表头行样式
+    headerRowStyle({ row, rowIndex }) {
+      return { color: this.contents.tableHeaderFontColor }; // 表头字体颜色
+    },
+    // 表头单元格样式
+    headerCellStyle({ row, rowIndex }) {
+      return { backgroundColor: this.contents.tableHeaderBgColor }; // 表头背景颜色
+    },
+    // 表格按钮样式调整
+    contentTableBtnStyleChange() {
+      // 动态调整表格按钮样式
+    },
+    // 分页样式调整
+    contentPageStyleChange() {
+      let arr = [];
+      if (this.contents.pageTotal) arr.push('total'); // 总数
+      if (this.contents.pageSizes) arr.push('sizes'); // 每页条数选择器
+      if (this.contents.pagePrevNext) {
+        arr.push('prev'); // 上一页
+        if (this.contents.pagePager) arr.push('pager'); // 分页器
+        arr.push('next'); // 下一页
+      }
+      if (this.contents.pageJumper) arr.push('jumper'); // 跳转
+      this.layouts = arr.join(); // 拼接分页布局
+      this.contents.pageEachNum = 10; // 默认每页条数
+    },
+    init() {
+      // 初始化方法
+    },
+    search() {
+      this.pageIndex = 1; // 重置页码
+      this.getDataList(); // 获取数据列表
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true; // 开启加载状态
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      };
+      if (this.searchForm.name != '' && this.searchForm.name != undefined) {
+        params['name'] = '%' + this.searchForm.name + '%'; // 模糊查询参数
+      }
+      this.$http({
+        url: "config/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list; // 数据列表
+          this.totalPage = data.data.total; // 总条数
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false; // 关闭加载状态
+      });
+    },
+    // 每页条数变化
+    sizeChangeHandle(val) {
+      this.pageSize = val; // 更新每页条数
+      this.pageIndex = 1; // 重置页码
+      this.getDataList(); // 获取数据列表
+    },
+    // 当前页变化
+    currentChangeHandle(val) {
+      this.pageIndex = val; // 更新当前页码
+      this.getDataList(); // 获取数据列表
+    },
+    // 多选处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val; // 更新已选择的数据项
+    },
+    // 添加/修改操作
+    addOrUpdateHandler(id, type) {
+      this.showFlag = false; // 隐藏主内容
+      this.addOrUpdateFlag = true; // 显示添加/修改页面
+      this.crossAddOrUpdateFlag = false; // 交叉添加/修改标志
+      if (type != 'info') {
+        type = 'else'; // 设置类型
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, type); // 初始化子组件
+      });
+    },
+    // 下载文件
+    download(file) {
+      window.open(`${file}`); // 新窗口打开文件链接
+    },
+    // 删除操作
+    deleteHandler(id) {
+      var ids = id
+        ? [Number(id)] // 单个删除
+        : this.dataListSelections.map(item => {
+            return Number(item.id); // 批量删除
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "config/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search(); // 刷新数据
+              }
+            });
+          } else {
+            this.$message.error(data.msg); // 错误提示
+          }
+        });
+      });
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.slt {
+  margin: 0 !important; /* 移除外边距 */
+  display: flex; /* 弹性布局 */
+}
+
+.ad {
+  margin: 0 !important; /* 移除外边距 */
+  display: flex; /* 弹性布局 */
+}
+
+.pages {
+  & /deep/ el-pagination__sizes {
+    & /deep/ el-input__inner {
+      height: 22px; /* 高度 */
+      line-height: 22px; /* 行高 */
+    }
+  }
+}
+
+.el-button+.el-button {
+  margin: 0; /* 移除按钮间距 */
+}
+
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px; /* 高度 */
+    color: #333; /* 字体颜色 */
+    font-size: 14px; /* 字体大小 */
+    border-width: 1px; /* 边框宽度 */
+    border-style: solid; /* 边框样式 */
+    border-color: rgba(196, 210, 244, 1); /* 边框颜色 */
+    border-radius: 22px; /* 圆角 */
+    background-color: rgba(171, 239, 239, 1); /* 背景颜色 */
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px; /* 高度 */
+    color: #333; /* 字体颜色 */
+    font-size: 14px; /* 字体大小 */
+    border-width: 1px; /* 边框宽度 */
+    border-style: solid; /* 边框样式 */
+    border-color: rgba(196, 210, 244, 1); /* 边框颜色 */
+    border-radius: 22px; /* 圆角 */
+    background-color: rgba(240, 242, 124, 1); /* 背景颜色 */
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px; /* 高度 */
+    color: #333; /* 字体颜色 */
+    font-size: 14px; /* 字体大小 */
+    border-width: 1px; /* 边框宽度 */
+    border-style: solid; /* 边框样式 */
+    border-color: rgba(196, 210, 244, 1); /* 边框颜色 */
+    border-radius: 22px; /* 圆角 */
+    background-color: rgba(244, 150, 150, 1); /* 背景颜色 */
+  }
+
+  & /deep/ .el-button {
+    margin: 4px; /* 按钮间距 */
+  }
+}
+</style>
diff --git a/fount/views/modules/discussfangwuxinxi/add-or-update.vue b/fount/views/modules/discussfangwuxinxi/add-or-update.vue
new file mode 100644
index 0000000..5b9d1ba
--- /dev/null
+++ b/fount/views/modules/discussfangwuxinxi/add-or-update.vue
@@ -0,0 +1,445 @@
+<template>
+  <!-- 主容器块 -->
+  <div class="addEdit-block">
+    <!-- 表单组件，用于添加或修改 -->
+    <el-form
+      class="detail-form-content"
+      ref="ruleForm"
+      :model="ruleForm" <!-- 绑定表单数据模型 -->
+      :rules="rules" <!-- 表单验证规则 -->
+      label-width="80px" <!-- 标签宽度 -->
+	  :style="{backgroundColor:addEditForm.addEditBoxColor}" <!-- 动态背景颜色 -->
+    >
+      <el-row>
+        <!-- 空行占位 -->
+      </el-row>
+      <!-- 评论内容区域 -->
+      <el-row>
+        <el-col :span="24">
+          <!-- 评论内容输入框（编辑模式） -->
+          <el-form-item class="textarea" v-if="type!='info'" label="评论内容" prop="content">
+            <el-input
+              style="min-width: 200px; max-width: 600px;" <!-- 输入框宽度限制 -->
+              type="textarea" <!-- 文本域类型 -->
+              :rows="8" <!-- 行数 -->
+              placeholder="评论内容" <!-- 占位符 -->
+              v-model="ruleForm.content" readonly> <!-- 只读绑定 -->
+            </el-input>
+          </el-form-item>
+          <!-- 评论内容显示（查看模式） -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.content" label="评论内容" prop="content">
+                <span>{{ruleForm.content}}</span> <!-- 显示评论内容 -->
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 回复内容区域 -->
+      <el-row>
+        <el-col :span="24">
+          <!-- 回复内容输入框（编辑模式） -->
+          <el-form-item class="textarea" v-if="type!='info'" label="回复内容" prop="reply">
+            <el-input
+              style="min-width: 200px; max-width: 600px;" <!-- 输入框宽度限制 -->
+              type="textarea" <!-- 文本域类型 -->
+              :rows="8" <!-- 行数 -->
+              placeholder="回复内容" <!-- 占位符 -->
+              v-model="ruleForm.reply"> <!-- 绑定回复内容 -->
+            </el-input>
+          </el-form-item>
+          <!-- 回复内容显示（查看模式） -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.reply" label="回复内容" prop="reply">
+                <span>{{ruleForm.reply}}</span> <!-- 显示回复内容 -->
+            </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)) {
+        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","selectFontSize":"14px","btnCancelBorderColor":"rgba(152, 129, 129, 1)","inputBorderRadius":"22px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"22px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"22px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(210, 194, 194, 0.29)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"rgba(152, 129, 129, 1)","btnCancelBgColor":"rgba(143, 222, 143, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"22px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"rgba(152, 129, 129, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"22px","inputBgColor":"rgba(252, 250, 250, 1)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"22px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(152, 129, 129, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","uploadBorderColor":"rgba(152, 129, 129, 1)","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"22px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"}, // 样式配置对象
+      id: '', // 数据ID
+      type: '', // 页面类型（新增、编辑、查看）
+      ro:{
+	refid : false, // 关联表ID只读状态
+	userid : false, // 用户ID只读状态
+	content : false, // 评论内容只读状态
+	reply : false, // 回复内容只读状态
+      },
+      ruleForm: {
+                	        refid: '', // 关联表ID
+	                        	        userid: '', // 用户ID
+	                        	        content: '', // 评论内容
+	                        	        reply: '', // 回复内容
+	                      },
+      rules: {
+                  refid: [
+                            { required: true, message: '关联表id不能为空', trigger: 'blur' }, // 关联表ID必填校验
+                                    	                                                              ],
+                  userid: [
+                            { required: true, message: '用户id不能为空', trigger: 'blur' }, // 用户ID必填校验
+                                    	                                                              ],
+                  content: [
+                            { required: true, message: '评论内容不能为空', trigger: 'blur' }, // 评论内容必填校验
+                                    	                                                              ],
+                  reply: [
+                                    	                                                              ], // 回复内容无校验
+              }
+    };
+  },
+  props: ["parent"], // 父组件传递的属性
+  computed: {}, // 计算属性
+  created() {
+	this.addEditStyleChange(); // 初始化样式调整
+	this.addEditUploadStyleChange(); // 初始化上传样式调整
+  },
+  methods: {
+    // 下载文件
+    download(file){
+      window.open(`${file}`); // 新窗口打开文件链接
+    },
+    // 初始化方法
+    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=='refid'){
+            this.ruleForm.refid = obj[o]; // 设置关联表ID
+	    this.ro.refid = true; // 设置只读
+            continue;
+          }
+	            	            if(o=='userid'){
+            this.ruleForm.userid = obj[o]; // 设置用户ID
+	    this.ro.userid = true; // 设置只读
+            continue;
+          }
+	            	            if(o=='content'){
+            this.ruleForm.content = obj[o]; // 设置评论内容
+	    this.ro.content = true; // 设置只读
+            continue;
+          }
+	            	            if(o=='reply'){
+            this.ruleForm.reply = obj[o]; // 设置回复内容
+	    this.ro.reply = true; // 设置只读
+            continue;
+          }
+	                    }
+                                                                              }
+                                                                                                      },
+    // 查看详情
+    info(id) {
+      this.$http({
+        url: `discussfangwuxinxi/info/${id}`, // 请求详情接口
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data; // 更新表单数据
+        } else {
+          this.$message.error(data.msg); // 错误提示
+        }
+      });
+    },
+    // 提交表单
+    onSubmit() {
+                  // ${column.compare}
+                              // ${column.compare}
+                              // ${column.compare}
+                              // ${column.compare}
+                                                                                                            this.$refs["ruleForm"].validate(valid => { // 表单验证
+        if (valid) {
+          this.$http({
+            url: `discussfangwuxinxi/${!this.ruleForm.id ? "save" : "update"}`, // 动态请求保存或更新接口
+            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.discussfangwuxinxiCrossAddOrUpdateFlag = false; // 关闭跨页面标志
+                  this.parent.search(); // 刷新父组件数据
+                  this.parent.contentStyleChange(); // 刷新父组件样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg); // 错误提示
+            }
+          });
+        }
+      });
+    },
+    // 获取UUID
+    getUUID () {
+      return new Date().getTime(); // 返回当前时间戳
+    },
+    // 返回上一页
+    back() {
+      this.parent.showFlag = true; // 显示父组件标志
+      this.parent.addOrUpdateFlag = false; // 关闭当前页面
+      this.parent.discussfangwuxinxiCrossAddOrUpdateFlag = false; // 关闭跨页面标志
+      this.parent.contentStyleChange(); // 刷新父组件样式
+    },
+    // 动态调整样式
+	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; // 背景颜色
+	    });
+	    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
+	    document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+	      el.style.height = this.addEditForm.selectHeight; // 高度
+	      el.style.color = this.addEditForm.selectFontColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.selectFontSize; // 字体大小
+	      el.style.borderWidth = this.addEditForm.selectBorderWidth; // 边框宽度
+	      el.style.borderStyle = this.addEditForm.selectBorderStyle; // 边框样式
+	      el.style.borderColor = this.addEditForm.selectBorderColor; // 边框颜色
+	      el.style.borderRadius = this.addEditForm.selectBorderRadius; // 圆角
+	      el.style.backgroundColor = this.addEditForm.selectBgColor; // 背景颜色
+	    });
+	    document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+	      el.style.lineHeight = this.addEditForm.selectHeight; // 行高
+	      el.style.color = this.addEditForm.selectLableColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.selectLableFontSize; // 字体大小
+	    });
+	    document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+	      el.style.color = this.addEditForm.selectIconFontColor; // 图标颜色
+	      el.style.fontSize = this.addEditForm.selectIconFontSize; // 图标大小
+	    });
+	    // date
+	    document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+	      el.style.height = this.addEditForm.dateHeight; // 高度
+	      el.style.color = this.addEditForm.dateFontColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.dateFontSize; // 字体大小
+	      el.style.borderWidth = this.addEditForm.dateBorderWidth; // 边框宽度
+	      el.style.borderStyle = this.addEditForm.dateBorderStyle; // 边框样式
+	      el.style.borderColor = this.addEditForm.dateBorderColor; // 边框颜色
+	      el.style.borderRadius = this.addEditForm.dateBorderRadius; // 圆角
+	      el.style.backgroundColor = this.addEditForm.dateBgColor; // 背景颜色
+	    });
+	    document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+	      el.style.lineHeight = this.addEditForm.dateHeight; // 行高
+	      el.style.color = this.addEditForm.dateLableColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.dateLableFontSize; // 字体大小
+	    });
+	    document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+	      el.style.color = this.addEditForm.dateIconFontColor; // 图标颜色
+	      el.style.fontSize = this.addEditForm.dateIconFontSize; // 图标大小
+	      el.style.lineHeight = this.addEditForm.dateHeight; // 行高
+	    });
+	    // upload
+	    let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'; // 图标行高
+	    document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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; // 背景颜色
+	    });
+	    document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+	      el.style.lineHeight = this.addEditForm.uploadHeight; // 行高
+	      el.style.color = this.addEditForm.uploadLableColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.uploadLableFontSize; // 字体大小
+	    });
+	    document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+	      el.style.color = this.addEditForm.uploadIconFontColor; // 图标颜色
+	      el.style.fontSize = this.addEditForm.uploadIconFontSize; // 图标大小
+	      el.style.lineHeight = iconLineHeight; // 行高
+	      el.style.display = 'block'; // 显示方式
+	    });
+	    // 多文本输入框
+	    document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+	      el.style.height = this.addEditForm.textareaHeight; // 高度
+	      el.style.color = this.addEditForm.textareaFontColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.textareaFontSize; // 字体大小
+	      el.style.borderWidth = this.addEditForm.textareaBorderWidth; // 边框宽度
+	      el.style.borderStyle = this.addEditForm.textareaBorderStyle; // 边框样式
+	      el.style.borderColor = this.addEditForm.textareaBorderColor; // 边框颜色
+	      el.style.borderRadius = this.addEditForm.textareaBorderRadius; // 圆角
+	      el.style.backgroundColor = this.addEditForm.textareaBgColor; // 背景颜色
+	    });
+	    document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+	      // el.style.lineHeight = this.addEditForm.textareaHeight; // 行高
+	      el.style.color = this.addEditForm.textareaLableColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.textareaLableFontSize; // 字体大小
+	    });
+	    // 保存按钮
+	    document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+	      el.style.width = this.addEditForm.btnSaveWidth; // 宽度
+	      el.style.height = this.addEditForm.btnSaveHeight; // 高度
+	      el.style.color = this.addEditForm.btnSaveFontColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.btnSaveFontSize; // 字体大小
+	      el.style.borderWidth = this.addEditForm.btnSaveBorderWidth; // 边框宽度
+	      el.style.borderStyle = this.addEditForm.btnSaveBorderStyle; // 边框样式
+	      el.style.borderColor = this.addEditForm.btnSaveBorderColor; // 边框颜色
+	      el.style.borderRadius = this.addEditForm.btnSaveBorderRadius; // 圆角
+	      el.style.backgroundColor = this.addEditForm.btnSaveBgColor; // 背景颜色
+	    });
+	    // 返回按钮
+	    document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+	      el.style.width = this.addEditForm.btnCancelWidth; // 宽度
+	      el.style.height = this.addEditForm.btnCancelHeight; // 高度
+	      el.style.color = this.addEditForm.btnCancelFontColor; // 字体颜色
+	      el.style.fontSize = this.addEditForm.btnCancelFontSize; // 字体大小
+	      el.style.borderWidth = this.addEditForm.btnCancelBorderWidth; // 边框宽度
+	      el.style.borderStyle = this.addEditForm.btnCancelBorderStyle; // 边框样式
+	      el.style.borderColor = this.addEditForm.btnCancelBorderColor; // 边框颜色
+	      el.style.borderRadius = this.addEditForm.btnCancelBorderRadius; // 圆角
+	      el.style.backgroundColor = this.addEditForm.btnCancelBgColor; // 背景颜色
+	    });
+	  });
+	},
+	// 动态调整上传组件样式
+	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; // 编辑器内容区域高度
+  }
+}
+.amap-wrapper {
+  width: 100%; // 地图宽度
+  height: 500px; // 地图高度
+}
+.search-box {
+  position: absolute; // 搜索框定位
+}
+.addEdit-block {
+	margin: -10px; // 外边距调整
+}
+.detail-form-content {
+	padding: 12px; // 内边距调整
+}
+.btn .el-button {
+  padding: 0; // 按钮内边距调整
+}
+</style>
diff --git a/fount/views/modules/discussfangwuxinxi/list.vue b/fount/views/modules/discussfangwuxinxi/list.vue
new file mode 100644
index 0000000..78470b2
--- /dev/null
+++ b/fount/views/modules/discussfangwuxinxi/list.vue
@@ -0,0 +1,525 @@
+<template>
+  <!-- 主容器 -->
+  <div class="main-content">
+    <!-- 列表页显示区域 -->
+    <div v-if="showFlag">
+      <!-- 表单组件，用于搜索 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框布局 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 搜索输入框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '评论内容' : ''">
+            <!-- 带前缀图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.content" placeholder="评论内容" clearable></el-input>
+            <!-- 带后缀图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.content" placeholder="评论内容" clearable></el-input>
+            <!-- 不带图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.content" placeholder="评论内容" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索按钮 -->
+          <el-form-item>
+            <!-- 带前缀图标的查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 带后缀图标的查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 不带图标的查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 新增、删除按钮布局 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮（带前缀图标） -->
+            <el-button
+              v-if="isAuth('discussfangwuxinxi','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+              type="success"
+              icon="el-icon-plus"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 新增按钮（带后缀图标） -->
+            <el-button
+              v-if="isAuth('discussfangwuxinxi','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+              type="success"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <!-- 新增按钮（不带图标） -->
+            <el-button
+              v-if="isAuth('discussfangwuxinxi','新增') && contents.btnAdAllIcon == 0"
+              type="success"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮（带前缀图标） -->
+            <el-button
+              v-if="isAuth('discussfangwuxinxi','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              icon="el-icon-delete"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 删除按钮（带后缀图标） -->
+            <el-button
+              v-if="isAuth('discussfangwuxinxi','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <!-- 删除按钮（不带图标） -->
+            <el-button
+              v-if="isAuth('discussfangwuxinxi','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <!-- 表格组件 -->
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+            :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+            :border="contents.tableBorder"
+            :fit="contents.tableFit"
+            :stripe="contents.tableStripe"
+            :row-style="rowStyle"
+            :cell-style="cellStyle"
+            :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+            :data="dataList"
+            v-loading="dataListLoading"
+            @selection-change="selectionChangeHandler">
+            <!-- 多选列 -->
+            <el-table-column  v-if="contents.tableSelection"
+                type="selection"
+                header-align="center"
+                align="center"
+                width="50">
+            </el-table-column>
+            <!-- 索引列 -->
+            <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+            <!-- 评论内容列 -->
+            <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                    prop="content"
+                    header-align="center"
+		    label="评论内容">
+		     <template slot-scope="scope">
+                       {{scope.row.content}} <!-- 显示评论内容 -->
+                     </template>
+            </el-table-column>
+            <!-- 回复内容列 -->
+            <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                    prop="reply"
+                    header-align="center"
+		    label="回复内容">
+		     <template slot-scope="scope">
+                       {{scope.row.reply}} <!-- 显示回复内容 -->
+                     </template>
+            </el-table-column>
+            <!-- 操作列 -->
+            <el-table-column width="300" :align="contents.tableAlign"
+                header-align="center"
+                label="操作">
+                <template slot-scope="scope">
+                  <!-- 详情按钮（带前缀图标） -->
+                  <el-button v-if=" contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+                  <!-- 详情按钮（带后缀图标） -->
+                  <el-button v-if=" contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+                  <!-- 详情按钮（不带图标） -->
+                  <el-button v-if=" contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+                  <!-- 修改按钮（带前缀图标） -->
+                  <el-button v-if="isAuth('discussfangwuxinxi','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+                  <!-- 修改按钮（带后缀图标） -->
+                  <el-button v-if="isAuth('discussfangwuxinxi','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+                  <!-- 修改按钮（不带图标） -->
+                  <el-button v-if="isAuth('discussfangwuxinxi','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+                  <!-- 查看评论按钮（带前缀图标） -->
+                  <el-button v-if="isAuth('discussfangwuxinxi','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+                  <!-- 查看评论按钮（带后缀图标） -->
+                  <el-button v-if="isAuth('discussfangwuxinxi','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+                  <!-- 查看评论按钮（不带图标） -->
+                  <el-button v-if="isAuth('discussfangwuxinxi','查看评论') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+                  <!-- 回复按钮（带前缀图标） -->
+                  <el-button v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'回复':'' }}</el-button>
+                  <!-- 回复按钮（带后缀图标） -->
+                  <el-button v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'回复':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+                  <!-- 回复按钮（不带图标） -->
+                  <el-button v-if="contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'回复':'' }}</el-button>
+                  <!-- 删除按钮（带前缀图标） -->
+                  <el-button v-if=" contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+                  <!-- 删除按钮（带后缀图标） -->
+                  <el-button v-if=" contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+                  <!-- 删除按钮（不带图标） -->
+                  <el-button v-if=" contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+          clsss="pages"
+          :layout="layouts"
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="Number(contents.pageEachNum)"
+          :total="totalPage"
+          :small="contents.pageStyle"
+          class="pagination-content"
+          :background="contents.pageBtnBG"
+          :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面组件 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+<script>
+// 导入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      searchForm: { // 搜索表单数据模型
+        key: ""
+      },
+      dataList: [], // 数据列表
+      pageIndex: 1, // 当前页码
+      pageSize: 10, // 每页数据量
+      totalPage: 0, // 总页数
+      dataListLoading: false, // 数据加载状态
+      dataListSelections: [], // 已选择的数据项
+      showFlag: true, // 是否显示主内容
+      sfshVisiable: false, // 审核弹窗可见性
+      shForm: {}, // 审核表单数据
+      chartVisiable: false, // 图表弹窗可见性
+      addOrUpdateFlag:false, // 添加/修改页面标志
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"}, // 样式配置对象
+      layouts: '', // 分页布局
+    };
+  },
+  created() {
+    this.init(); // 初始化方法
+    this.getDataList(); // 获取数据列表
+    this.contentStyleChange(); // 动态调整样式
+  },
+  mounted() {
+    // 页面挂载后执行的操作
+  },
+  filters: {
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,''); // 过滤HTML标签和undefined值
+    }
+  },
+  components: {
+    AddOrUpdate, // 注册子组件
+  },
+  methods: {
+    contentStyleChange() {
+      this.contentSearchStyleChange(); // 调整搜索框样式
+      this.contentBtnAdAllStyleChange(); // 调整新增/删除按钮样式
+      this.contentSearchBtnStyleChange(); // 调整搜索按钮样式
+      this.contentTableBtnStyleChange(); // 调整表格按钮样式
+      this.contentPageStyleChange(); // 调整分页样式
+    },
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left'; // 默认文本对齐方式
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'; // 居中对齐
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'; // 右对齐
+          el.style.textAlign = textAlign; // 设置文本对齐
+          el.style.height = this.contents.inputHeight; // 高度
+          el.style.lineHeight = this.contents.inputHeight; // 行高
+          el.style.color = this.contents.inputFontColor; // 字体颜色
+          el.style.fontSize = this.contents.inputFontSize; // 字体大小
+          el.style.borderWidth = this.contents.inputBorderWidth; // 边框宽度
+          el.style.borderStyle = this.contents.inputBorderStyle; // 边框样式
+          el.style.borderColor = this.contents.inputBorderColor; // 边框颜色
+          el.style.borderRadius = this.contents.inputBorderRadius; // 圆角
+          el.style.backgroundColor = this.contents.inputBgColor; // 背景颜色
+        });
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor; // 标签字体颜色
+            el.style.fontSize = this.contents.inputTitleSize; // 标签字体大小
+            el.style.lineHeight = this.contents.inputHeight; // 标签行高
+          });
+        }
+        setTimeout(()=>{
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor; // 前缀图标颜色
+            el.style.lineHeight = this.contents.inputHeight; // 前缀图标行高
+          });
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor; // 后缀图标颜色
+            el.style.lineHeight = this.contents.inputHeight; // 后缀图标行高
+          });
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight; // 图标行高
+          });
+        },10);
+      });
+    },
+    // 搜索按钮样式调整
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight; // 高度
+          el.style.color = this.contents.searchBtnFontColor; // 字体颜色
+          el.style.fontSize = this.contents.searchBtnFontSize; // 字体大小
+          el.style.borderWidth = this.contents.searchBtnBorderWidth; // 边框宽度
+          el.style.borderStyle = this.contents.searchBtnBorderStyle; // 边框样式
+          el.style.borderColor = this.contents.searchBtnBorderColor; // 边框颜色
+          el.style.borderRadius = this.contents.searchBtnBorderRadius; // 圆角
+          el.style.backgroundColor = this.contents.searchBtnBgColor; // 背景颜色
+        });
+      });
+    },
+    // 新增、批量删除按钮样式调整
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight; // 高度
+          el.style.color = this.contents.btnAdAllAddFontColor; // 字体颜色
+          el.style.fontSize = this.contents.btnAdAllFontSize; // 字体大小
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth; // 边框宽度
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle; // 边框样式
+          el.style.borderColor = this.contents.btnAdAllBorderColor; // 边框颜色
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius; // 圆角
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor; // 背景颜色
+        });
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight; // 高度
+          el.style.color = this.contents.btnAdAllDelFontColor; // 字体颜色
+          el.style.fontSize = this.contents.btnAdAllFontSize; // 字体大小
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth; // 边框宽度
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle; // 边框样式
+          el.style.borderColor = this.contents.btnAdAllBorderColor; // 边框颜色
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius; // 圆角
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor; // 背景颜色
+        });
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight; // 高度
+          el.style.color = this.contents.btnAdAllWarnFontColor; // 字体颜色
+          el.style.fontSize = this.contents.btnAdAllFontSize; // 字体大小
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth; // 边框宽度
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle; // 边框样式
+          el.style.borderColor = this.contents.btnAdAllBorderColor; // 边框颜色
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius; // 圆角
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor; // 背景颜色
+        });
+      });
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) { // 奇数行
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}; // 条纹字体颜色
+        }
+      } else {
+        return ''; // 偶数行无样式
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}){
+      if (rowIndex % 2 == 1) { // 奇数行
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}; // 条纹背景颜色
+        }
+      } else {
+        return ''; // 偶数行无样式
+      }
+    },
+    // 表格头部行样式
+    headerRowStyle({ row, rowIndex}){
+      return {color: this.contents.tableHeaderFontColor}; // 表头字体颜色
+    },
+    // 表格头部单元格样式
+    headerCellStyle({ row, rowIndex}){
+      return {backgroundColor: this.contents.tableHeaderBgColor}; // 表头背景颜色
+    },
+    // 表格按钮样式调整
+    contentTableBtnStyleChange(){
+      // 动态调整表格按钮样式，暂时未启用
+    },
+    // 分页样式调整
+    contentPageStyleChange(){
+      let arr = []; // 分页布局数组
+      if(this.contents.pageTotal) arr.push('total'); // 显示总条数
+      if(this.contents.pageSizes) arr.push('sizes'); // 显示每页条数选择
+      if(this.contents.pagePrevNext){
+        arr.push('prev'); // 显示上一页
+        if(this.contents.pagePager) arr.push('pager'); // 显示页码
+        arr.push('next'); // 显示下一页
+      }
+      if(this.contents.pageJumper) arr.push('jumper'); // 显示跳转输入框
+      this.layouts = arr.join(); // 组合分页布局
+      this.contents.pageEachNum = 10; // 默认每页条数
+    },
+    init () {
+      // 初始化方法，暂无具体实现
+    },
+    search() {
+      this.pageIndex = 1; // 重置页码
+      this.getDataList(); // 重新获取数据
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true; // 开启加载状态
+      let params = {
+        page: this.pageIndex, // 当前页码
+        limit: this.pageSize, // 每页条数
+        sort: 'id', // 排序字段
+	refid : this.$route.query.refid, // 关联ID
+      }
+      if(this.searchForm.content!='' && this.searchForm.content!=undefined){
+        params['content'] = '%' + this.searchForm.content + '%'; // 模糊查询条件
+      }
+      this.$http({
+        url: "discussfangwuxinxi/page", // 请求接口
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list; // 更新数据列表
+          this.totalPage = data.data.total; // 更新总条数
+        } else {
+          this.dataList = []; // 清空数据列表
+          this.totalPage = 0; // 清空总条数
+        }
+        this.dataListLoading = false; // 关闭加载状态
+      });
+    },
+    // 每页条数变化
+    sizeChangeHandle(val) {
+      this.pageSize = val; // 更新每页条数
+      this.pageIndex = 1; // 重置页码
+      this.getDataList(); // 重新获取数据
+    },
+    // 当前页变化
+    currentChangeHandle(val) {
+      this.pageIndex = val; // 更新当前页码
+      this.getDataList(); // 重新获取数据
+    },
+    // 多选变化
+    selectionChangeHandler(val) {
+      this.dataListSelections = val; // 更新已选择项
+    },
+    // 添加/修改操作
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false; // 隐藏主内容
+      this.addOrUpdateFlag = true; // 显示添加/修改页面
+      this.crossAddOrUpdateFlag = false; // 跨页面标志
+      if(type!='info'){
+        type = 'else'; // 设置类型
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type); // 初始化子组件
+      });
+    },
+    // 查看评论操作
+    disscussListHandler(id,type) {
+	this.$router.push({path:'/discussdiscussfangwuxinxi',query:{refid:id}}); // 跳转到评论页面
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`); // 新窗口打开文件链接
+    },
+    // 删除操作
+    deleteHandler(id) {
+      var ids = id
+        ? [Number(id)] // 单个删除
+        : this.dataListSelections.map(item => {
+            return Number(item.id); // 批量删除
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定", // 确认按钮文字
+        cancelButtonText: "取消", // 取消按钮文字
+        type: "warning" // 提示类型
+      }).then(() => {
+        this.$http({
+          url: "discussfangwuxinxi/delete", // 请求接口
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功", // 成功提示
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search(); // 刷新数据
+              }
+            });
+          } else {
+            this.$message.error(data.msg); // 错误提示
+          }
+        });
+      });
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .slt {
+    margin: 0 !important; // 移除外边距
+    display: flex; // 使用弹性布局
+  }
+
+  .ad {
+    margin: 0 !important; // 移除外边距
+    display: flex; // 使用弹性布局
+  }
+
+  .pages {
+    & /deep/ el-pagination__sizes{ // 深度选择器，调整分页尺寸选择框
+      & /deep/ el-input__inner {
+        height: 22px; // 高度
+        line-height: 22px; // 行高
+      }
+    }
+  }
+
+  .el-button+.el-button {
+    margin:0; // 移除按钮间距
+  }
+
+  .tables {
+    & /deep/ .el-button--success { // 成功按钮样式
+      height: 40px;
+      color: #333;
+      font-size: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(196, 210, 244, 1);
+      border-radius: 22px;
+      background-color: rgba(171, 239, 239, 1);
+    }
+
+    & /deep/ .el-button--primary { // 主要按钮样式
+      height: 40px;
+      color: #333;
+      font-size: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(196, 210, 244, 1);
+      border-radius: 22px;
+      background-color: rgba(240, 242, 124, 1);
+    }
+
+    & /deep/ .el-button--danger { // 危险按钮样式
+      height: 40px;
+      color: #333;
+      font-size: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(196, 210, 244, 1);
+      border-radius: 22px;
+      background-color: rgba(244, 150, 150, 1);
+    }
+
+    & /deep/ .el-button {
+      margin: 4px; // 按钮间距
+    }
+  }
+</style>
diff --git a/fount/views/modules/discusswoyaodangfangzhu/add-or-update.vue b/fount/views/modules/discusswoyaodangfangzhu/add-or-update.vue
new file mode 100644
index 0000000..2dd529c
--- /dev/null
+++ b/fount/views/modules/discusswoyaodangfangzhu/add-or-update.vue
@@ -0,0 +1,332 @@
+<template>
+  <!-- 主容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+      class="detail-form-content"
+      ref="ruleForm" <!-- 表单引用 -->
+      :model="ruleForm" <!-- 绑定表单数据模型 -->
+      :rules="rules" <!-- 绑定验证规则 -->
+      label-width="80px" <!-- 标签宽度 -->
+      :style="{backgroundColor:addEditForm.addEditBoxColor}" <!-- 动态背景色 -->
+    >
+      <!-- 空行 -->
+      <el-row></el-row>
+      <!-- 评论内容区域 -->
+      <el-row>
+        <el-col :span="24"> <!-- 占满整列 -->
+          <!-- 编辑模式下的评论内容输入框 -->
+          <el-form-item class="textarea" v-if="type!='info'" label="评论内容" prop="content">
+            <el-input
+              style="min-width: 200px; max-width: 600px;" <!-- 输入框宽度限制 -->
+              type="textarea" <!-- 文本域类型 -->
+              :rows="8" <!-- 显示行数 -->
+              placeholder="评论内容" <!-- 占位符 -->
+              v-model="ruleForm.content" readonly> <!-- 双向绑定并只读 -->
+            </el-input>
+          </el-form-item>
+          <!-- 查看模式下的评论内容显示 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.content" label="评论内容" prop="content">
+                <span>{{ruleForm.content}}</span> <!-- 显示评论内容 -->
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 回复内容区域 -->
+      <el-row>
+        <el-col :span="24"> <!-- 占满整列 -->
+          <!-- 编辑模式下的回复内容输入框 -->
+          <el-form-item class="textarea" v-if="type!='info'" label="回复内容" prop="reply">
+            <el-input
+              style="min-width: 200px; max-width: 600px;" <!-- 输入框宽度限制 -->
+              type="textarea" <!-- 文本域类型 -->
+              :rows="8" <!-- 显示行数 -->
+              placeholder="回复内容" <!-- 占位符 -->
+              v-model="ruleForm.reply"> <!-- 双向绑定回复内容 -->
+            </el-input>
+          </el-form-item>
+          <!-- 查看模式下的回复内容显示 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.reply" label="回复内容" prop="reply">
+                <span>{{ruleForm.reply}}</span> <!-- 显示回复内容 -->
+            </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)) {
+        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","selectFontSize":"14px",...}, // 完整样式省略
+      id: '', // 数据ID
+      type: '', // 页面类型（新增/编辑/查看）
+      ro:{ // 字段只读状态
+        refid : false,
+        userid : false,
+        content : false,
+        reply : false,
+      },
+      ruleForm: { // 表单数据模型
+        refid: '',
+        userid: '',
+        content: '',
+        reply: '',
+      },
+      rules: { // 表单验证规则
+        refid: [
+          { required: true, message: '关联表id不能为空', trigger: 'blur' }, // 必填校验
+        ],
+        userid: [
+          { required: true, message: '用户id不能为空', trigger: 'blur' }, // 必填校验
+        ],
+        content: [
+          { required: true, message: '评论内容不能为空', trigger: 'blur' }, // 必填校验
+        ],
+        reply: [] // 无校验
+      }
+    };
+  },
+  props: ["parent"], // 接收父组件传参
+  computed: {}, // 计算属性
+  created() { // 生命周期：创建时
+    this.addEditStyleChange(); // 初始化样式
+    this.addEditUploadStyleChange(); // 初始化上传样式
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`); // 新窗口打开文件链接
+    },
+    // 初始化方法
+    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=='refid'){ // 处理refid字段
+            this.ruleForm.refid = obj[o];
+            this.ro.refid = true; // 设置只读
+            continue;
+          }
+          if(o=='userid'){ // 处理userid字段
+            this.ruleForm.userid = obj[o];
+            this.ro.userid = true; // 设置只读
+            continue;
+          }
+          if(o=='content'){ // 处理content字段
+            this.ruleForm.content = obj[o];
+            this.ro.content = true; // 设置只读
+            continue;
+          }
+          if(o=='reply'){ // 处理reply字段
+            this.ruleForm.reply = obj[o];
+            this.ro.reply = true; // 设置只读
+            continue;
+          }
+        }
+      }
+    },
+    // 获取详情数据
+    info(id) {
+      this.$http({
+        url: `discusswoyaodangfangzhu/info/${id}`, // 请求路径
+        method: "get" // 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: `discusswoyaodangfangzhu/${!this.ruleForm.id ? "save" : "update"}`, // 动态路径
+            method: "post", // 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.discusswoyaodangfangzhuCrossAddOrUpdateFlag = false;
+                  this.parent.search(); // 刷新数据
+                  this.parent.contentStyleChange(); // 样式更新
+                }
+              });
+            } else {
+              this.$message.error(data.msg); // 错误提示
+            }
+          });
+        }
+      });
+    },
+    // 获取UUID
+    getUUID () {
+      return new Date().getTime(); // 返回时间戳
+    },
+    // 返回上一页
+    back() {
+      this.parent.showFlag = true; // 显示父组件
+      this.parent.addOrUpdateFlag = false; // 关闭当前页
+      this.parent.discusswoyaodangfangzhuCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange(); // 样式更新
+    },
+    // 动态样式调整
+    addEditStyleChange() {
+      this.$nextTick(()=>{ // 等待DOM更新
+        // input样式应用
+        document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.inputHeight; // 高度
+          el.style.color = this.addEditForm.inputFontColor; // 字体颜色
+          // ...其他样式设置（省略）
+        });
+        // textarea样式应用
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight; // 高度
+          // ...其他样式设置（省略）
+        });
+        // 按钮样式应用
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth; // 宽度
+          // ...其他样式设置（省略）
+        });
+      })
+    },
+    // 上传控件样式调整
+    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; // 高度
+          // ...其他样式设置（省略）
+        })
+      })
+    },
+  }
+};
+</script>
+<style lang="scss">
+.editor{
+  height: 500px; /* 编辑器高度 */
+  & /deep/ .ql-container { /* 深度选择器覆盖子组件样式 */
+	  height: 310px; /* 内容区高度 */
+  }
+}
+.amap-wrapper { /* 地图容器 */
+  width: 100%; /* 全宽 */
+  height: 500px; /* 固定高度 */
+}
+.search-box { /* 搜索框定位 */
+  position: absolute; /* 绝对定位 */
+}
+.addEdit-block { /* 主容器 */
+	margin: -10px; /* 负边距抵消布局间隙 */
+}
+.detail-form-content { /* 表单内容 */
+	padding: 12px; /* 内边距 */
+}
+.btn .el-button { /* 按钮样式 */
+  padding: 0; /* 移除默认padding */
+}
+</style>
diff --git a/fount/views/modules/discusswoyaodangfangzhu/list.vue b/fount/views/modules/discusswoyaodangfangzhu/list.vue
new file mode 100644
index 0000000..160cc89
--- /dev/null
+++ b/fount/views/modules/discusswoyaodangfangzhu/list.vue
@@ -0,0 +1,737 @@
+<template>
+  <!-- 主容器 -->
+  <div class="main-content">
+    <!-- 列表页主体 -->
+    <div v-if="showFlag">
+      <!-- 搜索表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索区域布局 -->
+        <el-row
+          :gutter="20"
+          class="slt"
+          :style="{
+            justifyContent:
+              contents.searchBoxPosition == '1' ? 'flex-start' :
+              contents.searchBoxPosition == '2' ? 'center' : 'flex-end'
+          }"
+        >
+          <!-- 评论内容搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '评论内容' : ''">
+            <!-- 带前缀图标的输入框 -->
+            <el-input
+              v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1"
+              prefix-icon="el-icon-search"
+              v-model="searchForm.content"
+              placeholder="评论内容"
+              clearable
+            ></el-input>
+            <!-- 带后缀图标的输入框 -->
+            <el-input
+              v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2"
+              suffix-icon="el-icon-search"
+              v-model="searchForm.content"
+              placeholder="评论内容"
+              clearable
+            ></el-input>
+            <!-- 无图标的输入框 -->
+            <el-input
+              v-if="contents.inputIcon == 0"
+              v-model="searchForm.content"
+              placeholder="评论内容"
+              clearable
+            ></el-input>
+          </el-form-item>
+
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <!-- 前置图标的查询按钮 -->
+            <el-button
+              v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1"
+              icon="el-icon-search"
+              type="success"
+              @click="search()"
+            >{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 后置图标的查询按钮 -->
+            <el-button
+              v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2"
+              type="success"
+              @click="search()"
+            >{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 无图标的查询按钮 -->
+            <el-button
+              v-if="contents.searchBtnIcon == 0"
+              type="success"
+              @click="search()"
+            >{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+
+        <!-- 操作按钮区域 -->
+        <el-row
+          class="ad"
+          :style="{
+            justifyContent:
+              contents.btnAdAllBoxPosition == '1' ? 'flex-start' :
+              contents.btnAdAllBoxPosition == '2' ? 'center' : 'flex-end'
+          }"
+        >
+          <el-form-item>
+            <!-- 新增按钮（前置图标） -->
+            <el-button
+              v-if="isAuth('discusswoyaodangfangzhu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+              type="success"
+              icon="el-icon-plus"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 新增按钮（后置图标） -->
+            <el-button
+              v-if="isAuth('discusswoyaodangfangzhu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+              type="success"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <!-- 新增按钮（无图标） -->
+            <el-button
+              v-if="isAuth('discusswoyaodangfangzhu','新增') && contents.btnAdAllIcon == 0"
+              type="success"
+              @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+
+            <!-- 删除按钮（前置图标） -->
+            <el-button
+              v-if="isAuth('discusswoyaodangfangzhu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              icon="el-icon-delete"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 删除按钮（后置图标） -->
+            <el-button
+              v-if="isAuth('discusswoyaodangfangzhu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <!-- 删除按钮（无图标） -->
+            <el-button
+              v-if="isAuth('discusswoyaodangfangzhu','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+              :disabled="dataListSelections.length <= 0"
+              type="danger"
+              @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+
+      <!-- 表格区域 -->
+      <div class="table-content">
+        <!-- 数据表格 -->
+        <el-table
+          class="tables"
+          :size="contents.tableSize"
+          :show-header="contents.tableShowHeader"
+          :header-row-style="headerRowStyle"
+          :header-cell-style="headerCellStyle"
+          :border="contents.tableBorder"
+          :fit="contents.tableFit"
+          :stripe="contents.tableStripe"
+          :row-style="rowStyle"
+          :cell-style="cellStyle"
+          :style="{
+            width: '100%',
+            fontSize: contents.tableContentFontSize,
+            color: contents.tableContentFontColor
+          }"
+          :data="dataList"
+          v-loading="dataListLoading"
+          @selection-change="selectionChangeHandler"
+        >
+          <!-- 多选列 -->
+          <el-table-column
+            v-if="contents.tableSelection"
+            type="selection"
+            header-align="center"
+            align="center"
+            width="50"
+          ></el-table-column>
+
+          <!-- 索引列 -->
+          <el-table-column
+            label="索引"
+            v-if="contents.tableIndex"
+            type="index"
+            width="50"
+          />
+
+          <!-- 评论内容列 -->
+          <el-table-column
+            :sortable="contents.tableSortable"
+            :align="contents.tableAlign"
+            prop="content"
+            header-align="center"
+            label="评论内容"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.content }}
+            </template>
+          </el-table-column>
+
+          <!-- 回复内容列 -->
+          <el-table-column
+            :sortable="contents.tableSortable"
+            :align="contents.tableAlign"
+            prop="reply"
+            header-align="center"
+            label="回复内容"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.reply }}
+            </template>
+          </el-table-column>
+
+          <!-- 操作列 -->
+          <el-table-column
+            width="300"
+            :align="contents.tableAlign"
+            header-align="center"
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <!-- 查看详情按钮 -->
+              <el-button
+                v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1"
+                type="success"
+                icon="el-icon-tickets"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id,'info')"
+              >{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button
+                v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2"
+                type="success"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id,'info')"
+              >{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button
+                v-if="contents.tableBtnIcon == 0"
+                type="success"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id,'info')"
+              >{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+
+              <!-- 修改按钮 -->
+              <el-button
+                v-if="isAuth('discusswoyaodangfangzhu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1"
+                type="primary"
+                icon="el-icon-edit"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button
+                v-if="isAuth('discusswoyaodangfangzhu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2"
+                type="primary"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button
+                v-if="isAuth('discusswoyaodangfangzhu','修改') && contents.tableBtnIcon == 0"
+                type="primary"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+
+              <!-- 查看评论按钮 -->
+              <el-button
+                v-if="isAuth('discusswoyaodangfangzhu','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1"
+                type="primary"
+                icon="el-icon-edit"
+                size="mini"
+                @click="disscussListHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+              <el-button
+                v-if="isAuth('discusswoyaodangfangzhu','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2"
+                type="primary"
+                size="mini"
+                @click="disscussListHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'查看评论':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button
+                v-if="isAuth('discusswoyaodangfangzhu','查看评论') && contents.tableBtnIcon == 0"
+                type="primary"
+                size="mini"
+                @click="disscussListHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+
+              <!-- 回复按钮 -->
+              <el-button
+                v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1"
+                type="primary"
+                icon="el-icon-edit"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'回复':'' }}</el-button>
+              <el-button
+                v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2"
+                type="primary"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'回复':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button
+                v-if="contents.tableBtnIcon == 0"
+                type="primary"
+                size="mini"
+                @click="addOrUpdateHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'回复':'' }}</el-button>
+
+              <!-- 删除按钮 -->
+              <el-button
+                v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1"
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                @click="deleteHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button
+                v-if="contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2"
+                type="danger"
+                size="mini"
+                @click="deleteHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button
+                v-if="contents.tableBtnIcon == 0"
+                type="danger"
+                size="mini"
+                @click="deleteHandler(scope.row.id)"
+              >{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页组件 -->
+        <el-pagination
+          clsss="pages"
+          :layout="layouts"
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="Number(contents.pageEachNum)"
+          :total="totalPage"
+          :small="contents.pageStyle"
+          class="pagination-content"
+          :background="contents.pageBtnBG"
+          :style="{
+            textAlign:
+              contents.pagePosition == 1 ? 'left' :
+              contents.pagePosition == 2 ? 'center' : 'right'
+          }"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 导入子组件
+import AddOrUpdate from "./add-or-update";
+
+export default {
+  data() {
+    return {
+      // 搜索表单数据
+      searchForm: { key: "" },
+      // 数据列表
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页数量
+      pageSize: 10,
+      // 总页数
+      totalPage: 0,
+      // 加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 页面显示标志
+      showFlag: true,
+      // 审核弹窗可见性
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表可见性
+      chartVisiable: false,
+      // 子组件显示标志
+      addOrUpdateFlag: false,
+
+      // 动态样式配置对象
+      contents: {
+        "searchBtnFontColor": "#333",
+        "pagePosition": "1",
+        "inputFontSize": "14px",
+        // ...其他样式配置省略
+      },
+
+      // 分页布局配置
+      layouts: '',
+    };
+  },
+  created() {
+    // 初始化方法
+    this.init();
+    // 获取数据列表
+    this.getDataList();
+    // 样式初始化
+    this.contentStyleChange()
+  },
+  mounted() {
+    // 生命周期挂载后
+  },
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  components: {
+    // 注册子组件
+    AddOrUpdate,
+  },
+  methods: {
+    // 样式统一管理
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+
+    // 搜索框样式
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(()=>{
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+
+    // 搜索按钮样式
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+
+    // 新增/删除按钮样式
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+
+    // 行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+
+    // 单元格样式
+    cellStyle({ row, rowIndex}){
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+
+    // 表头行样式
+    headerRowStyle({ row, rowIndex}){
+      return {color: this.contents.tableHeaderFontColor}
+    },
+
+    // 表头单元格样式
+    headerCellStyle({ row, rowIndex}){
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+
+    // 表格按钮样式
+    contentTableBtnStyleChange(){
+      // ...
+    },
+
+    // 分页样式
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+
+    // 初始化方法
+    init () {
+      // ...
+    },
+
+    // 搜索方法
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+        refid : this.$route.query.refid,
+      }
+      if(this.searchForm.content!='' && this.searchForm.content!=undefined){
+        params['content'] = '%' + this.searchForm.content + '%'
+      }
+      this.$http({
+        url: "discusswoyaodangfangzhu/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+
+    // 每页数变化
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+
+    // 当前页变化
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+
+    // 多选变化
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+
+    // 添加/更新处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+
+    // 查看评论
+    disscussListHandler(id,type) {
+      this.$router.push({path:'/discussdiscusswoyaodangfangzhu',query:{refid:id}});
+    },
+
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+        ? [Number(id)]
+        : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "discusswoyaodangfangzhu/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  /* 搜索区域布局 */
+  .slt {
+    margin: 0 !important;
+    display: flex;
+  }
+
+  /* 操作区域布局 */
+  .ad {
+    margin: 0 !important;
+    display: flex;
+  }
+
+  /* 分页样式 */
+  .pages {
+    & /deep/ el-pagination__sizes{
+      & /deep/ el-input__inner {
+        height: 22px;
+        line-height: 22px;
+      }
+    }
+  }
+
+  /* 按钮间距 */
+  .el-button+.el-button {
+    margin:0;
+  }
+
+  /* 表格按钮样式 */
+  .tables {
+    & /deep/ .el-button--success {
+      height: 40px;
+      color: #333;
+      font-size: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(196, 210, 244, 1);
+      border-radius: 22px;
+      background-color: rgba(171, 239, 239, 1);
+    }
+
+    & /deep/ .el-button--primary {
+      height: 40px;
+      color: #333;
+      font-size: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(196, 210, 244, 1);
+      border-radius: 22px;
+      background-color: rgba(240, 242, 124, 1);
+    }
+
+    & /deep/ .el-button--danger {
+      height: 40px;
+      color: #333;
+      font-size: 14px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(196, 210, 244, 1);
+      border-radius: 22px;
+      background-color: rgba(244, 150, 150, 1);
+    }
+
+    & /deep/ .el-button {
+      margin: 4px;
+    }
+  }
+</style>
diff --git a/fount/views/modules/fangwubaoxiu/add-or-update.vue b/fount/views/modules/fangwubaoxiu/add-or-update.vue
new file mode 100644
index 0000000..27f09b5
--- /dev/null
+++ b/fount/views/modules/fangwubaoxiu/add-or-update.vue
@@ -0,0 +1,309 @@
+<template>
+  <!-- 主容器div -->
+  <div class="addEdit-block">
+    <!-- ElementUI表单组件 -->
+    <el-form
+      <!-- 表单类名 -->
+      class="detail-form-content"
+      <!-- 表单引用标识 -->
+      ref="ruleForm"
+      <!-- 数据模型绑定 -->
+      :model="ruleForm"
+      <!-- 验证规则 -->
+      :rules="rules"
+      <!-- 标签宽度 -->
+      label-width="80px"
+      <!-- 动态背景色 -->
+      :style="{backgroundColor:addEditForm.addEditBoxColor}"
+    >
+      <!-- ElementUI布局行 -->
+      <el-row>
+        <!-- 布局列(合同编号) -->
+        <el-col :span="12">
+          <!-- 编辑模式输入项 -->
+          <el-form-item class="input" v-if="type!='info'" label="合同编号" prop="hetongbianhao">
+            <!-- 可编辑输入框 -->
+            <el-input v-model="ruleForm.hetongbianhao"
+                placeholder="合同编号" clearable  :readonly="ro.hetongbianhao"></el-input>
+          </el-form-item>
+          <!-- 查看模式展示 -->
+          <div v-else>
+            <el-form-item class="input" label="合同编号" prop="hetongbianhao">
+              <!-- 只读展示 -->
+              <el-input v-model="ruleForm.hetongbianhao"
+                placeholder="合同编号" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+
+        <!-- 房屋名称字段(结构同上) -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'" label="房屋名称" prop="fangwumingcheng">
+            <el-input v-model="ruleForm.fangwumingcheng"
+                placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+              <el-input v-model="ruleForm.fangwumingcheng"
+                placeholder="房屋名称" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+
+        <!-- 其他字段按相同结构省略... -->
+
+        <!-- 图片上传区域 -->
+        <el-col :span="24">
+          <!-- 上传控件 -->
+          <el-form-item class="upload" v-if="type!='info' && !ro.tupian" label="图片" prop="tupian">
+            <!-- 自定义上传组件 -->
+            <file-upload
+              tip="点击上传图片"
+              action="file/upload"
+              :limit="3"
+              :multiple="true"
+              :fileUrls="ruleForm.tupian?ruleForm.tupian:''"
+              @change="tupianUploadChange"
+            ></file-upload>
+          </el-form-item>
+          <!-- 图片预览 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.tupian" label="图片" prop="tupian">
+              <!-- 循环显示图片 -->
+              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.tupian.split(',')"
+                :src="item" width="100" height="100">
+            </el-form-item>
+          </div>
+        </el-col>
+
+        <!-- 报修日期字段 -->
+        <el-col :span="12">
+          <el-form-item class="date" v-if="type!='info'" label="报修日期" prop="baoxiuriqi">
+            <!-- 日期选择器 -->
+            <el-date-picker
+              format="yyyy 年 MM 月 dd 日"
+              value-format="yyyy-MM-dd"
+              v-model="ruleForm.baoxiuriqi"
+              type="date"
+              placeholder="报修日期">
+            </el-date-picker>
+          </el-form-item>
+          <!-- 只读展示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.baoxiuriqi" label="报修日期" prop="baoxiuriqi">
+              <el-input v-model="ruleForm.baoxiuriqi"
+                placeholder="报修日期" readonly></el-input>
+            </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)) {
+        callback(new Error("请输入正确的URL地址"));
+      } else {
+        callback();
+      }
+    };
+    // 手机号验证函数
+    var validateMobile = (rule, value, callback) => {
+      if(!value){
+        callback();
+      } else if (!isMobile(value)) {
+        callback(new Error("请输入正确的手机号码"));
+      } else {
+        callback();
+      }
+    };
+    // ...其他验证函数省略
+
+    return {
+      // 表单样式配置对象
+      addEditForm: {"btnSaveFontColor":"#fff",...}, // 实际为完整样式对象
+      id: '', // 记录ID
+      type: '', // 操作类型
+      ro:{ // 只读控制对象
+        hetongbianhao : false,
+        // ...其他字段只读状态
+      },
+      ruleForm: { // 表单数据对象
+        hetongbianhao: '',
+        // ...其他字段初始化
+      },
+      leixingOptions: [], // 下拉选项
+      rules: { // 验证规则对象
+        hetongbianhao: [],
+        // ...其他字段规则
+      }
+    };
+  },
+  props: ["parent"], // 接收父组件参数
+  computed: {}, // 计算属性
+  created() { // 生命周期钩子
+    this.addEditStyleChange()
+    this.addEditUploadStyleChange()
+  },
+  methods: {
+    // 文件下载方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    init(id,type) {
+      if (id) {
+        this.id = id;
+        this.type = type;
+      }
+      // 根据类型加载数据
+      if(this.type=='info'||this.type=='else'){
+        this.info(id);
+      }else if(this.type=='cross'){
+        // 处理跨表关联数据
+      }
+      // 获取用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      // 设置下拉选项
+      this.leixingOptions = "水工,电工,木工".split(',')
+    },
+    // 获取详情数据
+    info(id) {
+      this.$http({
+        url: `fangwubaoxiu/info/${id}`,
+        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: `fangwubaoxiu/${!this.ruleForm.id ? "save" : "update"}`,
+            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.fangwubaoxiuCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 获取UUID
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回列表页
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.fangwubaoxiuCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 图片上传回调
+    tupianUploadChange(fileUrls) {
+      this.ruleForm.tupian = fileUrls;
+      this.addEditUploadStyleChange()
+    },
+    // 动态样式更新
+    addEditStyleChange() {
+      this.$nextTick(() => {
+        // 通过DOM操作设置各表单控件样式
+      })
+    },
+    // 上传控件样式更新
+    addEditUploadStyleChange() {
+      this.$nextTick(() => {
+        // 设置上传组件样式
+      })
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.editor{
+  height: 500px; // 富文本高度
+  & /deep/ .ql-container {
+	  height: 310px; // 内容区高度
+  }
+}
+.amap-wrapper {
+  width: 100%; // 地图容器
+  height: 500px;
+}
+.search-box {
+  position: absolute; // 定位搜索框
+}
+.addEdit-block {
+	margin: -10px; // 容器外边距
+}
+.detail-form-content {
+	padding: 12px; // 表单内边距
+}
+.btn .el-button {
+  padding: 0; // 按钮内边距
+}
+</style>
diff --git a/fount/views/modules/fangwubaoxiu/list.vue b/fount/views/modules/fangwubaoxiu/list.vue
new file mode 100644
index 0000000..d62eba4
--- /dev/null
+++ b/fount/views/modules/fangwubaoxiu/list.vue
@@ -0,0 +1,769 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索框表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框行，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房屋名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋名称' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+          </el-form-item>
+          <!-- 类型搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '类型' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.leixing" placeholder="类型" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.leixing" placeholder="类型" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.leixing" placeholder="类型" clearable></el-input>
+          </el-form-item>
+          <!-- 房主姓名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房主姓名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+          </el-form-item>
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwubaoxiu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangwubaoxiu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangwubaoxiu','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwubaoxiu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangwubaoxiu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangwubaoxiu','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('fangwubaoxiu','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 合同编号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="hetongbianhao"
+                            header-align="center"
+                            label="合同编号">
+            <template slot-scope="scope">
+              {{scope.row.hetongbianhao}}
+            </template>
+          </el-table-column>
+          <!-- 房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 小区列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiaoqu"
+                            header-align="center"
+                            label="小区">
+            <template slot-scope="scope">
+              {{scope.row.xiaoqu}}
+            </template>
+          </el-table-column>
+          <!-- 报修名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="baoxiumingcheng"
+                            header-align="center"
+                            label="报修名称">
+            <template slot-scope="scope">
+              {{scope.row.baoxiumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="leixing"
+                            header-align="center"
+                            label="类型">
+            <template slot-scope="scope">
+              {{scope.row.leixing}}
+            </template>
+          </el-table-column>
+          <!-- 报修内容列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="baoxiuneirong"
+                            header-align="center"
+                            label="报修内容">
+            <template slot-scope="scope">
+              {{scope.row.baoxiuneirong}}
+            </template>
+          </el-table-column>
+          <!-- 图片列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="tupian"
+                           header-align="center"
+                           width="200"
+                           label="图片">
+            <template slot-scope="scope">
+              <div v-if="scope.row.tupian">
+                <img :src="scope.row.tupian.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 报修日期列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="baoxiuriqi"
+                            header-align="center"
+                            label="报修日期">
+            <template slot-scope="scope">
+              {{scope.row.baoxiuriqi}}
+            </template>
+          </el-table-column>
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+          <!-- 房主姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuxingming"
+                            header-align="center"
+                            label="房主姓名">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuxingming}}
+            </template>
+          </el-table-column>
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+          <!-- 联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+          <!-- 审核回复列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="shhf"
+                           header-align="center"
+                           label="审核回复">
+          </el-table-column>
+          <!-- 审核状态列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核状态">
+            <template slot-scope="scope">
+              <span style="margin-right:10px">{{scope.row.sfsh=='是'?'通过':'未通过'}}</span>
+            </template>
+          </el-table-column>
+          <!-- 审核操作列 -->
+          <el-table-column v-if="isAuth('fangwubaoxiu','审核')"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核">
+            <template slot-scope="scope">
+              <el-button  type="text" icon="el-icon-edit" size="small" @click="shDialog(scope.row)">审核</el-button>
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('fangwubaoxiu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 处理按钮 -->
+              <el-button v-if="isAuth('fangwubaoxiu','处理') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="weixiuchuliCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'处理':'' }}</el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','处理') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="weixiuchuliCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'处理':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','处理') && contents.tableBtnIcon == 0" type="success" size="mini" @click="weixiuchuliCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'处理':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('fangwubaoxiu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('fangwubaoxiu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwubaoxiu','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+    <!-- 处理页面 -->
+    <weixiuchuli-cross-add-or-update v-if="weixiuchuliCrossAddOrUpdateFlag" :parent="this" ref="weixiuchuliCrossaddOrUpdate"></weixiuchuli-cross-add-or-update>
+    <!-- 审核对话框 -->
+    <el-dialog
+        title="审核"
+        :visible.sync="sfshVisiable"
+        width="50%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="审核状态">
+          <el-select v-model="shForm.sfsh" placeholder="审核状态">
+            <el-option label="通过" value="是"></el-option>
+            <el-option label="不通过" value="否"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" :rows="8" v-model="shForm.shhf"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="shDialog">取 消</el-button>
+        <el-button type="primary" @click="shHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+// 引入处理组件
+import weixiuchuliCrossAddOrUpdate from "../weixiuchuli/add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索框表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 处理页面显示状态
+      weixiuchuliCrossAddOrUpdateFlag: false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+    weixiuchuliCrossAddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索和样式变更
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索框按钮样式变更
+    contentSearchBtnStyleChange() {
+      this.$nextTick(() => {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(() => {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 处理页面打开
+    weixiuchuliCrossAddOrUpdateHandler(row,type){
+      this.showFlag = false;
+      this.addOrUpdateFlag = false;
+      this.weixiuchuliCrossAddOrUpdateFlag = true;
+      this.$storage.set('crossObj',row);
+      this.$storage.set('crossTable','fangwubaoxiu');
+      this.$nextTick(() => {
+        this.$refs.weixiuchuliCrossaddOrUpdate.init(row.id,type);
+      });
+    },
+    // 初始化
+    init () {
+      // 初始化类型选项
+      this.leixingOptions = "水工,电工,木工".split(',')
+    },
+    // 搜索功能
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.fangwumingcheng!='' && this.searchForm.fangwumingcheng!=undefined){
+        params['fangwumingcheng'] = '%' + this.searchForm.fangwumingcheng + '%'
+      }
+      if(this.searchForm.leixing!='' && this.searchForm.leixing!=undefined){
+        params['leixing'] = '%' + this.searchForm.leixing + '%'
+      }
+      if(this.searchForm.fangzhuxingming!='' && this.searchForm.fangzhuxingming!=undefined){
+        params['fangzhuxingming'] = '%' + this.searchForm.fangzhuxingming + '%'
+      }
+      if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){
+        params['yonghuming'] = '%' + this.searchForm.yonghuming + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "fangwubaoxiu/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 审核对话框打开/关闭
+    shDialog(row){
+      this.sfshVisiable = !this.sfshVisiable;
+      if(row){
+        this.shForm = {
+          hetongbianhao: row.hetongbianhao,
+          fangwumingcheng: row.fangwumingcheng,
+          fangwuleixing: row.fangwuleixing,
+          xiaoqu: row.xiaoqu,
+          baoxiumingcheng: row.baoxiumingcheng,
+          leixing: row.leixing,
+          baoxiuneirong: row.baoxiuneirong,
+          tupian: row.tupian,
+          baoxiuriqi: row.baoxiuriqi,
+          fangzhuzhanghao: row.fangzhuzhanghao,
+          fangzhuxingming: row.fangzhuxingming,
+          yonghuming: row.yonghuming,
+          lianxidianhua: row.lianxidianhua,
+          sfsh: row.sfsh,
+          shhf: row.shhf,
+          id: row.id
+        }
+      }
+    },
+    // 审核处理
+    shHandler(){
+      this.$confirm(`确定操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangwubaoxiu/update",
+          method: "post",
+          data: this.shForm
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+                this.shDialog()
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangwubaoxiu/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    }
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索功能行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/fangwuleixing/add-or-update.vue b/fount/views/modules/fangwuleixing/add-or-update.vue
new file mode 100644
index 0000000..149b7a7
--- /dev/null
+++ b/fount/views/modules/fangwuleixing/add-or-update.vue
@@ -0,0 +1,499 @@
+<template>
+  <!-- 外层容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+      class="detail-form-content"
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="80px"
+	  :style="{backgroundColor:addEditForm.addEditBoxColor}"
+    >
+      <!-- 表单项布局行 -->
+      <el-row>
+        <!-- 占据12列（半屏） -->
+        <el-col :span="12">
+          <!-- 房屋类型输入项，非查看模式显示可编辑框 -->
+          <el-form-item class="input" v-if="type!='info'" label="房屋类型" prop="fangwuleixing">
+            <el-input v-model="ruleForm.fangwuleixing"
+              placeholder="房屋类型" clearable :readonly="ro.fangwuleixing"></el-input>
+          </el-form-item>
+          <!-- 查看模式下显示只读输入框 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+              <el-input v-model="ruleForm.fangwuleixing"
+                placeholder="房屋类型" readonly></el-input>
+            </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>
+// 导入验证工具函数：数字、整数、邮箱、电话、手机号、URL、身份证校验
+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)) {
+        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",
+        "selectFontSize": "14px",
+        "btnCancelBorderColor": "rgba(152, 129, 129, 1)",
+        "inputBorderRadius": "22px",
+        "inputFontSize": "14px",
+        "textareaBgColor": "#fff",
+        "btnSaveFontSize": "14px",
+        "textareaBorderRadius": "22px",
+        "uploadBgColor": "#fff",
+        "textareaBorderStyle": "solid",
+        "btnCancelWidth": "88px",
+        "textareaHeight": "120px",
+        "dateBgColor": "#fff",
+        "btnSaveBorderRadius": "22px",
+        "uploadLableFontSize": "14px",
+        "textareaBorderWidth": "1px",
+        "inputLableColor": "#606266",
+        "addEditBoxColor": "rgba(210, 194, 194, 0.29)",
+        "dateIconFontSize": "14px",
+        "btnSaveBgColor": "#409EFF",
+        "uploadIconFontColor": "#8c939d",
+        "textareaBorderColor": "rgba(152, 129, 129, 1)",
+        "btnCancelBgColor": "rgba(143, 222, 143, 1)",
+        "selectLableColor": "#606266",
+        "btnSaveBorderStyle": "solid",
+        "dateBorderWidth": "1px",
+        "dateLableFontSize": "14px",
+        "dateBorderRadius": "22px",
+        "btnCancelBorderStyle": "solid",
+        "selectLableFontSize": "14px",
+        "selectBorderStyle": "solid",
+        "selectIconFontColor": "#C0C4CC",
+        "btnCancelHeight": "44px",
+        "inputHeight": "40px",
+        "btnCancelFontColor": "#606266",
+        "dateBorderColor": "rgba(152, 129, 129, 1)",
+        "dateIconFontColor": "#C0C4CC",
+        "uploadBorderStyle": "solid",
+        "dateBorderStyle": "solid",
+        "dateLableColor": "#606266",
+        "dateFontSize": "14px",
+        "inputBorderWidth": "1px",
+        "uploadIconFontSize": "28px",
+        "selectHeight": "40px",
+        "inputFontColor": "#606266",
+        "uploadHeight": "148px",
+        "textareaLableColor": "#606266",
+        "textareaLableFontSize": "14px",
+        "btnCancelFontSize": "14px",
+        "inputBorderStyle": "solid",
+        "btnCancelBorderRadius": "22px",
+        "inputBgColor": "rgba(252, 250, 250, 1)",
+        "inputLableFontSize": "14px",
+        "uploadLableColor": "#606266",
+        "uploadBorderRadius": "22px",
+        "btnSaveHeight": "44px",
+        "selectBgColor": "#fff",
+        "btnSaveWidth": "88px",
+        "selectIconFontSize": "14px",
+        "dateHeight": "40px",
+        "selectBorderColor": "rgba(152, 129, 129, 1)",
+        "inputBorderColor": "rgba(152, 129, 129, 1)",
+        "uploadBorderColor": "rgba(152, 129, 129, 1)",
+        "textareaFontColor": "#606266",
+        "selectBorderWidth": "1px",
+        "dateFontColor": "#606266",
+        "btnCancelBorderWidth": "1px",
+        "uploadBorderWidth": "1px",
+        "textareaFontSize": "14px",
+        "selectBorderRadius": "22px",
+        "selectFontColor": "#606266",
+        "btnSaveBorderColor": "#409EFF",
+        "btnSaveBorderWidth": "1px"
+      },
+      id: '',         // 当前操作数据ID
+      type: '',       // 操作类型（新增、编辑、详情）
+      ro: {           // 只读字段控制
+        fangwuleixing: false,
+      },
+      ruleForm: {     // 表单绑定数据模型
+        fangwuleixing: '',
+      },
+      rules: {        // 表单验证规则
+        fangwuleixing: [
+          { required: true, message: '房屋类型不能为空', trigger: 'blur' },
+        ],
+      }
+    };
+  },
+  props: ["parent"], // 接收父组件传参
+  computed: {},       // 计算属性（当前未使用）
+  created() {         // 组件创建时执行
+    this.addEditStyleChange();   // 动态设置表单样式
+    this.addEditUploadStyleChange(); // 设置上传控件样式
+  },
+  methods: {
+    // 下载文件方法
+    download(file) {
+      window.open(`${file}`);
+    },
+    // 初始化方法，用于加载数据或初始化状态
+    init(id, type) {
+      if (id) {
+        this.id = id;
+        this.type = type;
+      }
+      // 如果是查看详情或其它模式则加载详情数据
+      if (this.type == 'info' || this.type == 'else') {
+        this.info(id);
+      } else if (this.type == 'cross') {
+        // 如果是跨表操作，则从storage中读取数据填充
+        var obj = this.$storage.getObj('crossObj');
+        for (var o in obj) {
+          if (o == 'fangwuleixing') {
+            this.ruleForm.fangwuleixing = obj[o];
+            this.ro.fangwuleixing = true;
+            continue;
+          }
+        }
+      }
+      // 获取用户会话信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    // 加载详情数据
+    info(id) {
+      this.$http({
+        url: `fangwuleixing/info/${id}`,
+        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: `fangwuleixing/${!this.ruleForm.id ? "save" : "update"}`,
+            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.fangwuleixingCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回上一界面
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.fangwuleixingCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 根据配置动态设置各控件样式
+    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;
+        });
+        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 控件样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+
+        // date 控件样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+
+        // upload 控件样式
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+
+        // textarea 控件样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+
+        // 提交按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+
+        // 返回/取消按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+
+    // 上传控件额外样式设置
+    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;
+  }
+}
+
+// 地图容器样式
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+// 搜索框定位样式
+.search-box {
+  position: absolute;
+}
+
+// 主容器样式
+.addEdit-block {
+	margin: -10px;
+}
+
+// 表单内容内边距
+.detail-form-content {
+	padding: 12px;
+}
+
+// 按钮样式调整
+.btn .el-button {
+  padding: 0;
+}
+</style>
diff --git a/fount/views/modules/fangwuleixing/list.vue b/fount/views/modules/fangwuleixing/list.vue
new file mode 100644
index 0000000..052d4fd
--- /dev/null
+++ b/fount/views/modules/fangwuleixing/list.vue
@@ -0,0 +1,524 @@
+<template>
+  <!-- 主内容区域 -->
+  <div class="main-content">
+    <!-- 列表页显示区域 -->
+    <div v-if="showFlag">
+      <!-- 搜索结果表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索表头，控制对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房屋类型搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋类型' : ''">
+            <!-- 前缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwuleixing" placeholder="房屋类型" clearable></el-input>
+            <!-- 后缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwuleixing" placeholder="房屋类型" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwuleixing" placeholder="房屋类型" clearable></el-input>
+          </el-form-item>
+          <!-- 查询操作按钮 -->
+          <el-form-item>
+            <!-- 前缀图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 后缀图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 无图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮区域 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增操作按钮 -->
+            <el-button
+                v-if="isAuth('fangwuleixing','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 不同图标位置的新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwuleixing','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <!-- 无图标的新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwuleixing','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除操作按钮 -->
+            <el-button
+                v-if="isAuth('fangwuleixing','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 不同图标位置的删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwuleixing','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <!-- 无图标的删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwuleixing','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 数据表格内容区域 -->
+      <div class="table-content">
+        <!-- 数据表格 -->
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('fangwuleixing','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('fangwuleixing','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuleixing','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuleixing','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('fangwuleixing','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuleixing','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuleixing','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('fangwuleixing','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuleixing','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuleixing','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+
+export default {
+  data() {
+    return {
+      // 搜索按钮数据
+      searchForm: {
+        key: ""
+      },
+      // 数据列表
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 列表显示状态
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag: false,
+      // 配置样式
+      contents: { /* 配置参数 */ },
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 组件创建时执行
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 组件挂载完成后执行
+  mounted() {
+
+  },
+  // 自定义过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 注册子组件
+  components: {
+    AddOrUpdate,
+  },
+  // 方法定义
+  methods: {
+    // 样式更新方法
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索按钮区域样式更新
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(()=>{
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索表头按钮样式更新
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 操作按钮区域样式更新
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格样式更新
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式更新
+    contentTableBtnStyleChange() {
+      // 此处省略了样式更新代码
+    },
+    // 分页样式更新
+    contentPageStyleChange() {
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化方法
+    init () {
+
+    },
+    // 搜索
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      if(this.searchForm.fangwuleixing!='' && this.searchForm.fangwuleixing!=undefined){
+        params['fangwuleixing'] = '%' + this.searchForm.fangwuleixing + '%'
+      }
+      this.$http({
+        url: "fangwuleixing/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangwuleixing/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+/* 搜索功能区域样式 */
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+
+/* 操作按钮区域样式 */
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+/* 分页组件样式 */
+.pages {
+  & /deep/ .el-pagination__sizes {
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+
+/* 按钮间距调整 */
+.el-button+.el-button {
+  margin: 0;
+}
+
+/* 表格按钮样式 */
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/fangwupingjia/add-or-update.vue b/fount/views/modules/fangwupingjia/add-or-update.vue
new file mode 100644
index 0000000..4b0677a
--- /dev/null
+++ b/fount/views/modules/fangwupingjia/add-or-update.vue
@@ -0,0 +1,585 @@
+<template>
+  <!-- 添加/编辑表单容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 设置表单背景颜色 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="合同编号" prop="hetongbianhao">  <!-- 合同编号输入框 -->
+          <el-input v-model="ruleForm.hetongbianhao"
+                    placeholder="合同编号" clearable  :readonly="ro.hetongbianhao"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="合同编号" prop="hetongbianhao">
+            <el-input v-model="ruleForm.hetongbianhao"
+                      placeholder="合同编号" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房屋名称" prop="fangwumingcheng">  <!-- 房屋名称输入框 -->
+          <el-input v-model="ruleForm.fangwumingcheng"
+                    placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+            <el-input v-model="ruleForm.fangwumingcheng"
+                      placeholder="房屋名称" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房屋类型" prop="fangwuleixing">  <!-- 房屋类型输入框 -->
+          <el-input v-model="ruleForm.fangwuleixing"
+                    placeholder="房屋类型" clearable  :readonly="ro.fangwuleixing"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+            <el-input v-model="ruleForm.fangwuleixing"
+                      placeholder="房屋类型" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="小区" prop="xiaoqu">  <!-- 小区输入框 -->
+          <el-input v-model="ruleForm.xiaoqu"
+                    placeholder="小区" clearable  :readonly="ro.xiaoqu"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="小区" prop="xiaoqu">
+            <el-input v-model="ruleForm.xiaoqu"
+                      placeholder="小区" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="select" v-if="type!='info'"  label="评分" prop="pingfen">  <!-- 评分选择框 -->
+          <el-select v-model="ruleForm.pingfen" placeholder="请选择评分">
+            <el-option
+                v-for="(item,index) in pingfenOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="评分" prop="pingfen">
+            <el-input v-model="ruleForm.pingfen"
+                      placeholder="评分" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="date" v-if="type!='info'" label="评价日期" prop="pingjiariqi">  <!-- 评价日期选择器 -->
+          <el-date-picker
+              format="yyyy 年 MM 月 dd 日"
+              value-format="yyyy-MM-dd"
+              v-model="ruleForm.pingjiariqi"
+              type="date"
+              placeholder="评价日期">
+          </el-date-picker>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" v-if="ruleForm.pingjiariqi" label="评价日期" prop="pingjiariqi">
+            <el-input v-model="ruleForm.pingjiariqi"
+                      placeholder="评价日期" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房主账号" prop="fangzhuzhanghao">  <!-- 房主账号输入框 -->
+          <el-input v-model="ruleForm.fangzhuzhanghao"
+                    placeholder="房主账号" clearable  :readonly="ro.fangzhuzhanghao"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房主账号" prop="fangzhuzhanghao">
+            <el-input v-model="ruleForm.fangzhuzhanghao"
+                      placeholder="房主账号" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="yonghuming">  <!-- 用户名输入框 -->
+          <el-input v-model="ruleForm.yonghuming"
+                    placeholder="用户名" clearable  :readonly="ro.yonghuming"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="用户名" prop="yonghuming">
+            <el-input v-model="ruleForm.yonghuming"
+                      placeholder="用户名" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="联系电话" prop="lianxidianhua">  <!-- 联系电话输入框 -->
+          <el-input v-model="ruleForm.lianxidianhua"
+                    placeholder="联系电话" clearable  :readonly="ro.lianxidianhua"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="联系电话" prop="lianxidianhua">
+            <el-input v-model="ruleForm.lianxidianhua"
+                      placeholder="联系电话" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>  <!-- 新的表单布局行 -->
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item class="textarea" v-if="type!='info'" label="评价内容" prop="pingjianeirong">  <!-- 评价内容文本框 -->
+          <el-input
+              style="min-width: 200px; max-width: 600px;"  <!-- 设置文本框宽度范围 -->
+          type="textarea"
+          :rows="8"  <!-- 设置文本框行数 -->
+          placeholder="评价内容"
+          v-model="ruleForm.pingjianeirong" >
+          </el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读文本内容 -->
+          <el-form-item v-if="ruleForm.pingjianeirong" label="评价内容" prop="pingjianeirong">
+            <span>{{ruleForm.pingjianeirong}}</span>
+          </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)) {
+        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: { /* 样式配置参数 */ },
+      id: '',
+      type: '',
+      ro:{
+        // 各字段只读状态配置
+        hetongbianhao : false,
+        fangwumingcheng : false,
+        fangwuleixing : false,
+        xiaoqu : false,
+        pingfen : false,
+        pingjianeirong : false,
+        pingjiariqi : false,
+        fangzhuzhanghao : false,
+        yonghuming : false,
+        .lianxidianhua : false,
+        sfsh : false,
+        shhf : false,
+  },
+    // 表单数据模型
+    ruleForm: {
+      hetongbianhao: '',
+          fangwumingcheng: '',
+          fangwuleixing: '',
+          xiaoqu: '',
+          pingfen: '',
+          pingjianeirong: '',
+          pingjiariqi: '',
+          fangzhuzhanghao: '',
+          yonghuming: '',
+          lianxidianhua: '',
+          shhf: '',
+    },
+    // 评分选项
+    pingfenOptions: [],
+        // 表单验证规则
+        rules: {
+      hetongbianhao: [
+      ],
+          fangwumingcheng: [
+      ],
+          fangwuleixing: [
+      ],
+          xiaoqu: [
+      ],
+          pingfen: [
+      ],
+          pingjianeirong: [
+      ],
+          pingjiariqi: [
+      ],
+          fangzhuzhanghao: [
+      ],
+          yonghuming: [
+      ],
+          lianxidianhua: [
+      ],
+          sfsh: [
+      ],
+          shhf: [
+      ],
+    }
+  };
+  },
+  props: ["parent"],  // 定义父组件传入的属性
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()  // 调用样式更新方法
+    this.addEditUploadStyleChange()  // 调用上传组件样式更新方法
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    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=='hetongbianhao'){
+            this.ruleForm.hetongbianhao = obj[o];  // 设置合同编号
+            this.ro.hetongbianhao = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangwumingcheng'){
+            this.ruleForm.fangwumingcheng = obj[o];  // 设置房屋名称
+            this.ro.fangwumingcheng = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangwuleixing'){
+            this.ruleForm.fangwuleixing = obj[o];  // 设置房屋类型
+            this.ro.fangwuleixing = true;  // 设置为只读
+            continue;
+          }
+          if(o=='xiaoqu'){
+            this.ruleForm.xiaoqu = obj[o];  // 设置小区
+            this.ro.xiaoqu = true;  // 设置为只读
+            continue;
+          }
+          if(o=='pingfen'){
+            this.ruleForm.pingfen = obj[o];  // 设置评分
+            this.ro.pingfen = true;  // 设置为只读
+            continue;
+          }
+          if(o=='pingjianeirong'){
+            this.ruleForm.pingjianeirong = obj[o];  // 设置评价内容
+            this.ro.pingjianeirong = true;  // 设置为只读
+            continue;
+          }
+          if(o=='pingjiariqi'){
+            this.ruleForm.pingjiariqi = obj[o];  // 设置评价日期
+            this.ro.pingjiariqi = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangzhuzhanghao'){
+            this.ruleForm.fangzhuzhanghao = obj[o];  // 设置房主账号
+            this.ro.fangzhuzhanghao = true;  // 设置为只读
+            continue;
+          }
+          if(o=='yonghuming'){
+            this.ruleForm.yonghuming = obj[o];  // 设置用户名
+            this.ro.yonghuming = true;  // 设置为只读
+            continue;
+          }
+          if(o=='lianxidianhua'){
+            this.ruleForm.lianxidianhua = obj[o];  // 设置联系电话
+            this.ro.lianxidianhua = true;  // 设置为只读
+            continue;
+          }
+        }
+      }
+      // 获取当前用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);  // 显示错误消息
+        }
+      });
+      this.pingfenOptions = "1,2,3,4,5".split(',');  // 设置评分选项
+    },
+    // 获取详细信息方法
+    info(id) {
+      this.$http({
+        url: `fangwupingjia/info/${id}`,  // 请求详细信息接口
+        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: `fangwupingjia/${!this.ruleForm.id ? "save" : "update"}`,  // 请求保存或更新接口
+            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.fangwupingjiaCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+                  this.parent.search();  // 刷新列表
+                  this.parent.contentStyleChange();  // 更新列表样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg);  // 显示错误消息
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回方法
+    back() {
+      this.parent.showFlag = true;  // 显示列表页
+      this.parent.addOrUpdateFlag = false;  // 隐藏表单页
+      this.parent.fangwupingjiaCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+      this.parent.contentStyleChange();  // 更新列表样式
+    },
+    addEditStyleChange() {  // 更新表单样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        // 更新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;
+        });
+        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样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+        // 更新date样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+        // 更新textarea样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+        // 更新按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+    addEditUploadStyleChange() {  // 更新上传组件样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        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;  <!-- 设置内容区域高度 -->
+  }
+}
+.amap-wrapper {  <!-- 地图容器 -->
+  width: 100%;  <!-- 宽度为100% -->
+  height: 500px;  <!-- 高度为500px -->
+}
+.search-box {  <!-- 搜索按钮容器 -->
+  position: absolute;  <!-- 绝对定位 -->
+}
+.addEdit-block {  <!-- 表单容器 -->
+  margin: -10px;  <!-- 外边距 -->
+}
+.detail-form-content {  <!-- 表单内容 -->
+  padding: 12px;  <!-- 内边距 -->
+}
+.btn .el-button {  <!-- 按钮样式 -->
+  padding: 0;  <!-- 无内边距 -->
+}
+</style>
diff --git a/fount/views/modules/fangwupingjia/list.vue b/fount/views/modules/fangwupingjia/list.vue
new file mode 100644
index 0000000..2e27124
--- /dev/null
+++ b/fount/views/modules/fangwupingjia/list.vue
@@ -0,0 +1,813 @@
+<template>
+  <!-- 主内容区域 -->
+  <div class="main-content">
+    <!-- 列表页显示区域 -->
+    <div v-if="showFlag">
+      <!-- 搜索框表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框布局行 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房屋名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋名称' : ''">
+            <!-- 前缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 后缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+          </el-form-item>
+          <!-- 评分搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '评分' : ''">
+            <!-- 前缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.pingfen" placeholder="评分" clearable></el-input>
+            <!-- 后缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.pingfen" placeholder="评分" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.pingfen" placeholder="评分" clearable></el-input>
+          </el-form-item>
+          <!-- 房主账号搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房主账号' : ''">
+            <!-- 前缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangzhuzhanghao" placeholder="房主账号" clearable></el-input>
+            <!-- 后缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangzhuzhanghao" placeholder="房主账号" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangzhuzhanghao" placeholder="房主账号" clearable></el-input>
+          </el-form-item>
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <!-- 前缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <!-- 后缀图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <!-- 前缀图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 后缀图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 无图标查询按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮区域 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 不同图标位置的新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <!-- 无图标的新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 不同图标位置的删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <!-- 无图标的删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 统计报表按钮 -->
+            <el-button
+                v-if="isAuth('fangwupingjia','报表') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="warning"
+                icon="el-icon-s-data"
+                @click="chartDialog()"
+            >{{ contents.btnAdAllFont == 1?'统计报表':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangwupingjia','报表') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="warning"
+                @click="chartDialog()"
+            >{{ contents.btnAdAllFont == 1?'统计报表':'' }}<i class="el-icon-s-data el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangwupingjia','报表') && contents.btnAdAllIcon == 0"
+                type="warning"
+                @click="chartDialog()"
+            >{{ contents.btnAdAllFont == 1?'统计报表':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 数据表格内容区域 -->
+      <div class="table-content">
+        <!-- 数据表格 -->
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('fangwupingjia','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 合同编号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="hetongbianhao"
+                            header-align="center"
+                            label="合同编号">
+            <template slot-scope="scope">
+              {{scope.row.hetongbianhao}}
+            </template>
+          </el-table-column>
+          <!-- 房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 小区列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiaoqu"
+                            header-align="center"
+                            label="小区">
+            <template slot-scope="scope">
+              {{scope.row.xiaoqu}}
+            </template>
+          </el-table-column>
+          <!-- 评分列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="pingfen"
+                            header-align="center"
+                            label="评分">
+            <template slot-scope="scope">
+              {{scope.row.pingfen}}
+            </template>
+          </el-table-column>
+          <!-- 评价内容列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="pingjianeirong"
+                            header-align="center"
+                            label="评价内容">
+            <template slot-scope="scope">
+              {{scope.row.pingjianeirong}}
+            </template>
+          </el-table-column>
+          <!-- 评价日期列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="pingjiariqi"
+                            header-align="center"
+                            label="评价日期">
+            <template slot-scope="scope">
+              {{scope.row.pingjiariqi}}
+            </template>
+          </el-table-column>
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+          <!-- 联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+          <!-- 审核回复列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="shhf"
+                           header-align="center"
+                           label="审核回复">
+          </el-table-column>
+          <!-- 审核状态列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核状态">
+            <template slot-scope="scope">
+              <span style="margin-right:10px">{{scope.row.sfsh=='是'?'通过':'未通过'}}</span>
+            </template>
+          </el-table-column>
+          <!-- 审核操作列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           v-if="isAuth('fangwupingjia','审核')"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核">
+            <template slot-scope="scope">
+              <el-button  type="text" icon="el-icon-edit" size="small" @click="shDialog(scope.row)">审核</el-button>
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('fangwupingjia','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('fangwupingjia','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwupingjia','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('fangwupingjia','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('fangwupingjia','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwupingjia','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('fangwupingjia','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('fangwupingjia','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwupingjia','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+
+    <!-- 审核对话框 -->
+    <el-dialog
+        title="审核"
+        :visible.sync="sfshVisiable"
+        width="50%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="审核状态">
+          <el-select v-model="shForm.sfsh" placeholder="审核状态">
+            <el-option label="通过" value="是"></el-option>
+            <el-option label="不通过" value="否"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" :rows="8" v-model="shForm.shhf"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="shDialog">取 消</el-button>
+        <el-button type="primary" @click="shHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 统计报表对话框 -->
+    <el-dialog
+        title="统计报表"
+        :visible.sync="chartVisiable"
+        width="800">
+      <div id="pingfenChart" style="width:100%;height:600px;"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="chartDialog">返回</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索文件数据
+      searchForm: {
+        key: ""
+      },
+      // 数据列表
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 列表显示状态
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 统计报表对话框显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag: false,
+      // 配置样式
+      contents: { /* 配置参数 */ },
+      // 分页布局
+      layouts: '',
+    };
+  },
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange();
+  },
+  mounted() {
+
+  },
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  components: {
+    AddOrUpdate,
+  },
+  methods: {
+    // 样式更新方法
+    contentStyleChange() {
+      this.contentSearchStyleChange();
+      this.contentBtnAdAllStyleChange();
+      this.contentSearchBtnStyleChange();
+      this.contentTableBtnStyleChange();
+      this.contentPageStyleChange();
+    },
+    // 搜索功能区域样式更新
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left';
+          if(this.contents.inputFontPosition == 2) textAlign = 'center';
+          if(this.contents.inputFontPosition == 3) textAlign = 'right';
+          el.style.textAlign = textAlign;
+          el.style.height = this.contents.inputHeight;
+          el.style.lineHeight = this.contents.inputHeight;
+          el.style.color = this.contents.inputFontColor;
+          el.style.fontSize = this.contents.inputFontSize;
+          el.style.borderWidth = this.contents.inputBorderWidth;
+          el.style.borderStyle = this.contents.inputBorderStyle;
+          el.style.borderColor = this.contents.inputBorderColor;
+          el.style.borderRadius = this.contents.inputBorderRadius;
+          el.style.backgroundColor = this.contents.inputBgColor;
+        });
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor;
+            el.style.fontSize = this.contents.inputTitleSize;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+        }
+        setTimeout(()=>{
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+        },10);
+      });
+    },
+    // 搜索功能区域按钮样式更新
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight;
+          el.style.color = this.contents.searchBtnFontColor;
+          el.style.fontSize = this.contents.searchBtnFontSize;
+          el.style.borderWidth = this.contents.searchBtnBorderWidth;
+          el.style.borderStyle = this.contents.searchBtnBorderStyle;
+          el.style.borderColor = this.contents.searchBtnBorderColor;
+          el.style.borderRadius = this.contents.searchBtnBorderRadius;
+          el.style.backgroundColor = this.contents.searchBtnBgColor;
+        });
+      });
+    },
+    // 操作按钮区域样式更新
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllAddFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor;
+        });
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllDelFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor;
+        });
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllWarnFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor;
+        });
+      });
+    },
+    // 表格样式更新
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor};
+        }
+      } else {
+        return '';
+      }
+    },
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor};
+        }
+      } else {
+        return '';
+      }
+    },
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor};
+    },
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor};
+    },
+    // 表格按钮样式更新
+    contentTableBtnStyleChange() {
+      // 此处省略了样式更新代码
+    },
+    // 分页样式更新
+    contentPageStyleChange() {
+      let arr = [];
+      if(this.contents.pageTotal) arr.push('total');
+      if(this.contents.pageSizes) arr.push('sizes');
+      if(this.contents.pagePrevNext){
+        arr.push('prev');
+        if(this.contents.pagePager) arr.push('pager');
+        arr.push('next');
+      }
+      if(this.contents.pageJumper) arr.push('jumper');
+      this.layouts = arr.join();
+      this.contents.pageEachNum = 10;
+    },
+    // 统计报表对话框
+    chartDialog() {
+      this.chartVisiable = !this.chartVisiable;
+      this.$nextTick(()=>{
+        var pingfenChart = this.$echarts.init(document.getElementById("pingfenChart"),'macarons');
+        this.$http({
+          url: "group/fangwupingjia/pingfen",
+          method: "get",
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            let res = data.data;
+            let xAxis = [];
+            let yAxis = [];
+            let pArray = [];
+            for(let i=0;i<res.length;i++){
+              xAxis.push(res[i].pingfen);
+              yAxis.push(res[i].total);
+              pArray.push({
+                value: res[i].total,
+                name: res[i].pingfen
+              });
+              var option = {};
+              option = {
+                title: {
+                  text: '房屋评价',
+                  left: 'center'
+                },
+                tooltip: {
+                  trigger: 'item',
+                  formatter: '{b} : {c} ({d}%)'
+                },
+                series: [
+                  {
+                    type: 'pie',
+                    radius: '55%',
+                    center: ['50%', '60%'],
+                    data: pArray,
+                    emphasis: {
+                      itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                      }
+                    }
+                  }
+                ]
+              };
+              pingfenChart.setOption(option);
+              window.onresize = function() {
+                pingfenChart.resize();
+              };
+            }
+          }
+        });
+      });
+    },
+    // 初始化方法
+    init () {
+      this.pingfenOptions = "1,2,3,4,5".split(',');
+    },
+    // 查询方法
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表方法
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      };
+      if(this.searchForm.fangwumingcheng!='' && this.searchForm.fangwumingcheng!=undefined){
+        params['fangwumingcheng'] = '%' + this.searchForm.fangwumingcheng + '%';
+      }
+      if(this.searchForm.pingfen!='' && this.searchForm.pingfen!=undefined){
+        params['pingfen'] = '%' + this.searchForm.pingfen + '%';
+      }
+      if(this.searchForm.fangzhuzhanghao!='' && this.searchForm.fangzhuzhanghao!=undefined){
+        params['fangzhuzhanghao'] = '%' + this.searchForm.fangzhuzhanghao + '%';
+      }
+      if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){
+        params['yonghuming'] = '%' + this.searchForm.yonghuming + '%';
+      }
+      this.$http({
+        url: "fangwupingjia/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理方法
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理方法
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理方法
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理方法
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 审核对话框方法
+    shDialog(row){
+      this.sfshVisiable = !this.sfshVisiable;
+      if(row){
+        this.shForm = {
+          hetongbianhao: row.hetongbianhao,
+          fangwumingcheng: row.fangwumingcheng,
+          fangwuleixing: row.fangwuleixing,
+          xiaoqu: row.xiaoqu,
+          pingfen: row.pingfen,
+          pingjianeirong: row.pingjianeirong,
+          pingjiariqi: row.pingjiariqi,
+          fangzhuzhanghao: row.fangzhuzhanghao,
+          yonghuming: row.yonghuming,
+          lianxidianhua: row.lianxidianhua,
+          sfsh: row.sfsh,
+          shhf: row.shhf,
+          id: row.id
+        }
+      }
+    },
+    // 审核处理方法
+    shHandler(){
+      this.$confirm(`确定操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangwupingjia/update",
+          method: "post",
+          data: this.shForm
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+                this.shDialog();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`);
+    },
+    // 删除处理方法
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangwupingjia/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 搜索按钮区域样式 */
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+
+/* 操作按钮区域样式 */
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+/* 分页组件样式 */
+.pages {
+  & /deep/ .el-pagination__sizes {
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+
+/* 按钮间距调整 */
+.el-button+.el-button {
+  margin: 0;
+}
+
+/* 表格按钮样式 */
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/fangwuxinxi/add-or-update.vue b/fount/views/modules/fangwuxinxi/add-or-update.vue
new file mode 100644
index 0000000..4f582d2
--- /dev/null
+++ b/fount/views/modules/fangwuxinxi/add-or-update.vue
@@ -0,0 +1,808 @@
+<template>
+  <!-- 添加/编辑页面容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 设置表单背景颜色 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房屋名称" prop="fangwumingcheng">  <!-- 房屋名称输入框 -->
+          <el-input v-model="ruleForm.fangwumingcheng"
+                    placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+            <el-input v-model="ruleForm.fangwumingcheng"
+                      placeholder="房屋名称" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="select" v-if="type!='info'"  label="房屋类型" prop="fangwuleixing">  <!-- 房屋类型选择框 -->
+          <el-select v-model="ruleForm.fangwuleixing" placeholder="请选择房屋类型">
+            <el-option
+                v-for="(item,index) in fangwuleixingOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+            <el-input v-model="ruleForm.fangwuleixing"
+                      placeholder="房屋类型" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item class="upload" v-if="type!='info' && !ro.tupian" label="图片" prop="tupian">  <!-- 图片上传组件 -->
+          <file-upload
+              tip="点击上传图片"
+              action="file/upload"
+              :limit="3"
+              :multiple="true"
+              :fileUrls="ruleForm.tupian?ruleForm.tupian:''"
+              @change="tupianUploadChange"
+          ></file-upload>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式或只读，显示图片 -->
+          <el-form-item v-if="ruleForm.tupian" label="图片" prop="tupian">
+            <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.tupian.split(',')" :src="item" width="100" height="100">
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="select" v-if="type!='info'"  label="租赁方式" prop="zulinfangshi">  <!-- 租赁方式选择框 -->
+          <el-select v-model="ruleForm.zulinfangshi" placeholder="请选择租赁方式">
+            <el-option
+                v-for="(item,index) in zulinfangshiOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="租赁方式" prop="zulinfangshi">
+            <el-input v-model="ruleForm.zulinfangshi"
+                      placeholder="租赁方式" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="朝向楼层" prop="chaoxianglouceng">  <!-- 朝向楼层输入框 -->
+          <el-input v-model="ruleForm.chaoxianglouceng"
+                    placeholder="朝向楼层" clearable  :readonly="ro.chaoxianglouceng"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="朝向楼层" prop="chaoxianglouceng">
+            <el-input v-model="ruleForm.chaoxianglouceng"
+                      placeholder="朝向楼层" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="面积" prop="mianji">  <!-- 面积输入框 -->
+          <el-input v-model="ruleForm.mianji"
+                    placeholder="面积" clearable  :readonly="ro.mianji"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="面积" prop="mianji">
+            <el-input v-model="ruleForm.mianji"
+                      placeholder="面积" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="select" v-if="type!='info'"  label="房屋状态" prop="fangwuzhuangtai">  <!-- 房屋状态选择框 -->
+          <el-select v-model="ruleForm.fangwuzhuangtai" placeholder="请选择房屋状态">
+            <el-option
+                v-for="(item,index) in fangwuzhuangtaiOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房屋状态" prop="fangwuzhuangtai">
+            <el-input v-model="ruleForm.fangwuzhuangtai"
+                      placeholder="房屋状态" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="小区" prop="xiaoqu">  <!-- 小区输入框 -->
+          <el-input v-model="ruleForm.xiaoqu"
+                    placeholder="小区" clearable  :readonly="ro.xiaoqu"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="小区" prop="xiaoqu">
+            <el-input v-model="ruleForm.xiaoqu"
+                      placeholder="小区" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="详细地址" prop="xiangxidizhi">  <!-- 详细地址输入框 -->
+          <el-input v-model="ruleForm.xiangxidizhi"
+                    placeholder="详细地址" clearable  :readonly="ro.xiangxidizhi"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="详细地址" prop="xiangxidizhi">
+            <el-input v-model="ruleForm.xiangxidizhi"
+                      placeholder="详细地址" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="月租价格" prop="yuezujiage">  <!-- 月租价格输入框 -->
+          <el-input v-model="ruleForm.yuezujiage"
+                    placeholder="月租价格" clearable  :readonly="ro.yuezujiage"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="月租价格" prop="yuezujiage">
+            <el-input v-model="ruleForm.yuezujiage"
+                      placeholder="月租价格" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="押金" prop="yajin">  <!-- 押金输入框 -->
+          <el-input v-model="ruleForm.yajin"
+                    placeholder="押金" clearable  :readonly="ro.yajin"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="押金" prop="yajin">
+            <el-input v-model="ruleForm.yajin"
+                      placeholder="押金" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房屋设施" prop="fangwusheshi">  <!-- 房屋设施输入框 -->
+          <el-input v-model="ruleForm.fangwusheshi"
+                    placeholder="房屋设施" clearable  :readonly="ro.fangwusheshi"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房屋设施" prop="fangwusheshi">
+            <el-input v-model="ruleForm.fangwusheshi"
+                      placeholder="房屋设施" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="date" v-if="type!='info'" label="发布日期" prop="faburiqi">  <!-- 发布日期选择器 -->
+          <el-date-picker
+              format="yyyy 年 MM 月 dd 日"
+              value-format="yyyy-MM-dd"
+              v-model="ruleForm.faburiqi"
+              type="date"
+              placeholder="发布日期">
+          </el-date-picker>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" v-if="ruleForm.faburiqi" label="发布日期" prop="faburiqi">
+            <el-input v-model="ruleForm.faburiqi"
+                      placeholder="发布日期" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="select" v-if="type!='info'" label="房主账号" prop="fangzhuzhanghao">  <!-- 房主账号选择框 -->
+          <el-select  @change="fangzhuzhanghaoChange" v-model="ruleForm.fangzhuzhanghao" placeholder="请选择房主账号">
+            <el-option
+                v-for="(item,index) in fangzhuzhanghaoOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input"v-if="ruleForm.fangzhuzhanghao" label="房主账号" prop="fangzhuzhanghao">
+            <el-input v-model="ruleForm.fangzhuzhanghao"
+                      placeholder="房主账号" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房主姓名" prop="fangzhuxingming">  <!-- 房主姓名输入框 -->
+          <el-input v-model="ruleForm.fangzhuxingming"
+                    placeholder="房主姓名" clearable  :readonly="ro.fangzhuxingming"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房主姓名" prop="fangzhuxingming">
+            <el-input v-model="ruleForm.fangzhuxingming"
+                      placeholder="房主姓名" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row>  <!-- 新的表单布局行 -->
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item v-if="type!='info'"  label="房屋详情" prop="fangwuxiangqing">  <!-- 房屋详情编辑器 -->
+          <editor
+              style="min-width: 200px; max-width: 600px;"
+              v-model="ruleForm.fangwuxiangqing"
+              class="editor"
+              action="file/upload">
+          </editor>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示富文本内容 -->
+          <el-form-item v-if="ruleForm.fangwuxiangqing" label="房屋详情" prop="fangwuxiangqing">
+            <span v-html="ruleForm.fangwuxiangqing"></span>
+          </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)) {
+        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: { /* 样式配置参数 */ },
+      id: '',
+      type: '',
+      ro:{
+        // 各字段只读状态配置
+        fangwumingcheng : false,
+        fangwuleixing : false,
+        tupian : false,
+        zulinfangshi : false,
+        chaoxianglouceng : false,
+        mianji : false,
+        fangwuzhuangtai : false,
+        xiaoqu : false,
+        xiangxidizhi : false,
+        yuezujiage : false,
+        yajin : false,
+        fangwusheshi : false,
+        fangwuxiangqing : false,
+        faburiqi : false,
+        fangzhuzhanghao : false,
+        fangzhuxingming : false,
+      },
+      // 表单数据模型
+      ruleForm: {
+        fangwumingcheng: '',
+        fangwuleixing: '',
+        tupian: '',
+        zulinfangshi: '',
+        chaoxianglouceng: '',
+        mianji: '',
+        fangwuzhuangtai: '',
+        xiaoqu: '',
+        xiangxidizhi: '',
+        yuezujiage: '',
+        yajin: '',
+        fangwusheshi: '',
+        fangwuxiangqing: '',
+        faburiqi: '',
+        fangzhuzhanghao: '',
+        fangzhuxingming: '',
+      },
+      // 房屋类型选项
+      fangwuleixingOptions: [],
+      // 租赁方式选项
+      zulinfangshiOptions: [],
+      // 房屋状态选项
+      fangwuzhuangtaiOptions: [],
+      // 房主账号选项
+      fangzhuzhanghaoOptions: [],
+      // 表单验证规则
+      rules: {
+        fangwumingcheng: [
+          { required: true, message: '房屋名称不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        fangwuleixing: [
+          { required: true, message: '房屋类型不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        tupian: [
+          { required: true, message: '图片不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        zulinfangshi: [
+        ],
+        chaoxianglouceng: [
+        ],
+        mianji: [
+        ],
+        fangwuzhuangtai: [
+        ],
+        xiaoqu: [
+        ],
+        xiangxidizhi: [
+        ],
+        yuezujiage: [
+          { validator: validateIntNumber, trigger: 'blur' },  // 整数验证
+        ],
+        yajin: [
+          { validator: validateIntNumber, trigger: 'blur' },  // 整数验证
+        ],
+        fangwusheshi: [
+        ],
+        fangwuxiangqing: [
+        ],
+        faburiqi: [
+        ],
+        fangzhuzhanghao: [
+        ],
+        fangzhuxingming: [
+        ],
+      }
+    };
+  },
+  props: ["parent"],  // 定义父组件传入的属性
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()  // 调用样式更新方法
+    this.addEditUploadStyleChange()  // 调用上传组件样式更新方法
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    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=='fangwumingcheng'){
+            this.ruleForm.fangwumingcheng = obj[o];  // 设置房屋名称
+            this.ro.fangwumingcheng = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangwuleixing'){
+            this.ruleForm.fangwuleixing = obj[o];  // 设置房屋类型
+            this.ro.fangwuleixing = true;  // 设置为只读
+            continue;
+          }
+          if(o=='tupian'){
+            this.ruleForm.tupian = obj[o];  // 设置图片
+            this.ro.tupian = true;  // 设置为只读
+            continue;
+          }
+          if(o=='zulinfangshi'){
+            this.ruleForm.zulinfangshi = obj[o];  // 设置租赁方式
+            this.ro.zulinfangshi = true;  // 设置为只读
+            continue;
+          }
+          if(o=='chaoxianglouceng'){
+            this.ruleForm.chaoxianglouceng = obj[o];  // 设置朝向楼层
+            this.ro.chaoxianglouceng = true;  // 设置为只读
+            continue;
+          }
+          if(o=='mianji'){
+            this.ruleForm.mianji = obj[o];  // 设置面积
+            this.ro.mianji = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangwuzhuangtai'){
+            this.ruleForm.fangwuzhuangtai = obj[o];  // 设置房屋状态
+            this.ro.fangwuzhuangtai = true;  // 设置为只读
+            continue;
+          }
+          if(o=='xiaoqu'){
+            this.ruleForm.xiaoqu = obj[o];  // 设置小区
+            this.ro.xiaoqu = true;  // 设置为只读
+            continue;
+          }
+          if(o=='xiangxidizhi'){
+            this.ruleForm.xiangxidizhi = obj[o];  // 设置详细地址
+            this.ro.xiangxidizhi = true;  // 设置为只读
+            continue;
+          }
+          if(o=='yuezujiage'){
+            this.ruleForm.yuezujiage = obj[o];  // 设置月租价格
+            this.ro.yuezujiage = true;  // 设置为只读
+            continue;
+          }
+          if(o=='yajin'){
+            this.ruleForm.yajin = obj[o];  // 设置押金
+            this.ro.yajin = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangwusheshi'){
+            this.ruleForm.fangwusheshi = obj[o];  // 设置房屋设施
+            this.ro.fangwusheshi = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangwuxiangqing'){
+            this.ruleForm.fangwuxiangqing = obj[o];  // 设置房屋详情
+            this.ro.fangwuxiangqing = true;  // 设置为只读
+            continue;
+          }
+          if(o=='faburiqi'){
+            this.ruleForm.faburiqi = obj[o];  // 设置发布日期
+            this.ro.faburiqi = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangzhuzhanghao'){
+            this.ruleForm.fangzhuzhanghao = obj[o];  // 设置房主账号
+            this.ro.fangzhuzhanghao = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangzhuxingming'){
+            this.ruleForm.fangzhuxingming = obj[o];  // 设置房主姓名
+            this.ro.fangzhuxingming = true;  // 设置为只读
+            continue;
+          }
+        }
+      }
+      // 获取当前用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      // 获取房屋类型选项
+      this.$http({
+        url: `option/fangwuleixing/fangwuleixing`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.fangwuleixingOptions = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+
+      // 设置租赁方式选项
+      this.zulinfangshiOptions = "整租,合租".split(',');
+      // 设置房屋状态选项
+      this.fangwuzhuangtaiOptions = "可租,已租".split(',');
+      // 获取房主账号选项
+      this.$http({
+        url: `option/fangzhu/fangzhuzhanghao`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.fangzhuzhanghaoOptions = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    // 房主账号变更时的级联查询
+    fangzhuzhanghaoChange () {
+      this.$http({
+        url: `follow/fangzhu/fangzhuzhanghao?columnValue=`+ this.ruleForm.fangzhuzhanghao,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          if(data.data.fangzhuxingming){
+            this.ruleForm.fangzhuxingming = data.data.fangzhuxingming  // 更新房主姓名
+          }
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    // 获取详细信息方法
+    info(id) {
+      this.$http({
+        url: `fangwuxinxi/info/${id}`,
+        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: `fangwuxinxi/${!this.ruleForm.id ? "save" : "update"}`,  // 请求保存或更新接口
+            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.fangwuxinxiCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+                  this.parent.search();  // 刷新列表
+                  this.parent.contentStyleChange();  // 更新列表样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg);  // 显示错误消息
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回方法
+    back() {
+      this.parent.showFlag = true;  // 显示列表页
+      this.parent.addOrUpdateFlag = false;  // 隐藏表单页
+      this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+      this.parent.contentStyleChange();  // 更新列表样式
+    },
+    // 图片上传变更方法
+    tupianUploadChange(fileUrls) {
+      this.ruleForm.tupian = fileUrls;  // 更新图片数据
+      this.addEditUploadStyleChange();  // 更新上传组件样式
+    },
+    addEditStyleChange() {  // 更新表单样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        // 更新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;
+        });
+        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样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+        // 更新date样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+        // 更新upload样式
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+        // 更新textarea样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+        // 更新按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+        // 更新取消按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+    addEditUploadStyleChange() {  // 更新上传组件样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        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;  <!-- 设置内容区域高度 -->
+  }
+}
+.amap-wrapper {  <!-- 地图容器 -->
+  width: 100%;  <!-- 宽度为100% -->
+  height: 500px;  <!-- 高度为500px -->
+}
+.search-box {  <!-- 搜索和筛选组件 -->
+  position: absolute;  <!-- 绝对定位 -->
+}
+.addEdit-block {  <!-- 表单容器 -->
+  margin: -10px;  <!-- 外边距 -->
+}
+.detail-form-content {  <!-- 表单内容 -->
+  padding: 12px;  <!-- 内边距 -->
+}
+.btn .el-button {  <!-- 按钮样式 -->
+  padding: 0;  <!-- 无内边距 -->
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/fangwuxinxi/list.vue b/fount/views/modules/fangwuxinxi/list.vue
new file mode 100644
index 0000000..bd34a85
--- /dev/null
+++ b/fount/views/modules/fangwuxinxi/list.vue
@@ -0,0 +1,690 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索栏 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索表格，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房屋名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋名称' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+          </el-form-item>
+          <!-- 房屋状态搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋状态' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwuzhuangtai" placeholder="房屋状态" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwuzhuangtai" placeholder="房屋状态" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwuzhuangtai" placeholder="房屋状态" clearable></el-input>
+          </el-form-item>
+          <!-- 小区搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '小区' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.xiaoqu" placeholder="小区" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.xiaoqu" placeholder="小区" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.xiaoqu" placeholder="小区" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索框按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('fangwuxinxi','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangwuxinxi','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangwuxinxi','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('fangwuxinxi','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangwuxinxi','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangwuxinxi','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('fangwuxinxi','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 图片列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="tupian"
+                           header-align="center"
+                           width="200"
+                           label="图片">
+            <template slot-scope="scope">
+              <div v-if="scope.row.tupian">
+                <img :src="scope.row.tupian.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 租赁方式列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zulinfangshi"
+                            header-align="center"
+                            label="租赁方式">
+            <template slot-scope="scope">
+              {{scope.row.zulinfangshi}}
+            </template>
+          </el-table-column>
+          <!-- 朝向楼层列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="chaoxianglouceng"
+                            header-align="center"
+                            label="朝向楼层">
+            <template slot-scope="scope">
+              {{scope.row.chaoxianglouceng}}
+            </template>
+          </el-table-column>
+          <!-- 面积列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="mianji"
+                            header-align="center"
+                            label="面积">
+            <template slot-scope="scope">
+              {{scope.row.mianji}}
+            </template>
+          </el-table-column>
+          <!-- 房屋状态列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuzhuangtai"
+                            header-align="center"
+                            label="房屋状态">
+            <template slot-scope="scope">
+              {{scope.row.fangwuzhuangtai}}
+            </template>
+          </el-table-column>
+          <!-- 小区列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiaoqu"
+                            header-align="center"
+                            label="小区">
+            <template slot-scope="scope">
+              {{scope.row.xiaoqu}}
+            </template>
+          </el-table-column>
+          <!-- 详细地址列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiangxidizhi"
+                            header-align="center"
+                            label="详细地址">
+            <template slot-scope="scope">
+              {{scope.row.xiangxidizhi}}
+            </template>
+          </el-table-column>
+          <!-- 月租价格列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yuezujiage"
+                            header-align="center"
+                            label="月租价格">
+            <template slot-scope="scope">
+              {{scope.row.yuezujiage}}
+            </template>
+          </el-table-column>
+          <!-- 押金列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yajin"
+                            header-align="center"
+                            label="押金">
+            <template slot-scope="scope">
+              {{scope.row.yajin}}
+            </template>
+          </el-table-column>
+          <!-- 房屋设施列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwusheshi"
+                            header-align="center"
+                            label="房屋设施">
+            <template slot-scope="scope">
+              {{scope.row.fangwusheshi}}
+            </template>
+          </el-table-column>
+          <!-- 发布日期列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="faburiqi"
+                            header-align="center"
+                            label="发布日期">
+            <template slot-scope="scope">
+              {{scope.row.faburiqi}}
+            </template>
+          </el-table-column>
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+          <!-- 房主姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuxingming"
+                            header-align="center"
+                            label="房主姓名">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuxingming}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('fangwuxinxi','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuxinxi','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuxinxi','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 预约按钮 -->
+              <el-button v-if="isAuth('fangwuxinxi','预约') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="yuyuekanfangCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'预约':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuxinxi','预约') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="yuyuekanfangCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'预约':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuxinxi','预约') && contents.tableBtnIcon == 0" type="success" size="mini" @click="yuyuekanfangCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'预约':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('fangwuxinxi','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuxinxi','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuxinxi','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 查看评论按钮 -->
+              <el-button v-if="isAuth('fangwuxinxi','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuxinxi','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuxinxi','查看评论') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('fangwuxinxi','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('fangwuxinxi','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangwuxinxi','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+    <!-- 预约看房页面 -->
+    <yuyuekanfang-cross-add-or-update v-if="yuyuekanfangCrossAddOrUpdateFlag" :parent="this" ref="yuyuekanfangCrossaddOrUpdate"></yuyuekanfang-cross-add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+// 引入预约看房组件
+import yuyuekanfangCrossAddOrUpdate from "../yuyuekanfang/add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索框表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 预约看房页面显示状态
+      yuyuekanfangCrossAddOrUpdateFlag: false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+    yuyuekanfangCrossAddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索功能样式变更
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索功能按钮样式变更
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 预约看房页面打开
+    yuyuekanfangCrossAddOrUpdateHandler(row,type){
+      this.showFlag = false;
+      this.addOrUpdateFlag = false;
+      this.yuyuekanfangCrossAddOrUpdateFlag = true;
+      this.$storage.set('crossObj',row);
+      this.$storage.set('crossTable','fangwuxinxi');
+      this.$nextTick(() => {
+        this.$refs.yuyuekanfangCrossaddOrUpdate.init(row.id,type);
+      });
+    },
+    // 初始化
+    init () {
+      // 初始化房屋状态选项
+      this.fangwuzhuangtaiOptions = "可租,已租".split(',')
+    },
+    // 搜索内容
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.fangwumingcheng!='' && this.searchForm.fangwumingcheng!=undefined){
+        params['fangwumingcheng'] = '%' + this.searchForm.fangwumingcheng + '%'
+      }
+      if(this.searchForm.fangwuzhuangtai!='' && this.searchForm.fangwuzhuangtai!=undefined){
+        params['fangwuzhuangtai'] = '%' + this.searchForm.fangwuzhuangtai + '%'
+      }
+      if(this.searchForm.xiaoqu!='' && this.searchForm.xiaoqu!=undefined){
+        params['xiaoqu'] = '%' + this.searchForm.xiaoqu + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "fangwuxinxi/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 查看评论处理
+    disscussListHandler(id,type) {
+      this.$router.push({path:'/discussfangwuxinxi',query:{refid:id}});
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangwuxinxi/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索功能行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/fangzhu/add-or-update.vue b/fount/views/modules/fangzhu/add-or-update.vue
new file mode 100644
index 0000000..d00ecb9
--- /dev/null
+++ b/fount/views/modules/fangzhu/add-or-update.vue
@@ -0,0 +1,544 @@
+<template>
+  <!-- 添加/编辑页面容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 设置表单背景颜色 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房主账号" prop="fangzhuzhanghao">  <!-- 房主账号输入框 -->
+          <el-input v-model="ruleForm.fangzhuzhanghao"
+                    placeholder="房主账号" clearable  :readonly="ro.fangzhuzhanghao"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房主账号" prop="fangzhuzhanghao">
+            <el-input v-model="ruleForm.fangzhuzhanghao"
+                      placeholder="房主账号" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="密码" prop="mima">  <!-- 密码输入框 -->
+          <el-input v-model="ruleForm.mima"
+                    placeholder="密码" clearable  :readonly="ro.mima"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="密码" prop="mima">
+            <el-input v-model="ruleForm.mima"
+                      placeholder="密码" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="房主姓名" prop="fangzhuxingming">  <!-- 房主姓名输入框 -->
+          <el-input v-model="ruleForm.fangzhuxingming"
+                    placeholder="房主姓名" clearable  :readonly="ro.fangzhuxingming"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="房主姓名" prop="fangzhuxingming">
+            <el-input v-model="ruleForm.fangzhuxingming"
+                      placeholder="房主姓名" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="select" v-if="type!='info'"  label="性别" prop="xingbie">  <!-- 性别选择框 -->
+          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
+            <el-option
+                v-for="(item,index) in xingbieOptions"
+                v-bind:key="index"
+                :label="item"
+                :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="性别" prop="xingbie">
+            <el-input v-model="ruleForm.xingbie"
+                      placeholder="性别" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item class="upload" v-if="type!='info' && !ro.touxiang" label="头像" prop="touxiang">  <!-- 头像上传组件 -->
+          <file-upload
+              tip="点击上传头像"
+              action="file/upload"
+              :limit="3"
+              :multiple="true"
+              :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
+              @change="touxiangUploadChange"
+          ></file-upload>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式或只读，显示图片 -->
+          <el-form-item v-if="ruleForm.touxiang" label="头像" prop="touxiang">
+            <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.touxiang.split(',')" :src="item" width="100" height="100">
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="手机" prop="shouji">  <!-- 手机输入框 -->
+          <el-input v-model="ruleForm.shouji"
+                    placeholder="手机" clearable  :readonly="ro.shouji"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="手机" prop="shouji">
+            <el-input v-model="ruleForm.shouji"
+                      placeholder="手机" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="身份证" prop="shenfenzheng">  <!-- 身份证输入框 -->
+          <el-input v-model="ruleForm.shenfenzheng"
+                    placeholder="身份证" clearable  :readonly="ro.shenfenzheng"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="身份证" prop="shenfenzheng">
+            <el-input v-model="ruleForm.shenfenzheng"
+                      placeholder="身份证" readonly></el-input>
+          </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)) {
+        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: { /* 样式配置参数 */ },
+      id: '',
+      type: '',
+      ro:{
+        // 各字段只读状态配置
+        fangzhuzhanghao : false,
+        mima : false,
+        fangzhuxingming : false,
+        xingbie : false,
+        touxiang : false,
+        shouji : false,
+        shenfenzheng : false,
+      },
+      // 表单数据模型
+      ruleForm: {
+        fangzhuzhanghao: '',
+        mima: '',
+        fangzhuxingming: '',
+        xingbie: '',
+        touxiang: '',
+        shouji: '',
+        shenfenzheng: '',
+      },
+      // 性别选项
+      xingbieOptions: [],
+      // 表单验证规则
+      rules: {
+        fangzhuzhanghao: [
+          { required: true, message: '房主账号不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        mima: [
+          { required: true, message: '密码不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        fangzhuxingming: [
+          { required: true, message: '房主姓名不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        xingbie: [
+        ],
+        touxiang: [
+        ],
+        shouji: [
+          { validator: validateMobile, trigger: 'blur' },  // 手机号验证
+        ],
+        shenfenzheng: [
+          { validator: validateIdCard, trigger: 'blur' },  // 身份证验证
+        ],
+      }
+    };
+  },
+  props: ["parent"],  // 定义父组件传入的属性
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()  // 调用样式更新方法
+    this.addEditUploadStyleChange()  // 调用上传组件样式更新方法
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    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=='fangzhuzhanghao'){
+            this.ruleForm.fangzhuzhanghao = obj[o];  // 设置房主账号
+            this.ro.fangzhuzhanghao = true;  // 设置为只读
+            continue;
+          }
+          if(o=='mima'){
+            this.ruleForm.mima = obj[o];  // 设置密码
+            this.ro.mima = true;  // 设置为只读
+            continue;
+          }
+          if(o=='fangzhuxingming'){
+            this.ruleForm.fangzhuxingming = obj[o];  // 设置房主姓名
+            this.ro.fangzhuxingming = true;  // 设置为只读
+            continue;
+          }
+          if(o=='xingbie'){
+            this.ruleForm.xingbie = obj[o];  // 设置性别
+            this.ro.xingbie = true;  // 设置为只读
+            continue;
+          }
+          if(o=='touxiang'){
+            this.ruleForm.touxiang = obj[o];  // 设置头像
+            this.ro.touxiang = true;  // 设置为只读
+            continue;
+          }
+          if(o=='shouji'){
+            this.ruleForm.shouji = obj[o];  // 设置手机
+            this.ro.shouji = true;  // 设置为只读
+            continue;
+          }
+          if(o=='shenfenzheng'){
+            this.ruleForm.shenfenzheng = obj[o];  // 设置身份证
+            this.ro.shenfenzheng = true;  // 设置为只读
+            continue;
+          }
+        }
+      }
+      // 获取当前用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      this.xingbieOptions = "男,女".split(',')  // 设置性别选项
+    },
+    // 获取详细信息方法
+    info(id) {
+      this.$http({
+        url: `fangzhu/info/${id}`,
+        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: `fangzhu/${!this.ruleForm.id ? "save" : "update"}`,  // 请求保存或更新接口
+            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.fangzhuCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+                  this.parent.search();  // 刷新列表
+                  this.parent.contentStyleChange();  // 更新列表样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg);  // 显示错误消息
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回方法
+    back() {
+      this.parent.showFlag = true;  // 显示列表页
+      this.parent.addOrUpdateFlag = false;  // 隐藏表单页
+      this.parent.fangzhuCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+      this.parent.contentStyleChange();  // 更新列表样式
+    },
+    // 头像上传变更方法
+    touxiangUploadChange(fileUrls) {
+      this.ruleForm.touxiang = fileUrls;  // 更新头像数据
+      this.addEditUploadStyleChange();  // 更新上传组件样式
+    },
+    addEditStyleChange() {  // 更新表单样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        // 更新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;
+        });
+        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样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+        // 更新date样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+        // 更新upload样式
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+        // 更新textarea样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+        // 更新按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+        // 更新取消按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+    addEditUploadStyleChange() {  // 更新上传组件样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        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;  <!-- 设置内容区域高度 -->
+  }
+}
+.amap-wrapper {  <!-- 地图容器 -->
+  width: 100%;  <!-- 宽度为100% -->
+  height: 500px;  <!-- 高度为500px -->
+}
+.search-box {  <!-- 搜索按钮 -->
+  position: absolute;  <!-- 绝对定位 -->
+}
+.addEdit-block {  <!-- 表单容器 -->
+  margin: -10px;  <!-- 外边距 -->
+}
+.detail-form-content {  <!-- 表单内容 -->
+  padding: 12px;  <!-- 内边距 -->
+}
+.btn .el-button {  <!-- 按钮样式 -->
+  padding: 0;  <!-- 无内边距 -->
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/fangzhu/list.vue b/fount/views/modules/fangzhu/list.vue
new file mode 100644
index 0000000..47ddaa8
--- /dev/null
+++ b/fount/views/modules/fangzhu/list.vue
@@ -0,0 +1,574 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索功能 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索和行，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房主账号搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房主账号' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangzhuzhanghao" placeholder="房主账号" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangzhuzhanghao" placeholder="房主账号" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangzhuzhanghao" placeholder="房主账号" clearable></el-input>
+          </el-form-item>
+          <!-- 房主姓名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房主姓名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索表单按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('fangzhu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangzhu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangzhu','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('fangzhu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('fangzhu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('fangzhu','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('fangzhu','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+          <!-- 密码列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="mima"
+                            header-align="center"
+                            label="密码">
+            <template slot-scope="scope">
+              {{scope.row.mima}}
+            </template>
+          </el-table-column>
+          <!-- 房主姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuxingming"
+                            header-align="center"
+                            label="房主姓名">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuxingming}}
+            </template>
+          </el-table-column>
+          <!-- 性别列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xingbie"
+                            header-align="center"
+                            label="性别">
+            <template slot-scope="scope">
+              {{scope.row.xingbie}}
+            </template>
+          </el-table-column>
+          <!-- 头像列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="touxiang"
+                           header-align="center"
+                           width="200"
+                           label="头像">
+            <template slot-scope="scope">
+              <div v-if="scope.row.touxiang">
+                <img :src="scope.row.touxiang.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 手机列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="shouji"
+                            header-align="center"
+                            label="手机">
+            <template slot-scope="scope">
+              {{scope.row.shouji}}
+            </template>
+          </el-table-column>
+          <!-- 身份证列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="shenfenzheng"
+                            header-align="center"
+                            label="身份证">
+            <template slot-scope="scope">
+              {{scope.row.shenfenzheng}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('fangzhu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('fangzhu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangzhu','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('fangzhu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('fangzhu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('fangzhu','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索按钮表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索功能样式变更
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索功能按钮样式变更
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化
+    init () {
+      // 初始化方法
+    },
+    // 搜索功能
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.fangzhuzhanghao!='' && this.searchForm.fangzhuzhanghao!=undefined){
+        params['fangzhuzhanghao'] = '%' + this.searchForm.fangzhuzhanghao + '%'
+      }
+      if(this.searchForm.fangzhuxingming!='' && this.searchForm.fangzhuxingming!=undefined){
+        params['fangzhuxingming'] = '%' + this.searchForm.fangzhuxingming + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "fangzhu/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 查看评论
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "fangzhu/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索框行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/hetongxinxi/add-or-update.vue b/fount/views/modules/hetongxinxi/add-or-update.vue
new file mode 100644
index 0000000..b98cb90
--- /dev/null
+++ b/fount/views/modules/hetongxinxi/add-or-update.vue
@@ -0,0 +1,717 @@
+<template>
+  <!-- 定义模板的根元素 -->
+  <div class="addEdit-block">
+    <!-- 定义表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"
+    >
+      <!-- 定义表单的行布局 -->
+      <el-row>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'" label="合同编号" prop="hetongbianhao">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.hetongbianhao"
+                      placeholder="合同编号" readonly></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.hetongbianhao" label="合同编号" prop="hetongbianhao">
+              <el-input v-model="ruleForm.hetongbianhao"
+                        placeholder="合同编号" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房屋名称" prop="fangwumingcheng">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangwumingcheng"
+                      placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+              <el-input v-model="ruleForm.fangwumingcheng"
+                        placeholder="房屋名称" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房屋类型" prop="fangwuleixing">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangwuleixing"
+                      placeholder="房屋类型" clearable  :readonly="ro.fangwuleixing"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+              <el-input v-model="ruleForm.fangwuleixing"
+                        placeholder="房屋类型" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="小区" prop="xiaoqu">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.xiaoqu"
+                      placeholder="小区" clearable  :readonly="ro.xiaoqu"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="小区" prop="xiaoqu">
+              <el-input v-model="ruleForm.xiaoqu"
+                        placeholder="小区" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="月租价格" prop="yuezujiage">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yuezujiage"
+                      placeholder="月租价格" clearable  :readonly="ro.yuezujiage"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="月租价格" prop="yuezujiage">
+              <el-input v-model="ruleForm.yuezujiage"
+                        placeholder="月租价格" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="租用月数" prop="zuyongyueshu">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.zuyongyueshu"
+                      placeholder="租用月数" clearable  :readonly="ro.zuyongyueshu"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="租用月数" prop="zuyongyueshu">
+              <el-input v-model="ruleForm.zuyongyueshu"
+                        placeholder="租用月数" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="租用金额" prop="zuyongjine">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.zuyongjine"
+                      placeholder="租用金额" clearable  :readonly="ro.zuyongjine"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="租用金额" prop="zuyongjine">
+              <el-input v-model="ruleForm.zuyongjine"
+                        placeholder="租用金额" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="押金" prop="yajin">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yajin"
+                      placeholder="押金" clearable  :readonly="ro.yajin"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="押金" prop="yajin">
+              <el-input v-model="ruleForm.yajin"
+                        placeholder="押金" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="select" v-if="type!='info'"  label="房租状态" prop="fangzuzhuangtai">
+            <!-- 定义下拉选择框 -->
+            <el-select v-model="ruleForm.fangzuzhuangtai" placeholder="请选择房租状态">
+              <el-option
+                  v-for="(item,index) in fangzuzhuangtaiOptions"
+                  v-bind:key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房租状态" prop="fangzuzhuangtai">
+              <el-input v-model="ruleForm.fangzuzhuangtai"
+                        placeholder="房租状态" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'" label="合同金额" prop="hetongjine">
+            <!-- 定义输入框 -->
+            <el-input v-model="hetongjine"
+                      placeholder="合同金额" readonly></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.hetongjine" label="合同金额" prop="hetongjine">
+              <el-input v-model="ruleForm.hetongjine"
+                        placeholder="合同金额" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="24">
+          <!-- 定义表单项 -->
+          <el-form-item class="upload" v-if="type!='info'" label="合同内容" prop="hetongneirong">
+            <!-- 定义文件上传组件 -->
+            <file-upload
+                tip="点击上传合同内容"
+                action="file/upload"
+                :limit="1"
+                :multiple="true"
+                :fileUrls="ruleForm.hetongneirong?ruleForm.hetongneirong:''"
+                @change="hetongneirongUploadChange"
+            ></file-upload>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.hetongneirong" label="合同内容" prop="hetongneirong">
+              <!-- 定义下载按钮 -->
+              <el-button type="text" size="small" @click="download(ruleForm.hetongneirong)">下载</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="date" v-if="type!='info'" label="生效日" prop="shengxiaori">
+            <!-- 定义日期选择器 -->
+            <el-date-picker
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                v-model="ruleForm.shengxiaori"
+                type="date"
+                placeholder="生效日">
+            </el-date-picker>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.shengxiaori" label="生效日" prop="shengxiaori">
+              <el-input v-model="ruleForm.shengxiaori"
+                        placeholder="生效日" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="date" v-if="type!='info'" label="有限期至" prop="youxianqizhi">
+            <!-- 定义日期选择器 -->
+            <el-date-picker
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                v-model="ruleForm.youxianqizhi"
+                type="date"
+                placeholder="有限期至">
+            </el-date-picker>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.youxianqizhi" label="有限期至" prop="youxianqizhi">
+              <el-input v-model="ruleForm.youxianqizhi"
+                        placeholder="有限期至" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="yonghuming">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yonghuming"
+                      placeholder="用户名" clearable  :readonly="ro.yonghuming"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="用户名" prop="yonghuming">
+              <el-input v-model="ruleForm.yonghuming"
+                        placeholder="用户名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="联系电话" prop="lianxidianhua">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.lianxidianhua"
+                      placeholder="联系电话" clearable  :readonly="ro.lianxidianhua"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="联系电话" prop="lianxidianhua">
+              <el-input v-model="ruleForm.lianxidianhua"
+                        placeholder="联系电话" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房主账号" prop="fangzhuzhanghao">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangzhuzhanghao"
+                      placeholder="房主账号" clearable  :readonly="ro.fangzhuzhanghao"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房主账号" prop="fangzhuzhanghao">
+              <el-input v-model="ruleForm.fangzhuzhanghao"
+                        placeholder="房主账号" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房主姓名" prop="fangzhuxingming">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangzhuxingming"
+                      placeholder="房主姓名" clearable  :readonly="ro.fangzhuxingming"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房主姓名" prop="fangzhuxingming">
+              <el-input v-model="ruleForm.fangzhuxingming"
+                        placeholder="房主姓名" readonly></el-input>
+            </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)) {
+        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","selectFontSize":"14px","btnCancelBorderColor":"rgba(152, 129, 129, 1)","inputBorderRadius":"22px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"22px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"22px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(210, 194, 194, 0.29)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"rgba(152, 129, 129, 1)","btnCancelBgColor":"rgba(143, 222, 143, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"22px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"rgba(152, 129, 129, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"22px","inputBgColor":"rgba(252, 250, 250, 1)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"22px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(152, 129, 129, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","uploadBorderColor":"rgba(152, 129, 129, 1)","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"22px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
+      // 定义ID变量
+      id: '',
+      // 定义类型变量
+      type: '',
+      // 定义只读状态对象
+      ro:{
+        hetongbianhao : false,
+        fangwumingcheng : false,
+        fangwuleixing : false,
+        xiaoqu : false,
+        yuezujiage : false,
+        zuyongyueshu : false,
+        zuyongjine : false,
+        yajin : false,
+        fangzuzhuangtai : false,
+        hetongjine : false,
+        hetongneirong : false,
+        shengxiaori : false,
+        youxianqizhi : false,
+        yonghuming : false,
+        lianxidianhua : false,
+        fangzhuzhanghao : false,
+        fangzhuxingming : false,
+        sfsh : false,
+        shhf : false,
+        ispay : false,
+      },
+      // 定义表单数据
+      ruleForm: {
+        hetongbianhao: this.getUUID(),
+        fangwumingcheng: '',
+        fangwuleixing: '',
+        xiaoqu: '',
+        yuezujiage: '',
+        zuyongyueshu: '',
+        zuyongjine: '',
+        yajin: '',
+        fangzuzhuangtai: '',
+        hetongjine: '',
+        hetongneirong: '',
+        shengxiaori: '',
+        youxianqizhi: '',
+        yonghuming: '',
+        lianxidianhua: '',
+        fangzhuzhanghao: '',
+        fangzhuxingming: '',
+        shhf: '',
+      },
+      // 定义下拉选项
+      fangzuzhuangtaiOptions: [],
+      // 定义表单验证规则
+      rules: {
+        hetongbianhao: [],
+        fangwumingcheng: [],
+        fangwuleixing: [],
+        xiaoqu: [],
+        yuezujiage: [],
+        zuyongyueshu: [],
+        zuyongjine: [
+          { validator: validateIntNumber, trigger: 'blur' },
+        ],
+        yajin: [
+          { validator: validateIntNumber, trigger: 'blur' },
+        ],
+        fangzuzhuangtai: [],
+        hetongjine: [],
+        hetongneirong: [],
+        shengxiaori: [],
+        youxianqizhi: [],
+        yonghuming: [],
+        lianxidianhua: [],
+        fangzhuzhanghao: [],
+        fangzhuxingming: [],
+        sfsh: [],
+        shhf: [],
+        ispay: [],
+      }
+    };
+  },
+  // 定义父组件传值
+  props: ["parent"],
+  // 定义计算属性
+  computed: {
+    // 定义合同金额计算属性
+    hetongjine: {
+      get: function () {
+        return 0+parseFloat(this.ruleForm.zuyongjine)+parseFloat(this.ruleForm.yajin) || ''
+      }
+    },
+  },
+  // 定义生命周期钩子
+  created() {
+    // 调用样式初始化方法
+    this.addEditStyleChange()
+    // 调用上传组件样式初始化方法
+    this.addEditUploadStyleChange()
+  },
+  // 定义方法
+  methods: {
+    // 定义下载方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 定义初始化方法
+    init(id,type) {
+      if (id) {
+        this.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=='hetongbianhao'){
+            this.ruleForm.hetongbianhao = obj[o];
+            this.ro.hetongbianhao = true;
+            continue;
+          }
+          if(o=='fangwumingcheng'){
+            this.ruleForm.fangwumingcheng = obj[o];
+            this.ro.fangwumingcheng = true;
+            continue;
+          }
+          if(o=='fangwuleixing'){
+            this.ruleForm.fangwuleixing = obj[o];
+            this.ro.fangwuleixing = true;
+            continue;
+          }
+          if(o=='xiaoqu'){
+            this.ruleForm.xiaoqu = obj[o];
+            this.ro.xiaoqu = true;
+            continue;
+          }
+          if(o=='yuezujiage'){
+            this.ruleForm.yuezujiage = obj[o];
+            this.ro.yuezujiage = true;
+            continue;
+          }
+          if(o=='zuyongyueshu'){
+            this.ruleForm.zuyongyueshu = obj[o];
+            this.ro.zuyongyueshu = true;
+            continue;
+          }
+          if(o=='zuyongjine'){
+            this.ruleForm.zuyongjine = obj[o];
+            this.ro.zuyongjine = true;
+            continue;
+          }
+          if(o=='yajin'){
+            this.ruleForm.yajin = obj[o];
+            this.ro.yajin = true;
+            continue;
+          }
+          if(o=='fangzuzhuangtai'){
+            this.ruleForm.fangzuzhuangtai = obj[o];
+            this.ro.fangzuzhuangtai = true;
+            continue;
+          }
+          if(o=='hetongjine'){
+            this.ruleForm.hetongjine = obj[o];
+            this.ro.hetongjine = true;
+            continue;
+          }
+          if(o=='hetongneirong'){
+            this.ruleForm.hetongneirong = obj[o];
+            this.ro.hetongneirong = true;
+            continue;
+          }
+          if(o=='shengxiaori'){
+            this.ruleForm.shengxiaori = obj[o];
+            this.ro.shengxiaori = true;
+            continue;
+          }
+          if(o=='youxianqizhi'){
+            this.ruleForm.youxianqizhi = obj[o];
+            this.ro.youxianqizhi = true;
+            continue;
+          }
+          if(o=='yonghuming'){
+            this.ruleForm.yonghuming = obj[o];
+            this.ro.yonghuming = true;
+            continue;
+          }
+          if(o=='lianxidianhua'){
+            this.ruleForm.lianxidianhua = obj[o];
+            this.ro.lianxidianhua = true;
+            continue;
+          }
+          if(o=='fangzhuzhanghao'){
+            this.ruleForm.fangzhuzhanghao = obj[o];
+            this.ro.fangzhuzhanghao = true;
+            continue;
+          }
+          if(o=='fangzhuxingming'){
+            this.ruleForm.fangzhuxingming = obj[o];
+            this.ro.fangzhuxingming = true;
+            continue;
+          }
+        }
+      }
+      // 获取用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      // 初始化下拉选项
+      this.fangzuzhuangtaiOptions = "租赁中,已退租".split(',')
+    },
+    // 定义获取详情方法
+    info(id) {
+      this.$http({
+        url: `hetongxinxi/info/${id}`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    // 定义提交方法
+    onSubmit() {
+      this.ruleForm.hetongjine = this.hetongjine
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          this.$http({
+            url: `hetongxinxi/${!this.ruleForm.id ? "save" : "update"}`,
+            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.hetongxinxiCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 定义获取UUID方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 定义返回方法
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.hetongxinxiCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 定义文件上传变化方法
+    hetongneirongUploadChange(fileUrls) {
+      this.ruleForm.hetongneirong = fileUrls;
+      this.addEditUploadStyleChange()
+    },
+    // 定义样式初始化方法
+    addEditStyleChange() {
+      this.$nextTick(()=>{})
+    },
+    // 定义上传组件样式初始化方法
+    addEditUploadStyleChange() {
+      this.$nextTick(()=>{})
+    },
+  }
+};
+</script>
+<style lang="scss">
+// 定义编辑器样式
+.editor{
+  height: 500px;
+  & /deep/ .ql-container {
+    height: 310px;
+  }
+}
+// 定义地图样式
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+// 定义搜索框样式
+.search-box {
+  position: absolute;
+}
+// 定义添加编辑块样式
+.addEdit-block {
+  margin: -10px;
+}
+// 定义详情表单内容样式
+.detail-form-content {
+  padding: 12px;
+}
+// 定义按钮样式
+.btn .el-button {
+  padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/hetongxinxi/list.vue b/fount/views/modules/hetongxinxi/list.vue
new file mode 100644
index 0000000..07a8081
--- /dev/null
+++ b/fount/views/modules/hetongxinxi/list.vue
@@ -0,0 +1,835 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索结果展示行 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房屋名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋名称' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+          </el-form-item>
+          <!-- 房屋类型搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋类型' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwuleixing" placeholder="房屋类型" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwuleixing" placeholder="房屋类型" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwuleixing" placeholder="房屋类型" clearable></el-input>
+          </el-form-item>
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('hetongxinxi','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('hetongxinxi','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('hetongxinxi','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('hetongxinxi','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('hetongxinxi','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('hetongxinxi','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('hetongxinxi','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 合同编号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="hetongbianhao"
+                            header-align="center"
+                            label="合同编号">
+            <template slot-scope="scope">
+              {{scope.row.hetongbianhao}}
+            </template>
+          </el-table-column>
+          <!-- 房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 小区列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiaoqu"
+                            header-align="center"
+                            label="小区">
+            <template slot-scope="scope">
+              {{scope.row.xiaoqu}}
+            </template>
+          </el-table-column>
+          <!-- 月租价格列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yuezujiage"
+                            header-align="center"
+                            label="月租价格">
+            <template slot-scope="scope">
+              {{scope.row.yuezujiage}}
+            </template>
+          </el-table-column>
+          <!-- 租用月数列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zuyongyueshu"
+                            header-align="center"
+                            label="租用月数">
+            <template slot-scope="scope">
+              {{scope.row.zuyongyueshu}}
+            </template>
+          </el-table-column>
+          <!-- 租用金额列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zuyongjine"
+                            header-align="center"
+                            label="租用金额">
+            <template slot-scope="scope">
+              {{scope.row.zuyongjine}}
+            </template>
+          </el-table-column>
+          <!-- 押金列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yajin"
+                            header-align="center"
+                            label="押金">
+            <template slot-scope="scope">
+              {{scope.row.yajin}}
+            </template>
+          </el-table-column>
+          <!-- 房租状态列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzuzhuangtai"
+                            header-align="center"
+                            label="房租状态">
+            <template slot-scope="scope">
+              {{scope.row.fangzuzhuangtai}}
+            </template>
+          </el-table-column>
+          <!-- 合同金额列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="hetongjine"
+                            header-align="center"
+                            label="合同金额">
+            <template slot-scope="scope">
+              {{scope.row.hetongjine}}
+            </template>
+          </el-table-column>
+          <!-- 合同内容列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="hetongneirong"
+                           header-align="center"
+                           label="合同内容">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="download(scope.row.hetongneirong)">下载</el-button>
+            </template>
+          </el-table-column>
+          <!-- 生效日列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="shengxiaori"
+                            header-align="center"
+                            label="生效日">
+            <template slot-scope="scope">
+              {{scope.row.shengxiaori}}
+            </template>
+          </el-table-column>
+          <!-- 有限期至列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="youxianqizhi"
+                            header-align="center"
+                            label="有限期至">
+            <template slot-scope="scope">
+              {{scope.row.youxianqizhi}}
+            </template>
+          </el-table-column>
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+          <!-- 联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+          <!-- 房主姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuxingming"
+                            header-align="center"
+                            label="房主姓名">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuxingming}}
+            </template>
+          </el-table-column>
+          <!-- 是否支付列 -->
+          <el-table-column
+              :sortable="contents.tableSortable" :align="contents.tableAlign"
+              prop="ispay"
+              header-align="center"
+              label="是否支付">
+            <template slot-scope="scope">
+              <span style="margin-right:10px">{{scope.row.ispay=='已支付'?'已支付':'未支付'}}</span>
+              <el-button v-if="scope.row.ispay!='已支付' && isAuth('hetongxinxi','支付') " type="text" icon="el-icon-edit" size="small" @click="payHandler(scope.row)">支付</el-button>
+            </template>
+          </el-table-column>
+          <!-- 审核回复列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="shhf"
+                           header-align="center"
+                           label="审核回复">
+          </el-table-column>
+          <!-- 审核状态列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核状态">
+            <template slot-scope="scope">
+              <span style="margin-right:10px">{{scope.row.sfsh=='是'?'通过':'未通过'}}</span>
+            </template>
+          </el-table-column>
+          <!-- 审核操作列 -->
+          <el-table-column v-if="isAuth('hetongxinxi','审核')"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核">
+            <template slot-scope="scope">
+              <el-button  type="text" icon="el-icon-edit" size="small" @click="shDialog(scope.row)">审核</el-button>
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('hetongxinxi','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('hetongxinxi','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('hetongxinxi','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 报修按钮 -->
+              <el-button v-if="isAuth('hetongxinxi','报修') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="fangwubaoxiuCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'报修':'' }}</el-button>
+              <el-button v-if="isAuth('hetongxinxi','报修') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="fangwubaoxiuCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'报修':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('hetongxinxi','报修') && contents.tableBtnIcon == 0" type="success" size="mini" @click="fangwubaoxiuCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'报修':'' }}</el-button>
+              <!-- 评价按钮 -->
+              <el-button v-if="isAuth('hetongxinxi','评价') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="fangwupingjiaCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'评价':'' }}</el-button>
+              <el-button v-if="isAuth('hetongxinxi','评价') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="fangwupingjiaCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'评价':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('hetongxinxi','评价') && contents.tableBtnIcon == 0" type="success" size="mini" @click="fangwupingjiaCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'评价':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('hetongxinxi','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('hetongxinxi','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('hetongxinxi','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('hetongxinxi','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('hetongxinxi','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('hetongxinxi','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+
+    <!-- 房屋报修交叉添加/修改页面 -->
+    <fangwubaoxiu-cross-add-or-update v-if="fangwubaoxiuCrossAddOrUpdateFlag" :parent="this" ref="fangwubaoxiuCrossaddOrUpdate"></fangwubaoxiu-cross-add-or-update>
+    <!-- 房屋评价交叉添加/修改页面 -->
+    <fangwupingjia-cross-add-or-update v-if="fangwupingjiaCrossAddOrUpdateFlag" :parent="this" ref="fangwupingjiaCrossaddOrUpdate"></fangwupingjia-cross-add-or-update>
+
+    <!-- 审核对话框 -->
+    <el-dialog
+        title="审核"
+        :visible.sync="sfshVisiable"
+        width="50%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="审核状态">
+          <el-select v-model="shForm.sfsh" placeholder="审核状态">
+            <el-option label="通过" value="是"></el-option>
+            <el-option label="不通过" value="否"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" :rows="8" v-model="shForm.shhf"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="shDialog">取 消</el-button>
+        <el-button type="primary" @click="shHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import AddOrUpdate from "./add-or-update";
+import fangwubaoxiuCrossAddOrUpdate from "../fangwubaoxiu/add-or-update";
+import fangwupingjiaCrossAddOrUpdate from "../fangwupingjia/add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索功能相关
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页显示数量
+      pageSize: 10,
+      // 总记录数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 列表显示状态
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 房屋报修交叉添加/修改页面显示状态
+      fangwubaoxiuCrossAddOrUpdateFlag: false,
+      // 房屋评价交叉添加/修改页面显示状态
+      fangwupingjiaCrossAddOrUpdateFlag: false,
+      // 页面配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllBorderColor":"#DCDFE6","btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+
+
+    };
+  },
+  created() {
+    // 组件创建时初始化
+    this.init();
+    // 获取数据列表
+    this.getDataList();
+    // 样式调整
+    this.contentStyleChange()
+  },
+  mounted() {
+
+  },
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  components: {
+    // 添加/修改组件
+    AddOrUpdate,
+    // 房屋报修交叉添加/修改组件
+    fangwubaoxiuCrossAddOrUpdate,
+    // 房屋评价交叉添加/修改组件
+    fangwupingjiaCrossAddOrUpdate,
+  },
+  methods: {
+    // 样式调整
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索表单样式调整
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(()=>{
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+
+      })
+    },
+    // 搜索功能按钮样式调整
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式调整
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式调整
+    contentTableBtnStyleChange(){
+      // this.$nextTick(()=>{...})
+    },
+    // 分页样式调整
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 房屋报修交叉添加/修改处理
+    fangwubaoxiuCrossAddOrUpdateHandler(row,type){
+      this.showFlag = false;
+      this.addOrUpdateFlag = false;
+      this.fangwubaoxiuCrossAddOrUpdateFlag = true;
+      this.$storage.set('crossObj',row);
+      this.$storage.set('crossTable','hetongxinxi');
+      this.$nextTick(() => {
+        this.$refs.fangwubaoxiuCrossaddOrUpdate.init(row.id,type);
+      });
+    },
+    // 房屋评价交叉添加/修改处理
+    fangwupingjiaCrossAddOrUpdateHandler(row,type){
+      this.showFlag = false;
+      this.addOrUpdateFlag = false;
+      this.fangwupingjiaCrossAddOrUpdateFlag = true;
+      this.$storage.set('crossObj',row);
+      this.$storage.set('crossTable','hetongxinxi');
+      this.$nextTick(() => {
+        this.$refs.fangwupingjiaCrossaddOrUpdate.init(row.id,type);
+      });
+    },
+    // 支付处理
+    payHandler(row){
+      this.$storage.set('paytable','hetongxinxi');
+      this.$storage.set('payObject',row);
+      this.$router.push('pay');
+    },
+    // 初始化
+    init () {},
+
+    // 搜索按钮点击事件
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      if(this.searchForm.fangwumingcheng!='' && this.searchForm.fangwumingcheng!=undefined){
+        params['fangwumingcheng'] = '%' + this.searchForm.fangwumingcheng + '%'
+      }
+      if(this.searchForm.fangwuleixing!='' && this.searchForm.fangwuleixing!=undefined){
+        params['fangwuleixing'] = '%' + this.searchForm.fangwuleixing + '%'
+      }
+      if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){
+        params['yonghuming'] = '%' + this.searchForm.yonghuming + '%'
+      }
+      this.$http({
+        url: "hetongxinxi/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页显示数量变化处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页码变化处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变化处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 审核对话框处理
+    shDialog(row){
+      this.sfshVisiable = !this.sfshVisiable;
+      if(row){
+        this.shForm = {
+          hetongbianhao: row.hetongbianhao,
+          fangwumingcheng: row.fangwumingcheng,
+          fangwuleixing: row.fangwuleixing,
+          xiaoqu: row.xiaoqu,
+          yuezujiage: row.yuezujiage,
+          zuyongyueshu: row.zuyongyueshu,
+          zuyongjine: row.zuyongjine,
+          yajin: row.yajin,
+          fangzuzhuangtai: row.fangzuzhuangtai,
+          hetongjine: row.hetongjine,
+          hetongneirong: row.hetongneirong,
+          shengxiaori: row.shengxiaori,
+          youxianqizhi: row.youxianqizhi,
+          yonghuming: row.yonghuming,
+          lianxidianhua: row.lianxidianhua,
+          fangzhuzhanghao: row.fangzhuzhanghao,
+          fangzhuxingming: row.fangzhuxingming,
+          sfsh: row.sfsh,
+          shhf: row.shhf,
+          ispay: row.ispay,
+          id: row.id
+        }
+      }
+    },
+    // 审核提交处理
+    shHandler(){
+      this.$confirm(`确定操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "hetongxinxi/update",
+          method: "post",
+          data: this.shForm
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+                this.shDialog()
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "hetongxinxi/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+.pages {
+  & /deep/ el-pagination__sizes{
+    & /deep/ el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+
+
+.el-button+.el-button {
+  margin:0;
+}
+
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/messages/add-or-update.vue b/fount/views/modules/messages/add-or-update.vue
new file mode 100644
index 0000000..d65c0a1
--- /dev/null
+++ b/fount/views/modules/messages/add-or-update.vue
@@ -0,0 +1,447 @@
+<template>
+  <!-- 添加/编辑页面容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 设置表单背景颜色 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="username">  <!-- 用户名输入框 -->
+          <el-input v-model="ruleForm.username"
+                    placeholder="用户名" clearable readonly></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="用户名" prop="username">
+            <el-input v-model="ruleForm.username"
+                      placeholder="用户名" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>  <!-- 新的表单布局行 -->
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item class="textarea" v-if="type!='info'" label="留言内容" prop="content">  <!-- 留言内容文本框 -->
+          <el-input
+              style="min-width: 200px; max-width: 600px;"  <!-- 设置文本框宽度范围 -->
+          type="textarea"
+          :rows="8"  <!-- 设置文本框行数 -->
+          placeholder="留言内容"
+          v-model="ruleForm.content" readonly>
+          </el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示内容 -->
+          <el-form-item v-if="ruleForm.content" label="留言内容" prop="content">
+            <span>{{ruleForm.content}}</span>
+          </el-form-item>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>  <!-- 新的表单布局行 -->
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item class="textarea" v-if="type!='info'" label="回复内容" prop="reply">  <!-- 回复内容文本框 -->
+          <el-input
+              style="min-width: 200px; max-width: 600px;"  <!-- 设置文本框宽度范围 -->
+          type="textarea"
+          :rows="8"  <!-- 设置文本框行数 -->
+          placeholder="回复内容"
+          v-model="ruleForm.reply" >
+          </el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示内容 -->
+          <el-form-item v-if="ruleForm.reply" label="回复内容" prop="reply">
+            <span>{{ruleForm.reply}}</span>
+          </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)) {
+        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: { /* 样式配置参数 */ },
+      id: '',
+      type: '',
+      ro:{
+        // 各字段只读状态配置
+        userid : false,
+        username : false,
+        content : false,
+        reply : false,
+      },
+      // 表单数据模型
+      ruleForm: {
+        userid: '',
+        username: '',
+        content: '',
+        reply: '',
+      },
+      // 表单验证规则
+      rules: {
+        userid: [
+          { required: true, message: '留言人id不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        username: [
+        ],
+        content: [
+          { required: true, message: '留言内容不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        reply: [
+        ],
+      }
+    };
+  },
+  props: ["parent"],  // 定义父组件传入的属性
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()  // 调用样式更新方法
+    this.addEditUploadStyleChange()  // 调用上传组件样式更新方法
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    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=='userid'){
+            this.ruleForm.userid = obj[o];  // 设置留言人id
+            this.ro.userid = true;  // 设置为只读
+            continue;
+          }
+          if(o=='username'){
+            this.ruleForm.username = obj[o];  // 设置用户名
+            this.ro.username = true;  // 设置为只读
+            continue;
+          }
+          if(o=='content'){
+            this.ruleForm.content = obj[o];  // 设置留言内容
+            this.ro.content = true;  // 设置为只读
+            continue;
+          }
+          if(o=='reply'){
+            this.ruleForm.reply = obj[o];  // 设置回复内容
+            this.ro.reply = true;  // 设置为只读
+            continue;
+          }
+        }
+      }
+    },
+    // 获取详细信息方法
+    info(id) {
+      this.$http({
+        url: `messages/info/${id}`,
+        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: `messages/${!this.ruleForm.id ? "save" : "update"}`,  // 请求保存或更新接口
+            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.messagesCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+                  this.parent.search();  // 刷新列表
+                  this.parent.contentStyleChange();  // 更新列表样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg);  // 显示错误消息
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回方法
+    back() {
+      this.parent.showFlag = true;  // 显示列表页
+      this.parent.addOrUpdateFlag = false;  // 隐藏表单页
+      this.parent.messagesCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+      this.parent.contentStyleChange();  // 更新列表样式
+    },
+    addEditStyleChange() {  // 更新表单样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        // 更新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;
+        });
+        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样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+        // 更新date样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+        // 更新upload样式
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+        // 更新textarea样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+        // 更新按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+        // 更新取消按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+    addEditUploadStyleChange() {  // 更新上传组件样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        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;  <!-- 设置内容区域高度 -->
+  }
+}
+.amap-wrapper {  <!-- 地图容器 -->
+  width: 100%;  <!-- 宽度为100% -->
+  height: 500px;  <!-- 高度为500px -->
+}
+.search-box {  <!-- 搜索按钮 -->
+  position: absolute;  <!-- 绝对定位 -->
+}
+.addEdit-block {  <!-- 表单容器 -->
+  margin: -10px;  <!-- 外边距 -->
+}
+.detail-form-content {  <!-- 表单内容 -->
+  padding: 12px;  <!-- 内边距 -->
+}
+.btn .el-button {  <!-- 按钮样式 -->
+  padding: 0;  <!-- 无内边距 -->
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/messages/list.vue b/fount/views/modules/messages/list.vue
new file mode 100644
index 0000000..e387fc7
--- /dev/null
+++ b/fount/views/modules/messages/list.vue
@@ -0,0 +1,534 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索框表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框行，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.username" placeholder="用户名" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.username" placeholder="用户名" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.username" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索功能按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('messages','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('messages','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('messages','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('messages','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('messages','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('messages','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('messages','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="username"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.username}}
+            </template>
+          </el-table-column>
+          <!-- 留言内容列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="content"
+                            header-align="center"
+                            label="留言内容">
+            <template slot-scope="scope">
+              {{scope.row.content}}
+            </template>
+          </el-table-column>
+          <!-- 回复内容列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="reply"
+                            header-align="center"
+                            label="回复内容">
+            <template slot-scope="scope">
+              {{scope.row.reply}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('messages','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('messages','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('messages','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('messages','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('messages','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('messages','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 回复按钮 -->
+              <el-button v-if="isAuth('messages','回复') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'回复':'' }}</el-button>
+              <el-button v-if="isAuth('messages','回复') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'回复':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('messages','回复') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'回复':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('messages','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('messages','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('messages','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索功能表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化
+    init () {
+      // 初始化方法
+    },
+    // 搜索功能
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.username!='' && this.searchForm.username!=undefined){
+        params['username'] = '%' + this.searchForm.username + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "messages/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 查看评论
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "messages/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索搜索行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/news/add-or-update.vue b/fount/views/modules/news/add-or-update.vue
new file mode 100644
index 0000000..d3e25cd
--- /dev/null
+++ b/fount/views/modules/news/add-or-update.vue
@@ -0,0 +1,595 @@
+<template>
+  <!-- 主容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+      class="detail-form-content"
+      ref="ruleForm"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="80px"
+      :style="{backgroundColor:addEditForm.addEditBoxColor}"
+    >
+      <!-- 表单项布局行 -->
+      <el-row>
+        <!-- 占据12列（半屏） -->
+        <el-col :span="12">
+          <!-- 标题输入项，非查看模式显示可编辑框 -->
+          <el-form-item class="input" v-if="type!='info'" label="标题" prop="title">
+            <el-input v-model="ruleForm.title"
+              placeholder="标题" clearable :readonly="ro.title"></el-input>
+          </el-form-item>
+          <!-- 查看模式下显示只读输入框 -->
+          <div v-else>
+            <el-form-item class="input" label="标题" prop="title">
+              <el-input v-model="ruleForm.title"
+                placeholder="标题" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 图片上传 -->
+      <el-row>
+        <el-col :span="24">
+          <!-- 非查看模式下显示文件上传控件 -->
+          <el-form-item class="upload" v-if="type!='info' && !ro.picture" label="图片" prop="picture">
+            <file-upload
+              tip="点击上传图片"
+              action="file/upload"
+              :limit="3"
+              :multiple="true"
+              :fileUrls="ruleForm.picture?ruleForm.picture:''"
+              @change="pictureUploadChange"
+            ></file-upload>
+          </el-form-item>
+          <!-- 查看模式下显示已上传图片 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.picture" label="图片" prop="picture">
+              <!-- 显示多张图片 -->
+              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture.split(',')" :src="item" width="100" height="100">
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 简介 -->
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="textarea" v-if="type != 'info'" label="简介" prop="introduction">
+            <el-input
+              style="min-width: 200px; max-width: 600px;"
+              type="textarea"
+              :rows="8"
+              placeholder="简介"
+              v-model="ruleForm.introduction">
+            </el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item v-if="ruleForm.introduction" label="简介" prop="introduction">
+              <span>{{ ruleForm.introduction }}</span>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 内容 -->
+      <el-row>
+        <el-col :span="24">
+          <el-form-item v-if="type != 'info'" label="内容" prop="content">
+            <editor
+              style="min-width: 200px; max-width: 600px;"
+              v-model="ruleForm.content"
+              class="editor"
+              action="file/upload">
+            </editor>
+          </el-form-item>
+          <div v-else>
+            <el-form-item v-if="ruleForm.content" label="内容" prop="content">
+              <span v-html="ruleForm.content"></span>
+            </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>
+// 导入验证工具函数：数字、整数、邮箱、电话、手机号、URL、身份证校验
+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)) {
+        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",
+        "selectFontSize": "14px",
+        "btnCancelBorderColor": "rgba(152, 129, 129, 1)",
+        "inputBorderRadius": "22px",
+        "inputFontSize": "14px",
+        "textareaBgColor": "#fff",
+        "btnSaveFontSize": "14px",
+        "textareaBorderRadius": "22px",
+        "uploadBgColor": "#fff",
+        "textareaBorderStyle": "solid",
+        "btnCancelWidth": "88px",
+        "textareaHeight": "120px",
+        "dateBgColor": "#fff",
+        "btnSaveBorderRadius": "22px",
+        "uploadLableFontSize": "14px",
+        "textareaBorderWidth": "1px",
+        "inputLableColor": "#606266",
+        "addEditBoxColor": "rgba(210, 194, 194, 0.29)",
+        "dateIconFontSize": "14px",
+        "btnSaveBgColor": "#409EFF",
+        "uploadIconFontColor": "#8c939d",
+        "textareaBorderColor": "rgba(152, 129, 129, 1)",
+        "btnCancelBgColor": "rgba(143, 222, 143, 1)",
+        "selectLableColor": "#606266",
+        "btnSaveBorderStyle": "solid",
+        "dateBorderWidth": "1px",
+        "dateLableFontSize": "14px",
+        "dateBorderRadius": "22px",
+        "btnCancelBorderStyle": "solid",
+        "selectLableFontSize": "14px",
+        "selectBorderStyle": "solid",
+        "selectIconFontColor": "#C0C4CC",
+        "btnCancelHeight": "44px",
+        "inputHeight": "40px",
+        "btnCancelFontColor": "#606266",
+        "dateBorderColor": "rgba(152, 129, 129, 1)",
+        "dateIconFontColor": "#C0C4CC",
+        "uploadBorderStyle": "solid",
+        "dateBorderStyle": "solid",
+        "dateLableColor": "#606266",
+        "dateFontSize": "14px",
+        "inputBorderWidth": "1px",
+        "uploadIconFontSize": "28px",
+        "selectHeight": "40px",
+        "inputFontColor": "#606266",
+        "uploadHeight": "148px",
+        "textareaLableColor": "#606266",
+        "textareaLableFontSize": "14px",
+        "btnCancelFontSize": "14px",
+        "inputBorderStyle": "solid",
+        "btnCancelBorderRadius": "22px",
+        "inputBgColor": "rgba(252, 250, 250, 1)",
+        "inputLableFontSize": "14px",
+        "uploadLableColor": "#606266",
+        "uploadBorderRadius": "22px",
+        "btnSaveHeight": "44px",
+        "selectBgColor": "#fff",
+        "btnSaveWidth": "88px",
+        "selectIconFontSize": "14px",
+        "dateHeight": "40px",
+        "selectBorderColor": "rgba(152, 129, 129, 1)",
+        "inputBorderColor": "rgba(152, 129, 129, 1)",
+        "uploadBorderColor": "rgba(152, 129, 129, 1)",
+        "textareaFontColor": "#606266",
+        "selectBorderWidth": "1px",
+        "dateFontColor": "#606266",
+        "btnCancelBorderWidth": "1px",
+        "uploadBorderWidth": "1px",
+        "textareaFontSize": "14px",
+        "selectBorderRadius": "22px",
+        "selectFontColor": "#606266",
+        "btnSaveBorderColor": "#409EFF",
+        "btnSaveBorderWidth": "1px"
+      },
+      id: '',         // 当前操作数据ID
+      type: '',       // 操作类型（新增、编辑、详情）
+      ro: {           // 只读字段控制
+        title: false,
+        introduction: false,
+        picture: false,
+        content: false,
+      },
+      ruleForm: {     // 表单绑定数据模型
+        title: '',
+        introduction: '',
+        picture: '',
+        content: '',
+      },
+      rules: {        // 表单验证规则
+        title: [
+          { required: true, message: '标题不能为空', trigger: 'blur' }
+        ],
+        introduction: [],
+        picture: [
+          { required: true, message: '图片不能为空', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '内容不能为空', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  props: ["parent"], // 接收父组件传递的数据
+
+  computed: {
+    // 计算属性
+  },
+
+  created() {
+    // 组件创建时调用样式初始化方法
+    this.addEditStyleChange();
+    this.addEditUploadStyleChange();
+  },
+
+  methods: {
+    // 下载文件
+    download(file){
+      window.open(`${file}`);
+    },
+
+    // 初始化方法
+    init(id, type) {
+      if (id) {
+        this.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==='title'){
+            this.ruleForm.title = obj[o];
+            this.ro.title = true;
+            continue;
+          }
+          if(o==='introduction'){
+            this.ruleForm.introduction = obj[o];
+            this.ro.introduction = true;
+            continue;
+          }
+          if(o==='picture'){
+            this.ruleForm.picture = obj[o];
+            this.ro.picture = true;
+            continue;
+          }
+          if(o==='content'){
+            this.ruleForm.content = obj[o];
+            this.ro.content = true;
+            continue;
+          }
+        }
+      }
+    },
+
+    // 获取详情信息
+    info(id) {
+      this.$http({
+        url: `news/info/${id}`,
+        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: `news/${!this.ruleForm.id ? "save" : "update"}`,
+            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.newsCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+
+    // 获取UUID
+    getUUID () {
+      return new Date().getTime();
+    },
+
+    // 返回上一页
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.newsCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+
+    // 图片上传回调
+    pictureUploadChange(fileUrls) {
+      this.ruleForm.picture = 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;
+        });
+
+        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
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+
+        // date
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+
+        // upload
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+
+        // textarea
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+
+        // 保存按钮
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+
+        // 取消按钮
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+
+    // 上传区域样式调整
+    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;
+  }
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+.search-box {
+  position: absolute;
+}
+.addEdit-block {
+  margin: -10px;
+}
+.detail-form-content {
+  padding: 12px;
+}
+.btn .el-button {
+  padding: 0;
+}
+</style>
diff --git a/fount/views/modules/news/list.vue b/fount/views/modules/news/list.vue
new file mode 100644
index 0000000..3490377
--- /dev/null
+++ b/fount/views/modules/news/list.vue
@@ -0,0 +1,530 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索
+生成列表页的搜索框容器 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 标题搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '标题' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.title" placeholder="标题" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.title" placeholder="标题" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.title" placeholder="标题" clearable></el-input>
+          </el-form-item>
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('news','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('news','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('news','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('news','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('news','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('news','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('news','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 标题列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="title"
+                            header-align="center"
+                            label="标题">
+            <template slot-scope="scope">
+              {{scope.row.title}}
+            </template>
+          </el-table-column>
+          <!-- 简介列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="introduction"
+                            header-align="center"
+                            label="简介">
+            <template slot-scope="scope">
+              {{scope.row.introduction}}
+            </template>
+          </el-table-column>
+          <!-- 图片列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="picture"
+                           header-align="center"
+                           width="200"
+                           label="图片">
+            <template slot-scope="scope">
+              <div v-if="scope.row.picture">
+                <img :src="scope.row.picture.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('news','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('news','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('news','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('news','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('news','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('news','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('news','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('news','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('news','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+<script>
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索框数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页显示数量
+      pageSize: 10,
+      // 总记录数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 列表显示状态
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 页面配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllBorderColor":"#DCDFE6","btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+
+
+    };
+  },
+  created() {
+    // 组件创建时初始化
+    this.init();
+    // 获取数据列表
+    this.getDataList();
+    // 样式调整
+    this.contentStyleChange()
+  },
+  mounted() {
+
+  },
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  components: {
+    // 添加/修改组件
+    AddOrUpdate,
+  },
+  methods: {
+    // 样式调整
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索到表单样式调整
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(()=>{
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+
+      })
+    },
+    // 搜索了一按钮样式调整
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式调整
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式调整
+    contentTableBtnStyleChange(){
+      // this.$nextTick(()=>{...})
+    },
+    // 分页样式调整
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化
+    init () {
+    },
+    // 搜索按钮点击事件
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      if(this.searchForm.title!='' && this.searchForm.title!=undefined){
+        params['title'] = '%' + this.searchForm.title + '%'
+      }
+      this.$http({
+        url: "news/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页显示数量变化处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页码变化处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变化处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 下载处理
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "news/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+.pages {
+  & /deep/ el-pagination__sizes{
+    & /deep/ el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+
+
+.el-button+.el-button {
+  margin:0;
+}
+
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/storeup/add-or-update.vue b/fount/views/modules/storeup/add-or-update.vue
new file mode 100644
index 0000000..0d62378
--- /dev/null
+++ b/fount/views/modules/storeup/add-or-update.vue
@@ -0,0 +1,467 @@
+<template>
+  <!-- 添加/编辑页面容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 设置表单背景颜色 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="收藏id" prop="refid">  <!-- 收藏id输入框 -->
+          <el-input v-model="ruleForm.refid"
+                    placeholder="收藏id" clearable  :readonly="ro.refid"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="收藏id" prop="refid">
+            <el-input v-model="ruleForm.refid"
+                      placeholder="收藏id" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="表名" prop="tablename">  <!-- 表名输入框 -->
+          <el-input v-model="ruleForm.tablename"
+                    placeholder="表名" clearable  :readonly="ro.tablename"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="表名" prop="tablename">
+            <el-input v-model="ruleForm.tablename"
+                      placeholder="表名" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="收藏名称" prop="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>
+      <el-col :span="24">  <!-- 占满整行 -->
+        <el-form-item class="upload" v-if="type!='info' && !ro.picture" label="收藏图片" prop="picture">  <!-- 图片上传组件 -->
+          <file-upload
+              tip="点击上传收藏图片"
+              action="file/upload"
+              :limit="3"
+              :multiple="true"
+              :fileUrls="ruleForm.picture?ruleForm.picture:''"
+              @change="pictureUploadChange"
+          ></file-upload>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式或只读，显示图片 -->
+          <el-form-item v-if="ruleForm.picture" label="收藏图片" prop="picture">
+            <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.picture.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)) {
+        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: { /* 样式配置参数 */ },
+      id: '',
+      type: '',
+      ro:{
+        // 各字段只读状态配置
+        userid : false,
+        refid : false,
+        tablename : false,
+        name : false,
+        picture : false,
+      },
+      // 表单数据模型
+      ruleForm: {
+        userid: '',
+        refid: '',
+        tablename: '',
+        name: '',
+        picture: '',
+      },
+      // 表单验证规则
+      rules: {
+        userid: [
+          { required: true, message: '用户id不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        refid: [
+        ],
+        tablename: [
+        ],
+        name: [
+          { required: true, message: '收藏名称不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        picture: [
+          { required: true, message: '收藏图片不能为空', trigger: 'blur' },  // 必填验证
+        ],
+      }
+    };
+  },
+  props: ["parent"],  // 定义父组件传入的属性
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()  // 调用样式更新方法
+    this.addEditUploadStyleChange()  // 调用上传组件样式更新方法
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    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=='userid'){
+            this.ruleForm.userid = obj[o];  // 设置用户id
+            this.ro.userid = true;  // 设置为只读
+            continue;
+          }
+          if(o=='refid'){
+            this.ruleForm.refid = obj[o];  // 设置收藏id
+            this.ro.refid = true;  // 设置为只读
+            continue;
+          }
+          if(o=='tablename'){
+            this.ruleForm.tablename = obj[o];  // 设置表名
+            this.ro.tablename = true;  // 设置为只读
+            continue;
+          }
+          if(o=='name'){
+            this.ruleForm.name = obj[o];  // 设置收藏名称
+            this.ro.name = true;  // 设置为只读
+            continue;
+          }
+          if(o=='picture'){
+            this.ruleForm.picture = obj[o];  // 设置收藏图片
+            this.ro.picture = true;  // 设置为只读
+            continue;
+          }
+        }
+      }
+    },
+    // 获取详细信息方法
+    info(id) {
+      this.$http({
+        url: `storeup/info/${id}`,
+        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: `storeup/${!this.ruleForm.id ? "save" : "update"}`,  // 请求保存或更新接口
+            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.storeupCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+                  this.parent.search();  // 刷新列表
+                  this.parent.contentStyleChange();  // 更新列表样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg);  // 显示错误消息
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回方法
+    back() {
+      this.parent.showFlag = true;  // 显示列表页
+      this.parent.addOrUpdateFlag = false;  // 隐藏表单页
+      this.parent.storeupCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+      this.parent.contentStyleChange();  // 更新列表样式
+    },
+    // 图片上传变更方法
+    pictureUploadChange(fileUrls) {
+      this.ruleForm.picture = fileUrls;  // 更新图片数据
+      this.addEditUploadStyleChange();  // 更新上传组件样式
+    },
+    addEditStyleChange() {  // 更新表单样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        // 更新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;
+        });
+        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样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+        // 更新date样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+        // 更新upload样式
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+        // 更新textarea样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+        // 更新按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+        // 更新取消按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+    addEditUploadStyleChange() {  // 更新上传组件样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        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;  <!-- 设置内容区域高度 -->
+  }
+}
+.amap-wrapper {  <!-- 地图容器 -->
+  width: 100%;  <!-- 宽度为100% -->
+  height: 500px;  <!-- 高度为500px -->
+}
+.search-box {  <!-- 搜索长度 -->
+  position: absolute;  <!-- 绝对定位 -->
+}
+.addEdit-block {  <!-- 表单容器 -->
+  margin: -10px;  <!-- 外边距 -->
+}
+.detail-form-content {  <!-- 表单内容 -->
+  padding: 12px;  <!-- 内边距 -->
+}
+.btn .el-button {  <!-- 按钮样式 -->
+  padding: 0;  <!-- 无内边距 -->
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/storeup/list.vue b/fount/views/modules/storeup/list.vue
new file mode 100644
index 0000000..fbcd97a
--- /dev/null
+++ b/fount/views/modules/storeup/list.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索功能 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框行，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 收藏名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '收藏名称' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.name" placeholder="收藏名称" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.name" placeholder="收藏名称" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.name" placeholder="收藏名称" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索功能按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('storeup','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('storeup','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('storeup','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('storeup','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('storeup','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('storeup','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('storeup','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 收藏名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="name"
+                            header-align="center"
+                            label="收藏名称">
+            <template slot-scope="scope">
+              {{scope.row.name}}
+            </template>
+          </el-table-column>
+          <!-- 收藏图片列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="picture"
+                           header-align="center"
+                           width="200"
+                           label="收藏图片">
+            <template slot-scope="scope">
+              <div v-if="scope.row.picture">
+                <img :src="scope.row.picture.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('storeup','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('storeup','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('storeup','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('storeup','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('storeup','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('storeup','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('storeup','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('storeup','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('storeup','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索工具表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索功能样式变更
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索功能按钮样式变更
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化
+    init () {
+      // 初始化方法
+    },
+    // 搜索功能
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.name!='' && this.searchForm.name!=undefined){
+        params['name'] = '%' + this.searchForm.name + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "storeup/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 查看评论
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "storeup/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索功能行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/users/add-or-update.vue b/fount/views/modules/users/add-or-update.vue
new file mode 100644
index 0000000..3c00e03
--- /dev/null
+++ b/fount/views/modules/users/add-or-update.vue
@@ -0,0 +1,413 @@
+<template>
+  <!-- 添加/编辑页面容器 -->
+  <div class="addEdit-block">
+    <!-- 表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"  <!-- 设置表单背景颜色 -->
+    >
+    <el-row>  <!-- 表单布局行 -->
+      <el-col :span="12">  <!-- 左侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="username">  <!-- 用户名输入框 -->
+          <el-input v-model="ruleForm.username"
+                    placeholder="用户名" clearable  :readonly="ro.username"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="用户名" prop="username">
+            <el-input v-model="ruleForm.username"
+                      placeholder="用户名" readonly></el-input>
+          </el-form-item>
+        </div>
+      </el-col>
+      <el-col :span="12">  <!-- 右侧列，宽度为12 -->
+        <el-form-item class="input" v-if="type!='info'"  label="密码" prop="password">  <!-- 密码输入框 -->
+          <el-input v-model="ruleForm.password"
+                    placeholder="密码" clearable  :readonly="ro.password"></el-input>
+        </el-form-item>
+        <div v-else>  <!-- 如果是查看模式，显示只读输入框 -->
+          <el-form-item class="input" label="密码" prop="password">
+            <el-input v-model="ruleForm.password"
+                      placeholder="密码" readonly></el-input>
+          </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)) {
+        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: { /* 样式配置参数 */ },
+      id: '',
+      type: '',
+      ro:{
+        // 各字段只读状态配置
+        username : false,
+        password : false,
+        role : false,
+      },
+      // 表单数据模型
+      ruleForm: {
+        username: '',
+        password: '',
+      },
+      // 表单验证规则
+      rules: {
+        username: [
+          { required: true, message: '用户名不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: 'blur' },  // 必填验证
+        ],
+        role: [
+        ],
+      }
+    };
+  },
+  props: ["parent"],  // 定义父组件传入的属性
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()  // 调用样式更新方法
+    this.addEditUploadStyleChange()  // 调用上传组件样式更新方法
+  },
+  methods: {
+    // 下载文件方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化方法
+    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=='username'){
+            this.ruleForm.username = obj[o];  // 设置用户名
+            this.ro.username = true;  // 设置为只读
+            continue;
+          }
+          if(o=='password'){
+            this.ruleForm.password = obj[o];  // 设置密码
+            this.ro.password = true;  // 设置为只读
+            continue;
+          }
+          if(o=='role'){
+            this.ruleForm.role = obj[o];  // 设置角色
+            this.ro.role = true;  // 设置为只读
+            continue;
+          }
+        }
+      }
+    },
+    // 获取详细信息方法
+    info(id) {
+      this.$http({
+        url: `users/info/${id}`,
+        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: `users/${!this.ruleForm.id ? "save" : "update"}`,  // 请求保存或更新接口
+            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.usersCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+                  this.parent.search();  // 刷新列表
+                  this.parent.contentStyleChange();  // 更新列表样式
+                }
+              });
+            } else {
+              this.$message.error(data.msg);  // 显示错误消息
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回方法
+    back() {
+      this.parent.showFlag = true;  // 显示列表页
+      this.parent.addOrUpdateFlag = false;  // 隐藏表单页
+      this.parent.usersCrossAddOrUpdateFlag = false;  // 隐藏关联表单页
+      this.parent.contentStyleChange();  // 更新列表样式
+    },
+    addEditStyleChange() {  // 更新表单样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        // 更新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;
+        });
+        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样式
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectFontColor;
+          el.style.fontSize = this.addEditForm.selectFontSize;
+          el.style.borderWidth = this.addEditForm.selectBorderWidth;
+          el.style.borderStyle = this.addEditForm.selectBorderStyle;
+          el.style.borderColor = this.addEditForm.selectBorderColor;
+          el.style.borderRadius = this.addEditForm.selectBorderRadius;
+          el.style.backgroundColor = this.addEditForm.selectBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight;
+          el.style.color = this.addEditForm.selectLableColor;
+          el.style.fontSize = this.addEditForm.selectLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor;
+          el.style.fontSize = this.addEditForm.selectIconFontSize;
+        });
+        // 更新date样式
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateFontColor;
+          el.style.fontSize = this.addEditForm.dateFontSize;
+          el.style.borderWidth = this.addEditForm.dateBorderWidth;
+          el.style.borderStyle = this.addEditForm.dateBorderStyle;
+          el.style.borderColor = this.addEditForm.dateBorderColor;
+          el.style.borderRadius = this.addEditForm.dateBorderRadius;
+          el.style.backgroundColor = this.addEditForm.dateBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight;
+          el.style.color = this.addEditForm.dateLableColor;
+          el.style.fontSize = this.addEditForm.dateLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor;
+          el.style.fontSize = this.addEditForm.dateIconFontSize;
+          el.style.lineHeight = this.addEditForm.dateHeight;
+        });
+        // 更新upload样式
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px';
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight;
+          el.style.color = this.addEditForm.uploadLableColor;
+          el.style.fontSize = this.addEditForm.uploadLableFontSize;
+        });
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor;
+          el.style.fontSize = this.addEditForm.uploadIconFontSize;
+          el.style.lineHeight = iconLineHeight;
+          el.style.display = 'block';
+        });
+        // 更新textarea样式
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight;
+          el.style.color = this.addEditForm.textareaFontColor;
+          el.style.fontSize = this.addEditForm.textareaFontSize;
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth;
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle;
+          el.style.borderColor = this.addEditForm.textareaBorderColor;
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius;
+          el.style.backgroundColor = this.addEditForm.textareaBgColor;
+        });
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor;
+          el.style.fontSize = this.addEditForm.textareaLableFontSize;
+        });
+        // 更新按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth;
+          el.style.height = this.addEditForm.btnSaveHeight;
+          el.style.color = this.addEditForm.btnSaveFontColor;
+          el.style.fontSize = this.addEditForm.btnSaveFontSize;
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle;
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor;
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor;
+        });
+        // 更新取消按钮样式
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth;
+          el.style.height = this.addEditForm.btnCancelHeight;
+          el.style.color = this.addEditForm.btnCancelFontColor;
+          el.style.fontSize = this.addEditForm.btnCancelFontSize;
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth;
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle;
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor;
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius;
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor;
+        });
+      });
+    },
+    addEditUploadStyleChange() {  // 更新上传组件样式方法
+      this.$nextTick(()=>{  // 在DOM更新后执行
+        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;  <!-- 设置内容区域高度 -->
+  }
+}
+.amap-wrapper {  <!-- 地图容器 -->
+  width: 100%;  <!-- 宽度为100% -->
+  height: 500px;  <!-- 高度为500px -->
+}
+.search-box {  <!-- 搜索原高度 -->
+  position: absolute;  <!-- 绝对定位 -->
+}
+.addEdit-block {  <!-- 表单容器 -->
+  margin: -10px;  <!-- 外边距 -->
+}
+.detail-form-content {  <!-- 表单内容 -->
+  padding: 12px;  <!-- 内边距 -->
+}
+.btn .el-button {  <!-- 按钮样式 -->
+  padding: 0;  <!-- 无内边距 -->
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/users/list.vue b/fount/views/modules/users/list.vue
new file mode 100644
index 0000000..02f38fa
--- /dev/null
+++ b/fount/views/modules/users/list.vue
@@ -0,0 +1,530 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索功能 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索功能行，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.username" placeholder="用户名" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.username" placeholder="用户名" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.username" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索框按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('users','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('users','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('users','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('users','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('users','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('users','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('users','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="username"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.username}}
+            </template>
+          </el-table-column>
+          <!-- 密码列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="password"
+                            header-align="center"
+                            label="密码">
+            <template slot-scope="scope">
+              {{scope.row.password}}
+            </template>
+          </el-table-column>
+          <!-- 角色列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="role"
+                            header-align="center"
+                            label="角色">
+            <template slot-scope="scope">
+              {{scope.row.role}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('users','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('users','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('users','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('users','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('users','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('users','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('users','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('users','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('users','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索按钮表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索功能样式变更
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索功能按钮样式变更
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化
+    init () {
+      // 初始化方法
+    },
+    // 搜索功能
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.username!='' && this.searchForm.username!=undefined){
+        params['username'] = '%' + this.searchForm.username + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "users/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 查看评论
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "users/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索的行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作按钮行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/weixiuchuli/add-or-update.vue b/fount/views/modules/weixiuchuli/add-or-update.vue
new file mode 100644
index 0000000..7acf5c7
--- /dev/null
+++ b/fount/views/modules/weixiuchuli/add-or-update.vue
@@ -0,0 +1,660 @@
+<template>
+  <div class="addEdit-block">
+    <!-- 表单容器 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}">  <!-- 后台配置表单背景颜色 -->
+      <el-row>
+        <!-- 表单列，自适应布局 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="房屋名称" prop="fangwumingcheng">
+            <!-- 输入框，非只读模式 -->
+            <el-input v-model="ruleForm.fangwumingcheng"
+                      placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+          </el-form-item>
+          <div v-else>
+            <!-- 输入框，只读模式 -->
+            <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+              <el-input v-model="ruleForm.fangwumingcheng"
+                        placeholder="房屋名称" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 房屋类型表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="房屋类型" prop="fangwuleixing">
+            <el-input v-model="ruleForm.fangwuleixing"
+                      placeholder="房屋类型" clearable  :readonly="ro.fangwuleixing"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+              <el-input v-model="ruleForm.fangwuleixing"
+                        placeholder="房屋类型" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 报修名称表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="报修名称" prop="baoxiumingcheng">
+            <el-input v-model="ruleForm.baoxiumingcheng"
+                      placeholder="报修名称" clearable  :readonly="ro.baoxiumingcheng"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="报修名称" prop="baoxiumingcheng">
+              <el-input v-model="ruleForm.baoxiumingcheng"
+                        placeholder="报修名称" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 类型表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="类型" prop="leixing">
+            <el-input v-model="ruleForm.leixing"
+                      placeholder="类型" clearable  :readonly="ro.leixing"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="类型" prop="leixing">
+              <el-input v-model="ruleForm.leixing"
+                        placeholder="类型" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 报修日期表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="报修日期" prop="baoxiuriqi">
+            <el-input v-model="ruleForm.baoxiuriqi"
+                      placeholder="报修日期" clearable  :readonly="ro.baoxiuriqi"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="报修日期" prop="baoxiuriqi">
+              <el-input v-model="ruleForm.baoxiuriqi"
+                        placeholder="报修日期" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 维修反馈表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="维修反馈" prop="weixiufankui">
+            <el-input v-model="ruleForm.weixiufankui"
+                      placeholder="维修反馈" clearable  :readonly="ro.weixiufankui"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="维修反馈" prop="weixiufankui">
+              <el-input v-model="ruleForm.weixiufankui"
+                        placeholder="维修反馈" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 维修进度表单，下拉选择 -->
+        <el-col :span="12">
+          <el-form-item class="select" v-if="type!='info'"  label="维修进度" prop="weixiujindu">
+            <el-select v-model="ruleForm.weixiujindu" placeholder="请选择维修进度">
+              <el-option
+                  v-for="(item,index) in weixiujinduOptions"
+                  v-bind:key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="维修进度" prop="weixiujindu">
+              <el-input v-model="ruleForm.weixiujindu"
+                        placeholder="维修进度" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 更新日期表单，日期选择器 -->
+        <el-col :span="12">
+          <el-form-item class="date" v-if="type!='info'" label="更新日期" prop="gengxinriqi">
+            <el-date-picker
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                v-model="ruleForm.gengxinriqi"
+                type="date"
+                placeholder="更新日期">
+            </el-date-picker>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.gengxinriqi" label="更新日期" prop="gengxinriqi">
+              <el-input v-model="ruleForm.gengxinriqi"
+                        placeholder="更新日期" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 房主账号表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="房主账号" prop="fangzhuzhanghao">
+            <el-input v-model="ruleForm.fangzhuzhanghao"
+                      placeholder="房主账号" clearable  :readonly="ro.fangzhuzhanghao"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="房主账号" prop="fangzhuzhanghao">
+              <el-input v-model="ruleForm.fangzhuzhanghao"
+                        placeholder="房主账号" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 房主姓名表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="房主姓名" prop="fangzhuxingming">
+            <el-input v-model="ruleForm.fangzhuxingming"
+                      placeholder="房主姓名" clearable  :readonly="ro.fangzhuxingming"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="房主姓名" prop="fangzhuxingming">
+              <el-input v-model="ruleForm.fangzhuxingming"
+                        placeholder="房主姓名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 用户名表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="yonghuming">
+            <el-input v-model="ruleForm.yonghuming"
+                      placeholder="用户名" clearable  :readonly="ro.yonghuming"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="用户名" prop="yonghuming">
+              <el-input v-model="ruleForm.yonghuming"
+                        placeholder="用户名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 联系电话表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="联系电话" prop="lianxidianhua">
+            <el-input v-model="ruleForm.lianxidianhua"
+                      placeholder="联系电话" clearable  :readonly="ro.lianxidianhua"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="联系电话" prop="lianxidianhua">
+              <el-input v-model="ruleForm.lianxidianhua"
+                        placeholder="联系电话" readonly></el-input>
+            </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();
+      }
+    };
+    var validateUrl = (rule, value, callback) => {
+      if(!value){
+        callback();
+      } else if (!isURL(value)) {
+        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","selectFontSize":"14px","btnCancelBorderColor":"rgba(152, 129, 129, 1)","inputBorderRadius":"22px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"22px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"22px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(210, 194, 194, 0.29)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"rgba(152, 129, 129, 1)","btnCancelBgColor":"rgba(143, 222, 143, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"22px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"rgba(152, 129, 129, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"22px","inputBgColor":"rgba(252, 250, 250, 1)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"22px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(152, 129, 129, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","uploadBorderColor":"rgba(152, 129, 129, 1)","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"22px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
+      // 表单ID
+      id: '',
+      // 表单类型
+      type: '',
+      // 是否只读
+      ro:{
+        fangwumingcheng : false,
+        fangwuleixing : false,
+        baoxiumingcheng : false,
+        leixing : false,
+        baoxiuriqi : false,
+        weixiufankui : false,
+        weixiujindu : false,
+        gengxinriqi : false,
+        fangzhuzhanghao : false,
+        fangzhuxingming : false,
+        yonghuming : false,
+        lianxidianhua : false,
+      },
+      // 表单数据
+      ruleForm: {
+        fangwumingcheng: '',
+        fangwuleixing: '',
+        baoxiumingcheng: '',
+        leixing: '',
+        baoxiuriqi: '',
+        weixiufankui: '',
+        weixiujindu: '',
+        gengxinriqi: '',
+        fangzhuzhanghao: '',
+        fangzhuxingming: '',
+        yonghuming: '',
+        lianxidianhua: '',
+      },
+      // 维修进度选项
+      weixiujinduOptions: [],
+      // 表单验证规则
+      rules: {
+        fangwumingcheng: [
+        ],
+        fangwuleixing: [
+        ],
+        baoxiumingcheng: [
+        ],
+        leixing: [
+        ],
+        baoxiuriqi: [
+        ],
+        weixiufankui: [
+        ],
+        weixiujindu: [
+        ],
+        gengxinriqi: [
+        ],
+        fangzhuzhanghao: [
+        ],
+        fangzhuxingming: [
+        ],
+        yonghuming: [
+        ],
+        lianxidianhua: [
+        ],
+      }
+    };
+  },
+  // 父组件传入参数
+  props: ["parent"],
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()
+    this.addEditUploadStyleChange()
+  },
+  methods: {
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化表单
+    init(id,type) {
+      if (id) {
+        this.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=='fangwumingcheng'){
+            this.ruleForm.fangwumingcheng = obj[o];
+            this.ro.fangwumingcheng = true;
+            continue;
+          }
+          if(o=='fangwuleixing'){
+            this.ruleForm.fangwuleixing = obj[o];
+            this.ro.fangwuleixing = true;
+            continue;
+          }
+          if(o=='baoxiumingcheng'){
+            this.ruleForm.baoxiumingcheng = obj[o];
+            this.ro.baoxiumingcheng = true;
+            continue;
+          }
+          if(o=='leixing'){
+            this.ruleForm.leixing = obj[o];
+            this.ro.leixing = true;
+            continue;
+          }
+          if(o=='baoxiuriqi'){
+            this.ruleForm.baoxiuriqi = obj[o];
+            this.ro.baoxiuriqi = true;
+            continue;
+          }
+          if(o=='weixiufankui'){
+            this.ruleForm.weixiufankui = obj[o];
+            this.ro.weixiufankui = true;
+            continue;
+          }
+          if(o=='weixiujindu'){
+            this.ruleForm.weixiujindu = obj[o];
+            this.ro.weixiujindu = true;
+            continue;
+          }
+          if(o=='gengxinriqi'){
+            this.ruleForm.gengxinriqi = obj[o];
+            this.ro.gengxinriqi = true;
+            continue;
+          }
+          if(o=='fangzhuzhanghao'){
+            this.ruleForm.fangzhuzhanghao = obj[o];
+            this.ro.fangzhuzhanghao = true;
+            continue;
+          }
+          if(o=='fangzhuxingming'){
+            this.ruleForm.fangzhuxingming = obj[o];
+            this.ro.fangzhuxingming = true;
+            continue;
+          }
+          if(o=='yonghuming'){
+            this.ruleForm.yonghuming = obj[o];
+            this.ro.yonghuming = true;
+            continue;
+          }
+          if(o=='lianxidianhua'){
+            this.ruleForm.lianxidianhua = obj[o];
+            this.ro.lianxidianhua = true;
+            continue;
+          }
+        }
+      }
+      // 获取用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      this.weixiujinduOptions = "维修中,已完成".split(',')
+    },
+    // 获取表单详情
+    info(id) {
+      this.$http({
+        url: `weixiuchuli/info/${id}`,
+        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: `weixiuchuli/${!this.ruleForm.id ? "save" : "update"}`,
+            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.weixiuchuliCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回上一页
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.weixiuchuliCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 表单样式变更
+    addEditStyleChange() {
+      this.$nextTick(()=>{  // DOM更新后执行
+        // 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
+        })
+        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样式更新
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight
+          el.style.color = this.addEditForm.selectFontColor
+          el.style.fontSize = this.addEditForm.selectFontSize
+          el.style.borderWidth = this.addEditForm.selectBorderWidth
+          el.style.borderStyle = this.addEditForm.selectBorderStyle
+          el.style.borderColor = this.addEditForm.selectBorderColor
+          el.style.borderRadius = this.addEditForm.selectBorderRadius
+          el.style.backgroundColor = this.addEditForm.selectBgColor
+        })
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight
+          el.style.color = this.addEditForm.selectLableColor
+          el.style.fontSize = this.addEditForm.selectLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor
+          el.style.fontSize = this.addEditForm.selectIconFontSize
+        })
+        // date样式更新
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight
+          el.style.color = this.addEditForm.dateFontColor
+          el.style.fontSize = this.addEditForm.dateFontSize
+          el.style.borderWidth = this.addEditForm.dateBorderWidth
+          el.style.borderStyle = this.addEditForm.dateBorderStyle
+          el.style.borderColor = this.addEditForm.dateBorderColor
+          el.style.borderRadius = this.addEditForm.dateBorderRadius
+          el.style.backgroundColor = this.addEditForm.dateBgColor
+        })
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight
+          el.style.color = this.addEditForm.dateLableColor
+          el.style.fontSize = this.addEditForm.dateLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor
+          el.style.fontSize = this.addEditForm.dateIconFontSize
+          el.style.lineHeight = this.addEditForm.dateHeight
+        })
+        // upload样式更新
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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
+        })
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight
+          el.style.color = this.addEditForm.uploadLableColor
+          el.style.fontSize = this.addEditForm.uploadLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor
+          el.style.fontSize = this.addEditForm.uploadIconFontSize
+          el.style.lineHeight = iconLineHeight
+          el.style.display = 'block'
+        })
+        // textarea样式更新
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaFontColor
+          el.style.fontSize = this.addEditForm.textareaFontSize
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle
+          el.style.borderColor = this.addEditForm.textareaBorderColor
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius
+          el.style.backgroundColor = this.addEditForm.textareaBgColor
+        })
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          el.style.color = this.addEditForm.textareaLableColor
+          el.style.fontSize = this.addEditForm.textareaLableFontSize
+        })
+        // 保存按钮样式更新
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth
+          el.style.height = this.addEditForm.btnSaveHeight
+          el.style.color = this.addEditForm.btnSaveFontColor
+          el.style.fontSize = this.addEditForm.btnSaveFontSize
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor
+        })
+        // 返回按钮样式更新
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth
+          el.style.height = this.addEditForm.btnCancelHeight
+          el.style.color = this.addEditForm.btnCancelFontColor
+          el.style.fontSize = this.addEditForm.btnCancelFontSize
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor
+        })
+      })
+    },
+    addEditUploadStyleChange() {  // 文件上传样式变更
+      this.$nextTick(()=>{  // DOM更新后执行
+        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;
+  }
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+.search-box {
+  position: absolute;
+}
+.addEdit-block {
+  margin: -10px; // 外边距
+}
+.detail-form-content {
+  padding: 12px; // 内边距
+}
+.btn .el-button {
+  padding: 0; // 按钮填充
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/weixiuchuli/list.vue b/fount/views/modules/weixiuchuli/list.vue
new file mode 100644
index 0000000..c7f5568
--- /dev/null
+++ b/fount/views/modules/weixiuchuli/list.vue
@@ -0,0 +1,639 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索按钮表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索表行，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 报修名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '报修名称' : ''">
+            <!-- 前置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.baoxiumingcheng" placeholder="报修名称" clearable></el-input>
+            <!-- 后置图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.baoxiumingcheng" placeholder="报修名称" clearable></el-input>
+            <!-- 无图标搜索框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.baoxiumingcheng" placeholder="报修名称" clearable></el-input>
+          </el-form-item>
+          <!-- 维修进度搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '维修进度' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.weixiujindu" placeholder="维修进度" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.weixiujindu" placeholder="维修进度" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.weixiujindu" placeholder="维修进度" clearable></el-input>
+          </el-form-item>
+          <!-- 房主姓名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房主姓名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+          </el-form-item>
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索功能按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('weixiuchuli','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('weixiuchuli','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('weixiuchuli','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('weixiuchuli','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('weixiuchuli','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('weixiuchuli','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('weixiuchuli','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 报修名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="baoxiumingcheng"
+                            header-align="center"
+                            label="报修名称">
+            <template slot-scope="scope">
+              {{scope.row.baoxiumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="leixing"
+                            header-align="center"
+                            label="类型">
+            <template slot-scope="scope">
+              {{scope.row.leixing}}
+            </template>
+          </el-table-column>
+          <!-- 报修日期列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="baoxiuriqi"
+                            header-align="center"
+                            label="报修日期">
+            <template slot-scope="scope">
+              {{scope.row.baoxiuriqi}}
+            </template>
+          </el-table-column>
+          <!-- 维修反馈列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="weixiufankui"
+                            header-align="center"
+                            label="维修反馈">
+            <template slot-scope="scope">
+              {{scope.row.weixiufankui}}
+            </template>
+          </el-table-column>
+          <!-- 维修进度列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="weixiujindu"
+                            header-align="center"
+                            label="维修进度">
+            <template slot-scope="scope">
+              {{scope.row.weixiujindu}}
+            </template>
+          </el-table-column>
+          <!-- 更新日期列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="gengxinriqi"
+                            header-align="center"
+                            label="更新日期">
+            <template slot-scope="scope">
+              {{scope.row.gengxinriqi}}
+            </template>
+          </el-table-column>
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+          <!-- 房主姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuxingming"
+                            header-align="center"
+                            label="房主姓名">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuxingming}}
+            </template>
+          </el-table-column>
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+          <!-- 联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('weixiuchuli','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('weixiuchuli','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('weixiuchuli','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('weixiuchuli','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('weixiuchuli','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('weixiuchuli','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('weixiuchuli','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('weixiuchuli','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('weixiuchuli','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+// 引入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+export default {
+  data() {
+    return {
+      // 搜索功能表单数据
+      searchForm: {
+        key: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总条数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 选中数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单数据
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 配置内容
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  // 创建时钩子
+  created() {
+    this.init();
+    this.getDataList();
+    this.contentStyleChange()
+  },
+  // 挂载后钩子
+  mounted() {
+
+  },
+  // 过滤器
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 组件注册
+  components: {
+    AddOrUpdate,
+  },
+  // 方法
+  methods: {
+    // 内容样式变更
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索框功能样式变更
+    contentSearchStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索图标按钮样式变更
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式变更
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=> {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表格表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式变更
+    contentTableBtnStyleChange(){
+      // 此方法暂未实现具体内容
+    },
+    // 分页样式变更
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 初始化
+    init () {
+      // 初始化维修进度选项
+      this.weixiujinduOptions = "维修中,已完成".split(',')
+    },
+    // 搜索框功能
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.baoxiumingcheng!='' && this.searchForm.baoxiumingcheng!=undefined){
+        params['baoxiumingcheng'] = '%' + this.searchForm.baoxiumingcheng + '%'
+      }
+      if(this.searchForm.weixiujindu!='' && this.searchForm.weixiujindu!=undefined){
+        params['weixiujindu'] = '%' + this.searchForm.weixiujindu + '%'
+      }
+      if(this.searchForm.fangzhuxingming!='' && this.searchForm.fangzhuxingming!=undefined){
+        params['fangzhuxingming'] = '%' + this.searchForm.fangzhuxingming + '%'
+      }
+      if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){
+        params['yonghuming'] = '%' + this.searchForm.yonghuming + '%'
+      }
+      // 发送请求获取数据
+      this.$http({
+        url: "weixiuchuli/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变更处理
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变更处理
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变更处理
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 查看评论
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "weixiuchuli/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+<style lang="scss" scoped>
+// 搜索功能行样式
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+// 操作按钮行样式
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+// 分页样式
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+// 按钮间距样式
+.el-button+.el-button {
+  margin:0;
+}
+// 表格按钮样式
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/woyaodangfangzhu/add-or-update.vue b/fount/views/modules/woyaodangfangzhu/add-or-update.vue
new file mode 100644
index 0000000..885f89b
--- /dev/null
+++ b/fount/views/modules/woyaodangfangzhu/add-or-update.vue
@@ -0,0 +1,628 @@
+<template>
+  <!-- 定义模板的根元素 -->
+  <div class="addEdit-block">
+    <!-- 定义表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"
+    >
+      <!-- 定义表单的行布局 -->
+      <el-row>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房屋名称" prop="fangwumingcheng">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangwumingcheng"
+                      placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+              <el-input v-model="ruleForm.fangwumingcheng"
+                        placeholder="房屋名称" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="select" v-if="type!='info'"  label="房屋类型" prop="fangwuleixing">
+            <!-- 定义下拉选择框 -->
+            <el-select v-model="ruleForm.fangwuleixing" placeholder="请选择房屋类型">
+              <el-option
+                  v-for="(item,index) in fangwuleixingOptions"
+                  v-bind:key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+              <el-input v-model="ruleForm.fangwuleixing"
+                        placeholder="房屋类型" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="24">
+          <!-- 定义表单项 -->
+          <el-form-item class="upload" v-if="type!='info' && !ro.tupian" label="图片" prop="tupian">
+            <!-- 定义文件上传组件 -->
+            <file-upload
+                tip="点击上传图片"
+                action="file/upload"
+                :limit="3"
+                :multiple="true"
+                :fileUrls="ruleForm.tupian?ruleForm.tupian:''"
+                @change="tupianUploadChange"
+            ></file-upload>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.tupian" label="图片" prop="tupian">
+              <!-- 定义图片展示 -->
+              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.tupian.split(',')" :src="item" width="100" height="100">
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="select" v-if="type!='info'"  label="租赁方式" prop="zulinfangshi">
+            <!-- 定义下拉选择框 -->
+            <el-select v-model="ruleForm.zulinfangshi" placeholder="请选择租赁方式">
+              <el-option
+                  v-for="(item,index) in zulinfangshiOptions"
+                  v-bind:key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="租赁方式" prop="zulinfangshi">
+              <el-input v-model="ruleForm.zulinfangshi"
+                        placeholder="租赁方式" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="朝向楼层" prop="chaoxianglouceng">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.chaoxianglouceng"
+                      placeholder="朝向楼层" clearable  :readonly="ro.chaoxianglouceng"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="朝向楼层" prop="chaoxianglouceng">
+              <el-input v-model="ruleForm.chaoxianglouceng"
+                        placeholder="朝向楼层" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="小区" prop="xiaoqu">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.xiaoqu"
+                      placeholder="小区" clearable  :readonly="ro.xiaoqu"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="小区" prop="xiaoqu">
+              <el-input v-model="ruleForm.xiaoqu"
+                        placeholder="小区" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="面积" prop="mianji">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.mianji"
+                      placeholder="面积" clearable  :readonly="ro.mianji"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="面积" prop="mianji">
+              <el-input v-model="ruleForm.mianji"
+                        placeholder="面积" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="月租价格" prop="yuezujiage">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yuezujiage"
+                      placeholder="月租价格" clearable  :readonly="ro.yuezujiage"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="月租价格" prop="yuezujiage">
+              <el-input v-model="ruleForm.yuezujiage"
+                        placeholder="月租价格" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="date" v-if="type!='info'" label="发布日期" prop="faburiqi">
+            <!-- 定义日期选择器 -->
+            <el-date-picker
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                v-model="ruleForm.faburiqi"
+                type="date"
+                placeholder="发布日期">
+            </el-date-picker>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.faburiqi" label="发布日期" prop="faburiqi">
+              <el-input v-model="ruleForm.faburiqi"
+                        placeholder="发布日期" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="yonghuming">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yonghuming"
+                      placeholder="用户名" clearable  :readonly="ro.yonghuming"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="用户名" prop="yonghuming">
+              <el-input v-model="ruleForm.yonghuming"
+                        placeholder="用户名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="联系电话" prop="lianxidianhua">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.lianxidianhua"
+                      placeholder="联系电话" clearable  :readonly="ro.lianxidianhua"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="联系电话" prop="lianxidianhua">
+              <el-input v-model="ruleForm.lianxidianhua"
+                        placeholder="联系电话" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 定义表单的行布局 -->
+      <el-row>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="24">
+          <!-- 定义表单项 -->
+          <el-form-item v-if="type!='info'"  label="房屋详情" prop="fangwuxiangqing">
+            <!-- 定义富文本编辑器 -->
+            <editor
+                style="min-width: 200px; max-width: 600px;"
+                v-model="ruleForm.fangwuxiangqing"
+                class="editor"
+                action="file/upload">
+            </editor>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item v-if="ruleForm.fangwuxiangqing" label="房屋详情" prop="fangwuxiangqing">
+              <!-- 显示内容 -->
+              <span v-html="ruleForm.fangwuxiangqing"></span>
+            </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)) {
+        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","selectFontSize":"14px","btnCancelBorderColor":"rgba(152, 129, 129, 1)","inputBorderRadius":"22px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"22px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"22px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(210, 194, 194, 0.29)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"rgba(152, 129, 129, 1)","btnCancelBgColor":"rgba(143, 222, 143, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"22px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"rgba(152, 129, 129, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"22px","inputBgColor":"rgba(252, 250, 250, 1)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"22px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(152, 129, 129, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","uploadBorderColor":"rgba(152, 129, 129, 1)","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"22px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
+      // 定义ID变量
+      id: '',
+      // 定义类型变量
+      type: '',
+      // 定义只读状态对象
+      ro:{
+        fangwumingcheng : false,
+        fangwuleixing : false,
+        tupian : false,
+        zulinfangshi : false,
+        chaoxianglouceng : false,
+        xiaoqu : false,
+        mianji : false,
+        yuezujiage : false,
+        fangwuxiangqing : false,
+        faburiqi : false,
+        yonghuming : false,
+        lianxidianhua : false,
+        sfsh : false,
+        shhf : false,
+      },
+      // 定义表单数据
+      ruleForm: {
+        fangwumingcheng: '',
+        fangwuleixing: '',
+        tupian: '',
+        zulinfangshi: '',
+        chaoxianglouceng: '',
+        xiaoqu: '',
+        mianji: '',
+        yuezujiage: '',
+        fangwuxiangqing: '',
+        faburiqi: '',
+        yonghuming: '',
+        lianxidianhua: '',
+        shhf: '',
+      },
+      // 定义下拉选项
+      fangwuleixingOptions: [],
+      zulinfangshiOptions: [],
+      // 定义表单验证规则
+      rules: {
+        fangwumingcheng: [
+          { required: true, message: '房屋名称不能为空', trigger: 'blur' },
+        ],
+        fangwuleixing: [
+          { required: true, message: '房屋类型不能为空', trigger: 'blur' },
+        ],
+        tupian: [
+          { required: true, message: '图片不能为空', trigger: 'blur' },
+        ],
+        zulinfangshi: [
+          { required: true, message: '租赁方式不能为空', trigger: 'blur' },
+        ],
+        chaoxianglouceng: [
+        ],
+        xiaoqu: [
+        ],
+        mianji: [
+        ],
+        yuezujiage: [
+          { validator: validateIntNumber, trigger: 'blur' },
+        ],
+        fangwuxiangqing: [
+        ],
+        faburiqi: [
+        ],
+        yonghuming: [
+        ],
+        lianxidianhua: [
+        ],
+        sfsh: [
+        ],
+        shhf: [
+        ],
+      }
+    };
+  },
+  // 定义父组件传值
+  props: ["parent"],
+  // 定义生命周期钩子
+  created() {
+    // 调用样式初始化方法
+    this.addEditStyleChange()
+    // 调用上传组件样式初始化方法
+    this.addEditUploadStyleChange()
+  },
+  // 定义方法
+  methods: {
+    // 定义下载方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 定义初始化方法
+    init(id,type) {
+      if (id) {
+        this.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=='fangwumingcheng'){
+            this.ruleForm.fangwumingcheng = obj[o];
+            this.ro.fangwumingcheng = true;
+            continue;
+          }
+          if(o=='fangwuleixing'){
+            this.ruleForm.fangwuleixing = obj[o];
+            this.ro.fangwuleixing = true;
+            continue;
+          }
+          if(o=='tupian'){
+            this.ruleForm.tupian = obj[o];
+            this.ro.tupian = true;
+            continue;
+          }
+          if(o=='zulinfangshi'){
+            this.ruleForm.zulinfangshi = obj[o];
+            this.ro.zulinfangshi = true;
+            continue;
+          }
+          if(o=='chaoxianglouceng'){
+            this.ruleForm.chaoxianglouceng = obj[o];
+            this.ro.chaoxianglouceng = true;
+            continue;
+          }
+          if(o=='xiaoqu'){
+            this.ruleForm.xiaoqu = obj[o];
+            this.ro.xiaoqu = true;
+            continue;
+          }
+          if(o=='mianji'){
+            this.ruleForm.mianji = obj[o];
+            this.ro.mianji = true;
+            continue;
+          }
+          if(o=='yuezujiage'){
+            this.ruleForm.yuezujiage = obj[o];
+            this.ro.yuezujiage = true;
+            continue;
+          }
+          if(o=='fangwuxiangqing'){
+            this.ruleForm.fangwuxiangqing = obj[o];
+            this.ro.fangwuxiangqing = true;
+            continue;
+          }
+          if(o=='faburiqi'){
+            this.ruleForm.faburiqi = obj[o];
+            this.ro.faburiqi = true;
+            continue;
+          }
+          if(o=='yonghuming'){
+            this.ruleForm.yonghuming = obj[o];
+            this.ro.yonghuming = true;
+            continue;
+          }
+          if(o=='lianxidianhua'){
+            this.ruleForm.lianxidianhua = obj[o];
+            this.ro.lianxidianhua = true;
+            continue;
+          }
+        }
+      }
+      // 获取用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+          if(json.yonghuming!=''&&json.yonghuming){
+            this.ruleForm.yonghuming = json.yonghuming
+          }
+          if(json.lianxidianhua!=''&&json.lianxidianhua){
+            this.ruleForm.lianxidianhua = json.lianxidianhua
+          }
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      // 初始化下拉选项
+      this.$http({
+        url: `option/fangwuleixing/fangwuleixing`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.fangwuleixingOptions = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      // 初始化下拉选项
+      this.zulinfangshiOptions = "整租,合租".split(',')
+    },
+    // 定义获取详情方法
+    info(id) {
+      this.$http({
+        url: `woyaodangfangzhu/info/${id}`,
+        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: `woyaodangfangzhu/${!this.ruleForm.id ? "save" : "update"}`,
+            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.woyaodangfangzhuCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 定义获取UUID方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 定义返回方法
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.woyaodangfangzhuCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 定义文件上传变化方法
+    tupianUploadChange(fileUrls) {
+      this.ruleForm.tupian = fileUrls;
+      this.addEditUploadStyleChange()
+    },
+    // 定义样式初始化方法
+    addEditStyleChange() {
+      this.$nextTick(()=>{})
+    },
+    // 定义上传组件样式初始化方法
+    addEditUploadStyleChange() {
+      this.$nextTick(()=>{})
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+// 定义编辑器样式
+.editor{
+  height: 500px;
+  & /deep/ .ql-container {
+    height: 310px;
+  }
+}
+// 定义地图样式
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+// 定义搜索框样式
+.search-box {
+  position: absolute;
+}
+// 定义添加编辑块样式
+.addEdit-block {
+  margin: -10px;
+}
+// 定义详情表单内容样式
+.detail-form-content {
+  padding: 12px;
+}
+// 定义按钮样式
+.btn .el-button {
+  padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/woyaodangfangzhu/list.vue b/fount/views/modules/woyaodangfangzhu/list.vue
new file mode 100644
index 0000000..dea9d7c
--- /dev/null
+++ b/fount/views/modules/woyaodangfangzhu/list.vue
@@ -0,0 +1,800 @@
+<template>
+  <!-- 定义模板的根元素 -->
+  <div class="main-content">
+    <!-- 定义列表页的显示条件 -->
+    <div v-if="showFlag">
+      <!-- 定义搜索表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 定义搜索项的行布局 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 定义房屋名称搜索项 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋名称' : ''">
+            <!-- 定义带有前缀图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 定义带有后缀图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <!-- 定义普通输入框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+          </el-form-item>
+          <!-- 定义小区搜索项 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '小区' : ''">
+            <!-- 定义带有前缀图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.xiaoqu" placeholder="小区" clearable></el-input>
+            <!-- 定义带有后缀图标的输入框 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.xiaoqu" placeholder="小区" clearable></el-input>
+            <!-- 定义普通输入框 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.xiaoqu" placeholder="小区" clearable></el-input>
+          </el-form-item>
+          <!-- 定义搜索按钮 -->
+          <el-form-item>
+            <!-- 定义带前缀图标的按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 定义带后缀图标的按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 定义普通按钮 -->
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 定义操作按钮的行布局 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 定义操作按钮组 -->
+          <el-form-item>
+            <!-- 定义新增按钮 -->
+            <el-button
+                v-if="isAuth('woyaodangfangzhu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 定义带后缀图标的新增按钮 -->
+            <el-button
+                v-if="isAuth('woyaodangfangzhu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <!-- 定义普通新增按钮 -->
+            <el-button
+                v-if="isAuth('woyaodangfangzhu','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 定义删除按钮 -->
+            <el-button
+                v-if="isAuth('woyaodangfangzhu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <!-- 定义带后缀图标的删除按钮 -->
+            <el-button
+                v-if="isAuth('woyaodangfangzhu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <!-- 定义普通删除按钮 -->
+            <el-button
+                v-if="isAuth('woyaodangfangzhu','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 定义表格内容 -->
+      <div class="table-content">
+        <!-- 定义表格 -->
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('woyaodangfangzhu','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 定义选择列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 定义索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 定义房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+          <!-- 定义房屋类型列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+          <!-- 定义图片列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="tupian"
+                           header-align="center"
+                           width="200"
+                           label="图片">
+            <template slot-scope="scope">
+              <div v-if="scope.row.tupian">
+                <img :src="scope.row.tupian.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 定义租赁方式列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zulinfangshi"
+                            header-align="center"
+                            label="租赁方式">
+            <template slot-scope="scope">
+              {{scope.row.zulinfangshi}}
+            </template>
+          </el-table-column>
+          <!-- 定义朝向楼层列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="chaoxianglouceng"
+                            header-align="center"
+                            label="朝向楼层">
+            <template slot-scope="scope">
+              {{scope.row.chaoxianglouceng}}
+            </template>
+          </el-table-column>
+          <!-- 定义小区列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiaoqu"
+                            header-align="center"
+                            label="小区">
+            <template slot-scope="scope">
+              {{scope.row.xiaoqu}}
+            </template>
+          </el-table-column>
+          <!-- 定义面积列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="mianji"
+                            header-align="center"
+                            label="面积">
+            <template slot-scope="scope">
+              {{scope.row.mianji}}
+            </template>
+          </el-table-column>
+          <!-- 定义月租价格列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yuezujiage"
+                            header-align="center"
+                            label="月租价格">
+            <template slot-scope="scope">
+              {{scope.row.yuezujiage}}
+            </template>
+          </el-table-column>
+          <!-- 定义发布日期列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="faburiqi"
+                            header-align="center"
+                            label="发布日期">
+            <template slot-scope="scope">
+              {{scope.row.faburiqi}}
+            </template>
+          </el-table-column>
+          <!-- 定义用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+          <!-- 定义联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+          <!-- 定义审核回复列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="shhf"
+                           header-align="center"
+                           label="审核回复">
+          </el-table-column>
+          <!-- 定义审核状态列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核状态">
+            <template slot-scope="scope">
+              <span style="margin-right:10px">{{scope.row.sfsh=='是'?'通过':'未通过'}}</span>
+            </template>
+          </el-table-column>
+          <!-- 定义审核操作列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           v-if="isAuth('woyaodangfangzhu','审核')"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核">
+            <template slot-scope="scope">
+              <el-button  type="text" icon="el-icon-edit" size="small" @click="shDialog(scope.row)">审核</el-button>
+            </template>
+          </el-table-column>
+          <!-- 定义操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 定义详情按钮 -->
+              <el-button v-if="isAuth('woyaodangfangzhu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 定义修改按钮 -->
+              <el-button v-if="isAuth('woyaodangfangzhu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 定义查看评论按钮 -->
+              <el-button v-if="isAuth('woyaodangfangzhu','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','查看评论') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','查看评论') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="disscussListHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'查看评论':'' }}</el-button>
+              <!-- 定义删除按钮 -->
+              <el-button v-if="isAuth('woyaodangfangzhu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('woyaodangfangzhu','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 定义分页组件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 定义添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+
+    <!-- 定义审核对话框 -->
+    <el-dialog
+        title="审核"
+        :visible.sync="sfshVisiable"
+        width="50%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="审核状态">
+          <el-select v-model="shForm.sfsh" placeholder="审核状态">
+            <el-option label="通过" value="是"></el-option>
+            <el-option label="不通过" value="否"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" :rows="8" v-model="shForm.shhf"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="shDialog">取 消</el-button>
+        <el-button type="primary" @click="shHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 导入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+
+export default {
+  data() {
+    return {
+      // 定义搜索表单
+      searchForm: {
+        key: ""
+      },
+      // 定义数据列表
+      dataList: [],
+      // 定义当前页
+      pageIndex: 1,
+      // 定义每页大小
+      pageSize: 10,
+      // 定义总页数
+      totalPage: 0,
+      // 定义数据加载状态
+      dataListLoading: false,
+      // 定义多选数据
+      dataListSelections: [],
+      // 定义列表显示状态
+      showFlag: true,
+      // 定义审核对话框状态
+      sfshVisiable: false,
+      // 定义审核表单
+      shForm: {},
+      // 定义图表显示状态
+      chartVisiable: false,
+      // 定义添加/修改状态
+      addOrUpdateFlag: false,
+      // 定义内容样式配置
+      contents: {
+        "searchBtnFontColor": "#333",
+        "pagePosition": "1",
+        "inputFontSize": "14px",
+        "inputBorderRadius": "22px",
+        "tableBtnDelFontColor": "#333",
+        "tableBtnIconPosition": "1",
+        "searchBtnHeight": "40px",
+        "inputIconColor": "rgba(66, 130, 129, 1)",
+        "searchBtnBorderRadius": "22px",
+        "tableStripe": false,
+        "btnAdAllWarnFontColor": "#333",
+        "tableBtnDetailFontColor": "#333",
+        "tableBtnHeight": "40px",
+        "searchBtnBorderColor": "#DCDFE6",
+        "tableHeaderFontColor": "rgba(33, 34, 35, 1)",
+        "inputTitle": 1,
+        "tableBtnBorderRadius": "22px",
+        "btnAdAllFont": 1,
+        "btnAdAllDelFontColor": "rgba(21, 20, 20, 1)",
+        "tableBtnIcon": 1,
+        "btnAdAllHeight": "40px",
+        "btnAdAllWarnBgColor": "rgba(238, 236, 126, 1)",
+        "btnAdAllBorderWidth": "1px",
+        "tableStripeFontColor": "#606266",
+        "tableBtnBorderStyle": "solid",
+        "inputHeight": "40px",
+        "btnAdAllBorderRadius": "22px",
+        "btnAdAllDelBgColor": "rgba(234, 93, 93, 0.69)",
+        "pageJumper": true,
+        "btnAdAllAddBgColor": "rgba(153, 239, 237, 1)",
+        "searchBtnFont": 1,
+        "tableIndex": true,
+        "btnAdAllIcon": 1,
+        "tableSortable": true,
+        "pageSizes": true,
+        "tableFit": true,
+        "pageBtnBG": true,
+        "searchBtnFontSize": "14px",
+        "tableBtnEditBgColor": "rgba(240, 242, 124, 1)",
+        "inputBorderWidth": "1px",
+        "inputFontPosition": 1,
+        "inputFontColor": "#333",
+        "pageEachNum": 10,
+        "tableHeaderBgColor": "rgba(152, 129, 129, 1)",
+        "inputTitleColor": "#333",
+        "btnAdAllBoxPosition": "1",
+        "tableBtnDetailBgColor": "rgba(171, 239, 239, 1)",
+        "inputIcon": 0,
+        "searchBtnIconPosition": 1,
+        "btnAdAllFontSize": "14px",
+        "inputBorderStyle": "solid",
+        "inputBgColor": "rgba(197, 174, 174, 0.32)",
+        "pageStyle": false,
+        "pageTotal": true,
+        "btnAdAllAddFontColor": "#333",
+        "tableBtnFont": 1,
+        "tableContentFontColor": "rgba(22, 22, 23, 1)",
+        "inputBorderColor": "rgba(152, 129, 129, 1)",
+        "tableShowHeader": true,
+        "tableBtnFontSize": "14px",
+        "tableBtnBorderColor": "rgba(196, 210, 244, 1)",
+        "inputIconPosition": 1,
+        "tableBorder": true,
+        "btnAdAllBorderStyle": "solid",
+        "tableBtnBorderWidth": "1px",
+        "tableStripeBgColor": "rgba(213, 197, 197, 1)",
+        "tableBtnEditFontColor": "#333",
+        "tableAlign": "center"
+      },
+      // 定义分页布局
+      layouts: '',
+    };
+  },
+  // 定义生命周期钩子函数
+  created() {
+    // 初始化数据
+    this.init();
+    // 获取数据列表
+    this.getDataList();
+    // 更新内容样式
+    this.contentStyleChange();
+  },
+  // 定义过滤器
+  filters: {
+    // 定义HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  // 定义子组件
+  components: {
+    AddOrUpdate,
+  },
+  // 定义方法
+  methods: {
+    // 更新内容样式
+    contentStyleChange() {
+      this.contentSearchStyleChange();
+      this.contentBtnAdAllStyleChange();
+      this.contentSearchBtnStyleChange();
+      this.contentTableBtnStyleChange();
+      this.contentPageStyleChange();
+    },
+    // 更新搜索框样式
+    contentSearchStyleChange() {
+      this.$nextTick(() => {
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
+          let textAlign = 'left';
+          if (this.contents.inputFontPosition == 2) textAlign = 'center';
+          if (this.contents.inputFontPosition == 3) textAlign = 'right';
+          el.style.textAlign = textAlign;
+          el.style.height = this.contents.inputHeight;
+          el.style.lineHeight = this.contents.inputHeight;
+          el.style.color = this.contents.inputFontColor;
+          el.style.fontSize = this.contents.inputFontSize;
+          el.style.borderWidth = this.contents.inputBorderWidth;
+          el.style.borderStyle = this.contents.inputBorderStyle;
+          el.style.borderColor = this.contents.inputBorderColor;
+          el.style.borderRadius = this.contents.inputBorderRadius;
+          el.style.backgroundColor = this.contents.inputBgColor;
+        });
+        if (this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
+            el.style.color = this.contents.inputTitleColor;
+            el.style.fontSize = this.contents.inputTitleSize;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+        }
+        setTimeout(() => {
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
+            el.style.color = this.contents.inputIconColor;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
+            el.style.color = this.contents.inputIconColor;
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
+            el.style.lineHeight = this.contents.inputHeight;
+          });
+        }, 10);
+      });
+    },
+    // 更新搜索按钮样式
+    contentSearchBtnStyleChange() {
+      this.$nextTick(() => {
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
+          el.style.height = this.contents.searchBtnHeight;
+          el.style.color = this.contents.searchBtnFontColor;
+          el.style.fontSize = this.contents.searchBtnFontSize;
+          el.style.borderWidth = this.contents.searchBtnBorderWidth;
+          el.style.borderStyle = this.contents.searchBtnBorderStyle;
+          el.style.borderColor = this.contents.searchBtnBorderColor;
+          el.style.borderRadius = this.contents.searchBtnBorderRadius;
+          el.style.backgroundColor = this.contents.searchBtnBgColor;
+        });
+      });
+    },
+    // 更新操作按钮样式
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(() => {
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllAddFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor;
+        });
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllDelFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor;
+        });
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
+          el.style.height = this.contents.btnAdAllHeight;
+          el.style.color = this.contents.btnAdAllWarnFontColor;
+          el.style.fontSize = this.contents.btnAdAllFontSize;
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth;
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle;
+          el.style.borderColor = this.contents.btnAdAllBorderColor;
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius;
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor;
+        });
+      });
+    },
+    // 更新表格行样式
+    rowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        if (this.contents.tableStripe) {
+          return { color: this.contents.tableStripeFontColor };
+        }
+      } else {
+        return '';
+      }
+    },
+    // 更新表格单元格样式
+    cellStyle({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        if (this.contents.tableStripe) {
+          return { backgroundColor: this.contents.tableStripeBgColor };
+        }
+      } else {
+        return '';
+      }
+    },
+    // 更新表头行样式
+    headerRowStyle({ row, rowIndex }) {
+      return { color: this.contents.tableHeaderFontColor };
+    },
+    // 更新表头单元格样式
+    headerCellStyle({ row, rowIndex }) {
+      return { backgroundColor: this.contents.tableHeaderBgColor };
+    },
+    // 更新表格按钮样式
+    contentTableBtnStyleChange() {
+      // 动态更新表格按钮样式
+    },
+    // 更新分页样式
+    contentPageStyleChange() {
+      let arr = [];
+      if (this.contents.pageTotal) arr.push('total');
+      if (this.contents.pageSizes) arr.push('sizes');
+      if (this.contents.pagePrevNext) {
+        arr.push('prev');
+        if (this.contents.pagePager) arr.push('pager');
+        arr.push('next');
+      }
+      if (this.contents.pageJumper) arr.push('jumper');
+      this.layouts = arr.join();
+      this.contents.pageEachNum = 10;
+    },
+    // 初始化方法
+    init() {
+    },
+    // 搜索框方法
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表方法
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      };
+      if (this.searchForm.fangwumingcheng != '' && this.searchForm.fangwumingcheng != undefined) {
+        params['fangwumingcheng'] = '%' + this.searchForm.fangwumingcheng + '%';
+      }
+      if (this.searchForm.xiaoqu != '' && this.searchForm.xiaoqu != undefined) {
+        params['xiaoqu'] = '%' + this.searchForm.xiaoqu + '%';
+      }
+      this.$http({
+        url: "woyaodangfangzhu/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数变化处理方法
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页变化处理方法
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选变化处理方法
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理方法
+    addOrUpdateHandler(id, type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if (type != 'info') {
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, type);
+      });
+    },
+    // 查看评论处理方法
+    disscussListHandler(id) {
+      this.$router.push({ path: '/discusswoyaodangfangzhu', query: { refid: id } });
+    },
+    // 审核对话框方法
+    shDialog(row) {
+      this.sfshVisiable = !this.sfshVisiable;
+      if (row) {
+        this.shForm = {
+          fangwumingcheng: row.fangwumingcheng,
+          fangwuleixing: row.fangwuleixing,
+          tupian: row.tupian,
+          zulinfangshi: row.zulinfangshi,
+          chaoxianglouceng: row.chaoxianglouceng,
+          xiaoqu: row.xiaoqu,
+          mianji: row.mianji,
+          yuezujiage: row.yuezujiage,
+          fangwuxiangqing: row.fangwuxiangqing,
+          faburiqi: row.faburiqi,
+          yonghuming: row.yonghuming,
+          lianxidianhua: row.lianxidianhua,
+          sfsh: row.sfsh,
+          shhf: row.shhf,
+          id: row.id
+        };
+      }
+    },
+    // 审核处理方法
+    shHandler() {
+      this.$confirm(`确定操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "woyaodangfangzhu/update",
+          method: "post",
+          data: this.shForm
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+                this.shDialog();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    // 下载方法
+    download(file) {
+      window.open(`${file}`);
+    },
+    // 删除处理方法
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "woyaodangfangzhu/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+.pages {
+  & /deep/ .el-pagination__sizes {
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+
+.el-button+.el-button {
+  margin: 0;
+}
+
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/yonghu/add-or-update.vue b/fount/views/modules/yonghu/add-or-update.vue
new file mode 100644
index 0000000..1f1ee3a
--- /dev/null
+++ b/fount/views/modules/yonghu/add-or-update.vue
@@ -0,0 +1,578 @@
+<template>
+  <div class="addEdit-block">
+    <!-- 表单容器 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}">  <!-- 后台配置表单背景颜色 -->
+      <el-row>
+        <!-- 用户名表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="yonghuming">
+            <!-- 输入框，非只读模式 -->
+            <el-input v-model="ruleForm.yonghuming"
+                      placeholder="用户名" clearable  :readonly="ro.yonghuming"></el-input>
+          </el-form-item>
+          <div v-else>
+            <!-- 输入框，只读模式 -->
+            <el-form-item class="input" label="用户名" prop="yonghuming">
+              <el-input v-model="ruleForm.yonghuming"
+                        placeholder="用户名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 密码表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="密码" prop="mima">
+            <el-input v-model="ruleForm.mima"
+                      placeholder="密码" clearable  :readonly="ro.mima"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="密码" prop="mima">
+              <el-input v-model="ruleForm.mima"
+                        placeholder="密码" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 姓名表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="姓名" prop="xingming">
+            <el-input v-model="ruleForm.xingming"
+                      placeholder="姓名" clearable  :readonly="ro.xingming"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="姓名" prop="xingming">
+              <el-input v-model="ruleForm.xingming"
+                        placeholder="姓名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 头像上传 -->
+        <el-col :span="24">
+          <el-form-item class="upload" v-if="type!='info' && !ro.touxiang" label="头像" prop="touxiang">
+            <file-upload
+                tip="点击上传头像"
+                action="file/upload"
+                :limit="3"
+                :multiple="true"
+                :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
+                @change="touxiangUploadChange"
+            ></file-upload>
+          </el-form-item>
+          <div v-else>
+            <el-form-item v-if="ruleForm.touxiang" label="头像" prop="touxiang">
+              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.touxiang.split(',')" :src="item" width="100" height="100">
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 性别下拉选择 -->
+        <el-col :span="12">
+          <el-form-item class="select" v-if="type!='info'"  label="性别" prop="xingbie">
+            <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
+              <el-option
+                  v-for="(item,index) in xingbieOptions"
+                  v-bind:key="index"
+                  :label="item"
+                  :value="item">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="性别" prop="xingbie">
+              <el-input v-model="ruleForm.xingbie"
+                        placeholder="性别" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 职业表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="职业" prop="zhiye">
+            <el-input v-model="ruleForm.zhiye"
+                      placeholder="职业" clearable  :readonly="ro.zhiye"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="职业" prop="zhiye">
+              <el-input v-model="ruleForm.zhiye"
+                        placeholder="职业" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 联系电话表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="联系电话" prop="lianxidianhua">
+            <el-input v-model="ruleForm.lianxidianhua"
+                      placeholder="联系电话" clearable  :readonly="ro.lianxidianhua"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="联系电话" prop="lianxidianhua">
+              <el-input v-model="ruleForm.lianxidianhua"
+                        placeholder="联系电话" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 身份证表单 -->
+        <el-col :span="12">
+          <el-form-item class="input" v-if="type!='info'"  label="身份证" prop="shenfenzheng">
+            <el-input v-model="ruleForm.shenfenzheng"
+                      placeholder="身份证" clearable  :readonly="ro.shenfenzheng"></el-input>
+          </el-form-item>
+          <div v-else>
+            <el-form-item class="input" label="身份证" prop="shenfenzheng">
+              <el-input v-model="ruleForm.shenfenzheng"
+                        placeholder="身份证" readonly></el-input>
+            </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();
+      }
+    };
+    var validateUrl = (rule, value, callback) => {
+      if(!value){
+        callback();
+      } else if (!isURL(value)) {
+        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","selectFontSize":"14px","btnCancelBorderColor":"rgba(152, 129, 129, 1)","inputBorderRadius":"22px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"22px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"22px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(210, 194, 194, 0.29)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"rgba(152, 129, 129, 1)","btnCancelBgColor":"rgba(143, 222, 143, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"22px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"rgba(152, 129, 129, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"22px","inputBgColor":"rgba(252, 250, 250, 1)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"22px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(152, 129, 129, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","uploadBorderColor":"rgba(152, 129, 129, 1)","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"22px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
+      // 表单ID
+      id: '',
+      // 表单类型
+      type: '',
+      // 是否只读
+      ro:{
+        yonghuming : false,
+        mima : false,
+        xingming : false,
+        touxiang : false,
+        xingbie : false,
+        zhiye : false,
+        lianxidianhua : false,
+        shenfenzheng : false,
+      },
+      // 表单数据
+      ruleForm: {
+        yonghuming: '',
+        mima: '',
+        xingming: '',
+        touxiang: '',
+        xingbie: '',
+        zhiye: '',
+        lianxidianhua: '',
+        shenfenzheng: '',
+      },
+      // 性别选项
+      xingbieOptions: [],
+      // 表单验证规则
+      rules: {
+        yonghuming: [
+          { required: true, message: '用户名不能为空', trigger: 'blur' },
+        ],
+        mima: [
+          { required: true, message: '密码不能为空', trigger: 'blur' },
+        ],
+        xingming: [
+        ],
+        touxiang: [
+        ],
+        xingbie: [
+        ],
+        zhiye: [
+        ],
+        lianxidianhua: [
+          { validator: validateMobile, trigger: 'blur' },
+        ],
+        shenfenzheng: [
+          { validator: validateIdCard, trigger: 'blur' },
+        ],
+      }
+    };
+  },
+  // 父组件传入参数
+  props: ["parent"],
+  computed: {
+  },
+  created() {
+    this.addEditStyleChange()
+    this.addEditUploadStyleChange()
+  },
+  methods: {
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 初始化表单
+    init(id,type) {
+      if (id) {
+        this.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=='yonghuming'){
+            this.ruleForm.yonghuming = obj[o];
+            this.ro.yonghuming = true;
+            continue;
+          }
+          if(o=='mima'){
+            this.ruleForm.mima = obj[o];
+            this.ro.mima = true;
+            continue;
+          }
+          if(o=='xingming'){
+            this.ruleForm.xingming = obj[o];
+            this.ro.xingming = true;
+            continue;
+          }
+          if(o=='touxiang'){
+            this.ruleForm.touxiang = obj[o];
+            this.ro.touxiang = true;
+            continue;
+          }
+          if(o=='xingbie'){
+            this.ruleForm.xingbie = obj[o];
+            this.ro.xingbie = true;
+            continue;
+          }
+          if(o=='zhiye'){
+            this.ruleForm.zhiye = obj[o];
+            this.ro.zhiye = true;
+            continue;
+          }
+          if(o=='lianxidianhua'){
+            this.ruleForm.lianxidianhua = obj[o];
+            this.ro.lianxidianhua = true;
+            continue;
+          }
+          if(o=='shenfenzheng'){
+            this.ruleForm.shenfenzheng = obj[o];
+            this.ro.shenfenzheng = true;
+            continue;
+          }
+        }
+      }
+      // 获取用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+      this.xingbieOptions = "男,女".split(',')
+    },
+    // 获取表单详情
+    info(id) {
+      this.$http({
+        url: `yonghu/info/${id}`,
+        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: `yonghu/${!this.ruleForm.id ? "save" : "update"}`,
+            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.yonghuCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 获取唯一标识符
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 返回上一页
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.yonghuCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 头像上传变更
+    touxiangUploadChange(fileUrls) {
+      this.ruleForm.touxiang = fileUrls;
+      this.addEditUploadStyleChange()
+    },
+    // 表单样式变更
+    addEditStyleChange() {
+      this.$nextTick(()=>{  // DOM更新后执行
+        // 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
+        })
+        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样式更新
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight
+          el.style.color = this.addEditForm.selectFontColor
+          el.style.fontSize = this.addEditForm.selectFontSize
+          el.style.borderWidth = this.addEditForm.selectBorderWidth
+          el.style.borderStyle = this.addEditForm.selectBorderStyle
+          el.style.borderColor = this.addEditForm.selectBorderColor
+          el.style.borderRadius = this.addEditForm.selectBorderRadius
+          el.style.backgroundColor = this.addEditForm.selectBgColor
+        })
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight
+          el.style.color = this.addEditForm.selectLableColor
+          el.style.fontSize = this.addEditForm.selectLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor
+          el.style.fontSize = this.addEditForm.selectIconFontSize
+        })
+        // date样式更新
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight
+          el.style.color = this.addEditForm.dateFontColor
+          el.style.fontSize = this.addEditForm.dateFontSize
+          el.style.borderWidth = this.addEditForm.dateBorderWidth
+          el.style.borderStyle = this.addEditForm.dateBorderStyle
+          el.style.borderColor = this.addEditForm.dateBorderColor
+          el.style.borderRadius = this.addEditForm.dateBorderRadius
+          el.style.backgroundColor = this.addEditForm.dateBgColor
+        })
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight
+          el.style.color = this.addEditForm.dateLableColor
+          el.style.fontSize = this.addEditForm.dateLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor
+          el.style.fontSize = this.addEditForm.dateIconFontSize
+          el.style.lineHeight = this.addEditForm.dateHeight
+        })
+        // upload样式更新
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').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
+        })
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight
+          el.style.color = this.addEditForm.uploadLableColor
+          el.style.fontSize = this.addEditForm.uploadLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor
+          el.style.fontSize = this.addEditForm.uploadIconFontSize
+          el.style.lineHeight = iconLineHeight
+          el.style.display = 'block'
+        })
+        // 多文本输入框
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaFontColor
+          el.style.fontSize = this.addEditForm.textareaFontSize
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle
+          el.style.borderColor = this.addEditForm.textareaBorderColor
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius
+          el.style.backgroundColor = this.addEditForm.textareaBgColor
+        })
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor
+          el.style.fontSize = this.addEditForm.textareaLableFontSize
+        })
+        // 保存按钮样式更新
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth
+          el.style.height = this.addEditForm.btnSaveHeight
+          el.style.color = this.addEditForm.btnSaveFontColor
+          el.style.fontSize = this.addEditForm.btnSaveFontSize
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor
+        })
+        // 返回按钮样式更新
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth
+          el.style.height = this.addEditForm.btnCancelHeight
+          el.style.color = this.addEditForm.btnCancelFontColor
+          el.style.fontSize = this.addEditForm.btnCancelFontSize
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor
+        })
+      })
+    },
+    addEditUploadStyleChange() {  // 文件上传样式变更
+      this.$nextTick(()=>{  // DOM更新后执行
+        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;
+  }
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+.search-box {
+  position: absolute;
+}
+.addEdit-block {
+  margin: -10px; // 外边距
+}
+.detail-form-content {
+  padding: 12px; // 内边距
+}
+.btn .el-button {
+  padding: 0; // 按钮填充
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/yonghu/list.vue b/fount/views/modules/yonghu/list.vue
new file mode 100644
index 0000000..ea23e53
--- /dev/null
+++ b/fount/views/modules/yonghu/list.vue
@@ -0,0 +1,583 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 表单区域 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索框所在行 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 用户名输入框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <!-- 前置图标 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <!-- 后置图标 -->
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <!-- 无图标 -->
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+          <!-- 搜索和按钮 -->
+          <el-form-item>
+            <!-- 搜索框前置图标 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <!-- 搜索框后置图标 -->
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <!-- 无图标 -->
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+        <!-- 操作按钮行 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('yonghu','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()"
+            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('yonghu','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()"
+            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <!-- 表格区域 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('yonghu','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选框 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+          <!-- 密码列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="mima"
+                            header-align="center"
+                            label="密码">
+            <template slot-scope="scope">
+              {{scope.row.mima}}
+            </template>
+          </el-table-column>
+          <!-- 姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xingming"
+                            header-align="center"
+                            label="姓名">
+            <template slot-scope="scope">
+              {{scope.row.xingming}}
+            </template>
+          </el-table-column>
+          <!-- 头像列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="touxiang"
+                           header-align="center"
+                           width="200"
+                           label="头像">
+            <template slot-scope="scope">
+              <div v-if="scope.row.touxiang">
+                <img :src="scope.row.touxiang.split(',')[0]" width="100" height="100">
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <!-- 性别列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xingbie"
+                            header-align="center"
+                            label="性别">
+            <template slot-scope="scope">
+              {{scope.row.xingbie}}
+            </template>
+          </el-table-column>
+          <!-- 职业列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zhiye"
+                            header-align="center"
+                            label="职业">
+            <template slot-scope="scope">
+              {{scope.row.zhiye}}
+            </template>
+          </el-table-column>
+          <!-- 联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+          <!-- 身份证列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="shenfenzheng"
+                            header-align="center"
+                            label="身份证">
+            <template slot-scope="scope">
+              {{scope.row.shenfenzheng}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('yonghu','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('yonghu','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('yonghu','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from "./add-or-update";
+
+export default {
+  data() {
+    return {
+      // 搜索表单数据
+      searchForm: {
+        key: ""
+      },
+      // 用户列表数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页条数
+      pageSize: 10,
+      // 总页数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 是否显示列表
+      showFlag: true,
+      // 是否显示筛选
+      sfshVisiable: false,
+      // 筛选表单
+      shForm: {},
+      // 是否显示图表
+      chartVisiable: false,
+      // 是否显示添加/修改页面
+      addOrUpdateFlag: false,
+      // 内容样式配置
+      contents: {"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageEachNum":10,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  created() {
+    // 初始化方法
+    this.init();
+    // 获取用户列表数据
+    this.getDataList();
+    // 样式修改方法
+    this.contentStyleChange()
+  },
+  mounted() {
+    // 页面加载完成后执行的方法
+  },
+  filters: {
+    // 移除HTML标签和undefined
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  components: {
+    // 引入添加/修改组件
+    AddOrUpdate,
+  },
+  methods: {
+    // 样式修改主方法
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索框样式修改
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{ // DOM渲染完成后的回调
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center' // 设置文本水平居中
+          if(this.contents.inputFontPosition == 3) textAlign = 'right' // 设置文本水平右对齐
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight // 设置输入框高度
+          el.style.lineHeight = this.contents.inputHeight // 设置输入框行高
+          el.style.color = this.contents.inputFontColor // 设置输入框字体颜色
+          el.style.fontSize = this.contents.inputFontSize // 设置输入框字体大小
+          el.style.borderWidth = this.contents.inputBorderWidth // 设置输入框边框宽度
+          el.style.borderStyle = this.contents.inputBorderStyle // 设置输入框边框样式
+          el.style.borderColor = this.contents.inputBorderColor // 设置输入框边框颜色
+          el.style.borderRadius = this.contents.inputBorderRadius // 设置输入框圆角
+          el.style.backgroundColor = this.contents.inputBgColor // 设置输入框背景颜色
+        })
+        if(this.contents.inputTitle) { // 如果显示输入框标题
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor // 设置标题颜色
+            el.style.fontSize = this.contents.inputTitleSize // 设置标题字体大小
+            el.style.lineHeight = this.contents.inputHeight // 设置标题行高
+          })
+        }
+        setTimeout(()=>{ // 延迟设置图标样式
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor // 设置前置图标颜色
+            el.style.lineHeight = this.contents.inputHeight // 设置前置图标行高
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor // 设置后置图标颜色
+            el.style.lineHeight = this.contents.inputHeight // 设置后置图标行高
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight // 设置图标行高
+          })
+        },10)
+      })
+    },
+    // 搜索网页图标样式修改
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{ // DOM渲染完成后的回调
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          el.style.height = this.contents.searchBtnHeight // 设置按钮高度
+          el.style.color = this.contents.searchBtnFontColor // 设置按钮文字颜色
+          el.style.fontSize = this.contents.searchBtnFontSize // 设置按钮文字大小
+          el.style.borderWidth = this.contents.searchBtnBorderWidth // 设置按钮边框宽度
+          el.style.borderStyle = this.contents.searchBtnBorderStyle // 设置按钮边框样式
+          el.style.borderColor = this.contents.searchBtnBorderColor // 设置按钮边框颜色
+          el.style.borderRadius = this.contents.searchBtnBorderRadius // 设置按钮圆角
+          el.style.backgroundColor = this.contents.searchBtnBgColor // 设置按钮背景颜色
+        })
+      })
+    },
+    // 添加、批量删除按钮样式修改
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{ // DOM渲染完成后的回调
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight // 设置按钮高度
+          el.style.color = this.contents.btnAdAllAddFontColor // 设置按钮文字颜色
+          el.style.fontSize = this.contents.btnAdAllFontSize // 设置按钮文字大小
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth // 设置按钮边框宽度
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle // 设置按钮边框样式
+          el.style.borderColor = this.contents.btnAdAllBorderColor // 设置按钮边框颜色
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius // 设置按钮圆角
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor // 设置按钮背景颜色
+        })
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight // 设置按钮高度
+          el.style.color = this.contents.btnAdAllDelFontColor // 设置按钮文字颜色
+          el.style.fontSize = this.contents.btnAdAllFontSize // 设置按钮文字大小
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth // 设置按钮边框宽度
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle // 设置按钮边框样式
+          el.style.borderColor = this.contents.btnAdAllBorderColor // 设置按钮边框颜色
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius // 设置按钮圆角
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor // 设置按钮背景颜色
+        })
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight // 设置按钮高度
+          el.style.color = this.contents.btnAdAllWarnFontColor // 设置按钮文字颜色
+          el.style.fontSize = this.contents.btnAdAllFontSize // 设置按钮文字大小
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth // 设置按钮边框宽度
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle // 设置按钮边框样式
+          el.style.borderColor = this.contents.btnAdAllBorderColor // 设置按钮边框颜色
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius // 设置按钮圆角
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor // 设置按钮背景颜色
+        })
+      })
+    },
+    // 表格样式修改
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) { // 奇数行
+        if(this.contents.tableStripe) { // 如果开启了表格斑马纹
+          return {color:this.contents.tableStripeFontColor} // 设置奇数行文字颜色
+        }
+      } else {
+        return ''
+      }
+    },
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) { // 奇数行
+        if(this.contents.tableStripe) { // 如果开启了表格斑马纹
+          return {backgroundColor:this.contents.tableStripeBgColor} // 设置奇数行背景颜色
+        }
+      } else {
+        return ''
+      }
+    },
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor} // 设置表头文字颜色
+    },
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor} // 设置表头背景颜色
+    },
+    // 表格操作按钮样式修改
+    contentTableBtnStyleChange(){
+      // 此处暂时注释，可根据需要启用
+      // this.$nextTick(()=>{ // DOM渲染完成后的回调
+      //   setTimeout(()=>{ // 延迟设置按钮样式
+      //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--success').forEach(el=>{
+      //       el.style.height = this.contents.tableBtnHeight // 设置按钮高度
+      //       el.style.color = this.contents.tableBtnDetailFontColor // 设置按钮文字颜色
+      //       el.style.fontSize = this.contents.tableBtnFontSize // 设置按钮文字大小
+      //       el.style.borderWidth = this.contents.tableBtnBorderWidth // 设置按钮边框宽度
+      //       el.style.borderStyle = this.contents.tableBtnBorderStyle // 设置按钮边框样式
+      //       el.style.borderColor = this.contents.tableBtnBorderColor // 设置按钮边框颜色
+      //       el.style.borderRadius = this.contents.tableBtnBorderRadius // 设置按钮圆角
+      //       el.style.backgroundColor = this.contents.tableBtnDetailBgColor // 设置按钮背景颜色
+      //     })
+      //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--primary').forEach(el=>{
+      //       el.style.height = this.contents.tableBtnHeight // 设置按钮高度
+      //       el.style.color = this.contents.tableBtnEditFontColor // 设置按钮文字颜色
+      //       el.style.fontSize = this.contents.tableBtnFontSize // 设置按钮文字大小
+      //       el.style.borderWidth = this.contents.tableBtnBorderWidth // 设置按钮边框宽度
+      //       el.style.borderStyle = this.contents.tableBtnBorderStyle // 设置按钮边框样式
+      //       el.style.borderColor = this.contents.tableBtnBorderColor // 设置按钮边框颜色
+      //       el.style.borderRadius = this.contents.tableBtnBorderRadius // 设置按钮圆角
+      //       el.style.backgroundColor = this.contents.tableBtnEditBgColor // 设置按钮背景颜色
+      //     })
+      //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--danger').forEach(el=>{
+      //       el.style.height = this.contents.tableBtnHeight // 设置按钮高度
+      //       el.style.color = this.contents.tableBtnDelFontColor // 设置按钮文字颜色
+      //       el.style.fontSize = this.contents.tableBtnFontSize // 设置按钮文字大小
+      //       el.style.borderWidth = this.contents.tableBtnBorderWidth // 设置按钮边框宽度
+      //       el.style.borderStyle = this.contents.tableBtnBorderStyle // 设置按钮边框样式
+      //       el.style.borderColor = this.contents.tableBtnBorderColor // 设置按钮边框颜色
+      //       el.style.borderRadius = this.contents.tableBtnBorderRadius // 设置按钮圆角
+      //       el.style.backgroundColor = this.contents.tableBtnDelBgColor // 设置按钮背景颜色
+      //     })
+      //   }, 50) // 延迟50毫秒
+      // })
+    },
+    // 分页样式修改
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total') // 是否显示总条数
+      if(this.contents.pageSizes) arr.push('sizes') // 是否显示每页条数选择器
+      if(this.contents.pagePrevNext){ // 是否显示前后翻页按钮
+        arr.push('prev') // 添加上一页按钮
+        if(this.contents.pagePager) arr.push('pager') // 是否显示页码
+        arr.push('next') // 添加下一页按钮
+      }
+      if(this.contents.pageJumper) arr.push('jumper') // 是否显示跳转输入框
+      this.layouts = arr.join() // 拼接分页布局
+      this.contents.pageEachNum = 10 // 设置每页条数默认值
+    },
+    // 初始化方法
+    init () {
+      // 此处可添加初始化逻辑
+    },
+    // 搜索框点击事件
+    search() {
+      this.pageIndex = 1; // 重置到第一页
+      this.getDataList(); // 获取用户列表数据
+    },
+    // 获取用户列表数据
+    getDataList() {
+      this.dataListLoading = true; // 开启数据加载状态
+      let params = {
+        page: this.pageIndex, // 当前页码
+        limit: this.pageSize, // 每页条数
+        sort: 'id', // 排序字段
+      }
+      // 如果用户名搜索框有内容，添加搜索条件
+      if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){
+        params['yonghuming'] = '%' + this.searchForm.yonghuming + '%'
+      }
+      this.$http({
+        url: "yonghu/page", // 请求地址
+        method: "get", // 请求方法
+        params: params // 请求参数
+      }).then(({ data }) => {
+        if (data && data.code === 0) { // 如果请求成功
+          this.dataList = data.data.list; // 设置用户列表数据
+          this.totalPage = data.data.total; // 设置总页数
+        } else { // 如果请求失败
+          this.dataList = []; // 清空用户列表
+          this.totalPage = 0; // 重置总页数
+        }
+        this.dataListLoading = false; // 关闭数据加载状态
+      });
+    },
+    // 每页条数变化事件
+    sizeChangeHandle(val) {
+      this.pageSize = val; // 设置新的每页条数
+      this.pageIndex = 1; // 重置到第一页
+      this.getDataList(); // 获取用户列表数据
+    },
+    // 当前页码变化事件
+    currentChangeHandle(val) {
+      this.pageIndex = val; // 设置新的当前页码
+      this.getDataList(); // 获取用户列表数据
+    },
+    // 多选变化事件
+    selectionChangeHandler(val) {
+      this.dataListSelections = val; // 设置多选数据
+    },
+    // 添加/修改用户
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false; // 隐藏列表页面
+      this.addOrUpdateFlag = true; // 显示添加/修改页面
+      this.crossAddOrUpdateFlag = false; // 未使用
+      if(type!='info'){ // 如果不是详情模式
+        type = 'else'; // 设置为其他模式
+      }
+      this.$nextTick(() => { // DOM渲染完成后的回调
+        this.$refs.addOrUpdate.init(id,type); // 调用子组件的初始化方法
+      });
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`) // 打开文件链接
+    },
+    // 删除用户
+    deleteHandler(id) {
+      var ids = id ? [Number(id)] : this.dataListSelections.map(item => { // 获取要删除的ID列表
+        return Number(item.id);
+      });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", { // 显示确认对话框
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "yonghu/delete", // 请求地址
+          method: "post", // 请求方法
+          data: ids // 请求数据
+        }).then(({ data }) => {
+          if (data && data.code === 0) { // 如果请求成功
+            this.$message({ // 显示成功消息
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => { // 消息关闭后重新获取数据
+                this.search();
+              }
+            });
+          } else { // 如果请求失败
+            this.$message.error(data.msg); // 显示错误消息
+          }
+        });
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 搜索栏样式 */
+.slt {
+  margin: 0 !important; /* 重置外边距 */
+  display: flex; /* 使用弹性布局 */
+}
+
+/* 操作栏样式 */
+.ad {
+  margin: 0 !important; /* 重置外边距 */
+  display: flex; /* 使用弹性布局 */
+}
+
+/* 分页组件样式 */
+.pages {
+  & /deep/ el-pagination__sizes{ /* 深度选择器，用于覆盖子组件样式 */
+    & /deep/ el-input__inner { /* 深度选择器，用于覆盖输入框样式 */
+      height: 22px; /* 设置高度 */
+      line-height: 22px; /* 设置行高 */
+    }
+  }
+}
+
+/* 按钮样式重置 */
+.el-button+.el-button {
+  margin:0; /* 重置按钮间距 */
+}
+
+/* 表格内按钮样式 */
+.tables {
+  & /deep/ .el-button--success { /* 成功按钮样式 */
+    height: 40px; /* 设置高度 */
+    color: #333; /* 设置文字颜色 */
+    font-size: 14px; /* 设置文字大小 */
+    border-width: 1px; /* 设置边框宽度 */
+    border-style: solid; /* 设置边框样式 */
+    border-color: rgba(196, 210, 244, 1); /* 设置边框颜色 */
+    border-radius: 22px; /* 设置圆角 */
+    background-color: rgba(171, 239, 239, 1); /* 设置背景颜色 */
+  }
+  & /deep/ .el-button--primary { /* 主要按钮样式 */
+    height: 40px; /* 设置高度 */
+    color: #333; /* 设置文字颜色 */
+    font-size: 14px; /* 设置文字大小 */
+    border-width: 1px; /* 设置边框宽度 */
+    border-style: solid; /* 设置边框样式 */
+    border-color: rgba(196, 210, 244, 1); /* 设置边框颜色 */
+    border-radius: 22px; /* 设置圆角 */
+    background-color: rgba(240, 242, 124, 1); /* 设置背景颜色 */
+  }
+  & /deep/ .el-button--danger { /* 危险按钮样式 */
+    height: 40px; /* 设置高度 */
+    color: #333; /* 设置文字颜色 */
+    font-size: 14px; /* 设置文字大小 */
+    border-width: 1px; /* 设置边框宽度 */
+    border-style: solid; /* 设置边框样式 */
+    border-color: rgba(196, 210, 244, 1); /* 设置边框颜色 */
+    border-radius: 22px; /* 设置圆角 */
+    background-color: rgba(244, 150, 150, 1); /* 设置背景颜色 */
+  }
+  & /deep/ .el-button { /* 按钮间距 */
+    margin: 4px; /* 设置间距 */
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/yuyuekanfang/add-or-update.vue b/fount/views/modules/yuyuekanfang/add-or-update.vue
new file mode 100644
index 0000000..b9f369f
--- /dev/null
+++ b/fount/views/modules/yuyuekanfang/add-or-update.vue
@@ -0,0 +1,696 @@
+<template>
+  <!-- 定义模板的根元素 -->
+  <div class="addEdit-block">
+    <!-- 定义表单组件 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+        :style="{backgroundColor:addEditForm.addEditBoxColor}"
+    >
+      <!-- 定义表单的行布局 -->
+      <el-row>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'" label="预约编号" prop="yuyuebianhao">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yuyuebianhao"
+                      placeholder="预约编号" readonly></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.yuyuebianhao" label="预约编号" prop="yuyuebianhao">
+              <el-input v-model="ruleForm.yuyuebianhao"
+                        placeholder="预约编号" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房屋名称" prop="fangwumingcheng">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangwumingcheng"
+                      placeholder="房屋名称" clearable  :readonly="ro.fangwumingcheng"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋名称" prop="fangwumingcheng">
+              <el-input v-model="ruleForm.fangwumingcheng"
+                        placeholder="房屋名称" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房屋类型" prop="fangwuleixing">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangwuleixing"
+                      placeholder="房屋类型" clearable  :readonly="ro.fangwuleixing"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋类型" prop="fangwuleixing">
+              <el-input v-model="ruleForm.fangwuleixing"
+                        placeholder="房屋类型" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房屋状态" prop="fangwuzhuangtai">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangwuzhuangtai"
+                      placeholder="房屋状态" clearable  :readonly="ro.fangwuzhuangtai"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房屋状态" prop="fangwuzhuangtai">
+              <el-input v-model="ruleForm.fangwuzhuangtai"
+                        placeholder="房屋状态" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="小区" prop="xiaoqu">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.xiaoqu"
+                      placeholder="小区" clearable  :readonly="ro.xiaoqu"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="小区" prop="xiaoqu">
+              <el-input v-model="ruleForm.xiaoqu"
+                        placeholder="小区" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="月租价格" prop="yuezujiage">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yuezujiage"
+                      placeholder="月租价格" clearable  :readonly="ro.yuezujiage"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="月租价格" prop="yuezujiage">
+              <el-input v-model="ruleForm.yuezujiage"
+                        placeholder="月租价格" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="押金" prop="yajin">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yajin"
+                      placeholder="押金" clearable  :readonly="ro.yajin"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="押金" prop="yajin">
+              <el-input v-model="ruleForm.yajin"
+                        placeholder="押金" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="租用月数" prop="zuyongyueshu">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.zuyongyueshu"
+                      placeholder="租用月数" clearable  :readonly="ro.zuyongyueshu"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="租用月数" prop="zuyongyueshu">
+              <el-input v-model="ruleForm.zuyongyueshu"
+                        placeholder="租用月数" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="租用金额" prop="zuyongjine">
+            <!-- 定义输入框 -->
+            <el-input v-model="zuyongjine"
+                      placeholder="租用金额" readonly></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.zuyongjine" label="租用金额" prop="zuyongjine">
+              <el-input v-model="ruleForm.zuyongjine"
+                        placeholder="租用金额" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="date" v-if="type!='info'" label="预约时间" prop="yuyueshijian">
+            <!-- 定义日期时间选择器 -->
+            <el-date-picker
+                value-format="yyyy-MM-dd HH:mm:ss"
+                v-model="ruleForm.yuyueshijian"
+                type="datetime"
+                placeholder="预约时间">
+            </el-date-picker>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" v-if="ruleForm.yuyueshijian" label="预约时间" prop="yuyueshijian">
+              <el-input v-model="ruleForm.yuyueshijian"
+                        placeholder="预约时间" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="用户名" prop="yonghuming">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.yonghuming"
+                      placeholder="用户名" clearable  :readonly="ro.yonghuming"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="用户名" prop="yonghuming">
+              <el-input v-model="ruleForm.yonghuming"
+                        placeholder="用户名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="姓名" prop="xingming">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.xingming"
+                      placeholder="姓名" clearable  :readonly="ro.xingming"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="姓名" prop="xingming">
+              <el-input v-model="ruleForm.xingming"
+                        placeholder="姓名" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="身份证" prop="shenfenzheng">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.shenfenzheng"
+                      placeholder="身份证" clearable  :readonly="ro.shenfenzheng"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="身份证" prop="shenfenzheng">
+              <el-input v-model="ruleForm.shenfenzheng"
+                        placeholder="身份证" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="联系电话" prop="lianxidianhua">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.lianxidianhua"
+                      placeholder="联系电话" clearable  :readonly="ro.lianxidianhua"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="联系电话" prop="lianxidianhua">
+              <el-input v-model="ruleForm.lianxidianhua"
+                        placeholder="联系电话" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房主账号" prop="fangzhuzhanghao">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangzhuzhanghao"
+                      placeholder="房主账号" clearable  :readonly="ro.fangzhuzhanghao"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房主账号" prop="fangzhuzhanghao">
+              <el-input v-model="ruleForm.fangzhuzhanghao"
+                        placeholder="房主账号" readonly></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <!-- 定义表单的列布局 -->
+        <el-col :span="12">
+          <!-- 定义表单项 -->
+          <el-form-item class="input" v-if="type!='info'"  label="房主姓名" prop="fangzhuxingming">
+            <!-- 定义输入框 -->
+            <el-input v-model="ruleForm.fangzhuxingming"
+                      placeholder="房主姓名" clearable  :readonly="ro.fangzhuxingming"></el-input>
+          </el-form-item>
+          <!-- 定义只读显示 -->
+          <div v-else>
+            <el-form-item class="input" label="房主姓名" prop="fangzhuxingming">
+              <el-input v-model="ruleForm.fangzhuxingming"
+                        placeholder="房主姓名" readonly></el-input>
+            </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)) {
+        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","selectFontSize":"14px","btnCancelBorderColor":"rgba(152, 129, 129, 1)","inputBorderRadius":"22px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"22px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"22px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(210, 194, 194, 0.29)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"rgba(152, 129, 129, 1)","btnCancelBgColor":"rgba(143, 222, 143, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"22px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"#606266","dateBorderColor":"rgba(152, 129, 129, 1)","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"22px","inputBgColor":"rgba(252, 250, 250, 1)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"22px","btnSaveHeight":"44px","selectBgColor":"#fff","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"rgba(152, 129, 129, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","uploadBorderColor":"rgba(152, 129, 129, 1)","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"22px","selectFontColor":"#606266","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
+      // 定义ID变量
+      id: '',
+      // 定义类型变量
+      type: '',
+      // 定义只读状态对象
+      ro:{
+        yuyuebianhao : false,
+        fangwumingcheng : false,
+        fangwuleixing : false,
+        fangwuzhuangtai : false,
+        xiaoqu : false,
+        yuezujiage : false,
+        yajin : false,
+        zuyongyueshu : false,
+        zuyongjine : false,
+        yuyueshijian : false,
+        yonghuming : false,
+        xingming : false,
+        shenfenzheng : false,
+        lianxidianhua : false,
+        fangzhuzhanghao : false,
+        fangzhuxingming : false,
+        sfsh : false,
+        shhf : false,
+      },
+      // 定义表单数据
+      ruleForm: {
+        yuyuebianhao: this.getUUID(),
+        fangwumingcheng: '',
+        fangwuleixing: '',
+        fangwuzhuangtai: '',
+        xiaoqu: '',
+        yuezujiage: '',
+        yajin: '',
+        zuyongyueshu: '',
+        zuyongjine: '',
+        yuyueshijian: '',
+        yonghuming: '',
+        xingming: '',
+        shenfenzheng: '',
+        lianxidianhua: '',
+        fangzhuzhanghao: '',
+        fangzhuxingming: '',
+        shhf: '',
+      },
+      // 定义表单验证规则
+      rules: {
+        yuyuebianhao: [
+          { required: true, message: '预约编号不能为空', trigger: 'blur' },
+        ],
+        fangwumingcheng: [
+        ],
+        fangwuleixing: [
+        ],
+        fangwuzhuangtai: [
+        ],
+        xiaoqu: [
+        ],
+        yuezujiage: [
+          { validator: validateIntNumber, trigger: 'blur' },
+        ],
+        yajin: [
+        ],
+        zuyongyueshu: [
+          { validator: validateIntNumber, trigger: 'blur' },
+        ],
+        zuyongjine: [
+        ],
+        yuyueshijian: [
+          { required: true, message: '预约时间不能为空', trigger: 'blur' },
+        ],
+        yonghuming: [
+        ],
+        xingming: [
+        ],
+        shenfenzheng: [
+        ],
+        lianxidianhua: [
+        ],
+        fangzhuzhanghao: [
+        ],
+        fangzhuxingming: [
+        ],
+        sfsh: [
+        ],
+        shhf: [
+        ],
+      }
+    };
+  },
+  // 定义父组件传值
+  props: ["parent"],
+  // 定义计算属性
+  computed: {
+    // 定义租用金额计算属性
+    zuyongjine: {
+      get: function () {
+        return 1*this.ruleForm.yuezujiage*this.ruleForm.zuyongyueshu
+      }
+    },
+  },
+  // 定义生命周期钩子
+  created() {
+    // 调用样式初始化方法
+    this.addEditStyleChange()
+    // 调用上传组件样式初始化方法
+    this.addEditUploadStyleChange()
+  },
+  // 定义方法
+  methods: {
+    // 定义下载方法
+    download(file){
+      window.open(`${file}`)
+    },
+    // 定义初始化方法
+    init(id,type) {
+      if (id) {
+        this.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=='yuyuebianhao'){
+            this.ruleForm.yuyuebianhao = obj[o];
+            this.ro.yuyuebianhao = true;
+            continue;
+          }
+          if(o=='fangwumingcheng'){
+            this.ruleForm.fangwumingcheng = obj[o];
+            this.ro.fangwumingcheng = true;
+            continue;
+          }
+          if(o=='fangwuleixing'){
+            this.ruleForm.fangwuleixing = obj[o];
+            this.ro.fangwuleixing = true;
+            continue;
+          }
+          if(o=='fangwuzhuangtai'){
+            this.ruleForm.fangwuzhuangtai = obj[o];
+            this.ro.fangwuzhuangtai = true;
+            continue;
+          }
+          if(o=='xiaoqu'){
+            this.ruleForm.xiaoqu = obj[o];
+            this.ro.xiaoqu = true;
+            continue;
+          }
+          if(o=='yuezujiage'){
+            this.ruleForm.yuezujiage = obj[o];
+            this.ro.yuezujiage = true;
+            continue;
+          }
+          if(o=='yajin'){
+            this.ruleForm.yajin = obj[o];
+            this.ro.yajin = true;
+            continue;
+          }
+          if(o=='zuyongyueshu'){
+            this.ruleForm.zuyongyueshu = obj[o];
+            this.ro.zuyongyueshu = true;
+            continue;
+          }
+          if(o=='zuyongjine'){
+            this.ruleForm.zuyongjine = obj[o];
+            this.ro.zuyongjine = true;
+            continue;
+          }
+          if(o=='yuyueshijian'){
+            this.ruleForm.yuyueshijian = obj[o];
+            this.ro.yuyueshijian = true;
+            continue;
+          }
+          if(o=='yonghuming'){
+            this.ruleForm.yonghuming = obj[o];
+            this.ro.yonghuming = true;
+            continue;
+          }
+          if(o=='xingming'){
+            this.ruleForm.xingming = obj[o];
+            this.ro.xingming = true;
+            continue;
+          }
+          if(o=='shenfenzheng'){
+            this.ruleForm.shenfenzheng = obj[o];
+            this.ro.shenfenzheng = true;
+            continue;
+          }
+          if(o=='lianxidianhua'){
+            this.ruleForm.lianxidianhua = obj[o];
+            this.ro.lianxidianhua = true;
+            continue;
+          }
+          if(o=='fangzhuzhanghao'){
+            this.ruleForm.fangzhuzhanghao = obj[o];
+            this.ro.fangzhuzhanghao = true;
+            continue;
+          }
+          if(o=='fangzhuxingming'){
+            this.ruleForm.fangzhuxingming = obj[o];
+            this.ro.fangzhuxingming = true;
+            continue;
+          }
+        }
+      }
+      // 获取用户信息
+      this.$http({
+        url: `${this.$storage.get('sessionTable')}/session`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          var json = data.data;
+          if(json.yonghuming!=''&&json.yonghuming){
+            this.ruleForm.yonghuming = json.yonghuming
+          }
+          if(json.xingming!=''&&json.xingming){
+            this.ruleForm.xingming = json.xingming
+          }
+          if(json.shenfenzheng!=''&&json.shenfenzheng){
+            this.ruleForm.shenfenzheng = json.shenfenzheng
+          }
+          if(json.lianxidianhua!=''&&json.lianxidianhua){
+            this.ruleForm.lianxidianhua = json.lianxidianhua
+          }
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    // 定义获取详情方法
+    info(id) {
+      this.$http({
+        url: `yuyuekanfang/info/${id}`,
+        method: "get"
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    // 定义提交方法
+    onSubmit() {
+      this.ruleForm.zuyongjine = this.zuyongjine
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          this.$http({
+            url: `yuyuekanfang/${!this.ruleForm.id ? "save" : "update"}`,
+            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.yuyuekanfangCrossAddOrUpdateFlag = false;
+                  this.parent.search();
+                  this.parent.contentStyleChange();
+                }
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 定义获取UUID方法
+    getUUID () {
+      return new Date().getTime();
+    },
+    // 定义返回方法
+    back() {
+      this.parent.showFlag = true;
+      this.parent.addOrUpdateFlag = false;
+      this.parent.yuyuekanfangCrossAddOrUpdateFlag = false;
+      this.parent.contentStyleChange();
+    },
+    // 定义样式初始化方法
+    addEditStyleChange() {
+      this.$nextTick(()=>{})
+    },
+    // 定义上传组件样式初始化方法
+    addEditUploadStyleChange() {
+      this.$nextTick(()=>{})
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+// 定义编辑器样式
+.editor{
+  height: 500px;
+  & /deep/ .ql-container {
+    height: 310px;
+  }
+}
+// 定义地图样式
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+// 定义搜索框样式
+.search-box {
+  position: absolute;
+}
+// 定义添加编辑块样式
+.addEdit-block {
+  margin: -10px;
+}
+// 定义详情表单内容样式
+.detail-form-content {
+  padding: 12px;
+}
+// 定义按钮样式
+.btn .el-button {
+  padding: 0;
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/modules/yuyuekanfang/list.vue b/fount/views/modules/yuyuekanfang/list.vue
new file mode 100644
index 0000000..9c23801
--- /dev/null
+++ b/fount/views/modules/yuyuekanfang/list.vue
@@ -0,0 +1,836 @@
+<template>
+  <div class="main-content">
+    <!-- 列表页 -->
+    <div v-if="showFlag">
+      <!-- 搜索表单 -->
+      <el-form :inline="true" :model="searchForm" class="form-content">
+        <!-- 搜索按钮区域，根据配置动态调整对齐方式 -->
+        <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
+          <!-- 房屋名称搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房屋名称' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangwumingcheng" placeholder="房屋名称" clearable></el-input>
+          </el-form-item>
+
+          <!-- 用户名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '用户名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.yonghuming" placeholder="用户名" clearable></el-input>
+          </el-form-item>
+
+          <!-- 姓名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '姓名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.xingming" placeholder="姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.xingming" placeholder="姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.xingming" placeholder="姓名" clearable></el-input>
+          </el-form-item>
+
+          <!-- 房主姓名搜索框 -->
+          <el-form-item :label="contents.inputTitle == 1 ? '房主姓名' : ''">
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 1" prefix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 1 && contents.inputIconPosition == 2" suffix-icon="el-icon-search" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+            <el-input v-if="contents.inputIcon == 0" v-model="searchForm.fangzhuxingming" placeholder="房主姓名" clearable></el-input>
+          </el-form-item>
+
+          <!-- 查询按钮 -->
+          <el-form-item>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 1" icon="el-icon-search" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+            <el-button v-if="contents.searchBtnIcon == 1 && contents.searchBtnIconPosition == 2" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}<i class="el-icon-search el-icon--right"/></el-button>
+            <el-button v-if="contents.searchBtnIcon == 0" type="success" @click="search()">{{ contents.searchBtnFont == 1?'查询':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+
+        <!-- 操作按钮区域 -->
+        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
+          <el-form-item>
+            <!-- 新增按钮 -->
+            <el-button
+                v-if="isAuth('yuyuekanfang','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
+                type="success"
+                icon="el-icon-plus"
+                @click="addOrUpdateHandler()">{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+            <el-button
+                v-if="isAuth('yuyuekanfang','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
+                type="success"
+                @click="addOrUpdateHandler()">{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('yuyuekanfang','新增') && contents.btnAdAllIcon == 0"
+                type="success"
+                @click="addOrUpdateHandler()">{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
+
+            <!-- 删除按钮 -->
+            <el-button
+                v-if="isAuth('yuyuekanfang','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                icon="el-icon-delete"
+                @click="deleteHandler()">{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+            <el-button
+                v-if="isAuth('yuyuekanfang','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()">{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+            <el-button
+                v-if="isAuth('yuyuekanfang','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
+                :disabled="dataListSelections.length <= 0"
+                type="danger"
+                @click="deleteHandler()">{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+
+      <!-- 表格内容 -->
+      <div class="table-content">
+        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
+                  :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
+                  :border="contents.tableBorder"
+                  :fit="contents.tableFit"
+                  :stripe="contents.tableStripe"
+                  :row-style="rowStyle"
+                  :cell-style="cellStyle"
+                  :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
+                  v-if="isAuth('yuyuekanfang','查看')"
+                  :data="dataList"
+                  v-loading="dataListLoading"
+                  @selection-change="selectionChangeHandler">
+          <!-- 多选列 -->
+          <el-table-column  v-if="contents.tableSelection"
+                            type="selection"
+                            header-align="center"
+                            align="center"
+                            width="50">
+          </el-table-column>
+
+          <!-- 索引列 -->
+          <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
+
+          <!-- 预约编号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yuyuebianhao"
+                            header-align="center"
+                            label="预约编号">
+            <template slot-scope="scope">
+              {{scope.row.yuyuebianhao}}
+            </template>
+          </el-table-column>
+
+          <!-- 房屋名称列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwumingcheng"
+                            header-align="center"
+                            label="房屋名称">
+            <template slot-scope="scope">
+              {{scope.row.fangwumingcheng}}
+            </template>
+          </el-table-column>
+
+          <!-- 其他列定义（房屋类型、状态、小区等） -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuleixing"
+                            header-align="center"
+                            label="房屋类型">
+            <template slot-scope="scope">
+              {{scope.row.fangwuleixing}}
+            </template>
+          </el-table-column>
+
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangwuzhuangtai"
+                            header-align="center"
+                            label="房屋状态">
+            <template slot-scope="scope">
+              {{scope.row.fangwuzhuangtai}}
+            </template>
+          </el-table-column>
+
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xiaoqu"
+                            header-align="center"
+                            label="小区">
+            <template slot-scope="scope">
+              {{scope.row.xiaoqu}}
+            </template>
+          </el-table-column>
+
+          <!-- 月租价格列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yuezujiage"
+                            header-align="center"
+                            label="月租价格">
+            <template slot-scope="scope">
+              {{scope.row.yuezujiage}}
+            </template>
+          </el-table-column>
+
+          <!-- 押金列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yajin"
+                            header-align="center"
+                            label="押金">
+            <template slot-scope="scope">
+              {{scope.row.yajin}}
+            </template>
+          </el-table-column>
+
+          <!-- 租用月数列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zuyongyueshu"
+                            header-align="center"
+                            label="租用月数">
+            <template slot-scope="scope">
+              {{scope.row.zuyongyueshu}}
+            </template>
+          </el-table-column>
+
+          <!-- 租用金额列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="zuyongjine"
+                            header-align="center"
+                            label="租用金额">
+            <template slot-scope="scope">
+              {{scope.row.zuyongjine}}
+            </template>
+          </el-table-column>
+
+          <!-- 预约时间列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yuyueshijian"
+                            header-align="center"
+                            label="预约时间">
+            <template slot-scope="scope">
+              {{scope.row.yuyueshijian}}
+            </template>
+          </el-table-column>
+
+          <!-- 用户名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="yonghuming"
+                            header-align="center"
+                            label="用户名">
+            <template slot-scope="scope">
+              {{scope.row.yonghuming}}
+            </template>
+          </el-table-column>
+
+          <!-- 姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="xingming"
+                            header-align="center"
+                            label="姓名">
+            <template slot-scope="scope">
+              {{scope.row.xingming}}
+            </template>
+          </el-table-column>
+
+          <!-- 身份证列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="shenfenzheng"
+                            header-align="center"
+                            label="身份证">
+            <template slot-scope="scope">
+              {{scope.row.shenfenzheng}}
+            </template>
+          </el-table-column>
+
+          <!-- 联系电话列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="lianxidianhua"
+                            header-align="center"
+                            label="联系电话">
+            <template slot-scope="scope">
+              {{scope.row.lianxidianhua}}
+            </template>
+          </el-table-column>
+
+          <!-- 房主账号列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuzhanghao"
+                            header-align="center"
+                            label="房主账号">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuzhanghao}}
+            </template>
+          </el-table-column>
+
+          <!-- 房主姓名列 -->
+          <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
+                            prop="fangzhuxingming"
+                            header-align="center"
+                            label="房主姓名">
+            <template slot-scope="scope">
+              {{scope.row.fangzhuxingming}}
+            </template>
+          </el-table-column>
+
+          <!-- 审核回复列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="shhf"
+                           header-align="center"
+                           label="审核回复">
+          </el-table-column>
+
+          <!-- 审核状态列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核状态">
+            <template slot-scope="scope">
+              <span style="margin-right:10px">{{scope.row.sfsh=='是'?'通过':'未通过'}}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 审核操作列 -->
+          <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
+                           v-if="isAuth('yuyuekanfang','审核')"
+                           prop="sfsh"
+                           header-align="center"
+                           label="审核">
+            <template slot-scope="scope">
+              <el-button  type="text" icon="el-icon-edit" size="small" @click="shDialog(scope.row)">审核</el-button>
+            </template>
+          </el-table-column>
+
+          <!-- 操作列 -->
+          <el-table-column width="300" :align="contents.tableAlign"
+                           header-align="center"
+                           label="操作">
+            <template slot-scope="scope">
+              <!-- 详情按钮 -->
+              <el-button v-if="isAuth('yuyuekanfang','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+              <el-button v-if="isAuth('yuyuekanfang','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('yuyuekanfang','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
+
+              <!-- 合同按钮 -->
+              <el-button v-if="isAuth('yuyuekanfang','合同') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="hetongxinxiCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'合同':'' }}</el-button>
+              <el-button v-if="isAuth('yuyuekanfang','合同') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="hetongxinxiCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'合同':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
+              <el-button v-if="isAuth('yuyuekanfang','合同') && contents.tableBtnIcon == 0" type="success" size="mini" @click="hetongxinxiCrossAddOrUpdateHandler(scope.row,'cross')">{{ contents.tableBtnFont == 1?'合同':'' }}</el-button>
+
+              <!-- 修改按钮 -->
+              <el-button v-if="isAuth('yuyuekanfang','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+              <el-button v-if="isAuth('yuyuekanfang','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
+              <el-button v-if="isAuth('yuyuekanfang','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
+
+              <!-- 删除按钮 -->
+              <el-button v-if="isAuth('yuyuekanfang','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+              <el-button v-if="isAuth('yuyuekanfang','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
+              <el-button v-if="isAuth('yuyuekanfang','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页控件 -->
+        <el-pagination
+            clsss="pages"
+            :layout="layouts"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="Number(contents.pageEachNum)"
+            :total="totalPage"
+            :small="contents.pageStyle"
+            class="pagination-content"
+            :background="contents.pageBtnBG"
+            :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <!-- 添加/修改页面 -->
+    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
+
+    <!-- 合同信息页面 -->
+    <hetongxinxi-cross-add-or-update v-if="hetongxinxiCrossAddOrUpdateFlag" :parent="this" ref="hetongxinxiCrossaddOrUpdate"></hetongxinxi-cross-add-or-update>
+
+    <!-- 审核对话框 -->
+    <el-dialog
+        title="审核"
+        :visible.sync="sfshVisiable"
+        width="50%">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="审核状态">
+          <el-select v-model="shForm.sfsh" placeholder="审核状态">
+            <el-option label="通过" value="是"></el-option>
+            <el-option label="不通过" value="否"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" :rows="8" v-model="shForm.shhf"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="shDialog">取 消</el-button>
+        <el-button type="primary" @click="shHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+// 导入添加/修改组件
+import AddOrUpdate from "./add-or-update";
+// 导入合同信息组件
+import hetongxinxiCrossAddOrUpdate from "../hetongxinxi/add-or-update";
+
+export default {
+  data() {
+    return {
+      // 搜索框绑定对象
+      searchForm: {
+        key: ""
+      },
+      // 数据列表
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页大小
+      pageSize: 10,
+      // 总记录数
+      totalPage: 0,
+      // 数据加载状态
+      dataListLoading: false,
+      // 多选数据
+      dataListSelections: [],
+      // 显示标志
+      showFlag: true,
+      // 审核对话框显示状态
+      sfshVisiable: false,
+      // 审核表单
+      shForm: {},
+      // 图表显示状态
+      chartVisiable: false,
+      // 添加/修改页面显示状态
+      addOrUpdateFlag:false,
+      // 合同信息页面显示状态
+      hetongxinxiCrossAddOrUpdateFlag: false,
+      // 配置信息
+      contents:{"searchBtnFontColor":"#333","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"22px","tableBtnDelFontColor":"#333","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(66, 130, 129, 1)","searchBtnBorderRadius":"22px","tableStripe":false,"btnAdAllWarnFontColor":"#333","tableBtnDelBgColor":"rgba(244, 150, 150, 1)","searchBtnIcon":"1","tableSize":"medium","searchBtnBorderStyle":"solid","tableSelection":true,"searchBtnBorderWidth":"1px","tableContentFontSize":"14px","searchBtnBgColor":"rgba(153, 239, 237, 1)","inputTitleSize":"14px","btnAdAllBorderColor":"#DCDFE6","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"1","tableBtnDetailFontColor":"#333","tableBtnHeight":"40px","pagePager":true,"searchBtnBorderColor":"#DCDFE6","tableHeaderFontColor":"rgba(33, 34, 35, 1)","inputTitle":"1","tableBtnBorderRadius":"22px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(21, 20, 20, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"rgba(238, 236, 126, 1)","btnAdAllBorderWidth":"1px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"solid","inputHeight":"40px","btnAdAllBorderRadius":"22px","btnAdAllDelBgColor":"rgba(234, 93, 93, 0.69)","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(153, 239, 237, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":true,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"rgba(240, 242, 124, 1)","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"#333","pageEachNum":10,"tableHeaderBgColor":"rgba(152, 129, 129, 1)","inputTitleColor":"#333","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"rgba(171, 239, 239, 1)","inputIcon":"0","searchBtnIconPosition":"1","btnAdAllFontSize":"14px","inputBorderStyle":"solid","inputBgColor":"rgba(197, 174, 174, 0.32)","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"#333","tableBtnFont":"1","tableContentFontColor":"rgba(22, 22, 23, 1)","inputBorderColor":"rgba(152, 129, 129, 1)","tableShowHeader":true,"tableBtnFontSize":"14px","tableBtnBorderColor":"rgba(196, 210, 244, 1)","inputIconPosition":"1","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(213, 197, 197, 1)","tableBtnEditFontColor":"#333","tableAlign":"center"},
+      // 分页布局
+      layouts: '',
+    };
+  },
+  created() {
+    // 组件创建时初始化
+    this.init();
+    // 获取数据列表
+    this.getDataList();
+    // 内容样式变化
+    this.contentStyleChange()
+  },
+  mounted() {
+    // 组件挂载完成
+  },
+  filters: {
+    // HTML过滤器
+    htmlfilter: function (val) {
+      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
+    }
+  },
+  components: {
+    // 注册添加/修改组件
+    AddOrUpdate,
+    // 注册合同信息组件
+    hetongxinxiCrossAddOrUpdate,
+  },
+  methods: {
+    // 内容样式变化
+    contentStyleChange() {
+      this.contentSearchStyleChange()
+      this.contentBtnAdAllStyleChange()
+      this.contentSearchBtnStyleChange()
+      this.contentTableBtnStyleChange()
+      this.contentPageStyleChange()
+    },
+    // 搜索
+    contentSearchStyleChange() {
+      this.$nextTick(()=>{  // 确保DOM已更新
+        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
+          // 设置输入框样式
+          let textAlign = 'left'
+          if(this.contents.inputFontPosition == 2) textAlign = 'center'
+          if(this.contents.inputFontPosition == 3) textAlign = 'right'
+          el.style.textAlign = textAlign
+          el.style.height = this.contents.inputHeight
+          el.style.lineHeight = this.contents.inputHeight
+          el.style.color = this.contents.inputFontColor
+          el.style.fontSize = this.contents.inputFontSize
+          el.style.borderWidth = this.contents.inputBorderWidth
+          el.style.borderStyle = this.contents.inputBorderStyle
+          el.style.borderColor = this.contents.inputBorderColor
+          el.style.borderRadius = this.contents.inputBorderRadius
+          el.style.backgroundColor = this.contents.inputBgColor
+        })
+        // 设置标签样式
+        if(this.contents.inputTitle) {
+          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
+            el.style.color = this.contents.inputTitleColor
+            el.style.fontSize = this.contents.inputTitleSize
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        }
+        // 设置图标样式
+        setTimeout(()=>{  // 延迟确保图标已渲染
+          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
+            el.style.color = this.contents.inputIconColor
+            el.style.lineHeight = this.contents.inputHeight
+          })
+          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
+            el.style.lineHeight = this.contents.inputHeight
+          })
+        },10)
+      })
+    },
+    // 搜索按钮样式
+    contentSearchBtnStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
+          // 设置按钮样式
+          el.style.height = this.contents.searchBtnHeight
+          el.style.color = this.contents.searchBtnFontColor
+          el.style.fontSize = this.contents.searchBtnFontSize
+          el.style.borderWidth = this.contents.searchBtnBorderWidth
+          el.style.borderStyle = this.contents.searchBtnBorderStyle
+          el.style.borderColor = this.contents.searchBtnBorderColor
+          el.style.borderRadius = this.contents.searchBtnBorderRadius
+          el.style.backgroundColor = this.contents.searchBtnBgColor
+        })
+      })
+    },
+    // 新增、批量删除按钮样式
+    contentBtnAdAllStyleChange() {
+      this.$nextTick(()=>{
+        // 新增按钮样式
+        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllAddFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
+        })
+        // 删除按钮样式
+        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllDelFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
+        })
+        // 警告按钮样式
+        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
+          el.style.height = this.contents.btnAdAllHeight
+          el.style.color = this.contents.btnAdAllWarnFontColor
+          el.style.fontSize = this.contents.btnAdAllFontSize
+          el.style.borderWidth = this.contents.btnAdAllBorderWidth
+          el.style.borderStyle = this.contents.btnAdAllBorderStyle
+          el.style.borderColor = this.contents.btnAdAllBorderColor
+          el.style.borderRadius = this.contents.btnAdAllBorderRadius
+          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
+        })
+      })
+    },
+    // 表格隔行样式
+    rowStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {color:this.contents.tableStripeFontColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表格单元格样式
+    cellStyle({ row, rowIndex}) {
+      if (rowIndex % 2 == 1) {
+        if(this.contents.tableStripe) {
+          return {backgroundColor:this.contents.tableStripeBgColor}
+        }
+      } else {
+        return ''
+      }
+    },
+    // 表头行样式
+    headerRowStyle({ row, rowIndex}) {
+      return {color: this.contents.tableHeaderFontColor}
+    },
+    // 表头单元格样式
+    headerCellStyle({ row, rowIndex}) {
+      return {backgroundColor: this.contents.tableHeaderBgColor}
+    },
+    // 表格按钮样式
+    contentTableBtnStyleChange(){
+      // 设置表格内按钮样式
+    },
+    // 分页样式
+    contentPageStyleChange(){
+      let arr = []
+      if(this.contents.pageTotal) arr.push('total')
+      if(this.contents.pageSizes) arr.push('sizes')
+      if(this.contents.pagePrevNext){
+        arr.push('prev')
+        if(this.contents.pagePager) arr.push('pager')
+        arr.push('next')
+      }
+      if(this.contents.pageJumper) arr.push('jumper')
+      this.layouts = arr.join()
+      this.contents.pageEachNum = 10
+    },
+    // 合同信息处理
+    hetongxinxiCrossAddOrUpdateHandler(row,type){
+      this.showFlag = false;
+      this.addOrUpdateFlag = false;
+      this.hetongxinxiCrossAddOrUpdateFlag = true;
+      this.$storage.set('crossObj',row);
+      this.$storage.set('crossTable','yuyuekanfang');
+      this.$nextTick(() => {
+        this.$refs.hetongxinxiCrossaddOrUpdate.init(row.id,type);
+      });
+    },
+    // 初始化方法
+    init () {
+    },
+    // 搜索
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+      }
+      // 添加搜索条件
+      if(this.searchForm.fangwumingcheng!='' && this.searchForm.fangwumingcheng!=undefined){
+        params['fangwumingcheng'] = '%' + this.searchForm.fangwumingcheng + '%'
+      }
+      if(this.searchForm.yonghuming!='' && this.searchForm.yonghuming!=undefined){
+        params['yonghuming'] = '%' + this.searchForm.yonghuming + '%'
+      }
+      if(this.searchForm.xingming!='' && this.searchForm.xingming!=undefined){
+        params['xingming'] = '%' + this.searchForm.xingming + '%'
+      }
+      if(this.searchForm.fangzhuxingming!='' && this.searchForm.fangzhuxingming!=undefined){
+        params['fangzhuxingming'] = '%' + this.searchForm.fangzhuxingming + '%'
+      }
+      // 发起请求
+      this.$http({
+        url: "yuyuekanfang/page",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.list;
+          this.totalPage = data.data.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 分页大小改变
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 分页页码改变
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选改变
+    selectionChangeHandler(val) {
+      this.dataListSelections = val;
+    },
+    // 添加/修改处理
+    addOrUpdateHandler(id,type) {
+      this.showFlag = false;
+      this.addOrUpdateFlag = true;
+      this.crossAddOrUpdateFlag = false;
+      if(type!='info'){
+        type = 'else';
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id,type);
+      });
+    },
+    // 审核对话框
+    shDialog(row){
+      this.sfshVisiable = !this.sfshVisiable;
+      if(row){
+        this.shForm = {
+          yuyuebianhao: row.yuyuebianhao,
+          fangwumingcheng: row.fangwumingcheng,
+          fangwuleixing: row.fangwuleixing,
+          fangwuzhuangtai: row.fangwuzhuangtai,
+          xiaoqu: row.xiaoqu,
+          yuezujiage: row.yuezujiage,
+          yajin: row.yajin,
+          zuyongyueshu: row.zuyongyueshu,
+          zuyongjine: row.zuyongjine,
+          yuyueshijian: row.yuyueshijian,
+          yonghuming: row.yonghuming,
+          xingming: row.xingming,
+          shenfenzheng: row.shenfenzheng,
+          lianxidianhua: row.lianxidianhua,
+          fangzhuzhanghao: row.fangzhuzhanghao,
+          fangzhuxingming: row.fangzhuxingming,
+          sfsh: row.sfsh,
+          shhf: row.shhf,
+          id: row.id
+        }
+      }
+    },
+    // 审核处理
+    shHandler(){
+      this.$confirm(`确定操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "yuyuekanfang/update",
+          method: "post",
+          data: this.shForm
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+                this.shDialog()
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    // 下载文件
+    download(file){
+      window.open(`${file}`)
+    },
+    // 删除处理
+    deleteHandler(id) {
+      var ids = id
+          ? [Number(id)]
+          : this.dataListSelections.map(item => {
+            return Number(item.id);
+          });
+      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$http({
+          url: "yuyuekanfang/delete",
+          method: "post",
+          data: ids
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.search();
+              }
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+/* 搜索框样式调整 */
+.slt {
+  margin: 0 !important;
+  display: flex;
+}
+
+/* 按钮区域样式调整 */
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+/* 分页样式调整 */
+.pages {
+  & /deep/ .el-pagination__sizes{
+    & /deep/ .el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}
+
+/* 表格按钮间距调整 */
+.el-button+.el-button {
+  margin:0;
+}
+
+/* 表格按钮样式 */
+.tables {
+  & /deep/ .el-button--success {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(171, 239, 239, 1);
+  }
+
+  & /deep/ .el-button--primary {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(240, 242, 124, 1);
+  }
+
+  & /deep/ .el-button--danger {
+    height: 40px;
+    color: #333;
+    font-size: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(196, 210, 244, 1);
+    border-radius: 22px;
+    background-color: rgba(244, 150, 150, 1);
+  }
+
+  & /deep/ .el-button {
+    margin: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/pay.vue b/fount/views/pay.vue
new file mode 100644
index 0000000..4362b95
--- /dev/null
+++ b/fount/views/pay.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="container">
+    <!-- 显示支付提示信息 -->
+    <el-alert title="确认支付前请先核对订单信息" type="success" :closable="false"></el-alert>
+    <!-- 输入收款人信息（暂时注释） -->
+    <!-- <div class="top-content">
+      <span>收款人</span>
+      <el-input style="width:300px" v-model="name" placeholder="收款人"></el-input>
+      <span style="margin-left:20px">收款账号</span>
+      <el-input style="width:300px" v-model="account" placeholder="收款账号"></el-input>
+    </div> -->
+    <!-- 显示支付金额（暂时注释） -->
+    <!-- <div class="price-content">
+      <span>金额</span>
+      <span>￥99.0</span>
+    </div> -->
+    <!-- 支付方式选择区域 -->
+    <div class="pay-type-content">
+      <!-- 微信支付选项 -->
+      <div class="pay-type-item">
+        <el-radio v-model="type" label="微信支付"></el-radio>
+        <img src="@/assets/img/test/weixin.png" alt>
+        <!-- <span>微信支付</span> -->
+      </div>
+      <!-- 支付宝支付选项 -->
+      <div class="pay-type-item">
+        <el-radio v-model="type" label="支付宝支付"></el-radio>
+        <img src="@/assets/img/test/zhifubao.png" alt>
+        <!-- <span>支付宝支付</span> -->
+      </div>
+      <!-- 建设银行支付选项 -->
+      <div class="pay-type-item">
+        <el-radio v-model="type" label="建设银行"></el-radio>
+        <img src="@/assets/img/test/jianshe.png" alt>
+        <!-- <span>建设银行</span> -->
+      </div>
+      <!-- 农业银行支付选项 -->
+      <div class="pay-type-item">
+        <el-radio v-model="type" label="农业银行"></el-radio>
+        <img src="@/assets/img/test/nongye.png" alt>
+        <!-- <span>农业银行</span> -->
+      </div>
+      <!-- 中国银行支付选项 -->
+      <div class="pay-type-item">
+        <el-radio v-model="type" label="中国银行"></el-radio>
+        <img src="@/assets/img/test/zhongguo.png" alt>
+        <!-- <span>中国银行</span> -->
+      </div>
+      <!-- 交通银行支付选项 -->
+      <div class="pay-type-item">
+        <el-radio v-model="type" label="交通银行"></el-radio>
+        <img src="@/assets/img/test/jiaotong.png" alt>
+        <!-- <span>交通银行</span> -->
+      </div>
+    </div>
+    <!-- 按钮区域 -->
+    <div class="buton-content">
+      <!-- 确认支付按钮 -->
+      <el-button @click="submitTap" type="primary">确认支付</el-button>
+      <!-- 返回按钮 -->
+      <el-button @click="back()">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { Message } from "element-ui";
+export default {
+  data() {
+    return {
+      // 收款人姓名
+      name: "",
+      // 收款账号
+      account: "",
+      // 支付方式
+      type: "",
+      // 支付表单
+      table: "",
+      // 支付对象
+      obj: ""
+    };
+  },
+  mounted() {
+    // 页面加载时从本地存储获取支付表单
+    let table = this.$storage.get("paytable");
+    // 页面加载时从本地存储获取支付对象
+    let obj = this.$storage.getObj("payObject");
+    // 设置支付表单
+    this.table = table;
+    // 设置支付对象
+    this.obj = obj;
+  },
+  methods: {
+    submitTap() {
+      // if (!this.name) {
+      //   this.$message.error("请输入收款人姓名");
+      //   return;
+      // }
+      // if (!this.account) {
+      //   this.$message.error("请输入收款人账号");
+      //   return;
+      // }
+      // 检查是否选择了支付方式
+      if (!this.type) {
+        this.$message.error("请选择支付方式");
+        return;
+      }
+      // 显示确认支付的对话框
+      this.$confirm(`确定支付?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        // 设置支付状态为已支付
+        this.obj.ispay = "已支付";
+        // 发送请求更新支付状态
+        this.$http({
+          url: `${this.table}/update`,
+          method: "post",
+          data: this.obj
+        }).then(({ data }) => {
+          // 如果更新成功
+          if (data && data.code === 0) {
+            // 显示支付成功的消息
+            this.$message({
+              message: "支付成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                // 返回上一页
+                this.$router.go(-1);
+              }
+            });
+          } else {
+            // 如果更新失败，显示错误消息
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+    back(){
+      // 返回上一页
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 容器样式 */
+.container {
+  margin: 10px;
+  font-size: 14px;
+  span {
+    width: 60px;
+  }
+  /* 顶部内容区域样式（暂时注释） */
+  .top-content {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+  }
+  /* 价格内容区域样式（暂时注释） */
+  .price-content {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    padding-bottom: 20px;
+    padding: 20px;
+    border-bottom: 1px solid #eeeeee;
+    font-size: 20px;
+    font-weight: bold;
+    color: red;
+  }
+  /* 支付方式内容区域样式 */
+  .pay-type-content {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    flex-wrap: wrap;
+    span {
+      width: 100px;
+    }
+    /* 支付方式项样式 */
+    .pay-type-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 300px;
+      margin: 20px;
+      border: 1px solid #eeeeee;
+      padding: 20px;
+    }
+  }
+  /* 按钮内容区域样式 */
+  .buton-content {
+    margin: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/register.vue b/fount/views/register.vue
new file mode 100644
index 0000000..a8fee2a
--- /dev/null
+++ b/fount/views/register.vue
@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <!-- 外层容器 -->
+    <div class="container">
+      <!-- 登录表单容器，设置背景颜色和圆角 -->
+      <div class="login-form" style="backgroundColor:rgba(183, 174, 174, 0.5);borderRadius:22px">
+        <!-- 标题，设置字体颜色和大小 -->
+        <h1 class="h1" style="color:#000;fontSize:28px;">房屋租赁系统注册</h1>
+        <!-- 表单，引用表单对象，设置样式类和标签宽度 -->
+        <el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">
+
+          <!-- 用户名输入项，仅当 tableName 为 'yonghu' 时显示 -->
+          <el-form-item label="用户名" class="input" v-if="tableName=='yonghu'">
+            <!-- 输入框，双向绑定用户名数据 -->
+            <el-input v-model="ruleForm.yonghuming" autocomplete="off" placeholder="用户名" type="text" />
+          </el-form-item>
+
+          <!-- 密码输入项，仅当 tableName 为 'yonghu' 时显示 -->
+          <el-form-item label="密码" class="input" v-if="tableName=='yonghu'">
+            <!-- 输入框，双向绑定密码数据 -->
+            <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
+          </el-form-item>
+
+          <!-- 姓名输入项，仅当 tableName 为 'yonghu' 时显示 -->
+          <el-form-item label="姓名" class="input" v-if="tableName=='yonghu'">
+            <!-- 输入框，双向绑定姓名数据 -->
+            <el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名" type="text" />
+          </el-form-item>
+
+          <!-- 职业输入项，仅当 tableName 为 'yonghu' 时显示 -->
+          <el-form-item label="职业" class="input" v-if="tableName=='yonghu'">
+            <!-- 输入框，双向绑定职业数据 -->
+            <el-input v-model="ruleForm.zhiye" autocomplete="off" placeholder="职业" type="text" />
+          </el-form-item>
+
+          <!-- 联系电话输入项，仅当 tableName 为 'yonghu' 时显示 -->
+          <el-form-item label="联系电话" class="input" v-if="tableName=='yonghu'">
+            <!-- 输入框，双向绑定联系电话数据 -->
+            <el-input v-model="ruleForm.lianxidianhua" autocomplete="off" placeholder="联系电话" type="text" />
+          </el-form-item>
+
+          <!-- 身份证输入项，仅当 tableName 为 'yonghu' 时显示 -->
+          <el-form-item label="身份证" class="input" v-if="tableName=='yonghu'">
+            <!-- 输入框，双向绑定身份证数据 -->
+            <el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证" type="text" />
+          </el-form-item>
+
+          <!-- 房主账号输入项，仅当 tableName 为 'fangzhu' 时显示 -->
+          <el-form-item label="房主账号" class="input" v-if="tableName=='fangzhu'">
+            <!-- 输入框，双向绑定房主账号数据 -->
+            <el-input v-model="ruleForm.fangzhuzhanghao" autocomplete="off" placeholder="房主账号" type="text" />
+          </el-form-item>
+
+          <!-- 房主姓名输入项，仅当 tableName 为 'fangzhu' 时显示 -->
+          <el-form-item label="房主姓名" class="input" v-if="tableName=='fangzhu'">
+            <!-- 输入框，双向绑定房主姓名数据 -->
+            <el-input v-model="ruleForm.fangzhuxingming" autocomplete="off" placeholder="房主姓名" type="text" />
+          </el-form-item>
+
+          <!-- 手机输入项，仅当 tableName 为 'fangzhu' 时显示 -->
+          <el-form-item label="手机" class="input" v-if="tableName=='fangzhu'">
+            <!-- 输入框，双向绑定手机数据 -->
+            <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" type="text" />
+          </el-form-item>
+
+          <!-- 身份证输入项，仅当 tableName 为 'fangzhu' 时显示 -->
+          <el-form-item label="身份证" class="input" v-if="tableName=='fangzhu'">
+            <!-- 输入框，双向绑定身份证数据 -->
+            <el-input v-model="ruleForm.shenfenzheng" autocomplete="off" placeholder="身份证" type="text" />
+          </el-form-item>
+
+          <!-- 注册按钮 -->
+          <el-button class="btn" type="primary" @click="login()">注册</el-button>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 表单数据对象
+      ruleForm: {},
+      // 表单验证规则
+      rules: {},
+      // 当前表单类型
+      tableName: ""
+    };
+  },
+  mounted() {
+    // 组件挂载后执行
+    // 从存储中获取登录表单类型
+    let table = this.$storage.get("loginTable");
+    this.tableName = table;
+  },
+  methods: {
+    // 获取唯一标识符
+    getUUID() {
+      return new Date().getTime();
+    },
+    // 注册方法
+    login() {
+      // 用户名验证，当 tableName 为 'yonghu' 时
+      if (!this.ruleForm.yonghuming && `yonghu` == this.tableName) {
+        this.$message.error(`用户名不能为空`);
+        return;
+      }
+      // 密码验证，当 tableName 为 'yonghu' 时
+      if (!this.ruleForm.mima && `yonghu` == this.tableName) {
+        this.$message.error(`密码不能为空`);
+        return;
+      }
+      // 联系电话格式验证，当 tableName 为 'yonghu' 时
+      if (`yonghu` == this.tableName && this.ruleForm.lianxidianhua && !this.$validate.isMobile(this.ruleForm.lianxidianhua)) {
+        this.$message.error(`联系电话应输入手机格式`);
+        return;
+      }
+      // 身份证格式验证，当 tableName 为 'yonghu' 时
+      if (`yonghu` == this.tableName && this.ruleForm.shenfenzheng && !this.$validate.checkIdCard(this.ruleForm.shenfenzheng)) {
+        this.$message.error(`身份证应输入身份证格式`);
+        return;
+      }
+      // 房主账号验证，当 tableName 为 'fangzhu' 时
+      if (!this.ruleForm.fangzhuzhanghao && `fangzhu` == this.tableName) {
+        this.$message.error(`房主账号不能为空`);
+        return;
+      }
+      // 密码验证，当 tableName 为 'fangzhu' 时
+      if (!this.ruleForm.mima && `fangzhu` == this.tableName) {
+        this.$message.error(`密码不能为空`);
+        return;
+      }
+      // 房主姓名验证，当 tableName 为 'fangzhu' 时
+      if (!this.ruleForm.fangzhuxingming && `fangzhu` == this.tableName) {
+        this.$message.error(`房主姓名不能为空`);
+        return;
+      }
+      // 手机格式验证，当 tableName 为 'fangzhu' 时
+      if (`fangzhu` == this.tableName && this.ruleForm.shouji && !this.$validate.isMobile(this.ruleForm.shouji)) {
+        this.$message.error(`手机应输入手机格式`);
+        return;
+      }
+      // 身份证格式验证，当 tableName 为 'fangzhu' 时
+      if (`fangzhu` == this.tableName && this.ruleForm.shenfenzheng && !this.$validate.checkIdCard(this.ruleForm.shenfenzheng)) {
+        this.$message.error(`身份证应输入身份证格式`);
+        return;
+      }
+
+      // 发起 HTTP 请求提交注册数据
+      this.$http({
+        url: `${this.tableName}/register`,
+        method: "post",
+        data: this.ruleForm
+      }).then(({ data }) => {
+        // 请求成功处理
+        if (data && data.code === 0) {
+          // 显示成功消息
+          this.$message({
+            message: "注册成功",
+            type: "success",
+            duration: 1500,
+            onClose: () => {
+              // 注册成功后跳转到登录页面
+              this.$router.replace({ path: "/login" });
+            }
+          });
+        } else {
+          // 显示错误消息
+          this.$message.error(data.msg);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// 设置单选按钮样式
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: #00c292;
+  background: #00c292;
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: #00c292;
+}
+
+// 标题样式
+.h1 {
+  margin-top: 10px;
+}
+
+// 容器样式
+.container {
+  background-image: url("<url id="d08b9asbcdrtv2l5qnu0" type="url" status="failed" title="" wc="0">http://codegen.caihongy.cn/20210128/ac0684f4d39c4b5ebf6694a20d747cd6.jpg</url> ");
+  height: 100vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  // 登录表单样式
+  .login-form {
+    right: 50%;
+    top: 50%;
+    height: auto;
+    transform: translate3d(50%, -50%, 0);
+    border-radius: 10px;
+    background-color: rgba(255,255,255,.5);
+    width: 420px;
+    padding: 30px 30px 40px 30px;
+    font-size: 14px;
+    font-weight: 500;
+
+    // 标题样式
+    .h1 {
+      margin: 0;
+      text-align: center;
+      line-height: 54px;
+      font-size: 24px;
+      color: #000;
+    }
+
+    // 表单样式
+    .rgs-form {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      // 输入项样式
+      .input {
+        width: 100%;
+
+        & /deep/ .el-form-item__label {
+          line-height: 40px;
+          color: rgba(17, 16, 16, 1);
+          font-size: #606266;
+        }
+
+        & /deep/ .el-input__inner {
+          height: 40px;
+          color: rgba(23, 24, 26, 1);
+          font-size: 14px;
+          border-width: 1px;
+          border-style: solid;
+          border-color: #606266;
+          border-radius: 22px;
+          background-color: #fff;
+        }
+      }
+
+      // 按钮样式
+      .btn {
+        width: 88px;
+        height: 44px;
+        color: #fff;
+        font-size: 14px;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #409EFF;
+        border-radius: 22px;
+        background-color: #409EFF;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/fount/views/update-password.vue b/fount/views/update-password.vue
new file mode 100644
index 0000000..e5c124b
--- /dev/null
+++ b/fount/views/update-password.vue
@@ -0,0 +1,157 @@
+<template>
+  <!-- 页面根容器 -->
+  <div>
+    <!-- 表单组件 -->
+    <el-form
+      class="detail-form-content"
+      ref="ruleForm"
+      :rules="rules"
+      :model="ruleForm"
+      label-width="80px"
+    >
+      <!-- 原密码输入项 -->
+      <el-form-item label="原密码" prop="password">
+        <el-input v-model="ruleForm.password"></el-input>
+      </el-form-item>
+
+      <!-- 新密码输入项 -->
+      <el-form-item label="新密码" prop="newpassword">
+        <el-input v-model="ruleForm.newpassword"></el-input>
+      </el-form-item>
+
+      <!-- 确认密码输入项 -->
+      <el-form-item label="确认密码" prop="repassword">
+        <el-input v-model="ruleForm.repassword"></el-input>
+      </el-form-item>
+
+      <!-- 提交按钮区域 -->
+      <el-form-item>
+        <el-button type="primary" @click="onUpdateHandler">确 定</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 控制模态框显示（本页面未使用，但保留）
+      dialogVisible: false,
+
+      // 表单数据模型
+      ruleForm: {},
+
+      // 用户信息对象
+      user: {},
+
+      // 表单验证规则
+      rules: {
+        password: [
+          {
+            required: true,
+            message: "密码不能为空",
+            trigger: "blur"
+          }
+        ],
+        newpassword: [
+          {
+            required: true,
+            message: "新密码不能为空",
+            trigger: "blur"
+          }
+        ],
+        repassword: [
+          {
+            required: true,
+            message: "确认密码不能为空",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mounted() {
+    // 页面挂载完成后获取当前用户信息
+    this.$http({
+      url: `${this.$storage.get("sessionTable")}/session`,
+      method: "get"
+    }).then(({ data }) => {
+      if (data && data.code === 0) {
+        // 成功获取用户信息
+        this.user = data.data;
+      } else {
+        // 获取失败提示错误信息
+        this.$message.error(data.msg);
+      }
+    });
+  },
+  methods: {
+    // 登出方法
+    onLogout() {
+      // 清除 Token
+      this.$storage.remove("Token");
+      // 跳转到登录页
+      this.$router.replace({ name: "login" });
+    },
+
+    // 修改密码方法
+    onUpdateHandler() {
+      // 表单验证
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          var password = "";
+          // 判断用户字段是 mima 还是 password（兼容不同表结构）
+          if (this.user.mima) {
+            password = this.user.mima;
+          } else if (this.user.password) {
+            password = this.user.password;
+          }
+
+          // 校验原密码是否正确
+          if (this.ruleForm.password != password) {
+            this.$message.error("原密码错误");
+            return;
+          }
+
+          // 校验两次新密码是否一致
+          if (this.ruleForm.newpassword != this.ruleForm.repassword) {
+            this.$message.error("两次密码输入不一致");
+            return;
+          }
+
+          // 更新用户密码字段
+          this.user.password = this.ruleForm.newpassword;
+          this.user.mima = this.ruleForm.newpassword;
+
+          // 发送修改请求
+          this.$http({
+            url: `${this.$storage.get("sessionTable")}/update`,
+            method: "post",
+            data: this.user
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              // 修改成功提示
+              this.$message({
+                message: "修改密码成功,下次登录系统生效",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  // 可选：关闭时操作
+                }
+              });
+            } else {
+              // 修改失败提示错误信息
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 本页面样式为空，可在此添加自定义样式 */
+</style>
diff --git a/fount/views/update-password.vue.bak b/fount/views/update-password.vue.bak
new file mode 100644
index 0000000..249a8ea
--- /dev/null
+++ b/fount/views/update-password.vue.bak
@@ -0,0 +1,158 @@
+<template>
+  <!-- 页面根容器 -->
+  <div>
+    <!-- 表单组件 -->
+    <el-form
+      class="detail-form-content"
+      ref="ruleForm"
+      :rules="rules"
+      :model="ruleForm"
+      label-width="80px"
+    >
+      <!-- 原密码输入项 -->
+      <el-form-item label="原密码" prop="password">
+        <el-input v-model="ruleForm.password"></el-input>
+      </el-form-item>
+
+      <!-- 新密码输入项 -->
+      <el-form-item label="新密码" prop="newpassword">
+        <el-input v-model="ruleForm.newpassword"></el-input>
+      </el-form-item>
+
+      <!-- 确认密码输入项 -->
+      <el-form-item label="确认密码" prop="repassword">
+        <el-input v-model="ruleForm.repassword"></el-input>
+      </el-form-item>
+
+      <!-- 提交按钮区域 -->
+      <el-form-item>
+        <el-button type="primary" @click="onUpdateHandler">确 定</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 控制对话框是否可见（本页面未使用）
+      dialogVisible: false,
+
+      // 表单数据对象，用于绑定输入值
+      ruleForm: {},
+
+      // 用户信息对象，从接口获取
+      user: {},
+
+      // 表单验证规则
+      rules: {
+        password: [
+          {
+            required: true,         // 必填项
+            message: "密码不能为空", // 错误提示信息
+            trigger: "blur"         // 触发验证事件
+          }
+        ],
+        newpassword: [
+          {
+            required: true,
+            message: "新密码不能为空",
+            trigger: "blur"
+          }
+        ],
+        repassword: [
+          {
+            required: true,
+            message: "确认密码不能为空",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  mounted() {
+    // 组件挂载后请求当前用户信息
+    this.$http({
+      url: `${this.$storage.get("sessionTable")}/session`, // 接口地址动态拼接
+      method: "get"
+    }).then(({ data }) => {
+      if (data && data.code === 0) {
+        // 请求成功，赋值用户信息
+        this.user = data.data;
+      } else {
+        // 请求失败，弹出错误提示
+        this.$message.error(data.msg);
+      }
+    });
+  },
+  methods: {
+    // 登出方法
+    onLogout() {
+      // 清除 Token 信息
+      this.$storage.remove("Token");
+      // 跳转到登录页
+      this.$router.replace({ name: "login" });
+    },
+
+    // 修改密码处理函数
+    onUpdateHandler() {
+      // 对表单进行整体校验
+      this.$refs["ruleForm"].validate(valid => {
+        if (valid) {
+          var password = "";
+
+          // 判断用户字段是 mima 还是 password（兼容不同表结构）
+          if (this.user.mima) {
+            password = this.user.mima;
+          } else if (this.user.password) {
+            password = this.user.password;
+          }
+
+          // 检查原密码是否正确
+          if (this.ruleForm.password != password) {
+            this.$message.error("原密码错误");
+            return;
+          }
+
+          // 校验两次新密码是否一致
+          if (this.ruleForm.newpassword != this.ruleForm.repassword) {
+            this.$message.error("两次密码输入不一致");
+            return;
+          }
+
+          // 更新用户密码字段
+          this.user.password = this.ruleForm.newpassword;
+          this.user.mima = this.ruleForm.newpassword;
+
+          // 发送修改密码请求
+          this.$http({
+            url: `${this.$storage.get("sessionTable")}/update`, // 动态拼接接口路径
+            method: "post",
+            data: this.user // 提交更新后的用户数据
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              // 修改成功提示
+              this.$message({
+                message: "修改密码成功,下次登录系统生效",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  // 可选回调：关闭时执行操作
+                }
+              });
+            } else {
+              // 修改失败提示错误信息
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 当前样式为空，可根据需求添加自定义样式 */
+</style>