|
|
|
@ -1,215 +1,14 @@ |
|
|
|
<!-- |
|
|
|
@ 作者: 袁纪菲 |
|
|
|
@ 时间: 2024.3.18 |
|
|
|
@ 备注: 应用管理父组件 |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-15 15:07:04 |
|
|
|
@ 备注: |
|
|
|
--> |
|
|
|
<script lang = "ts" setup> |
|
|
|
import cardedit from './cardedit.vue'; |
|
|
|
import cardadd from './cardadd.vue'; |
|
|
|
import {ref,onMounted,onUnmounted,watch} from 'vue'; |
|
|
|
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue' |
|
|
|
<script lang='ts' setup> |
|
|
|
|
|
|
|
// 弹窗状态 |
|
|
|
const props = defineProps({ |
|
|
|
visible:Boolean |
|
|
|
}); |
|
|
|
const drawerRefadd = ref(false); |
|
|
|
const drawerRefedit = ref(false) |
|
|
|
|
|
|
|
// 卡片数据 |
|
|
|
interface cardDatass { |
|
|
|
id: number; |
|
|
|
name: string; |
|
|
|
imageUrl: '', |
|
|
|
} |
|
|
|
const cardData = ref<cardDatass[]>([]); |
|
|
|
const emits = defineEmits(["update:visible", "data"]); |
|
|
|
//添加 |
|
|
|
const opencardadd = () => { |
|
|
|
drawerRefadd.value = true; |
|
|
|
cardadd.value.onSubmit = handleAddCard; |
|
|
|
}; |
|
|
|
// 新增卡片数据的接收与处理 |
|
|
|
const handleAddCard = (newCard: cardDatass) => { |
|
|
|
cardData.value.push(newCard); |
|
|
|
}; |
|
|
|
//编辑 |
|
|
|
const opencardedit = (index: number) => { |
|
|
|
drawerRefedit.value = true; |
|
|
|
// 将当前卡片的数据传给cardedit组件 |
|
|
|
cardedit.value.cardData = cardData.value[index]; |
|
|
|
cardedit.value.onSubmit = handleEditCard; |
|
|
|
}; |
|
|
|
// 编辑卡片数据的接收与处理 |
|
|
|
const handleEditCard = (newCard: cardDatass) => { |
|
|
|
cardData.value.splice(0,1,newCard); |
|
|
|
}; |
|
|
|
//删除 |
|
|
|
const deleteCard = (index: number) => { |
|
|
|
cardData.value.splice(index, 1); |
|
|
|
emits('data', cardData.value); |
|
|
|
}; |
|
|
|
//监听子组件发来的 'data' 事件 |
|
|
|
watch(() => props.visible, () => { |
|
|
|
}, |
|
|
|
{ immediate: true } |
|
|
|
); |
|
|
|
// 监听子组件返回的新卡片数据 |
|
|
|
const handleNewCard = (newCard: cardDatass) => { |
|
|
|
cardData.value.push(newCard); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
for(let i = 0;i<9;i++){ |
|
|
|
cardData.value.push({ |
|
|
|
id: i, |
|
|
|
name: '卡片' + i, |
|
|
|
imageUrl: '' |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<cardadd v-model:visible="drawerRefadd" :keyval="props.visible" @data="handleNewCard"/> |
|
|
|
<cardedit v-model:visible="drawerRefedit" :keyval="props.visible" @data="handleNewCard"/> |
|
|
|
<el-row :gutter="10"> |
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|
|
|
<div class="grid-content ep-bg-purple" > |
|
|
|
<el-card class="cardlarge"> |
|
|
|
<template #header> |
|
|
|
<div class="cardhead-large"> |
|
|
|
<el-row class="block-col-2"> |
|
|
|
<el-col style="text-align: right;"> |
|
|
|
<el-dropdown> |
|
|
|
<span class="el-dropdown-link"> |
|
|
|
<el-icon><MoreFilled /></el-icon> |
|
|
|
</span> |
|
|
|
<template #dropdown> |
|
|
|
<el-dropdown-menu> |
|
|
|
<el-dropdown-item @click="opencardadd" >添加</el-dropdown-item> |
|
|
|
<el-dropdown-item >编辑</el-dropdown-item> |
|
|
|
<el-dropdown-item >删除</el-dropdown-item> |
|
|
|
</el-dropdown-menu> |
|
|
|
</template> |
|
|
|
</el-dropdown> |
|
|
|
</el-col> |
|
|
|
<el-col style="text-align: left;"> |
|
|
|
<span>标题一</span> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div class="grid-content ep-bg-purple" > |
|
|
|
<el-row :gutter="10" > |
|
|
|
<el-col v-for="(card, index) in cardData" :key="card.id" :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|
|
|
<el-card class="cardpattern"> |
|
|
|
<img |
|
|
|
v-if="card.imageUrl" |
|
|
|
src="card.imageUrl" |
|
|
|
title="示例图片" |
|
|
|
class="picture" |
|
|
|
/> |
|
|
|
<div class="cardhead"> |
|
|
|
<span>{{ card.name }}</span> |
|
|
|
</div> |
|
|
|
<div class="bottom"> |
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button> |
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button> |
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<div class="example-pagination-block"> |
|
|
|
<div class="example-demonstration"></div> |
|
|
|
<el-pagination layout="prev, pager, next" :total="50" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div></div> |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
/* 小卡片 */ |
|
|
|
.cardpattern{ |
|
|
|
padding-bottom: 0px; |
|
|
|
margin-bottom: 10px; |
|
|
|
min-width: 100px; |
|
|
|
} |
|
|
|
/* 小卡片标题 */ |
|
|
|
.cardhead{ |
|
|
|
padding: 10px; |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
/* 大卡片 */ |
|
|
|
.cardlarge{ |
|
|
|
max-width: 480px; |
|
|
|
} |
|
|
|
/* 大卡片标题 */ |
|
|
|
.cardhead-large{ |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮整体 */ |
|
|
|
.bottom { |
|
|
|
margin-top: 20px; |
|
|
|
line-height: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
} |
|
|
|
/* 单个按钮 */ |
|
|
|
.button { |
|
|
|
padding: 0px; |
|
|
|
min-height: auto; |
|
|
|
margin-bottom: 1px; |
|
|
|
} |
|
|
|
/* 图片 */ |
|
|
|
.picture { |
|
|
|
height: 100%; |
|
|
|
min-height: 50px; |
|
|
|
max-height: 100px; |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
min-width: 50px; |
|
|
|
} |
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
.el-col { |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.grid-content { |
|
|
|
border-radius: 4px; |
|
|
|
min-height: 36px; |
|
|
|
} |
|
|
|
|
|
|
|
.app_box{ |
|
|
|
margin: 15px 0 0 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.block-col-2 .demonstration { |
|
|
|
display: block; |
|
|
|
color: var(--el-text-color-secondary); |
|
|
|
font-size: 14px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.block-col-2 .el-dropdown-link { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
/* 分页 */ |
|
|
|
.example-pagination-block + .example-pagination-block { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
.example-pagination-block .example-demonstration { |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
