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

2023-10-08 00:19:34 +08:00
parent 34ef997514
commit 1036713f74
6 changed files with 217 additions and 106 deletions
--- 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>
--- 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
--- 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>