manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lijiahangmax
2023-10-08 00:19:34 +08:00
parent 34ef997514
commit 1036713f74
6 changed files with 217 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
View File

@@ -42,6 +42,22 @@
</a-dropdown> </a-dropdown>
</a-space> </a-space>
</template> </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> <template #filterContent>
<a-form :model="formModel" <a-form :model="formModel"
@@ -54,7 +70,7 @@
:wrapper-col-props="{ span: 18 }"> :wrapper-col-props="{ span: 18 }">
#foreach($field in ${table.fields}) #foreach($field in ${table.fields})
<!-- $field.comment --> <!-- $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})}) #if(${vue.enums.containsKey(${field.propertyName})})
<a-select v-model="formModel.${field.propertyName}" <a-select v-model="formModel.${field.propertyName}"
:options="toOptions(${vue.enums.get(${field.propertyName}).className})" :options="toOptions(${vue.enums.get(${field.propertyName}).className})"
@@ -96,13 +112,13 @@
import { objectTruthKeyCount, resetObject } from '@/utils'; import { objectTruthKeyCount, resetObject } from '@/utils';
import fieldConfig from '../types/card.fields'; 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 { 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 { loading, setLoading } = useLoading();
const cardColLayout = useColLayout(); const cardColLayout = useColLayout();
const pagination = usePagination(); const pagination = usePagination();
const list = ref<${vue.featureEntity}QueryResponse[]>([]); const list = ref<${vue.featureEntity}QueryResponse[]>([]);
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']); const emits = defineEmits(['openAdd', 'openUpdate']);
const formModel = reactive<${vue.featureEntity}QueryRequest>({ const formModel = reactive<${vue.featureEntity}QueryRequest>({
searchValue: undefined, searchValue: undefined,
@@ -117,7 +133,13 @@
}); });
// 删除当前行 // 删除当前行
const deleteRow = async (id: number) => { const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认?',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',
onOk: async () => {
try { try {
setLoading(true); setLoading(true);
// 调用删除接口 // 调用删除接口
@@ -129,6 +151,8 @@
} finally { } finally {
setLoading(false); setLoading(false);
} }
}
});
}; };
// 添加后回调 // 添加后回调
@@ -175,4 +199,5 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
</style> </style>

31
orion-ops-ui/src/components/card/list/index.vue
View File

