完成了 后台用户页面、菜单还是带优化、移除了黄色警告
This commit is contained in:
parent
7bf0c49319
commit
e81895f62e
|
|
@ -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']
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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] || []
|
||||
|
||||
|
|
@ -20,3 +20,30 @@ interface dataStatus {
|
|||
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[];
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
]
|
||||
const tableData = ref<DataType[]>([])
|
||||
|
||||
const state = reactive<{
|
||||
selectedRowKeys: Key[]
|
||||
loading: boolean
|
||||
}>({
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
loading: false,
|
||||
{
|
||||
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,
|
||||
})
|
||||
const hasSelected = computed(() => state.selectedRowKeys.length > 0)
|
||||
message.success(resp.message)
|
||||
getUserList()
|
||||
}
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</a-popconfirm>
|
||||
</a-button>
|
||||
</a-space>
|
||||
) : (
|
||||
<i></i>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const onSelectChange = (selectedRowKeys: Key[]) => {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys)
|
||||
state.selectedRowKeys = selectedRowKeys
|
||||
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 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 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 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] = '' // 或者根据实际情况设为 null、undefined 或其他值
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue