UpLoadComponentV2.1.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800
  1. <!--文件上传组件-->
  2. <template>
  3. <div :key="uploadKey">
  4. <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{ dividerName
  5. }}</el-divider>
  6. <el-upload ref="upload" style="display: inline-block; :show-header='status'" action="" :limit="999"
  7. :http-request="httpRequest" multiple :on-exceed="(files, fileList) => {
  8. $message.warning(`当前限制选择 999 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
  9. }" :show-file-list="false" :on-change="changes" :on-progress="uploadVideoProcess" :file-list="fileList">
  10. <template v-if="auth === 'view' && uploadFlag === false" #tip>
  11. <el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
  12. </template>
  13. <template v-else #trigger>
  14. <el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
  15. </template>
  16. <AttachmentLib v-if="auth !== 'view'" :directory="directory" @onDownToOss="handleOnDownToOss">
  17. </AttachmentLib>
  18. </el-upload>
  19. <el-button v-if="showSign" :loading="loading" type="info" style="float: right;" @click="clickSign">签章</el-button>
  20. <div style="height: calc(100% - 80px);margin-top: 10px">
  21. <!-- 进度条 -->
  22. <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
  23. <el-table ref="uploadTable" :key="tableKey" v-loading="loading" :data="dataListNew">
  24. <el-table-column type="seq" width="40"></el-table-column>
  25. <el-table-column label="文件名称" prop="name" align="center">
  26. <template #default="scope">
  27. <div v-if="ifName(scope.row) === true">
  28. <el-image style="width: 30px; height: 30px;padding-top: 4px" :src="scope.row.lsUrl"
  29. :preview-src-list="[scope.row.lsUrl]"></el-image>
  30. </div>
  31. <div v-else>
  32. <el-link type="primary" :underline="false" @click="showFile(scope.row)">{{ scope.row.name }}</el-link>
  33. </div>
  34. </template>
  35. </el-table-column>
  36. <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
  37. <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
  38. <el-table-column label="文件大小" prop="size" align="center">
  39. <template #default="scope">
  40. {{ getSize(scope.row.size) }}
  41. </template>
  42. </el-table-column>
  43. <el-table-column label="文件类型" prop="fileType" align="center">
  44. <template #header="{ column }">
  45. <span style="color: red; font-size: 20px">*</span>
  46. <span>{{ column.label }}</span>
  47. </template>
  48. <!-- <template slot="header" scope="scope">-->
  49. <!-- <span style="color:red;font-size: 20px">* </span><span>文件类型</span>-->
  50. <!-- </template>-->
  51. <template #default="scope">
  52. <el-select v-if="auth !== 'view'" v-model="scope.row.fileType" placeholder="请选择">
  53. <el-option v-for="item in $dictUtils.getDictList('cw_project_report_file_type')" :key="item.value"
  54. :label="item.label" :value="item.value">
  55. </el-option>
  56. </el-select>
  57. <span v-else>{{ $dictUtils.getDictLabel("cw_project_report_file_type", scope.row.fileType, '') }}</span>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="盖章类型" prop="sealType" align="center">
  61. <template #header="{ column }">
  62. <span style="color: red; font-size: 20px">*</span>
  63. <span>{{ column.label }}</span>
  64. </template>
  65. <!-- <template slot="header" scope="scope">-->
  66. <!-- <span style="color:red;font-size: 20px">* </span><span>盖章类型</span>-->
  67. <!-- </template>-->
  68. <template #default="scope">
  69. <el-select v-if="auth !== 'view'" @change="sealTypeChange(scope)" v-model="scope.row.sealType"
  70. placeholder="请选择">
  71. <el-option v-for="item in $dictUtils.getDictList('cw_seal_type')" :key="item.value" :label="item.label"
  72. :value="item.value">
  73. </el-option>
  74. </el-select>
  75. <span v-else>{{ $dictUtils.getDictLabel("cw_seal_type", scope.row.sealType, '') }}</span>
  76. </template>
  77. </el-table-column>
  78. <el-table-column label="备注" prop="remarks" align="center">
  79. <template #default="scope">
  80. <el-input v-if="auth !== 'view'" v-model="scope.row.remarks" placeholder="请输入"></el-input>
  81. <span v-else>{{ commonJS.isEmpty(scope.row.remarks) ? '' : scope.row.remarks }}</span>
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="操作" width="200px" fixed="right" align="center">
  85. <template #default="scope">
  86. <el-button text type="primary" icon="el-icon-edit" @click="toHref(scope.row)"
  87. :disabled="false">下载</el-button>
  88. <el-button text type="primary" icon="el-icon-delete" @click="deleteById(scope.row, scope.$index, fileList)"
  89. :disabled="auth === 'view' && delFlag === false && createBy !== scope.row.createBy.name">删除</el-button>
  90. <!--<el-button text type="primary" icon="el-icon-edit"
  91. @click="handleUpdate(scope.row, scope.$index)"
  92. >{{ scope.row.btn || "修改" }}</el-button>-->
  93. </template>
  94. </el-table-column>
  95. </el-table>
  96. </div>
  97. <!-- <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>-->
  98. </div>
  99. </template>
  100. <script>
  101. // eslint-disable-next-line no-unused-vars
  102. import OSSSerivce, {
  103. httpRequest,
  104. // eslint-disable-next-line no-unused-vars
  105. handleRemove,
  106. fileName,
  107. // eslint-disable-next-line no-unused-vars
  108. beforeAvatarUpload,
  109. // eslint-disable-next-line no-unused-vars
  110. openWindowOnUrl,
  111. // eslint-disable-next-line no-unused-vars
  112. toHref
  113. } from '@/api/sys/OSSService'
  114. // import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  115. import AttachmentLib from './AttachmentLib.vue'
  116. import moment from 'moment'
  117. export default {
  118. data() {
  119. return {
  120. uploadKey: '',
  121. progressFlag: false,
  122. loadProgress: 0,
  123. fileList: [],
  124. dataList: [],
  125. dataListNew: [],
  126. url: '',
  127. showViewer: false,
  128. ossService: null,
  129. auth: '',
  130. directory: 'public',
  131. maxValue: 300,
  132. tableKey: '',
  133. fileLoading: true,
  134. dividerName: '',
  135. uploadFlag: false,
  136. delFlag: false,
  137. createBy: '',
  138. showDivider: true,
  139. fileType: '',
  140. sealType: '',
  141. remarks: '',
  142. showSign: false,
  143. loading: false,
  144. dataListLength: ''
  145. }
  146. },
  147. watch: {
  148. },
  149. created() {
  150. this.ossService = new OSSSerivce()
  151. },
  152. components: {
  153. AttachmentLib,
  154. // ElImageViewer,
  155. fileTypeComponentA: {
  156. render: function (h) {
  157. return h('span', {
  158. domProps: {
  159. innerText: this.$dictUtils.getDictLabel('cw_project_report_file_type', this.value, '')
  160. }
  161. })
  162. },
  163. props: ['options', 'value']
  164. },
  165. fileTypeComponentB: {
  166. data() {
  167. return { fileType: '' }
  168. },
  169. props: ['options', 'value'],
  170. mounted() {
  171. this.fileType = this.value
  172. },
  173. render: function (h) {
  174. return h(
  175. 'el-select',
  176. {
  177. attrs: {
  178. placeholder: '请选择',
  179. value: this.$dictUtils.getDictLabel('cw_project_report_file_type', this.fileType, ''),
  180. size: 'small',
  181. clearable: true
  182. },
  183. props: ['value'],
  184. on: {
  185. change: (value) => {
  186. this.fileType = value
  187. this.$emit('updateFileType', value)
  188. }
  189. }
  190. },
  191. [
  192. this.options.map((item) => {
  193. let { label, value } = item
  194. return h('el-option', {
  195. props: {
  196. label,
  197. value: parseInt(value),
  198. key: value
  199. }
  200. })
  201. })
  202. ]
  203. )
  204. }
  205. },
  206. sealTypeComponentA: {
  207. render: function (h) {
  208. return h('span', {
  209. domProps: {
  210. innerText: this.$dictUtils.getDictLabel('cw_seal_type', this.value, '')
  211. }
  212. })
  213. },
  214. props: ['options', 'value']
  215. },
  216. sealTypeComponentB: {
  217. data() {
  218. return { sealType: '' }
  219. },
  220. props: ['options', 'value', 'scope'],
  221. mounted() {
  222. this.sealType = this.value
  223. },
  224. render: function (h) {
  225. return h(
  226. 'el-select',
  227. {
  228. attrs: {
  229. placeholder: '请选择',
  230. value: this.$dictUtils.getDictLabel('cw_seal_type', this.sealType, ''),
  231. size: 'small',
  232. clearable: true
  233. },
  234. props: ['value'],
  235. on: {
  236. change: (value) => {
  237. let suffix = this.scope.row.name.substring(this.scope.row.name.lastIndexOf('.') + 1)
  238. if (parseInt(value) === 1) {
  239. if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx') {
  240. this.sealType = value
  241. this.$emit('updateSealType', value)
  242. } else {
  243. this.$message.error('只有“pdf、doc、docx”格式文件的盖章类型可以是“电子章”')
  244. this.sealType = ''
  245. this.$emit('updateSealType', '')
  246. }
  247. } else {
  248. this.sealType = value
  249. this.$emit('updateSealType', value)
  250. }
  251. }
  252. }
  253. },
  254. [
  255. this.options.map((item) => {
  256. let { label, value } = item
  257. return h('el-option', {
  258. props: {
  259. label,
  260. value: parseInt(value),
  261. key: value
  262. }
  263. })
  264. })
  265. ]
  266. )
  267. }
  268. },
  269. remarksComponentA: {
  270. render: function (h) {
  271. return h('span', {
  272. domProps: {
  273. innerText: this.value
  274. }
  275. })
  276. },
  277. props: ['value']
  278. },
  279. remarksComponentB: {
  280. data() {
  281. return { remarks: '' }
  282. },
  283. props: ['value'],
  284. mounted() {
  285. this.remarks = this.value
  286. },
  287. render: function (h) {
  288. return h(
  289. 'el-input',
  290. {
  291. attrs: {
  292. placeholder: '请输入',
  293. value: this.remarks,
  294. size: 'small',
  295. clearable: true
  296. },
  297. props: ['value'],
  298. on: {
  299. input: (value) => {
  300. this.remarks = value
  301. this.$emit('updateRemarks', value)
  302. }
  303. }
  304. }
  305. )
  306. }
  307. }
  308. },
  309. mounted() {
  310. window.onPreview = this.onPreview
  311. },
  312. methods: {
  313. /**
  314. * dividerName: 组件中divider的名称赋值
  315. * showDivider: ‘附件‘Divider是否展示
  316. * 注:值为空时,默认值为true
  317. * showDivider=false时 ‘附件‘Divider隐藏
  318. **/
  319. setDividerName(dividerName, showDivider) {
  320. if (this.commonJS.isNotEmpty(dividerName)) {
  321. this.dividerName = dividerName
  322. }
  323. if (this.commonJS.isNotEmpty(showDivider)) {
  324. if (showDivider === false) {
  325. this.showDivider = false
  326. } else {
  327. this.showDivider = true
  328. }
  329. } else {
  330. this.showDivider = true
  331. }
  332. },
  333. /**
  334. * 文件上传组件初始化
  335. * @param auth
  336. * auth的值为"view"时,不可上传/编辑文件
  337. * auth为其他值时,可上传/编辑文件
  338. * @param fileList 要显示到文件上传列表中的文件。
  339. * 注:文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
  340. * 例:'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
  341. * @param directory 要存放到oss的哪个文件夹下。
  342. * 注:值为空时,默认存放到"public"文件夹
  343. * @param maxValue 上传文件允许的最大值,单位:MB
  344. * 注:值为空时,默认值为300MB
  345. * @param dividerName 组件中divider的名称
  346. * 注:值为空时,默认值为‘附件’
  347. * @param uploadFlag ‘上传文件’按钮是否禁用
  348. * 注:值为空时,默认值为false
  349. * auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
  350. * @param delFlag ‘删除’按钮是否禁用
  351. * 注:值为空时,默认值为false
  352. * auth=view&&delFlag=false时 ‘删除’按钮禁用
  353. * @param showDivider ‘附件‘Divider是否展示
  354. * 注:值为空时,默认值为true
  355. * showDivider=false时 ‘附件‘Divider隐藏
  356. * @param showSign ‘签章’按钮 是否展示
  357. * 注:值为空时,默认值为false 不展示
  358. * showSign=audit的时候 ‘签章’按钮展示
  359. */
  360. async newUpload(auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider, showSign) {
  361. if (this.commonJS.isEmpty(showSign)) {
  362. this.showSign = false
  363. } else {
  364. if (showSign === 'audit') {
  365. this.showSign = true
  366. } else {
  367. this.showSign = false
  368. }
  369. }
  370. await this.fileLoadingFalse()
  371. if (this.commonJS.isEmpty(fileList)) {
  372. this.fileLoading = true
  373. } else {
  374. this.dataListLength = fileList.length
  375. }
  376. if (this.commonJS.isEmpty(dividerName)) {
  377. this.dividerName = '附件'
  378. } else {
  379. this.dividerName = dividerName
  380. }
  381. if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
  382. this.directory = directory
  383. } else {
  384. this.directory = 'public'
  385. }
  386. if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
  387. this.maxValue = maxValue
  388. } else {
  389. this.maxValue = 300
  390. }
  391. this.auth = auth
  392. if (this.commonJS.isEmpty(uploadFlag)) {
  393. this.uploadFlag = false
  394. } else {
  395. if (uploadFlag !== true && uploadFlag !== false) {
  396. this.uploadFlag = false
  397. } else {
  398. this.uploadFlag = uploadFlag
  399. }
  400. }
  401. if (this.commonJS.isEmpty(delFlag)) {
  402. this.delFlag = false
  403. } else {
  404. if (delFlag !== true && delFlag !== false) {
  405. this.delFlag = false
  406. this.createBy = delFlag
  407. } else {
  408. this.delFlag = delFlag
  409. }
  410. }
  411. for await (let item of fileList) {
  412. if (item.url) {
  413. await this.ossService.getFileSizeByUrl(item.url).then((data) => {
  414. item.lsUrl = data.url
  415. item.size = data.size
  416. this.dataList.push(item)
  417. this.dataListNew.push(item)
  418. this.fileList.push(item)
  419. if (this.dataListNew.length === fileList.length) {
  420. this.fileLoading = true
  421. }
  422. })
  423. }
  424. }
  425. // this.dataList = JSON.parse(JSON.stringify(fileList))
  426. // this.dataListNew = JSON.parse(JSON.stringify(fileList))
  427. if (this.commonJS.isEmpty(showDivider)) {
  428. this.showDivider = true
  429. } else {
  430. if (showDivider === false) {
  431. this.showDivider = false
  432. } else {
  433. this.showDivider = true
  434. }
  435. }
  436. },
  437. addMyAttachment(row) {
  438. this.$confirm(`确定收藏到个人资料库?`, "提示", {
  439. confirmButtonText: "确定",
  440. cancelButtonText: "取消",
  441. type: "warning",
  442. }).then(() => {
  443. let inputForm = {
  444. classification: "",
  445. fileDescription: "",
  446. workAttachments: []
  447. }
  448. inputForm.workAttachments.push(row)
  449. this.ossService.downloadAndUploadToMyCollect({
  450. url: row.lsUrl,
  451. fileName: row.name,
  452. dir: this.directory,
  453. workCollectAccessoryDTO: {
  454. ...inputForm
  455. }
  456. }).then(res => {
  457. this.$message.success(`操作成功`);
  458. })
  459. });
  460. },
  461. async httpRequest(file) {
  462. await httpRequest(file, fileName(file), this.directory, this.maxValue)
  463. },
  464. uploadVideoProcess(event, file, fileList) {
  465. this.progressFlag = true // 显示进度条
  466. this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
  467. if (this.loadProgress >= 100) {
  468. this.loadProgress = 100
  469. setTimeout(() => {
  470. this.progressFlag = false
  471. }, 1000) // 一秒后关闭进度条
  472. }
  473. },
  474. getSize(value) {
  475. if (this.commonJS.isEmpty(value)) {
  476. return '0 B'
  477. } else {
  478. let val = parseInt(value)
  479. if (this.commonJS.isEmpty(val)) {
  480. return '0 B'
  481. }
  482. if (isNaN(val)) {
  483. return '0 B'
  484. }
  485. if (val === 0) {
  486. return '0 B'
  487. }
  488. let k = 1024
  489. let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
  490. let i = Math.floor(Math.log(val) / Math.log(k))
  491. return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
  492. }
  493. },
  494. async changes(file, fileList) {
  495. if (file.status !== 'ready') {
  496. let fileListNamesList = []
  497. for (let fileItem of this.fileList) {
  498. fileListNamesList.push(fileItem.name)
  499. }
  500. if (fileListNamesList.indexOf(file.name) != -1) {
  501. this.$message.error(`${file.name}已存在,无法重复上传`)
  502. return
  503. } else {
  504. if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
  505. this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
  506. return
  507. }
  508. // this.dataListNew = []
  509. // this.dataList.forEach((item) => {
  510. // this.dataListNew.push(item)
  511. // })
  512. var fileListNames = []
  513. for (let fileItem of this.fileList) {
  514. fileListNames.push(fileItem.name)
  515. }
  516. // for (let item of fileList) {
  517. let item1 = JSON.parse(JSON.stringify(file))
  518. // if (fileListNames.length === 0 || fileListNames.indexOf(item1.name) === -1) {
  519. this.fileList.push(item1)
  520. // }
  521. item1.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
  522. item1.createBy = {
  523. id: '',
  524. name: ''
  525. }
  526. item1.createBy.id = this.$store.state.user.id
  527. item1.createBy.name = this.$store.state.user.name
  528. this.dataListNew.push(item1)
  529. this.dataList.push(item1)
  530. // }
  531. for (let item of this.dataListNew) {
  532. if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
  533. item.url = item.raw.url
  534. if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
  535. this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
  536. item.lsUrl = data
  537. })
  538. }
  539. }
  540. }
  541. }
  542. }
  543. },
  544. handleOnDownToOss(row, url) {
  545. this.ossService.getFileSizeByUrl(url).then((data) => {
  546. let file = {
  547. lsUrl: data.url,
  548. size: data.size,
  549. createBy: {
  550. id: this.$store.state.user.id,
  551. name: this.$store.state.user.name,
  552. },
  553. createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
  554. name: row.fileName,
  555. percentage: 100,
  556. status: "success",
  557. url: url
  558. }
  559. this.dataList.push(file)
  560. this.dataListNew.push(file)
  561. this.fileList.push(file)
  562. })
  563. },
  564. showFile(row) {
  565. openWindowOnUrl(row)
  566. },
  567. onPreview(url) {
  568. this.url = url
  569. this.showViewer = true
  570. },
  571. // 关闭查看器
  572. closeViewer() {
  573. this.url = ''
  574. this.showViewer = false
  575. },
  576. toHref(row) {
  577. toHref(row)
  578. },
  579. async deleteById(row, index, fileList) {
  580. // this.$refs.upload.handleRemove(this.dataListNew[index])
  581. await this.dataListNew.splice(index, 1)
  582. await this.dataList.splice(index, 1)
  583. var newFileList = [];
  584. for (var i = 0; i < fileList.length; i++) {
  585. if (fileList[i].name !== row.name) {
  586. newFileList.push(fileList[i])
  587. }
  588. }
  589. this.fileList = newFileList;
  590. },
  591. /**
  592. * 关闭dialog时使用 清除el-upload中上传的文件
  593. */
  594. clearUpload() {
  595. this.$refs.upload.uploadFiles = []
  596. this.dataList = []
  597. this.dataListNew = []
  598. this.fileList = []
  599. this.createBy = ''
  600. },
  601. /**
  602. * 获取当前文件列表中的文件数据
  603. */
  604. getDataList() {
  605. let _this = this
  606. const waitForEach = function () {
  607. return new Promise(function (resolve, reject) {
  608. _this.dataListNew.forEach((item, index) => {
  609. if (item.btnType === 'save') {
  610. _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
  611. _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
  612. _this.dataListNew[index].remarksComponent = 'remarksComponentA'
  613. _this.dataListNew[index].btn = '修改'
  614. _this.dataListNew[index].btnType = 'edit'
  615. _this.dataListNew[index].fileType = _this.fileType
  616. _this.dataListNew[index].sealType = _this.sealType
  617. _this.dataListNew[index].remarks = _this.remarks
  618. }
  619. })
  620. _this.tableKey = Math.random()
  621. resolve(_this.dataListNew)
  622. })
  623. }
  624. return waitForEach()
  625. },
  626. /**
  627. * 判断进度条是否结束,附件是否加载完成
  628. * @returns {boolean}
  629. */
  630. checkProgress() {
  631. if (this.progressFlag === true) {
  632. this.$message.warning('请等待附件上传完成再进行操作')
  633. return true
  634. }
  635. if (this.fileLoading === false) {
  636. this.$message.warning('请等待附件加载完成再进行操作')
  637. if (this.dataListLength === this.dataListNew.length) {
  638. this.fileLoading = true
  639. }
  640. return true
  641. }
  642. return false
  643. },
  644. ifName(row) {
  645. if (this.commonJS.isEmpty(row.name)) {
  646. row.name = '---'
  647. return false
  648. }
  649. let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
  650. if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
  651. return true
  652. } else {
  653. return false
  654. }
  655. },
  656. fileLoadingFalse() {
  657. this.fileLoading = false
  658. },
  659. /** 修改||保存按钮操作 */
  660. handleUpdate: async function (row, rowIndex) {
  661. if (row.btnType === 'edit' || this.commonJS.isEmpty(row.btnType)) {
  662. let _this = this
  663. const waitForEach = function () {
  664. return new Promise(function (resolve, reject) {
  665. _this.dataListNew.forEach((item, index) => {
  666. if (item.btnType === 'save') {
  667. _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
  668. _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
  669. _this.dataListNew[index].remarksComponent = 'remarksComponentA'
  670. _this.dataListNew[index].btn = '修改'
  671. _this.dataListNew[index].btnType = 'edit'
  672. _this.dataListNew[index].fileType = _this.fileType
  673. _this.dataListNew[index].sealType = _this.sealType
  674. _this.dataListNew[index].remarks = _this.remarks
  675. }
  676. })
  677. resolve()
  678. })
  679. }
  680. waitForEach().then(() => {
  681. this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentB'
  682. this.dataListNew[rowIndex].sealTypeComponent = 'sealTypeComponentB'
  683. this.dataListNew[rowIndex].remarksComponent = 'remarksComponentB'
  684. this.dataListNew[rowIndex].btn = '保存'
  685. this.dataListNew[rowIndex].btnType = 'save'
  686. })
  687. } else {
  688. this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentA'
  689. this.dataListNew[rowIndex].sealTypeComponent = 'sealTypeComponentA'
  690. this.dataListNew[rowIndex].remarksComponent = 'remarksComponentA'
  691. this.dataListNew[rowIndex].btn = '修改'
  692. this.dataListNew[rowIndex].btnType = 'edit'
  693. this.dataListNew[rowIndex].fileType = this.fileType
  694. this.dataListNew[rowIndex].sealType = this.sealType
  695. this.dataListNew[rowIndex].remarks = this.remarks
  696. }
  697. this.tableKey = Math.random()
  698. },
  699. updateFileType(fileType) {
  700. this.fileType = fileType
  701. },
  702. updateSealType(sealType) {
  703. this.sealType = sealType
  704. },
  705. updateRemarks(remarks) {
  706. this.remarks = remarks
  707. },
  708. tableRowClassName({ row, rowIndex }) {
  709. row.index = rowIndex
  710. },
  711. // 行点击事件
  712. tableRowClick(row, column) {
  713. if (this.auth !== 'view') {
  714. if (column.label !== '备注' && column.label !== '文件名称' && column.label !== '操作') {
  715. let _this = this
  716. const waitForEach = function () {
  717. return new Promise(function (resolve, reject) {
  718. _this.dataListNew.forEach((item, index) => {
  719. if (item.btnType === 'save') {
  720. _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
  721. _this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
  722. _this.dataListNew[index].remarksComponent = 'remarksComponentA'
  723. _this.dataListNew[index].btn = '修改'
  724. _this.dataListNew[index].btnType = 'edit'
  725. _this.dataListNew[index].fileType = _this.fileType
  726. _this.dataListNew[index].sealType = _this.sealType
  727. _this.dataListNew[index].remarks = _this.remarks
  728. }
  729. })
  730. resolve()
  731. })
  732. }
  733. waitForEach().then(() => {
  734. this.fileType = this.dataListNew[row.index].fileType
  735. this.sealType = this.dataListNew[row.index].sealType
  736. this.remarks = this.dataListNew[row.index].remarks
  737. this.dataListNew[row.index].fileTypeComponent = 'fileTypeComponentB'
  738. this.dataListNew[row.index].sealTypeComponent = 'sealTypeComponentB'
  739. this.dataListNew[row.index].remarksComponent = 'remarksComponentB'
  740. this.dataListNew[row.index].btn = '保存'
  741. this.dataListNew[row.index].btnType = 'save'
  742. })
  743. this.tableKey = Math.random()
  744. }
  745. }
  746. },
  747. // 点击上传文件按钮的时候,把未保存的文件保存一下
  748. clickHandel() {
  749. this.dataListNew.forEach((item, index) => {
  750. if (item.btnType === 'save') {
  751. this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
  752. this.dataListNew[index].sealTypeComponent = 'sealTypeComponentA'
  753. this.dataListNew[index].remarksComponent = 'remarksComponentA'
  754. this.dataListNew[index].btn = '修改'
  755. this.dataListNew[index].btnType = 'edit'
  756. this.dataListNew[index].fileType = this.fileType
  757. this.dataListNew[index].sealType = this.sealType
  758. this.dataListNew[index].remarks = this.remarks
  759. }
  760. })
  761. },
  762. sealTypeChange(scope) {
  763. let suffix = scope.row.name.substring(scope.row.name.lastIndexOf('.') + 1)
  764. if (parseInt(scope.row.sealType) === 1) {
  765. if (suffix !== 'pdf' && suffix !== 'doc' && suffix !== 'docx') {
  766. this.$message.error('只有“pdf、doc、docx”格式文件的盖章类型可以是“电子章”')
  767. scope.row.sealType = ''
  768. }
  769. }
  770. },
  771. // 点击签章按钮事件
  772. clickSign() {
  773. this.$emit('clickSign')
  774. },
  775. // 隐藏签章按钮
  776. hideSign() {
  777. this.showSign = false
  778. },
  779. // 开启/关闭页面的加载中状态
  780. changeLoading(loading) {
  781. if (this.commonJS.isNotEmpty(loading)) {
  782. this.loading = loading
  783. } else {
  784. this.loading = false
  785. }
  786. }
  787. }
  788. }
  789. </script>