|
|
@@ -0,0 +1,583 @@
|
|
|
+<!--文件上传组件-->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
|
|
|
+ <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
|
|
|
+ :limit="999" :http-request="httpRequest"
|
|
|
+ multiple
|
|
|
+ :on-exceed="(files, fileList) =>{
|
|
|
+ $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
|
|
+ }"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="changes"
|
|
|
+ :on-progress="uploadVideoProcess"
|
|
|
+ :file-list="fileList">
|
|
|
+ <el-button type="info" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" @click="clickHandel" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div style="height: calc(100% - 80px);margin-top: 10px">
|
|
|
+ <!-- 进度条 -->
|
|
|
+ <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
|
|
|
+ <el-table
|
|
|
+ ref="uploadTable"
|
|
|
+ :key="tableKey"
|
|
|
+ @row-click="tableRowClick"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
+ :data="dataListNew">
|
|
|
+ <el-table-column type="seq" width="40"></el-table-column>
|
|
|
+ <el-table-column label="文件名称" prop="name" align="center">
|
|
|
+ <template scope="scope">
|
|
|
+ <div v-if="ifName(scope.row) === true">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 30px;padding-top: 4px"
|
|
|
+ :src="scope.row.lsUrl"
|
|
|
+ :preview-src-list="[scope.row.lsUrl]"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-link type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
|
|
|
+ <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
|
|
|
+ <el-table-column label="文件大小" prop="size" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{getSize(scope.row.size)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="文件类型" prop="fileType" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <component
|
|
|
+ :is="scope.row.fileTypeComponent || 'fileTypeComponentA'"
|
|
|
+ :options="$dictUtils.getDictList('cw_project_report_archive_file_type')"
|
|
|
+ :value="scope.row.fileType"
|
|
|
+ @updateFileType="updateFileType"
|
|
|
+ ></component>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" prop="remarks" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <component
|
|
|
+ :is="scope.row.remarksComponent || 'remarksComponentA'"
|
|
|
+ :value="scope.row.remarks"
|
|
|
+ @updateRemarks="updateRemarks"
|
|
|
+ ></component>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="200px" fixed="right" align="center">
|
|
|
+ <template scope="scope">
|
|
|
+ <el-button type="text" icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
|
|
|
+ <el-button type="text" icon="el-icon-delete" size="small" @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
|
|
|
+ <!--<el-button size="small" type="text" icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row, scope.$index)"
|
|
|
+ >{{ scope.row.btn || "修改" }}</el-button>-->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ import OSSSerivce, {
|
|
|
+ httpRequest,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ handleRemove,
|
|
|
+ fileName,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ beforeAvatarUpload,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ openWindowOnUrl,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ toHref
|
|
|
+ } from '@/api/sys/OSSService'
|
|
|
+ import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
|
|
|
+ import moment from 'moment'
|
|
|
+ export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ progressFlag: false,
|
|
|
+ loadProgress: 0,
|
|
|
+ fileList: [],
|
|
|
+ dataList: [],
|
|
|
+ dataListNew: [],
|
|
|
+ url: '',
|
|
|
+ showViewer: false,
|
|
|
+ ossService: null,
|
|
|
+ auth: '',
|
|
|
+ directory: 'public',
|
|
|
+ maxValue: 300,
|
|
|
+ tableKey: '',
|
|
|
+ fileLoading: true,
|
|
|
+ dividerName: '',
|
|
|
+ uploadFlag: false,
|
|
|
+ delFlag: false,
|
|
|
+ createBy: '',
|
|
|
+ showDivider: true,
|
|
|
+ fileType: '',
|
|
|
+ remarks: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.ossService = new OSSSerivce()
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ ElImageViewer,
|
|
|
+ fileTypeComponentA: {
|
|
|
+ render: function (h) {
|
|
|
+ return h('span', {
|
|
|
+ domProps: {
|
|
|
+ innerText: this.$dictUtils.getDictLabel('cw_project_report_archive_file_type', this.value, '')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ props: ['options', 'value']
|
|
|
+ },
|
|
|
+ fileTypeComponentB: {
|
|
|
+ data () {
|
|
|
+ return { fileType: '' }
|
|
|
+ },
|
|
|
+ props: ['options', 'value'],
|
|
|
+ mounted () {
|
|
|
+ this.fileType = this.value
|
|
|
+ },
|
|
|
+ render: function (h) {
|
|
|
+ return h(
|
|
|
+ 'el-select',
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请选择',
|
|
|
+ value: this.fileType,
|
|
|
+ size: 'small',
|
|
|
+ clearable: true
|
|
|
+ },
|
|
|
+ props: ['value'],
|
|
|
+ on: {
|
|
|
+ change: (value) => {
|
|
|
+ this.fileType = value
|
|
|
+ this.$emit('updateFileType', value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [
|
|
|
+ this.options.map((item) => {
|
|
|
+ let { label, value } = item
|
|
|
+ return h('el-option', {
|
|
|
+ props: {
|
|
|
+ label,
|
|
|
+ value: parseInt(value),
|
|
|
+ key: value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ remarksComponentA: {
|
|
|
+ render: function (h) {
|
|
|
+ return h('span', {
|
|
|
+ domProps: {
|
|
|
+ innerText: this.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ props: ['value']
|
|
|
+ },
|
|
|
+ remarksComponentB: {
|
|
|
+ data () {
|
|
|
+ return { remarks: '' }
|
|
|
+ },
|
|
|
+ props: ['value'],
|
|
|
+ mounted () {
|
|
|
+ this.remarks = this.value
|
|
|
+ },
|
|
|
+ render: function (h) {
|
|
|
+ return h(
|
|
|
+ 'el-input',
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请输入',
|
|
|
+ value: this.remarks,
|
|
|
+ size: 'small',
|
|
|
+ clearable: true
|
|
|
+ },
|
|
|
+ props: ['value'],
|
|
|
+ on: {
|
|
|
+ input: (value) => {
|
|
|
+ this.remarks = value
|
|
|
+ this.$emit('updateRemarks', value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ window.onPreview = this.onPreview
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * dividerName: 组件中divider的名称赋值
|
|
|
+ * showDivider: ‘附件‘Divider是否展示
|
|
|
+ * 注：值为空时，默认值为true
|
|
|
+ * showDivider=false时 ‘附件‘Divider隐藏
|
|
|
+ **/
|
|
|
+ setDividerName (dividerName, showDivider) {
|
|
|
+ if (this.commonJS.isNotEmpty(dividerName)) {
|
|
|
+ this.dividerName = dividerName
|
|
|
+ }
|
|
|
+ if (this.commonJS.isNotEmpty(showDivider)) {
|
|
|
+ if (showDivider === false) {
|
|
|
+ this.showDivider = false
|
|
|
+ } else {
|
|
|
+ this.showDivider = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showDivider = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 文件上传组件初始化
|
|
|
+ * @param auth
|
|
|
+ * auth的值为"view"时,不可上传/编辑文件
|
|
|
+ * auth为其他值时,可上传/编辑文件
|
|
|
+ * @param fileList 要显示到文件上传列表中的文件。
|
|
|
+ * 注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
|
|
|
+ * 例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
|
|
|
+ * @param directory 要存放到oss的哪个文件夹下。
|
|
|
+ * 注：值为空时，默认存放到"public"文件夹
|
|
|
+ * @param maxValue 上传文件允许的最大值，单位：MB
|
|
|
+ * 注：值为空时，默认值为300MB
|
|
|
+ * @param dividerName 组件中divider的名称
|
|
|
+ * 注：值为空时，默认值为‘附件’
|
|
|
+ * @param uploadFlag ‘上传文件’按钮是否禁用
|
|
|
+ * 注：值为空时，默认值为false
|
|
|
+ * auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
|
|
|
+ * @param delFlag ‘删除’按钮是否禁用
|
|
|
+ * 注：值为空时，默认值为false
|
|
|
+ * auth=view&&delFlag=false时 ‘删除’按钮禁用
|
|
|
+ * @param showDivider ‘附件‘Divider是否展示
|
|
|
+ * 注：值为空时，默认值为true
|
|
|
+ * showDivider=false时 ‘附件‘Divider隐藏
|
|
|
+ */
|
|
|
+ async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
|
|
|
+ await this.fileLoadingFalse()
|
|
|
+ if (this.commonJS.isEmpty(dividerName)) {
|
|
|
+ this.dividerName = '附件'
|
|
|
+ } else {
|
|
|
+ this.dividerName = dividerName
|
|
|
+ }
|
|
|
+ if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
|
|
|
+ this.directory = directory
|
|
|
+ } else {
|
|
|
+ this.directory = 'public'
|
|
|
+ }
|
|
|
+ if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
|
|
|
+ this.maxValue = maxValue
|
|
|
+ } else {
|
|
|
+ this.maxValue = 300
|
|
|
+ }
|
|
|
+ this.auth = auth
|
|
|
+ if (this.commonJS.isEmpty(uploadFlag)) {
|
|
|
+ this.uploadFlag = false
|
|
|
+ } else {
|
|
|
+ if (uploadFlag !== true && uploadFlag !== false) {
|
|
|
+ this.uploadFlag = false
|
|
|
+ } else {
|
|
|
+ this.uploadFlag = uploadFlag
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.commonJS.isEmpty(delFlag)) {
|
|
|
+ this.delFlag = false
|
|
|
+ } else {
|
|
|
+ if (delFlag !== true && delFlag !== false) {
|
|
|
+ this.delFlag = false
|
|
|
+ this.createBy = delFlag
|
|
|
+ } else {
|
|
|
+ this.delFlag = delFlag
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.commonJS.isEmpty(fileList)) {
|
|
|
+ this.fileLoading = true
|
|
|
+ }
|
|
|
+ for await (let item of fileList) {
|
|
|
+ await this.ossService.getFileSizeByUrl(item.url).then((data) => {
|
|
|
+ item.lsUrl = data.data.url
|
|
|
+ item.size = data.data.size
|
|
|
+ this.dataList.push(item)
|
|
|
+ this.dataListNew.push(item)
|
|
|
+ if (this.dataList.length === fileList.length) {
|
|
|
+ this.fileLoading = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this.dataList = JSON.parse(JSON.stringify(fileList))
|
|
|
+ // this.dataListNew = JSON.parse(JSON.stringify(fileList))
|
|
|
+ if (this.commonJS.isEmpty(showDivider)) {
|
|
|
+ this.showDivider = true
|
|
|
+ } else {
|
|
|
+ if (showDivider === false) {
|
|
|
+ this.showDivider = false
|
|
|
+ } else {
|
|
|
+ this.showDivider = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async httpRequest (file) {
|
|
|
+ await httpRequest(file, fileName(file), this.directory, this.maxValue)
|
|
|
+ },
|
|
|
+ uploadVideoProcess (event, file, fileList) {
|
|
|
+ this.progressFlag = true // 显示进度条
|
|
|
+ this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
|
|
|
+ if (this.loadProgress >= 100) {
|
|
|
+ this.loadProgress = 100
|
|
|
+ setTimeout(() => {
|
|
|
+ this.progressFlag = false
|
|
|
+ }, 1000) // 一秒后关闭进度条
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSize (value) {
|
|
|
+ if (this.commonJS.isEmpty(value)) {
|
|
|
+ return '0 B'
|
|
|
+ } else {
|
|
|
+ let val = parseInt(value)
|
|
|
+ if (this.commonJS.isEmpty(val)) {
|
|
|
+ return '0 B'
|
|
|
+ }
|
|
|
+ if (isNaN(val)) {
|
|
|
+ return '0 B'
|
|
|
+ }
|
|
|
+ if (val === 0) {
|
|
|
+ return '0 B'
|
|
|
+ }
|
|
|
+ let k = 1024
|
|
|
+ let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
|
|
|
+ let i = Math.floor(Math.log(val) / Math.log(k))
|
|
|
+ return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async changes (file, fileList) {
|
|
|
+ // if (file.status !== 'ready') {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
|
|
|
+ this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dataListNew = []
|
|
|
+ this.dataList.forEach((item) => {
|
|
|
+ this.dataListNew.push(item)
|
|
|
+ })
|
|
|
+ for (let item of fileList) {
|
|
|
+ item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ item.createBy = {
|
|
|
+ id: '',
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ item.createBy.id = this.$store.state.user.id
|
|
|
+ item.createBy.name = this.$store.state.user.name
|
|
|
+ this.dataListNew.push(item)
|
|
|
+ }
|
|
|
+ for await (let item of this.dataListNew) {
|
|
|
+ if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
|
|
|
+ item.url = item.raw.url
|
|
|
+ if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
|
|
|
+ await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
|
|
|
+ item.lsUrl = data.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableKey = Math.random()
|
|
|
+ },
|
|
|
+ showFile (row) {
|
|
|
+ openWindowOnUrl(row)
|
|
|
+ },
|
|
|
+ onPreview (url) {
|
|
|
+ this.url = url
|
|
|
+ this.showViewer = true
|
|
|
+ },
|
|
|
+ // 关闭查看器
|
|
|
+ closeViewer () {
|
|
|
+ this.url = ''
|
|
|
+ this.showViewer = false
|
|
|
+ },
|
|
|
+ toHref (row) {
|
|
|
+ toHref(row)
|
|
|
+ },
|
|
|
+ deleteById (row, index) {
|
|
|
+ this.dataListNew.splice(index, 1)
|
|
|
+ if (row.id !== null && row.id !== '' && row.id !== undefined) {
|
|
|
+ this.dataList.splice(index, 1)
|
|
|
+ // this.ossService.deleteMsgById(row.id)
|
|
|
+ } else {
|
|
|
+ let num
|
|
|
+ if (this.dataList.length > 0) {
|
|
|
+ num = this.dataList.length - 1
|
|
|
+ } else {
|
|
|
+ num = 0
|
|
|
+ }
|
|
|
+ this.$refs.upload.uploadFiles.splice(index - num, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭dialog时使用 清除el-upload中上传的文件
|
|
|
+ */
|
|
|
+ clearUpload () {
|
|
|
+ this.$refs.upload.uploadFiles = []
|
|
|
+ this.dataList = []
|
|
|
+ this.dataListNew = []
|
|
|
+ this.createBy = ''
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取当前文件列表中的文件数据
|
|
|
+ */
|
|
|
+ getDataList () {
|
|
|
+ let _this = this
|
|
|
+ const waitForEach = function () {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ _this.dataListNew.forEach((item, index) => {
|
|
|
+ if (item.btnType === 'save') {
|
|
|
+ _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
|
|
|
+ _this.dataListNew[index].remarksComponent = 'remarksComponentA'
|
|
|
+ _this.dataListNew[index].btn = '修改'
|
|
|
+ _this.dataListNew[index].btnType = 'edit'
|
|
|
+ _this.dataListNew[index].fileType = _this.fileType
|
|
|
+ _this.dataListNew[index].remarks = _this.remarks
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _this.tableKey = Math.random()
|
|
|
+ resolve(_this.dataListNew)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return waitForEach()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 判断进度条是否结束，附件是否加载完成
|
|
|
+ * @returns {boolean}
|
|
|
+ */
|
|
|
+ checkProgress () {
|
|
|
+ if (this.progressFlag === true) {
|
|
|
+ this.$message.warning('请等待附件上传完成再进行操作')
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if (this.fileLoading === false) {
|
|
|
+ this.$message.warning('请等待附件加载完成再进行操作')
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ ifName (row) {
|
|
|
+ if (this.commonJS.isEmpty(row.name)) {
|
|
|
+ row.name = '---'
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
|
|
|
+ if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fileLoadingFalse () {
|
|
|
+ this.fileLoading = false
|
|
|
+ },
|
|
|
+ /** 修改||保存按钮操作 */
|
|
|
+ handleUpdate: async function (row, rowIndex) {
|
|
|
+ if (row.btnType === 'edit' || this.commonJS.isEmpty(row.btnType)) {
|
|
|
+ let _this = this
|
|
|
+ const waitForEach = function () {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ _this.dataListNew.forEach((item, index) => {
|
|
|
+ if (item.btnType === 'save') {
|
|
|
+ _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
|
|
|
+ _this.dataListNew[index].remarksComponent = 'remarksComponentA'
|
|
|
+ _this.dataListNew[index].btn = '修改'
|
|
|
+ _this.dataListNew[index].btnType = 'edit'
|
|
|
+ _this.dataListNew[index].fileType = _this.fileType
|
|
|
+ _this.dataListNew[index].remarks = _this.remarks
|
|
|
+ }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ waitForEach().then(() => {
|
|
|
+ this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentB'
|
|
|
+ this.dataListNew[rowIndex].remarksComponent = 'remarksComponentB'
|
|
|
+ this.dataListNew[rowIndex].btn = '保存'
|
|
|
+ this.dataListNew[rowIndex].btnType = 'save'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.dataListNew[rowIndex].fileTypeComponent = 'fileTypeComponentA'
|
|
|
+ this.dataListNew[rowIndex].remarksComponent = 'remarksComponentA'
|
|
|
+ this.dataListNew[rowIndex].btn = '修改'
|
|
|
+ this.dataListNew[rowIndex].btnType = 'edit'
|
|
|
+ this.dataListNew[rowIndex].fileType = this.fileType
|
|
|
+ this.dataListNew[rowIndex].remarks = this.remarks
|
|
|
+ }
|
|
|
+ this.tableKey = Math.random()
|
|
|
+ },
|
|
|
+ updateFileType (fileType) {
|
|
|
+ this.fileType = fileType
|
|
|
+ },
|
|
|
+ updateRemarks (remarks) {
|
|
|
+ this.remarks = remarks
|
|
|
+ },
|
|
|
+ tableRowClassName ({ row, rowIndex }) {
|
|
|
+ row.index = rowIndex
|
|
|
+ },
|
|
|
+ // 行点击事件
|
|
|
+ tableRowClick (row, column) {
|
|
|
+ if (this.auth !== 'view') {
|
|
|
+ if (column.label !== '备注' && column.label !== '文件名称' && column.label !== '操作') {
|
|
|
+ let _this = this
|
|
|
+ const waitForEach = function () {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ _this.dataListNew.forEach((item, index) => {
|
|
|
+ if (item.btnType === 'save') {
|
|
|
+ _this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
|
|
|
+ _this.dataListNew[index].remarksComponent = 'remarksComponentA'
|
|
|
+ _this.dataListNew[index].btn = '修改'
|
|
|
+ _this.dataListNew[index].btnType = 'edit'
|
|
|
+ _this.dataListNew[index].fileType = _this.fileType
|
|
|
+ _this.dataListNew[index].remarks = _this.remarks
|
|
|
+ }
|
|
|
+ })
|
|
|
+ resolve()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ waitForEach().then(() => {
|
|
|
+ this.fileType = this.dataListNew[row.index].fileType
|
|
|
+ this.remarks = this.dataListNew[row.index].remarks
|
|
|
+ this.dataListNew[row.index].fileTypeComponent = 'fileTypeComponentB'
|
|
|
+ this.dataListNew[row.index].remarksComponent = 'remarksComponentB'
|
|
|
+ this.dataListNew[row.index].btn = '保存'
|
|
|
+ this.dataListNew[row.index].btnType = 'save'
|
|
|
+ })
|
|
|
+ this.tableKey = Math.random()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击上传文件按钮的时候，把未保存的文件保存一下
|
|
|
+ clickHandel () {
|
|
|
+ this.dataListNew.forEach((item, index) => {
|
|
|
+ if (item.btnType === 'save') {
|
|
|
+ this.dataListNew[index].fileTypeComponent = 'fileTypeComponentA'
|
|
|
+ this.dataListNew[index].remarksComponent = 'remarksComponentA'
|
|
|
+ this.dataListNew[index].btn = '修改'
|
|
|
+ this.dataListNew[index].btnType = 'edit'
|
|
|
+ this.dataListNew[index].fileType = this.fileType
|
|
|
+ this.dataListNew[index].remarks = this.remarks
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
lizhenhao