|
@@ -2,7 +2,7 @@
|
|
|
<div class="msgbox">
|
|
|
<div class="header">
|
|
|
<div class="block">
|
|
|
- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :locale="locale" :disabled-date="disabledDate" />
|
|
|
+ <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :locale="locale" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-button type="primary" @click="skipcreated">
|
|
@@ -13,80 +13,177 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="center-table">
|
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
+ <div class="center-table" v-if="showState =='default'">
|
|
|
+ <el-table :data="tableData" style="width: 100%" height="82vh" v-loading="loading" element-loading-text="数据加载中..." empty-text="暂无消息数据">
|
|
|
<el-table-column label="类型" align="center">
|
|
|
<template #header>
|
|
|
- <el-select v-model="tableSelect.value" class="m-2" placeholder="类型选择" size="small">
|
|
|
+ <el-select v-model="tableSelect.value" class="m-2" placeholder="类型选择" size="small" @change="changeTag">
|
|
|
<el-option v-for="item in tableSelect.options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</template>
|
|
|
<template #default="scope">
|
|
|
- <el-tag type="info" effect="dark" v-if="scope.row.type ===1">普通</el-tag>
|
|
|
- <el-tag type="" effect="dark" v-if="scope.row.type ===2">提示</el-tag>
|
|
|
- <el-tag type="success" effect="dark" v-if="scope.row.type ===3">特殊</el-tag>
|
|
|
+ <el-tag color="rgba(99, 205, 218,.5)" effect="dark" v-if="scope.row.type ===1">系统</el-tag>
|
|
|
+ <el-tag type="info" effect="dark" v-if="scope.row.type ===2">普通</el-tag>
|
|
|
+ <el-tag type="" effect="dark" v-if="scope.row.type ===3">提示</el-tag>
|
|
|
+ <el-tag type="success" effect="dark" v-if="scope.row.type ===4">特殊</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="theme" label="消息主题" align="center" />
|
|
|
<el-table-column prop="content" label="消息内容" align="center" />
|
|
|
- <el-table-column prop="address" label="接收群" align="center">
|
|
|
+ <el-table-column prop="address" label="接收产品" align="center">
|
|
|
<template #default="scope">
|
|
|
- <el-tag class="ml-2 product-tag" v-for="(item,index) in scope.row.receive" :key="index" :type="item ==='HiTA'? 'success':item ==='HiTeach' ? '':'info'" size="small" effect="light ">{{item}}</el-tag>
|
|
|
+ <!-- <el-tag class="ml-2 product-tag" v-for="(item,index) in scope.row.crowd.types" :key="index" :type="item ==='hita5' || item ==='HiTA'? 'success':item ==='HiTeach' ? '':'info'" size="small" effect="light ">{{item}}</el-tag> -->
|
|
|
+ {{scope.row.crowd.types}}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="time" label="时间" align="center" />
|
|
|
<el-table-column label="操作" fixed="right" align="center">
|
|
|
- <template #default>
|
|
|
+ <template #default="scope">
|
|
|
<div class="look-btn">
|
|
|
- <el-button type="primary" size="small">查看</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="detailsMsg(scope.row)">查看</el-button>
|
|
|
</div>
|
|
|
- <div class="del-btn">
|
|
|
+ <!-- <div class="del-btn">
|
|
|
<el-button type="danger" size="small">删除</el-button>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
+ <div class="center-table" v-else-if="showState ==='details'">
|
|
|
+ <div class="detailsbox">
|
|
|
+ <div class="datumbox">
|
|
|
+ <div class="crowd">
|
|
|
+ <p class="result-title">接收人群</p>
|
|
|
+ <div class="crowdbox">
|
|
|
+ <el-tag class="crowd-tag" v-for="item in nowPitch.receive" :type="item.dataType ==='area' ? 'warning':item.dataType ==='school' ? 'success':'' ">
|
|
|
+ {{item.name}}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="type">
|
|
|
+ <p class="result-title">接收产品类型</p>
|
|
|
+ <div class="typebox">
|
|
|
+ <el-tag class="crowd-tag" v-for="item in nowPitch.crowd.types" :type="item ==='HiTeach' ? '':item ==='HiTA' ? 'success':item ==='IES5' ? 'info':''" effect="dark" round>
|
|
|
+ {{item}}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="push-content">
|
|
|
+ <p class="result-title">消息内容</p>
|
|
|
+ <div class="pushbox-content">
|
|
|
+ <div class="pushcontent">
|
|
|
+ <el-form :model="nowPitch" class="created-one-form" label-position="left">
|
|
|
+ <el-form-item label="消息主题" prop="theme">
|
|
|
+ <el-input v-model="nowPitch.theme" placeholder="请填写推送消息的主题" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="消息内容" prop="content">
|
|
|
+ <el-input v-model="nowPitch.content" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="推送消息的内容" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="消息类型" prop="content" class="form-type">
|
|
|
+ <el-radio-group v-model="nowPitch.type" class="radio-type">
|
|
|
+ <el-radio label="1" disabled>
|
|
|
+ <el-tag color="rgba(99, 205, 218,.5)">系统型</el-tag>
|
|
|
+ </el-radio>
|
|
|
+ <el-radio label="2" disabled>
|
|
|
+ <el-tag type="info">普通型</el-tag>
|
|
|
+ </el-radio>
|
|
|
+ <el-radio label="3" disabled>
|
|
|
+ <el-tag>提示型</el-tag>
|
|
|
+ </el-radio>
|
|
|
+ <el-radio label="4" disabled>
|
|
|
+ <el-tag type="success">特殊型</el-tag>
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否跳转" prop="content" class="skip-switch">
|
|
|
+ <div class="skip-switch">
|
|
|
+ <!-- <div class="skip-title">是否跳转地址</div> -->
|
|
|
+ <div class="skip-content">
|
|
|
+ <div>
|
|
|
+ <el-switch v-model="nowPitch.skipstate" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #b2bec3" disabled />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="skip-url" v-show="nowPitch.jumpUrl ? true:false">
|
|
|
+ <el-input v-model="nowPitch.jumpUrl" placeholder="填写跳转地址" disabled />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="回调执行" prop="content" class="skip-switch">
|
|
|
+ <div class="skip-switch">
|
|
|
+ <!-- <div class="skip-title">是否跳转地址</div> -->
|
|
|
+ <div class="skip-content">
|
|
|
+ <div>
|
|
|
+ <el-switch v-model="nowPitch.callbackstate" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #b2bec3" disabled />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="skip-functions" v-show="nowPitch.callbackUrl ? true:false">
|
|
|
+ <el-input v-model="nowPitch.callbackUrl" placeholder="填写回调执行名称" disabled />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="消息来源">
|
|
|
+ <div class="sourcetitle">{{nowPitch.source}}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发送时间">
|
|
|
+ <div class="sourcetitle">{{nowPitch.time}}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="copybox">
|
|
|
+ <el-button>复用此条消息</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="back">
|
|
|
+ <el-button @click="backs">返回列表</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref, getCurrentInstance, watch, onMounted, } from 'vue'
|
|
|
import { ChatDotSquare } from '@element-plus/icons-vue'
|
|
|
+import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
|
|
|
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
|
|
import { useRouter } from 'vue-router'
|
|
|
let value1 = ref('')
|
|
|
+let { proxy } = getCurrentInstance()
|
|
|
let locale = zhCn
|
|
|
const router = useRouter()
|
|
|
-const tableData = [
|
|
|
- {
|
|
|
- theme: '测试主题1',
|
|
|
- content: '测试内容123456789',
|
|
|
- receive: ['HiTeach', 'HiTA'],
|
|
|
- time: '2016-05-04',
|
|
|
- type: 1
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '测试主题2',
|
|
|
- content: '测试内容123456789',
|
|
|
- receive: ['HiTA'],
|
|
|
- time: '2016-05-04',
|
|
|
- type: 2
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '测试主题3',
|
|
|
- content: '测试内容123456789',
|
|
|
- receive: ['HiTA'],
|
|
|
- time: '2016-05-04',
|
|
|
- type: 3
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '测试主题4',
|
|
|
- content: '测试内容123456789',
|
|
|
- receive: ['HiTA', 'HiTeach'],
|
|
|
- time: '2016-05-04',
|
|
|
- type: 1
|
|
|
- }
|
|
|
-]
|
|
|
+let tableData = ref([
|
|
|
+ // {
|
|
|
+ // theme: '测试主题1',
|
|
|
+ // content: '测试内容123456789',
|
|
|
+ // receive: ['HiTeach', 'HiTA'],
|
|
|
+ // time: '2016-05-04',
|
|
|
+ // type: 1
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // theme: '测试主题2',
|
|
|
+ // content: '测试内容123456789',
|
|
|
+ // receive: ['HiTA'],
|
|
|
+ // time: '2016-05-04',
|
|
|
+ // type: 2
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // theme: '测试主题3',
|
|
|
+ // content: '测试内容123456789',
|
|
|
+ // receive: ['HiTA'],
|
|
|
+ // time: '2016-05-04',
|
|
|
+ // type: 3
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // theme: '测试主题4',
|
|
|
+ // content: '测试内容123456789',
|
|
|
+ // receive: ['HiTA', 'HiTeach'],
|
|
|
+ // time: '2016-05-04',
|
|
|
+ // type: 1
|
|
|
+ // }
|
|
|
+])
|
|
|
+let originalData = ref([])
|
|
|
+let nowPitch = ref()
|
|
|
const disabledDate = () => {
|
|
|
let time = new Date()
|
|
|
return time.getTime() > Date.now()
|
|
@@ -100,9 +197,63 @@ let tableSelect = ref({
|
|
|
{ value: 'special', label: '特殊' },
|
|
|
]
|
|
|
})
|
|
|
+let showState = ref('default')
|
|
|
+let loading = ref(false)
|
|
|
function skipcreated () {
|
|
|
router.push('/home/createdpush')
|
|
|
}
|
|
|
+function init () {
|
|
|
+ loading.value = true
|
|
|
+ proxy.$api.getMsglist({}).then((res) => {
|
|
|
+ console.log(res, '78787878787')
|
|
|
+ if (res.state === 200) {
|
|
|
+ res.bINotices.forEach((item) => {
|
|
|
+ item.time = proxy.$common.timestampToTime(item.sendTime, 'all');
|
|
|
+ item.type = Number(item.type) + 1
|
|
|
+ item.receive = []
|
|
|
+ item.crowd.areaIds.forEach((areas) => { item.receive.push({ id: areas.id, name: areas.name, dataType: 'area' }) })
|
|
|
+ item.crowd.schoolIds.forEach((school) => { item.receive.push({ id: school.id, name: school.name, dataType: 'school' }) })
|
|
|
+ item.crowd.tmdIds.forEach((tmdinfo) => { item.receive.push({ id: tmdinfo.id, name: tmdinfo.name, dataType: 'tmdinfo' }) })
|
|
|
+ })
|
|
|
+ console.log(res.bINotices, 'update')
|
|
|
+ tableData.value = res.bINotices
|
|
|
+ originalData.value = res.bINotices
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ loading.value = false
|
|
|
+ ElMessage.error('获取消息列表异常,API异常')
|
|
|
+ })
|
|
|
+}
|
|
|
+function changeTag (val) {
|
|
|
+ console.log(val)
|
|
|
+ let values = val
|
|
|
+ if (values === 'all') {
|
|
|
+ tableData.value = originalData.value
|
|
|
+ } else if (values === 'common') {
|
|
|
+ tableData.value = originalData.value.filter((item) => { return item.type === 2 })
|
|
|
+ } else if (values === 'hint') {
|
|
|
+ tableData.value = originalData.value.filter((item) => { return item.type === 3 })
|
|
|
+ } else if (values === 'special') {
|
|
|
+ tableData.value = originalData.value.filter((item) => { return item.type === 4 })
|
|
|
+ }
|
|
|
+}
|
|
|
+function detailsMsg (val) {
|
|
|
+ val.skipstate = val.jumpUrl ? true : false
|
|
|
+ val.callbackstate = val.callbackUrl ? true : false
|
|
|
+ val.type = val.type.toString()
|
|
|
+ nowPitch.value = val
|
|
|
+ showState.value = 'details'
|
|
|
+ console.log(nowPitch.value, '详情')
|
|
|
+}
|
|
|
+function backs () {
|
|
|
+ showState.value = 'default'
|
|
|
+ init()
|
|
|
+}
|
|
|
+function copyReuse () {
|
|
|
+
|
|
|
+}
|
|
|
+init()
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.msgbox {
|
|
@@ -139,9 +290,128 @@ function skipcreated () {
|
|
|
overflow: hidden;
|
|
|
margin-left: 0px;
|
|
|
} */
|
|
|
+.detailsbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 82vh;
|
|
|
+ padding: 1%;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.datumbox {
|
|
|
+ width: 85%;
|
|
|
+ height: 100%;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ line-height: 20px;
|
|
|
+ /* box-shadow: 0px 5px 10px 0px rgba(204, 204, 204, 0.7); */
|
|
|
+}
|
|
|
+.type {
|
|
|
+ width: 35%;
|
|
|
+ height: 40%;
|
|
|
+}
|
|
|
+.crowd {
|
|
|
+ width: 65%;
|
|
|
+ height: 40%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.crowd {
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+}
|
|
|
+.push-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+}
|
|
|
+.result-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b2bec3;
|
|
|
+ line-height: 28px;
|
|
|
+ position: sticky;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ box-shadow: 0 2px 5px #e9e9e9;
|
|
|
+}
|
|
|
+.crowdbox {
|
|
|
+ margin: 1%;
|
|
|
+ /* border: 1px solid #ccc; */
|
|
|
+ line-height: 20px;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 15vh;
|
|
|
+}
|
|
|
+.crowd-tag {
|
|
|
+ margin: 0.5% 0.2%;
|
|
|
+}
|
|
|
+.pushcontent {
|
|
|
+ width: 85%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.pushtime {
|
|
|
+ width: 85%;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #409eff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.back {
|
|
|
+ width: 5%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.copybox {
|
|
|
+ width: 10%;
|
|
|
+ margin-top: 3%;
|
|
|
+}
|
|
|
+.sourcetitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #95afc0;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.header .el-date-editor .el-range-separator {
|
|
|
width: 10%;
|
|
|
}
|
|
|
+.copybox .el-button {
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 20px;
|
|
|
+ /* width: 300px;
|
|
|
+ height: 100px; */
|
|
|
+ /* font-size: 30px; */
|
|
|
+ text-align: center;
|
|
|
+ /* line-height: 100px; */
|
|
|
+ background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
|
|
|
+ background-size: 600%;
|
|
|
+ -webkit-animation: anime 6s linear infinite;
|
|
|
+ animation: anime 6s linear infinite;
|
|
|
+}
|
|
|
+@keyframes anime {
|
|
|
+ 0% {
|
|
|
+ background-position: 0% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ background-position: 100% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position: 0% 50%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes anime {
|
|
|
+ 0% {
|
|
|
+ background-position: 0% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ background-position: 100% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position: 0% 50%;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|