378 lines
10 KiB
Vue
378 lines
10 KiB
Vue
<template>
|
||
<div>
|
||
<el-card
|
||
style="width: 200px; position: relative"
|
||
v-if="materialId">
|
||
<div
|
||
v-if="materialId"
|
||
title="取消"
|
||
class="icon-button"
|
||
@click="clear">
|
||
<el-icon>
|
||
<CircleCloseFilled />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<el-image
|
||
fit="contain"
|
||
style="width: 100px; height: 100px"
|
||
:src="material.imageUrlPreviewPath">
|
||
<template #error>
|
||
<div class="image-slot">暂无图片</div>
|
||
</template>
|
||
</el-image>
|
||
<div>
|
||
<div
|
||
:title="materialType.name"
|
||
class="material-type">
|
||
类型：{{ materialType.name }}
|
||
</div>
|
||
<div
|
||
:title="material.name"
|
||
class="material-name">
|
||
名称：{{ material.name }}
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<el-dialog
|
||
style="height: 80vh"
|
||
width="70%"
|
||
append-to-body
|
||
lock-scroll
|
||
:close-on-click-modal="false"
|
||
v-model="dialogVisible"
|
||
title="请选择材料">
|
||
<div
|
||
class="search-warp"
|
||
style="margin-bottom: 10px">
|
||
<el-select
|
||
@change="onClickSearch"
|
||
v-model="search.type"
|
||
@clear="removeSearch"
|
||
class="search-item search-input"
|
||
clearable
|
||
placeholder="选择材料类型">
|
||
<el-option
|
||
v-for="item in materialTypeList"
|
||
:value="item.id"
|
||
:label="item.name"></el-option>
|
||
</el-select>
|
||
<el-input
|
||
class="search-item search-input"
|
||
clearable
|
||
@keyup.enter.native="onClickSearch"
|
||
@clear="removeSearch"
|
||
v-model="search.name"
|
||
placeholder="请输入名称查询"
|
||
suffix-icon="search"></el-input>
|
||
</div>
|
||
<div class="div-content">
|
||
<el-card
|
||
v-for="material in materialList"
|
||
:class="{ 'is-selected': material.isSelected }"
|
||
@click="selectMaterial(material)"
|
||
@dblclick="dbSelectMaterial(material)"
|
||
:title="material.description">
|
||
<el-image
|
||
fit="contain"
|
||
style="width: 200px; height: 200px"
|
||
:src="material.imageUrlPreviewPath">
|
||
<template #error>
|
||
<div class="image-slot">
|
||
<!–
|
||
<el-icon><Picture /></el-icon>
|
||
–> 暂无图片
|
||
</div>
|
||
</template>
|
||
</el-image>
|
||
<template #footer>
|
||
<div class="card-footer">
|
||
<div
|
||
:title="materialType.name"
|
||
class="title-material-type">
|
||
类型：{{ materialType.name }}
|
||
</div>
|
||
<div
|
||
:title="material.name"
|
||
class="title-material-name">
|
||
名称：{{ material.name }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-card>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="clickCancel">取消</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="confirm">
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import ArtSystem from '../artSystem.js';
|
||
import { CircleClose, CircleCloseFilled } from '@element-plus/icons-vue';
|
||
export default {
|
||
name: 'materialCard',
|
||
emits: ['confirm'],
|
||
components: { CircleCloseFilled, CircleClose },
|
||
props: {
|
||
modelValue: Boolean,
|
||
currentMaterial: Object, //cellsysArt的Material对象
|
||
materialId: Number,
|
||
},
|
||
computed: {
|
||
dialogVisible: {
|
||
get() {
|
||
return this.modelValue;
|
||
},
|
||
set(val) {
|
||
this.$emit('update:modelValue', val);
|
||
},
|
||
},
|
||
materialType() {
|
||
if (this.material && this.material.materialType) {
|
||
return this.material.materialType;
|
||
} else {
|
||
return {};
|
||
}
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
listQuery: {
|
||
total: 0,
|
||
currPage: 1,
|
||
pageSize: 10,
|
||
filter: [],
|
||
listLoading: false,
|
||
},
|
||
search: {
|
||
name: null,
|
||
type: null,
|
||
},
|
||
materialTypeList: [],
|
||
materialList: [],
|
||
material: {},
|
||
activeName: null,
|
||
};
|
||
},
|
||
created() {
|
||
if (this.currentMaterial) {
|
||
this.material = this.currentMaterial;
|
||
} else {
|
||
this.queryMaterialList();
|
||
}
|
||
this.queryMaterialType();
|
||
},
|
||
methods: {
|
||
clickCancel() {
|
||
this.material = null;
|
||
this.dialogVisible = false;
|
||
},
|
||
confirm() {
|
||
if (!this.material) {
|
||
return this.$message({
|
||
type: 'warning',
|
||
message: '还未选择材料',
|
||
});
|
||
}
|
||
this.$emit('confirm', this.material.id);
|
||
this.dialogVisible = false;
|
||
},
|
||
clear() {
|
||
this.material = null;
|
||
this.$emit('confirm', null);
|
||
},
|
||
selectMaterial(material) {
|
||
// 更新选中状态，这里假设你只想单选
|
||
this.materialList.forEach((mat) => {
|
||
mat.isSelected = mat.id === material.id;
|
||
});
|
||
this.material = material;
|
||
},
|
||
dbSelectMaterial(material) {
|
||
this.material = material;
|
||
this.$emit('confirm', this.material.id);
|
||
this.dialogVisible = false;
|
||
},
|
||
onClickSearch() {
|
||
let filter = [];
|
||
let { name, type } = this.search;
|
||
if (name) {
|
||
filter.push({
|
||
name: 'name',
|
||
operator: 'like',
|
||
value: name,
|
||
});
|
||
}
|
||
|
||
if (type) {
|
||
filter.push({
|
||
name: 'material_type_id',
|
||
operator: '=',
|
||
value: type,
|
||
});
|
||
}
|
||
this.listQuery.filter = filter;
|
||
this.queryMaterialList(filter);
|
||
},
|
||
removeSearch() {
|
||
this.queryMaterialList();
|
||
},
|
||
|
||
queryMaterialType() {
|
||
let params = {
|
||
pageInfo: {
|
||
pageSize: 0,
|
||
currPage: 0,
|
||
},
|
||
};
|
||
ArtSystem.queryMaterialType(params).then((response) => {
|
||
this.materialTypeList = response.data;
|
||
});
|
||
},
|
||
queryMaterialList(filter) {
|
||
let params = {
|
||
pageInfo: {
|
||
pageSize: 0,
|
||
currPage: 0,
|
||
},
|
||
filter: filter,
|
||
order: { id: 'desc' },
|
||
};
|
||
ArtSystem.queryMaterial(params).then((response) => {
|
||
this.materialList = response.data;
|
||
if (this.materialId) {
|
||
this.material = this.materialList[0];
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.icon-button {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 5px;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
color: #dd2c00;
|
||
}
|
||
|
||
.search-warp {
|
||
display: inline-block;
|
||
margin-bottom: 7px;
|
||
|
||
& .search-item {
|
||
display: inline-block;
|
||
|
||
& + .search-item {
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
|
||
& .search-input {
|
||
border-radius: 30px;
|
||
width: 15rem;
|
||
}
|
||
|
||
& .search-input {
|
||
.el-input__wrapper {
|
||
border-radius: 30px;
|
||
width: 100%;
|
||
}
|
||
|
||
.el-select__wrapper {
|
||
border-radius: 30px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
& .el-range-editor.el-input__wrapper {
|
||
margin-left: 15px;
|
||
border-radius: 30px;
|
||
}
|
||
}
|
||
|
||
.div-content {
|
||
height: calc(100% - 44px);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
overflow-y: auto;
|
||
min-height: 40vh;
|
||
}
|
||
|
||
:deep(.el-tab-pane) {
|
||
height: 100%;
|
||
}
|
||
|
||
.el-card {
|
||
margin: 10px;
|
||
width: 300px;
|
||
height: 300px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 添加选中状态的样式 */
|
||
.el-card.is-selected {
|
||
border-color: #409eff; /* Element UI主题色的蓝色 */
|
||
box-shadow: 0 0 10px #409eff;
|
||
}
|
||
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.title-material-type {
|
||
width: 50%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1; /* 限制显示的行数 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.title-material-name {
|
||
width: 50%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1; /* 限制显示的行数 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-slot {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--el-fill-color-light);
|
||
color: var(--el-text-color-secondary);
|
||
font-size: 30px;
|
||
}
|
||
|
||
.material-type {
|
||
text-align: left;
|
||
width: 100%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1; /* 限制显示的行数 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.material-name {
|
||
text-align: left;
|
||
width: 100%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1; /* 限制显示的行数 */
|
||
overflow: hidden;
|
||
}
|
||
</style>
|