339 lines
7.5 KiB
Vue
339 lines
7.5 KiB
Vue
<!--选择艺术品-->
|
||
<template>
|
||
<div class="portal-panel">
|
||
<div class="body-container panel-shadow">
|
||
<div class="search" style="text-align: center; margin-top: 10px">
|
||
<el-input
|
||
@change="changeSearch"
|
||
@keyup.enter.native="changeSearch"
|
||
v-model="input"
|
||
clearable
|
||
class="search-input"
|
||
placeholder="请输入检索内容"
|
||
>
|
||
<template #prepend>
|
||
<el-select
|
||
v-model="selectdata"
|
||
slot="prepend"
|
||
placeholder="检索条件"
|
||
style="width: 140px"
|
||
>
|
||
<el-option label="艺术品编号" value="record_number"></el-option>
|
||
<el-option
|
||
label="登录号"
|
||
value="original_registration_number"
|
||
></el-option>
|
||
<el-option label="作者" value="author"></el-option>
|
||
<el-option label="国家" value="country_id"></el-option>
|
||
<el-option label="原名" value="old_name"></el-option>
|
||
</el-select>
|
||
</template>
|
||
<template #append>
|
||
<el-button
|
||
slot="append"
|
||
icon="Search"
|
||
@click="handleClick"
|
||
></el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
<div class="art-wrap" v-if="archivesDatas.length > 0">
|
||
<el-card
|
||
@click="handleChecked(art)"
|
||
:class="GLOBAL.isMobile ? 'isMobileArtCard' : 'artCard'"
|
||
v-for="(art, index) in archivesDatas"
|
||
>
|
||
<div class="art-image-wrap">
|
||
<el-image
|
||
class="artwork-image"
|
||
:src="art.coverImageUrl"
|
||
fit="cover"
|
||
>
|
||
<template #error>暂无图片</template>
|
||
</el-image>
|
||
</div>
|
||
<div class="art-info">
|
||
<span class="art-name">{{ art.oldNameFormat }}</span>
|
||
<p class="art-other">艺术家：{{ art.author || "未知" }}</p>
|
||
<p class="art-other">状态：{{ art.statusMsg }}</p>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<el-empty style="margin: 10%" v-else description="空空如也"></el-empty>
|
||
</div>
|
||
<div class="footer-container horizontal-shadow">
|
||
<Pagination
|
||
v-show="listQuery.total > 0"
|
||
:total="listQuery.total"
|
||
:page.sync="listQuery.currPage"
|
||
:limit.sync="listQuery.pageSize"
|
||
@pageChange="handlePageChange"
|
||
></Pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ArtSystem from "../artSystem.js";
|
||
import { ElMessage } from "element-plus";
|
||
import Pagination from "./Pagination/index.vue";
|
||
|
||
export default {
|
||
name: "chooseArtwork",
|
||
emits: ["checked"],
|
||
props: {
|
||
type: String,
|
||
},
|
||
data() {
|
||
return {
|
||
listQuery: {
|
||
filters: [],
|
||
total: 0,
|
||
currPage: 1,
|
||
pageSize: 10,
|
||
listLoading: false,
|
||
},
|
||
form: {},
|
||
input: "",
|
||
selectdata: "record_number",
|
||
archivesDatas: [],
|
||
};
|
||
},
|
||
|
||
components: { Pagination },
|
||
mounted() {
|
||
this.queryTableData();
|
||
},
|
||
methods: {
|
||
handlePageChange() {},
|
||
queryTableData() {
|
||
this.listQuery.listLoading = true;
|
||
//加载表格数据
|
||
let pageInfo = {
|
||
currPage: this.listQuery.currPage,
|
||
pageSize: this.listQuery.pageSize,
|
||
};
|
||
ArtSystem.queryArtworks({ pageInfo, filter: this.listQuery.filters })
|
||
.then((res) => {
|
||
this.archivesDatas = res.data;
|
||
this.listQuery.total = res.totalCount;
|
||
})
|
||
.catch((error) => {
|
||
console.error(error);
|
||
ElMessage({
|
||
message: error,
|
||
type: "error",
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.listQuery.listLoading = false;
|
||
});
|
||
},
|
||
removeSearch() {
|
||
this.queryTableData();
|
||
},
|
||
changeSearch() {
|
||
console.log(this.input, this.selectdata);
|
||
if (this.input) {
|
||
let operator;
|
||
if (this.selectdata !== "record_number") {
|
||
operator = "like";
|
||
} else {
|
||
operator = "=";
|
||
}
|
||
this.listQuery.filters = [
|
||
{
|
||
name: this.selectdata,
|
||
operator: operator,
|
||
value: this.input,
|
||
},
|
||
];
|
||
} else {
|
||
this.listQuery.filters = [];
|
||
}
|
||
|
||
this.queryTableData();
|
||
},
|
||
handleClick() {
|
||
this.changeSearch();
|
||
},
|
||
handleChecked(art) {
|
||
if (this.type === "inStorage") {
|
||
if (art.status === 2) {
|
||
ElMessage({
|
||
message: "该艺术品已经处于入库状态！",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
} else if (this.type === "outStorage") {
|
||
if (art.status !== 2) {
|
||
ElMessage({
|
||
message: "该艺术品目前不在仓库中，无法进行出库！",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
} else if (this.type === "repairFile") {
|
||
if (art.status === 2) {
|
||
ElMessage({
|
||
message: "该艺术品目前处于入库保存状态，请先出库！",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
if (art.status === 4) {
|
||
ElMessage({
|
||
message: "该艺术品目前已经处于修复中状态！",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
this.$emit("checked", art);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.portal-panel {
|
||
position: relative;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.footer-container {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
justify-content: center;
|
||
display: flex;
|
||
}
|
||
.art-wrap {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
margin: 2.1rem;
|
||
}
|
||
.search-input {
|
||
margin: 0 auto;
|
||
width: 80%;
|
||
}
|
||
.isMobileArtCard {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
width: 80%;
|
||
margin-bottom: 16px;
|
||
margin-left: 15px;
|
||
margin-right: 15px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
|
||
}
|
||
|
||
& .art-image-wrap {
|
||
width: 100%;
|
||
height: 200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
& .artwork-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
& .art-info {
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
& .art-name {
|
||
font-size: 16px;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
& .art-other {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.artCard {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
border-radius: 2px;
|
||
width: calc(20% - 30px);
|
||
margin-bottom: 16px;
|
||
margin-left: 15px;
|
||
margin-right: 15px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
|
||
}
|
||
|
||
& .art-image-wrap {
|
||
width: 100%;
|
||
height: 200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
& .artwork-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
& .art-info {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
& .art-name {
|
||
font-size: 16px;
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
& .art-other {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
@media screen and (max-width: 750px) {
|
||
.art-wrap {
|
||
display: flex;
|
||
overflow-y: scroll;
|
||
|
||
flex-flow: row wrap;
|
||
margin-top: 20px;
|
||
justify-content: center;
|
||
}
|
||
:deep(.el-select) {
|
||
width: 7rem !important;
|
||
}
|
||
.search-input {
|
||
width: 100%;
|
||
}
|
||
.art-wrap::-webkit-scrollbar {
|
||
display: none; /* 对于基于Webkit的浏览器，如Chrome和Safari */
|
||
}
|
||
|
||
.art-wrap {
|
||
-ms-overflow-style: none; /* 对于IE和Edge */
|
||
scrollbar-width: none; /* 对于Firefox */
|
||
}
|
||
}
|
||
</style>
|