339 lines
9.7 KiB
Vue
339 lines
9.7 KiB
Vue
<template>
|
|
<div class="page">
|
|
<topBar
|
|
v-if="topList.length > 0"
|
|
:top-list="topList"
|
|
:moren="moren"
|
|
/>
|
|
<div class="main">
|
|
<div class="main_title">
|
|
<div class="bluekuai" />
|
|
<div class="title_word">{{ '基本信息' }}</div>
|
|
</div>
|
|
<div class="main_content">
|
|
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item :label="'活动名称'" prop="name">
|
|
<el-input v-model="form.name" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item :label="'活动说明'" prop="name">
|
|
<editor
|
|
ref="sptwEditor"
|
|
v-model="form.content"
|
|
:min-height="196"
|
|
:upload-url="uploadImgUrl"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item :label="'活动封面'" prop="name">
|
|
<el-upload
|
|
:headers="headers"
|
|
:class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"
|
|
:action="uploadImgUrl"
|
|
:on-success="handlePictureSuccess"
|
|
:on-change="uploadImgChange"
|
|
list-type="picture-card"
|
|
:limit="1"
|
|
:on-remove="handleRemove"
|
|
>
|
|
<i class="el-icon-plus" />
|
|
<div class="sizes">{{ '大小为5M' }}</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item :label="'目标用户群体'" prop="name" style="margin-bottom: 0" />
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="" prop="name" style="margin-bottom: 0">
|
|
<div style="display: flex">
|
|
<el-checkbox
|
|
v-model="checkAll"
|
|
:label="'注册等级'"
|
|
@change="handleCheckAllChangeSales"
|
|
>{{ '注册等级' }}</el-checkbox>
|
|
<el-checkbox-group v-model="bushForm" style="margin-left: 30px" @change="handleCheckedColumnChangeSales">
|
|
<el-checkbox
|
|
v-for="(item,index) in awardsList"
|
|
:key="index"
|
|
:label="item.pkId"
|
|
>{{ item.awardsName }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="" prop="name" style="margin-bottom: 0">
|
|
<div style="display: flex">
|
|
<el-checkbox
|
|
v-model="checkAll1"
|
|
:label="'荣誉奖衔'"
|
|
@change="handleCheckAllChangeSales1"
|
|
>{{ '荣誉奖衔' }}</el-checkbox>
|
|
<el-checkbox-group v-model="bushForm1" style="margin-left: 30px" @change="handleCheckedColumnChangeSales1">
|
|
<el-checkbox
|
|
v-for="item in gradeRangList"
|
|
:key="item.pkId"
|
|
:label="item.pkId"
|
|
>{{ item.gradeName }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item label="" prop="name">
|
|
<div>
|
|
<el-checkbox
|
|
:label="'权限中心'"
|
|
>{{ '权限中心' }}</el-checkbox>
|
|
<el-checkbox
|
|
v-for="item in awardsList"
|
|
:key="item.pkId"
|
|
v-model="item.changed"
|
|
:label="item.pkId"
|
|
>{{ item.awardsName }}</el-checkbox>
|
|
</div>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item :label="'活动时间'" prop="name">
|
|
<el-date-picker
|
|
v-model="form.creatTime"
|
|
type="datetimerange"
|
|
range-separator="——"
|
|
:start-placeholder="'开始日期'"
|
|
:end-placeholder="'结束日期'"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
:unlink-panels="true"
|
|
/>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item :label="'展示时间'" prop="name">
|
|
<el-date-picker
|
|
v-model="form.creatTime"
|
|
type="datetimerange"
|
|
range-separator="——"
|
|
:start-placeholder="'开始日期'"
|
|
:end-placeholder="'结束日期'"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
:unlink-panels="true"
|
|
/>
|
|
</el-form-item>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div style="margin: 0 auto">
|
|
<el-button
|
|
class="thebtn"
|
|
style="background: #ccc;color: #fff"
|
|
@click="cancel"
|
|
> {{ '取消' }}</el-button>
|
|
<el-button
|
|
type="primary"
|
|
class="thebtn"
|
|
style="margin-left: 30px;color: #48B2FD;color: #fff"
|
|
> {{ '确认' }}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Editor from '@/components/Editor'
|
|
import topBar from '@/components/topBar'
|
|
import { getzccsList, saveYfpz } from '@/api/system'
|
|
import { getAwardsListChiose, getgradeRanglist } from '@/api/level'
|
|
import { getToken } from '@/utils/auth'
|
|
export default {
|
|
name: 'Xtcs',
|
|
components: {
|
|
topBar,
|
|
Editor
|
|
},
|
|
data() {
|
|
return {
|
|
checkedKeyLists: [], // key的list数据
|
|
openDiag: false,
|
|
showImg: true, // 默认展示
|
|
noneUploadImg: false, //
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
|
|
headers: {
|
|
Authorization: getToken()
|
|
},
|
|
moren: 'superStudioMessage',
|
|
topList: [
|
|
{
|
|
name: '基本信息',
|
|
path: 'superStudioMessage'
|
|
},
|
|
{
|
|
name: '规则设置',
|
|
path: 'superStudioRule'
|
|
}
|
|
],
|
|
rules: {
|
|
bankCode: [
|
|
{ required: true, message: '请选择活动名称', trigger: 'blur' }
|
|
]
|
|
},
|
|
form: {},
|
|
awardsList: [],
|
|
gradeRangList: [],
|
|
checkAll: false,
|
|
isALL: false, // 全选框是否在勾选状态
|
|
bushForm: [], // 选中的注册等级数据
|
|
checkAll1: false,
|
|
isALL1: false, // 全选框是否在勾选状态
|
|
bushForm1: [] // 选中的荣誉奖衔数据
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// 全选
|
|
handleCheckAllChangeSales1(val) {
|
|
const checkedsItem = val ? this.gradeRangList : []
|
|
if (checkedsItem.length > 0) {
|
|
checkedsItem.forEach((item) => {
|
|
this.bushForm1.push(item.pkId)
|
|
})
|
|
console.error(this.bushForm1)
|
|
} else {
|
|
this.bushForm1 = []
|
|
}
|
|
this.isALL = false
|
|
},
|
|
handleCheckedColumnChangeSales1(value) {
|
|
const checkedCount = value.length
|
|
this.checkAll1 = checkedCount === this.gradeRangList.length
|
|
this.isALL =
|
|
checkedCount > 0 && checkedCount < this.gradeRangList.length
|
|
},
|
|
// 全选
|
|
handleCheckAllChangeSales(val) {
|
|
const checkedsItem = val ? this.awardsList : []
|
|
if (checkedsItem.length > 0) {
|
|
checkedsItem.forEach((item) => {
|
|
this.bushForm.push(item.pkId)
|
|
})
|
|
console.error(this.bushForm)
|
|
} else {
|
|
this.bushForm = []
|
|
}
|
|
this.isALL = false
|
|
},
|
|
handleCheckedColumnChangeSales(value) {
|
|
const checkedCount = value.length
|
|
this.checkAll = checkedCount === this.awardsList.length
|
|
this.isALL =
|
|
checkedCount > 0 && checkedCount < this.awardsList.length
|
|
},
|
|
uploadImgChange(file, fileList) {
|
|
this.noneUploadImg = fileList.length > 0
|
|
this.$refs.form.clearValidate('cover')
|
|
},
|
|
// 图片上传成功后的回调
|
|
handlePictureSuccess(res, file) {
|
|
this.form.cover = res.data.url
|
|
},
|
|
// 图片上传删除
|
|
handleRemove(file, fileList) {
|
|
this.form.cover = ''
|
|
this.noneUploadImg = fileList.length > 0
|
|
},
|
|
cancel() {
|
|
this.$router.push({
|
|
name: 'superStudioGift'
|
|
})
|
|
},
|
|
getData() {
|
|
// 荣誉奖衔下拉选
|
|
getAwardsListChiose().then((res) => {
|
|
this.awardsList = res.rows
|
|
})
|
|
// 注册等级下拉
|
|
getgradeRanglist().then((res) => {
|
|
this.gradeRangList = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-icon-plus{
|
|
color: #4391FD;
|
|
}
|
|
.sizes{
|
|
position: absolute;
|
|
top: 0;
|
|
color: #999;
|
|
font-size: 10px;
|
|
margin:30px 0 0 20px;
|
|
}
|
|
::v-deep .el-upload{
|
|
width: 88px;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
position: relative;
|
|
}
|
|
::v-deep .el-select{
|
|
width: 100%;
|
|
}
|
|
::v-deep .el-textarea__inner{
|
|
height: 84px;
|
|
}
|
|
.page {
|
|
padding: 20px;
|
|
background: #f9f9f9;
|
|
font-size: 14px;
|
|
.main {
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
|
|
.main_title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
.bluekuai {
|
|
width: 5px;
|
|
height: 19px;
|
|
background: #4391fd;
|
|
margin-right: 20px;
|
|
}
|
|
.title_word {
|
|
font-size: 14px;
|
|
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.main_content {
|
|
padding: 20px 25px;
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
.thebtn {
|
|
width: 120px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|