添加卡片右键菜单和点击事件.

2023-10-08 00:19:34 +08:00
parent 34ef997514
commit 1036713f74
6 changed files with 217 additions and 106 deletions
--- 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>
--- 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"
--- 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)" />
    <!-- 添加修改模态框 -->
--- 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>