<template>
|
<div class="form-content">
|
<div class="form-center">
|
<h1 class="fz-9">{{ info_id ? "编辑" : "新增" }}</h1>
|
<!-- 表单 -->
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="120px"
|
class="demo-ruleForm"
|
>
|
<div class="fl-al">
|
<el-form-item label="姓名" prop="name">
|
<el-input
|
class="iw-25"
|
placeholder="请输入姓名"
|
size="mini"
|
maxlength="25"
|
clearable
|
v-model.trim="form.name"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phone">
|
<el-input
|
class="iw-25"
|
clearable
|
size="mini"
|
placeholder="请输入手机号"
|
v-model.trim="form.phone"
|
></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="状态" prop="position">
|
<el-radio v-model="form.status" :label="1">启用</el-radio>
|
<el-radio v-model="form.status" :label="0">禁用</el-radio>
|
</el-form-item>
|
<el-form-item label="上传头像" prop="imgUrl">
|
<div class="upImage">
|
<div class="sec">
|
<div v-if="form.imgUrl !== ''" class="image-box">
|
<img
|
@click="clear"
|
class="clear"
|
src="/static/image/clear.png"
|
alt=""
|
/>
|
<img :src="form.imgUrl" alt="" />
|
</div>
|
<div style="margin: 5px" class="avatar" v-else>
|
<vUpload
|
:showImg="true"
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="200"
|
:height="200"
|
@path="onUpload1($event)"
|
></vUpload>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button size="mini" @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" size="mini" v-if="info_id" @click="editForm"
|
>修 改</el-button
|
>
|
<el-button type="primary" size="mini" v-else @click="submitForm"
|
>提 交</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { objCopyPro } from "../../../utils/common.js"; // 表单复制
|
import vUpload from "com/upload/upload1";
|
export default {
|
components: {
|
vUpload,
|
},
|
data() {
|
return {
|
form: {
|
status: 1, // 状态
|
name: "", // 姓名
|
phone: "", // 手机号
|
imgUrl: "",
|
}, // 表单
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入姓名",
|
trigger: "blur",
|
},
|
],
|
phone: [
|
{
|
required: true,
|
message: "请输入手机号",
|
trigger: "blur",
|
},
|
],
|
imgUrl: [
|
{
|
required: true,
|
message: "请上传头像",
|
trigger: "blur",
|
},
|
],
|
}, // 表单验证
|
info_id: null,
|
};
|
},
|
async mounted() {
|
this.info_id = this.$route.query.id ? this.$route.query.id : null;
|
if (this.info_id) {
|
await this.getDetail();
|
}
|
},
|
methods: {
|
onUpload1(e) {
|
this.form.imgUrl = e;
|
},
|
clear() {
|
this.form.imgUrl = "";
|
},
|
// 获取详情
|
getDetail() {
|
this.$api.get("comPropertyHelp/" + this.info_id, {}, (res) => {
|
this.form = objCopyPro(this.form, res);
|
});
|
},
|
// 取消操作
|
handleClose() {
|
this.$router.back();
|
},
|
// 表单提交
|
submitForm() {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
this.$api.post("comPropertyHelp", this.form, (res) => {
|
if (res) {
|
demo.toast("添加成功");
|
this.$router.back();
|
} else {
|
demo.toast(res.data.msg);
|
}
|
});
|
}
|
});
|
},
|
editForm() {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
this.form.id = this.info_id;
|
this.$api.post("comPropertyHelp/update", this.form, (res) => {
|
if (res) {
|
demo.toast("修改成功");
|
this.$router.back();
|
} else {
|
demo.toast(res.data.msg);
|
}
|
});
|
}
|
});
|
},
|
},
|
};
|
</script>
|
<style scoped lang='less'>
|
.form-center {
|
padding: 10px 0;
|
height: 100%;
|
overflow-y: scroll;
|
}
|
.form-center::-webkit-scrollbar {
|
display: none;
|
}
|
.label-width {
|
width: 150px;
|
}
|
.label-width-64 {
|
text-align: right;
|
width: 70px;
|
}
|
.add-item {
|
margin-left: 70px;
|
}
|
.sec {
|
&::before {
|
content: attr(data-error);
|
position: absolute;
|
left: 0 !important;
|
bottom: -20px;
|
font-size: 12px;
|
line-height: 20px;
|
height: 20px;
|
width: calc(~"100% - 100px");
|
color: tomato;
|
}
|
}
|
.flex {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar {
|
margin: 0 10px 10px 0;
|
position: relative;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: tomato;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
.map {
|
height: 400px;
|
width: 600px;
|
background-color: #eee;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.tt-500 {
|
width: 500px;
|
}
|
.iw-25 {
|
width: 250px;
|
}
|
.map-content {
|
width: 700px;
|
}
|
.upImage {
|
/*width: 100%;*/
|
display: flex;
|
box-sizing: border-box;
|
flex-wrap: wrap;
|
}
|
|
.sec {
|
margin: 10px;
|
}
|
.image-box {
|
width: 104px;
|
height: 104px;
|
margin: 5px;
|
position: relative;
|
}
|
.image-box > img {
|
width: 100%;
|
height: 100%;
|
}
|
.clear {
|
position: absolute;
|
right: 0;
|
top: 0;
|
cursor: pointer;
|
width: 28px !important;
|
height: 28px !important;
|
}
|
</style>
|
