|
|
@@ -0,0 +1,394 @@
|
|
|
+<!--
|
|
|
+ * @Author: zouwenying
|
|
|
+ * @Date: 2020-11-12 16:58:16
|
|
|
+ * @LastEditTime: 2021-05-13 15:18:31
|
|
|
+ * @LastEditors: zwy
|
|
|
+ * @Description: In User Settings Edit
|
|
|
+ * @FilePath: \userCenter\src\views\messages\index.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="msg_wrap">
|
|
|
+ <div class="msg_type">
|
|
|
+ <div
|
|
|
+ class="title"
|
|
|
+ :class="{ active: messageStatus == item.id }"
|
|
|
+ v-for="(item, index) in messageList"
|
|
|
+ :key="index"
|
|
|
+ @click="setType(item.id)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ <span v-if="item.id === 0">({{ unreadNum }})</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content_type">
|
|
|
+ <div class="msg_title">
|
|
|
+ <div
|
|
|
+ class="title"
|
|
|
+ :class="{ active: typeId == item.typeId }"
|
|
|
+ v-for="(item, index) in typeList"
|
|
|
+ :key="index"
|
|
|
+ @click="setValue(item.typeId)"
|
|
|
+ >
|
|
|
+ {{ item.type }}
|
|
|
+ <span v-if="messageStatus == 0">({{ item.cn }})</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <zz-table
|
|
|
+ ref="table"
|
|
|
+ :cols="cols"
|
|
|
+ :settings="{ showCheckbox: true, stripe: true }"
|
|
|
+ :data="mixins_list"
|
|
|
+ :pageset="mixins_pageset"
|
|
|
+ @page-change="pageChange"
|
|
|
+ :loading="mixins_onQuery"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope" slot="messageContent">
|
|
|
+ <p
|
|
|
+ @click="toUrl(scope.row.id, scope.row.typeId, scope.row.sceneType, scope.row.url)"
|
|
|
+ :class="{ active: scope.row.url !== null }"
|
|
|
+ style="cursor: pointer"
|
|
|
+ >
|
|
|
+ <span v-if="!scope.row.messageStatus" class="point"></span>
|
|
|
+ <span v-else class="unpoint"></span>
|
|
|
+ {{ scope.row.messageContent }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope" slot="batchtodo">
|
|
|
+ <div class="operate">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :class="{ disabled: selectRow.length == 0 }"
|
|
|
+ :disabled="selectRow.length == 0"
|
|
|
+ @click="deleteOne"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :class="{ disabled: selectRow.length == 0 }"
|
|
|
+ :disabled="selectRow.length == 0"
|
|
|
+ @click="mark"
|
|
|
+ >标为已读</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" class="btn" @click="markAll">全部已读</el-button>
|
|
|
+ <el-button type="primary" class="btn" @click="deleteAll">全部删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </zz-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import list from '@utils/list.js';
|
|
|
+import envConfig from '@/config';
|
|
|
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
|
|
|
+export default {
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ envConfig: envConfig,
|
|
|
+ messageList: [
|
|
|
+ { id: 2, name: '全部消息' },
|
|
|
+ { id: 0, name: '未读消息' },
|
|
|
+ { id: 1, name: '已读消息' }
|
|
|
+ ],
|
|
|
+ unreadNum: 0,
|
|
|
+ typeId: -1,
|
|
|
+ typeList: [],
|
|
|
+ selectRow: [],
|
|
|
+ sceneTypes: { 1: '1014', 2: '1014', 3: '1016', 4: '1015', 5: '1014' },
|
|
|
+ cols: [
|
|
|
+ {
|
|
|
+ label: '消息内容',
|
|
|
+ prop: 'messageContent',
|
|
|
+ slot: 'messageContent'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '消息类型',
|
|
|
+ prop: 'typeName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '创建时间',
|
|
|
+ prop: 'dateCreate'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['messageStatus'])
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ messageStatus() {
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setType(id) {
|
|
|
+ this.$store.commit('setmessageStatus', id);
|
|
|
+ this.selectRow = [];
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ setValue(id) {
|
|
|
+ this.typeId = id;
|
|
|
+ this.selectRow = [];
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ if (this.typeId == -1 && this.messageStatus == 2) {
|
|
|
+ this.mixins_query = {};
|
|
|
+ } else if (this.messageStatus == 2) {
|
|
|
+ this.mixins_query = {
|
|
|
+ typeId: this.typeId
|
|
|
+ };
|
|
|
+ } else if (this.typeId == -1) {
|
|
|
+ this.mixins_query = {
|
|
|
+ messageStatus: this.messageStatus
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.mixins_query = {
|
|
|
+ typeId: this.typeId,
|
|
|
+ messageStatus: this.messageStatus
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.selectRow = [];
|
|
|
+ this.getMessageList();
|
|
|
+ this.getUnreadNumber();
|
|
|
+ this.mixins_search();
|
|
|
+ },
|
|
|
+ toUrl(id, type, sceneType, urllink) {
|
|
|
+ debugger;
|
|
|
+ this.$http.post('/sc-message/message/updateMultiple', { ids: [id], messageStatus: 1 }).then(({ status, data, msg }) => {});
|
|
|
+ let url, appId;
|
|
|
+ url = urllink;
|
|
|
+ appId = '1003';
|
|
|
+ // if (type == 1 || type == 2) {
|
|
|
+ // appId = this.sceneTypes[sceneType] || '1003';
|
|
|
+ // } else if (type == 4) {
|
|
|
+ // appId = '1003';
|
|
|
+ // } else if (type == 3 || type == 7) {
|
|
|
+ // appId = '1003';
|
|
|
+ // }
|
|
|
+ //查询linkpath能不能跳转
|
|
|
+ this.$http
|
|
|
+ .postForm('/sc-message/message/judgingTheMessageJumpPermission', {
|
|
|
+ url: url.split('/')[url.split('/').length - 1],
|
|
|
+ appId: appId
|
|
|
+ })
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ url = url + '&access_token=' + localStorage.getItem('SC_token');
|
|
|
+ window.open(url);
|
|
|
+ // if(status==0&&data==0){
|
|
|
+ // window.open(url);
|
|
|
+ // }else{
|
|
|
+ // this.$message.error("您没有该系统权限")
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectionChange(val) {
|
|
|
+ let arr = [];
|
|
|
+ if (val.length) {
|
|
|
+ val.map((item, index) => {
|
|
|
+ arr.push(item.id);
|
|
|
+ });
|
|
|
+ this.selectRow = arr;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectRow = [];
|
|
|
+ },
|
|
|
+ deleteOne() {
|
|
|
+ this.$msgBox(`您确定要删除选中的${this.selectRow.length}条消息`, '删除后将无法恢复，是否继续？')
|
|
|
+ .then((_) => {
|
|
|
+ this.$http
|
|
|
+ .post('/sc-message/message/updateMultiple', { ids: this.selectRow, status: 0 })
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ this.search();
|
|
|
+ this.$refs.table.checkAllChange();
|
|
|
+ this.$message.success('删除消息成功');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
+ },
|
|
|
+ deleteAll() {
|
|
|
+ this.$msgBox(`您确定要删除全部消息`, '删除后将无法恢复，是否继续？')
|
|
|
+ .then((_) => {
|
|
|
+ this.$http.post('/sc-message/message/updateMultiple', { ids: [], status: 0 }).then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ this.search();
|
|
|
+ this.$refs.table.checkAllChange();
|
|
|
+ this.$message.success('删除全部消息成功');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
+ },
|
|
|
+ mark() {
|
|
|
+ this.$msgBox(`您确定要标记选中的${this.selectRow.length}条消息为已读`, '标记后将无法恢复，是否继续？', 'warning')
|
|
|
+ .then((_) => {
|
|
|
+ this.$http
|
|
|
+ .post('/sc-message/message/updateMultiple', { ids: this.selectRow, messageStatus: 1 })
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ this.search();
|
|
|
+ this.$refs.table.checkAllChange();
|
|
|
+ this.$message.success('标记已读消息成功');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
+ },
|
|
|
+ markAll() {
|
|
|
+ this.$msgBox(`您确定要标记全部消息为已读`, '标记后将无法恢复，是否继续？', 'warning')
|
|
|
+ .then((_) => {
|
|
|
+ this.$http.post('/sc-message/message/updateMultiple', { ids: [], messageStatus: 1 }).then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ this.search();
|
|
|
+ this.$refs.table.checkAllChange();
|
|
|
+ this.$message.success('标记全部消息成功');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
+ },
|
|
|
+ //查询未读消息数量
|
|
|
+ getUnreadNumber() {
|
|
|
+ this.$http.postForm('/sc-message/message/queryUnreadMessageStatic').then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ let sum = 0;
|
|
|
+ data.map((item, index) => {
|
|
|
+ sum = sum + item.cn;
|
|
|
+ });
|
|
|
+ this.unreadNum = sum;
|
|
|
+ if (sum == 0) {
|
|
|
+ this.$store.commit('setmessageNumber', false);
|
|
|
+ } else {
|
|
|
+ this.$store.commit('setmessageNumber', true);
|
|
|
+ }
|
|
|
+ data.unshift({ type: '全部类型', cn: sum, typeId: -1 });
|
|
|
+ this.typeList = data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取最新消息列表
|
|
|
+ getMessageList() {
|
|
|
+ this.$http.postForm('/sc-message/message/queryLastMessage', { num: '5' }).then(({ status, data, msg }) => {
|
|
|
+ if (status === 0) {
|
|
|
+ this.$store.commit('setmessageList', data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.mixins_dataUrl = '/sc-message/message/selectPage';
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.msg_wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ .msg_type {
|
|
|
+ // float: left;
|
|
|
+ width: 200px;
|
|
|
+ height: 730px;
|
|
|
+ border-right: 1px solid #f6f6f6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ffffff;
|
|
|
+ .title {
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ padding-left: 20px;
|
|
|
+ color: #212226;
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: rgba(39, 135, 241, 0.1);
|
|
|
+ color: $mainTextColor;
|
|
|
+ border-right: 2px solid $mainTextColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content_type {
|
|
|
+ width: calc(100% - 200px);
|
|
|
+ .msg_title {
|
|
|
+ display: flex;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #ffffff;
|
|
|
+ .title {
|
|
|
+ height: 58px;
|
|
|
+ margin: 0 25px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: $mainTextColor;
|
|
|
+ border-bottom: 2px solid $mainTextColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operate {
|
|
|
+ .btn {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .disabled {
|
|
|
+ height: 30px;
|
|
|
+ background: #f8fcff;
|
|
|
+ border: 1px solid #d8d8d8;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #d8d8d8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.active {
|
|
|
+ color: $mainTextColor;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.point {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background: #fe7271;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.unpoint {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+/deep/ .el-table {
|
|
|
+ border: none;
|
|
|
+ border-top: 1px solid #f6f6f6;
|
|
|
+ height: 670px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .foot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .selectAll {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ .el-checkbox__input {
|
|
|
+ margin: 5px 20px 5px 15px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-table__header .el-table_1_column_2 .cell span {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+</style>
|
Shannon_mu