mirror of
https://gitee.com/dromara/Jpom.git
synced 2024-12-02 20:08:40 +08:00
修改机器管理
This commit is contained in:
miracle
parent
a0e4718de5
commit
eb59f5154c
@ -71,6 +71,10 @@ provide('reload', reload)
|
||||
.ant-spin-text {
|
||||
text-shadow: 0 0 black !important;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,24 +1,9 @@
|
||||
<template>
|
||||
<div class="full-content">
|
||||
<!-- 数据表格 -->
|
||||
<a-table
|
||||
:data-source="list"
|
||||
:columns="columns"
|
||||
size="middle"
|
||||
:pagination="pagination"
|
||||
bordered
|
||||
@change="changePage"
|
||||
:rowKey="(record, index) => index"
|
||||
>
|
||||
<template #title>
|
||||
<div class="search-wrapper">
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model="listQuery['%name%']"
|
||||
@pressEnter="loadData"
|
||||
placeholder="工作空间名称"
|
||||
allowClear
|
||||
class="search-input-item"
|
||||
/>
|
||||
<a-input v-model="listQuery['%name%']" @pressEnter="loadData" placeholder="工作空间名称" allowClear
|
||||
class="search-input-item" />
|
||||
|
||||
<a-tooltip title="按住 Ctr 或者 Alt/Option 键点击按钮快速回到第一页">
|
||||
<a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
|
||||
@ -34,14 +19,20 @@
|
||||
<question-circle-filled />
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 数据表格 -->
|
||||
<a-table :data-source="list" :columns="columns" size="middle" :pagination="pagination" bordered @change="changePage"
|
||||
rowKey="id">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
<a-tooltip>{{ text }}</a-tooltip>
|
||||
</template>
|
||||
<a-tooltip #description slot-scope="text" placement="topLeft" :title="text">
|
||||
<span>{{ text }}</span>
|
||||
</a-tooltip>
|
||||
<a-tooltip #name slot-scope="text" placement="topLeft" :title="text">
|
||||
<span>{{ text }}</span>
|
||||
</a-tooltip>
|
||||
<template #operation slot-scope="text, record">
|
||||
|
||||
<template v-if="column.dataIndex === 'description'">
|
||||
<a-tooltip>{{ text }}</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-if="column.dataIndex === 'operation'">
|
||||
<a-space>
|
||||
<a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button size="small" type="primary" @click="configMeun(record)">菜单</a-button>
|
||||
@ -49,51 +40,39 @@
|
||||
<a-button size="small" type="danger" @click="handleDelete(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 编辑区 -->
|
||||
<a-modal destroyOnClose v-model:visible="editVisible" title="编辑工作空间" @ok="handleEditOk" :maskClosable="false">
|
||||
<a-form ref="editForm" :rules="rules" :model="temp" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
|
||||
<a-form-item label="名称" prop="name">
|
||||
<a-input v-model="temp.name" :maxLength="50" placeholder="工作空间名称" />
|
||||
|
||||
<!-- 工作空间表单 -->
|
||||
<a-modal destroyOnClose v-model:visible="showWrokspaceForm"
|
||||
:title="`${workSpaceFormType === 'add' ? '新增' : '编辑'}工作空间`" @ok="handleEditOk" :maskClosable="false">
|
||||
<a-form ref="workspaceForm" :model="workspaceFormData" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
|
||||
<a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入工作空间名称' }]">
|
||||
<a-input v-model:value="workspaceFormData.name" :maxLength="50" placeholder="工作空间名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="描述" prop="description">
|
||||
<a-input v-model="temp.description" :maxLength="200" type="textarea" :rows="5" placeholder="工作空间描述" />
|
||||
<a-form-item label="描述" name="description" :rules="[{ required: true, message: '请输入工作空间描述' }]">
|
||||
<a-input v-model:value="workspaceFormData.description" :maxLength="200" type="textarea" :rows="5"
|
||||
placeholder="工作空间描述" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 环境变量 -->
|
||||
<a-modal
|
||||
destroyOnClose
|
||||
v-model="envVarListVisible"
|
||||
:title="`${temp.name} 工作空间环境变量`"
|
||||
width="80vw"
|
||||
:footer="null"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<a-modal destroyOnClose v-model="envVarListVisible" :title="`${temp.name} 工作空间环境变量`" width="80vw" :footer="null"
|
||||
:maskClosable="false">
|
||||
<workspaceEnv ref="workspaceEnv" :workspaceId="temp.id" />
|
||||
</a-modal>
|
||||
<!-- 工作空间菜单 -->
|
||||
<a-modal
|
||||
destroyOnClose
|
||||
v-model="configMenuVisible"
|
||||
:title="`${temp.name} 工作空间菜单`"
|
||||
@ok="onSubmitMenus"
|
||||
:maskClosable="false"
|
||||
>
|
||||
<a-modal destroyOnClose v-model="configMenuVisible" :title="`${temp.name} 工作空间菜单`" @ok="onSubmitMenus"
|
||||
:maskClosable="false">
|
||||
<a-form ref="editWhiteForm" :model="menusConfigData">
|
||||
<a-row type="flex" justify="center">
|
||||
<a-alert :message="`菜单配置只对非超级管理员生效`" style="margin-top: 10px; margin-bottom: 20px" banner />
|
||||
<a-col :span="12">
|
||||
<a-card title="服务端菜单" :bordered="false">
|
||||
<a-tree
|
||||
show-icon
|
||||
v-if="menusConfigData.serverMenus"
|
||||
checkable
|
||||
:tree-data="menusConfigData.serverMenus"
|
||||
:replaceFields="replaceFields"
|
||||
v-model="menusConfigData.serverMenuKeys"
|
||||
>
|
||||
<a-tree show-icon v-if="menusConfigData.serverMenus" checkable :tree-data="menusConfigData.serverMenus"
|
||||
:replaceFields="replaceFields" v-model="menusConfigData.serverMenuKeys">
|
||||
<a-icon #switcherIcon type="down" />
|
||||
|
||||
<template #custom slot-scope="{ dataRef }">
|
||||
@ -104,14 +83,8 @@
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-card title="节点菜单" :bordered="false">
|
||||
<a-tree
|
||||
show-icon
|
||||
v-if="menusConfigData.nodeMenus"
|
||||
checkable
|
||||
:tree-data="menusConfigData.nodeMenus"
|
||||
:replaceFields="replaceFields"
|
||||
v-model="menusConfigData.nodeMenuKeys"
|
||||
>
|
||||
<a-tree show-icon v-if="menusConfigData.nodeMenus" checkable :tree-data="menusConfigData.nodeMenus"
|
||||
:replaceFields="replaceFields" v-model="menusConfigData.nodeMenuKeys">
|
||||
<a-icon #switcherIcon type="down" />
|
||||
|
||||
<template #custom slot-scope="{ dataRef }">
|
||||
@ -125,37 +98,29 @@
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import { deleteWorkspace, editWorkSpace, getWorkSpaceList, getMenusConfig, saveMenusConfig } from '@/api/workspace'
|
||||
import { CHANGE_PAGE, COMPUTED_PAGINATION, PAGE_DEFAULT_LIST_QUERY, parseTime } from '@/utils/const'
|
||||
import workspaceEnv from './workspace-env.vue'
|
||||
import { ColumnsType } from 'ant-design-vue/es/table'
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const listQuery = reactive(Object.assign({}, PAGE_DEFAULT_LIST_QUERY))
|
||||
const envVarListVisible = ref(false)
|
||||
const temp = reactive({})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
workspaceEnv
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
listQuery: Object.assign({}, PAGE_DEFAULT_LIST_QUERY),
|
||||
editVisible: false,
|
||||
envVarListVisible: false,
|
||||
temp: {},
|
||||
columns: [
|
||||
{ title: '名称', dataIndex: 'name', ellipsis: true, width: 200, scopedSlots: { customRender: 'name' } },
|
||||
const columns: ColumnsType = [
|
||||
{ title: '名称', dataIndex: 'name', ellipsis: true, width: 200 },
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
ellipsis: true,
|
||||
width: 200,
|
||||
scopedSlots: { customRender: 'description' }
|
||||
},
|
||||
{
|
||||
title: '修改人',
|
||||
dataIndex: 'modifyUser',
|
||||
ellipsis: true,
|
||||
scopedSlots: { customRender: 'modifyUser' },
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
@ -163,13 +128,13 @@ export default {
|
||||
dataIndex: 'createTimeMillis',
|
||||
sorter: true,
|
||||
ellipsis: true,
|
||||
customRender: (text) => parseTime(text),
|
||||
customRender: ({ text }) => parseTime(text),
|
||||
width: '170px'
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'modifyTimeMillis',
|
||||
customRender: (text) => parseTime(text),
|
||||
customRender: ({ text }) => parseTime(text),
|
||||
sorter: true,
|
||||
width: '170px'
|
||||
},
|
||||
@ -178,44 +143,79 @@ export default {
|
||||
dataIndex: 'operation',
|
||||
fixed: 'right',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'operation' },
|
||||
width: '220px'
|
||||
width: '240px'
|
||||
}
|
||||
],
|
||||
]
|
||||
const configMenuVisible = ref(false)
|
||||
const menusConfigData = reactive({})
|
||||
const replaceFields = reactive({ children: 'childs', title: 'title', key: 'id' })
|
||||
|
||||
// 表单校验规则
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入工作空间名称', trigger: 'blur' }],
|
||||
description: [{ required: true, message: '请输入工作空间描述', trigger: 'blur' }]
|
||||
},
|
||||
configMenuVisible: false,
|
||||
replaceFields: { children: 'childs', title: 'title', key: 'id' },
|
||||
menusConfigData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pagination() {
|
||||
return COMPUTED_PAGINATION(this.listQuery)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 加载数据
|
||||
loadData(pointerEvent) {
|
||||
this.loading = true
|
||||
this.listQuery.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : this.listQuery.page
|
||||
getWorkSpaceList(this.listQuery).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.list = res.data.result
|
||||
this.listQuery.total = res.data.total
|
||||
}
|
||||
this.loading = false
|
||||
|
||||
const pagination = computed(() => {
|
||||
return COMPUTED_PAGINATION(listQuery)
|
||||
})
|
||||
},
|
||||
|
||||
viewEnvVar(record) {
|
||||
|
||||
function loadData(pointerEvent?: PointerEvent) {
|
||||
loading.value = true
|
||||
listQuery.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : listQuery.page
|
||||
getWorkSpaceList(listQuery).then((res) => {
|
||||
if (res.code === 200) {
|
||||
list.value = res.data.result
|
||||
listQuery.total = res.data.total
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 新增\编辑工作空间
|
||||
interface IWorkspaceFormData {
|
||||
id?: string,
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
const workspaceForm = ref()
|
||||
const workSpaceFormType = ref<'add' | 'edit'>('add')
|
||||
const showWrokspaceForm = ref(false)
|
||||
const workspaceFormData = reactive<IWorkspaceFormData>({
|
||||
|
||||
name: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
|
||||
function handleAdd() {
|
||||
showWrokspaceForm.value = true
|
||||
workSpaceFormType.value = 'add'
|
||||
}
|
||||
|
||||
function handleEdit(record: IWorkspaceFormData) {
|
||||
showWrokspaceForm.value = true
|
||||
workSpaceFormType.value = 'edit'
|
||||
workspaceFormData.description = record.description
|
||||
workspaceFormData.name = record.name
|
||||
workspaceFormData.id = record.id
|
||||
}
|
||||
|
||||
|
||||
function handleEditOk() {
|
||||
workspaceForm.value?.validate().then(() => {
|
||||
editWorkSpace(workspaceFormData).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 成功
|
||||
$notification.success({
|
||||
message: res.msg
|
||||
})
|
||||
showWrokspaceForm.value = false
|
||||
workspaceForm.value?.resetFields()
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function viewEnvVar(record) {
|
||||
this.temp = Object.assign({}, record)
|
||||
// this.envTemp = {
|
||||
// workspaceId: this.temp.id,
|
||||
@ -225,41 +225,18 @@ export default {
|
||||
nextTick(() => {
|
||||
this.$refs.workspaceEnv.loadDataEnvVar()
|
||||
})
|
||||
},
|
||||
handleAdd() {
|
||||
this.temp = {}
|
||||
this.editVisible = true
|
||||
this.$refs['editForm'] && this.$refs['editForm'].resetFields()
|
||||
},
|
||||
handleEdit(record) {
|
||||
this.temp = Object.assign({}, record)
|
||||
this.editVisible = true
|
||||
},
|
||||
handleEditOk() {
|
||||
this.$refs['editForm'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
editWorkSpace(this.temp).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 成功
|
||||
$notification.success({
|
||||
message: res.msg
|
||||
})
|
||||
this.$refs['editForm'].resetFields()
|
||||
this.editVisible = false
|
||||
this.loadData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
// 分页、排序、筛选变化时触发
|
||||
changePage(pagination, filters, sorter) {
|
||||
function changePage(pagination, filters, sorter) {
|
||||
this.listQuery = CHANGE_PAGE(this.listQuery, { pagination, sorter })
|
||||
this.loadData()
|
||||
},
|
||||
}
|
||||
// 删除
|
||||
handleDelete(record) {
|
||||
function handleDelete(record) {
|
||||
$confirm({
|
||||
title: '系统提示',
|
||||
content: '真的当前工作空间么,删除前需要将关联数据都删除后才能删除当前工作空间？',
|
||||
@ -277,8 +254,8 @@ export default {
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
configMeun(record) {
|
||||
}
|
||||
function configMeun(record) {
|
||||
this.temp = Object.assign({}, record)
|
||||
|
||||
// 加载菜单配置信息
|
||||
@ -336,8 +313,8 @@ export default {
|
||||
}
|
||||
this.configMenuVisible = true
|
||||
})
|
||||
},
|
||||
onSubmitMenus() {
|
||||
}
|
||||
function onSubmitMenus() {
|
||||
saveMenusConfig({
|
||||
serverMenuKeys: this.menusConfigData.serverMenuKeys.join(','),
|
||||
nodeMenuKeys: this.menusConfigData.nodeMenuKeys.join(','),
|
||||
@ -352,7 +329,9 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user