提交 70070ec3 编写于 作者: kai.wang's avatar kai.wang

表单绑定

上级 441fbe18
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix=":" class="basic-form"> <el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix=":" class="basic-form">
<el-form-item label="圈子名称" prop="projectName"> <el-form-item label="圈子名称" prop="projectName">
<el-col :span="13"> <el-col :span="13">
<el-input size="small" v-model="formData.projectName" placeholder="请输入圈子名称" style="width:70%;"></el-input> <el-input size="small" v-model="formData.projectName" placeholder="请输入圈子名称" style="width:70%;" @change="returnTypeData('projectName')"></el-input>
<span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span> <span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
</el-col> </el-col>
</el-form-item> </el-form-item>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
<div class="basic-item-icon"> <div class="basic-item-icon">
<el-form-item label="圈子封面" class="required-label"> <el-form-item label="圈子封面" class="required-label">
<el-upload v-model="formData.imgUrl2" class="bg-uploader" action="#" :show-file-list="false" <el-upload v-model="formData.imgUrl2" class="bg-uploader" @change="returnTypeData('imgUrl2')" action="#" :show-file-list="false"
:before-upload="beforeUploadPic2"> :before-upload="beforeUploadPic2">
<img v-if="formData.imgUrl2" :src="formData.imgUrl2" @mouseover.stop="imgMouseOver2=true" class="bg-img" /> <img v-if="formData.imgUrl2" :src="formData.imgUrl2" @mouseover.stop="imgMouseOver2=true" class="bg-img" />
<img v-if="!formData.imgUrl2" class="bg-img" src="../../assets/image/small.png" /> <img v-if="!formData.imgUrl2" class="bg-img" src="../../assets/image/small.png" />
...@@ -46,12 +46,14 @@ ...@@ -46,12 +46,14 @@
</div> </div>
<el-form-item label="圈子介绍" prop="introduce"> <el-form-item label="圈子介绍" prop="introduce">
<el-col :span="13"> <el-col :span="13">
<el-input size="small" v-model="formData.introduce" placeholder="请输入圈子介绍" @change="returnTypeData('introduce')" style="width:70%;"></el-input> <el-input size="small" v-model="formData.introduce" placeholder="请输入圈子介绍" @change="returnTypeData('introduce')"
style="width:70%;"></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span> <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="内容发布权限" prop="contentRole"> <el-form-item label="内容发布权限" prop="contentRole">
<el-select v-model="formData.contentRole" @change="returnTypeData('contentRole')" placeholder="请选择发布权限" size="small" clearable> <el-select v-model="formData.contentRole" @change="returnTypeData('contentRole')" placeholder="请选择发布权限"
size="small" clearable>
<el-option v-for="item in contentList" :key="item.value" :label="item.label" :value="item.label"> <el-option v-for="item in contentList" :key="item.value" :label="item.label" :value="item.label">
</el-option> </el-option>
</el-select> </el-select>
...@@ -130,8 +132,9 @@ ...@@ -130,8 +132,9 @@
name: name, name: name,
val: this.formData[name] val: this.formData[name]
})} })
, }
,
//上传圈子头像 //上传圈子头像
beforeUploadPic1(file) { beforeUploadPic1(file) {
let fileLimit = { let fileLimit = {
...@@ -215,86 +218,86 @@ ...@@ -215,86 +218,86 @@
</script> </script>
<style lang="less"> <style lang="less">
.first-step { .first-step {
margin-top: 20px; margin-top: 20px;
.p-title {
padding-left: 10px;
margin-bottom: 15px;
}
.basic-item-icon { .p-title {
position: relative; padding-left: 10px;
margin-bottom: 15px;
}
.require { .basic-item-icon {
position: absolute; position: relative;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message { .require {
position: absolute; position: absolute;
left: 160px; left: 67px;
top: 105px; top: 11px;
font-size: 12px; color: #f56c6c;
color: #f56c6c; }
}
.img-delete { .upload-message {
position: absolute; position: absolute;
left: 0px; left: 160px;
top: 0px; top: 105px;
width: 84px; font-size: 12px;
height: 100px; color: #f56c6c;
background: #000; }
opacity: 0.7;
z-index: 999;
i { .img-delete {
color: #fff; position: absolute;
margin-top: 39px; left: 0px;
margin-left: 0px; top: 0px;
} width: 84px;
} height: 100px;
} background: #000;
opacity: 0.7;
z-index: 999;
.word-num { i {
font-size: 12px; color: #fff;
color: #999; margin-top: 39px;
padding-top: 5px; margin-left: 0px;
} }
}
}
.line { .word-num {
margin-left: 10px; font-size: 12px;
width: 20px; color: #999;
} padding-top: 5px;
}
.bg-uploader { .line {
.bg-img { margin-left: 10px;
float: left; width: 20px;
width: 84px; }
height: 100px;
}
.limit-text { .bg-uploader {
float: left; .bg-img {
margin-left: 10px; float: left;
margin-top: -10px; width: 84px;
height: 100px;
}
p { .limit-text {
font-size: 12px; float: left;
color: #999; margin-left: 10px;
} margin-top: -10px;
}
}
.el-upload__tip { p {
position: absolute; font-size: 12px;
top: -6px; color: #999;
left: 130px;
} }
} }
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
.required-label .el-form-item__label::before { .required-label .el-form-item__label::before {
content: '*'; content: '*';
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<el-row class="step-content"> <el-row class="step-content">
<el-col :span="14"> <el-col :span="14">
<el-steps :active="active" simple class> <el-steps :active="active" simple class>
<span class="step-num" :class="{ 'on-step': stepData[0] }">1</span> <span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>
<el-step title="基础信息"></el-step> <el-step title="基础信息"></el-step>
<span class="step-num" :class="{ 'on-step': stepData[1] }">2</span> <span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
<el-step title="选择成员">2</el-step> <el-step title="选择成员">2</el-step>
</el-steps> </el-steps>
</el-col> </el-col>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
curmbSecond: '新建小圈', curmbSecond: '新建小圈',
active: 0, active: 0,
//页面展示位置 //页面展示位置
stepData: [true, false, false], stepData: [true, false],
showStorage: true, showStorage: true,
formData: { formData: {
projectName: '', projectName: '',
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
console.log("add"); console.log("add");
} else { } else {
console.log("edit"); console.log("edit");
this.stepData = [false, true, false];
} }
}, },
...@@ -81,6 +82,7 @@ ...@@ -81,6 +82,7 @@
console.log("add"); console.log("add");
} else { } else {
console.log("edit"); console.log("edit");
this.stepData = [false, true];
} }
}, },
//完成 //完成
......
...@@ -153,13 +153,16 @@ export default { ...@@ -153,13 +153,16 @@ export default {
}, },
//编辑 //编辑
editRange(row) { editRange(row) {
let enterType = 2;//1:add 2 edit // let enterType = 2;//1:add 2 edit
// this.$router.push({
// path: `/create-range?enterType`,
// query:{
// id:row.id,
// enterType:enterType
// }
// })
this.$router.push({ this.$router.push({
path: `/create-range?enterType`, path:'/edit-range'
query:{
id:row.id,
enterType:enterType
}
}) })
}, },
//解散圈子 //解散圈子
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册