UpLoadComponentDialog.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!--文件上传组件-->
  2. <template>
  3. <div>
  4. <el-dialog
  5. :title="title"
  6. :close-on-click-modal="false"
  7. draggable
  8. width="1400px"
  9. height="500px"
  10. @close="close"
  11. append-to-body
  12. @keyup.enter.native=""
  13. v-model="visible">
  14. <UpLoadComponentV2 ref="upLoadComponentV2"></UpLoadComponentV2>
  15. <span slot="footer" class="dialog-footer">
  16. <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
  17. <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
  18. </span>
  19. </el-dialog>
  20. </div>
  21. </template>
  22. <script>
  23. import UpLoadComponentV2 from './UpLoadComponentV2'
  24. export default {
  25. data () {
  26. return {
  27. visible: false,
  28. title: '',
  29. index: ''
  30. }
  31. },
  32. computed: {
  33. },
  34. watch: {
  35. },
  36. created () {
  37. },
  38. components: {
  39. UpLoadComponentV2
  40. },
  41. mounted () {
  42. },
  43. methods: {
  44. /**
  45. * 文件上传组件初始化
  46. * @param auth
  47. * auth的值为"view"时,不可上传/编辑文件
  48. * auth为其他值时,可上传/编辑文件
  49. * @param fileList 要显示到文件上传列表中的文件。
  50. * 注:文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
  51. * 例:'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
  52. * @param directory 要存放到oss的哪个文件夹下。
  53. * 注:值为空时,默认存放到"public"文件夹
  54. * @param maxValue 上传文件允许的最大值,单位:MB
  55. * 注:值为空时,默认值为300MB
  56. * @param dividerName 组件中divider的名称
  57. * 注:值为空时,默认值为‘附件’
  58. * @param uploadFlag ‘上传文件’按钮是否禁用
  59. * 注:值为空时,默认值为false
  60. * auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
  61. * @param delFlag ‘删除’按钮是否禁用
  62. * 注:值为空时,默认值为false
  63. * auth=view&&delFlag=false时 ‘删除’按钮禁用
  64. * @param showDivider ‘附件‘Divider是否展示
  65. * 注:值为空时,默认值为true
  66. * showDivider=false时 ‘附件‘Divider隐藏
  67. */
  68. newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider, index) {
  69. this.index = index
  70. this.title = '附件'
  71. this.visible = true
  72. this.$nextTick(() => {
  73. this.$refs.upLoadComponentV2.newUpload(auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider)
  74. })
  75. },
  76. doSubmit () {
  77. if (!this.$refs.upLoadComponentV2.checkProgress()) {
  78. this.$emit('getUpload', this.$refs.upLoadComponentV2.getDataList(), this.index)
  79. this.close()
  80. }
  81. },
  82. close () {
  83. this.$refs.upLoadComponentV2.clearUpload()
  84. this.visible = false
  85. }
  86. }
  87. }
  88. </script>