doc-detail.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div>
  3. <div class="my-title">查看</div>
  4. <div style="margin-left: 20px;margin-right: 20px">
  5. <e-desc title="基本信息" column="3">
  6. <e-desc-item label="文件名称">{{dataForm.fileName}}</e-desc-item>
  7. <e-desc-item label="文件描述">{{dataForm.fileDescribe}}</e-desc-item>
  8. <e-desc-item label="文件类别">{{fileTypeName}}</e-desc-item>
  9. <e-desc-item label="备注说明" span="2">{{dataForm.notes}}</e-desc-item>
  10. </e-desc>
  11. <e-desc title="附件">
  12. <e-desc-item span="2" label="电子文件">
  13. <div v-for="(item, index) in dataForm.attachList" style="display: inline">
  14. <span v-if="index > 0">,</span>
  15. <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
  16. </div>
  17. </e-desc-item>
  18. </e-desc>
  19. </div>
  20. <span slot="footer" class="dialog-footer">
  21. <el-button @click="onChose">返回</el-button>
  22. </span>
  23. <!-- 文件预览 -->
  24. <preview-component v-if="previewVisible" ref="preview"/>
  25. </div>
  26. <!-- </el-dialog> -->
  27. </template>
  28. <script>
  29. import EDesc from '../common/e-desc'
  30. import EDescItem from '../common/e-desc-item'
  31. import { getDocDetail } from '@/api/file'
  32. import { getDictValue } from '@/api/dict'
  33. import PreviewComponent from '../common/preview-component'
  34. export default {
  35. name: 'product-detail',
  36. components: {
  37. PreviewComponent,
  38. EDesc,
  39. EDescItem
  40. },
  41. data () {
  42. return {
  43. visible: false,
  44. previewVisible: false,
  45. id: 0,
  46. dataForm: {},
  47. fileTypeName: ''
  48. }
  49. },
  50. methods: {
  51. onChose () {
  52. this.$emit('onChose')
  53. },
  54. async init (id) {
  55. this.visible = true
  56. this.id = id || 0
  57. this.dataForm = {}
  58. this.fileTypeName = ''
  59. this.getDetails()
  60. },
  61. getDetails () {
  62. getDocDetail(this.id).then(({data}) => {
  63. if (data && data.code === '200') {
  64. this.dataForm = data.data
  65. if (data.data.fileType) {
  66. getDictValue({type: 'doc_file_type', code: data.data.fileType}).then((data1) => {
  67. if (data1.data) {
  68. this.fileTypeName = data1.data.value
  69. }
  70. })
  71. }
  72. }
  73. })
  74. },
  75. // 预览
  76. previewFile (fileName, url) {
  77. this.previewVisible = true
  78. this.$nextTick(() => {
  79. this.$refs.preview.init(fileName, url)
  80. })
  81. }
  82. }
  83. }
  84. </script>
  85. <style scoped>
  86. .my-line{
  87. border-bottom: 1px solid #c0c4cc;
  88. margin-bottom: 10px;
  89. }
  90. .title{
  91. padding: 10px 0 ;
  92. }
  93. </style>