uploadFile.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <div class="uploadFile">
  3. <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" :append-to-body="true"
  4. :close-on-click-modal="false" label-width="300px">
  5. <el-form :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
  6. <el-form-item label="流程:" prop="processId">
  7. <el-select v-model="form.processId" placeholder="请选择流程" style="width: 100%;">
  8. <el-option v-for="item in pathOptions" :key="item.value" :label="item.label" :value="item.value">
  9. </el-option>
  10. </el-select>
  11. </el-form-item>
  12. <el-form-item label="附件:" prop="delivery">
  13. <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove"
  14. @on-preview="onPreview" style="height: 185px;" :autoUpload="true"></myUpload>
  15. </el-form-item>
  16. <el-form-item label="最终文件:" prop="ifFinal" style="width: 20px;">
  17. <el-switch v-model="form.ifFinal" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
  18. </el-form-item>
  19. <el-form-item label="说明:">
  20. <el-input v-model="form.description" type="textarea" placeholder="请输入说明内容"></el-input>
  21. </el-form-item>
  22. </el-form>
  23. <span slot="footer" class="dialog-footer">
  24. <el-button @click="handleClose" size="small">取 消</el-button>
  25. <el-button @click="submit" size="small" type="primary">直接上传</el-button>
  26. <el-button v-if="!form.ifFinal && !form.id" @click="examine" size="small" type="primary">提交审核</el-button>
  27. </span>
  28. </el-dialog>
  29. <examine ref="examine" @taskForm="handleTaskForm" @examineFile="handleExamineFile"></examine>
  30. </div>
  31. </template>
  32. <script>
  33. import { optionsData, handleJs } from '../mixins/index2'
  34. import examine from '@/views/components/dialog/examine.vue'
  35. export default {
  36. mixins: [optionsData, handleJs],
  37. components: {
  38. examine,
  39. },
  40. props: ['pathObj'],
  41. data() {
  42. return {
  43. dialogVisible: false,
  44. title: '',
  45. form: {
  46. systemFileList: [],
  47. ifFinal: false,
  48. },
  49. rules: {
  50. processId: [{ required: true, message: '请选择流程', trigger: 'change' },],
  51. },
  52. };
  53. },
  54. watch: {},
  55. computed: {},
  56. created() { },
  57. mounted() { },
  58. methods: {
  59. // 提交审核任务
  60. handleExamineFile(val) {
  61. let patentDigProjectFilesDTO = {
  62. ...this.form,
  63. projectTaskDTO: val,
  64. }
  65. this.$api.addPDProjectFilesTask(patentDigProjectFilesDTO).then(res => {
  66. if (res.code == 200) {
  67. this.getList()
  68. this.$refs.examine.close()
  69. this.handleClose()
  70. }
  71. })
  72. },
  73. //提交审核
  74. examine() {
  75. this.$refs.form.validate((valid) => {
  76. if (valid) {
  77. var allUpload = this.validFile()
  78. if (allUpload) {
  79. this.$message.warning('文件未全部上传,请耐心等待')
  80. return false
  81. }
  82. this.form.fileGuids = this.form.systemFileList.map(item => {
  83. return item.guid
  84. })
  85. this.$refs.examine.open(null, 7)
  86. }
  87. })
  88. },
  89. // 审核弹窗发送的值
  90. handleTaskForm(val) {
  91. this.$emit('isSuccess', '新增成功')
  92. this.handleClose()
  93. },
  94. //打开弹窗
  95. open(row, id) {
  96. if (row && row.id) {
  97. this.form = JSON.parse(JSON.stringify(row))
  98. if (!this.form.systemFileList) {
  99. this.$set(this.form, 'systemFileList', [])
  100. }
  101. this.title = '编辑文件'
  102. } else {
  103. if (this.pathObj) {
  104. this.$set(this.form, 'processId', this.pathObj.pathId)
  105. }
  106. this.title = '上传文件'
  107. }
  108. this.form.projectId = id//项目id
  109. this.dialogVisible = true
  110. },
  111. //关闭弹窗
  112. handleClose() {
  113. this.$refs.form.resetFields()
  114. this.form = {
  115. systemFileList: [],
  116. }
  117. this.dialogVisible = false
  118. },
  119. //提交数据
  120. submit() {
  121. this.$refs.form.validate((valid) => {
  122. if (valid) {
  123. // 判断文件是否都上传完毕
  124. var allUpload = this.validFile()
  125. if (allUpload) {
  126. this.$message.warning('文件未全部上传,请耐心等待')
  127. return false
  128. }
  129. this.form.fileGuids = this.form.systemFileList.map(item => {
  130. return item.guid
  131. })
  132. if (!this.form.id) {
  133. this.$api.addPatentDigProjectFiles(this.form).then(res => {
  134. if (res.code == 200) {
  135. this.$message.success('新增成功')
  136. this.$emit('isSuccess', '新增成功')
  137. this.handleClose()
  138. }
  139. })
  140. }
  141. } else {
  142. this.$message.error('信息未输入完整')
  143. }
  144. });
  145. },
  146. // 上传的文件监听
  147. onchangeFile(file, fileList) {
  148. if (file.guid) {
  149. let index = this.form.systemFileList.findIndex(item => {
  150. return item.uid == file.uid
  151. })
  152. if (index != -1) {
  153. this.form.systemFileList.splice(index, 1, file)
  154. }
  155. } else {
  156. this.form.systemFileList.push(file.raw)
  157. }
  158. },
  159. // 删除上传的文件
  160. onRemove(file, fileList) {
  161. let index = this.form.systemFileList.findIndex(item => {
  162. return item.uid == file.uid
  163. })
  164. if (index != -1) {
  165. this.form.systemFileList.splice(index, 1)
  166. }
  167. },
  168. // 点击文件
  169. onPreview(file) { },
  170. },
  171. };
  172. </script>
  173. <style lang="scss">
  174. .uploadFile {
  175. .el-dialog__body {
  176. padding: 0px 20px;
  177. }
  178. }
  179. </style>
  180. <style lang="scss" scoped></style>