msgAllDetails.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <div class="box">
  3. <div class="condition">
  4. <div class="main" :style="tableData && tableData.length?'height: calc(100% - 50px);':'height: calc(100% - 46px);'">
  5. <el-table ref="multipleTable" :data="tableData" v-loading='loading' stripe height="100%" :header-cell-style="headerStyle"
  6. @expand-change="changeMessageState">
  7. <el-table-column type="selection" width="55"></el-table-column>
  8. <el-table-column width="25">
  9. <template slot-scope="scope">
  10. <el-badge class="item" type="warning" is-dot v-if="!scope.row.Read"></el-badge>
  11. </template>
  12. </el-table-column>
  13. <el-table-column prop="Title" label="标题内容" min-width="300" show-overflow-tooltip></el-table-column>
  14. <el-table-column label="项目">
  15. <template slot-scope="scope">
  16. {{ scope.row.Project[0].ProjLocalName }}
  17. </template>
  18. </el-table-column>
  19. <el-table-column label="模块" width="200">
  20. <template slot-scope="scope">
  21. {{ moduleMap[scope.row.Module]?moduleMap[scope.row.Module]:scope.row.Module }}
  22. </template>
  23. </el-table-column>
  24. <el-table-column prop="CreateTime" label="消息时间">
  25. </el-table-column>
  26. <el-table-column label="消息类型">
  27. <template slot-scope="scope">
  28. <div>
  29. <i :class="iconClassMap[scope.row.Type]?iconClassMap[scope.row.Type]:'msg-icon el-icon-warning warning-color'" style="font-size:14px;"></i>
  30. <span>{{ typeMap[scope.row.Type]?typeMap[scope.row.Type]:scope.row.Type }}</span>
  31. </div>
  32. </template>
  33. </el-table-column>
  34. <el-table-column type="expand">
  35. <template slot-scope="scope">
  36. <p>{{ scope.row.Content.Message }}</p>
  37. <el-link v-for="(btn, index) in scope.row.Content.ButtonList" style="float:left;font-size:12px;color:white;width:"
  38. :key="index" :href="`/image-service/common/file_get?systemId=revit&key=${btn.Url}`" :download="btn.FileName?btn.FileName:''">
  39. {{btn.Name}}
  40. </el-link>
  41. </template>
  42. </el-table-column>
  43. <template slot="empty">
  44. <div style="height: 60%;transform: translateY(50%);">
  45. <i class="icon-wushuju iconfont"></i>
  46. 数据暂无
  47. </div>
  48. </template>
  49. </el-table>
  50. </div>
  51. <el-pagination class="right" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
  52. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
  53. :total="page.total">
  54. </el-pagination>
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. import { mapGetters } from 'vuex'
  60. import { messgeQuery, messgeUpdate } from '@/api/msgsever'
  61. import Bus from '@/utils/bus.js'
  62. export default {
  63. data() {
  64. return {
  65. tableData: [],
  66. loading: false,
  67. page: {
  68. pageSize: 50,
  69. pageSizes: [10, 20, 50, 100],
  70. pageNumber: 1,
  71. total: 0
  72. },
  73. headerStyle: {// 列表样式
  74. backgroundColor: '#e1e4e5',
  75. color: '#2b2b2b',
  76. lineHeight: '30px'
  77. },
  78. moduleMap: {//消息模块映射
  79. "Model": "模型文件管理"
  80. },
  81. iconClassMap: { //消息类型图标映射
  82. "Success": "msg-icon el-icon-success success-color",
  83. "Error": "msg-icon el-icon-error error-color",
  84. "Warning": "msg-icon el-icon-warning warning-color",
  85. "Info": "msg-icon el-icon-info info-color",
  86. },
  87. typeMap: { //消息类型文字映射
  88. "Success": "成功",
  89. "Error": "错误",
  90. "Warning": "警告",
  91. "Info": "提醒",
  92. }
  93. }
  94. },
  95. computed: {
  96. ...mapGetters('layout', ['userId'])
  97. },
  98. mounted() {
  99. this.getTableData();
  100. },
  101. methods: {
  102. // 获取列表数据
  103. getTableData() {
  104. let params = {
  105. Cascade: [
  106. {
  107. Name: "project"
  108. }
  109. ],
  110. Filters: `UserId='${this.userId}'`,
  111. Orders: "CreateTime desc, Id asc",
  112. PageNumber: this.page.pageNumber,
  113. PageSize: this.page.pageSize
  114. }
  115. this.loading = true;
  116. messgeQuery(params, res => {
  117. this.tableData = res.Content;
  118. this.page.total = res.Total;
  119. this.loading = false;
  120. })
  121. },
  122. // 切换每页显示数量
  123. handleSizeChange(val) {
  124. this.page.pageSize = val;
  125. this.getTableData();
  126. },
  127. // 切换页码
  128. handleCurrentChange(val) {
  129. this.page.pageNumber = val;
  130. this.getTableData();
  131. },
  132. // 更新消息状态:已读、未读
  133. changeMessageState(val) {
  134. if(!val.Read){
  135. val.Read = true;
  136. let params = {
  137. Content: [{
  138. Id: val.Id,
  139. Read: true
  140. }]
  141. }
  142. messgeUpdate(params, res => {
  143. Bus.$emit('getUnreadCountUpdate')
  144. });// 展开更新为已读状态,未读数量同步变更
  145. }
  146. }
  147. }
  148. };
  149. </script>
  150. <style scoped lang='less'>
  151. .box {
  152. .condition {
  153. padding: 10px;
  154. display: flex;
  155. height: 100%;
  156. flex-direction: column;
  157. border: 1px solid #dfe6ec;
  158. background: #fff;
  159. .main {
  160. margin-top: 10px;
  161. a{
  162. text-decoration: none;
  163. }
  164. }
  165. }
  166. }
  167. .el-badge.item {
  168. height: 10px;
  169. }
  170. .el-table__expanded-cell {
  171. p {
  172. margin-left: 40px;
  173. }
  174. }
  175. .el-link {
  176. margin: 20px 0 0 40px;
  177. background: #409eff;
  178. border-radius: 3px;
  179. padding: 3px 15px;
  180. }
  181. .demo-table-expand {
  182. font-size: 0;
  183. }
  184. .demo-table-expand label {
  185. width: 90px;
  186. color: #99a9bf;
  187. }
  188. .demo-table-expand .el-form-item {
  189. margin-right: 0;
  190. margin-bottom: 0;
  191. margin-left: 120px;
  192. width: 100%;
  193. }
  194. .success-color {
  195. color: #67c23a;
  196. }
  197. .error-color {
  198. color: #f56c6c;
  199. }
  200. .warning-color {
  201. color: #e6a23c;
  202. }
  203. .info-color {
  204. color: #909399;
  205. }
  206. </style>