expense-detail.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <!-- <el-dialog
  3. title="查看"
  4. width="70%"
  5. :close-on-click-modal="false"
  6. :visible.sync="visible"> -->
  7. <div>
  8. <div class="my-title">查看</div>
  9. <div style="margin-left: 20px;margin-right: 20px">
  10. <!-- 工作流 -->
  11. <div v-if="dataForm.workFlowBusinessExt && dataForm.workFlowBusinessExt.workFlowProcessStepList">
  12. <el-steps :active="stepActive" align-center finish-status="success" style="margin-bottom: 20px">
  13. <template v-for="(item, i) in dataForm.workFlowBusinessExt.workFlowProcessStepList">
  14. <el-step :title="item.stepName" :description="item.assigneeName"></el-step>
  15. </template>
  16. </el-steps>
  17. <el-collapse style="margin-bottom: 20px">
  18. <el-collapse-item>
  19. <template slot="title">
  20. <span style="color: red">操作日志(展开查看更多):</span>
  21. </template>
  22. <template v-for="(item, i) in dataForm.workFlowBusinessExt.processLogList">
  23. <div>{{++i}}:{{item.approverName}} {{item.createTime}} {{item.approvalValue}}</div>
  24. </template>
  25. </el-collapse-item>
  26. </el-collapse>
  27. </div>
  28. <e-desc title="基本信息" column="3">
  29. <e-desc-item label="编码">{{dataForm.code}}</e-desc-item>
  30. <e-desc-item label="发生日期">{{dataForm.happenTime}}</e-desc-item>
  31. <e-desc-item label="报销金额">{{dataForm.submitExpenseAmount}}</e-desc-item>
  32. <e-desc-item label="报销内容" span="3">{{dataForm.happenContent}}</e-desc-item>
  33. <e-desc-item label="备注说明" span="3">{{dataForm.notes}}</e-desc-item>
  34. </e-desc>
  35. <e-desc title="报销证明附件">
  36. <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
  37. </e-desc>
  38. </div>
  39. <span slot="footer" class="dialog-footer">
  40. <el-button @click="onChose">返回</el-button>
  41. </span>
  42. </div>
  43. <!-- </el-dialog> -->
  44. </template>
  45. <script>
  46. import EDesc from '../common/e-desc'
  47. import EDescItem from '../common/e-desc-item'
  48. import uploadComponent from '../common/upload-component'
  49. import { getExpenseDetail } from '@/api/finance'
  50. export default {
  51. name: 'expense-detail',
  52. components: {
  53. EDesc, EDescItem, uploadComponent
  54. },
  55. data () {
  56. return {
  57. visible: false,
  58. id: 0,
  59. dataForm: {},
  60. cusRCommProductVOS: [],
  61. fileList: []
  62. }
  63. },
  64. computed: {
  65. stepActive () {
  66. if (!(this.dataForm.workFlowBusinessExt && this.dataForm.workFlowBusinessExt.workFlowProcessStepList)) {
  67. return 0
  68. }
  69. let stepIndex = this.dataForm.workFlowBusinessExt.workFlowProcessStepList.findIndex(item => item.stepId === this.dataForm.workFlowBusinessExt.currentStepId)
  70. return stepIndex !== -1 ? stepIndex : 0
  71. }
  72. },
  73. methods: {
  74. onChose () {
  75. this.$emit('onChose')
  76. },
  77. async init (id) {
  78. this.visible = true
  79. this.id = id || 0
  80. if (!id) return
  81. await getExpenseDetail(this.id).then(({data}) => {
  82. if (data && data.code === '200') {
  83. this.dataForm = data.data
  84. // 文件列表
  85. this.fileList = []
  86. if (data.data.attachList) {
  87. data.data.attachList.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>