@@ -114,15 +114,22 @@
:class="{ :class="{
'disabled-col': item.disabled === true 'disabled-col': item.disabled === true
}"> }">
<a-card :class="{ <!-- 右键菜单 -->
'general-card': true, <a-dropdown trigger="contextMenu" alignPoint>
'card-list-item': true, <!-- 卡片 -->
'card-list-item-disabled': item.disabled === true <a-card :class="[
}" 'general-card',
'card-list-item',
item.disabled === true ? 'card-list-item-disabled' : undefined,
!!cardClass ? cardClass : undefined
]"
:style="{ height: `${cardHeight}px` }" :style="{ height: `${cardHeight}px` }"
:body-style="{ height: 'calc(100% - 58px)' }" :body-style="{ height: 'calc(100% - 58px)' }"
:bordered="false" :bordered="false"
:hoverable="true"> :hoverable="true"
@contextmenu.prevent="() => false"
@click="emits('click',item, index)"
@dblclick="emits('dblclick',item, index)">
<!-- 标题 --> <!-- 标题 -->
<template #title> <template #title>
<slot name="title" :record="item" :index="index" :key="item[key]" /> <slot name="title" :record="item" :index="index" :key="item[key]" />
@@ -181,6 +188,11 @@
<slot name="card" :record="item" :index="index" :key="item[key]" /> <slot name="card" :record="item" :index="index" :key="item[key]" />
</template> </template>
</a-card> </a-card>
<!-- 右键菜单 -->
<template v-if="contextMenu" #content>
<slot name="contextMenu" :record="item" :index="index" :key="item[key]" />
</template>
</a-dropdown>
</a-col> </a-col>
<!-- 添加卡片 --> <!-- 添加卡片 -->
<a-col v-permission="addPermission" <a-col v-permission="addPermission"
@@ -240,7 +252,7 @@
}); });
const emits = defineEmits(['add', 'update:searchValue', 'search', const emits = defineEmits(['add', 'update:searchValue', 'search',
'reset', 'pageChange']); 'reset', 'pageChange', 'click', 'dblclick']);
const props = defineProps({ const props = defineProps({
key: { key: {
@@ -260,6 +272,11 @@
default: () => [] default: () => []
}, },
cardHeight: Number, cardHeight: Number,
cardClass: String,
contextMenu: {
type: Boolean,
default: () => true
},
filterCount: { filterCount: {
type: Number, type: Number,
default: () => 0 default: () => 0

43
orion-ops-ui/src/views/asset/host-key/components/host-key-card-list.vue
View File

@@ -25,6 +25,12 @@
<a-dropdown trigger="hover"> <a-dropdown trigger="hover">
<icon-more class="card-extra-icon" /> <icon-more class="card-extra-icon" />
<template #content> <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']" <a-doption v-permission="['asset:host-key:update']"
@click="emits('openUpdate', record)"> @click="emits('openUpdate', record)">
@@ -42,6 +48,28 @@
</a-dropdown> </a-dropdown>
</a-space> </a-space>
</template> </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> </card-list>
</template> </template>
@@ -58,20 +86,26 @@
import { resetObject } from '@/utils'; import { resetObject } from '@/utils';
import fieldConfig from '../types/card.fields'; import fieldConfig from '../types/card.fields';
import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key'; 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 { loading, setLoading } = useLoading();
const cardColLayout = useColLayout(); const cardColLayout = useColLayout();
const pagination = usePagination(); const pagination = usePagination();
const list = ref<HostKeyQueryResponse[]>([]); const list = ref<HostKeyQueryResponse[]>([]);
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']); const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
const formModel = reactive<HostKeyQueryRequest>({ const formModel = reactive<HostKeyQueryRequest>({
searchValue: undefined, searchValue: undefined,
}); });
// 删除当前行 // 删除当前行
const deleteRow = async (id: number) => { const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认?',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',
onOk: async () => {
try { try {
setLoading(true); setLoading(true);
// 调用删除接口 // 调用删除接口
@@ -83,6 +117,8 @@
} finally { } finally {
setLoading(false); setLoading(false);
} }
}
});
}; };
// 添加后回调 // 添加后回调
@@ -129,4 +165,5 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
</style> </style>

4
orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
View File

@@ -55,12 +55,12 @@
<!-- 操作 --> <!-- 操作 -->
<template #handle="{ record }"> <template #handle="{ record }">
<div class="table-handle-wrapper"> <div class="table-handle-wrapper">
<!-- 查看 --> <!-- 详情 -->
<a-button type="text" <a-button type="text"
size="mini" size="mini"
v-permission="['asset:host-key:detail', 'asset:host-key:update']" v-permission="['asset:host-key:detail', 'asset:host-key:update']"
@click="emits('openView', record)"> @click="emits('openView', record)">
查看 详情
</a-button> </a-button>
<!-- 修改 --> <!-- 修改 -->
<a-button type="text" <a-button type="text"

2
orion-ops-ui/src/views/asset/host-key/index.vue
View File

@@ -3,11 +3,13 @@
<!-- 列表-表格 --> <!-- 列表-表格 -->
<host-key-table v-if="renderTable" <host-key-table v-if="renderTable"
ref="table" ref="table"
@openView="(e) => drawer.openView(e)"
@openAdd="() => drawer.openAdd()" @openAdd="() => drawer.openAdd()"
@openUpdate="(e) => drawer.openUpdate(e)" /> @openUpdate="(e) => drawer.openUpdate(e)" />
<!-- 列表-卡片 --> <!-- 列表-卡片 -->
<host-key-card-list v-else <host-key-card-list v-else
ref="card" ref="card"
@openView="(e) => drawer.openView(e)"
@openAdd="() => drawer.openAdd()" @openAdd="() => drawer.openAdd()"
@openUpdate="(e) => drawer.openUpdate(e)" /> @openUpdate="(e) => drawer.openUpdate(e)" />
<!-- 添加修改模态框 --> <!-- 添加修改模态框 -->

54
orion-ops-ui/src/views/asset/host/components/host-card-list.vue
View File

@@ -12,8 +12,8 @@
:add-permission="['asset:host:create']" :add-permission="['asset:host:create']"
@add="emits('openAdd')" @add="emits('openAdd')"
@reset="reset" @reset="reset"
@search="fetchListData" @search="fetchCardData"
@page-change="fetchListData"> @page-change="fetchCardData">
<!-- 标题 --> <!-- 标题 -->
<template #title="{ record }"> <template #title="{ record }">
{{ record.name }} {{ record.name }}
@@ -70,6 +70,28 @@
</a-dropdown> </a-dropdown>
</a-space> </a-space>
</template> </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> <template #filterContent>
<a-form :model="formModel" <a-form :model="formModel"
@@ -126,7 +148,7 @@
import { dataColor, objectTruthKeyCount, resetObject } from '@/utils'; import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
import fieldConfig from '../types/card.fields'; import fieldConfig from '../types/card.fields';
import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host'; 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 { tagColor } from '@/views/asset/host/types/const';
import TagMultiSelector from '@/components/tag/tag-multi-selector.vue'; import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
import useCopy from '@/hooks/copy'; import useCopy from '@/hooks/copy';
@@ -155,28 +177,36 @@
}); });
// 删除当前行 // 删除当前行
const deleteRow = async (id: number) => { const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认?',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',
onOk: async () => {
try { try {
setLoading(true); setLoading(true);
// 调用删除接口 // 调用删除接口
await deleteHost(id); await deleteHost(id);
Message.success('删除成功'); Message.success('删除成功');
// 重新加载数据 // 重新加载数据
await fetchListData(); await fetchCardData();
} catch (e) { } catch (e) {
} finally { } finally {
setLoading(false); setLoading(false);
} }
}
});
}; };
// 添加后回调 // 添加后回调
const addedCallback = () => { const addedCallback = () => {
fetchListData(); fetchCardData();
}; };
// 更新后回调 // 更新后回调
const updatedCallback = () => { const updatedCallback = () => {
fetchListData(); fetchCardData();
}; };
defineExpose({ defineExpose({
@@ -186,11 +216,11 @@
// 重置条件 // 重置条件
const reset = () => { const reset = () => {
resetObject(formModel, ['extra']); resetObject(formModel, ['extra']);
fetchListData(); fetchCardData();
}; };
// 加载数据 // 加载数据
const doFetchListData = async (request: HostQueryRequest) => { const doFetchCardData = async (request: HostQueryRequest) => {
try { try {
setLoading(true); setLoading(true);
const { data } = await getHostPage(request); const { data } = await getHostPage(request);
@@ -205,10 +235,10 @@
}; };
// 切换页码 // 切换页码
const fetchListData = (page = 1, limit = pagination.pageSize, form = formModel) => { const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
doFetchListData({ page, limit, ...form }); doFetchCardData({ page, limit, ...form });
}; };
fetchListData(); fetchCardData();
</script> </script>