|
@@ -1,136 +1,146 @@
|
|
<template>
|
|
<template>
|
|
- <div class="box">
|
|
|
|
- <div class="condition">
|
|
|
|
- <div class="main" :style="tableData && tableData.length?'height: calc(100% - 50px);':'height: calc(100% - 46px);'">
|
|
|
|
- <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" :header-cell-style="headerStyle"
|
|
|
|
- @expand-change="changeMessageState">
|
|
|
|
- <el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
- <el-table-column width="25">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <el-badge class="item" type="warning" is-dot v-if="!scope.row.Read"></el-badge>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="Title" label="标题内容" width="600"></el-table-column>
|
|
|
|
- <el-table-column label="模块" width="200">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- {{ moduleMap[scope.row.Module] }}
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="CreateTime" label="消息时间">
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="消息类型">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <div>
|
|
|
|
- <span>{{ scope.row.Type }}</span>
|
|
|
|
- <i :class="iconClassMap[scope.row.Type]?iconClassMap[scope.row.Type]:'msg-icon el-icon-info info-color'"></i>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column type="expand">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <p>{{ scope.row.Content.Message }}</p>
|
|
|
|
- <el-link is-underline="false" v-for="(btn, index) in scope.row.Content.ButtonList" style="float:left;font-size:12px;color:white;width:"
|
|
|
|
- :key="index" :href="`/image-service/common/file_get?systemId=revit&key=${btn.Url}`" :download="btn.FileName?btn.FileName:''">
|
|
|
|
- {{btn.Name}}
|
|
|
|
- </el-link>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <template slot="empty">
|
|
|
|
- <div style="height: 60%;transform: translateY(50%);">
|
|
|
|
- <i class="icon-wushuju iconfont"></i>
|
|
|
|
- 数据暂无
|
|
|
|
|
|
+ <div class="box">
|
|
|
|
+ <div class="condition">
|
|
|
|
+ <div class="main" :style="tableData && tableData.length?'height: calc(100% - 50px);':'height: calc(100% - 46px);'">
|
|
|
|
+ <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" :header-cell-style="headerStyle"
|
|
|
|
+ @expand-change="changeMessageState">
|
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
|
+ <el-table-column width="25">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-badge class="item" type="warning" is-dot v-if="!scope.row.Read"></el-badge>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="Title" label="标题内容" width="600"></el-table-column>
|
|
|
|
+ <el-table-column label="模块" width="200">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ {{ moduleMap[scope.row.Module] }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="CreateTime" label="消息时间">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="消息类型">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div>
|
|
|
|
+ <i :class="iconClassMap[scope.row.Type]?iconClassMap[scope.row.Type]:'msg-icon el-icon-info info-color'" style="font-size:14px;"></i>
|
|
|
|
+ <span>{{ typeMap[scope.row.Type] }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- </el-table>
|
|
|
|
- </div>
|
|
|
|
- <el-pagination class="right" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
|
- :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
- :total="page.total">
|
|
|
|
- </el-pagination>
|
|
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column type="expand">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <p>{{ scope.row.Content.Message }}</p>
|
|
|
|
+ <el-link v-for="(btn, index) in scope.row.Content.ButtonList" style="float:left;font-size:12px;color:white;width:"
|
|
|
|
+ :key="index" :href="`/image-service/common/file_get?systemId=revit&key=${btn.Url}`" :download="btn.FileName?btn.FileName:''">
|
|
|
|
+ {{btn.Name}}
|
|
|
|
+ </el-link>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <template slot="empty">
|
|
|
|
+ <div style="height: 60%;transform: translateY(50%);">
|
|
|
|
+ <i class="icon-wushuju iconfont"></i>
|
|
|
|
+ 数据暂无
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table>
|
|
</div>
|
|
</div>
|
|
|
|
+ <el-pagination class="right" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
|
+ :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
+ :total="page.total">
|
|
|
|
+ </el-pagination>
|
|
</div>
|
|
</div>
|
|
- </template>
|
|
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import { mapGetters } from 'vuex'
|
|
|
|
- import { messgeCount, messgeQuery, messgeUpdateState, messgeUpdate } from '@/api/msgsever'
|
|
|
|
- import Bus from '@/utils/bus.js'
|
|
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
+import { messgeQuery, messgeUpdate } from '@/api/msgsever'
|
|
|
|
+import Bus from '@/utils/bus.js'
|
|
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- tableData: [],
|
|
|
|
- loading: false,
|
|
|
|
- page: {
|
|
|
|
- pageSize: 50,
|
|
|
|
- pageSizes: [10, 20, 50, 100],
|
|
|
|
- pageNumber: 1,
|
|
|
|
- total: 0
|
|
|
|
- },
|
|
|
|
- headerStyle: {
|
|
|
|
- backgroundColor: '#e1e4e5',
|
|
|
|
- color: '#2b2b2b',
|
|
|
|
- lineHeight: '30px'
|
|
|
|
- }, // 列表样式
|
|
|
|
- moduleMap: {//消息模块映射
|
|
|
|
- "Model": "模型文件管理"
|
|
|
|
- },
|
|
|
|
- iconClassMap: { //消息类型图标映射
|
|
|
|
- "Success": "msg-icon el-icon-success success-color",
|
|
|
|
- "Error": "msg-icon el-icon-error error-color",
|
|
|
|
- "Warning": "msg-icon el-icon-warning warning-color",
|
|
|
|
- "Info": "msg-icon el-icon-info info-color",
|
|
|
|
- }
|
|
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ tableData: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ page: {
|
|
|
|
+ pageSize: 50,
|
|
|
|
+ pageSizes: [10, 20, 50, 100],
|
|
|
|
+ pageNumber: 1,
|
|
|
|
+ total: 0
|
|
|
|
+ },
|
|
|
|
+ headerStyle: {// 列表样式
|
|
|
|
+ backgroundColor: '#e1e4e5',
|
|
|
|
+ color: '#2b2b2b',
|
|
|
|
+ lineHeight: '30px'
|
|
|
|
+ },
|
|
|
|
+ moduleMap: {//消息模块映射
|
|
|
|
+ "Model": "模型文件管理"
|
|
|
|
+ },
|
|
|
|
+ iconClassMap: { //消息类型图标映射
|
|
|
|
+ "Success": "msg-icon el-icon-success success-color",
|
|
|
|
+ "Error": "msg-icon el-icon-error error-color",
|
|
|
|
+ "Warning": "msg-icon el-icon-warning warning-color",
|
|
|
|
+ "Info": "msg-icon el-icon-info info-color",
|
|
|
|
+ },
|
|
|
|
+ typeMap: { //消息类型文字映射
|
|
|
|
+ "Success": "成功",
|
|
|
|
+ "Error": "错误",
|
|
|
|
+ "Warning": "警告",
|
|
|
|
+ "Info": "提醒",
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters('layout', ['userId'])
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getTableData();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 获取列表数据
|
|
|
|
+ getTableData() {
|
|
|
|
+ let params = {
|
|
|
|
+ Cascade: [
|
|
|
|
+ {
|
|
|
|
+ Name: "project"
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ Filters: `UserId='${this.userId}'`,
|
|
|
|
+ Orders: "CreateTime desc, Id asc",
|
|
|
|
+ PageNumber: this.page.pageNumber,
|
|
|
|
+ PageSize: this.page.pageSize
|
|
}
|
|
}
|
|
|
|
+ this.loading = true;
|
|
|
|
+ messgeQuery(params, res => {
|
|
|
|
+ this.tableData = res.Content;
|
|
|
|
+ this.page.total = res.Total;
|
|
|
|
+ this.loading = false;
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- computed: {
|
|
|
|
- ...mapGetters('layout', ['userInfo', 'projects', 'userId'])
|
|
|
|
|
|
+ // 切换每页显示数量
|
|
|
|
+ handleSizeChange(val) {
|
|
|
|
+ this.page.pageSize = val;
|
|
|
|
+ this.getTableData();
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- this.getTableData()
|
|
|
|
|
|
+ // 切换页码
|
|
|
|
+ handleCurrentChange(val) {
|
|
|
|
+ this.page.pageNumber = val;
|
|
|
|
+ this.getTableData();
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- getTableData() {
|
|
|
|
- let params = this.formatFilter();
|
|
|
|
- this.loading = true;
|
|
|
|
- messgeQuery(params, res => {
|
|
|
|
- this.tableData = res.Content.map(item => { return item })
|
|
|
|
- this.page.total = res.Content.length;
|
|
|
|
- })
|
|
|
|
- this.loading = false;
|
|
|
|
- },
|
|
|
|
- formatFilter() {
|
|
|
|
- let params = {
|
|
|
|
- Cascade: [
|
|
|
|
- {
|
|
|
|
- Name: "project"
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- Filters: `UserId='${this.userId}'`,
|
|
|
|
- Orders: "CreateTime desc, Id asc",
|
|
|
|
- pageNumber: this.page.pageNumber,
|
|
|
|
- pageSize: this.page.pageSize
|
|
|
|
- }
|
|
|
|
- return params;
|
|
|
|
- },
|
|
|
|
- handleSizeChange(val) {
|
|
|
|
- this.page.pageSize = val;
|
|
|
|
- this.getTableData();
|
|
|
|
- },
|
|
|
|
- handleCurrentChange(val) {
|
|
|
|
- this.page.pageNumber = val;
|
|
|
|
- this.getTableData();
|
|
|
|
- },
|
|
|
|
- changeMessageState(val) {
|
|
|
|
- val.Read = true;
|
|
|
|
- let params = {
|
|
|
|
- Content: [...val],
|
|
|
|
- Projection: ["Read"]
|
|
|
|
- };
|
|
|
|
- messgeUpdate(params);// 展开更新为已读状态
|
|
|
|
|
|
+ // 更新消息状态:已读、未读
|
|
|
|
+ changeMessageState(val) {
|
|
|
|
+ val.Read = true;
|
|
|
|
+ let params = {
|
|
|
|
+ Content: [{
|
|
|
|
+ Id: val.Id,
|
|
|
|
+ Read: true
|
|
|
|
+ }]
|
|
}
|
|
}
|
|
|
|
+ messgeUpdate(params, res => {
|
|
|
|
+ Bus.$emit('getUnreadCountUpdate')
|
|
|
|
+ });// 展开更新为已读状态,未读数量同步变更
|
|
}
|
|
}
|
|
- };
|
|
|
|
|
|
+ }
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang='less'>
|
|
<style scoped lang='less'>
|
|
@@ -144,6 +154,9 @@
|
|
background: #fff;
|
|
background: #fff;
|
|
.main {
|
|
.main {
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
|
|
+ a{
|
|
|
|
+ text-decoration: none;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -156,14 +169,11 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-link {
|
|
.el-link {
|
|
- margin: 40px 0 0 40px;
|
|
|
|
|
|
+ margin: 20px 0 0 40px;
|
|
background: #409eff;
|
|
background: #409eff;
|
|
border-radius: 3px;
|
|
border-radius: 3px;
|
|
padding: 3px 15px;
|
|
padding: 3px 15px;
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
-
|
|
|
|
-<style>
|
|
|
|
.demo-table-expand {
|
|
.demo-table-expand {
|
|
font-size: 0;
|
|
font-size: 0;
|
|
}
|
|
}
|