5.21

parent eda101e2
......@@ -67,7 +67,6 @@
look:{
content:'',
},
play:{
type:false,
audio:[],
......
<template>
<div class='tinymce'>
<editor id='tinymce' v-model='lookData.content' :init='init'></editor>
<div>
<div class="imgInter" @click="showDialog()">插入图片</div>
</div>
<el-dialog
title="插入图片"
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="图片">
<el-upload
action="/api/public/upload"
:http-request="uploadFile"
:on-remove="removeFile"
:before-upload="beforeAvatarUploadImg"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="form.imgList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传png或jpg文件</div>
</el-upload>
</el-form-item>
<el-form-item label="铺满">
<el-switch
v-model="form.big">
</el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch
v-model="form.center">
</el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="imgInter">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/media'
import {uploadFileApi} from "../../service/api";
export default {
name: 'tinymce',
props:[
'lookData'
],
data () {
return {
radio:[],
imageType:false,
form:{
imgList:[],
big:false,
weight:'',
center:true
},
show:'',
dialogVisible:false,
init: {
toolbar:'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | ',
language_url: '/static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray',
height: 500,
plugins: 'preview textpattern colorpicker lists code colorpicker fullpage textcolor wordcount contextmenu media',
branding: false,
}
}
},
activated(){
this.show = true
},
deactivated(){
},
mounted () {
},
methods:{
beforeAvatarUploadImg(file){
const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' );
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
}
return isJPG;
},
imgInter(){
if(this.form.imgList.length < 1){
this.$message({
type: 'error',
message: '请选择图片'
});
return false
}
let ImageStyle = '';
if(this.form.big){
ImageStyle += 'width:100%;'
}else{
ImageStyle += 'width:70%'
}
if(this.form.center){
ImageStyle = 'display:block;margin:auto'
}
let str= `<img src="${this.form.imgList[0].url}" style="${ImageStyle}"/>`;
tinymce.activeEditor.insertContent(str);
this.dialogVisible = false
},
uploadFile(a){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.form.imgList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
})
},
showDialog(){
this.dialogVisible = true;
this.form={
imgList:[],
big:false,
weight:'',
center:true
}
},
insertContent(content) {
if (!content) {//如果插入的内容为空则返回
return;
}
let sel = null;
if (document.selection) {//IE9以下
sel = document.selection;
sel.createRange().pasteHTML(content);
} else {
sel = document.getElementById('tinymce_ifr').contentWindow.getSelection();
if (sel.rangeCount > 0) {
let range = sel.getRangeAt(0); //获取选择范围
range.deleteContents(); //删除选中的内容
let el = document.createElement("div"); //创建一个空的div外壳
el.innerHTML = content; //设置div内容为我们想要插入的内容。
let frag = document.createDocumentFragment();//创建一个空白的文档片段,便于之后插入dom树
let node = el.firstChild;
let lastNode = frag.appendChild(node);
range.insertNode(frag); //设置选择范围的内容为插入的内容
let contentRange = range.cloneRange(); //克隆选区
contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
contentRange.collapse(true); //移动光标位置到末尾
sel.removeAllRanges(); //移出所有选区
sel.addRange(contentRange); //添加修改后的选区
}
}
},
removeFile(){},
handleExceed(){}
},
created:function(){
setTimeout(function(){
tinymce.init({})
},1000)
},
components: {Editor}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.tinymce{
position: relative;
.clear-both;
.imgInter{
position: absolute;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 330px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
line-height: 1.4;
margin: 0 5px;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
}
}
}
</style>
<template>
<div>
<el-row type="flex" class="add-btn" justify="end">
<el-col :span="4" style="text-align: right;">
<el-button type="success" plain @click="postModularInit" v-if="!$store.state.readonly">新建模块</el-button>
</el-col>
<el-col :span="4" style="text-align: right;">
<el-button type="success" plain @click="postModularContentInit" v-if="!$store.state.readonly">新建模块内容</el-button>
</el-col>
</el-row>
<el-tabs v-model="questionListParams.type" type="card" @tab-click="handleClick">
<el-tab-pane label="话术" name="1"></el-tab-pane>
<el-tab-pane label="流程" name="2"></el-tab-pane>
</el-tabs>
<el-collapse v-model="activeNames" @change="handleChange" accordion>
<el-collapse-item v-for="(item,index) in modularList" :title="item.title" :name="item.id">
<el-table
:data="modularContent"
style="width: 100%">
<el-table-column
label="创建时间"
prop="created_at">
</el-table-column>
<!-- <el-table-column
label="id"
prop="id">
</el-table-column> -->
<el-table-column
prop="keywords"
label="关键字">
</el-table-column>
<el-table-column
prop="title"
label="关键字">
</el-table-column>
<el-table-column
width="250"
v-if="!$store.state.readonly"
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="warning" @click="editContent(scope.row)">
编辑查看
</el-button>
<el-button size="mini" plain type="danger" @click="del(scope.row)" v-if="$store.state.deletePermission">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
<!-- <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getList"/> -->
<page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
<!-- 新建模块 -->
<el-dialog
:title="modularTitle"
center
append-to-body
:visible.sync="postModularDialog"
width="800px">
<el-form ref="form" :model="postModularParams" :rules="rules" >
<el-row>
<el-col :span="8">
<el-form-item label="类型" label-width="80px" required="">
<el-select v-model="postModularParams.type" placeholder="请选择">
<el-option v-for="data in typeArr" :key="data.value" :label="data.label"
:value="data.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="标题" label-width="80px" required="">
<el-input v-model="postModularParams.title"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer" v-if="type !== 1">
<el-button @click="postModularDialog = false">取 消</el-button>
<el-button type="primary" @click="postModularFn">确 定</el-button>
</span>
</el-dialog>
<!-- 新建模块内容 -->
<el-dialog
:title="modularContentTitle"
center
ref="ruleForm"
append-to-body
:visible.sync="postModularContentDialog"
width="800px">
<el-form ref="form" :model="postModularParams" >
<el-row>
<el-col :span="8">
<el-form-item label="类型" label-width="80px" prop='type' required="请选择类型!">
<el-select v-model="postModularParams.type" @change="typeChange" placeholder="请选择">
<el-option v-for="data in typeArr" :key="data.value" :label="data.label"
:value="data.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="标题" label-width="80px" prop='title' required="请输入标题!">
<el-input v-model="postModularParams.title"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="selectModular.length">
<el-col :span="8">
<el-form-item label="模块" label-width="80px" prop='pid' required="请选择模块">
<el-select v-model="postModularParams.pid" @change="typeChange" placeholder="请选择">
<el-option v-for="data in selectModular" :key="data.id" :label="data.title"
:value="data.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="关键词" label-width="80px" prop='keywords' required="请输入关键词">
<el-input v-model="postModularParams.keywords"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- <el-col :span="3">
内容
</el-col> -->
<el-col :span="24">
<el-form-item label="商品详情" label-width="80px" required="">
<!-- <el-input type="textarea" :rows="25" v-model="form.desc.detail"></el-input> -->
<editor-detail :lookData="postModularParams" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer" v-if="type !== 1">
<el-button @click="postModularContentDialog = false">取 消</el-button>
<el-button type="primary" @click="postModularContentFn('ruleForm')">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑模块内容 -->
<el-dialog
title="编辑内容"
center
append-to-body
:visible.sync="editModularContentDialog"
width="800px">
<el-form ref="form" :model="postModularParams" :rules="rules" >
<el-row>
<el-col :span="8">
<el-form-item label="标题" label-width="80px" required="">
<el-input v-model="postModularParams.title"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="关键词" label-width="80px" prop='keywords' required="请输入关键词">
<el-input v-model="postModularParams.keywords"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="商品详情" label-width="80px" required="">
<!-- <el-input type="textarea" :rows="25" v-model="form.desc.detail"></el-input> -->
<editor-detail :lookData="postModularParams" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer" v-if="type !== 1">
<el-button @click="editModularContentDialog = false">取 消</el-button>
<el-button type="primary" @click="editContentFn">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
// import dialogCom from './autoReplyDialog'
import {getQuestionModularListApi,getQuestionModularDetailApi,updateQuestionModularDetailApi,deleteQuestionModularDetailApi,putQuestionModularDetailApi,postQuestionModularApi} from "../../service/api";
import page from '../framework/page'
import editorDetail from "./editorDetail"
export default {
name: "index",
data() {
return {
total:0,
nowPage:1,
limit: 10,
dialogObj:{
value:'',
desc:'',
show:false,
id:''
},
activeName: 'keywords_reply',
modularList: [],
modularContent:[],
selectModular:[],
questionListParams:{
type:'1',
pid:""
},
postModularParams:{
type:'',
title:'',
pid:'',
keywords:'',
content:''
},
postModularDialog:false,
modularTitle:'新建模块',
postModularContentDialog:false,
editModularContentDialog:false,
modularContentTitle:'新建话术内容',
typeArr:[
{value:'1',label:'话术类型'},
{value:'2',label:'流程类型'},
]
}
},
components:{
editorDetail,
page
},
mounted(){
this.getList()
},
filters: {
type(value){
if (value === 'text') {
return '文本'
} else if (value === 'voice') {
return '语音'
} else if (value === 'video') {
return '视频'
} else if (value === 'image') {
return '图片'
} else if (value === 'news') {
return '图文'
} else if (value === 'link') {
return '链接'
} else if (value === 'news-item') {
return '图文链接'
} else {
return value
}
}
},
methods: {
handleChange(val){
this.modularContent = []
console.log(val)
let json={
type:this.questionListParams.type,
};
if(val){
json.pid=val
}
getQuestionModularListApi(json.type,json).then(res => {
this.modularContent = res.list;
console.log(res)
// debugger
// this.total = res.total;
})
},
typeChange(){
let json={
type:this.postModularParams.type,
};
getQuestionModularListApi(json.type,json).then(res => {
this.selectModular = res.list;
})
},
postModularContentInit(){
this.postModularParams={
type:'',
title:'',
pid:'',
keywords:'',
content:''
}
this.postModularContentDialog = true
},
postModularContentFn(){
console.log(this.postModularParams)
let json={}
if(!this.postModularParams.type){
this.$message({
message: '请选择类型!'
});
return
}
if(!this.postModularParams.title){
this.$message({
message: '请输入标题!'
});
return
}
if(!this.postModularParams.pid){
this.$message({
message: '请选择模块!'
});
return
}
if(!this.postModularParams.keywords){
this.$message({
message: '请输入关键词!'
});
return
}
if(!this.postModularParams.content){
this.$message({
message: '请填写内容!'
});
return
}
json = Object.assign({},this.postModularParams)
postQuestionModularApi(json).then(res =>{
console.log(res)
this.getList()
this.$message({
type: 'success',
message: '提交成功!'
});
this.postModularContentDialog = false
})
},
postModularInit(){
this.postModularDialog = true
this.postModularParams.type=''
this.postModularParams.title=''
},
postModularFn(){
let json={}
if(!this.postModularParams.type){
this.$message({
message: '请选择类型!'
});
return
}
if(!this.postModularParams.title){
this.$message({
message: '请填写标题!'
});
return
}
json.type = this.postModularParams.type
json.title = this.postModularParams.title
postQuestionModularApi(json).then(res =>{
console.log(res)
this.getList()
this.$message({
type: 'success',
message: '提交成功!'
});
this.postModularDialog = false
})
},
editContent(data){
// this.postModularParams = {}
let that = this
// getQuestionModularDetailApi(data.id).then(res =>{
// this.postModularParams = Object.assign({},res)
// console.log(this.postModularParams)
// setTimeout(function(){
// that.editModularContentDialog = true
// },300)
// // this.editModularContentDialog = true
// // console.log(postModularParams)
// })
this.editModularContentDialog = true
},
editContentFn(){
let json = Object.assign({},this.postModularParams)
console.log(json)
updateQuestionModularDetailApi(json.id,json).then(res =>{
console.log(res)
this.$message({
type: 'success',
message: '更新成功!'
});
this.getList()
})
},
onPageChange(val){
this.nowPage = val;
this.getList();
},
onSizeChange(val){
this.nowPage = 1;
this.limit = val;
this.getList();
},
// 将匹配结果替换表情图片
emotion (res) {
let word = res.replace(/\//gi,'')
const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
let index = list.indexOf(word)
return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
},
changeShow(data){
this.dialogObj.show=data
},
getList(){
let json={
type:this.questionListParams.type,
};
if(this.questionListParams.pid){
json.pid=this.questionListParams.pid
}
getQuestionModularListApi(json.type,json).then(res => {
this.modularList = res.list;
console.log(this.modularList)
// debugger
this.total = res.total;
})
},
add(){
this.dialogObj.id = '';
this.dialogObj.value = '';
this.dialogObj.desc = '';
this.dialogObj.key = this.activeName;
this.dialogObj.show = true
},
del(data){
this.$confirm('此操作将删除该记录?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// deleteConfigApi(data.id).then(res=>{
// this.getList()
// this.$message({
// type: 'success',
// message: '删除成功!'
// });
// });
});
},
handleClick(tab) {
console.log(tab)
this.questionListParams.type = tab.name;
this.getList();
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
</style>
......@@ -1049,4 +1049,28 @@ export const postOtherOrderApi = function (json) {
export const postClearOtherOrderApi = function (id) {
return Vue.prototype.$post(`/api/admin/other/order/clear/${id}`)
};
//新建话术/模块
export const postQuestionModularApi = function (json) {
return Vue.prototype.$post(`/api/admin/question/`,json)
};
//话术/模块列表
export const getQuestionModularListApi = function (type,json) {
return Vue.prototype.$fetch(`/api/admin/question/list/${type}`,json)
};
//话术/模块详情
export const getQuestionModularDetailApi = function (question_id) {
return Vue.prototype.$fetch(`/api/admin/question/${question_id}`)
};
//更新话术/模块内容
export const updateQuestionModularDetailApi = function (question_id,json) {
return Vue.prototype.$put(`/api/admin/question/${question_id}`,json)
};
//删除话术/模块
export const deleteQuestionModularDetailApi = function (question_id) {
return Vue.prototype.$delete(`/api/admin/question/${question_id}`)
};
//话术/模块排序
export const putQuestionModularDetailApi = function (json) {
return Vue.prototype.$put(`/api/admin/question/sort/`,json)
};
// /api/admin/other/order/clear/
\ No newline at end of file
......@@ -30,6 +30,7 @@ axios.interceptors.request.use(
if(config.method === 'get' && config.url !== '/api/admin/login'){
config.params = config.params || {};
let json = JSON.parse(JSON.stringify(config.params));
console.log(json)
for(let k in json)
{
let reg = /^[0-9]+$/u;
......@@ -49,6 +50,7 @@ axios.interceptors.request.use(
if(process.env.NODE_ENV === 'development' ){
config.params.special_token="changchangenglish";
}
console.log(json)
config.params.param_token = md5(JSON.stringify(json));
}else if(config.url !== '/api/admin/login'){
config.data = config.data || {};
......
......@@ -141,6 +141,16 @@ export default [{
name: 'achievement',
component: e => require(['@/components/achievement'], e),
}
},{
value: '话术列表',
routerName: 'talkingSkill',
path: '/talkingSkill',
cover: '11-6',
router: {
path: '/talkingSkill',
name: 'talkingSkill',
component: e => require(['@/components/talkingSkill'], e),
}
},]
},
{
......
......@@ -170,7 +170,8 @@ export const CLASSSOURCE = {
1:'所有来源随机',
2:'系统订单随机',
3:'渠道1订单随机',
4:'渠道2订单随机'
4:'渠道2订单随机',
5:'渠道3订单随机',
};
export const USERSTATUS = [
{code:0,lable:'待处理'},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment