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>
|