test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(系统设置): 系统_插件管理_样式和国际化完善

This commit is contained in:
xinxin.wu 2023-07-13 14:09:25 +08:00 committed by fit2-zhao
parent 549174c43d
commit 1e91bce309
13 changed files with 147 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/components.d.ts vendored
View File

@ -5,11 +5,11 @@
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {};
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'];
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}

158
frontend/src/mock/system/pluginManger.ts
View File

@ -73,77 +73,18 @@ const getPluginList = () => {
enable: true,
},
],
children: [
steps: [
{
id: '1-1-1',
name: '插件1-1',
describe: '插件1-1',
enable: true,
createTime: 'number',
updateTime: 'number',
jarPackage: 'string',
version: 'string',
applicationScene: 'string',
createUser: 'string',
updateUser: 'string',
organizationList: [
{
id: 'string',
num: 0,
name: '组织 1',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
{
id: 'string',
num: 0,
name: '组织 2',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
{
id: 'string',
num: 0,
name: '组织 3',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
{
id: 'string',
num: 0,
name: '组织 4',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
],
name: '步骤一',
},
{
id: '1-1-2',
name: '步骤二',
},
{
id: '1-1-3',
name: '步骤三',
},
],
},
@ -217,77 +158,18 @@ const getPluginList = () => {
enable: true,
},
],
children: [
steps: [
{
id: '2-1-1',
name: '插件2-1',
describe: '插件2-1',
enable: true,
createTime: 'number',
updateTime: 'number',
jarPackage: 'string',
version: 'string',
applicationScene: 'string',
createUser: 'string',
updateUser: 'string',
organizationList: [
{
id: 'string',
num: 0,
name: '组织 1',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
{
id: 'string',
num: 0,
name: '组织 2',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
{
id: 'string',
num: 0,
name: '组织 3',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
{
id: 'string',
num: 0,
name: '组织 4',
description: 'blabla',
createTime: 0,
updateTime: 0,
createUser: 'string',
updateUser: 'string',
deleted: true,
deleteUser: 'string',
deleteTime: 0,
enable: true,
},
],
name: '步骤2-一',
},
{
id: '2-1-2',
name: '步骤2-二',
},
{
id: '2-1-3',
name: '步骤3-三',
},
],
},

2
frontend/src/models/system/plugin.ts
View File

@ -27,7 +27,7 @@ export interface PluginItem {
createUser: string;
updateUser: string;
organizationList: organizationList;
children?: PluginItem[];
steps?: string[];
}
export type PluginList = PluginItem[];

33
frontend/src/views/organization/member/components/addMemberModal.vue
View File

@ -1,15 +1,15 @@
<template>
<a-modal
v-model:visible="memberVisible"
v-model:visible="dialogVisible"
title-align="start"
width="680px"
class="ms-modal-form ms-modal-medium"
:ok-text="t('organization.member.Save')"
@ok="handleOK"
@cancel="handleCancel"
>
<template #title> {{ t('organization.member.addMember') }} </template>
<div class="form">
<a-form :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
<a-form :model="form" size="large" layout="vertical">
<a-form-item
v-model="form.members"
field="members"
@ -43,18 +43,21 @@
</template>
<script setup lang="ts">
import { ref, watchEffect, reactive } from 'vue';
import { ref, reactive } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import type { AddMemberForm } from '@/models/system/member';
import { useDialog } from '@/hooks/useDialog';
const { t } = useI18n();
const emit = defineEmits<{
(e: 'cancel'): void;
}>();
const props = defineProps<{
visible: boolean;
title?: string;
}>();
const emits = defineEmits<{
(event: 'update:visible', visible: boolean): void;
(event: 'close'): void;
}>();
const { dialogVisible } = useDialog(props, emits);
const userGroupOptions = ref([
{
label: 'Beijing',
@ -85,22 +88,16 @@
},
]);
const memberVisible = ref<boolean>(props.visible);
const form = reactive<AddMemberForm>({
userGroups: '',
members: [],
});
watchEffect(() => {
memberVisible.value = props.visible;
});
const handleOK = () => {
// eslint-disable-next-line no-use-before-define
handleCancel();
const handleCancel = () => {
emits('close');
};
const handleCancel = () => {
emit('cancel');
const handleOK = () => {
handleCancel();
};
</script>

22
frontend/src/views/organization/member/index.vue
View File

@ -39,15 +39,16 @@
</template>
<template #action="{ record }">
<MsButton @click="editMember(record)">{{ t('organization.member.edit') }}</MsButton>
<MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
</template>
</ms-base-table>
<add-member-modal :visible="addMemberVisible" @cancel="addMemberVisible = false" />
<!-- <add-member-modal :visible="addMemberVisible" @cancel="addMemberVisible = false" /> -->
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onMounted, ref, reactive } from 'vue';
import { useI18n } from '@/hooks/useI18n';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import MsButton from '@/components/pure/ms-button/index.vue';
@ -57,6 +58,7 @@
import { getMemberList } from '@/api/modules/system/member';
import type { MsTableColumn } from '@/components/pure/ms-table/type';
import useModal from '@/hooks/useModal';
import { useCommandComponent } from '@/hooks/useCommandComponent';
const columns: MsTableColumn = [
{
@ -93,7 +95,7 @@
title: 'organization.member.tableColunmActions',
slotName: 'action',
fixed: 'right',
width: 80,
width: 110,
},
];
@ -117,8 +119,14 @@
});
const keyword = ref('');
const addMemberVisible = ref<boolean>(false);
const addMemberDialog = useCommandComponent(addMemberModal);
const addMembersOptions = reactive({
title: '添加成员',
visible: false,
onClose: () => {
addMemberDialog.close();
},
});
onMounted(async () => {
setKeyword(keyword.value);
@ -150,12 +158,14 @@
hideCancel: false,
});
}
function editMember(record: any) {}
const tableSelected = ref<(string | number)[]>([]);
function handleTableSelect(selectArr: (string | number)[]) {
tableSelected.value = selectArr;
}
function AddMember() {
addMemberVisible.value = true;
addMembersOptions.visible = true;
addMemberDialog(addMembersOptions);
}
</script>

1
frontend/src/views/organization/member/locale/en-US.ts
View File

@ -2,6 +2,7 @@ export default {
'organization.member.addMember': 'Add Member',
'organization.member.searchMember': 'Search by name or email address',
'organization.member.remove': 'Remove',
'organization.member.edit': 'Edit',
'organization.member.batchActionAddProject': 'Add to project',
'organization.member.batchActionAddUsergroup': 'Add to usergroup',
'organization.member.tableEnable': 'Enabled',

1
frontend/src/views/organization/member/locale/zh-CN.ts
View File

@ -2,6 +2,7 @@ export default {
'organization.member.addMember': '添加成员',
'organization.member.searchMember': '通过名称或邮箱搜索搜索',
'organization.member.remove': '移除',
'organization.member.edit': '编辑',
'organization.member.batchActionAddProject': '添加至项目',
'organization.member.batchActionAddUsergroup': '添加至用户组',
'organization.member.tableEnable': '正常',

42
frontend/src/views/system/pluginManager/components/pluginTable.vue
View File

@ -40,6 +40,10 @@
<MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
</template>
</ms-base-table>
<div class="mt-4 text-sm text-slate-500"
>共<span class="mx-2">{{ 101 }}</span
>项数据</div
>
<UploadModel :visible="uploadVisible" @cancel="uploadVisible = false" @upload="uploadPlugin" @success="okHandler" />
<UpdatePluginModal ref="updateModalRef" :visible="updateVisible" @cancel="updateVisible = false" />
</div>
@ -60,6 +64,8 @@
import uploadSuccessModal from './uploadSuccessModal.vue';
import sceneChangeModal from './sceneChangeModal.vue';
import { useCommandComponent } from '@/hooks/useCommandComponent';
import useModal from '@/hooks/useModal';
import { Message } from '@arco-design/web-vue';
const { t } = useI18n();
export type Options = {
@ -123,10 +129,13 @@
];
const { propsRes, propsEvent, loadList, setKeyword } = useTable(getPluginList, {
columns,
scroll: { y: 'auto', x: 1800 },
selectable: false,
showSelectAll: false,
'scroll': { y: 'auto', x: 1800 },
'selectable': false,
'showSelectAll': false,
'pagination': false,
'virtual-list-props': { height: 380 },
});
const { openModal } = useModal();
const keyword = ref('');
const scene = ref('1');
const sceneList = ref([
@ -146,7 +155,28 @@
setKeyword(keyword.value);
await loadList();
}
function deletePlugin() {}
function deletePlugin(record: any) {
openModal({
type: 'warning',
title: t('system.plugin.deletePluginTip', { name: record.name }),
content: '',
okText: t('system.plugin.deletePluginConfirm'),
cancelText: t('system.plugin.pluginCancel'),
okButtonProps: {
status: 'danger',
},
onBeforeOk: async () => {
try {
Message.success(t('system.plugin.deletePluginSuccess'));
return true;
} catch (error) {
console.log(error);
return false;
}
},
hideCancel: false,
});
}
/**
* 处理表格更多按钮事件
* @param item
@ -154,7 +184,7 @@
function handleSelect(item: ActionsItem, record: any) {
switch (item.eventTag) {
case 'delete':
deletePlugin();
deletePlugin(record);
break;
default:
break;
@ -191,7 +221,7 @@
const okHandler = () => {
dialogOpen(uploadSuccessOptions);
};
const changeScene = () => {
const changeScene = (record: any) => {
sceneChangeOptions.visible = true;
mySceneChangeDialog(sceneChangeOptions);
};

15
frontend/src/views/system/pluginManager/components/sceneChangeModal.vue
View File

@ -1,8 +1,8 @@
<template>
<a-modal v-model:visible="dialogVisible" class="ms-modal-form ms-modal-small" title-align="start">
<a-modal v-model:visible="dialogVisible" class="ms-modal-form ms-modal-medium" title-align="start">
<template #title> {{ title }} </template>
<a-alert type="warning" :closable="true">
<div> 插件内容与应用场景不一致时插件功能将无法启用，请谨慎操作！ </div>
<div>{{ t('system.plugin.changeSceneTips') }}</div>
</a-alert>
<div class="mt-6 flex flex-col">
<div
@ -22,13 +22,19 @@
v-show="item.isSelected"
size="small"
class="ml-[4px] border-[rgb(var(--primary-4))] bg-transparent px-1 text-xs !text-[rgb(var(--primary-4))]"
>当前场景</a-tag
>{{ t('system.plugin.currentScene') }}</a-tag
>
</div>
<div class="text-sm">{{ t(item.description) }}</div>
</div>
</div>
</div>
<template #footer>
<a-button type="secondary" @click="emits('close')">{{ t('system.plugin.pluginCancel') }}</a-button>
<a-button type="primary" @click="handelOk">
{{ t('system.plugin.pluginConfirm') }}
</a-button>
</template>
</a-modal>
</template>
@ -69,6 +75,9 @@
});
currentItem.isSelected = true;
};
const handelOk = () => {
emits('close');
};
</script>
<style scoped lang="less">

37
frontend/src/views/system/pluginManager/components/updatePluginModal.vue
View File

@ -1,27 +1,15 @@
<template>
<a-modal
v-model:visible="updateVisible"
class="ms-modal-form ms-modal-small"
title-align="start"
width="480px"
@ok="handleOk"
@cancel="handleCancel"
>
<a-modal v-model:visible="updateVisible" width="680px" title-align="start" class="ms-modal-form ms-modal-medium">
<template #title> {{ t('system.plugin.updateTitle', { name: title }) }}</template>
<a-row class="grid-demo">
<a-form :model="form" size="small" :style="{ width: '600px' }" layout="vertical">
<div class="form">
<a-form :model="form" layout="vertical">
<!-- <a-col :span="24"> -->
<a-form-item field="pluginName" :label="t('system.plugin.name')" asterisk-position="end">
<a-input
v-model="form.pluginName"
size="small"
:placeholder="t('system.plugin.defaultJarNameTip')"
allow-clear
/>
<a-input v-model="form.pluginName" :placeholder="t('system.plugin.defaultJarNameTip')" allow-clear />
</a-form-item>
<!-- </a-col> -->
<a-form-item field="organize" :label="t('system.plugin.appOrganize')" asterisk-position="end">
<a-radio-group v-model="form.organize" size="small">
<a-radio-group v-model="form.organize">
<a-radio value="1">全部组织</a-radio>
<a-radio value="2">指定组织</a-radio>
</a-radio-group>
@ -38,15 +26,16 @@
</a-select>
</a-form-item>
<a-form-item field="describe" :label="t('system.plugin.description')" asterisk-position="end">
<a-textarea
v-model="form.describe"
size="small"
:placeholder="t('system.plugin.pluginDescription')"
allow-clear
/>
<a-textarea v-model="form.describe" :placeholder="t('system.plugin.pluginDescription')" allow-clear />
</a-form-item>
</a-form>
</a-row>
</div>
<template #footer>
<a-button type="secondary" @click="emit('cancel')">{{ t('system.plugin.pluginCancel') }}</a-button>
<a-button type="primary" @click="handleOk">
{{ t('system.plugin.pluginConfirm') }}
</a-button>
</template>
</a-modal>
</template>

10
frontend/src/views/system/pluginManager/index.vue
View File

@ -3,9 +3,10 @@
<div>
<a-alert type="info" :closable="true">
<div>
MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请
<a class="mx-1" href="javascript:;">查看表格</a>更多开源插件，请在此下载
<a class="mx-1" href="javascript:;">去下载 </a>
{{ t('system.plugin.alertDescribe') }}
<a class="mx-1" href="javascript:;">{{ t('system.plugin.viewTable') }}</a
>{{ t('system.plugin.downAddress') }}
<a class="mx-1" href="javascript:;">{{ t('system.plugin.goDownload') }} </a>
</div>
</a-alert>
<div class="mt-4">
@ -16,6 +17,9 @@
<script setup lang="ts">
import pluginTable from './components/pluginTable.vue';
import { useI18n } from '@/hooks/useI18n';
const { t } = useI18n();
</script>
<style scoped>

16
frontend/src/views/system/pluginManager/locale/en-US.ts
View File

@ -31,12 +31,17 @@ export default {
'system.plugin.projectMangerDescribe': 'The project management platform class recommends choosing project management',
'system.resourcePool.disablePoolConfirm': 'Confirm',
'system.resourcePool.disablePoolCancel': 'Cancel',
'system.resourcePool.disablePoolSuccess': 'Disabled successfully',
'system.resourcePool.deletePoolTip': 'Are you sure to delete the `{name}` resource?',
'system.plugin.deletePluginSuccess': 'Delete successfully',
'system.plugin.alertDescribe':
'The MeterSphere v2.10 LTS release supports plug-ins of DevOps、 API imports、 requests、 project management、 protocols、 and other types',
'system.plugin.viewTable': 'View the form',
'system.plugin.downAddress': 'More open source plug-ins can be downloaded here',
'system.plugin.goDownload': 'downloads',
'system.plugin.deletePluginTip': 'Are you sure to delete the `{name}` plugin?',
'system.resourcePool.deletePoolContentUsed':
'This resource pool has been used, and related tests will stop immediately after deletion, please operate with caution!',
'system.resourcePool.deletePoolContentUnuse': 'This resource pool is not in use. Are you sure to delete it?',
'system.resourcePool.deletePoolConfirm': 'Confirm',
'system.plugin.deletePluginConfirm': 'Confirm',
'system.plugin.pluginConfirm': 'Confirm',
'system.plugin.pluginCancel': 'Cancel',
'system.plugin.pluginPreStep': 'Previous Step',
@ -52,8 +57,11 @@ export default {
'system.plugin.ServiceIntegration': 'Service Integration',
'system.plugin.platformAuthentication': 'Configuration platform authentication information can be effective',
'system.plugin.continueUpload': 'Continue Upload',
'system.plugin.backPluginList': 'Back to list of plugins',
'system.plugin.backPluginList': 'Back',
'system.plugin.nextNoTips': 'No more tips next time',
'system.plugin.changeSceneTips':
'Plug-in functionality can not be enabled if the plug-in content is inconsistent with the application scenario. Please be careful!',
'system.plugin.currentScene': 'Current Scene',
'system.resourcePool.deletePoolSuccess': 'Deleted successfully',
'system.resourcePool.detailDesc': 'Description',
'system.resourcePool.detailUrl': 'Current site URL',

13
frontend/src/views/system/pluginManager/locale/zh-CN.ts
View File

@ -32,10 +32,10 @@ export default {
'system.resourcePool.disablePoolConfirm': '确认禁用',
'system.resourcePool.disablePoolCancel': '取消',
'system.resourcePool.disablePoolSuccess': '禁用成功',
'system.resourcePool.deletePoolTip': '确认删除 `{name}` 这个资源吗？',
'system.plugin.deletePluginTip': '确认删除 `{name}` 这个插件吗？',
'system.resourcePool.deletePoolContentUsed': '该资源池已被使用，删除后相关测试会立即停止，请谨慎操作！',
'system.resourcePool.deletePoolContentUnuse': '该资源池未被使用，是否确认删除？',
'system.resourcePool.deletePoolConfirm': '确认删除',
'system.plugin.deletePluginConfirm': '确认删除',
'system.plugin.pluginConfirm': '确认',
'system.plugin.pluginCancel': '取消',
'system.plugin.pluginPreStep': '上一步',
@ -53,7 +53,14 @@ export default {
'system.plugin.continueUpload': '继续上传',
'system.plugin.backPluginList': '回到插件列表',
'system.plugin.nextNoTips': '下次不再提示',
'system.resourcePool.deletePoolSuccess': '删除成功',
'system.plugin.changeSceneTips': '插件内容与应用场景不一致时插件功能将无法启用，请谨慎操作！',
'system.plugin.currentScene': '当前场景',
'system.plugin.deletePluginSuccess': '删除成功',
'system.plugin.alertDescribe':
'MeterSphereV2.10LTS版本支持DevOps、API导入、请求、项目管理、协议类型的插件，具体支持插件请',
'system.plugin.viewTable': '查看表格',
'system.plugin.downAddress': '更多开源插件，请在此下载',
'system.plugin.goDownload': '去下载',
'system.resourcePool.detailDesc': '描述',
'system.resourcePool.detailUrl': '当前站点 URL',
'system.resourcePool.detailRange': '可用范围',