Skip to content

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

完善在线抠图逻辑

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