308 lines
7.0 KiB
Vue
308 lines
7.0 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
|
|
<el-form-item prop="date">
|
|
<el-date-picker
|
|
v-model="queryParams.date"
|
|
type="date"
|
|
placeholder="标注日期"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="" prop="roleName">
|
|
<el-input
|
|
v-model="queryParams.roleName"
|
|
placeholder="标注项"
|
|
clearable
|
|
style="width: 240px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="roleKey">
|
|
<el-input
|
|
v-model="queryParams.roleKey"
|
|
placeholder="审核人"
|
|
clearable
|
|
style="width: 240px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="background:transparent;border-color: #B1C0CB;">重置</el-button>
|
|
<el-button icon="el-icon-download" size="mini" @click="handleExport" style="background:transparent;border-color: #B1C0CB;">下载</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="content-area" ref="servicesGrid">
|
|
<div
|
|
:key="item.id"
|
|
class="services-grid"
|
|
v-for="item in showProMaterialsDuctList"
|
|
>
|
|
<!-- 图片区域 -->
|
|
<div class="card-image">
|
|
<ImagePreview
|
|
style="margin-top: 10px;"
|
|
:height="192"
|
|
:borderRadius="10"
|
|
:width="itemWidth"
|
|
:src1="item.bjUrl"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 卡片内容 -->
|
|
<div class="card-content">
|
|
<div class="card-footer">
|
|
<div class="person-info">
|
|
<span class="name">{{ item.userName }}</span>
|
|
<span class="date">{{ item.date }}</span>
|
|
</div>
|
|
<div class="tags">
|
|
<el-tooltip :content="item.contentImage" placement="top" :effect="'light'" :enterable="false">
|
|
<span class="title-desc">{{ item.contentImage }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div style="border-top: 1px solid #CFD4D7;"></div>
|
|
<div class="action-buttons">
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
@click="handleDelete(item)"
|
|
plain
|
|
icon="el-icon-delete"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
:page-sizes="[8, 16, 32, 64]"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getAllImagelist} from "@/api/imageCaptioning/imageLibrary";
|
|
|
|
export default {
|
|
name: "imageCaptioningLibrary",
|
|
data() {
|
|
return {
|
|
// 总条数
|
|
total: 0,
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 8,
|
|
roleName: undefined,
|
|
roleKey: undefined,
|
|
status: undefined,
|
|
operaType: 1
|
|
},
|
|
// 表单参数
|
|
form: {},
|
|
proMaterialsListAll: [], // 所有材料列表
|
|
showProMaterialsDuctList: [], // 需要显示的材料列表
|
|
itemWidth: 0, // 材料卡片宽度
|
|
}
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
mounted() {
|
|
this.getItemWidth()
|
|
},
|
|
|
|
|
|
methods: {
|
|
// 获取产品卡片宽度
|
|
getItemWidth() {
|
|
this.itemWidth = (this.$refs.servicesGrid?.clientWidth - 320) / 4
|
|
},
|
|
/** 查询角色列表 */
|
|
getList() {
|
|
getAllImagelist(this.queryParams).then(response => {
|
|
this.proMaterialsListAll = response.rows;
|
|
this.total = response.total || 0;
|
|
this.showProMaterialsDuctList = this.proMaterialsListAll;
|
|
})
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1
|
|
this.getList()
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm")
|
|
this.handleQuery()
|
|
},
|
|
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.download('system/role/export', {
|
|
...this.queryParams
|
|
}, `role_${new Date().getTime()}.xlsx`)
|
|
},
|
|
|
|
// 删除处理方法
|
|
handleDelete(item) {
|
|
this.$confirm('确认要删除该记录吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
// 这里可以添加实际的删除逻辑
|
|
console.log('删除:', item)
|
|
// 从列表中移除
|
|
this.showProMaterialsDuctList = this.showProMaterialsDuctList.filter(i => i.id !== item.id)
|
|
this.$message.success('删除成功')
|
|
}).catch(() => {
|
|
this.$message.info('已取消删除')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.app-container {
|
|
overflow: hidden;
|
|
height: calc(100vh - 84px);
|
|
width: 100%;
|
|
background: url('../../../assets/images/imageCaptioning/login-bg-background.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
height: calc(100vh - 218px);
|
|
padding-bottom: 20px;
|
|
padding-right: 12px;
|
|
padding-top: 2px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 47px;
|
|
row-gap: 30px;
|
|
}
|
|
|
|
.services-grid {
|
|
width: 380px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #d6d1d1;
|
|
border-radius: 10px;
|
|
align-content: flex-start;
|
|
justify-items: center;
|
|
height: 47%;
|
|
}
|
|
|
|
.card-image {
|
|
height: 200px;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card-content {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
min-height: 24px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.person-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 10px 18px 0 18px;
|
|
}
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.date {
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 10px 18px 5px 18px;
|
|
height: 20px;
|
|
}
|
|
|
|
.tag-item {
|
|
background-color: #e6f7ff;
|
|
color: #0066cc;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 10px 18px 10px 18px;
|
|
}
|
|
|
|
>>>.el-input__inner{
|
|
background: transparent !important;
|
|
color: #333333 !important;
|
|
border-color: #B5C4CC;
|
|
}
|
|
|
|
.pagination-container{
|
|
background: transparent !important;
|
|
}
|
|
|
|
.title-desc {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
|
|
</style>
|