|
@@ -1,87 +1,304 @@
|
|
|
<template>
|
|
|
<!-- 消息通知 -->
|
|
|
- <el-popover
|
|
|
- placement="bottom"
|
|
|
- width="443"
|
|
|
- trigger="click" v-model="visible">
|
|
|
- <div class="notifation-wrap">
|
|
|
- <!-- 防止tabs在popover前渲染,会导致tab选中状态不正确 -->
|
|
|
- <el-tabs v-model="activeName" v-if="visible">
|
|
|
- <el-tab-pane :label="`${$t('AprrovalPage.research_approval_btn')}(${UnreadTotal})`" name="first"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <div class="massage-list" v-if="visible">
|
|
|
- <div class="message-item" :class="{'IsRead':item.IsRead}" v-for="item in msgList" :key="item.Id" @click="readMsg(item)">
|
|
|
- <span class="icon">
|
|
|
- <img :src="require(`@/assets/img/approve_m/${approveState[item.ApproveState]||'process'}-msg.svg`)" alt="">
|
|
|
- </span>
|
|
|
- <div class="info">
|
|
|
- <div class="head">
|
|
|
- <span class="title">{{item.Content}}</span>
|
|
|
- <span class="time">{{item.CreateTime}}</span>
|
|
|
+ <div>
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ width="443"
|
|
|
+ trigger="click" v-model="visible">
|
|
|
+ <div class="notifation-wrap">
|
|
|
+ <!-- 防止tabs在popover前渲染,会导致tab选中状态不正确 -->
|
|
|
+ <el-tabs v-model="activeName" v-if="visible" @tab-click="getMsgList">
|
|
|
+ <el-tab-pane :label="`${$t('AprrovalPage.research_approval_btn')}${activeName==='first'?'('+UnreadTotal+')':''}`" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane :label="`${$t('SystemManage.OperateAuth.label_notice_title')}${activeName==='second'?'('+UnreadTotal+')':''}`" name="second"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="massage-list" v-if="visible">
|
|
|
+ <div class="message-item" :class="{'IsRead':item.IsRead}" v-for="item in msgList" :key="item.Id" @click="readMsg(item)">
|
|
|
+ <span class="icon">
|
|
|
+ <img :src="require(`@/assets/img/approve_m/${approveState[item.ApproveState]||'process'}-msg.svg`)" alt="">
|
|
|
+ </span>
|
|
|
+ <div class="info">
|
|
|
+ <div class="head">
|
|
|
+ <span class="title">{{item.Content}}</span>
|
|
|
+ <span class="time">{{item.CreateTime}}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 审批内容 -->
|
|
|
+ <div class="content" v-if="activeName==='first'">{{item.Remark||''}} </div>
|
|
|
+ <!-- 权限内容 -->
|
|
|
+ <div class="content" v-else>
|
|
|
+ {{item.Remark||''}}
|
|
|
+ <span>,点击<el-button type="text" @click="openAuthDetail(item)">查看详情</el-button>!</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="content">{{item.Remark||''}} </div>
|
|
|
</div>
|
|
|
+ <tableNoData v-if="!msgList.length" :text="$t('AprrovalPage.no_news_yet')"></tableNoData>
|
|
|
</div>
|
|
|
- <tableNoData v-if="!msgList.length" :text="$t('AprrovalPage.no_news_yet')"></tableNoData>
|
|
|
+ <el-button type="text" class="close-btn" @click="visible=false">{{$t('AprrovalPage.close_btn')}}</el-button>
|
|
|
</div>
|
|
|
- <el-button type="text" class="close-btn" @click="visible=false">{{$t('AprrovalPage.close_btn')}}</el-button>
|
|
|
- </div>
|
|
|
- <span slot="reference" @click="visible = !visible" class="msg-btn">
|
|
|
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
- <path d="M16.7344 15.4904L15.2941 12.9564V7.84847C15.2941 5.89142 13.8231 3.77337 11.6786 2.99732C11.5741 1.96012 10.8811 1.20374 9.97287 1.20374C9.06595 1.20374 8.37036 1.96014 8.26717 2.99732C6.12392 3.77337 4.65292 5.8914 4.65292 7.84847V12.9564L3.14258 15.6146C3.04183 15.7903 3.04429 16.0054 3.14504 16.1799C3.24581 16.3544 3.43263 16.4601 3.63415 16.4601H7.22871C7.49293 17.7357 8.62233 18.6967 9.97289 18.6967C11.3247 18.6967 12.4541 17.7357 12.7171 16.4601H16.3116C16.3215 16.4601 16.3288 16.4601 16.3374 16.4601C16.6508 16.4601 16.904 16.2082 16.904 15.8948C16.904 15.7362 16.8401 15.5925 16.7344 15.4904ZM9.97287 2.33803C10.1769 2.33803 10.3415 2.49286 10.4472 2.7239C10.2899 2.70792 10.1375 2.67106 9.97287 2.67106C9.8082 2.67106 9.65583 2.70792 9.49851 2.7239C9.60422 2.49284 9.76889 2.33803 9.97287 2.33803ZM9.97287 17.5636C9.25396 17.5636 8.65303 17.1016 8.41951 16.4601H11.5262C11.2927 17.1015 10.693 17.5636 9.97287 17.5636ZM4.60745 15.3282L5.71102 13.3853C5.76015 13.3017 5.78719 13.2034 5.78719 13.1051V7.84847C5.78719 5.93934 7.57648 3.80413 9.97287 3.80413C12.3692 3.80413 14.161 5.93934 14.161 7.84847V13.1051C14.161 13.2034 14.1868 13.3017 14.2347 13.3853L15.3395 15.3282H4.60745Z" fill="currentColor"/>
|
|
|
- </svg>
|
|
|
- <div class="unread" v-if="UnreadTotal">{{UnreadTotal>99?'99+':UnreadTotal}}</div>
|
|
|
- </span>
|
|
|
- </el-popover>
|
|
|
+ <span slot="reference" @click="visible = !visible" class="msg-btn">
|
|
|
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M16.7344 15.4904L15.2941 12.9564V7.84847C15.2941 5.89142 13.8231 3.77337 11.6786 2.99732C11.5741 1.96012 10.8811 1.20374 9.97287 1.20374C9.06595 1.20374 8.37036 1.96014 8.26717 2.99732C6.12392 3.77337 4.65292 5.8914 4.65292 7.84847V12.9564L3.14258 15.6146C3.04183 15.7903 3.04429 16.0054 3.14504 16.1799C3.24581 16.3544 3.43263 16.4601 3.63415 16.4601H7.22871C7.49293 17.7357 8.62233 18.6967 9.97289 18.6967C11.3247 18.6967 12.4541 17.7357 12.7171 16.4601H16.3116C16.3215 16.4601 16.3288 16.4601 16.3374 16.4601C16.6508 16.4601 16.904 16.2082 16.904 15.8948C16.904 15.7362 16.8401 15.5925 16.7344 15.4904ZM9.97287 2.33803C10.1769 2.33803 10.3415 2.49286 10.4472 2.7239C10.2899 2.70792 10.1375 2.67106 9.97287 2.67106C9.8082 2.67106 9.65583 2.70792 9.49851 2.7239C9.60422 2.49284 9.76889 2.33803 9.97287 2.33803ZM9.97287 17.5636C9.25396 17.5636 8.65303 17.1016 8.41951 16.4601H11.5262C11.2927 17.1015 10.693 17.5636 9.97287 17.5636ZM4.60745 15.3282L5.71102 13.3853C5.76015 13.3017 5.78719 13.2034 5.78719 13.1051V7.84847C5.78719 5.93934 7.57648 3.80413 9.97287 3.80413C12.3692 3.80413 14.161 5.93934 14.161 7.84847V13.1051C14.161 13.2034 14.1868 13.3017 14.2347 13.3853L15.3395 15.3282H4.60745Z" fill="currentColor"/>
|
|
|
+ </svg>
|
|
|
+ <div class="unread" v-if="allUnreadTotal">{{allUnreadTotal>99?'99+':allUnreadTotal}}</div>
|
|
|
+ </span>
|
|
|
+ </el-popover>
|
|
|
+
|
|
|
+ <m-dialog
|
|
|
+ :show.sync="isOpenAuthDia"
|
|
|
+ width="800px"
|
|
|
+ title="权限变更详情"
|
|
|
+ @close="isOpenAuthDia = false"
|
|
|
+ >
|
|
|
+ <div class="notice-auth-box">
|
|
|
+ <div class="main">
|
|
|
+
|
|
|
+ <div class="left" v-if="!detailInfo.isAuthSet">
|
|
|
+
|
|
|
+ <el-radio-group v-model="detailInfo.Source" @input="changeSource" style="margin-bottom:10px;">
|
|
|
+ <el-radio-button
|
|
|
+ v-for="item in tabs"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.key"
|
|
|
+ >{{item.label}}</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <ul class="data-types" v-if="detailInfo.Source===6">
|
|
|
+ <li
|
|
|
+ v-for="item in subTabs"
|
|
|
+ :key="item.key"
|
|
|
+ :class="item.key===detailInfo.SubSource&&'act'"
|
|
|
+ @click="changeSubSource(item)"
|
|
|
+ >{{item.label}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="right">
|
|
|
+ <label v-if="detailInfo.isAuthSet">{{tabs.find(_ => _.key===detailInfo.Source).label}}</label>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ ref="table"
|
|
|
+ element-loading-text="加载中..."
|
|
|
+ v-loading="tableLoading"
|
|
|
+ border
|
|
|
+ style="margin:20px 0"
|
|
|
+ max-height="400"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in tableColums"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.label"
|
|
|
+ :prop="item.key"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :min-width="item.minwidthsty"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+
|
|
|
+ <span>{{ row[item.key] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <div slot="empty" style="padding: 20px 0">
|
|
|
+ <tableNoData :text="$t('Table.prompt_slogan')" size="mini"/>
|
|
|
+ </div>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dia-bot">
|
|
|
+ <el-button type="primary" plain @click="isOpenAuthDia = false"
|
|
|
+ >{{$t('Dialog.known')}}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </m-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {approveInterence} from '@/api/modules/approve.js';
|
|
|
+import { operateAuthInterface } from '@/api/modules/setApi';
|
|
|
+import mDialog from './mDialog.vue';
|
|
|
export default {
|
|
|
+ components: { mDialog },
|
|
|
data() {
|
|
|
this.approveState=['','process','passed','reject','return',]
|
|
|
return {
|
|
|
activeName:'first',
|
|
|
visible:false,
|
|
|
msgList:[],
|
|
|
- UnreadTotal:0
|
|
|
+ UnreadTotal:0,
|
|
|
+
|
|
|
+ allUnreadTotal: 0,
|
|
|
+
|
|
|
+ //详情弹窗
|
|
|
+ isOpenAuthDia: false,
|
|
|
+ tableData: [],
|
|
|
+ page_no: 1,
|
|
|
+ haveMore: false,
|
|
|
+ detailInfo: {
|
|
|
+ MessageId: 0,
|
|
|
+ isAuthSet: false,//true权限设置 false资产转移
|
|
|
+ Source: 1,
|
|
|
+ SubSource: 0,
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ tabs(){
|
|
|
+ const tabs = [
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.tab01'), key: 1 },
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.tab02'), key: 2 },
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.tab03'), key: 3 },
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.tab04'), key: 4 },
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.tab05'), key: 5 },
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.tab06'), key: 6 },
|
|
|
+ ]
|
|
|
+ return tabs
|
|
|
+ },
|
|
|
+ subTabs() {
|
|
|
+ const subTabs = [
|
|
|
+ { label: /* '自定义分析' */this.$t('SystemManage.OperateAuth.tab_sub_sheet1'), key: 4 },
|
|
|
+ { label:/* '时间序列表格' */this.$t('SystemManage.OperateAuth.tab_sub_sheet2'), key: 2 },
|
|
|
+ { label: /* '混合表格' */this.$t('SystemManage.OperateAuth.tab_sub_sheet3'), key: 3 },
|
|
|
+ ]
|
|
|
+
|
|
|
+ return subTabs
|
|
|
+ },
|
|
|
+ tableColums() {
|
|
|
+ const clomusMap = {
|
|
|
+ 5: [
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.table_col_name01'),key: 'DataName' },
|
|
|
+ { label: '操作时间',key: 'CreateTime' },
|
|
|
+ ],
|
|
|
+ 6: [
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.table_col_sheet_name'),key: 'DataName' },
|
|
|
+ { label: '操作时间',key: 'CreateTime' },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ return clomusMap[this.detailInfo.Source] ? clomusMap[this.detailInfo.Source]
|
|
|
+ : [
|
|
|
+ { label: this.$t('SystemManage.OperateAuth.table_col_name05'),key: 'DataName' },
|
|
|
+ { label: '操作时间',key: 'CreateTime' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
watch:{
|
|
|
visible(val){
|
|
|
if(val){
|
|
|
this.getMsgList()
|
|
|
}
|
|
|
+ },
|
|
|
+ isOpenAuthDia(nval) {
|
|
|
+ if(!nval){
|
|
|
+ this.$refs.table.bodyWrapper.removeEventListener('scroll',this.handleScroll)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getAuthMsgDetail()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.table.bodyWrapper.addEventListener('scroll',this.handleScroll)
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
- readMsg(msg){
|
|
|
- const {ApproveState,ReportApproveId,Id} = msg
|
|
|
- approveInterence.readApproveMsg({
|
|
|
- MessageId:Id
|
|
|
- }).then(res=>{
|
|
|
- if(res.Ret!==200) return
|
|
|
- this.getMsgList()
|
|
|
- })
|
|
|
- const type = ApproveState===1?'approve':ApproveState===4?'detail':'myself'
|
|
|
- this.$router.push({
|
|
|
- path:'/approveDetail',
|
|
|
- query:{
|
|
|
- type,
|
|
|
- approveId:ReportApproveId
|
|
|
- }
|
|
|
- })
|
|
|
+ async readMsg(msg){
|
|
|
+ const {ApproveState,ReportApproveId,Id,DataPermissionMessageId} = msg
|
|
|
+
|
|
|
+ const res = this.activeName === 'first'
|
|
|
+ ? await approveInterence.readApproveMsg({
|
|
|
+ MessageId:Id
|
|
|
+ })
|
|
|
+ : await operateAuthInterface.redMessage({ MessageId: DataPermissionMessageId })
|
|
|
+
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ this.getMsgList()
|
|
|
+ this.getUnreadNum()
|
|
|
+
|
|
|
+ if(this.activeName === 'first' ) {
|
|
|
+ const type = ApproveState===1?'approve':ApproveState===4?'detail':'myself'
|
|
|
+ this.$router.push({
|
|
|
+ path:'/approveDetail',
|
|
|
+ query:{
|
|
|
+ type,
|
|
|
+ approveId:ReportApproveId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getMsgList(){
|
|
|
+ const res = this.activeName === 'first'
|
|
|
+ ? await approveInterence.getApproveMsgList({
|
|
|
+ CurrentIndex:1,
|
|
|
+ PageSize:1000
|
|
|
+ })
|
|
|
+ : await operateAuthInterface.getNoticeList({
|
|
|
+ CurrentIndex:1,
|
|
|
+ PageSize:1000
|
|
|
+ })
|
|
|
+
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ this.msgList = res.Data.List||[]
|
|
|
+ this.UnreadTotal = res.Data.UnreadTotal||0
|
|
|
+ },
|
|
|
+
|
|
|
+ async getUnreadNum() {
|
|
|
+ const res = await operateAuthInterface.getAllUnread()
|
|
|
+
|
|
|
+ if(res.Ret !== 200) return
|
|
|
+
|
|
|
+ this.allUnreadTotal = res.Data
|
|
|
+ },
|
|
|
+
|
|
|
+ openAuthDetail(item) {
|
|
|
+ this.detailInfo.MessageId = item.DataPermissionMessageId;
|
|
|
+ this.detailInfo.isAuthSet = [3,4].includes(item.OpType);
|
|
|
+ this.detailInfo.Source = item.Source;
|
|
|
+ this.detailInfo.SubSource = item.SubSource;
|
|
|
+ this.isOpenAuthDia = true
|
|
|
},
|
|
|
- getMsgList(){
|
|
|
- approveInterence.getApproveMsgList({
|
|
|
- CurrentIndex:1,
|
|
|
- PageSize:1000
|
|
|
- }).then(res=>{
|
|
|
- if(res.Ret!==200) return
|
|
|
- this.msgList = res.Data.List||[]
|
|
|
- this.UnreadTotal = res.Data.UnreadTotal||0
|
|
|
+
|
|
|
+ changeSource() {
|
|
|
+ this.page_no = 1;
|
|
|
+ this.detailInfo.SubSource = this.detailInfo.Source===6?4:0;
|
|
|
+ this.getAuthMsgDetail()
|
|
|
+ },
|
|
|
+
|
|
|
+ changeSubSource({key}) {
|
|
|
+ this.page_no = 1;
|
|
|
+ this.detailInfo.SubSource = key;
|
|
|
+ this.getAuthMsgDetail()
|
|
|
+ },
|
|
|
+
|
|
|
+ async getAuthMsgDetail() {
|
|
|
+ const { MessageId,Source,SubSource } = this.detailInfo;
|
|
|
+ const res = await operateAuthInterface.getNoticeDetail({
|
|
|
+ MessageId,
|
|
|
+ Source,
|
|
|
+ SubSource,
|
|
|
+ CurrentIndex: this.page_no
|
|
|
})
|
|
|
- }
|
|
|
+
|
|
|
+ if(res.Ret !== 200) return
|
|
|
+
|
|
|
+ let arr = res.Data.List||[]
|
|
|
+
|
|
|
+ this.haveMore = res.Data.Paging.Pages > this.page_no
|
|
|
+ this.tableData = this.page_no ===1 ? arr : [...this.tableData,...arr];
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 滚动事件 */
|
|
|
+ handleScroll:_.throttle(function(){
|
|
|
+ const {scrollTop,clientHeight,scrollHeight} = this.$refs.table.bodyWrapper
|
|
|
+ if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
|
|
|
+ this.page_no++;
|
|
|
+ this.getAuthMsgDetail();
|
|
|
+ }
|
|
|
+ },300),
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.getUnreadNum()
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -143,4 +360,32 @@ export default {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+.notice-auth-box {
|
|
|
+ .main {
|
|
|
+ //display: flex;
|
|
|
+ .left {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 15px;
|
|
|
+ .data-types {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ li {
|
|
|
+ padding: 5px 0;
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
+ &.act {
|
|
|
+ border-color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dia-bot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|