完成了 后台用户页面、菜单还是带优化、移除了黄色警告

This commit is contained in:
TimSpan 2024-09-06 09:45:51 +08:00
parent 7bf0c49319
commit e81895f62e
6 changed files with 377 additions and 107 deletions

View File

@ -26,6 +26,10 @@ declare module 'vue' {
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASpace: typeof import('ant-design-vue/es')['Space']

View File

@ -23,9 +23,9 @@
</a-menu-item>
</a-menu> -->
<!-- 动态生成菜单项 -->
<a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
<a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" theme="light" mode="inline">
<template v-for="route in staticRouter">
<a-menu-item v-if="route.meta?.title === undefined && route.children">
<a-menu-item v-if="route.meta?.title === undefined && route.children" :key="route.path" @click="handleMenuClick(route.children[0].path)">
<router-link :to="`${route.children[0].path}`">
<HomeOutlined v-if="route.name === 'dashboard'" />
<InsuranceOutlined v-if="route.name === 'police'" />
@ -40,7 +40,7 @@
<UserOutlined v-if="route.name === 'user'" />
<span>{{ route.meta?.title }}</span>
</template>
<a-menu-item v-for="child in route.children" :key="child.path">
<a-menu-item v-for="child in route.children" :key="child.path" @click="handleMenuClick(`${route.path}/${child.path}`)">
<router-link :to="`${route.path}/${child.path}`">{{ child.meta?.title }}</router-link>
</a-menu-item>
</a-sub-menu>
@ -71,15 +71,58 @@
<script setup lang="ts">
import { InsuranceOutlined, HomeOutlined, SoundOutlined, MailOutlined, ApartmentOutlined, UserOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
import { computed } from 'vue'
import { computed, watch, onMounted } from 'vue'
import { staticRouter } from '@/router/staticRouters'
import { useRoute } from 'vue-router'
const route = useRoute()
const selectedKeys = ref([route.path])
/**
* [Vue warn] Write operation failed: computed value is readonly
* computed 计算属性绑定到 v-model Vue 3 v-model 是一个双向绑定它不仅读取数据还期望可以写入数据然而computed 属性默认是只读的所以会报这个警告
*/
const handleMenuClick = (path: any) => {
// selectedKeys Vue
selectedKeys.value = [path]
localStorage.setItem('selectedKeys', JSON.stringify([path]))
}
watch(
() => route.path,
(newPath) => {
selectedKeys.value = [newPath]
}
)
const openKeys = ref([])
// localStorage
onMounted(() => {
const savedSelectedKeys = localStorage.getItem('selectedKeys')
const savedOpenKeys = localStorage.getItem('openKeys')
if (savedSelectedKeys) {
selectedKeys.value = JSON.parse(savedSelectedKeys)
}
if (savedOpenKeys) {
openKeys.value = JSON.parse(savedOpenKeys)
}
})
// selectedKeys openKeys localStorage
watch(selectedKeys, (newSelectedKeys) => {
localStorage.setItem('selectedKeys', JSON.stringify(newSelectedKeys))
})
watch(openKeys, (newOpenKeys) => {
localStorage.setItem('openKeys', JSON.stringify(newOpenKeys))
})
//
// const selectedKeys = computed(() => route.path)
const selectedKeys = computed(() => [route.path])
// const selectedKeys = computed(() => {
// console.log(route.path)
// console.log([route.path])
// return [route.path]
// })
//
// const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))
// staticRouter.forEach((element) => {

View File

@ -0,0 +1,17 @@
import api from "@/axios";
type DictType =
'CheckStatus'
| 'DeleteFlag'
| 'IsEnable'
| 'IsOrNot'
| 'Sex'
export const initEnums = () => {
api.get<Record<DictType, SelectNodeVo<any>[]>>('/common/enums').then(resp => {
sessionStorage.setItem('dictMap', JSON.stringify(resp.data))
})
}
export const dictSelectNodes = <T>(enumType: DictType): SelectNodeVo<T>[] => JSON.parse(sessionStorage.getItem('dictMap') as string)?.[enumType] || []

View File

@ -19,4 +19,31 @@ interface dataStatus {
label: string;
value: number;
};
}
class SelectNodeVo<T, E = Record<string, any>> {
value: T;
label: string;
options?: SelectNodeVo<T>[]
orderIndex?: number;
disabled?: boolean;
extData?: E
}
interface ExtData {
color?: string;
}
interface Option {
label: string;
value: string | number;
extData?: ExtData | null;
}
interface OptionsResponse {
IsEnable: Option[];
IsOrNot: Option[];
Sex: Option[];
CheckStatus: Option[];
ServiceProjectType: Option[];
DeleteFlag: Option[];
}

View File

@ -12,7 +12,9 @@ import router from "@/router";
import pinia from "@/stores";
const vueApp = createApp(App);
import {initEnums} from "@/config/dict.ts";
initEnums()
vueApp
.use(router)
.use(pinia)

View File

@ -1,96 +1,116 @@
<template>
<!-- 后台用户 -->
<!-- template 内部必须有一个根节点 div否则<Transition>将会失效所以这个<a-modal></a-modal> div -->
<div>
<div class="h-16 w-full bg-white rounded shadow-md py-5 px-10 flex items-center">
<div class="mr-5">关键字</div>
<a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入用户名搜索" />
<div class="mr-5">状态</div>
<div class="mr-5">名称</div>
<a-input class="w-40 mr-5" v-model:value="searchUser" autocomplete="off" placeholder="请输入搜索" />
<div class="mr-5 ml-5">是否启用</div>
<a-space>
<a-select ref="select" v-model:value="selectValue" style="width: 120px" @focus="focus" @change="handleChange">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">启用</a-select-option>
<a-select-option value="2">禁用</a-select-option>
<a-select ref="select" v-model:value="isEnableValue" style="width: 120px" @focus="focus" @change="handleChange">
<a-select-option v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-select-option>
</a-select>
</a-space>
<a-button class="ml-5 flex items-center" type="primary" @click="search"><SearchOutlined style="font-size: 16px" />搜索</a-button>
<a-button class="ml-5 flex items-center"><SyncOutlined style="font-size: 16px" />重置</a-button>
<div class="mr-5 ml-5">性别</div>
<a-space>
<a-select ref="select" v-model:value="sexValue" style="width: 120px" @focus="focus" @change="sexChange">
<a-select-option v-for="(item, index) in enumsSex" :key="index" :value="item.value">{{ item.label }}</a-select-option>
</a-select>
</a-space>
<div class="mr-5 ml-5">手机号</div>
<a-input class="w-40 mr-5" v-model:value="searchTelePhone" autocomplete="off" placeholder="请输入手机号搜索" />
<a-button @click="search" class="ml-5 flex items-center" type="primary"> <SearchOutlined style="font-size: 16px" />搜索 </a-button>
<a-button @click="resetSearch" class="ml-5 flex items-center"><SyncOutlined style="font-size: 16px" />重置</a-button>
</div>
<div class="w-full h-full bg-white mt-5 rounded">
<div class="w-full h-16 py-5 px-10 flex items-center">
<a-button class="flex items-center" type="primary" @click="search"><PlusOutlined style="font-size: 16px" />新增</a-button>
<a-button :disabled="!hasSelected" class="ml-5 flex items-center" type="primary" danger @click="search"><DeleteOutlined style="font-size: 16px" />删除</a-button>
<a-button class="flex items-center" type="primary" @click="addUser"><PlusOutlined style="font-size: 16px" />新增</a-button>
<!-- <a-button :disabled="!hasSelected" class="ml-5 flex items-center" type="primary" danger @click="search"><DeleteOutlined style="font-size: 16px" />删除</a-button> -->
</div>
<div class="px-10">
<a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="tableData" />
<!-- :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" -->
<a-table :pagination="pagination" :columns="columns" :data-source="tableData" />
</div>
</div>
<!-- template 内部必须有一个根节点 div否则<Transition>将会失效所以这个<a-modal></a-modal> div -->
<a-modal v-model:open="visible" :title="title" @ok="submit" @cancel="closeModal">
<a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout" @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
<!-- 用户根据单位代码去查询 审核状态 -->
<a-form-item has-feedback label="姓名" name="name">
<a-input v-model:value="formState.name" autocomplete="off" />
</a-form-item>
<a-form-item has-feedback label="性别" name="sex">
<a-radio-group v-model:value="formState.sex" name="radioGroup">
<a-radio v-for="(item, index) in enumsSex" :key="index" :value="item.value">{{ item.label }}</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item has-feedback label="手机号" name="telephone">
<a-input v-model:value="formState.telephone" autocomplete="off" />
</a-form-item>
<a-form-item has-feedback label="启用状态" name="isEnable">
<a-radio-group v-model:value="formState.isEnable" name="radioGroup">
<a-radio v-for="(item, index) in enumsIsEnable" :key="index" :value="item.value">{{ item.label }}</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup lang="tsx">
/**
* @current 当前页
* @pages 总页数
* @size 每页多少条
* @total 总条数
*/
import { message } from 'ant-design-vue'
import { dictSelectNodes } from '@/config/dict.ts'
const enumsSex = ref<any[]>(dictSelectNodes('Sex'))
const enumsIsEnable = ref<any[]>(dictSelectNodes('IsEnable'))
import api from '@/axios/index.ts'
import { SearchOutlined, SyncOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { ref, h, computed, reactive, onMounted } from 'vue'
const searchUser = ref('')
const selectValue = ref('0')
import { ref, computed, reactive, onMounted, watch } from 'vue'
const focus = () => {
console.log('focus')
}
const handleChange = (value: string) => {
console.log(`selected ${value}`)
}
const search = function name() {}
const obj = {
params: {
// name: '',
// telephone: '',
// sex: '',
},
page: {
// records: [
// {
// snowFlakeId: 0,
// name: '',
// sex: '',
// account: '',
// telephone: '',
// isEnable: '',
// isAdmin: '',
// createUserName: '',
// createTime: '',
// },
// ],
// total: 0,
// size: 0,
// current: 0,
size: 10,
current: 0,
// orders: [
// {
// column: '',
// asc: true,
// },
// ],
// optimizeCountSql: {},
// searchCount: {},
// optimizeJoinOfCountSql: true,
// maxLimit: 0,
// countId: '',
// pages: 0,
},
const handlePageChange = (page: any, pageSize: any) => {
console.log('🚀 ~ handlePageChange ~ page, pageSize:', page, pageSize)
pagination.current = page
pagination.pageSize = pageSize
getUserList()
}
const getUserList = async function name() {
const pagination = reactive({
pageSize: 5, //
showSizeChanger: true, //
pageSizeOptions: ['5', '10'], //
showQuickJumper: true, //
showTotal: (total: string | number) => `${total}`, //
current: 1, //
total: null as number | string | null, //
onChange: handlePageChange, //
})
const getUserList = async function (params?: any) {
let obj = { page: { size: pagination.pageSize, current: pagination.current }, params }
const res = await api.post<any>('/managementPoliceUnitUser/pager', obj)
tableData.value = res.data.records
const { total, records } = res.data
tableData.value = records
pagination.total = Number(total)
}
onMounted(() => {
getUserList()
})
//
type Key = string | number
interface DataType {
@ -100,30 +120,6 @@ interface DataType {
address: string
}
interface ResponseData {
params: {
name: string
telephone: string
sex: string
}
page: {
records: Array<RecordItem>
total: number
size: number
current: number
orders: Array<{
column: string
asc: boolean
}>
optimizeCountSql: any
searchCount: any
optimizeJoinOfCountSql: boolean
maxLimit: number
countId: string
pages: number
}
}
interface RecordItem {
account: string
createTime: string
@ -149,6 +145,12 @@ interface EnableStatus {
}
}
const columns = [
// {
// title: '',
// customRender: (text, record, index, column) => {
// console.log(index)
// },
// },
{
title: '账号',
dataIndex: 'account',
@ -157,14 +159,14 @@ const columns = [
title: '名称',
dataIndex: 'name',
},
{
dataIndex: 'sex',
title: '性别',
customRender: ({ record }: { record: RecordItem }) => {
return <a-tag>{record.sex.label}</a-tag>
},
},
// {
// title: '',
// dataIndex: 'isAdmin',
// customRender: ({ record }: { record: RecordItem }) => {
// return record.isAdmin.value === 0 ? <a-tag color='green'>{record.isAdmin.label}</a-tag> : <a-tag color='#f50'>{record.isAdmin.label}</a-tag>
// },
// },
{
title: '是否启用',
dataIndex: 'isEnable',
@ -176,20 +178,195 @@ const columns = [
title: '创建时间',
dataIndex: 'createTime',
},
{
dataIndex: 'opt',
title: '操作',
fixed: 'right',
customRender({ record }: { record: RecordItem }) {
return record.isAdmin.value === 1 ? (
<a-space>
<a-button
type='primary'
onClick={async () => {
console.log(record)
{
visible.value = true
title.value = '编辑用户'
formState.name = record.name
formState.telephone = record.telephone
formState.sex = record.sex.value
formState.isEnable = record.isEnable.value
formState.snowFlakeId = record.snowFlakeId
}
}}
>
编辑
</a-button>
<a-button type='primary' danger>
<a-popconfirm
title='确认删除账号吗?'
onConfirm={async () => {
{
const resp = await api.delete('/managementPoliceUnitUser/deleteById', {
managementPoliceUnitUserId: record.snowFlakeId,
})
message.success(resp.message)
getUserList()
}
}}
>
删除
</a-popconfirm>
</a-button>
</a-space>
) : (
<i></i>
)
},
},
]
const saveOrUpdate = async () => {
const res = await api.post<any>('/managementPoliceUnitUser/saveOrUpdate', formState)
message.success(res.message)
visible.value = false
getUserList() //
resetForm() //
resetFormState()
if (formState.hasOwnProperty('snowFlakeId')) {
delete formState.snowFlakeId
}
if (title.value === '新增用户') {
}
// console.log('saveOrUpdate', res)
}
const visible = ref(false)
const title = ref('')
const submit = async () => {
await formRef.value?.validate() //
console.log('表单校验完成')
saveOrUpdate()
}
const closeModal = () => {
resetForm()
resetFormState()
}
const addUser = () => {
visible.value = true
title.value = '新增用户'
}
const tableData = ref<DataType[]>([])
const state = reactive<{
selectedRowKeys: Key[]
loading: boolean
}>({
selectedRowKeys: [], // Check here to configure the default column
loading: false,
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
}
import type { FormInstance } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
interface FormState {
name: string
sex: string | number
telephone: string
isEnable: string | number
snowFlakeId?: string | number
[key: string]: any //
}
const formRef = ref<FormInstance>()
const formState = reactive<FormState>({
name: '',
sex: '',
telephone: '',
isEnable: '',
})
const hasSelected = computed(() => state.selectedRowKeys.length > 0)
const checkName = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请输入姓名')
} else {
return Promise.resolve()
}
}
const checkSex = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请选择姓名')
} else {
return Promise.resolve()
}
}
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const checkTelephone = async (_rule: Rule, value: string) => {
if (reg_tel.test(value.trim())) {
return Promise.resolve()
} else {
return Promise.reject('手机号格式不正确')
}
}
const checkIsEnable = async (_rule: Rule, value: string) => {
if (value === '') {
return Promise.reject('请选择启用状态')
} else {
return Promise.resolve()
}
}
const rules: Record<string, Rule[]> = {
name: [{ required: true, validator: checkName, trigger: 'change' }],
sex: [{ required: true, validator: checkSex, trigger: 'change' }],
telephone: [{ required: true, validator: checkTelephone, trigger: 'change' }],
isEnable: [{ required: true, validator: checkIsEnable, trigger: 'change' }],
}
const onSelectChange = (selectedRowKeys: Key[]) => {
console.log('selectedRowKeys changed: ', selectedRowKeys)
state.selectedRowKeys = selectedRowKeys
const handleFinish = (values: FormState) => {
console.log('自定义校验成功')
console.log(values)
}
const handleFinishFailed = (errors: any) => {
console.log(errors)
}
const resetForm = () => {
formRef.value?.resetFields()
}
const resetFormState = () => {
// Object.keys(formState).forEach((key) => (formState[key] = ''))
for (const key in formState) {
if (Object.prototype.hasOwnProperty.call(formState, key)) {
formState[key] = '' // nullundefined
}
}
}
const handleValidate = (...args: any[]) => {
console.log(args)
}
//
const searchParams = reactive({
name: '',
telephone: '',
sex: null,
isEnable: null,
})
const searchUser = ref('')
const isEnableValue = ref(null)
const sexValue = ref(null)
const searchTelePhone = ref('')
const handleChange = (value: string) => {
console.log(`selected ${value}`)
}
const sexChange = (value: string) => {
console.log(`selected ${value}`)
}
const search = async () => {
searchParams.name = searchUser.value
searchParams.telephone = searchTelePhone.value
searchParams.sex = sexValue.value
searchParams.isEnable = isEnableValue.value
getUserList(searchParams)
}
const resetSearch = () => {
searchUser.value = ''
isEnableValue.value = null
sexValue.value = null
searchTelePhone.value = ''
}
</script>