/* eslint-disable consistent-return */
<template>
<div>
<div class="projectMask"></div>
<div class="project">
<div class="mask"></div>
<i class="el-icon-close" @click="hideForm"></i>
<div class="aside">
<p class="title">编辑项目信息</p>
<el-form :model="projectForm" label-width="0" :rules="rules" ref="form">
<el-form-item prop="name">
<p class="form-title">项目名称：</p>
<el-input class="form-ipt" v-model="projectForm.name" placeholder="输入项目名称" ></el-input>
</el-form-item>
<el-form-item prop="childName">
<p class="form-title">子项目名称：</p>
<el-input class="form-ipt" v-model="projectForm.childName" placeholder="输入子项目名称" ></el-input>
</el-form-item>
<el-form-item class="address" prop="addrArr">
<p class="form-title">项目地点：</p>
<el-select v-model="projectForm.addrArr.province" placeholder="省/直辖市">
<el-option
@click.native="provinceClick(index)"
v-for="(item,index) in addressData"
:key="item.code"
:label="item.name"
:value="+item.code">
</el-option>
</el-select>
<el-select v-model="projectForm.addrArr.city" placeholder="地级市">
<el-option
@click.native="cityClick(index)"
v-for="(item,index) in cityData"
:key="item.code"
:label="item.name"
:value="+item.code">
</el-option>
</el-select>
<el-select v-model="projectForm.addrArr.area" placeholder="县级市">
<el-option
v-for="item in areaData"
:key="item.code"
:label="item.name"
:value="+item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="ruleId">
<p class="form-title">评分规则：</p>
<el-select v-model="projectForm.ruleId" placeholder="评分规则">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<p class="form-title">设计单位：</p>
<el-input maxlength="20" class="form-ipt" v-model="projectForm.designCompany" placeholder="输入设计单位"></el-input>
</el-form-item>
<el-form-item>
<p class="form-title">建设单位：</p>
<el-input maxlength="20" class="form-ipt" v-model="projectForm.buildCompany" placeholder="输入建设单位"></el-input>
</el-form-item>
<div class="btn">
<el-button @click="hideForm">取消</el-button>
<el-button class="com" @click="handleSave">保存</el-button>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'editProjectInfo',
},
data() {
let checkAddress = (rule, value, callback) => {
console.log(this.projectForm.addrArr.city);
if (this.projectForm.addrArr.city && String(this.projectForm.addrArr.city).length === 4) {
return false;
}
callback(new Error('请选择项目地点'));
};
return {
provinceIndex: null,
cityIndex: null,
areaIndex: null,
addressData: [],
cityData: [],
areaData: [],
options: [
{
name: '深圳市装配式建筑评分规则',
id: '1212',
},
],
projectForm: {
name: null,
childName: null,
ruleId: '',
address: '',
designCompany: null,
buildCompany: null,
addrArr: {
province: 44,
city: 4403,
area: 440305,
},
},
rules: {
name: [
{ required: true, message: '请输入项目名称', trigger: 'blur' },
{ min: 1, max: 20, message: '字符长度1~20', trigger: 'blur' },
],
childName: [
{ required: true, message: '请输入子项目名称', trigger: 'blur' },
{ min: 1, max: 20, message: '字符长度1~20', trigger: 'blur' },
],
ruleId: [
{ required: true, message: '请选择评分规则', trigger: 'change' },
{ min: 4, max: 4, message: '请选择评分规则', trigger: 'change' },
],
addrArr: [
{ validator: checkAddress, trigger: 'blur' },
],
},
formObj: {}, // 父组件传递过来的当前编辑项目对象
};
},
computed: {
formIsChange() {
const oldForm = JSON.stringify(this.formObj);
const newForm = JSON.stringify(this.projectForm);
if (oldForm === newForm) {
return false;
}
return true;
},
},
created() {
this.init();
},
methods: {
provinceClick(index) {
if (this.provinceIndex === index) {
return;
}
this.projectForm.addrArr.city = null;
this.provinceIndex = index;
this.cityData = [];
this.cityIndex = null;
this.projectForm.addrArr.area = null;
this.cityData = this.addressData[index].children;
this.areaData = [];
this.areaIndex = null;
},
cityClick(index) {
if (this.cityIndex === index) {
return;
}
this.cityIndex = index;
this.projectForm.addrArr.area = null;
this.areaData = this.cityData[index].children;
this.areaIndex = null;
},
init() {
this.$http.get('/static/js/pcas-code.json').then((response) => {
this.addressData = response.body;
if (this.projectForm.addrArr.province) {
for (let i = 0; i < this.addressData.length; i += 1) {
if (this.addressData[i].code == this.projectForm.addrArr.province) {
this.cityData = this.addressData[i].children;
this.provinceIndex = i;
}
}
}
if (this.cityData && this.projectForm.addrArr.city) {
for (let i = 0; i < this.cityData.length; i += 1) {
if (this.cityData[i].code == this.projectForm.addrArr.city) {
this.areaData = this.cityData[i].children;
this.cityIndex = i;
}
}
}
if (this.areaData && this.projectForm.addrArr.area) {
for (let i = 0; i < this.areaData.length; i += 1) {
if (this.areaData[i].code == this.projectForm.addrArr.area) {
this.areaIndex = i;
}
}
}
});
},
hideForm() {
this.initialization();
this.closeBullet();
},
// 值初始化
initialization() {
this.projectForm = {
name: null,
childName: null,
ruleId: '',
address: '',
designCompany: null,
buildCompany: null,
addrArr: {
province: null,
city: null,
area: null,
},
};
},
closeBullet() {
this.$parent.isShow = false;
},
// 新增项目
async addProject() {
},
// 编辑项目
async editProject() {
},
handleSave() {
this.$refs.form.validate((valid) => {
if (valid) {
this.editProject();
// 关闭弹框
this.closeBullet();
}
});
},
},
};
</script>
<style lang="scss" scoped>
@import '../../.././../../mixinCss/mixin';
.projectMask{
position: fixed;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.05);
}
.project{
378px;
height: 405px;
background: #ffffff;
position: fixed;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
border-radius: 4px;
.el-icon-close{
position: absolute;
top: 12px;
right: 12px;
color: $wordColor;
cursor: pointer;
font-size: 16px;
}
.aside{
100%;
background: #ffffff;
border-radius: 4px;
font-family: $fontFamily;
font-weight: 400;
.title{
height: 40px;
line-height: 40px;
color: $titleColor;
font-size: 16px;
background-color: #EFEFEF;
text-align: left;
padding-left: 12px;
}
.el-form{
padding: 12px 12px 0;
border-radius: 4px;
>>> .el-form-item__content{
line-height: 28px;
display: flex;
}
>>> .el-form-item{
display: flex;
align-items: center;
}
>>> .el-input{
270px;
height: 32px;
}
.address >>> .el-input{
89px;
height: 32px;
font-size: 12px;
margin-right: 2px;
}
>>> .el-input__inner{
height: 32px;
padding-left: 10px;
border-color: #f2f2f2;
color: #888888;
font-size: 12px;
}
>>> .el-input__inner:focus{
border-color: $borderColor;
}
>>> .el-form-item__error{
left: 84px;
padding-top: 4px;
}
>>> .el-input__prefix{
display: none;
}
.form-title{
font-size: 14px;
color: #666666;
84px;
text-align: right;
>span{
color: red;
}
}
.btn{
margin-top: -10px;
box-sizing: border-box;
>>> .el-button{
64px;
height: 28px;
padding: 0px;
border-color: #f2f2f2;
color: #888888;
background: #ffffff;
font-size: 12px;
}
.com{
background: $wordActive;
color: #ffffff;
}
}
}
}
}
</style>