Skip to content

E
exhibition_backstage
提交 8e501b21 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完善抠图详情内的逻辑

上级 fcaeffdb
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 242 行增加 和 97 行删除
src/api/matting.js
浏览文件 @ 8e501b21
......@@ -49,7 +49,7 @@ export function deleteMattingImage(data) {
export function getMattingImagesPage(data) {
return request({
url: '/bizMattingImages/listByPage',
method: 'delete',
method: 'post',
data
})
}
......@@ -69,7 +69,8 @@ export function downFileByFileIds(data) {
return request({
url: '/bizMattingImages/downLoad',
method: 'post',
data
data,
responseType: 'blob',
})
}
......
src/components/PermissionButton/index.vue
浏览文件 @ 8e501b21
<template>
<span>
<el-button v-bind="$attrs" v-on="$listeners" v-if="hasPer && button">
<el-button
style="width: 100%"
v-bind="$attrs"
v-on="$listeners"
v-if="hasPer && button"
>
<slot />
</el-button>
<el-link v-bind="$attrs" v-on="$listeners" v-else-if="hasPer">
......
src/components/Table/TablePage.vue
浏览文件 @ 8e501b21
......@@ -18,9 +18,9 @@
<slot name="expand" :scope="scope.$index"></slot>
</template>
</el-table-column>
<el-table-column v-if="hasMultiSelection" type="selection" width="55" />
<el-table-column type="index" width="50" label="序号" align="center">
</el-table-column>
<el-table-column v-if="hasMultiSelection" type="selection" width="55" />
<el-table-column
v-for="(item, index) in tableTitle"
:key="index"
......
src/components/UploadDialog/index.vue
浏览文件 @ 8e501b21
......@@ -34,9 +34,8 @@
ref="upload"
class="upload-area"
name="zipFile"
action="#"
:accept="fileType"
:action="uploadUrl"
:headers="headers"
:on-success="handleSuccess"
:on-change="handleChange"
:auto-upload="false"
......@@ -134,12 +133,6 @@ export default {
return (size / 1024 / 1024).toFixed(2) + "M"; //1M=1024Kb=1024*1024byte
};
},
uploadUrl() {
if (!this.options) {
return;
}
return this.options.uploadUrl;
},
fileType() {
if (!this.options) {
return;
......@@ -251,8 +244,19 @@ export default {
formData.append(titleKey, uploadTitle);
return formData;
},
// 判断文件是否符合规则校验
getFileValid(file) {
const { name } = file;
const suffix = name.split(".")[1].toLowerCase();
return suffix && this.fileType.includes(suffix);
},
// 上传函数实现逻辑
uploadSelf(file, index) {
const isValid = this.getFileValid(file);
if (!isValid) {
this.$message.error(`文件格式错误：请上传${this.fileType}格式的文件！`);
return;
}
const loading = this.$loading({
lock: true,
text: "正在上传中...文件较大，请耐心等待，请勿刷新页面",
......@@ -261,6 +265,7 @@ export default {
});
const formData = this.getFormData(file);
importZip(
this.options.uploadUrl,
formData,
(progressEvent) => this.uploadUnderWayCallback(progressEvent, index),
(cancelCallback) => this.cancelCallBack(cancelCallback, index)
......
src/utils/file.js
浏览文件 @ 8e501b21
......@@ -2,6 +2,7 @@ import axios from 'axios'
import {
getToken
} from '@/utils/auth'
import { Message } from 'element-ui'
var uploadUrl = process.env.VUE_APP_BASE_API + "/sysFiles/upload"
var uploadV1Url = process.env.VUE_APP_BASE_API + "/sysFiles/v1/upload"
......@@ -49,13 +50,14 @@ export function uploadV1(data) {
/**
* 批量上传文件
* @param data formData类型 * 参数1 type:导入数据类别(biz_cultural_relic、biz_exhibition二选一) 参数2 zipFile:zip压缩文件
* @param callback 用于获取上传进度
* @param cancelCallBack 用于取消上传
* @param {String} importZipUrl 上传地址
* @param {FormData} data * 参数1 type:导入数据类别(biz_cultural_relic、biz_exhibition二选一) 参数2 zipFile:zip压缩文件
* @param {Function} callback 用于获取上传进度
* @param {Function} cancelCallBack 用于取消上传
* @returns {Promise}
*/
let CancelToken = axios.CancelToken;
export function importZip(data, callback, cancelCallBack) {
export function importZip(importZipUrl, data, callback, cancelCallBack) {
return new Promise((resolve, reject) => {
axios.post(importZipUrl, data, {
headers: {
......@@ -111,41 +113,61 @@ export function previewFile(href, previewName) {
}
/**
* 处理返回的二进制流并触发为下载文件
* @param {*} response 下载返回的二进制流
* @param {*} fileName 希望展示的文件名称
* @param {*} suffix 希望下载展示的文件后缀
*/
export function triggrtUrl(response, fileName, suffix) {
const blob = new Blob([response.data])
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
if (suffix) {
link.download = fileName + '.' + suffix
} else {
link.download = fileName
}
link.click()
URL.revokeObjectURL(link.href)
}
/**
* 下载文件
* @param url 下载地址
* @param fileName 下载文件用户看到的名称
* @param typeSuffix 文件后缀
*/
export function downloadBlob(url, fileName, typeSuffix) {
export function downloadBlob({ url, method = 'get', fileName, suffix, data }) {
return new Promise((resolve, reject) => {
axios({
const startMsg = Message.warning('正在下载...')
const options = {
url,
method: 'get',
method,
responseType: 'blob',
headers: {
'authorization': getToken()
}
}).
}
if (data) {
options.data = data
}
axios(options).
then(response => {
const blob = new Blob([response.data])
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
if (typeSuffix) {
link.download = fileName + '.' + typeSuffix
} else {
link.download = fileName
}
link.click()
URL.revokeObjectURL(link.href)
resolve()
startMsg.close()
Message.success('下载成功！')
triggrtUrl(response, fileName, suffix)
resolve(response)
}).catch(err => {
startMsg.close()
console.error(err);
Message.error('下载失败：' + err)
reject(err)
})
})
};
// 因为之前的全部都是单独引入，为了不改变以前的代码因此单独用file导出，后期方便$file.uploadFile进行使用
export const file = {
uploadFile,
......@@ -153,5 +175,6 @@ export const file = {
importZip,
downloadFile,
previewFile,
downloadBlob
downloadBlob,
triggrtUrl
}
\ No newline at end of file
src/utils/index.js
浏览文件 @ 8e501b21
......@@ -175,19 +175,6 @@ export const Throttle = (fn, t) => {
}
}
// // 获取完整的url，根据环境进行配置
// export function getFullUrl(url) {
// let fullUrl = ''
// if (url && url.indexOf('http') != -1 && url.indexOf('files') != -1) {
// let urlArr = url.split('files')
// fullUrl = '/files' + urlArr[1]
// } else if (url && url.indexOf('http') == -1 && url.indexOf('files') == -1) {
// fullUrl = '/files' + url
// } else {
// fullUrl = url
// }
// return fullUrl
// }
// 获取完整的url，根据环境进行配置
export function getFullUrl(url) {
......
src/views/literature/index.vue
浏览文件 @ 8e501b21
......@@ -224,7 +224,16 @@ export default {
let msg = this.$message.info("正在准备下载...");
let url = "/files" + files[0].url.split("files")[1];
const { name } = row;
downloadBlob(url, name, "pdf")
const method = "get";
const fileName = name;
const suffix = "pdf";
const options = {
url,
method,
fileName,
suffix,
};
downloadBlob(options)
.then((res) => {
msg.close();
this.$message.success("下载成功！");
......
src/views/matting/configs/list.js
浏览文件 @ 8e501b21
......@@ -29,18 +29,18 @@ export const tableTitle = [{
label: "创建时间",
columnAlign: 'center',
},
{
prop: "createName",
label: "创建人",
columnAlign: 'center',
showOverFlowToolTip: true,
},
// {
// prop: "createName",
// label: "创建人",
// columnAlign: 'center',
// showOverFlowToolTip: true,
// },
{
prop: "remark",
label: "备注",
columnAlign: 'center',
},
// {
// prop: "remark",
// label: "备注",
// columnAlign: 'center',
// },
]
......@@ -52,25 +52,21 @@ export const operates = {
width: "280px",
}
export const operations = [
{
type: 'view',
title: '查看详情',
perms: 'bizCulturalRelic:list',//暂时使用展览的列表
},
{
type: 'download',
title: '下载',
perms: 'bizCulturalRelic:list',//暂时使用展览的列表
},
{
type: 'delete',
title: '删除',
perms: 'bizCulturalRelic:delete',//暂时使用展览的列表
},
]
export const viewButton = {
type: 'view',
title: '查看详情',
perms: 'bizMattingImages:detail',
}
export const downloadButton = {
type: 'download',
title: '下载',
perms: 'bizMattingImages:download',
}
export const deleteButton = {
type: 'delete',
title: '删除',
perms: 'bizMattingImages:delete',
}
// 搜索配置
......
src/views/matting/index.vue
浏览文件 @ 8e501b21
......@@ -11,7 +11,7 @@
<el-dropdown @command="handleCommand">
<PermissionButton
button
perms="bizCulturalRelic:add"
perms="bizMattingImages:add"
type="primary"
size="mini"
icon="el-icon-upload2"
......@@ -24,12 +24,41 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="tools-item">
<PermissionButton
button
perms="bizMattingImages:download"
type="primary"
size="mini"
icon="el-icon-download"
style="margin-right: 10px"
:disabled="multiDisabled"
plain
@click="handleMultiDownload"
>
批量下载
</PermissionButton>
<PermissionButton
button
perms="bizMattingImages:delete"
type="danger"
plain
size="mini"
icon="el-icon-delete"
:disabled="multiDisabled"
@click="handleMultiDelete"
>
批量删除
</PermissionButton>
</div>
</div>
<div class="list">
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="operates"
hasMultiSelection
@handleSelectionChange="handleSelectionChange"
>
<template v-slot:status="{ scope }">
<el-tag
......@@ -42,7 +71,7 @@
</template>
<template v-slot:operates="{ scope }">
<TableOperation
:operations="operations"
:operations="getOperations(scope.status)"
:rawData="scope"
@handleOperation="handleOperation"
></TableOperation>
......@@ -65,7 +94,7 @@
@update="loadData"
:options="uploadOptions"
/>
<PreviewDialog ref="PreviewDialog" :detail="currentPreviewItem" />
<PreviewDialog ref="PreviewDialog" :detail="previewInfo" />
</div>
<el-image-viewer
......@@ -77,11 +106,24 @@
</template>
<script>
import { operates, operations, tableTitle, searchConfig } from "./configs/list";
import {
operates,
viewButton,
downloadButton,
deleteButton,
tableTitle,
searchConfig,
} from "./configs/list";
import { records } from "./mock";
import UploadDialog from "@/components/UploadDialog";
import PreviewDialog from "./components/PreviewDialog";
import { getMattingList } from "@/api/matting";
import { Debounce } from "@/utils/index";
import {
getMattingList,
getMattingDetail,
downFileByMattingIds,
deleteMattingRecord,
} from "@/api/matting";
export default {
components: {
UploadDialog,
......@@ -101,10 +143,9 @@ export default {
importRecordVisible: false, //上传记录
imgList: [],
operates,
operations,
tableTitle,
currentUploadType: ".zip", //当前上传的文件类型
currentPreviewItem: {}, //当前点击的表格项目
previewInfo: {}, //当前点击预览的表格项目
TYPE_IMG: "0", //单个图片文件
TYPE_ZIP: "1", //zip文件
uploadOptions: {
......@@ -115,10 +156,33 @@ export default {
uploadTitleKey: "title",
},
searchParams: {},
multiSelection: [],
};
},
async created() {
// this.loadData();
computed: {
multiDisabled() {
return this.multiSelection.length == 0;
},
getOperations(status) {
return (status) => {
if (status == 1) {
return [viewButton, downloadButton, deleteButton];
} else {
const newViewButton = {
...viewButton,
disabled: true,
};
const newDownloadButton = {
...downloadButton,
disabled: true,
};
return [newViewButton, newDownloadButton, deleteButton];
}
};
},
},
created() {
this.loadData();
},
methods: {
async search(form) {
......@@ -126,7 +190,7 @@ export default {
this.resetPage();
this.loadData(form);
},
// 清除分页到初始状态
resetPage() {
this.list.current = 1;
},
......@@ -134,7 +198,7 @@ export default {
this.searchParams = {};
this.loadData();
},
// 加载表格数据
async loadData(form) {
const { current, size } = this.list;
var params = {
......@@ -152,28 +216,82 @@ export default {
},
handleCommand(type) {
this.uploadOptions.compressFlag = type;
this.openDialog("UploadDialog");
},
openDialog(refName) {
this.$refs[refName].visible = true;
this.$appCommon.openDialog(this, "UploadDialog");
},
async handleOperation(value, row) {
switch (value.type) {
case "view":
this.currentPreviewItem = row;
this.$appCommon.openDialog(this, "PreviewDialog");
this.handleView(row);
break;
case "download":
console.log("download");
const { title, mattingId } = row;
const ids = [mattingId];
this.downloadByRecordId(ids, title);
break;
case "delete":
console.log("delete");
this.handleDeleteRow(row);
break;
}
},
async handleView(row) {
const { mattingId } = row;
const params = {
mattingId,
};
const res = await getMattingDetail(params);
if (res.code == 0) {
this.previewInfo = res.data;
this.$appCommon.openDialog(this, "PreviewDialog");
}
},
handleDeleteRow(row) {
const ids = [row.mattingId];
this.deleteByRecordsId(ids);
},
handleMultiDelete() {
const ids = this.multiSelection.map((item) => {
return item.mattingId;
});
this.deleteByRecordsId(ids);
},
handleMultiDownload() {
const ids = this.multiSelection.map((item) => {
return item.mattingId;
});
this.downloadByRecordId(ids);
},
deleteByRecordsId: Debounce(async function (ids) {
const res = await deleteMattingRecord(ids);
if (res.code == 0) {
this.$message.success("删除成功！");
this.loadData();
}
}, 600),
downloadByRecordId: Debounce(async function (ids, name = "") {
const params = ids;
const url =
process.env.VUE_APP_BASE_API +
"/bizMattingRecords/downFileByMattingIds";
const method = "post";
const fileName = name + "_智能抠图处理后文件";
const suffix = "zip";
const opitons = {
url,
method,
fileName,
suffix,
data: params,
};
await this.$file.downloadBlob(opitons);
}, 600),
// 关闭预览图片
closeImgViewer() {
this.imgViewerVisible = false;
......@@ -186,7 +304,7 @@ export default {
// 多选
handleSelectionChange(val) {
this.multipleSelection = val;
this.multiSelection = val;
},
// 改变页容量
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论