应用管理页面

src/types/components.d.ts

@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
     DesignLayoutPage: typeof import('./../components/DesignForm/designLayout/designLayoutPage.vue')['default']
     DiyIconfont: typeof import('./../components/DesignForm/public/expand/diy-iconfont.vue')['default']
     DragControl: typeof import('./../components/DesignForm/dragControl.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -28,12 +29,14 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
@@ -47,8 +50,11 @@ declare module '@vue/runtime-core' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -61,6 +67,7 @@ declare module '@vue/runtime-core' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -98,6 +105,9 @@ declare module '@vue/runtime-core' {
     IEpClose: typeof import('~icons/ep/close')['default']
     IEpDelete: typeof import('~icons/ep/delete')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
+    IEpOperation: typeof import('~icons/ep/operation')['default']
+    IEpPicture: typeof import('~icons/ep/picture')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']

src/views/sysworkflow/codepage/cardadd.vue

@@ -1,7 +1,11 @@
-<!-- 添加卡片 -->
+<!--
+@ 作者: 袁纪菲
+@ 时间: 2024.3.18
+@ 备注: 添加卡片
+-->
 <script setup>
-import { ref,computed,reactive,watch,defineProps,toRef} from 'vue';
-import { ElDrawer, ElMessageBox } from 'element-plus'
+import { ref,computed,reactive,watch,toRef} from 'vue';
+
 const props = defineProps({
   visible:Boolean
 });
@@ -14,15 +18,9 @@ const loading = ref(false)
 
 const form = reactive({
   data:{
+    id: '',
     name: '',
-    details:'',
-    region: '',
-    date1: '',
-    date2: '',
-    delivery: false,
-    type: [],
-    resource: '',
-    desc: ''
+    imageUrl: '',
   },
   visible: computed({
     get(){
@@ -35,32 +33,48 @@ const form = reactive({
 })
 const drawerRefadd = ref();
 
-// 原element表单提交
-const onClick = () => {
-  if (drawerRefadd.value && typeof drawerRefadd.value.close === 'function') {
-    drawerRefadd.value.close();
-  } else {
-    console.error('drawerRef.value值为空、未定义或没有close方法');
+// 图片预览地址
+const previewImageUrl = ref('');
+// 图片上传前的钩子函数
+const beforeUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJPG) {
+    ElMessage.error('只能上传 JPG 或 PNG 格式的图片');
+    return false;
   }
-}
-// 修改表单提交
-// const onSubmit = () => {
-//   // 验证表单数据...
-//   if (!form.data.name) {
-//     ElMessage.error("标题不能为空");
-//     return;
-//   }
-//   // 模拟向本地数据添加新的卡片数据
-//   const newCard = { ...form.data };
-//   // 关闭添加卡片的抽屉
-//   drawerRefadd.value.close();
-//   // 将新卡片数据发送回父组件
-//   emits('data', newCard);
-//   // 清空表单以便下次使用
-//   form.data.name = '';
-//   // 提交成功后，关闭loading状态
-//   loading.value = false;
-// };
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过 2MB');
+    return false;
+  }
+  // 如果验证通过，则可以将本地图片转为 URL 显示预览
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    previewImageUrl.value = reader.result;
+    form.data.imageUrl = reader.result; // 更新到表单数据
+  };
+  return isJPG && isLt2M;
+};
+// 表单提交
+const onSubmit = async () => {
+  // 验证表单数据...
+  if (!form.data.name) {
+    ElMessage.error("标题不能为空");
+    return;
+  }
+  // 模拟向本地数据添加新的卡片数据
+  const newCard = { ...form.data };
+  // 关闭添加卡片的抽屉
+  drawerRefadd.value.close();
+  // 将新卡片数据发送回父组件
+  emits('data', newCard);
+  // 清空表单以便下次使用
+  form.data.name = '';
+  // 提交成功后，关闭loading状态
+  loading.value = false;
+  emits('update:visible', false)
+};
   
 // };
 // 关闭
@@ -88,6 +102,7 @@ const handleClose = () => {
         }, 400)
       }, 2000)
     })
