提交 cd1b523a 编写于 作者: huangwensu's avatar huangwensu

群发页面样式

上级 1eab52c4
......@@ -14,6 +14,11 @@ const currentSessionDetail = r => require.ensure([], () => r(require('../views/I
// 我要群发
const chainMessage = r => require.ensure([], () => r(require('../views/IM/chain-message/index.vue')), 'chainMessage')
// 历史群发
const chainHistoryList = r => require.ensure([], () => r(require('../views/IM/chain-history/list.vue')), 'chainHistoryList')
const chainHistoryDetail = r => require.ensure([], () => r(require('../views/IM/chain-history/detail.vue')), 'chainHistoryDetail')
export default [{
path: '/',
component: App,
......@@ -42,6 +47,12 @@ export default [{
}, {
path: '/chain-message',
component: chainMessage
}, {
path: '/chain-history-list',
component: chainHistoryList
}, {
path: '/chain-history-detail',
component: chainHistoryDetail
}
]
......
<template>
<div class="chain-history-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;margin-right:0px;">
<el-form ref="serchForm" inline :model="searchParam" label-width="15px" style="width:100%;text-align:right;">
<el-form-item label="">
<el-input clearable v-model="searchParam.name" size="mini" placeholder="请输入任务编号" ><el-button slot="append" icon="el-icon-search" @click="search()"></el-button></el-input>
</el-form-item>
<el-form-item label="" style="position:relative;top:-8px;left:0;margin-bottom: 0px;">
<el-date-picker v-model="searchParam.name" size="mini" type="date" placeholder="请选择日期"></el-date-picker>
</el-form-item>
</el-form>
</el-row>
<el-table :data="tableData" style="width: 100%" v-loading="loading">
<el-table-column prop="id" label="任务ID" min-width="50" align="center"></el-table-column>
<el-table-column prop="subject" label="任务名" min-width="100" align="center"></el-table-column>
<el-table-column prop="category" label="群发人数" min-width="50" align="center"></el-table-column>
<el-table-column prop="remark" label="发送日期" min-width="100" align="center"></el-table-column>
<el-table-column prop="createdusername" label="发送者" min-width="50" align="center"></el-table-column>
<el-table-column prop="createdusername" label="发送状态" min-width="50" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" min-width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="edit(scope.row)">查看</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../../assets/image/no-content1.png" />
<p>没有查询到相关结果</p>
</div>
</div>
</el-table>
</div>
</div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { validateWord } from "@/utils/validate.js";
import { openLoading, closeLoading } from "@/utils/utils";
import * as commonUtil from "@/utils/utils";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
return {
curmbFirst: "云鹊客服",
curmbSecond: "消息查询",
searchParam: {
theme: "",
type: "",
name: "",
status: "",
pageNo: 1,
pageSize: 15
},
category: [],
categoryStatus: "",
tableData: [{}],
loading: false,
nextSessionId: ""
};
},
computed: {},
filters: {
filteFun(index) {
let str = "";
if (index == 1) {
str = "未发布";
} else if (index == 2) {
str = "已发布";
} else if (index == 3) {
str = "已下线";
}
return str;
}
},
created() {
this.search();
setTimeout(() => {
this.search();
}, 10000);
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
// 列表查询
search() {
//this.getData();
},
// 获取数据
getData() {
let subject = 0,
status = 0,
name = 0;
this.loading = true;
let cStatus = this.categoryStatus ? this.categoryStatus : "0"; //'0'表示默认查所有的
let url =
"/interaction/discuss/" +
cStatus +
"/" +
subject +
"/" +
name +
"/" +
status +
"/" +
this.searchParam.pageNo +
"/" +
this.searchParam.pageSize;
this.GET(url).then(res => {
this.loading = false;
if (res.code == "000000") {
console.log(res.data);
this.tableData = res.data.resp.discuss || [];
this.nextSessionId = this.tableData[0] && this.tableData[0].id;
console.log("this.nextSessionId", this.nextSessionId);
if (res.data.typeList && res.data.typeList.length) {
let arr = [];
for (let i = 0; i < res.data.typeList.length; i++) {
let obj = {};
obj.label = res.data.typeList[i];
obj.value = res.data.typeList[i];
arr.push(obj);
}
this.category = arr;
}
}
});
},
// 查看消息详情
edit() {
this.$router.push({
path: `/chain-history-detail`,
query: {}
});
},
}
};
</script>
<style lang="scss" scoped>
.chain-history-wrap {
.component-content {
padding: 10px;
background: #fff;
// margin: 84px 20px 20px;
.search-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
font-size: 12px;
margin-bottom: 20px;
border-bottom: 1px solid #efefef;
.num {
color: #449284;
}
}
.create-button {
padding: 0 0 15px;
margin-top: 0 !important;
text-align: right;
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
}
}
}
</style>
\ No newline at end of file
......@@ -4,9 +4,60 @@
<div class="search-title">
<p>群发消息</p>
</div>
<el-form>
<el-form class="form" ref="form" :model="searchParam">
<el-form-item label="群发标题">
<el-input clearable v-model="searchParam.theme" size="mini" placeholder="请输入群发标题" style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="目标用户">
<el-input clearable v-model="searchParam.theme" size="mini" placeholder="请输入目标用户" style="width: 300px;"></el-input>
<el-button type="default" size="mini">
<img src="../../../assets/image/IM/upload.png"/>
<span>上传列表</span>
</el-button>
</el-form-item>
<div class="user-list">
<img src="../../../assets/image/IM/down.png"/>
<span>用户列表模板.xsls</span>
</div>
<div class="text-content">
<p>文本信息<i class="el-icon-error" @click="deleteText"></i></p>
<el-input type="textarea" clearable v-model="searchParam.theme" size="mini" placeholder="请输入文本信息" style="width: 300px;"></el-input>
</div>
<div class="file-content">
<p>文件信息<i class="el-icon-error" @click="deleteFile"></i></p>
<el-input clearable v-model="searchParam.theme" size="mini" placeholder="请输入文件信息" style="width: 300px;"></el-input>
<el-button type="default" size="mini">
<img src="../../../assets/image/IM/upload.png"/>
<span>上传文件</span>
</el-button>
</div>
<div class="link-content">
<p>链接<i class="el-icon-error" @click="deleteLink"></i></p>
<el-select clearable v-model="searchParam.theme" size="mini" placeholder="请选择链接" style="width: 300px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form>
<div class="content-type">
<el-button type="default" size="mini" @click="addText">
<img src="../../../assets/image/IM/file-text.png"/>
<span>文本</span>
</el-button>
<el-button type="default" size="mini" @click="addFile">
<img src="../../../assets/image/IM/folder-open.png"/>
<span>文件</span>
</el-button>
<el-button type="default" size="mini" @click="addLink">
<img src="../../../assets/image/IM/link.png"/>
<span>链接</span>
</el-button>
</div>
<el-button class="confirm-btn" size="mini">确认群发</el-button>
</div>
</div>
</template>
......@@ -23,112 +74,113 @@ export default {
},
data() {
return {
category: [],
categoryStatus: "",
tableData: [],
loading: false,
nextSessionId: '',
searchParam: {
},
options: [],
};
},
computed: {
},
filters: {
filteFun(index) {
let str = "";
if (index == 1) {
str = "未发布";
} else if (index == 2) {
str = "已发布";
} else if (index == 3) {
str = "已下线";
}
return str;
}
},
created() {
this.search();
setTimeout(() => {
this.search();
}, 10000);
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
// 列表查询
search() {
//this.getData();
addText() {
},
// 获取数据
getData() {
this.loading = true;
let url = `/interaction/discuss/`;
this.GET(url).then(res => {
this.loading = false;
if (res.code == "000000") {
console.log(res.data);
this.tableData = res.data.resp.discuss || [];
this.nextSessionId = this.tableData[0] && this.tableData[0].id;
console.log('this.nextSessionId', this.nextSessionId);
if (res.data.typeList && res.data.typeList.length) {
let arr = [];
for (let i = 0; i < res.data.typeList.length; i++) {
let obj = {};
obj.label = res.data.typeList[i];
obj.value = res.data.typeList[i];
arr.push(obj);
}
this.category = arr;
}
}
});
deleteText() {
},
addFile() {
},
deleteFile() {
},
addLink() {
// 给我一个任务吧,如果当前没有任务,则
getNextSession() {
this.$router.push({ path: `/current-session-list?nextSessionId=${this.nextSessionId}` });
},
deleteLink() {
}
}
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.chain-message-wrap {
.component-content {
margin: 20px 20px 0;
padding: 10px;
background: #fff;
// margin: 84px 20px 20px;
.search-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
font-size: 12px;
margin-bottom: 20px;
border-bottom: 1px solid #efefef;
p {
font-size: 16px;
color: #000;
}
.num {
color: #449284;
}
}
.create-button {
padding: 0 0 15px;
margin-top: 0 !important;
text-align: right;
}
.table-empty {
img {
width: 100px;
}
p {
margin-top: -50px;
}
margin: 20px 20px 0;
padding: 10px;
background: #fff;
.search-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
font-size: 12px;
margin-bottom: 20px;
p {
font-size: 16px;
color: #000;
}
}
.form {
padding: 0 10px;
}
.el-form-item .el-form-item__label{
float: none !important;
line-height: 20px;
}
.user-list {
margin-top: -10px;
img {
width: 12px;
height: 12px;
}
span{
color: #1890FF;
font-size: 14px;;
}
}
.text-content, .file-content, .link-content {
margin: 10px 0 25px;
font-size: 14px;
color: #000;
opacity: 0.85;
p{
margin-bottom: 10px;
i {
color: #979899;
font-size: 14px;
padding-left: 8px;
}
}
}
.content-type {
margin-bottom: 20px;
padding: 0 10px;
button {
position: relative;
width: 84px;
img {
position: absolute;
left: 22%;
top: 17%;
}
span {
padding-left: 10px;
}
}
}
.confirm-btn {
margin: 0 10px;
background: #449284;
color: #fff;
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册