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

更新

Browse Source
This commit is contained in:
许允枞 2025-03-21 11:13:08 +08:00
parent 46664b5b7f
commit 7fc1979928
7 changed files with 393 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.dev
View File

@ -5,8 +5,8 @@ ENV = 'development'
VUE_APP_TITLE = "车联通"后台管理系统
# 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://localhost:48080'
VUE_APP_BASE_API = 'http://122.51.230.86:48080'
VUE_APP_BASE_API = 'http://localhost:48080'
#VUE_APP_BASE_API = 'http://122.51.230.86:48080'
# 附件请求地址前缀
# VUE_APP_FILE_API = 'https://www.nuoyunr.com/minio/'
VUE_APP_FILE_API = 'http://122.51.230.86:9000/'

1
package.json
View File

@ -50,6 +50,7 @@
"bpmn-js-token-simulation": "0.10.0",
"clipboard": "2.0.8",
"core-js": "^3.26.0",
"cos-js-sdk-v5": "^1.8.7",
"crypto-js": "^4.0.0",
"dayjs": "^1.11.12",
"echarts": "^5.4.0",

161
src/components/FileUpload/index.vue
View File

@ -1,26 +1,26 @@
<template>
<div class="upload-file">
<el-upload
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
>
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
的文件
</div>
</el-upload>
@ -40,7 +40,8 @@
</template>
<script>
import { getAccessToken } from "@/utils/auth";
import {getAccessToken} from "@/utils/auth";
import cos from "@/utils/cos";
export default {
name: "FileUpload",
@ -60,7 +61,7 @@ export default {
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf","mp4","png","jpg","zip","rar","jpeg","xlsx","docx"],
default: () => ["doc", "xls", "ppt", "txt", "pdf", "mp4", "png", "jpg", "zip", "rar", "jpeg", "xlsx", "docx"],
},
// 是否显示提示
isShowTip: {
@ -75,8 +76,10 @@ export default {
viewFileUrl: process.env.VUE_APP_FILE_API,
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
headers: {Authorization: "Bearer " + getAccessToken()}, // 设置上传的请求头部
fileList: [],
uploadProgress: 0,
totalUploadCount: 0,
};
},
watch: {
@ -89,7 +92,12 @@ export default {
// 然后将数组转为对象数组
this.fileList = list.map(item => {
if (typeof item === "string") {
item = { name: item, url: this.viewFileUrl+item };
//如果包含http不拼接viewFileUrl
if (item.includes('http')) {
item = {name: item, url: item};
} else {
item = {name: item, url: this.viewFileUrl + item};
}
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
@ -111,35 +119,80 @@ export default {
},
methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
async handleBeforeUpload(file) {
this.$modal.loading("正在上传文件，请稍候...");
this.number++;
return true;
try {
this.totalUploadCount += 1
console.log('开始上传:', file);
const fileKey = `uploads/${Date.now()}_${file.name}`; // 防止重名
const data = await cos.uploadFile({
Bucket: 'lanan-1319802091',
Region: 'ap-chengdu',
Key: fileKey,
Body: file,
SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传
onProgress: progressData => {
console.log('上传进度:', progressData);
},
onTaskReady: id => {
this.taskId = id;
},
});
// 上传成功后手动更新 fileList
this.fileList.push({
name: file.name,
url: `https://${data.Location}` // 腾讯云返回的 URL
});
console.log('fileList:', this.fileList)
console.log('上传成功:', data);
this.uploadProgress++
if (this.uploadProgress === this.totalUploadCount) {
this.$message.success('上传成功');
this.uploadProgress = 0;
this.totalUploadCount = 0
this.$modal.closeLoading();
// 手动调用上传成功处理
this.uploadedSuccessfully();
}
} catch (error) {
console.error('上传失败:', error);
this.$modal.closeLoading();
}
return false; // 阻止 el-upload 默认上传
},
// handleBeforeUpload(file) {
// // 校检文件类型
// if (this.fileType) {
// let fileExtension = "";
// if (file.name.lastIndexOf(".") > -1) {
// fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
// }
// const isTypeOk = this.fileType.some((type) => {
// if (file.type.indexOf(type) > -1) return true;
// if (fileExtension && fileExtension.indexOf(type) > -1) return true;
// return false;
// });
// if (!isTypeOk) {
// this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
// return false;
// }
// }
// // 校检文件大小
// if (this.fileSize) {
// const isLt = file.size / 1024 / 1024 < this.fileSize;
// if (!isLt) {
// this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
// return false;
// }
// }
// this.$modal.loading("正在上传文件，请稍候...");
// this.number++;
// return true;
// },
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
@ -153,7 +206,7 @@ export default {
handleUploadSuccess(res, file) {
if (res.code === 0) {
// edit by 芋道源码
this.uploadList.push({ name: res.data, url: res.data });
this.uploadList.push({name: res.data, url: res.data});
this.uploadedSuccessfully();
} else {
this.number--;
@ -170,20 +223,17 @@ export default {
},
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
console.log('这是上传结束')
console.log('看不看')
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
},
// 获取文件名称
getFileName(name) {
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
} else {
return "";
return name;
}
},
// 对象转成指定字符串分隔
@ -203,18 +253,21 @@ export default {
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}

40
src/utils/cos.js Normal file
View File

@ -0,0 +1,40 @@
import COS from 'cos-js-sdk-v5';
import request from '@/utils/request'; // 引入你的封装请求方法
const cos = new COS({
// 其他配置项可参考下方 初始化配置项
// getAuthorization 必选参数
getAuthorization: function (options, callback) {
// 初始化时不会调用，只有调用 cos 方法（例如 cos.putObject）时才会进入
// 异步获取临时密钥
// 服务端 JS 示例：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
// STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
const stsUrl = '/cos/sts'; // 使用相对路径，避免本地开发跨域问题
request({
url: stsUrl,
method: 'GET'
}).then(response => {
console.log('执行了')
const data = response; // 适配你的 request 返回格式
if (!data || !data.credentials) {
return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2));
}
const {credentials} = data;
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
SecurityToken: credentials.sessionToken,
StartTime: data.startTime, // 时间戳，单位秒
ExpiredTime: data.expiredTime, // 时间戳，单位秒
ScopeLimit: true // 细粒度控制权限需要设为 true
});
}).catch(error => {
console.error('获取临时密钥失败', error);
});
}
});
export default cos;

35
src/utils/cosUpload.js Normal file
View File

@ -0,0 +1,35 @@
import cos from '@/utils/cos';
let taskId;
// 上传文件，file为选择的文件
async function upload(file) {
try {
const data = await cos.uploadFile({
Bucket: 'lanan-1319802091', // 填写自己的 bucket，必须字段
Region: 'ap-chengdu', // 存储桶所在地域，必须字段
Key: '1.jpg', // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
Body: file, // 上传文件对象
SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值，超过5MB 使用分块上传，小于5MB使用简单上传。可自行设置，非必须
onProgress: function(progressData) {
console.log('上传进度：', progressData);
},
onTaskReady: function(id) { // 非必须
taskId = id;
},
});
console.log('上传成功', data);
} catch (e) {
console.error('上传失败', e);
}
}
// 监听上传队列
cos.on('update-list', data => {
console.log(data);
});
// 暂停上传任务
cos.pauseTask(taskId);
// 重启上传任务
cos.restartTask(taskId);
// 取消上传任务
cos.cancelTask(taskId)

8
src/views/login.vue
View File

@ -261,10 +261,10 @@ export default {
}
this.loginForm.captchaVerification = captchaParams.captchaVerification
//获取当前登陆人的租户
// await getUserTenant(this.loginForm).then(res => {
// console.log('当前登陆人信息', res)
// setTenantId(res.data.tenant_id)
// });
await getUserTenant(this.loginForm).then(res => {
console.log('当前登陆人信息', res)
setTenantId(res.data.tenant_id)
});
// 发起登陆
// console.log("发起登录", this.loginForm);
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {

246
src/views/partner/file/file.vue
View File

@ -69,7 +69,9 @@
</div>
<div v-if="item.type == 2">
<img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
<img :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else>
<img :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath"
style="width: 100px;height: 100px;" v-else>
<div>{{ item.fileName }}</div>
</div>
<div class="bjandshanchu">
@ -113,7 +115,12 @@
class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt' && !isAudioType && selectFile.fileType != 'pdf'"
>
</iframe>
<image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath" v-if="isImage"></image-preview>
<image-preview
class="preview-iframe"
:src="selectFile.filePath.includes('http') ? selectFile.filePath : imageUrl + selectFile.filePath"
v-if="isImage">
</image-preview>
<iframe
:src="imageUrl + selectFile.filePath"
frameborder="0"
@ -208,13 +215,14 @@
<el-form ref="formBatch" :model="form" :rules="rules" label-width="120px">
<el-form-item label="文件路径" prop="fileList">
<el-upload
action=""
class="upload-demo"
:action="uploadFileUrl"
multiple
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:before-upload="handleUpload"
:headers="headers"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
@ -229,7 +237,9 @@
placeholder="请选择提醒时间">
</el-date-picker>
</el-form-item>
<!-- 上传进度 -->
</el-form>
<!-- <el-progress v-if="uploadProgress !== null" :percentage="uploadProgress" />-->
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitBatchForm">确 定</el-button>
<el-button @click="cancelBatch">取 消</el-button>
@ -254,13 +264,16 @@ import {
} from "../api/file";
import inspFileUpload from '@/components/FileUpload/index.vue'
import {getAccessToken} from "@/utils/auth";
// import cos from "@/utils/cosUpload"
import cos from "@/utils/cos"
export default {
name: "InspectionFile",
components: {inspFileUpload},
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/uploadDetail",
uploadProgress:0,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/cosUpload",
imageUrl: process.env.VUE_APP_FILE_API,
previewUrl: process.env.VUE_APP_PREVIEW_URL,
// 遮罩层
@ -290,10 +303,12 @@ export default {
openBatch: false,
// 是否显示弹出层（分配权限）
isShow: false,
taskId: null,
// 提醒时间时间范围
daterangeWarnTime: [],
number: 0,
uploadList: [],
totalUploadCount: 0,
// 查询参数
queryParams: {
pageNum: 1,
@ -374,7 +389,9 @@ export default {
//预览文件
preview(item) {
console.log('预览文件地址', this.previewUrl)
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.previewUrl + item.filePath
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' +
(item.filePath.includes('http') ? item.filePath : this.previewUrl + item.filePath);
// this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
console.log(this.fileUrl)
this.$nextTick(() => {
@ -493,6 +510,11 @@ export default {
downloadFile(item) {
// 创建一个 <a> 元素
// const link = document.createElement('a');
// 判断filePath中是否包含http
if (item.filePath.includes('http')) {
window.open(item.filePath);
return;
}
let href = "https://www.nuoyunr.com/minio/" + item.filePath; // 文件路径
// var lastIndexOf = item.filePath.lastIndexOf(".");
// link.download = item.fileName+item.filePath.substr(lastIndexOf); // 下载的文件名
@ -593,6 +615,7 @@ export default {
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
console.log(this.form, '内容')
if (!this.form.filePath && this.form.type == "2") {
this.$modal.msgError("请上传文件");
return false;
@ -683,35 +706,172 @@ export default {
}, `inspectionFile_${new Date().getTime()}.xlsx`)
},
// 上传前校检格式和大小
// handleBeforeUpload(file) {
// // 校检文件类型
// if (this.fileType) {
// let fileExtension = "";
// if (file.name.lastIndexOf(".") > -1) {
// fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
// }
// const isTypeOk = this.fileType.some((type) => {
// if (file.type.indexOf(type) > -1) return true;
// if (fileExtension && fileExtension.indexOf(type) > -1) return true;
// return false;
// });
// if (!isTypeOk) {
// this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
// return false;
// }
// }
// // 校检文件大小
// if (this.fileSize) {
// const isLt = file.size / 1024 / 1024 < this.fileSize;
// if (!isLt) {
// this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
// return false;
// }
// }
// this.$modal.loading("正在上传文件，请稍候...");
// this.number++;
// return true;
// },
// 处理文件上传
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
return new Promise((resolve, reject) => {
this.$nextTick(() => {
this.uploadProgress = 0; // 初始化进度条
console.log("uploadProgress:", this.uploadProgress)
});
if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
this.$modal.loading("正在上传文件，请稍候...");
this.number++;
return true;
// 生成 COS 上传路径
const fileName = `${Date.now()}_${file.name}`;
const uploadPath = `files/${fileName}`; // 自定义 COS 存储路径
// 腾讯云 COS SDK 上传
cos.putObject(
{
Bucket: "lanan-1319802091",
Region: "ap-chengdu",
Key: uploadPath,
Body: file,
onProgress: (progressData) => {
// console.log("上传进度:", progressData);
this.$nextTick(() => {
this.uploadProgress = Math.round(progressData.percent * 100); // 更新进度
console.log("uploadProgress2:", this.uploadProgress)
});
},
},
(err, data) => {
this.$modal.closeLoading();
this.uploadProgress = null; // 上传完成后隐藏进度条
if (err) {
this.$message.error("上传失败：" + err.message);
return reject();
}
this.$message.success("上传成功：" + data.Location);
this.fileList.push({ name: file.name, url: data.Location });
resolve();
}
);
});
},
// 直接使用 cos-js-sdk 进行上传
async uploadToCOS({ file }) {
const fileName = `files/${file.name}`; // 你的存储路径
cos.putObject(
{
Bucket: 'lanan-1319802091', // 你的存储桶名称
Region: 'ap-chengdu', // 你的存储桶所在区域
Key: fileName, // 目标文件路径
Body: file // 上传的文件
},
(err, data) => {
if (err) {
console.error('上传失败', err);
} else {
console.log('上传成功', data);
}
}
);
},
// 触发文件上传
async handleUpload(file) {
this.$modal.loading("正在上传文件，请稍候...");
try {
this.totalUploadCount += 1
console.log('开始上传:', file);
const fileKey = `uploads/${Date.now()}_${file.name}`; // 防止重名
const data = await cos.uploadFile({
Bucket: 'lanan-1319802091',
Region: 'ap-chengdu',
Key: fileKey,
Body: file,
SliceSize: 1024 * 1024 * 5, // 5MB 触发分块上传
onProgress: progressData => {
console.log('上传进度:', progressData);
},
onTaskReady: id => {
this.taskId = id;
},
});
console.log('上传成功:', data);
this.uploadProgress++
if (this.uploadProgress === this.totalUploadCount) {
this.$message.success('上传成功');
this.uploadProgress = 0;
this.totalUploadCount = 0
this.$modal.closeLoading();
}
// 手动修改fileList的值，需要在befoupload中添加
if (!this.fileList) {
this.fileList = [];
}
// 上传成功后手动更新 fileList
this.fileList.push({
name: file.name,
url: `https://${data.Location}` // 腾讯云返回的 URL
});
// return this.fileList
} catch (error) {
console.error('上传失败:', error);
this.$modal.closeLoading();
}
return false; // 阻止 el-upload 默认上传
},
// 暂停上传
pauseUpload() {
if (this.taskId) {
cos.pauseTask(this.taskId);
console.log('上传已暂停:', this.taskId);
}
},
// 继续上传
resumeUpload() {
if (this.taskId) {
cos.restartTask(this.taskId);
console.log('上传已继续:', this.taskId);
}
},
// 取消上传
cancelUpload() {
if (this.taskId) {
cos.cancelTask(this.taskId);
console.log('上传已取消:', this.taskId);
}
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
@ -723,20 +883,22 @@ export default {
},
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 0) {
// edit by 芋道源码
this.uploadList.push({name: res.data.name, url: res.data.url});
console.log('这是上传成功')
// if (res.code === 0) {
// // edit by 芋道源码
// this.uploadList.push({name: res.data.name, url: res.data.url});
this.uploadedSuccessfully();
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.fileUpload.handleRemove(file);
this.uploadedSuccessfully();
}
// } else {
// this.number--;
// this.$modal.closeLoading();
// this.$modal.msgError(res.msg);
// this.$refs.fileUpload.handleRemove(file);
// this.uploadedSuccessfully();
// }
},
// 上传结束处理
uploadedSuccessfully() {
console.log('这是上传结束')
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];