Merge pull request 'v1.3' (#6) from develop into master
commit
9ea1876fcf
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in new issue