Skip to content

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

完善在线抠图逻辑

上级 d0654800
隐藏空白字符变更
内嵌 并排
正在显示 包含 198 行增加 和 68 行删除
src/views/matting/components/PreviewDialog.vue
浏览文件 @ 0d8b179b
......@@ -11,7 +11,7 @@
<div class="label">抠图详情</div>
</div>
<div class="dialog-content">
<el-descriptions title="详细信息">
<el-descriptions title="详细信息" v-if="infoHasValue">
<el-descriptions-item
:label="item.label"
v-for="(item, index) in tableTitle"
......@@ -32,11 +32,22 @@
</el-descriptions>
<div class="imgs">
<div class="single" v-if="info.type == '单个'">
<el-image
:src="info.src"
fit="contain"
style="height: 300px"
></el-image>
<div class="single-img">
<el-image
:src="info.src"
fit="contain"
style="height: 300px"
></el-image>
</div>
<div class="button">
<el-button
@click="handleDownload('single')"
plain
type="primary"
icon="el-icon-download"
>下载</el-button
>
</div>
</div>
<div class="multi" v-else>
<div class="title">
......@@ -46,12 +57,16 @@
type="text"
style="margin-right: 10px"
@click="toggleShowCheckbox"
>批量选择</el-button
>{{ getText }}</el-button
>
<el-checkbox label="全选" v-if="isShowCheckbox"></el-checkbox>
<el-checkbox
label="全选"
v-model="isAllChecked"
v-if="isShowCheckbox"
></el-checkbox>
</div>
</div>
<el-row class="container">
<el-row class="container" :gutter="10">
<el-col
:span="4"
v-for="(item, index) in info.imagesVo"
......@@ -59,30 +74,37 @@
class="multi-item"
>
<div
class="modal"
:class="['modal', item.checked ? 'active' : '']"
v-if="isShowCheckbox"
@click="toggleItemCheckbox(item)"
@click.prevent="toggleItemCheckbox(item)"
>
<el-checkbox
class="checkbox"
v-if="isShowCheckbox"
v-model="item.checked"
></el-checkbox>
{{ item.checked }}
</div>
<el-image
:src="item.src"
fit="contain"
style="height: 100px"
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>
</div>
</div>
<div class="button">
<el-button plain type="primary" icon="el-icon-download">下载</el-button>
</div>
</div>
</el-dialog>
</template>
......@@ -98,33 +120,65 @@ export default {
default: () => ({}),
},
},
computed: {
info() {
if (!(this.detail && this.detail.imagesVo)) {
return;
}
const imagesVo = this.detail.imagesVo.map((item) => {
const newObj = {
...item,
checked: false,
};
return newObj;
});
const newInfo = {
...this.detail,
imagesVo,
};
console.log(123, newInfo);
return newInfo;
},
},
data() {
return {
visible: false,
tableTitle,
isShowCheckbox: false, //是否展示全选按钮
info: {},
isAllChecked: false, //是否全选
};
},
computed: {
infoHasValue() {
return Object.keys(this.info).length > 0;
},
getText() {
return this.isShowCheckbox ? "取消批量选择" : "批量选择";
},
srcList() {
if (!this.info.imagesVo) {
return [];
}
return this.info.imagesVo.map((item) => item.src);
},
downloadText() {
return this.isShowCheckbox ? "下载" : "全部下载";
},
disabledButton() {
if (!this.info.imagesVo) {
return false;
}
const isEveryNotChecked = this.info.imagesVo.every(
(item) => !item.checked
);
return isEveryNotChecked && this.isShowCheckbox;
},
},
watch: {
detail(value) {
if (value) {
this.info = this.getNewData(value);
}
},
isShowCheckbox(value) {
if (!value) {
this.info.imagesVo.forEach((item) => {
item.checked = false;
});
}
},
isAllChecked(value) {
if (!this.info.imagesVo) {
return false;
}
if (value) {
this.info.imagesVo.forEach((item) => {
item.checked = value;
});
}
},
},
methods: {
handleClose(done) {
this.visible = false;
......@@ -136,8 +190,39 @@ export default {
toggleItemCheckbox(item) {
const { checked } = item;
item.checked = !checked;
console.log(item);
// this.$set(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,
};
},
handleDownload(type) {
if (type == "multi") {
const ids = this.info.imagesVo
.filter((item) => {
return item.checked;
})
.map((item) => {
return item.id;
});
console.log(ids);
} else {
console.log(this.info.fileId);
}
},
},
};
......@@ -148,17 +233,22 @@ export default {
max-height: 64vh;
overflow: auto;
}
.button {
width: 100%;
display: flex;
justify-content: center;
.el-button {
width: 80%;
}
}
.single {
display: flex;
justify-content: center;
// display: flex;
// justify-content: center;
.single-img {
display: flex;
justify-content: center;
}
.button {
width: 100%;
display: flex;
justify-content: center;
.el-button {
width: 80%;
}
}
}
.multi {
.title {
......@@ -169,17 +259,30 @@ export default {
.multi-item {
margin-bottom: 16px;
position: relative;
padding: 10px;
.modal {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba($color: #fff, $alpha: 0.5);
width: 100%;
height: 100%;
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;
}
......@@ -189,5 +292,13 @@ export default {
height: 320px;
overflow: auto;
}
.button {
width: 100%;
display: flex;
justify-content: center;
.el-button {
width: 80%;
}
}
}
</style>
src/views/matting/mock.js
浏览文件 @ 0d8b179b
......@@ -10,6 +10,7 @@ export const records = [
createTime: "2023-10-23 14:13:00",
createName: "admin",
src,
fileId: 88,
type: '单个'
},
{
......@@ -23,39 +24,48 @@ export const records = [
imagesVo: [
{
name: '测试图片1',
src
src,
id: 1,
},
{
name: '测试图片2',
src
src,
id: 2,
},
{
name: '测试图片3',
src
src,
id: 3,
},
{
name: '测试图片1',
src
src,
id: 4,
},
{
name: '测试图片2',
src
src,
id: 5,
},
{
name: '测试图片3',
src
src,
id: 6,
},
{
name: '测试图片1',
src
src,
id: 7,
},
{
name: '测试图片2',
src
src,
id: 8,
},
{
name: '测试图片3',
src
src,
id: 9,
},
]
},
......@@ -70,39 +80,48 @@ export const records = [
imagesVo: [
{
name: '测试图片1',
src
src,
id: 11,
},
{
name: '测试图片2',
src
src,
id: 12,
},
{
name: '测试图片3',
src
src,
id: 13,
},
{
name: '测试图片1',
src
src,
id: 14,
},
{
name: '测试图片2',
src
src,
id: 15,
},
{
name: '测试图片3',
src
src,
id: 16,
},
{
name: '测试图片1',
src
src,
id: 17,
},
{
name: '测试图片2',
src
src,
id: 18,
},
{
name: '测试图片3',
src
src,
id: 19,
},
]
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论