hxgksystemapp/src/views/sysworkflow/codepage/page.vue

<!--
@ 作者: 袁纪菲
@ 时间: 2024.3.18
@ 备注: 应用管理父组件
-->
<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'

// 弹窗状态
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
                       
                        
                          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>

</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;
}

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