|
|
<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> |
