<template>
|
<ul class="list-container">
|
<el-scrollbar>
|
<template v-for="(item, index) in gridList" :key="index">
|
<Transition>
|
<li
|
:class="
|
'list-item ' +
|
(item.selected ? 'list-item__selected' : '')
|
"
|
@click="selectGrid(index)"
|
@mouseover="item.show = true"
|
@mouseleave="item.show = false"
|
v-if="!item.delete"
|
>
|
<div style="display: flex; gap: 8px">
|
<div>{{ item.name }}</div>
|
<div>{{ item.sides.length + '/4' }}</div>
|
</div>
|
<Transition>
|
<el-button
|
v-show="item.show || item.selected"
|
type="danger"
|
@click.stop="deleteGrid(index)"
|
>删除</el-button
|
>
|
</Transition>
|
</li>
|
</Transition>
|
</template>
|
</el-scrollbar>
|
</ul>
|
</template>
|
|
<script>
|
// 网格化方案记录详情
|
import { mapState, mapActions } from 'pinia';
|
import { useGridStore } from '@/stores/grid';
|
|
export default {
|
data() {
|
return {
|
// 删除按钮显示隐藏
|
btnShow: false
|
};
|
},
|
watch: {
|
gridList() {
|
this.showGrids();
|
}
|
},
|
computed: {
|
...mapState(useGridStore, ['gridList'])
|
},
|
methods: {
|
...mapActions(useGridStore, [
|
'setGrid',
|
'saveSelectedGrid',
|
'openGridEdit',
|
'deleteGrid',
|
'showGrids',
|
'showGrid'
|
]),
|
// 网格列表选择
|
selectGrid(index) {
|
this.clearSelect();
|
this.gridList[index].selected = true;
|
// 在切换编辑对象时，自动保存上一次的编辑结果
|
this.saveSelectedGrid();
|
this.setGrid(index);
|
this.showGrid(index);
|
this.openGridEdit();
|
},
|
clearSelect() {
|
this.gridList.forEach((e) => {
|
e.selected = false;
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.list-container {
|
/* background-color: antiquewhite; */
|
padding: initial;
|
height: 60vh;
|
overflow: auto;
|
overflow-x: hidden;
|
border: var(--el-border);
|
}
|
|
.list-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 4px;
|
list-style-type: none;
|
/* background-color: aqua; */
|
/* border: var(--el-border); */
|
border-radius: var(--el-border-radius-base);
|
box-shadow: var(--el-box-shadow-lighter);
|
margin-bottom: 2px;
|
cursor: pointer;
|
line-height: 36px;
|
}
|
|
.list-item:hover {
|
background-color: var(--el-color-primary-light-9);
|
}
|
|
.list-item__selected {
|
background-color: var(--el-color-primary-light-9);
|
}
|
|
.v-enter-from,
|
.v-leave-to {
|
opacity: 0;
|
transform: translateX(8px);
|
}
|
|
.v-enter-active,
|
.v-leave-active {
|
transition: all 0.3s ease-out;
|
}
|
</style>
|
