| | |
| | | <el-dialog title="附件查看" :visible.sync="isShow" width="80%" @closed="$emit('closeFilesLook')"> |
| | | <div style="display: flex;justify-content: space-between;"> |
| | | <ul class="tab"> |
| | | <li v-for="(m,i) in dataVisibleTitle" :key="i" :class="{active:i===dataVisibleIndex}" @click="handleDataVisibleTab(m,i)">{{m.label}}</li> |
| | | <li v-for="(m, i) in dataVisibleTitle" :key="i" :class="{ active: i === dataVisibleIndex }" |
| | | @click="handleDataVisibleTab(m, i)">{{ m.label }}</li> |
| | | </ul> |
| | | <el-upload :action="action" |
| | | :auto-upload="true" |
| | | :data="{orderId: dataVisibleIndex === 0 ? filesLookInfo.enterOrderId : filesLookInfo.quarterOrderId}" |
| | | :on-success="handleSuccessUp" :show-file-list="false" |
| | | accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' :headers="headers" |
| | | :before-upload="beforeUpload" |
| | | style="width: 80px !important;" |
| | | :on-error="onError" ref='upload'> |
| | | <el-upload :action="action" :auto-upload="true" |
| | | :data="{ orderId: dataVisibleIndex === 0 ? filesLookInfo.enterOrderId : filesLookInfo.quarterOrderId }" |
| | | :on-success="handleSuccessUp" :show-file-list="false" |
| | | accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' :headers="uploadHeader" |
| | | :before-upload="beforeUpload" style="width: 80px !important;" :on-error="onError" ref='upload'> |
| | | <el-button size="small" type="primary" style="height: 38px">附件上传</el-button> |
| | | </el-upload> |
| | | </div> |
| | | <div style="height: 70vh;overflow-y: auto;" v-if="filesDialogVisible"> |
| | | <ValueTable ref="fileList" |
| | | :url="$api.insOrderPlan.getFileList" |
| | | :delUrl="$api.insOrderPlan.delfile" |
| | | class="value-table" |
| | | :key="upIndex" |
| | | :componentData="componentData"/> |
| | | <div v-if="filesDialogVisible"> |
| | | <lims-table :tableData="tableDataFile" :column="columnFile" @pagination="paginationFile" height="500px" |
| | | key="tableDataFile" :page="pageFile" :tableLoading="tableLoadingFile"></lims-table> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | <script> |
| | | import ValueTable from "@/components/Table/value-table.vue"; |
| | | import file from "@/utils/file"; |
| | | |
| | | import limsTable from "@/components/Table/lims-table.vue"; |
| | | import { delfile, downFile, getFileList } from "@/api/business/rawMaterialOrder"; |
| | | export default { |
| | | name: "filesLookVisible", |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | components: {ValueTable}, |
| | | components: { limsTable, ValueTable }, |
| | | props: { |
| | | filesDialogVisible: { |
| | | type: Boolean, |
| | |
| | | }, |
| | | filesLookInfo: { |
| | | type: Object, |
| | | default: () => {} |
| | | default: () => { } |
| | | }, |
| | | }, |
| | | data() { |
| | | // 这里存放数据 |
| | | return { |
| | | upIndex: 0, |
| | | tableDataFile: [], |
| | | tableLoadingFile: false, |
| | | columnFile: [ |
| | | { |
| | | dataType: 'tag', |
| | | label: '类型', |
| | | prop: 'type', |
| | | formatData: (params) => { |
| | | if (params == 1) { |
| | | return '图片' |
| | | } else if (params == 2) { |
| | | return '文件' |
| | | } else { |
| | | return '' |
| | | } |
| | | }, |
| | | formatType: (params) => { |
| | | if (params == 1) { |
| | | return 'success' |
| | | } else if (params == 2) { |
| | | return 'warning' |
| | | } else { |
| | | return '' |
| | | } |
| | | } |
| | | }, |
| | | { label: '附件名称', prop: 'fileName' }, |
| | | { label: '上传人', prop: 'name' }, |
| | | { label: '上传时间', prop: 'createTime' }, |
| | | { |
| | | dataType: 'action', |
| | | fixed: 'right', |
| | | label: '操作', |
| | | width: '170px', |
| | | operation: [ |
| | | { |
| | | name: '下载', |
| | | type: 'text', |
| | | clickFun: (row) => { |
| | | this.handleDown(row); |
| | | } |
| | | }, |
| | | { |
| | | name: '删除', |
| | | type: 'text', |
| | | clickFun: (row) => { |
| | | this.delete(row); |
| | | } |
| | | }, |
| | | ] |
| | | } |
| | | ], |
| | | pageFile: { |
| | | total: 0, |
| | | size: 10, |
| | | current: 1 |
| | | }, |
| | | isShow: this.filesDialogVisible, |
| | | dataVisibleTitle: [ |
| | | { |
| | |
| | | }, |
| | | ], |
| | | dataVisibleIndex: 0, // tab栏选择值 |
| | | componentData: { |
| | | entity: { |
| | | insOrderId:'' |
| | | }, |
| | | isIndex: true, |
| | | showSelect: false, |
| | | select: false, |
| | | sort: false, |
| | | init:false, |
| | | do: [ |
| | | { |
| | | id: 'parent', |
| | | font: '下载', |
| | | type: 'text', |
| | | method: 'handleDown' |
| | | },{ |
| | | id: 'delete', |
| | | font: '删除', |
| | | type: 'text', |
| | | method: 'doDiy', |
| | | } |
| | | ], |
| | | isPage: false, |
| | | linkEvent: {}, |
| | | tagField: { |
| | | type:{ |
| | | select:[ |
| | | { |
| | | value: 1, |
| | | label: '图片' |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '文件' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | currentId: '', |
| | | selectField: {}, |
| | | requiredAdd: [], |
| | | requiredUp: [] |
| | | entity: { |
| | | insOrderId: '' |
| | | }, |
| | | |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.refreshTable() |
| | | this.getFileList() |
| | | }, |
| | | // 方法集合 |
| | | methods: { |
| | | // 切换数据查看tab栏 |
| | | handleDataVisibleTab (m, i) { |
| | | handleDataVisibleTab(m, i) { |
| | | this.dataVisibleIndex = i |
| | | this.refreshTable() |
| | | this.getFileList() |
| | | }, |
| | | // 查询回调 |
| | | refreshTable(e) { |
| | | getFileList() { |
| | | if (this.dataVisibleIndex === 0) { |
| | | this.componentData.entity.insOrderId = this.filesLookInfo.enterOrderId |
| | | this.entity.insOrderId = this.filesLookInfo.enterOrderId |
| | | } else { |
| | | this.componentData.entity.insOrderId = this.filesLookInfo.quarterOrderId |
| | | this.entity.insOrderId = this.filesLookInfo.quarterOrderId |
| | | } |
| | | this.$nextTick(() => { |
| | | this.$refs['fileList'].selectList(e) |
| | | this.tableLoadingFile = true |
| | | const params = { ...this.entity } |
| | | getFileList(params).then(res => { |
| | | this.tableLoadingFile = false |
| | | if (res.code === 200) { |
| | | this.tableDataFile = res.data.records |
| | | this.pageFile.total = res.data.total |
| | | } |
| | | }).catch(err => { |
| | | this.tableLoadingFile = false |
| | | }) |
| | | }, |
| | | handleDown(row){ |
| | | this.$axios.post(this.$api.insOrderPlan.downFile, { |
| | | id: row.id, |
| | | }).then(res => { |
| | | paginationFile(page) { |
| | | this.pageFile.size = page.limit |
| | | this.getFileList() |
| | | }, |
| | | // 下载 |
| | | handleDown(row) { |
| | | downFile({ id: row.id, }).then(res => { |
| | | if (res.code === 200) { |
| | | let url = ''; |
| | | if(res.data.type==1){ |
| | | url = this.javaApi+'/img/'+res.data.fileUrl |
| | | file.downloadIamge(url,row.fileName) |
| | | }else{ |
| | | url = this.javaApi+'/word/'+res.data.fileUrl |
| | | if (res.data.type == 1) { |
| | | url = this.javaApi + '/img/' + res.data.fileUrl |
| | | file.downloadIamge(url, row.fileName) |
| | | } else { |
| | | url = this.javaApi + '/word/' + res.data.fileUrl |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = row.fileName; |
| | |
| | | |
| | | }) |
| | | }, |
| | | handleSuccessUp(response, ) { |
| | | handleSuccessUp(response,) { |
| | | this.upLoading = false; |
| | | if (response.code == 200) { |
| | | this.$message.success('上传成功'); |
| | | this.$refs.fileList.selectList() |
| | | this.getFileList() |
| | | } |
| | | }, |
| | | beforeUpload(file) { |
| | |
| | | this.$message.error('上传失败') |
| | | this.$refs.upload.clearFiles() |
| | | }, |
| | | // 删除 |
| | | delete(row) { |
| | | this.$confirm('是否删除当前数据?', "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }).then(() => { |
| | | delfile({ id: row.id }).then(res => { |
| | | if (res.code === 500) { |
| | | return |
| | | } |
| | | this.$message.success('删除成功') |
| | | this.getList() |
| | | }).catch(e => { |
| | | this.$message.error('删除失败') |
| | | }) |
| | | }).catch(() => { }) |
| | | } |
| | | }, |
| | | computed: { |
| | | headers() { |
| | | return { |
| | | 'token': sessionStorage.getItem('token') |
| | | } |
| | | }, |
| | | action() { |
| | | return this.javaApi + this.$api.insOrderPlan.uploadFile |
| | | return this.javaApi + '/insOrderPlan/uploadFile' |
| | | } |
| | | }, |
| | | } |
| | |
| | | .tab { |
| | | list-style-type: none; |
| | | display: flex; |
| | | margin-bottom: 12px; |
| | | margin-top: 0 !important; |
| | | padding-left: 0 !important; |
| | | } |
| | | |
| | | .tab li { |