You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
9.2 KiB
310 lines
9.2 KiB
<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>
|