notice-detail.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <el-dialog
  3. title="查看"
  4. width="70%"
  5. :close-on-click-modal="false"
  6. :visible.sync="visible">
  7. <div style="margin-left: 20px;margin-right: 20px">
  8. <!-- 工作流 -->
  9. <div v-show="dataForm.workFlowBusinessExt">
  10. <el-steps :active="dataForm.workFlowBusinessExt&&dataForm.workFlowBusinessExt.workFlowProcessStepList?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
  11. <template v-for="(item, i) in stepList">
  12. <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
  13. </template>
  14. </el-steps>
  15. <el-collapse style="margin-bottom: 20px">
  16. <el-collapse-item>
  17. <template slot="title">
  18. <span style="color: red">审批日志(展开查看更多):</span>
  19. </template>
  20. <template v-for="(item, i) in logList">
  21. <div>{{++i}}:{{item.approverName}} {{item.createTime}} {{item.approvalValue}}</div>
  22. </template>
  23. </el-collapse-item>
  24. </el-collapse>
  25. </div>
  26. <e-desc title="基本信息" column="3">
  27. <e-desc-item label="公告主题名称">{{dataForm.title}}</e-desc-item>
  28. <e-desc-item label="级别">{{dataForm.levelDesc}}</e-desc-item>
  29. <e-desc-item label="发布人">{{dataForm.publisherName}}</e-desc-item>
  30. <e-desc-item label="公告内容" span="3">{{dataForm.content}}</e-desc-item>
  31. </e-desc>
  32. <e-desc title="公告附件" column="3">
  33. <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
  34. </e-desc>
  35. <e-desc title="接收对象信息" column="3">
  36. <e-desc-item label="接收对象" span="3">{{dataForm.receiverList?dataForm.receiverList.toString():''}}</e-desc-item>
  37. <e-desc-item label="已读" span="3">{{dataForm.readReceiverList?dataForm.readReceiverList.toString():''}}</e-desc-item>
  38. </e-desc>
  39. </div>
  40. <span slot="footer" class="dialog-footer">
  41. <el-button @click="visible = false">返回</el-button>
  42. </span>
  43. </el-dialog>
  44. </template>
  45. <script>
  46. import EDesc from '../common/e-desc'
  47. import EDescItem from '../common/e-desc-item'
  48. import { dealStepData, dealStepLogs } from '@/api/util'
  49. import uploadComponent from '../common/upload-component'
  50. import { getNoticeDetail } from '@/api/notice'
  51. export default {
  52. name: 'notice-detail',
  53. components: {
  54. EDesc, EDescItem, uploadComponent
  55. },
  56. data () {
  57. return {
  58. visible: false,
  59. id: 0,
  60. dataForm: {},
  61. stepList: [],
  62. logList: [],
  63. fileList: []
  64. }
  65. },
  66. methods: {
  67. async init (id) {
  68. this.visible = true
  69. this.id = id || 0
  70. this.dataForm = {}
  71. this.stepList = []
  72. this.logList = []
  73. this.fileList = []
  74. this.getDetails()
  75. },
  76. getDetails () {
  77. getNoticeDetail(this.id).then(({data}) => {
  78. if (data && data.code === '200') {
  79. this.dataForm = data.data
  80. // 流程图展示
  81. if (data.data.workFlowBusinessExt) {
  82. dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
  83. dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
  84. }
  85. // 附件显示
  86. if (data.data.attaches) {
  87. data.data.attaches.forEach((item) => {
  88. this.fileList.push({
  89. name: item.fileName,
  90. url: item.url,
  91. id: item.url
  92. })
  93. })
  94. }
  95. }
  96. })
  97. }
  98. }
  99. }
  100. </script>
  101. <style scoped>
  102. .my-line{
  103. border-bottom: 1px solid #c0c4cc;
  104. margin-bottom: 10px;
  105. }
  106. .title{
  107. padding: 10px 0 ;
  108. }
  109. </style>