去掉一些无用的空白页面

This commit is contained in:
Gary Fu
2024-03-31 11:27:50 +08:00
parent 01dfa4fd6f
commit f962506e23
8 changed files with 201 additions and 294 deletions

View File

@@ -32,22 +32,6 @@ const allMenus = [
{
id: 14,
parentId: 1,
iconCls: 'GroupsOutlined',
nameCn: '用户组管理',
nameEn: 'Groups',
menuUrl: '/admin/groups'
},
{
id: 15,
parentId: 1,
iconCls: 'SupervisedUserCircleOutlined',
nameCn: '租户管理',
nameEn: 'Tenants',
menuUrl: '/admin/tenants'
},
{
id: 16,
parentId: 1,
iconCls: 'menu',
nameCn: '菜单管理',
nameEn: 'Menus',
@@ -78,10 +62,10 @@ const allMenus = [
{
id: 23,
parentId: 2,
iconCls: 'Grid',
nameCn: '表格示例',
nameEn: 'Tables',
menuUrl: '/tables'
iconCls: 'DynamicFormFilled',
nameCn: '窗口表单示例',
nameEn: 'Window Forms',
menuUrl: '/window-forms'
},
{
id: 24,
@@ -90,14 +74,6 @@ const allMenus = [
nameCn: '其他示例',
nameEn: 'Others',
menuUrl: '/tests'
},
{
id: 25,
parentId: 2,
iconCls: 'DynamicFormFilled',
nameCn: '窗口表单示例',
nameEn: 'Window Forms',
menuUrl: '/window-forms'
}
]

View File

@@ -2,20 +2,25 @@ const BASE_PATH = '/admin'
export default [{
path: `${BASE_PATH}/users`,
name: 'UsersBase',
children: [{
path: '',
name: 'Users',
component: () => import('@/views/admin/Users.vue')
}, {
path: 'edit/:id',
name: 'UserEdit',
component: () => import('@/views/admin/UserEdit.vue'),
meta: {
replaceTabHistory: 'Users',
labelKey: 'common.label.edit',
icon: 'Edit'
}
}]
}, {
path: `${BASE_PATH}/roles`,
name: 'Roles',
component: () => import('@/views/admin/Roles.vue')
}, {
path: `${BASE_PATH}/groups`,
name: 'Groups',
component: () => import('@/views/admin/Groups.vue')
}, {
path: `${BASE_PATH}/tenants`,
name: 'Tenants',
component: () => import('@/views/admin/Tenants.vue')
}, {
path: `${BASE_PATH}/authority`,
name: 'Authority',

View File

@@ -1,34 +1,17 @@
export default [{
path: '/icons',
name: 'icons',
name: 'Icons',
component: () => import('@/views/tools/Icons.vue')
}, {
path: '/forms',
name: 'forms',
name: 'Forms',
component: () => import('@/views/tools/Forms.vue')
}, {
path: '/tests',
name: 'tests',
name: 'TestPage',
component: () => import('@/views/tools/TestPage.vue')
}, {
path: '/window-forms',
name: 'tests',
name: 'WindowForms',
component: () => import('@/views/tools/WindowForms.vue')
}, {
path: '/tables',
name: 'TablesBase',
children: [{
path: '',
name: 'Tables',
component: () => import('@/views/tools/Tables.vue')
}, {
path: 'edit/:id',
name: 'TableEdit',
component: () => import('@/views/tools/TableEdit.vue'),
meta: {
replaceTabHistory: 'Tables',
labelKey: 'common.label.edit',
icon: 'Edit'
}
}]
}]

View File

@@ -1,19 +0,0 @@
<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
onMounted(() => {
console.info('=========mounted', useRoute().path)
})
</script>
<template>
<div>
<strong>
{{ $t('menu.label.groupManagement') }}
</strong>
</div>
</template>
<style scoped>
</style>

View File

@@ -1,19 +0,0 @@
<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
onMounted(() => {
console.info('=========mounted', useRoute().path)
})
</script>
<template>
<div>
<strong>
{{ $t('menu.label.tenantManagement') }}
</strong>
</div>
</template>
<style scoped>
</style>

View File

@@ -1,17 +1,187 @@
<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { loadUsersResult, useUserFormOptions } from '@/services/user/UserService'
import { useDefaultPage } from '@/config'
import { useRouter } from 'vue-router'
import { $i18nMsg } from '@/messages'
const router = useRouter()
const page = ref(useDefaultPage())
const tableData = ref([])
const loading = ref(true)
const loadUsers = async () => {
loading.value = true
const usersResult = await loadUsersResult({ page: page.value }).finally(() => (loading.value = false))
if (usersResult.success && usersResult.resultData) {
const resultData = usersResult.resultData
tableData.value = resultData.userList
Object.assign(page.value, resultData.page)
}
}
onMounted(() => {
console.info('=========mounted', useRoute().path)
loadUsers()
})
/**
*
* @type {[CommonTableColumn]}
*/
const columns = [{
label: '中文名',
property: 'nameCn',
click (data) {
router.push(`users/edit/${data.id}`)
}
}, {
label: '英文名',
property: 'nameEn',
click (data) {
router.push(`users/edit/${data.id}`)
}
}, {
label: '性别',
property: 'gender',
slot: 'gender'
}, {
label: '出生日期',
property: 'birthday',
click (item) {
console.info('=================', item)
}
}, {
label: '地址',
property: 'address'
}]
const buttons = ref([{
labelKey: 'common.label.edit',
type: 'primary',
click: item => {
toEditUser(item)
},
buttonIf (item) {
return !!item.id
}
}, {
labelKey: 'common.label.delete',
type: 'danger',
click: item => {
console.info('删除=============', item)
},
buttonIf (item) {
return !!item.id
}
}])
//* ************搜索框**************//
const searchParam = ref({})
const searchFormOptions = computed(() => {
return [
{
label: '用户名',
prop: 'nameCn'
},
{
label: '关键字',
prop: 'keywords'
},
{
label: '地址',
prop: 'address'
}, {
label: $i18nMsg('性别', 'Gender'),
type: 'select',
prop: 'gender',
children: [{
value: 'male',
label: $i18nMsg('男', 'Male')
}, {
value: 'female',
label: $i18nMsg('女', 'Female')
}]
}
]
})
const doSearch = form => {
console.info('=================searchParam', form, searchParam.value)
}
/** *************用户编辑**************/
const currentUser = ref(null)
const showEdit = ref(false)
const userFormOptions = computed(() => useUserFormOptions())
const toEditUser = user => {
currentUser.value = { ...user }
showEdit.value = true
}
const formRef = ref()
const submitForm = () => {
formRef.value.form.validate(valid => {
if (valid) {
console.log('submit', currentUser.value)
showEdit.value = false
}
})
return false
}
</script>
<template>
<div>
<strong>
{{ $t('menu.label.userManagement') }}
</strong>
</div>
<el-container
class="flex-column"
>
<common-form
inline
:model="searchParam"
:options="searchFormOptions"
:submit-label="$t('common.label.search')"
@submit-form="doSearch"
/>
<common-table
v-model:page="page"
:data="tableData"
:columns="columns"
:buttons="buttons"
buttons-slot="buttons"
:buttons-column-attrs="{width:'250px'}"
:loading="loading"
@page-size-change="loadUsers()"
@current-page-change="loadUsers()"
>
<template #gender="{item}">
<el-tag
:type="item.gender === 'male' ? 'primary' : 'success'"
>
{{ item.gender }}
</el-tag>
</template>
<template #buttons="{item}">
<el-button
size="small"
@click="console.info(item)"
>
测试
</el-button>
</template>
</common-table>
<common-window
v-model="showEdit"
:width="'600px'"
:ok-click="submitForm"
title="用户编辑"
>
<common-form
v-if="currentUser"
ref="formRef"
class="form-edit-width-100"
:model="currentUser"
:options="userFormOptions"
label-width="100px"
:show-buttons="false"
/>
</common-window>
</el-container>
</template>
<style scoped>

View File

@@ -1,189 +0,0 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { loadUsersResult, useUserFormOptions } from '@/services/user/UserService'
import { useDefaultPage } from '@/config'
import { useRouter } from 'vue-router'
import { $i18nMsg } from '@/messages'
const router = useRouter()
const page = ref(useDefaultPage())
const tableData = ref([])
const loading = ref(true)
const loadUsers = async () => {
loading.value = true
const usersResult = await loadUsersResult({ page: page.value }).finally(() => (loading.value = false))
if (usersResult.success && usersResult.resultData) {
const resultData = usersResult.resultData
tableData.value = resultData.userList
Object.assign(page.value, resultData.page)
}
}
onMounted(() => {
loadUsers()
})
/**
*
* @type {[CommonTableColumn]}
*/
const columns = [{
label: '中文名',
property: 'nameCn',
click (data) {
router.push(`tables/edit/${data.id}`)
}
}, {
label: '英文名',
property: 'nameEn',
click (data) {
router.push(`tables/edit/${data.id}`)
}
}, {
label: '性别',
property: 'gender',
slot: 'gender'
}, {
label: '出生日期',
property: 'birthday',
click (item) {
console.info('=================', item)
}
}, {
label: '地址',
property: 'address'
}]
const buttons = ref([{
labelKey: 'common.label.edit',
type: 'primary',
click: item => {
toEditUser(item)
},
buttonIf (item) {
return !!item.id
}
}, {
labelKey: 'common.label.delete',
type: 'danger',
click: item => {
console.info('删除=============', item)
},
buttonIf (item) {
return !!item.id
}
}])
//* ************搜索框**************//
const searchParam = ref({})
const searchFormOptions = computed(() => {
return [
{
label: '用户名',
prop: 'nameCn'
},
{
label: '关键字',
prop: 'keywords'
},
{
label: '地址',
prop: 'address'
}, {
label: $i18nMsg('性别', 'Gender'),
type: 'select',
prop: 'gender',
children: [{
value: 'male',
label: $i18nMsg('男', 'Male')
}, {
value: 'female',
label: $i18nMsg('女', 'Female')
}]
}
]
})
const doSearch = form => {
console.info('=================searchParam', searchParam.value)
}
/** *************用户编辑**************/
const currentUser = ref(null)
const showEdit = ref(false)
const userFormOptions = computed(() => useUserFormOptions())
const toEditUser = user => {
currentUser.value = { ...user }
showEdit.value = true
}
const formRef = ref()
const submitForm = () => {
formRef.value.form.validate(valid => {
if (valid) {
console.log('submit', currentUser.value)
showEdit.value = false
}
})
return false
}
</script>
<template>
<el-container
class="flex-column"
>
<common-form
inline
:model="searchParam"
:options="searchFormOptions"
:submit-label="$t('common.label.search')"
@submit-form="doSearch"
/>
<common-table
v-model:page="page"
:data="tableData"
:columns="columns"
:buttons="buttons"
buttons-slot="buttons"
:buttons-column-attrs="{width:'250px'}"
:loading="loading"
@page-size-change="loadUsers()"
@current-page-change="loadUsers()"
>
<template #gender="{item}">
<el-tag
:type="item.gender === 'male' ? '' : 'success'"
>
{{ item.gender }}
</el-tag>
</template>
<template #buttons="{item}">
<el-button
size="small"
@click="console.info(item)"
>
测试
</el-button>
</template>
</common-table>
<common-window
v-model="showEdit"
:width="'600px'"
:ok-click="submitForm"
title="用户编辑"
>
<common-form
v-if="currentUser"
ref="formRef"
class="form-edit-width-100"
:model="currentUser"
:options="userFormOptions"
label-width="100px"
:show-buttons="false"
/>
</common-window>
</el-container>
</template>
<style scoped>
</style>