+    
     .catch(() => {
       // catch error
       cancelForm();
@@ -99,7 +114,7 @@ const cancelForm = () => {
   dialog.value = false
   emits('update:visible', false)
   clearTimeout(timer)
-
+  form.data.name = ''
 }
 
 </script>
@@ -107,7 +122,7 @@ const cancelForm = () => {
 <template>
     <el-drawer
     ref="drawerRefadd"
-    :modelValue="visible"
+    :model-value="visible"
     title="添加"
     :before-close="handleClose"
     direction="ltr"
@@ -117,24 +132,27 @@ const cancelForm = () => {
     <div class="demo-drawer__content">
       <el-form :model="form">
         <el-form-item label="标题" :label-width="formLabelWidth">
-          <el-input v-model="form.name" autocomplete="off" />
+          <el-input v-model="form.data.name" autocomplete="off" />
         </el-form-item>
-        <el-form-item>
-          <div class="picture">
-            <el-image :src></el-image>
-            <div>
-              <input
-              type="file"
-              class="upinput"
-              ref="file"
-              />
-            </div>
+        <el-form-item label="图片" :label-width=formLabelWidth>
+          <el-upload
+            class="picture-uploader"
+            action=""
+            :auto-upload="false"
+            :before-upload="beforeUpload"
+            :on-change="handleChange"
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- 预览区域 -->
+          <div v-if="form.data.imageUrl" class="preview-image">
+            <img :src="form.data.imageUrl" alt="预览图片" />
           </div>
         </el-form-item>
       </el-form>
       <div class="demo-drawer__footer">
         <el-button @click="cancelForm">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="onClick">
+        <el-button type="primary" :loading="loading" @click="onSubmit">
         {{loading ? '正在提交 ...' : '提交'}}
         </el-button>
       </div>

src/views/sysworkflow/codepage/cardedit.vue

@@ -1,4 +1,8 @@
-<!-- 编辑卡片 -->
+<!--
+@ 作者: 袁纪菲
+@ 时间: 2024.3.18
+@ 备注: 编辑卡片
+-->
 <script setup>
 import { ref,computed,reactive} from 'vue';
 import { ElDrawer, ElMessageBox } from 'element-plus'
@@ -14,15 +18,9 @@ const loading = ref(false)
 
 const form = reactive({
   data:{
+    id: '',
     name: '',
-    details:'',
-    region: '',
-    date1: '',
-    date2: '',
-    delivery: false,
-    type: [],
-    resource: '',
-    desc: ''
+    imageUrl: '',
   },
   visible: computed({
     get(){
@@ -34,14 +32,49 @@ const form = reactive({
   })
 })
 const drawerRefedit = ref();
-const onClick = () => {
-  if (drawerRefedit.value && typeof drawerRefedit.value.close === 'function') {
-    drawerRefedit.value.close();
-  } else {
-    console.error('drawerRefedit.value值为空、未定义或没有close方法');
-  }
-}
 
+// 图片预览地址
+const previewImageUrl = ref('');
+// 图片上传前的钩子函数
+const beforeUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJPG) {
+    ElMessage.error('只能上传 JPG 或 PNG 格式的图片');
+    return false;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过 2MB');
+    return false;
+  }
+  // 如果验证通过，则可以将本地图片转为 URL 显示预览
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    previewImageUrl.value = reader.result;
+    form.data.imageUrl = reader.result; // 更新到表单数据
+  };
+  return isJPG && isLt2M;
+};
+// 表单提交
+const onSubmit = async () => {
+  // 验证表单数据...
+  if (!form.data.name) {
+    ElMessage.error("标题不能为空");
+    return;
+  }
+  // 模拟向本地数据添加新的卡片数据
+  const newCard = { ...form.data };
+  // 关闭添加卡片的抽屉
+  drawerRefadd.value.close();
+  // 将新卡片数据发送回父组件
+  emits('data', newCard);
+  // 清空表单以便下次使用
+  form.data.name = '';
+  // 提交成功后，关闭loading状态
+  loading.value = false;
+  drawerRefedit.value = false;
+};
 const handleClose = () => {
   if (loading.value) {
     return
@@ -77,12 +110,13 @@ const cancelForm = () => {
   dialog.value = false
   emits('update:visible', false)
   clearTimeout(timer)
+  form.data.name = ''
 }
 </script>
 <template>
      <el-drawer
     ref="drawerRefedit"
-    :modelValue="visible"
+    :model-value="visible"
     title="编辑"
     :before-close="handleClose"
     direction="ltr"
@@ -92,24 +126,27 @@ const cancelForm = () => {
     <div class="demo-drawer__content">
       <el-form :model="form">
         <el-form-item label="标题" :label-width="formLabelWidth">
-          <el-input v-model="form.name" autocomplete="off" />
+          <el-input v-model="form.data.name" autocomplete="off" />
         </el-form-item>
-        <el-form-item>
-          <div class="picture">
-            <el-image :src></el-image>
-            <div>
-              <input
-              type="file"
-              class="upinput"
-              ref="file"
-              />
-            </div>
+        <el-form-item label="图片" :label-width=formLabelWidth>
+          <el-upload
+            class="picture-uploader"
+            action=""
+            :auto-upload="false"
+            :before-upload="beforeUpload"
+            :on-change="handleChange"
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- 预览区域 -->
+          <div v-if="form.data.imageUrl" class="preview-image">
+            <img :src="form.data.imageUrl" alt="预览图片" />
           </div>
         </el-form-item>
       </el-form>
       <div class="demo-drawer__footer">
         <el-button @click="cancelForm">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="onClick">
+        <el-button type="primary" :loading="loading" @click="onSubmit">
         {{loading ? '正在提交 ...' : '提交'}}
         </el-button>
       </div>
@@ -149,4 +186,5 @@ const cancelForm = () => {
     }
   }
 }
+
 </style>

src/views/sysworkflow/codepage/page.vue

@@ -1,42 +1,77 @@
 <!--
-@ 作者: 秦东
-@ 时间: 2024-02-20 08:59:00
-@ 备注: 实验表单
+@ 作者: 袁纪菲
+@ 时间: 2024.3.18
+@ 备注: 应用管理父组件
 -->
-<!-- 应用管理父组件 -->
-<script setup>
+<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();
+const drawerRefadd = ref(false);
 const drawerRefedit = ref(false)
+
 // 卡片数据
-const cardData = ref([]);
+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) => {
-	drawerRefedit.value = true;
-}
+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) => {
+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"/>
-  <cardedit v-model:visible="drawerRefedit" :keyval="props.visible" />
+  <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" >
@@ -53,7 +88,7 @@ const deleteCard = (index) => {
                           <el-dropdown-menu>
                             <el-dropdown-item @click="opencardadd" >添加</el-dropdown-item>
                             <el-dropdown-item >编辑</el-dropdown-item>
-                            <el-dropdown-item @click="deleteCard(index)">删除</el-dropdown-item>
+                            <el-dropdown-item >删除</el-dropdown-item>
                           </el-dropdown-menu>
                         </template>
                       </el-dropdown>
@@ -66,188 +101,29 @@ const deleteCard = (index) => {
             </template>
             <div class="grid-content ep-bg-purple" >
               <el-row :gutter="10" >
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                <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
-                          src="../assets/image/1.png"
+                          v-if="card.imageUrl"
+                          src="card.imageUrl"
                           title="示例图片"
                           class="picture"
                         />
                           <div class="cardhead">
-                          <span>卡片1</span>
+                          <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-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片2</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                  
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片3</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片4</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片5</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片6</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片7</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片8</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"></el-button>
-                            <el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
-                          </div>
-                    </el-card>
-                </el-col>
-                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
-                      <el-card class="cardpattern">
-                        <img
-                          src="../assets/image/1.png"
-                          title="示例图片"
-                          class="picture"
-                        />
-                          <div class="cardhead">
-                          <span>卡片9</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"></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-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> 
-        <div class="grid-content ep-bg-purple-light">
-          <el-card class="cardlarge">
-            
-          </el-card>
-        </div>
-    </el-col>
-    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-        <div class="grid-content ep-bg-purple">
-          <el-card class="cardlarge">
-            
-          </el-card>
-        </div>
-    </el-col>
-    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-        <div class="grid-content ep-bg-purple-light">
-          <el-card class="cardlarge">
-
-          </el-card>
-        </div>
-    </el-col>
   </el-row>
 
 <!-- 分页 -->

src/views/sysworkflow/codepage/page_123.vue

@@ -0,0 +1,368 @@
+<!--
+@ 作者: 袁纪菲
+@ 时间: 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;
+}
+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.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<5;i++){
+    cardData.value.push({
+      id: i,
+      name: '卡片' + i
+    });
+  }
+});
+</script>
+<template>
+  <cardadd v-model:visible="drawerRefadd" :keyval="props.visible" @data="handleNewCard"/>
+  <cardedit v-model:visible="drawerRefedit" :keyval="props.visible" />
+  <el-row :gutter="10">
+    <el-col v-for="(card, index) in cardData" :key="card.id" :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 @click="deleteCard">删除</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  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          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-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                  
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片3</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片4</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片5</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片6</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片7</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片8</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片9</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"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+              </el-row>
+
+            </div>
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> 
+        <div class="grid-content ep-bg-purple-light">
+          <el-card class="cardlarge">
+            
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple">
+          <el-card class="cardlarge">
+            
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple-light">
+          <el-card class="cardlarge">
+
+          </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>