Skip to content

S
smart_gov_platform
Commit eefecb81 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 优化上传和图片展示

parent 94242dc6
Hide whitespace changes
Inline Side-by-side
Showing with 306 additions and 148 deletions
base-manager-ui/admin/src/pages/basicset/addmatter/group/addmaterials.vue
View file @ eefecb81
......@@ -395,12 +395,13 @@ export default {
let { uid } = info.file;
if (code === 1) {
let obj = {
uid: uid,
uid,
name: fileName,
status: "done",
materialName: this.form.materialName,
fileName: fileName,
fileUrl: this.apiUrl + url,
url,
fileUrl: url,
filetype: num,
source: 1,
};
......
base-manager-ui/admin/src/pages/basicset/addmatter/group/downloadTable.vue
View file @ eefecb81
......@@ -12,8 +12,8 @@
:columns="columns"
:data-source="tableData"
>
<template slot="action" slot-scope="text">
<a @click="handleClick(text)">下载</a>
<template slot="action" slot-scope="text, record">
<a :href="record.fileUrl" :download="record.fileName">下载</a>
</template>
</a-table>
</a-modal>
......@@ -21,7 +21,7 @@
</template>
<script>
import { download } from "@/services/matter";
// import { download } from "@/services/matter";
// import axios from "axios";
const columns = [
{
......@@ -70,63 +70,60 @@ export default {
},
},
methods: {
downloadByBlob(url, name) {
let image = new Image();
image.setAttribute("crossOrigin", "anonymous");
image.src = url;
image.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob);
this.download(url, name);
// 用完释放URL对象
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
let eleLink = document.createElement("a");
eleLink.style = "display: none";
eleLink.download = name;
eleLink.href = href;
document.body.appendChild(eleLink);
eleLink.click();
eleLink.remove();
},
async downloadFile(row, type) {
let res = await download(
{ datumId: row.datumId },
{ responseType: "blob" }
);
let data = res.data;
const blob = new Blob([data], {
type: type,
});
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.setAttribute("download", row.fileName); // 设置下载文件名称
document.body.appendChild(link);
link.click();
link.remove();
},
handleClick(row) {
let index = row.fileUrl.lastIndexOf(".");
let str = row.fileUrl.slice(index + 1);
if (str === "png" || str === "jpg" || str === "jpeg") {
this.downloadByBlob(row.fileUrl, row.fileName);
} else {
this.download(row.fileUrl, row.fileName);
}
},
// downloadByBlob(url, name) {
// let image = new Image();
// image.setAttribute("crossOrigin", "anonymous");
// image.src = url;
// image.onload = () => {
// let canvas = document.createElement("canvas");
// canvas.width = image.width;
// canvas.height = image.height;
// let ctx = canvas.getContext("2d");
// ctx.drawImage(image, 0, 0, image.width, image.height);
// canvas.toBlob((blob) => {
// let url = URL.createObjectURL(blob);
// this.download(url, name);
// // 用完释放URL对象
// URL.revokeObjectURL(url);
// });
// };
// },
// download(href, name) {
// let eleLink = document.createElement("a");
// eleLink.style = "display: none";
// eleLink.download = name;
// eleLink.href = href;
// document.body.appendChild(eleLink);
// eleLink.click();
// eleLink.remove();
// },
// async downloadFile(row, type) {
// let res = await download(
// { datumId: row.datumId },
// { responseType: "blob" }
// );
// let data = res.data;
// const blob = new Blob([data], {
// type: type,
// });
// const link = document.createElement("a");
// link.href = URL.createObjectURL(blob);
// link.setAttribute("download", row.fileName); // 设置下载文件名称
// document.body.appendChild(link);
// link.click();
// link.remove();
// },
// handleClick(row) {
// let index = row.fileUrl.lastIndexOf(".");
// let str = row.fileUrl.slice(index + 1);
// if (str === "png" || str === "jpg" || str === "jpeg") {
// this.downloadByBlob(row.fileUrl, row.fileName);
// } else {
// this.download(row.fileUrl, row.fileName);
// }
// },
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<style lang="less" scoped></style>
base-manager-ui/admin/src/pages/basicset/appmarket/components/AppDetailsPage.vue
View file @ eefecb81
......@@ -8,7 +8,7 @@
width="50"
height="50"
v-if="appInfo.appIconPath"
:src="api + appInfo.appIconPath"
:src="appInfo.appIconPath"
/>
<div class="name">{{ appInfo.appName }}</div>
<div class="version">当前版本：v{{ appInfo.version }}</div>
......
base-manager-ui/admin/src/pages/basicset/appmarket/components/AppSelect.vue 0 → 100644
View file @ eefecb81
<template>
<div class="select-box">
<a-select :value="value" placeholder="请选择" @change="changeVal">
<a-select-option v-for="(v, key) in options" :key="key" :value="key">
{{ v }}
</a-select-option>
</a-select>
</div>
</template>
<script>
import local from "@/utils/local";
import { request } from "@/utils/request";
export default {
model: {
prop: "value",
event: "change",
},
props: {
value: {
required: true,
default: "",
},
info: {
type: Object,
required: true,
default: () => {},
},
},
data() {
return {
siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL,
options: {},
};
},
watch: {
info: {
handler() {
this.getOptions();
},
deep: true,
immediate: true,
},
},
methods: {
// 获取数据
async getOptions() {
if (this.$_.isEmpty(this.info)) return this.options;
let { serviceApi, fieldTypeValue } = this.info;
let fieldType = JSON.parse(fieldTypeValue);
if (!serviceApi && fieldTypeValue) {
this.options = fieldType;
} else if (serviceApi) {
let res = await request(this.api + serviceApi, "post", {
size: -1,
page: 1,
siteId: this.siteId,
});
if (res.data.code == 1) {
let { data } = res.data.data;
const firstKey = Object.keys(fieldType)[0];
const firstValue = fieldType[firstKey];
data.forEach((v) => {
this.options[v[firstValue]] = v[firstKey];
});
this.$forceUpdate();
}
}
},
changeVal(val) {
this.$emit("change", val);
},
},
beforeDestroy() {
this.options = {};
},
};
</script>
<style lang="less" scoped>
.select-box {
width: 100%;
}
</style>
base-manager-ui/admin/src/pages/basicset/appmarket/components/AppTheme.vue
View file @ eefecb81
......@@ -49,8 +49,8 @@
<img
class="cover"
v-if="text.cover"
:src="api2 + text.cover"
@click="handlePreview(api2 + text.cover)"
:src="text.cover"
@click="handlePreview(text.cover)"
/>
<span v-else>--</span>
</template>
......@@ -132,8 +132,6 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
columns,
siteId: local.getLocal("siteId"),
tableData: [], // 表格数据
......
base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdate.vue
View file @ eefecb81
......@@ -83,7 +83,7 @@
v-if="text.video"
width="50"
:src="filterRes(text.video)"
@click="handlePreview('video', api2 + text.video)"
@click="handlePreview('video', text.video)"
/>
<span v-else>--</span>
</template>
......@@ -320,7 +320,7 @@ export default {
// 过滤影音
filterRes(data) {
let resource = data.split(",").map((v) => {
return this.api2 + v;
return v;
});
return resource[0];
......@@ -328,7 +328,7 @@ export default {
// 预览
handlePreview(type, data) {
let resource = data.split(",").map((v) => {
return this.api2 + v;
return v;
});
if (type == "img") {
this.$viewerApi({
......
base-manager-ui/admin/src/pages/basicset/appmarket/components/MoveApp.vue
View file @ eefecb81
......@@ -56,8 +56,8 @@
class="pointer"
height="20"
width="20"
:src="api2 + text.appIconPath"
@click="handlePreview(api2 + text.appIconPath)"
:src="text.appIconPath"
@click="handlePreview(text.appIconPath)"
/>
<span v-else>--</span>
</template>
......@@ -203,7 +203,6 @@ export default {
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
columns,
siteId: local.getLocal("siteId"),
tableData: [], // 表格数据
......
base-manager-ui/admin/src/pages/basicset/appmarket/components/TerminalApp.vue
View file @ eefecb81
......@@ -56,8 +56,8 @@
class="pointer"
height="20"
width="20"
:src="api2 + text.appIconPath"
@click="handlePreview(api2 + text.appIconPath)"
:src="text.appIconPath"
@click="handlePreview(text.appIconPath)"
/>
<span v-else>--</span>
</template>
......@@ -203,7 +203,6 @@ export default {
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
columns,
siteId: local.getLocal("siteId"),
tableData: [], // 表格数据
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddApp.vue
View file @ eefecb81
......@@ -182,7 +182,6 @@ export default {
return {
accept: "image/jpeg,image/png,image/svg+xml",
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
iconFileList: [],
labelCol: {
span: 3,
......@@ -307,17 +306,25 @@ export default {
return isJpgOrPng && isLt5M;
},
// 上传图标
handleChangeIcon({ fileList }) {
handleChangeIcon({ file, fileList }) {
if (
file.status &&
file.status != "removed" &&
file.response &&
file.response.code == -1
) {
this.$message.error(file.response.msg);
fileList = fileList.filter((file) => file.response.code != -1);
}
this.iconFileList = [...fileList].slice(-1);
this.iconFileList = this.iconFileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api2 + v.response.url;
v.url = v.response.url;
}
return v;
});
if (this.iconFileList[0]) {
this.form.appIconPath = this.iconFileList[0].url2;
this.form.appIconPath = this.iconFileList[0].url;
} else {
this.form.appIconPath = "";
}
......@@ -330,6 +337,17 @@ export default {
},
// 上传应用
handleChangeFile(info) {
if (
info.file.status &&
info.file.status != "removed" &&
info.file.response &&
info.file.response.code == -1
) {
this.$message.error(info.file.response.msg);
info.fileList = info.fileList.filter(
(file) => file.response.code != -1
);
}
let fileList = [...info.fileList];
fileList = fileList.slice(-1);
fileList = fileList.map((file) => {
......@@ -370,8 +388,7 @@ export default {
uid: "-2",
name: this.form.appIconPath,
status: "done",
url: this.api2 + this.form.appIconPath,
url2: this.form.appIconPath,
url: this.form.appIconPath,
},
];
});
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddData.vue
View file @ eefecb81
......@@ -65,7 +65,13 @@
</a-radio>
</a-radio-group>
<!-- 下拉选择框 -->
<a-select
<AppSelect
v-else-if="v.fieldType == 'select'"
:info="v"
v-model="v.fieldValue"
>
</AppSelect>
<!-- <a-select
v-else-if="v.fieldType == 'select'"
v-model="v.fieldValue"
placeholder="请选择"
......@@ -77,7 +83,7 @@
>
{{ item }}
</a-select-option>
</a-select>
</a-select> -->
<!-- 日期选择器 -->
<a-date-picker
v-else-if="v.fieldType == 'date'"
......@@ -135,6 +141,7 @@
:action="api + '/base/file/commonupload'"
:multiple="true"
:file-list="v.fileList"
:beforeUpload="handleBeforeUpload"
@change="
(info) => {
handleChange(info, v);
......@@ -235,12 +242,14 @@
<script>
import YQuillEditor from "@/components/YQuillEditor.vue";
import AppSelect from "../components/AppSelect.vue";
import { batchSaveDataset } from "@/services/market";
import { request } from "@/utils/request";
import local from "@/utils/local";
export default {
components: {
YQuillEditor,
AppSelect,
},
props: {
title: {
......@@ -387,33 +396,70 @@ export default {
},
// 编辑
onEdit(data) {
data.appInfoFieldList.forEach((v) => {
if (v.fieldType == "upload") {
if (v.fieldValue) {
let arr = v.fieldValue.split(",");
v.fileList = arr.map((v, i) => {
return {
uid: i,
name: v,
status: "done",
url: v,
};
});
} else {
v.fileList = [];
}
} else if (v.fieldType == "checkbox") {
if (v.fieldValue) {
v.checkbox = v.fieldValue.split(",");
} else {
v.checkbox = [];
setTimeout(() => {
data.appInfoFieldList.forEach((v) => {
if (v.fieldType == "upload") {
if (v.fieldValue) {
let arr = v.fieldValue.split(",");
v.fileList = arr.map((v, i) => {
return {
uid: i,
name: v,
status: "done",
url: v,
};
});
} else {
v.fileList = [];
}
} else if (v.fieldType == "checkbox") {
if (v.fieldValue) {
v.checkbox = v.fieldValue.split(",");
} else {
v.checkbox = [];
}
}
}
});
this.form = { ...data };
}, 10);
},
// 更改文件名称
renameFile(originalFile, newName) {
return new File([originalFile], newName, {
type: originalFile.type,
lastModified: originalFile.lastModified,
});
this.form = { ...data };
},
// 文件上传
handleBeforeUpload(file) {
let index = file.name.lastIndexOf(".");
let fileName = file.name.slice(0, index);
let suffix = file.name.slice(index);
let uid = file.uid;
if (fileName.length >= 40) {
let newName = fileName.slice(0, 40) + "..." + suffix;
let newFile = this.renameFile(file, newName);
newFile.uid = uid;
return new Promise((resolve) => {
resolve(newFile);
});
}
},
// 文件上传状态变化
handleChange(info, row) {
if (
info.file.status &&
info.file.status != "removed" &&
info.file.response &&
info.file.response.code == -1
) {
this.$message.error(info.file.response.msg);
info.fileList = info.fileList.filter(
(file) => file.response.code != -1
);
}
let fileList = [...info.fileList];
// fileList = fileList.slice(-1);
fileList = fileList.map((file) => {
......@@ -570,4 +616,4 @@ export default {
// .ant-calendar-picker {
// width: 40%;
// }
</style>
\ No newline at end of file
</style>
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddTheme.vue
View file @ eefecb81
......@@ -69,7 +69,6 @@ export default {
return {
accept: "image/jpeg,image/png",
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
fileList: [],
form: {
siteId: local.getLocal("siteId"), // 站点id
......@@ -117,8 +116,7 @@ export default {
uid: "-2",
name: this.form.cover,
status: "done",
url: this.api2 + this.form.cover,
url2: this.form.cover,
url: this.form.cover,
},
];
}
......@@ -158,17 +156,25 @@ export default {
return isJpgOrPng && isLt10M;
},
// 上传封面
handleChangeCover({ fileList }) {
handleChangeCover({ file, fileList }) {
if (
file.status &&
file.status != "removed" &&
file.response &&
file.response.code == -1
) {
this.$message.error(file.response.msg);
fileList = fileList.filter((file) => file.response.code != -1);
}
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api2 + v.response.url;
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.form.cover = this.fileList[0].url2;
this.form.cover = this.fileList[0].url;
} else {
this.form.cover = "";
}
......
base-manager-ui/admin/src/pages/basicset/deploy/deploy.vue
View file @ eefecb81
......@@ -56,16 +56,13 @@
<!-- 模块图标 -->
<template slot="modelIcon" slot-scope="text">
<div v-if="text.modelIcon">
<!-- <div class="svg-box" v-if="isSvg(text.modelIcon)">
<img width="30" height="30" :src="api2 + text.modelIcon" />
</div> -->
<div class="svg-box">
<img
class="pointer"
width="30"
height="30"
:src="api2 + text.modelIcon"
@click="handlePreview({ url: api2 + text.modelIcon })"
:src="text.modelIcon"
@click="handlePreview({ url: text.modelIcon })"
/>
</div>
</div>
......@@ -301,7 +298,6 @@ export default {
return {
pageSizeOptions,
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
accept: "image/jpeg,image/png,image/svg+xml", // 上传类型
columns,
loading: true,
......@@ -404,8 +400,7 @@ export default {
uid: -1,
status: "done",
name: this.formData.modelIcon,
url: this.api2 + this.formData.modelIcon,
url2: this.formData.modelIcon,
url: this.formData.modelIcon,
},
];
}
......@@ -471,13 +466,12 @@ export default {
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api2 + v.response.url;
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.formData.modelIcon = this.fileList[0].url2;
this.formData.modelIcon = this.fileList[0].url;
} else {
this.formData.modelIcon = "";
}
......
base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue
View file @ eefecb81
......@@ -347,7 +347,6 @@ export default {
// };
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
accept: "image/jpeg,image/png", // 上传类型
loading: false,
options: regionData, // 地区级联数据
......@@ -634,8 +633,7 @@ export default {
uid: -1,
status: "done",
name: this.formInfo.logoPath,
url: this.api2 + this.formInfo.logoPath,
url2: this.formInfo.logoPath,
url: this.formInfo.logoPath,
},
];
}
......@@ -680,17 +678,25 @@ export default {
return isJpgOrPng && isLt10M;
},
// 上传图片
handleChange({ fileList }) {
handleChange({ file, fileList }) {
if (
file.status &&
file.status != "removed" &&
file.response &&
file.response.code == -1
) {
this.$message.error(file.response.msg);
fileList = fileList.filter((file) => file.response.code != -1);
}
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api2 + v.response.url;
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.formInfo.logoPath = this.fileList[0].url2;
this.formInfo.logoPath = this.fileList[0].url;
} else {
this.formInfo.logoPath = "";
}
......
base-manager-ui/admin/src/pages/basicset/workman/components/EditPersonel.vue
View file @ eefecb81
......@@ -536,8 +536,7 @@ export default {
uid: -1,
status: "done",
name: this.form.photoPath,
url: this.api2 + this.form.photoPath,
url2: this.form.photoPath,
url: this.form.photoPath,
},
];
}
......@@ -559,17 +558,25 @@ export default {
this.$refs.formData.resetFields();
},
// 照片上传
handleChange({ fileList }) {
handleChange({ file, fileList }) {
if (
file.status &&
file.status != "removed" &&
file.response &&
file.response.code == -1
) {
this.$message.error(file.response.msg);
fileList = fileList.filter((file) => file.response.code != -1);
}
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api2 + v.response.url;
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.form.photoPath = this.fileList[0].url2;
this.form.photoPath = this.fileList[0].url;
} else {
this.form.photoPath = "";
}
......
base-manager-ui/admin/src/pages/basicset/workman/components/addpersonnel.vue
View file @ eefecb81
......@@ -414,7 +414,6 @@ export default {
};
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
accept: "image/jpeg,image/png", // 上传类型
fileList: [],
loading: false,
......@@ -577,8 +576,7 @@ export default {
uid: -1,
status: "done",
name: this.form.photoPath,
url: this.api2 + this.form.photoPath,
url2: this.form.photoPath,
url: this.form.photoPath,
},
];
}
......@@ -598,13 +596,12 @@ export default {
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api2 + v.response.url;
v.url = v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.form.photoPath = this.fileList[0].url2;
this.form.photoPath = this.fileList[0].url;
} else {
this.form.photoPath = "";
}
......
base-manager-ui/admin/src/pages/basicset/workman/personnel.vue
View file @ eefecb81
......@@ -228,8 +228,8 @@
<template slot="pic" slot-scope="text">
<img
v-if="text.photoPath"
:src="api2 + text.photoPath"
@click="handlePreview(api2 + text.photoPath)"
:src="text.photoPath"
@click="handlePreview(text.photoPath)"
class="pht"
/>
......@@ -408,7 +408,6 @@ export default {
visibleEditPwd: false,
editVisible: false,
api: process.env.VUE_APP_API_BASE_URL + "/",
api2: process.env.VUE_APP_API_IMG_URL,
siteId: local.getLocal("siteId"),
deptData: [], // 部门数据
windowData: [], // 窗口数据
......
base-manager-ui/admin/vue.config.js
View file @ eefecb81
......@@ -49,6 +49,11 @@ module.exports = {
},
// cookieDomainRewrite: 'localhost',
},
"/file": {
//此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true,
},
},
},
pluginOptions: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment