From 1036713f7416c6379c1fc8ccee5642a976b2f8fd Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Sun, 8 Oct 2023 00:19:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8D=A1=E7=89=87=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E5=92=8C=E7=82=B9=E5=87=BB=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...rion-vue-views-components-card-list.vue.vm |  55 +++++---
 .../src/components/card/list/index.vue        | 123 ++++++++++--------
 .../components/host-key-card-list.vue         |  65 +++++++--
 .../host-key/components/host-key-table.vue    |   4 +-
 .../src/views/asset/host-key/index.vue        |   2 +
 .../asset/host/components/host-card-list.vue  |  74 +++++++----
 6 files changed, 217 insertions(+), 106 deletions(-)

diff --git a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
index 5c2c0d13..04d8b756 100644
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
@@ -42,6 +42,22 @@
         </a-dropdown>
       </a-space>
     </template>
+    <!-- 右键菜单 -->
+    <template #contextMenu="{ record }">
+      <!-- 修改 -->
+      <a-doption v-permission="['${package.ModuleName}:${typeHyphen}:update']"
+                 @click="emits('openUpdate', record)">
+        <icon-edit />
+        修改
+      </a-doption>
+      <!-- 删除 -->
+      <a-doption v-permission="['${package.ModuleName}:${typeHyphen}:delete']"
+                 class="span-red"
+                 @click="deleteRow(record.id)">
+        <icon-delete />
+        删除
+      </a-doption>
+    </template>
     <!-- 过滤条件 -->
     <template #filterContent>
       <a-form :model="formModel"
@@ -54,7 +70,7 @@
               :wrapper-col-props="{ span: 18 }">
         #foreach($field in ${table.fields})
         <!-- $field.comment -->
-        <a-form-item field="${field.propertyName}" label="${field.comment}" label-col-flex="50px">
+        <a-form-item field="${field.propertyName}" label="${field.comment}">
         #if(${vue.enums.containsKey(${field.propertyName})})
         <a-select v-model="formModel.${field.propertyName}"
                   :options="toOptions(${vue.enums.get(${field.propertyName}).className})"
@@ -96,13 +112,13 @@
   import { objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
   import { delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
-  import { Message } from '@arco-design/web-vue';
+  import { Message, Modal } from '@arco-design/web-vue';
 
   const { loading, setLoading } = useLoading();
   const cardColLayout = useColLayout();
   const pagination = usePagination();
   const list = ref<${vue.featureEntity}QueryResponse[]>([]);
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+  const emits = defineEmits(['openAdd', 'openUpdate']);
 
   const formModel = reactive<${vue.featureEntity}QueryRequest>({
     searchValue: undefined,
@@ -117,18 +133,26 @@
   });
 
   // 删除当前行
-  const deleteRow = async (id: number) => {
-    try {
-      setLoading(true);
-      // 调用删除接口
-      await delete${vue.featureEntity}(id);
-      Message.success('删除成功');
-      // 重新加载数据
-      await fetchCardData();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
+  const deleteRow = (id: number) => {
+    Modal.confirm({
+      title: '删除前确认?',
+      titleAlign: 'start',
+      content: '确定要删除这条记录吗?',
+      okText: '删除',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          // 调用删除接口
+          await delete${vue.featureEntity}(id);
+          Message.success('删除成功');
+          // 重新加载数据
+          await fetchCardData();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
   };
 
   // 添加后回调
@@ -175,4 +199,5 @@
 </script>
 
 <style scoped lang="less">
+
 </style>
diff --git a/orion-ops-ui/src/components/card/list/index.vue b/orion-ops-ui/src/components/card/list/index.vue
index 1bdcd768..aa46deb9 100644
--- a/orion-ops-ui/src/components/card/list/index.vue
+++ b/orion-ops-ui/src/components/card/list/index.vue
@@ -114,73 +114,85 @@
                :class="{
                  'disabled-col': item.disabled === true
                }">
-          <a-card :class="{
-                    'general-card': true,
-                    'card-list-item': true,
-                    'card-list-item-disabled': item.disabled === true
-                  }"
-                  :style="{ height: `${cardHeight}px` }"
-                  :body-style="{ height: 'calc(100% - 58px)' }"
-                  :bordered="false"
-                  :hoverable="true">
-            <!-- 标题 -->
-            <template #title>
-              <slot name="title" :record="item" :index="index" :key="item[key]" />
-            </template>
-            <!-- 拓展部分 -->
-            <template #extra>
-              <slot name="extra" :record="item" :index="index" :key="item[key]" />
-            </template>
-            <!-- 内容-字段 -->
-            <template v-if="fieldConfig && fieldConfig.fields">
-              <div :class="['fields-container', fieldConfig.bodyClass]">
-                <template v-for="(field, index) in fieldConfig.fields">
-                  <a-row :align="fieldConfig.rowAlign || field.rowAlign || 'center'"
-                         :style="{
+          <!-- 右键菜单 -->
+          <a-dropdown trigger="contextMenu" alignPoint>
+            <!-- 卡片 -->
+            <a-card :class="[
+                    'general-card',
+                    'card-list-item',
+                    item.disabled === true ? 'card-list-item-disabled' : undefined,
+                    !!cardClass ? cardClass : undefined
+                  ]"
+                    :style="{ height: `${cardHeight}px` }"
+                    :body-style="{ height: 'calc(100% - 58px)' }"
+                    :bordered="false"
+                    :hoverable="true"
+                    @contextmenu.prevent="() => false"
+                    @click="emits('click',item, index)"
+                    @dblclick="emits('dblclick',item, index)">
+              <!-- 标题 -->
+              <template #title>
+                <slot name="title" :record="item" :index="index" :key="item[key]" />
+              </template>
+              <!-- 拓展部分 -->
+              <template #extra>
+                <slot name="extra" :record="item" :index="index" :key="item[key]" />
+              </template>
+              <!-- 内容-字段 -->
+              <template v-if="fieldConfig && fieldConfig.fields">
+                <div :class="['fields-container', fieldConfig.bodyClass]">
+                  <template v-for="(field, index) in fieldConfig.fields">
+                    <a-row :align="fieldConfig.rowAlign || field.rowAlign || 'center'"
+                           :style="{
                            'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '10px') : false,
                            'height': fieldConfig.height || field.height || 'unset'
                          }">
-                    <!-- label -->
-                    <a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"
-                           :style="{
+                      <!-- label -->
+                      <a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"
+                             :style="{
                              'text-align': fieldConfig.labelAlign || 'left'
                            }"
-                           :class="[fieldConfig.labelClass,
+                             :class="[fieldConfig.labelClass,
                              field.labelClass,
                              'field-label'
                            ]">
-                      <span>{{ field.label + (fieldConfig.showColon ? ' :' : '') }}</span>
-                    </a-col>
-                    <!-- value -->
-                    <a-col :span="24 - (fieldConfig.labelSpan || 8) + (fieldConfig.labelOffset || 0)"
-                           :style="{
+                        <span>{{ field.label + (fieldConfig.showColon ? ' :' : '') }}</span>
+                      </a-col>
+                      <!-- value -->
+                      <a-col :span="24 - (fieldConfig.labelSpan || 8) + (fieldConfig.labelOffset || 0)"
+                             :style="{
                              'text-align': fieldConfig.valueAlign || 'left'
                            }"
-                           :class="[fieldConfig.valueClass,
+                             :class="[fieldConfig.valueClass,
                              field.valueClass,
                              'field-value',
                              field.ellipsis ? 'field-value-ellipsis' : ''
                            ]">
-                      <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
-                        <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
-                          <span v-if="field.render" v-html="field.render({ record: item, index })" />
-                          <span v-else>{{ item[field.dataIndex] }}</span>
-                        </a-tooltip>
-                        <template v-else>
-                          <span v-if="field.render" v-html="field.render({ record: item, index })" />
-                          <span v-else>{{ item[field.dataIndex] }}</span>
-                        </template>
-                      </slot>
-                    </a-col>
-                  </a-row>
-                </template>
-              </div>
+                        <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
+                          <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
+                            <span v-if="field.render" v-html="field.render({ record: item, index })" />
+                            <span v-else>{{ item[field.dataIndex] }}</span>
+                          </a-tooltip>
+                          <template v-else>
+                            <span v-if="field.render" v-html="field.render({ record: item, index })" />
+                            <span v-else>{{ item[field.dataIndex] }}</span>
+                          </template>
+                        </slot>
+                      </a-col>
+                    </a-row>
+                  </template>
+                </div>
+              </template>
+              <!-- 内容-自定义槽 -->
+              <template v-else>
+                <slot name="card" :record="item" :index="index" :key="item[key]" />
+              </template>
+            </a-card>
+            <!-- 右键菜单 -->
+            <template v-if="contextMenu" #content>
+              <slot name="contextMenu" :record="item" :index="index" :key="item[key]" />
             </template>
