Skip to content

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

完善抠图详情内的逻辑

上级 fcaeffdb
隐藏空白字符变更
内嵌 并排
正在显示 包含 513 行增加 和 261 行删除
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/components/PreviewDialog.vue
浏览文件 @ 8e501b21
......@@ -5,11 +5,8 @@
:before-close="handleClose"
lock-scroll
width="65vw"
title="抠图详情"
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">抠图详情</div>
</div>
<div class="dialog-content">
<el-descriptions title="详细信息" v-if="infoHasValue">
<el-descriptions-item
......@@ -21,88 +18,127 @@
<el-tag
size="mini"
:type="
$constantsTool.getTagTypeByValue('mattingStatus', info.status)
$constantsTool.getTagTypeByValue('mattingStatus', detail.status)
"
>
{{ $constantsTool.getLabelByValue("mattingStatus", info.status) }}
{{
$constantsTool.getLabelByValue("mattingStatus", detail.status)
}}
</el-tag>
</span>
<span v-else>{{ info[item.prop] }}</span>
<span v-else>{{ detail[item.prop] }}</span>
</el-descriptions-item>
</el-descriptions>
<div class="imgs">
<div class="single" v-if="info.type == '单个'">
<div class="single-img">
<el-image
:src="info.src"
fit="contain"
style="height: 300px"
></el-image>
</div>
<div class="button">
<div class="imgs-title">
<h3>图片列表</h3>
<div class="right" v-if="isImgMultiple">
<el-button
@click="handleDownload('single')"
plain
type="primary"
icon="el-icon-download"
>下载</el-button
type="text"
style="margin-right: 10px"
@click="toggleShowCheckbox"
>{{ getText }}</el-button
>
<el-checkbox
label="全选"
v-model="isAllChecked"
v-if="isShowCheckbox"
></el-checkbox>
</div>
</div>
<div class="multi" v-else>
<div class="title">
<h3>图片列表</h3>
<div class="right">
<el-button
type="text"
style="margin-right: 10px"
@click="toggleShowCheckbox"
>{{ getText }}</el-button
>
<div class="container" :gutter="10">
<div
v-for="(item, index) in mattingImagesPage.records"
:key="index"
class="img-item"
>
<div
:class="['modal', item.checked ? 'active' : '']"
v-if="isShowCheckbox"
@click.prevent="toggleItemCheckbox(item)"
>
<el-checkbox
label="全选"
v-model="isAllChecked"
class="checkbox"
v-if="isShowCheckbox"
v-model="item.checked"
></el-checkbox>
</div>
<div class="more" @click.prevent="toggleItemCheckbox(item)">
<el-button
style="margin-right: 8px"
type="text"
icon="el-icon-download"
@click="handleDownload(item)"
></el-button>
<el-dropdown>
<i class="el-icon-more" style="color: #409eff"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-image
style="width: 200px; height: 150px; padding: 10px"
:src="item.pressUrl"
fit="contain"
:preview-src-list="srcList"
></el-image>
<div class="name">{{ item.name }}</div>
</div>
<el-row class="container" :gutter="10">
<el-col
:span="4"
v-for="(item, index) in info.imagesVo"
:key="index"
class="multi-item"
</div>
<!-- <el-row class="container" :gutter="10">
<el-col
:span="getColSpan"
v-for="(item, index) in mattingImagesPage.records"
:key="index"
class="img-item"
>
<div
:class="['modal', item.checked ? 'active' : '']"
v-if="isShowCheckbox"
@click.prevent="toggleItemCheckbox(item)"
>
<div
:class="['modal', item.checked ? 'active' : '']"
<el-checkbox
class="checkbox"
v-if="isShowCheckbox"
@click.prevent="toggleItemCheckbox(item)"
>
<el-checkbox
class="checkbox"
v-if="isShowCheckbox"
v-model="item.checked"
></el-checkbox>
</div>
<el-image
:src="item.src"
fit="contain"
style="height: 100px; width: 100%"
:preview-src-list="srcList"
></el-image>
<div class="name">{{ item.name }}</div>
</el-col>
</el-row>
<div class="button">
<el-button
@click="handleDownload('multi')"
:disabled="disabledButton"
plain
type="primary"
icon="el-icon-download"
>{{ downloadText }}</el-button
>
</div>
v-model="item.checked"
></el-checkbox>
</div>
<el-image
style="width: 200px; height: 150px; padding: 10px"
:src="item.pressUrl"
fit="contain"
:preview-src-list="srcList"
></el-image>
<div class="name">{{ item.name }}</div>
</el-col>
</el-row>-->
<el-pagination
v-if="mattingImagesPage.records.length > 0"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(mattingImagesPage.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(mattingImagesPage.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(mattingImagesPage.total)"
class="pagination"
/>
<div class="button">
<PermissionButton
button
perms="bizMattingImages:download"
@click="handleDownload"
:disabled="disabledButton"
plain
type="primary"
icon="el-icon-download"
style="width: 100%"
>下载</PermissionButton
>
</div>
</div>
</div>
......@@ -111,6 +147,8 @@
<script>
import { tableTitle } from "../configs/list";
import { downFileByFileIds, getMattingImagesPage } from "@/api/matting";
import { Debounce } from "@/utils/index";
export default {
name: "PreviewDialog",
components: {},
......@@ -127,56 +165,85 @@ export default {
isShowCheckbox: false, //是否展示全选按钮
info: {},
isAllChecked: false, //是否全选
mattingImagesPage: {
records: [],
size: 10,
current: 1,
total: 0,
},
};
},
computed: {
getColSpan() {
if (!this.mattingImagesPage.records.length) {
return;
}
if (this.mattingImagesPage.records.length == 1) {
return 24;
} else {
return 4;
}
},
infoHasValue() {
return Object.keys(this.info).length > 0;
return Object.keys(this.detail).length > 0;
},
getText() {
return this.isShowCheckbox ? "取消批量选择" : "批量选择";
},
srcList() {
if (!this.info.imagesVo) {
if (!this.mattingImagesPage.records) {
return [];
}
return this.info.imagesVo.map((item) => item.src);
return this.mattingImagesPage.records.map((item) => item.url);
},
downloadText() {
return this.isShowCheckbox ? "下载" : "全部下载";
},
disabledButton() {
if (!this.info.imagesVo) {
if (!this.mattingImagesPage.records) {
return false;
}
const isEveryNotChecked = this.info.imagesVo.every(
const isEveryNotChecked = this.mattingImagesPage.records.every(
(item) => !item.checked
);
return isEveryNotChecked && this.isShowCheckbox;
},
isImgMultiple() {
if (!this.mattingImagesPage.total) {
return;
}
return this.mattingImagesPage.total > 1;
},
},
watch: {
detail(value) {
if (value) {
this.info = this.getNewData(value);
if (!value) {
return;
}
this.mattingImagesPage = value.mattingImagesPage;
const { records } = this.mattingImagesPage;
this.mattingImagesPage.records = records.map((item) => {
return {
...item,
checked: false,
};
});
},
isShowCheckbox(value) {
if (!value) {
this.info.imagesVo.forEach((item) => {
this.mattingImagesPage.records.forEach((item) => {
item.checked = false;
});
this.isAllChecked = false;
}
},
isAllChecked(value) {
if (!this.info.imagesVo) {
if (!this.mattingImagesPage.records) {
return false;
}
if (value) {
this.info.imagesVo.forEach((item) => {
item.checked = value;
});
}
this.mattingImagesPage.records.forEach((item) => {
item.checked = value;
});
},
},
methods: {
......@@ -190,39 +257,72 @@ export default {
toggleItemCheckbox(item) {
const { checked } = item;
item.checked = !checked;
this.isAllChecked = this.info.imagesVo.every((item) => item.checked);
},
getNewData(value) {
if (value.type == "单个") {
return value;
}
if (!(value && value.imagesVo)) {
return {};
}
const imagesVo = value.imagesVo.map((item) => {
return {
...item,
checked: false,
};
});
return {
...value,
imagesVo,
};
this.isAllChecked = this.mattingImagesPage.records.every(
(item) => item.checked
);
},
handleDownload(type) {
if (type == "multi") {
const ids = this.info.imagesVo
handleDownloadRow: Debounce(function (row) {
const { fileId } = row;
const ids = [fileId];
this.download(ids);
}, 600),
handleDownload: Debounce(function () {
let ids = [];
if (this.isShowCheckbox) {
ids = this.mattingImagesPage.records
.filter((item) => {
return item.checked;
})
.map((item) => {
return item.id;
return item.fileId;
});
console.log(ids);
} else {
console.log(this.info.fileId);
ids = this.mattingImagesPage.records.map((item) => {
return item.fileId;
});
}
this.download(ids);
}, 600),
// 公共的删除方法
async download(ids) {
const params = ids;
const url = process.env.VUE_APP_BASE_API + "/bizMattingImages/downLoad";
const method = "post";
const fileName = this.detail.name + "_智能抠图处理后文件";
const suffix = "zip";
const opitons = {
url,
method,
fileName,
suffix,
data: params,
};
await this.$file.downloadBlob(opitons);
},
async loadImgs() {
const { current, size } = this.mattingImagesPage;
const { mattingId } = this.detail;
const params = {
page: current,
limit: size,
mattingId,
};
const res = await getMattingImagesPage(params);
if (res.code == 0) {
this.mattingImagesPage = res.data;
}
},
handleSizeChange(size) {
this.mattingImagesPage.size = size;
this.loadImgs();
},
handleCurrentChange(current) {
this.mattingImagesPage.current = current;
this.loadImgs();
},
},
};
......@@ -234,71 +334,78 @@ export default {
overflow: auto;
}
.single {
// display: flex;
// justify-content: center;
.single-img {
display: flex;
justify-content: center;
}
.button {
width: 100%;
display: flex;
justify-content: center;
.el-button {
width: 80%;
}
}
.imgs-title {
display: flex;
justify-content: space-between;
}
.multi {
.title {
display: flex;
justify-content: space-between;
align-items: center;
.container {
padding: 20px 0;
max-height: 520px;
min-height: 310px;
overflow: auto;
display: flex;
flex-wrap: wrap;
}
.img-item {
position: relative;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #eee;
border-radius: 8px;
width: 18%;
margin-right: 2%;
margin-bottom: 16px;
.more {
z-index: 8;
position: absolute;
right: 20px;
top: 0;
color: #409eff;
cursor: pointer;
}
.multi-item {
margin-bottom: 16px;
position: relative;
padding: 10px;
.modal {
.modal {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba($color: #fff, $alpha: 0.5);
width: 100%;
height: 100%;
z-index: 9;
border-radius: 8px;
padding: 16px;
cursor: pointer;
.el-checkbox {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba($color: #fff, $alpha: 0.5);
width: 96%;
height: 96%;
z-index: 9;
border-radius: 8px;
padding: 16px;
.el-checkbox {
position: absolute;
left: 10px;
top: 10px;
}
}
.active {
border: 1px solid #409eff;
background-color: rgba($color: #fff, $alpha: 0);
}
.name {
margin-top: 8px;
display: flex;
justify-content: center;
left: 10px;
top: 10px;
}
}
.container {
padding: 20px 0;
height: 320px;
overflow: auto;
.active {
border: 1px solid #409eff;
background-color: rgba($color: #fff, $alpha: 0);
}
.button {
width: 100%;
.name {
margin-top: 8px;
display: flex;
justify-content: center;
.el-button {
width: 80%;
}
}
}
.pagination {
padding: 20px 0;
width: 100%;
display: flex;
justify-content: flex-end;
}
.button {
width: 100%;
display: flex;
justify-content: center;
}
</style>
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论