style：可视化大屏-大屏管理添加编辑删除

src/views/report/dashboardList/index.vue

@@ -69,7 +69,7 @@
           class="mb-16px"
         >
           <el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
-            <div class="dashboard-card-image-wrapper">
+            <div class="dashboard-card-image-wrapper" @click="handlePreview(item)">
               <img
                 class="dashboard-card-image"
                 :src="item.indexImage || defaultImage"
@@ -89,9 +89,21 @@
                 </div>
               </div>
               <div class="dashboard-card-actions">
-                <el-button type="primary" text @click="handlePreview(item)">
-                  <Icon icon="ep:arrow-right" class="mr-5px" /> 预览
-                </el-button>
+              <el-popover placement="bottom-end" trigger="click" width="140">
+                <div class="dashboard-card-menu">
+                  <el-button type="primary" text @click="openEditDialog(item)">
+                    编辑
+                  </el-button>
+                  <el-button type="danger" text @click="handleDelete(item)">
+                    删除
+                  </el-button>
+                </div>
+                <template #reference>
+                  <el-button text circle>
+                    <Icon icon="ep:more" />
+                  </el-button>
+                </template>
+              </el-popover>
               </div>
             </div>
           </el-card>
@@ -107,7 +119,11 @@
     </div>
   </ContentWrap>
 
-  <el-dialog v-model="createDialogVisible" title="新增数据大屏" width="600px">
+  <el-dialog
+    v-model="createDialogVisible"
+    :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'"
+    width="600px"
+  >
     <el-form :model="createForm" ref="createFormRef" label-width="80px">
       <el-form-item label="名称">
         <el-input v-model="createForm.name" placeholder="请输入名称" />
@@ -142,7 +158,7 @@
     </el-form>
     <template #footer>
       <el-button @click="createDialogVisible = false">取 消</el-button>
-      <el-button type="primary" :loading="createLoading" @click="submitCreate">
+      <el-button type="primary" :loading="createLoading" @click="submitDialog">
         确 定
       </el-button>
     </template>
@@ -157,6 +173,7 @@ import defaultImage from '@/assets/imgs/logo.png'
 defineOptions({ name: 'DashboardList' })
 
 const { push } = useRouter()
+const message = useMessage()
 
 interface DashboardItem {
   id: number
@@ -165,6 +182,7 @@ interface DashboardItem {
   state: string
   indexImage?: string
   route?: string
+  content?: string
 }
 
 const loading = ref(false)
@@ -184,6 +202,8 @@ const queryFormRef = ref()
 const createDialogVisible = ref(false)
 const createLoading = ref(false)
 const createFormRef = ref()
+const dialogMode = ref<'create' | 'edit'>('create')
+const editingId = ref<number | null>(null)
 const createForm = reactive({
   name: '',
   remark: '',
@@ -219,7 +239,7 @@ const resetQuery = () => {
 
 const handlePreview = (item: DashboardItem) => {
   if (!item.route) {
-    useMessage().error('未配置预览路由')
+    message.error('未配置预览路由')
     return
   }
   const path = item.route.startsWith('/') ? item.route : `/${item.route}`
@@ -236,22 +256,51 @@ const resetCreateForm = () => {
 }
 
 const openCreateDialog = () => {
+  dialogMode.value = 'create'
+  editingId.value = null
   resetCreateForm()
   createDialogVisible.value = true
 }
 
-const submitCreate = async () => {
+const openEditDialog = (item: DashboardItem) => {
+  dialogMode.value = 'edit'
+  editingId.value = item.id
+  createForm.name = item.name || ''
+  createForm.remark = item.remark || ''
+  createForm.state = item.state || ''
+  createForm.indexImage = item.indexImage || ''
+  createForm.route = item.route || ''
+  createForm.content = item.content || ''
+  createDialogVisible.value = true
+}
+
+const submitDialog = async () => {
   if (!createForm.name) {
-    useMessage().error('名称不能为空')
+    message.error('名称不能为空')
+    return
+  }
+  if (dialogMode.value === 'edit' && !editingId.value) {
+    message.error('缺少数据编号，无法编辑')
     return
   }
   createLoading.value = true
   try {
-    await request.post({
-      url: '/mes/goview/create',
-      data: createForm
-    })
-    useMessage().success('新增成功')
+    if (dialogMode.value === 'create') {
+      await request.post({
+        url: '/mes/goview/create',
+        data: createForm
+      })
+      message.success('新增成功')
+    } else {
+      await request.put({
+        url: '/mes/goview/update',
+        data: {
+          id: editingId.value,
+          ...createForm
+        }
+      })
+      message.success('编辑成功')
+    }
     createDialogVisible.value = false
     handleQuery()
   } finally {
@@ -259,6 +308,18 @@ const submitCreate = async () => {
   }
 }
 
+const handleDelete = async (item: DashboardItem) => {
+  if (!item.id) return
+  try {
+    await message.delConfirm()
+    await request.delete({
+      url: `/mes/goview/delete?id=${item.id}`
+    })
+    message.success('删除成功')
+    await getList()
+  } catch {}
+}
+
 onMounted(() => {
   getList()
 })
@@ -279,6 +340,7 @@ onMounted(() => {
   width: 100%;
   padding-top: 56.25%;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .dashboard-card-image {