-            <!-- 内容-自定义槽 -->
-            <template v-else>
-              <slot name="card" :record="item" :index="index" :key="item[key]" />
-            </template>
-          </a-card>
+          </a-dropdown>
         </a-col>
         <!-- 添加卡片 -->
         <a-col v-permission="addPermission"
@@ -240,7 +252,7 @@
   });
 
   const emits = defineEmits(['add', 'update:searchValue', 'search',
-    'reset', 'pageChange']);
+    'reset', 'pageChange', 'click', 'dblclick']);
 
   const props = defineProps({
     key: {
@@ -260,6 +272,11 @@
       default: () => []
     },
     cardHeight: Number,
+    cardClass: String,
+    contextMenu: {
+      type: Boolean,
+      default: () => true
+    },
     filterCount: {
       type: Number,
       default: () => 0
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
index 1b49f0cc..9d2a604c 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
@@ -25,6 +25,12 @@
         <a-dropdown trigger="hover">
           <icon-more class="card-extra-icon" />
           <template #content>
+            <!-- 详情 -->
+            <a-doption v-permission="['asset:host-key:detail', 'asset:host-key:update']"
+                       @click="emits('openView', record)">
+              <icon-list />
+              详情
+            </a-doption>
             <!-- 修改 -->
             <a-doption v-permission="['asset:host-key:update']"
                        @click="emits('openUpdate', record)">
@@ -42,6 +48,28 @@
         </a-dropdown>
       </a-space>
     </template>
+    <!-- 右键菜单 -->
+    <template #contextMenu="{ record }">
+      <!-- 详情 -->
+      <a-doption v-permission="['asset:host-key:detail', 'asset:host-key:update']"
+                 @click="emits('openView', record)">
+        <icon-list />
+        详情
+      </a-doption>
+      <!-- 修改 -->
+      <a-doption v-permission="['asset:host-key:update']"
+                 @click="emits('openUpdate', record)">
+        <icon-edit />
+        修改
+      </a-doption>
+      <!-- 删除 -->
+      <a-doption v-permission="['asset:host-key:delete']"
+                 class="span-red"
+                 @click="deleteRow(record.id)">
+        <icon-delete />
+        删除
+      </a-doption>
+    </template>
   </card-list>
 </template>
 
@@ -58,31 +86,39 @@
   import { resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
   import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
-  import { Message } from '@arco-design/web-vue';
+  import { Message, Modal } from '@arco-design/web-vue';
 
   const { loading, setLoading } = useLoading();
   const cardColLayout = useColLayout();
   const pagination = usePagination();
   const list = ref<HostKeyQueryResponse[]>([]);
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
   const formModel = reactive<HostKeyQueryRequest>({
     searchValue: undefined,
   });
 
   // 删除当前行
-  const deleteRow = async (id: number) => {
-    try {
-      setLoading(true);
-      // 调用删除接口
-      await deleteHostKey(id);
-      Message.success('删除成功');
-      // 重新加载数据
-      await fetchCardData();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
+  const deleteRow = (id: number) => {
+    Modal.confirm({
+      title: '删除前确认?',
+      titleAlign: 'start',
+      content: '确定要删除这条记录吗?',
+      okText: '删除',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          // 调用删除接口
+          await deleteHostKey(id);
+          Message.success('删除成功');
+          // 重新加载数据
+          await fetchCardData();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
   };
 
   // 添加后回调
@@ -129,4 +165,5 @@
 </script>
 
 <style scoped lang="less">
+
 </style>
diff --git a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
index eb05ab3a..d1b525a5 100644
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
+++ b/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
@@ -55,12 +55,12 @@
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
-          <!-- 查看 -->
+          <!-- 详情 -->
           <a-button type="text"
                     size="mini"
                     v-permission="['asset:host-key:detail', 'asset:host-key:update']"
                     @click="emits('openView', record)">
-            查看
+            详情
           </a-button>
           <!-- 修改 -->
           <a-button type="text"
diff --git a/orion-ops-ui/src/views/asset/host-key/index.vue b/orion-ops-ui/src/views/asset/host-key/index.vue
index ca0581fb..4c50ec52 100644
--- a/orion-ops-ui/src/views/asset/host-key/index.vue
+++ b/orion-ops-ui/src/views/asset/host-key/index.vue
@@ -3,11 +3,13 @@
     <!-- 列表-表格 -->
     <host-key-table v-if="renderTable"
                     ref="table"
+                    @openView="(e) => drawer.openView(e)"
                     @openAdd="() => drawer.openAdd()"
                     @openUpdate="(e) => drawer.openUpdate(e)" />
     <!-- 列表-卡片 -->
     <host-key-card-list v-else
                         ref="card"
+                        @openView="(e) => drawer.openView(e)"
                         @openAdd="() => drawer.openAdd()"
                         @openUpdate="(e) => drawer.openUpdate(e)" />
     <!-- 添加修改模态框 -->
diff --git a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
index ff34a98b..273df03c 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
@@ -12,8 +12,8 @@
              :add-permission="['asset:host:create']"
              @add="emits('openAdd')"
              @reset="reset"
-             @search="fetchListData"
-             @page-change="fetchListData">
+             @search="fetchCardData"
+             @page-change="fetchCardData">
     <!-- 标题 -->
     <template #title="{ record }">
       {{ record.name }}
@@ -70,6 +70,28 @@
         </a-dropdown>
       </a-space>
     </template>
+    <!-- 右键菜单 -->
+    <template #contextMenu="{ record }">
+      <!-- 修改 -->
+      <a-doption v-permission="['asset:host:update']"
+                 @click="emits('openUpdate', record)">
+        <icon-edit />
+        修改
+      </a-doption>
+      <!-- 配置 -->
+      <a-doption v-permission="['asset:host:update-config']"
+                 @click="emits('openUpdateConfig', record)">
+        <icon-settings />
+        配置
+      </a-doption>
+      <!-- 删除 -->
+      <a-doption v-permission="['asset:host:delete']"
+                 class="span-red"
+                 @click="deleteRow(record.id)">
+        <icon-delete />
+        删除
+      </a-doption>
+    </template>
     <!-- 过滤条件 -->
     <template #filterContent>
       <a-form :model="formModel"
@@ -126,7 +148,7 @@
   import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
   import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
-  import { Message } from '@arco-design/web-vue';
+  import { Message, Modal } from '@arco-design/web-vue';
   import { tagColor } from '@/views/asset/host/types/const';
   import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
   import useCopy from '@/hooks/copy';
@@ -155,28 +177,36 @@
   });
 
   // 删除当前行
-  const deleteRow = async (id: number) => {
-    try {
-      setLoading(true);
-      // 调用删除接口
-      await deleteHost(id);
-      Message.success('删除成功');
-      // 重新加载数据
-      await fetchListData();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
+  const deleteRow = (id: number) => {
+    Modal.confirm({
+      title: '删除前确认?',
+      titleAlign: 'start',
+      content: '确定要删除这条记录吗?',
+      okText: '删除',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          // 调用删除接口
+          await deleteHost(id);
+          Message.success('删除成功');
+          // 重新加载数据
+          await fetchCardData();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
   };
 
   // 添加后回调
   const addedCallback = () => {
-    fetchListData();
+    fetchCardData();
   };
 
   // 更新后回调
   const updatedCallback = () => {
-    fetchListData();
+    fetchCardData();
   };
 
   defineExpose({
@@ -186,11 +216,11 @@
   // 重置条件
   const reset = () => {
     resetObject(formModel, ['extra']);
-    fetchListData();
+    fetchCardData();
   };
 
   // 加载数据
-  const doFetchListData = async (request: HostQueryRequest) => {
+  const doFetchCardData = async (request: HostQueryRequest) => {
     try {
       setLoading(true);
       const { data } = await getHostPage(request);
@@ -205,10 +235,10 @@
   };
 
   // 切换页码
-  const fetchListData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchListData({ page, limit, ...form });
+  const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchCardData({ page, limit, ...form });
   };
-  fetchListData();
+  fetchCardData();
 
 </script>