提交 38d5df16 authored 作者: 王诒正's avatar 王诒正

用户群组

上级 d40d8151
import httpRequest from '@/utils/axios'
// 特征模板列表
export function characteristicsTemplateList(params = {}) {
return httpRequest.get('/api/opera/v1/oprations/characteristics-templates', { params })
}
// 创建用户群特征模板
export function characteristicsTemplateCreate(data) {
var headers = {
'Content-Type': 'application/json'
}
return httpRequest.post('/api/opera/v1/oprations/characteristics-template', data, { headers })
}
// 特征模板详情
export function characteristicsTemplateInfo(id, params) {
return httpRequest.get(`/api/opera/v1/oprations/${id}/characteristics-template`, { params })
}
// 更新特征模板
export function characteristicsTemplateUpdate(id, data) {
return httpRequest.get(`/api/opera/v1/oprations/${id}/characteristics-template`, data)
}
// 删除特征模板
export function characteristicsTemplateDelete(id) {
return httpRequest.delete(`/api/opera/v1/oprations/${id}/characteristics-template`)
}
<template> <template>
<div> <div>
<div> <div>
<el-card class="box-card"> <el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ name: 'case-list', params: { level: this.$route.params.caseInfo.level.toString() } }">案例背景</el-breadcrumb-item> <el-breadcrumb-item :to="{ name: 'case-list', params: { level: this.$route.params.caseInfo.level.toString() } }">案例背景</el-breadcrumb-item>
<el-breadcrumb-item :to="{ name: 'group-list', params: this.$route.params.caseInfo }">用户群</el-breadcrumb-item> <el-breadcrumb-item :to="{ name: 'group-list', params: this.$route.params.caseInfo }">用户群</el-breadcrumb-item>
<el-breadcrumb-item>添加用户群</el-breadcrumb-item> <el-breadcrumb-item>添加用户群</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</el-card> </el-card>
</div> </div>
<div> <div>
<el-card class="box-card"> <el-card class="box-card">
<el-form size="mini" :model="groupForm" :rules="groupRules" ref="groupForm" label-width="130px" class="ruleForm"> <span>当前案例: {{ this.$route.params.caseInfo.name }}</span>
<el-form-item label="用户群名称" prop="name"> </el-card>
<el-input v-model="groupForm.name"></el-input> <el-card class="box-card">
</el-form-item> <div slot="header" class="clearfix">
</el-form> <span>创建用户群</span>
<el-form-item label="用户群图片" prop="poster_url"> </div>
<el-upload <div>
action="/api/opera/v1/file/upload" <el-form size="mini" :model="groupForm" :rules="groupRules"
list-type="picture-card" ref="groupForm" label-width="130px" class="groupForm">
name="file" <el-form-item label="用户群名称" prop="name">
:limit="1" <el-input v-model="groupForm.name"></el-input>
:multiple="false" </el-form-item>
:on-preview="handlePictureCardPreview" <el-form-item label="用户群图片" prop="poster_url">
:on-remove="handleRemove" <el-upload
:on-success="uploadSuccess" action="/api/opera/v1/file/upload"
:on-error="uploadError" list-type="picture-card"
:data="{ type: 'image' }" name="file"
> :limit="1"
<i class="el-icon-plus"></i> :multiple="false"
</el-upload> :on-preview="handlePictureCardPreview"
<el-dialog :visible.sync="visible"> :on-remove="handleRemove"
<el-input :v-model="ruleForm.poster_url"> :on-success="uploadSuccess"
<img width="100%" v-if="ruleForm.poster_url" :src="ruleForm.poster_url" alt=""> :on-error="uploadError"
</el-input> :data="{ type: 'image' }"
</el-dialog> >
</el-form-item> <i class="el-icon-plus"></i>
</el-card> </el-upload>
</div> <el-dialog :visible.sync="visible">
<el-input :v-model="groupForm.poster_url">
<img width="100%" v-if="groupForm.poster_url" :src="groupForm.poster_url" alt="">
</el-input>
</el-dialog>
</el-form-item>
<el-form-item :hidden="groupHidden">
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="box-card" :hidden="characteristicsHidden">
<div slot="header" class="clearfix">
<span>创建用户群特征</span>
</div>
<div>
<el-button size="mini" type="success" @click="dialogFormVisible = true">添加</el-button>
</div>
</el-card>
</div>
<div>
<el-dialog title="添加用户群特征" :visible.sync="dialogFormVisible">
<el-form size="mini" :model="form" ref="form" :rules="characteristicsRules" label-width="80px">
<el-form-item label="特征名称" prop="name">
<el-select v-model="form.value" placeholder="请选择" @change="selectOneCharacteristic">
<el-option
v-for="(item, index) in characteristicTemplateList"
:key="index"
:label="item.name"
:value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="特征选项" prop="options" :hidden="optionsHidden">
<el-radio v-for="(item, index) in form.context" :key="index" v-model="form.options" :label="item.options">{{ item.options + '、' + item.options_info}}</el-radio><br/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveCharacteristic">保 存</el-button>
</div>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as templateApi from '@/api/characteristics-template'
import * as groupApi from '@/api/cgroups'
export default { export default {
name: 'add', name: 'add',
mounted() {
this.groupForm.case_id = this.$route.params.caseInfo.id
// 先获取特征模板别表
templateApi.characteristicsTemplateList().then(res => {
if (res.code === 0) {
this.characteristicTemplateList = res.data
console.log(this.characteristicTemplateList)
} else {
this.$message.error(res.message)
}
}).catch(error => {
console.log(error)
})
},
data () { data () {
return { return {
visible: false, visible: false,
dialogFormVisible: false,
characteristicTemplateList: [],
characteristicsHidden: false,
optionsHidden: true,
groupHidden: false,
selectId: '',
group: {},
groupForm: { groupForm: {
name: '' case_id: '',
name: '',
poster_url: '',
desc: ''
},
groupRules: {},
form: {
value: '',
name: '',
options: '',
context: '',
template_id: ''
}, },
groupRules: {} characteristicsRules: {
value: [
{ required: true, message: '请选择特征名称', trigger: 'blur' }
],
options: [
{ required: true, message: '请勾选特征选项', trigger: 'blur' }
]
}
} }
}, },
methods: { methods: {
...@@ -60,7 +145,7 @@ export default { ...@@ -60,7 +145,7 @@ export default {
console.log(file, fileList) console.log(file, fileList)
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.ruleForm.poster_url = file.url this.groupForm.poster_url = file.url
this.visible = true this.visible = true
}, },
uploadSuccess(response, file, fileList) { uploadSuccess(response, file, fileList) {
...@@ -80,11 +165,86 @@ export default { ...@@ -80,11 +165,86 @@ export default {
console.log('文件上传失败') console.log('文件上传失败')
console.log(err) console.log(err)
this.$message.error('文件上传失败') this.$message.error('文件上传失败')
},
onSubmit() {
groupApi.groupAdd(this.groupForm).then(res => {
if (res.code === 0) {
this.group = res.data
this.$message.success('创建用户群成功')
this.groupHidden = true
return true
} else {
this.$message.error(res.message)
return false
}
}).catch(error => {
console.log(error)
this.$message.error(error)
return false
})
},
// 保存特征
saveCharacteristic() {
if (!this.group || !this.group.id || this.group.id === undefined) {
this.$message.error('请创建用户群或刷新后重试')
return false
}
var addData = {}
console.log('group', this.group)
addData.cgroup_id = this.group.id
addData.name = this.form.name
addData.template_id = this.form.template_id
var contextInfo = this.form.context
var addDataContext = []
for (var index in contextInfo) {
console.log(1232, contextInfo[index].options)
var addOptions = contextInfo[index].options
var addOptionsinfo = contextInfo[index].options_info
var answer = 0
if ((this.form.context[index]).options === (this.form.options)) {
answer = 1
}
addDataContext[index] = {
options: addOptions,
options_info: addOptionsinfo,
answer: answer
}
}
addData.context = addDataContext
var sendData = [addData]
console.log(addData)
templateApi.characteristicsTemplateCreate({ data: sendData }).then(res => {
if (res.code === 0) {
this.$message.success('创建成功')
return true
} else {
this.$message.error(res.message)
return false
}
}).catch(error => {
console.log(error)
this.$message.error('创建失败')
return false
})
},
selectOneCharacteristic(option) {
console.log(option)
var context = option.context
if (context) {
this.optionsHidden = false
this.form.template_id = option.id
this.form.name = option.name
this.form.context = JSON.parse(context)
console.log(this.form.context)
} else {
this.form.context = []
}
} }
} }
} }
</script> </script>
<style scoped> <style>
</style> </style>
...@@ -55,19 +55,23 @@ ...@@ -55,19 +55,23 @@
<div v-if="scope.row.characteristics.length === 0"><span>无用户群相关特征...</span></div> <div v-if="scope.row.characteristics.length === 0"><span>无用户群相关特征...</span></div>
<div v-else> <div v-else>
<el-button type="text" @click="dialogVisible = true">点击查看用户群特征</el-button> <el-button type="text" @click="dialogVisible = true">点击查看用户群特征</el-button>
<el-dialog :title="scope.row.name" :visible.sync="dialogVisible" :modal="false"> <div class="dialog-box" v-if="dialogVisible">
<i v-for="characteristic in scope.row.characteristics"> <el-dialog :title="scope.row.name" :visible.sync="dialogVisible" :modal="false">
<div v-if="characteristic.context"> <div class="scroll-content">
{{ characteristic.name + ':'}} <i v-for="(characteristic, index) in scope.row.characteristics" :key="index">
<span v-for="contextInfo in JSON.parse(characteristic.context)"><br/>{{contextInfo.options + '、' + contextInfo.options_info +'. '}}</span> <div v-if="characteristic.context" class="scroll-container">
<br/> {{ characteristic.name + ':'}}
<span v-for="(contextInfo, index) in JSON.parse(characteristic.context)" :key="index"><br/>{{contextInfo.options + '、' + contextInfo.options_info +'. '}}</span>
<br/>
</div>
</i>
</div> </div>
</i> <div slot="footer" class="dialog-footer">
<div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> </div>
</div> </el-dialog>
</el-dialog> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -133,5 +137,26 @@ export default { ...@@ -133,5 +137,26 @@ export default {
</script> </script>
<style> <style>
.dialog-box{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: rgba(0,0,0,.3);
}
.dialog-zindex{
z-index: 9999999;
}
.scroll-container{
width: 100%;
height: 30%;
overflow: auto;
}
.scroll-content{
width: 100%;
height: 30%;
background-color: rgb(248, 212, 224);
}
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论