dianliang/lanan-system-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0725

Browse Source
This commit is contained in:
Lx 2025-07-25 18:00:43 +08:00
parent 21f43237bf
commit d5124852d0
2 changed files with 585 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

513
src/views/drivingSchool/drivingSchoolInsurance/index.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
<el-form-item label="保险公司名称" prop="company"> <el-form-item label="保险公司名称" prop="company">
<el-input <el-input
v-model="queryParams.company" v-model="queryParams.company"
@ -34,7 +33,8 @@
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
>新增</el-button> >新增
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@ -44,7 +44,8 @@
size="mini" size="mini"
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
>删除</el-button> >删除
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@ -53,24 +54,36 @@
icon="el-icon-download" icon="el-icon-download"
size="mini" size="mini"
@click="handleExport" @click="handleExport"
>导出</el-button> >导出
</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="insuranceList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="insuranceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center"/>
<el-table-column label="负责人1" align="center" prop="userName" /> <el-table-column label="负责人1" align="center" prop="userName"/>
<el-table-column label="负责人2" align="center" prop="userNames" /> <el-table-column label="负责人2" align="center" prop="userNames"/>
<!-- <el-table-column label="车辆" align="center" prop="carName" />--> <el-table-column label="车牌号" align="carNo" prop="carNo"/>
<el-table-column label="车牌号" align="carNo" prop="carNo" /> <el-table-column label="保险公司名称" align="center" prop="company"/>
<el-table-column label="保险公司名称" align="center" prop="company" />
<el-table-column label="内容" align="center" prop="content"> <el-table-column label="内容" align="center" prop="content">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="viewContentFun(scope.row.content)" type="text" slot="reference">查看</el-button> <el-button @click="viewContentFun(scope.row.content)" type="text" slot="reference">查看</el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="保险金额" align="center" prop="money" /> <el-table-column label="附件" align="center" prop="attachments">
<template slot-scope="scope">
<el-button
v-if="scope.row.attachments"
@click="previewAttachments(scope.row.attachments)"
type="text"
>
{{ getAttachmentButtonText(scope.row.attachments) }}
</el-button>
<span v-else>无附件</span>
</template>
</el-table-column>
<el-table-column label="保险金额" align="center" prop="money"/>
<el-table-column label="保险到期时间" align="center" prop="insuranceTime" width="180"> <el-table-column label="保险到期时间" align="center" prop="insuranceTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.insuranceTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.insuranceTime, '{y}-{m}-{d}') }}</span>
@ -83,13 +96,15 @@
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
>修改</el-button> >修改
</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
>删除</el-button> >删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -106,42 +121,40 @@
<el-dialog :title="title" :visible.sync="open" width="750px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="负责人1" prop="userName"> <el-form-item label="负责人1" prop="userName">
<el-input v-model="form.userName" placeholder="请输入负责人1" /> <el-input v-model="form.userName" placeholder="请输入负责人1"/>
</el-form-item> </el-form-item>
<el-form-item label="负责人2" prop="userNames"> <el-form-item label="负责人2" prop="userNames">
<el-input v-model="form.userNames" placeholder="请输入负责人2" /> <el-input v-model="form.userNames" placeholder="请输入负责人2"/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="车辆" prop="carId">
<template>
<el-select v-model="form.carId" placeholder="请选择车辆">
<el-option
v-for="item in carLists"
:key="item.id"
:label="item.carModel"
:value="item.id">
</el-option>
</el-select>
</template>
</el-form-item>-->
<el-form-item label="车牌号" prop="carNo"> <el-form-item label="车牌号" prop="carNo">
<el-input v-model="form.carNo" placeholder="请输入车牌号" /> <el-input v-model="form.carNo" placeholder="请输入车牌号"/>
</el-form-item> </el-form-item>
<el-form-item label="保险公司名称" prop="company"> <el-form-item label="保险公司名称" prop="company">
<el-input v-model="form.company" placeholder="请输入保险公司名称" /> <el-input v-model="form.company" placeholder="请输入保险公司名称"/>
</el-form-item> </el-form-item>
<el-form-item label="保险内容" prop="content"> <el-form-item label="保险内容" prop="content">
<editor v-model="form.content" :min-height="192"/> <editor v-model="form.content" :min-height="192"/>
</el-form-item> </el-form-item>
<el-form-item label="附件" prop="attachments">
<drive-file-upload
:fileSize="5"
:limit="10"
:fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'docx', 'xlsx', 'pptx', 'wps']"
v-model="form.attachments"
/>
</el-form-item>
<el-form-item label="保险金额" prop="money"> <el-form-item label="保险金额" prop="money">
<el-input v-model="form.money" placeholder="请输入保险金额" /> <el-input v-model="form.money" placeholder="请输入保险金额"/>
</el-form-item> </el-form-item>
<el-form-item label="保险到期时间" prop="insuranceTime"> <el-form-item label="保险到期时间" prop="insuranceTime">
<el-date-picker clearable <el-date-picker clearable
v-model="form.insuranceTime" v-model="form.insuranceTime"
type="date" type="date"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
placeholder="请选择保险到期时间"> placeholder="请选择保险到期时间"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -150,42 +163,87 @@
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="查看" :visible.sync="viewFlag" width="65%" append-to-body>
<el-dialog title="查看" :visible.sync="viewFlag" width="65%" append-to-body>
<div style="box-sizing: border-box;padding: 15px;overflow: hidden" v-html="viewContent"></div> <div style="box-sizing: border-box;padding: 15px;overflow: hidden" v-html="viewContent"></div>
</el-dialog> </el-dialog>
<!-- 附件预览对话框 -->
<el-dialog
:title="'附件预览 - ' + currentFileName"
:visible.sync="isShowFile"
width="80%"
append-to-body
@closed="handlePreviewClose"
>
<div class="preview-container">
<!-- 统一使用 iframe 预览 -->
<iframe
v-if="currentFileUrl"
:src="currentFileUrl"
frameborder="0"
class="preview-content"
/>
<!-- 文件列表 -->
<div class="file-list">
<el-table
:data="attachmentList"
height="100%"
@row-click="handleFileClick"
highlight-current-row
>
<el-table-column
prop="name"
label="附件列表"
min-width="180"
>
<template #default="{row}">
<div :class="{'active-file': row.originalUrl === currentOriginalUrl}">
<i :class="getFileIcon(row.name)"></i>
{{ row.name }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="downloadCurrentFile">
<i class="el-icon-download"></i> 下载
</el-button>
<el-button type="primary" @click="isShowFile = false">关闭</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { listInsurance, getInsurance, delInsurance, addInsurance, updateInsurance ,listCards} from "./api/insurance"; import { listInsurance, getInsurance, delInsurance, addInsurance, updateInsurance, listCards } from './api/insurance'
import editor from '@/components/Editor/index.vue' import editor from '@/components/Editor/index.vue'
import driveFileUpload from '@/components/FileUpload/index.vue'
import ImagePreview from '@/components/ImagePreview'
export default { export default {
name: "Insurance", name: 'Insurance',
components: {editor}, components: { editor, driveFileUpload, ImagePreview },
data() { data() {
return { return {
viewContent:"", inspectionFileUrl: process.env.VUE_APP_INSPECTION_FILE_URL,
viewFlag:false, viewContent: '',
carLists:[], viewFlag: false,
// 遮罩层 carLists: [],
loading: true, loading: true,
// 选中数组
ids: [], ids: [],
// 非单个禁用
single: true, single: true,
// 非多个禁用
multiple: true, multiple: true,
// 显示搜索条件
showSearch: true, showSearch: true,
// 总条数
total: 0, total: 0,
// 保险管理表格数据
insuranceList: [], insuranceList: [],
// 弹出层标题 title: '',
title: "",
// 是否显示弹出层
open: false, open: false,
// 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
@ -195,67 +253,227 @@ export default {
company: null, company: null,
content: null, content: null,
money: null, money: null,
insuranceTime: null, insuranceTime: null
}, },
// 表单参数 form: {
form: {}, attachments: null
// 表单校验 },
isShowFile: false,
attachmentList: [],
currentFileUrl: '',
currentOriginalUrl: '',
currentFileName: '',
currentFileType: '',
rules: { rules: {
userName: [ userName: [
{ required: true, message: "负责人不能为空", trigger: "blur" } { required: true, message: '负责人不能为空', trigger: 'blur' }
], ],
carId: [ carId: [
{ required: true, message: "车辆id不能为空", trigger: "blur" } { required: true, message: '车辆id不能为空', trigger: 'blur' }
], ],
company: [ company: [
{ required: true, message: "保险公司名称不能为空", trigger: "blur" } { required: true, message: '保险公司名称不能为空', trigger: 'blur' }
], ],
content: [ content: [
{ required: true, message: "保险内容不能为空", trigger: "blur" } { required: true, message: '保险内容不能为空', trigger: 'blur' }
], ],
money: [ money: [
{ required: true, message: "保险金额不能为空", trigger: "blur" } { required: true, message: '保险金额不能为空', trigger: 'blur' }
], ],
insuranceTime: [ insuranceTime: [
{ required: true, message: "保险到期时间不能为空", trigger: "blur" } { required: true, message: '保险到期时间不能为空', trigger: 'blur' }
], ],
carNo: [ carNo: [
{ required: true, message: "保险到期时间不能为空", trigger: "blur" } { required: true, message: '车牌号不能为空', trigger: 'blur' }
], ]
} }
}; }
},
computed: {
isImage() {
return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(this.currentFileType)
}
}, },
created() { created() {
this.getList(); this.getList()
this.listCards(); this.listCards()
}, },
methods: { methods: {
viewContentFun(data) {
viewContentFun(data){ this.viewContent = data
this.viewContent =data; this.viewFlag = true
this.viewFlag = true;
}, },
listCards(){ // 预览附件
previewAttachments(attachments) {
try {
const attachmentUrls = this.parseAttachmentString(attachments)
console.log('attachmentUrls', attachmentUrls)
this.attachmentList = attachmentUrls.map(url => ({
name: this.getFileNameFromPath(url),
url: this.getOfficeOnlinePreviewUrl(url),
originalUrl: url,
fileType: this.getFileExtension(url)
}))
if (this.attachmentList.length > 0) {
this.currentFileUrl = this.attachmentList[0].url
this.currentOriginalUrl = this.attachmentList[0].originalUrl
this.currentFileName = this.attachmentList[0].name
this.currentFileType = this.attachmentList[0].fileType.toLowerCase()
this.isShowFile = true
} else {
this.$message.warning('未找到可预览的附件')
}
} catch (error) {
console.error('附件预览错误:', error)
this.$message.error(`预览失败: ${error.message}`)
}
},
// 生成 Office Online 预览 URL
getOfficeOnlinePreviewUrl(fileUrl) {
const ext = this.getFileExtension(fileUrl).toLowerCase()
const supportedTypes = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'csv', 'rtf']
const previewUrl = fileUrl.includes('http') ? this.inspectionFileUrl + fileUrl.replace(/^.*?uploads\//, 'uploads/') : this.previewUrl + fileUrl
if (ext == 'pdf' || ext == 'txt') {
console.log('pdf', previewUrl)
return previewUrl
} else {
return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`
}
return fileUrl
},
// 从路径中提取文件名
getFileNameFromPath(url) {
if (!url) return '未命名文件'
try {
// 处理URL编码的文件名（如中文）
const pathname = new URL(url).pathname
const decoded = decodeURIComponent(pathname)
return decoded.split('/').pop() || '未命名文件'
} catch {
// 如果不是标准URL，尝试直接处理
const cleanUrl = url.split('?')[0].split('#')[0]
return cleanUrl.split('/').pop() || cleanUrl.split('\\').pop() || '未命名文件'
}
},
// 获取文件扩展名
getFileExtension(filename) {
return filename.split('.').pop().toLowerCase()
},
// 处理文件点击
handleFileClick(row) {
console.log('当前文件预览地址:', row.url)
this.currentFileUrl = row.url
this.currentOriginalUrl = row.originalUrl
this.currentFileName = row.name
this.currentFileType = row.fileType.toLowerCase()
},
// 下载当前文件
downloadCurrentFile() {
if (!this.currentOriginalUrl) return
const link = document.createElement('a')
link.href = this.currentOriginalUrl
link.target = '_blank'
link.download = this.currentFileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
// 关闭预览时的清理
handlePreviewClose() {
this.currentFileUrl = ''
this.currentFileName = ''
this.attachmentList = []
},
// 解析附件字符串
parseAttachmentString(attachments) {
const isValidUrl = url => /^https?:\/\/[^\s]+$/.test(url)
if (
Array.isArray(attachments) &&
attachments.length === 1 &&
typeof attachments[0] === 'string' &&
attachments[0].includes(',') &&
attachments[0].includes('http')
) {
attachments = attachments[0] // 解包为字符串
}
if (!attachments) return []
if (Array.isArray(attachments)) {
return attachments.filter(item => typeof item === 'string' && isValidUrl(item))
}
if (typeof attachments === 'string') {
return attachments.split(',')
.map(item => item.trim())
.filter(isValidUrl)
}
return []
},
getAttachmentButtonText(attachments) {
const count = this.parseAttachmentString(attachments).length
return count > 0 ? `查看附件(${count})` : '无附件'
},
listCards() {
listCards().then(response => { listCards().then(response => {
this.carLists = response.data; this.carLists = response.data
}); })
}, },
/** 查询保险管理列表 */ /** 查询保险管理列表 */
getList() { getList() {
this.loading = true; this.loading = true
listInsurance(this.queryParams).then(response => { listInsurance(this.queryParams).then(response => {
this.insuranceList = response.data.records; this.insuranceList = response.data.records.map(item => {
this.total = response.data.total; item.attachments = this.parseAttachmentString(item.attachments)
this.loading = false; return item
}); })
this.total = response.data.total
this.loading = false
})
}, },
// 取消按钮
// 获取文件图标
getFileIcon(filename) {
const ext = this.getFileExtension(filename)
const iconMap = {
pdf: 'el-icon-document-pdf',
doc: 'el-icon-document-word',
docx: 'el-icon-document-word',
xls: 'el-icon-document-excel',
xlsx: 'el-icon-document-excel',
ppt: 'el-icon-document-ppt',
pptx: 'el-icon-document-ppt',
jpg: 'el-icon-picture',
png: 'el-icon-picture',
gif: 'el-icon-picture',
txt: 'el-icon-document'
}
return iconMap[ext] || 'el-icon-document'
},
cancel() { cancel() {
this.open = false; this.open = false
this.reset(); this.reset()
}, },
// 表单重置
reset() { reset() {
this.form = { this.form = {
id: null, id: null,
@ -269,78 +487,123 @@ export default {
createTime: null, createTime: null,
createBy: null, createBy: null,
updateTime: null, updateTime: null,
updateBy: null updateBy: null,
}; attachments: null
this.resetForm("form"); }
this.resetForm('form')
}, },
/** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1
this.getList(); this.getList()
}, },
/** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm('queryForm')
this.handleQuery(); this.handleQuery()
}, },
// 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.id) this.ids = selection.map(item => item.id)
this.single = selection.length!==1 this.single = selection.length !== 1
this.multiple = !selection.length this.multiple = !selection.length
}, },
/** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.reset()
this.open = true; this.open = true
this.title = "添加保险管理"; this.title = '添加保险管理'
}, },
/** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset()
const id = row.id || this.ids const id = row.id || this.ids
getInsurance(id).then(response => { getInsurance(id).then(response => {
this.form = response.data; this.form = response.data
this.open = true; if (!this.form.attachments) {
this.title = "修改保险管理"; this.form.attachments = []
}); }
this.open = true
this.title = '修改保险管理'
})
}, },
/** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs['form'].validate(valid => {
if (valid) { if (valid) {
let attachments = []
if (Array.isArray(this.form.attachments)) {
attachments = this.form.attachments.map(item => item.url || item)
} else if (this.form.attachments) {
attachments = [this.form.attachments.url || this.form.attachments]
}
const formData = {
...this.form,
attachments: attachments.join(',')
}
if (this.form.id != null) { if (this.form.id != null) {
updateInsurance(this.form).then(response => { updateInsurance(formData).then(response => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess('修改成功')
this.open = false; this.open = false
this.getList(); this.getList()
}); })
} else { } else {
addInsurance(this.form).then(response => { addInsurance(formData).then(response => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess('新增成功')
this.open = false; this.open = false
this.getList(); this.getList()
}); })
} }
} }
}); })
}, },
/** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids
this.$modal.confirm('是否确认删除保险管理编号为"' + ids + '"的数据项？').then(function() { this.$modal.confirm('是否确认删除保险管理编号为"' + ids + '"的数据项？').then(function() {
return delInsurance(ids); return delInsurance(ids)
}).then(() => { }).then(() => {
this.getList(); this.getList()
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess('删除成功')
}).catch(() => {}); }).catch(() => {
})
}, },
/** 导出按钮操作 */
handleExport() { handleExport() {
this.download('drivingSchool/system/insurance/export', { this.download('drivingSchool/system/insurance/export', {
...this.queryParams ...this.queryParams
}, `insurance_${new Date().getTime()}.xlsx`) }, `insurance_${new Date().getTime()}.xlsx`)
} }
} }
}; }
</script> </script>
<style scoped>
.preview-container {
display: flex;
height: 70vh;
gap: 15px;
}
.preview-content {
flex: 3;
width: 100%;
height: 100%;
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #fff;
}
iframe[type="application/pdf"] {
background-color: #525659; /* PDF查看器的背景色 */
}
.file-list {
flex: 1;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
overflow: hidden;
}
.active-file {
color: #409EFF;
font-weight: bold;
}
</style>

386
src/views/drivingSchool/file/file.vue
View File

@ -70,7 +70,8 @@
<div v-if="item.type == 2"> <div v-if="item.type == 2">
<img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage"> <img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
<img :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath" <img :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath"
style="width: 100px;height: 100px;" v-else> style="width: 100px;height: 100px;" v-else
>
<div>{{ item.fileName }}</div> <div>{{ item.fileName }}</div>
</div> </div>
@ -94,7 +95,8 @@
v-for="item in staffList" v-for="item in staffList"
:key="item.userId" :key="item.userId"
:label="item.name" :label="item.name"
:value="item.userId"> :value="item.userId"
>
</el-option> </el-option>
</el-select> </el-select>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -108,7 +110,8 @@
<audio v-if="isAudioType" class="preview-iframe" controls> <audio v-if="isAudioType" class="preview-iframe" controls>
<source :src="selectFile.filePath.includes('http') <source :src="selectFile.filePath.includes('http')
? inspectionFileUrl + selectFile.filePath.replace(/^.*?uploads\//, 'uploads/') ? inspectionFileUrl + selectFile.filePath.replace(/^.*?uploads\//, 'uploads/')
: imageUrl + selectFile.filePath"/> : imageUrl + selectFile.filePath"
/>
</audio> </audio>
<!-- 左侧预览区域 --> <!-- 左侧预览区域 -->
<iframe <iframe
@ -123,7 +126,8 @@
:src="selectFile.filePath.includes('http') :src="selectFile.filePath.includes('http')
? inspectionFileUrl + selectFile.filePath.replace(/^.*?uploads\//, 'uploads/') ? inspectionFileUrl + selectFile.filePath.replace(/^.*?uploads\//, 'uploads/')
: imageUrl + selectFile.filePath" : imageUrl + selectFile.filePath"
v-if="isImage"> v-if="isImage"
>
</image-preview> </image-preview>
<!-- 如果selectFile.filePath包含http就不拼接imageUrl --> <!-- 如果selectFile.filePath包含http就不拼接imageUrl -->
@ -146,11 +150,13 @@
:data="inspectionFileList.filter(file => file.type !== '1')" :data="inspectionFileList.filter(file => file.type !== '1')"
height="100%" height="100%"
@row-click="handleFileClick" @row-click="handleFileClick"
:row-class-name="getRowClassName"> :row-class-name="getRowClassName"
>
<el-table-column <el-table-column
prop="fileName" prop="fileName"
label="文件列表" label="文件列表"
min-width="180"> min-width="180"
>
<template #default="{ row }"> <template #default="{ row }">
<!-- 仅当 type 不是 '1' 时才显示 --> <!-- 仅当 type 不是 '1' 时才显示 -->
<div class="file-item"> <div class="file-item">
@ -204,7 +210,8 @@
:fileSize="30" :fileSize="30"
:limit="1" :limit="1"
:fileType="['doc', 'xls', 'ppt', 'txt', 'pdf','png','jpg','jpeg','gif','docx','xlsx','pptx','wps']" :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf','png','jpg','jpeg','gif','docx','xlsx','pptx','wps']"
v-model="form.filePath"/> v-model="form.filePath"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-cascader <el-cascader
@ -228,7 +235,8 @@
v-model="form.warnTime" v-model="form.warnTime"
type="date" type="date"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
placeholder="请选择提醒时间"> placeholder="请选择提醒时间"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -251,7 +259,8 @@
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
:before-upload="handleUpload" :before-upload="handleUpload"
:headers="headers" :headers="headers"
:file-list="fileList"> :file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
@ -261,7 +270,8 @@
v-model="form.warnTime" v-model="form.warnTime"
type="date" type="date"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
placeholder="请选择提醒时间"> placeholder="请选择提醒时间"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<!-- 上传进度 --> <!-- 上传进度 -->
@ -288,19 +298,19 @@ import {
listByPermission, listByPermission,
getFileRecord, getFileRecord,
addBatchInspectionFile, queryTreeFolder addBatchInspectionFile, queryTreeFolder
} from "./api/file"; } from './api/file'
import driveFileUpload from '@/components/FileUpload/index.vue' import driveFileUpload from '@/components/FileUpload/index.vue'
import {getAccessToken} from "@/utils/auth"; import { getAccessToken } from '@/utils/auth'
// import cos from "@/utils/cosUpload" // import cos from "@/utils/cosUpload"
import cos from "@/utils/cos" import cos from '@/utils/cos'
export default { export default {
name: "DriveFile", name: 'DriveFile',
components: {driveFileUpload}, components: { driveFileUpload },
data() { data() {
return { return {
uploadProgress: 0, uploadProgress: 0,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/cosUpload", uploadFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/cosUpload',
imageUrl: process.env.VUE_APP_FILE_API, imageUrl: process.env.VUE_APP_FILE_API,
previewUrl: process.env.VUE_APP_PREVIEW_URL, previewUrl: process.env.VUE_APP_PREVIEW_URL,
inspectionFileUrl: process.env.VUE_APP_INSPECTION_FILE_URL, inspectionFileUrl: process.env.VUE_APP_INSPECTION_FILE_URL,
@ -309,7 +319,7 @@ export default {
// 选中数组 // 选中数组
ids: [], ids: [],
fileList: [], fileList: [],
headers: {Authorization: "Bearer " + getAccessToken()}, // 设置上传的请求头部 headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部
// 非单个禁用 // 非单个禁用
single: true, single: true,
// 非多个禁用 // 非多个禁用
@ -321,7 +331,7 @@ export default {
// inspectionFile表格数据 // inspectionFile表格数据
inspectionFileList: [], inspectionFileList: [],
// 弹出层标题 // 弹出层标题
title: "", title: '',
selectFile: { selectFile: {
isImage: false isImage: false
}, },
@ -342,7 +352,7 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
type: null, type: null,
fatherId: null, fatherId: null
}, },
fatherId: '', fatherId: '',
oldFatherId: '', oldFatherId: '',
@ -354,18 +364,18 @@ export default {
fileList: [ fileList: [
{ {
required: false, required: false,
message: "文件路径不能为空", message: '文件路径不能为空',
trigger: "blur" trigger: 'blur'
}, },
{ {
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
if (!value || value.length === 0) { if (!value || value.length === 0) {
callback(new Error("请至少上传一个文件")); callback(new Error('请至少上传一个文件'))
} else { } else {
callback(); callback()
} }
}, },
trigger: "change" trigger: 'change'
} }
] ]
}, },
@ -377,13 +387,13 @@ export default {
fileUrl: '', fileUrl: '',
isImage: false, isImage: false,
folderList: [] folderList: []
}; }
}, },
computed: { computed: {
isAudioType() { isAudioType() {
const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac']; const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac']
const fileExtension = this.selectFile.fileType; const fileExtension = this.selectFile.fileType
return audioExtensions.includes(fileExtension); return audioExtensions.includes(fileExtension)
// 或者如果已有 fileType 字段（根据 MIME type 判断）： // 或者如果已有 fileType 字段（根据 MIME type 判断）：
// return this.fileType.startsWith('audio/'); // return this.fileType.startsWith('audio/');
@ -396,11 +406,11 @@ export default {
servicePackageId: 'jiaxiao', servicePackageId: 'jiaxiao',
dictType: 'drive_file_role', dictType: 'drive_file_role',
fatherId: this.$route.query.folderId || null // 明确初始状态 fatherId: this.$route.query.folderId || null // 明确初始状态
}; }
this.fatherId = this.queryParams.fatherId; this.fatherId = this.queryParams.fatherId
this.getList(); this.getList()
this.queryTreeFolder(); this.queryTreeFolder()
}, },
methods: { methods: {
queryTreeFolder() { queryTreeFolder() {
@ -418,9 +428,9 @@ export default {
// this.form.fatherId = e[e.length - 1] // this.form.fatherId = e[e.length - 1]
}, },
formatDate(timestamp) { formatDate(timestamp) {
if (!timestamp) return ""; if (!timestamp) return ''
const date = new Date(timestamp); const date = new Date(timestamp)
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}, },
/* backFile() { /* backFile() {
if (this.fatherId) { if (this.fatherId) {
@ -440,12 +450,12 @@ export default {
}, */ }, */
backFile() { backFile() {
// 获取当前文件夹的父文件夹ID // 获取当前文件夹的父文件夹ID
const currentFatherId = this.fatherId; const currentFatherId = this.fatherId
if (currentFatherId) { if (currentFatherId) {
// 如果有当前文件夹ID，查询其父文件夹 // 如果有当前文件夹ID，查询其父文件夹
getInspectionFile(currentFatherId).then(response => { getInspectionFile(currentFatherId).then(response => {
const newFatherId = response.data.fatherId; const newFatherId = response.data.fatherId
// 更新查询参数 // 更新查询参数
this.queryParams = { this.queryParams = {
@ -453,32 +463,32 @@ export default {
fatherId: newFatherId, fatherId: newFatherId,
pageNum: 1, pageNum: 1,
fileName: newFatherId ? '' : this.queryParams.fileName // 在根目录保留文件名搜索 fileName: newFatherId ? '' : this.queryParams.fileName // 在根目录保留文件名搜索
}; }
this.fatherId = newFatherId; this.fatherId = newFatherId
// 获取文件夹列表 // 获取文件夹列表
this.getFolderList({ this.getFolderList({
fatherId: newFatherId, fatherId: newFatherId,
servicePackageId: 'jiaxiao', // 确保带上服务包ID servicePackageId: 'jiaxiao', // 确保带上服务包ID
dictType: 'drive_file_role' // 确保带上字典类型 dictType: 'drive_file_role' // 确保带上字典类型
}); })
}).catch(error => { }).catch(error => {
console.error("获取父文件夹失败:", error); console.error('获取父文件夹失败:', error)
}); })
} else { } else {
// 如果已经在根目录，刷新当前列表 // 如果已经在根目录，刷新当前列表
this.queryParams = { this.queryParams = {
...this.queryParams, ...this.queryParams,
fatherId: null, // 明确设置为null fatherId: null, // 明确设置为null
pageNum: 1 pageNum: 1
}; }
this.getFolderList({ this.getFolderList({
fatherId: null, fatherId: null,
servicePackageId: 'jiaxiao', servicePackageId: 'jiaxiao',
dictType: 'drive_file_role' dictType: 'drive_file_role'
}); })
} }
}, },
//预览文件 //预览文件
@ -487,8 +497,7 @@ export default {
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' +
(item.filePath.includes('http') (item.filePath.includes('http')
? this.inspectionFileUrl + item.filePath.replace(/^.*?uploads\//, 'uploads/') ? this.inspectionFileUrl + item.filePath.replace(/^.*?uploads\//, 'uploads/')
: this.previewUrl + item.filePath); : this.previewUrl + item.filePath)
// this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath // this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
console.log(this.fileUrl) console.log(this.fileUrl)
@ -511,10 +520,10 @@ export default {
}) })
} }
}, },
getRowClassName({row}) { getRowClassName({ row }) {
console.log('返回的class', row.id === this.selectFile.id ? 'highlight-row' : '') console.log('返回的class', row.id === this.selectFile.id ? 'highlight-row' : '')
// 如果当前行是选中的文件，添加高亮样式 // 如果当前行是选中的文件，添加高亮样式
return row.id === this.selectFile.id ? 'highlight-row' : ''; return row.id === this.selectFile.id ? 'highlight-row' : ''
}, },
clickStaff(fileId) { clickStaff(fileId) {
this.fileId = fileId this.fileId = fileId
@ -545,20 +554,20 @@ export default {
// }, // },
/** 查询inspectionFile列表 */ /** 查询inspectionFile列表 */
getList() { getList() {
this.loading = true; this.loading = true
const params = { const params = {
...this.queryParams, ...this.queryParams,
servicePackageId: 'jiaxiao', servicePackageId: 'jiaxiao',
dictType: 'drive_file_role' dictType: 'drive_file_role'
}; }
listByPermission(params).then(response => { listByPermission(params).then(response => {
this.inspectionFileList = response.data; this.inspectionFileList = response.data
if (response.data.length > 0) { if (response.data.length > 0) {
this.queryParams.fatherId = response.data[0].fatherId; this.queryParams.fatherId = response.data[0].fatherId
} }
this.loading = false; this.loading = false
}); })
}, },
/* getFolderList(data) { /* getFolderList(data) {
this.loading = true; this.loading = true;
@ -574,22 +583,22 @@ export default {
}); });
}, */ }, */
getFolderList(data) { getFolderList(data) {
this.loading = true; this.loading = true
// 确保包含必要的查询参数 // 确保包含必要的查询参数
const params = { const params = {
...data, ...data,
servicePackageId: data.servicePackageId || 'jiaxiao', servicePackageId: data.servicePackageId || 'jiaxiao',
dictType: data.dictType || 'drive_file_role' dictType: data.dictType || 'drive_file_role'
}; }
listByPermission(params).then(response => { listByPermission(params).then(response => {
this.inspectionFileList = response.data; this.inspectionFileList = response.data
this.loading = false; this.loading = false
}).catch(error => { }).catch(error => {
console.error("获取文件夹列表失败:", error); console.error('获取文件夹列表失败:', error)
this.loading = false; this.loading = false
}); })
}, },
fatherji(id) { fatherji(id) {
this.fatherId = id this.fatherId = id
@ -627,25 +636,25 @@ export default {
// const link = document.createElement('a'); // const link = document.createElement('a');
// 判断filePath中是否包含http // 判断filePath中是否包含http
if (item.filePath.includes('http')) { if (item.filePath.includes('http')) {
window.open(item.filePath); window.open(item.filePath)
return; return
} }
let href = "https://www.nuoyunr.com/minio/" + item.filePath; // 文件路径 let href = 'https://www.nuoyunr.com/minio/' + item.filePath // 文件路径
// var lastIndexOf = item.filePath.lastIndexOf("."); // var lastIndexOf = item.filePath.lastIndexOf(".");
// link.download = item.fileName+item.filePath.substr(lastIndexOf); // 下载的文件名 // link.download = item.fileName+item.filePath.substr(lastIndexOf); // 下载的文件名
window.open(href); window.open(href)
// // 触发下载 // // 触发下载
// link.click(); // link.click();
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false
this.reset(); this.reset()
}, },
// 取消按钮 // 取消按钮
cancelBatch() { cancelBatch() {
this.openBatch = false; this.openBatch = false
this.resetBatch(); this.resetBatch()
}, },
// 表单重置 // 表单重置
reset() { reset() {
@ -661,8 +670,8 @@ export default {
createBy: null, createBy: null,
updateTime: null, updateTime: null,
updateBy: null updateBy: null
}; }
this.resetForm("form"); this.resetForm('form')
}, },
// 表单重置 // 表单重置
resetBatch() { resetBatch() {
@ -678,21 +687,21 @@ export default {
createBy: null, createBy: null,
updateTime: null, updateTime: null,
updateBy: null updateBy: null
}; }
this.fileList = [] this.fileList = []
this.resetForm("formBatch"); this.resetForm('formBatch')
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
console.log('查询参数', this.queryParams) console.log('查询参数', this.queryParams)
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1
this.getList(); this.getList()
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.daterangeWarnTime = []; this.daterangeWarnTime = []
this.resetForm("queryForm"); this.resetForm('queryForm')
this.handleQuery(); this.handleQuery()
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
@ -702,86 +711,86 @@ export default {
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.reset()
this.open = true; this.open = true
this.title = "新增"; this.title = '新增'
}, },
/** 批量新增按钮操作 */ /** 批量新增按钮操作 */
handleAddBatch() { handleAddBatch() {
this.resetBatch(); this.resetBatch()
this.openBatch = true; this.openBatch = true
this.title = "新增"; this.title = '新增'
}, },
handleE(item) { handleE(item) {
this.reset(item); this.reset(item)
this.form = item; this.form = item
this.open = true; this.open = true
this.title = "修改"; this.title = '修改'
console.log(item) console.log(item)
//判断文件夹树中是否有item的id或者item子类的id如果有禁用 //判断文件夹树中是否有item的id或者item子类的id如果有禁用
this.folderList = this.disableIfExistsInTree(this.folderList, item.id) this.folderList = this.disableIfExistsInTree(this.folderList, item.id)
}, },
disableIfExistsInTree(treeData, targetId) { disableIfExistsInTree(treeData, targetId) {
console.log(treeData, targetId, '执行'); console.log(treeData, targetId, '执行')
function traverse(nodes, parentDisabled = false) { function traverse(nodes, parentDisabled = false) {
return nodes.map(node => { return nodes.map(node => {
let newNode = { ...node }; let newNode = { ...node }
// 递归处理子节点，同时传递父级的禁用状态 // 递归处理子节点，同时传递父级的禁用状态
if (newNode.children && newNode.children.length > 0) { if (newNode.children && newNode.children.length > 0) {
newNode.children = traverse(newNode.children, newNode.value === targetId || parentDisabled); newNode.children = traverse(newNode.children, newNode.value === targetId || parentDisabled)
} }
// 只禁用目标节点及其子节点，不影响兄弟节点 // 只禁用目标节点及其子节点，不影响兄弟节点
if (newNode.value === targetId || parentDisabled) { if (newNode.value === targetId || parentDisabled) {
newNode.disabled = true; newNode.disabled = true
} }
return newNode; return newNode
}); })
} }
return traverse(treeData); return traverse(treeData)
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset()
const id = row.id || this.ids const id = row.id || this.ids
getInspectionFile(id).then(response => { getInspectionFile(id).then(response => {
this.form = response.data; this.form = response.data
this.open = true; this.open = true
this.title = "修改inspectionFile"; this.title = '修改inspectionFile'
}); })
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs['form'].validate(valid => {
console.log(this.form, '内容') console.log(this.form, '内容')
if (!this.form.filePath && this.form.type == "2") { if (!this.form.filePath && this.form.type == '2') {
this.$modal.msgError("请上传文件"); this.$modal.msgError('请上传文件')
return false; return false
} }
if (valid) { if (valid) {
if (this.form.id != null) { if (this.form.id != null) {
updateInspectionFile(this.form).then(response => { updateInspectionFile(this.form).then(response => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess('修改成功')
this.form = {} this.form = {}
this.open = false; this.open = false
this.getList(); this.getList()
}); })
} else { } else {
this.form.fatherId = this.fatherId this.form.fatherId = this.fatherId
this.form.servicePackageId = 'jiaxiao' this.form.servicePackageId = 'jiaxiao'
addInspectionFile(this.form).then(response => { addInspectionFile(this.form).then(response => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess('新增成功')
this.form = {} this.form = {}
this.open = false; this.open = false
this.getList(); this.getList()
}); })
} }
} }
}); })
}, },
/** 提交按钮 */ /** 提交按钮 */
submitBatchForm() { submitBatchForm() {
@ -795,21 +804,21 @@ export default {
item.warnTime = this.form.warnTime item.warnTime = this.form.warnTime
}) })
addBatchInspectionFile(this.fileList).then(res => { addBatchInspectionFile(this.fileList).then(res => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess('新增成功')
this.openBatch = false this.openBatch = false
this.resetBatch() this.resetBatch()
this.getList(); this.getList()
}) })
}, },
/** 分配文件权限给对应用户 */ /** 分配文件权限给对应用户 */
saveStaff() { saveStaff() {
console.log(this.selectStaffList, "66666666666666") console.log(this.selectStaffList, '66666666666666')
const data = { const data = {
userIds: this.selectStaffList, userIds: this.selectStaffList,
fileId: this.fileId fileId: this.fileId
} }
assignAuthority(data).then(res => { assignAuthority(data).then(res => {
this.$modal.msgSuccess("分配权限成功") this.$modal.msgSuccess('分配权限成功')
}) })
this.selectStaffList = [] this.selectStaffList = []
this.isShow = false this.isShow = false
@ -821,28 +830,28 @@ export default {
}, },
//新建删除 //新建删除
Deleteanniu(id) { Deleteanniu(id) {
this.$modal.confirm('是否确认删除inspectionFile编号为"' + id + '"的数据项？').then(function () { this.$modal.confirm('是否确认删除inspectionFile编号为"' + id + '"的数据项？').then(function() {
return delInspectionFile(id); return delInspectionFile(id)
}).then(() => { }).then(() => {
this.getList(); this.getList()
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess('删除成功')
}).catch(() => { }).catch(() => {
}); })
}, },
getFileNameWithoutExtension(filename) { getFileNameWithoutExtension(filename) {
if (!filename.includes('.')) return filename; // 没有后缀直接返回 if (!filename.includes('.')) return filename // 没有后缀直接返回
return filename.substring(0, filename.lastIndexOf('.')); return filename.substring(0, filename.lastIndexOf('.'))
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids
this.$modal.confirm('是否确认删除inspectionFile编号为"' + ids + '"的数据项？').then(function () { this.$modal.confirm('是否确认删除inspectionFile编号为"' + ids + '"的数据项？').then(function() {
return delInspectionFile(ids); return delInspectionFile(ids)
}).then(() => { }).then(() => {
this.getList(); this.getList()
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess('删除成功')
}).catch(() => { }).catch(() => {
}); })
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
@ -885,45 +894,45 @@ export default {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$nextTick(() => { this.$nextTick(() => {
this.uploadProgress = 0; // 初始化进度条 this.uploadProgress = 0 // 初始化进度条
console.log("uploadProgress:", this.uploadProgress) console.log('uploadProgress:', this.uploadProgress)
}); })
// 生成 COS 上传路径 // 生成 COS 上传路径
const fileName = `${Date.now()}_${file.name}`; const fileName = `${Date.now()}_${file.name}`
const uploadPath = `files/${fileName}`; // 自定义 COS 存储路径 const uploadPath = `files/${fileName}` // 自定义 COS 存储路径
// 腾讯云 COS SDK 上传 // 腾讯云 COS SDK 上传
cos.putObject( cos.putObject(
{ {
Bucket: "lanan-1319802091", Bucket: 'lanan-1319802091',
Region: "ap-chengdu", Region: 'ap-chengdu',
Key: uploadPath, Key: uploadPath,
Body: file, Body: file,
onProgress: (progressData) => { onProgress: (progressData) => {
// console.log("上传进度:", progressData); // console.log("上传进度:", progressData);
this.$nextTick(() => { this.$nextTick(() => {
this.uploadProgress = Math.round(progressData.percent * 100); // 更新进度 this.uploadProgress = Math.round(progressData.percent * 100) // 更新进度
console.log("uploadProgress2:", this.uploadProgress) console.log('uploadProgress2:', this.uploadProgress)
}); })
}, }
}, },
(err, data) => { (err, data) => {
this.$modal.closeLoading(); this.$modal.closeLoading()
this.uploadProgress = null; // 上传完成后隐藏进度条 this.uploadProgress = null // 上传完成后隐藏进度条
if (err) { if (err) {
this.$message.error("上传失败：" + err.message); this.$message.error('上传失败：' + err.message)
return reject(); return reject()
} }
this.$message.success("上传成功：" + data.Location); this.$message.success('上传成功：' + data.Location)
this.fileList.push({name: file.name, url: data.Location}); this.fileList.push({ name: file.name, url: data.Location })
resolve(); resolve()
} }
); )
}); })
}, },
// 直接使用 cos-js-sdk 进行上传 // 直接使用 cos-js-sdk 进行上传
async uploadToCOS({file}) { async uploadToCOS({ file }) {
const fileName = `files/${file.name}`; // 你的存储路径 const fileName = `files/${file.name}` // 你的存储路径
cos.putObject( cos.putObject(
{ {
Bucket: 'lanan-1319802091', // 你的存储桶名称 Bucket: 'lanan-1319802091', // 你的存储桶名称
@ -933,20 +942,20 @@ export default {
}, },
(err, data) => { (err, data) => {
if (err) { if (err) {
console.error('上传失败', err); console.error('上传失败', err)
} else { } else {
console.log('上传成功', data); console.log('上传成功', data)
} }
} }
); )
}, },
// 触发文件上传 // 触发文件上传
async handleUpload(file) { async handleUpload(file) {
this.$modal.loading("正在上传文件，请稍候..."); this.$modal.loading('正在上传文件，请稍候...')
try { try {
this.totalUploadCount += 1 this.totalUploadCount += 1
console.log('开始上传:', file); console.log('开始上传:', file)
const fileKey = `uploads/${Date.now()}_${file.name}`; // 防止重名 const fileKey = `uploads/${Date.now()}_${file.name}` // 防止重名
const data = await cos.uploadFile({ const data = await cos.uploadFile({
Bucket: 'lanan-1319802091', Bucket: 'lanan-1319802091',
@ -955,75 +964,74 @@ export default {
Body: file, Body: file,
SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传 SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传
onProgress: progressData => { onProgress: progressData => {
console.log('上传进度:', progressData); console.log('上传进度:', progressData)
}, },
onTaskReady: id => { onTaskReady: id => {
this.taskId = id; this.taskId = id
}, }
}); })
console.log('上传成功:', data); console.log('上传成功:', data)
this.uploadProgress++ this.uploadProgress++
if (this.uploadProgress === this.totalUploadCount) { if (this.uploadProgress === this.totalUploadCount) {
this.$message.success('上传成功'); this.$message.success('上传成功')
this.uploadProgress = 0; this.uploadProgress = 0
this.totalUploadCount = 0 this.totalUploadCount = 0
this.$modal.closeLoading(); this.$modal.closeLoading()
} }
// 手动修改fileList的值，需要在befoupload中添加 // 手动修改fileList的值，需要在befoupload中添加
if (!this.fileList) { if (!this.fileList) {
this.fileList = []; this.fileList = []
} }
// 上传成功后手动更新 fileList // 上传成功后手动更新 fileList
this.fileList.push({ this.fileList.push({
name: file.name, name: file.name,
url: `https://${data.Location}` // 腾讯云返回的 URL url: `https://${data.Location}` // 腾讯云返回的 URL
}); })
// return this.fileList // return this.fileList
} catch (error) { } catch (error) {
console.error('上传失败:', error); console.error('上传失败:', error)
this.$modal.closeLoading(); this.$modal.closeLoading()
} }
return false; // 阻止 el-upload 默认上传 return false // 阻止 el-upload 默认上传
}, },
// 暂停上传 // 暂停上传
pauseUpload() { pauseUpload() {
if (this.taskId) { if (this.taskId) {
cos.pauseTask(this.taskId); cos.pauseTask(this.taskId)
console.log('上传已暂停:', this.taskId); console.log('上传已暂停:', this.taskId)
} }
}, },
// 继续上传 // 继续上传
resumeUpload() { resumeUpload() {
if (this.taskId) { if (this.taskId) {
cos.restartTask(this.taskId); cos.restartTask(this.taskId)
console.log('上传已继续:', this.taskId); console.log('上传已继续:', this.taskId)
} }
}, },
// 取消上传 // 取消上传
cancelUpload() { cancelUpload() {
if (this.taskId) { if (this.taskId) {
cos.cancelTask(this.taskId); cos.cancelTask(this.taskId)
console.log('上传已取消:', this.taskId); console.log('上传已取消:', this.taskId)
} }
}, },
// 文件个数超出 // 文件个数超出
handleExceed() { handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`); this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
}, },
// 上传失败 // 上传失败
handleUploadError(err) { handleUploadError(err) {
this.$modal.msgError("上传图片失败，请重试"); this.$modal.msgError('上传图片失败，请重试')
this.$modal.closeLoading() this.$modal.closeLoading()
}, },
// 上传成功回调 // 上传成功回调
@ -1032,7 +1040,7 @@ export default {
// if (res.code === 0) { // if (res.code === 0) {
// // edit by 芋道源码 // // edit by 芋道源码
// this.uploadList.push({name: res.data.name, url: res.data.url}); // this.uploadList.push({name: res.data.name, url: res.data.url});
this.uploadedSuccessfully(); this.uploadedSuccessfully()
// } else { // } else {
// this.number--; // this.number--;
// this.$modal.closeLoading(); // this.$modal.closeLoading();
@ -1045,15 +1053,15 @@ export default {
uploadedSuccessfully() { uploadedSuccessfully() {
console.log('这是上传结束') console.log('这是上传结束')
if (this.number > 0 && this.uploadList.length === this.number) { if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList); this.fileList = this.fileList.concat(this.uploadList)
this.uploadList = []; this.uploadList = []
this.number = 0; this.number = 0
// this.$emit("input", this.listToString(this.fileList)); // this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading(); this.$modal.closeLoading()
} }
}, }
} }
}; }
</script> </script>
<style scoped> <style scoped>
.content-box { .content-box {
@ -1109,7 +1117,7 @@ export default {
/* 时间样式 */ /* 时间样式 */
.step-time { .step-time {
font-size: 14px; font-size: 14px;
//color: #666; //color: #666;
} }
/* 文件名称高亮 */ /* 文件名称高亮 */