mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-09-16 00:09:59 +08:00
version: v5.2.1
This commit is contained in:
XiaoDaiGua-Ray
parent
c68491fca9
commit
c28c353f7d
15
CHANGELOG.md
15
CHANGELOG.md
@ -1,3 +1,18 @@
|
||||
## 5.2.1
|
||||
|
||||
## Feats
|
||||
|
||||
- `RTablePro` 组件相关
|
||||
- 新增 `runAsyncTableRequest` 方法，与 `runTableRequest` 方法功能一致，但是返回 `Promise` 对象
|
||||
- 现在不允许使用 `useTemplateRef` 方法注册 `dom` 模板引用，约定强制使用 `useTablePro` 方法的 `register` 方法注册 `hook` 使用相关方法
|
||||
- `useTablePro` 方法新增 `getTableProConfig` 方法，与 `useTable` 方法的 `getTableConfig` 方法功能一致，获取 `RTablePro` 组件额外注入配置
|
||||
- `useTable` 方法新增 `getTableConfig` 方法，获取 `RTable` 组件额外注入配置
|
||||
- 更新包为主流版本
|
||||
- `vue-router` 因为在 [4.4.1](https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#441-2024-07-31) 版本中有破坏性的更新，所以在 `jsx` 函数式组件使用 `this.$route`, `this.$router` 会提示类型报错，所以现在强制约定需要使用 `useRoute`, `useRouter` 方法显示的声明与使用
|
||||
- 更新 `naive-ui` 版本至 `2.42.0`
|
||||
- 更新 `vue` 版本至 `3.5.17`
|
||||
- `useForm` 方法新增 `reset` 方法，允许重置表单值，该方法依赖 `useForm` 方法的初始化 `formModel` 参数，所以请确保初始化 `formModel` 参数
|
||||
|
||||
## 5.2.0
|
||||
|
||||
一些破坏性更新，请谨慎更新。
|
||||
|
||||
58
package.json
58
package.json
@ -35,34 +35,35 @@
|
||||
"dependencies": {
|
||||
"@logicflow/core": "2.0.10",
|
||||
"@logicflow/extension": "2.0.14",
|
||||
"@vueuse/core": "^12.4.0",
|
||||
"axios": "^1.7.9",
|
||||
"@vueuse/core": "^13.1.0",
|
||||
"axios": "^1.9.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"crypto-js": "4.2.0",
|
||||
"currency.js": "^2.0.4",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"html-to-image": "1.11.11",
|
||||
"html-to-image": "1.11.13",
|
||||
"interactjs": "1.10.27",
|
||||
"jsbarcode": "3.11.6",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mockjs": "1.1.0",
|
||||
"naive-ui": "^2.41.0",
|
||||
"pinia": "^2.3.0",
|
||||
"naive-ui": "^2.42.0",
|
||||
"pinia": "^3.0.1",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
"vue": "^3.5.16",
|
||||
"vue": "^3.5.17",
|
||||
"vue-demi": "0.14.10",
|
||||
"vue-hooks-plus": "2.2.3",
|
||||
"vue-hooks-plus": "2.4.0",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-router": "^4.4.0",
|
||||
"vue3-next-qrcode": "2.0.10"
|
||||
"vue-router": "^4.5.1",
|
||||
"vue3-next-qrcode": "3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@amap/amap-jsapi-types": "0.0.15",
|
||||
"@ant-design/icons-vue": "7.0.1",
|
||||
"@commitlint/cli": "19.3.0",
|
||||
"@commitlint/config-conventional": "19.2.2",
|
||||
"@commitlint/cli": "19.7.1",
|
||||
"@commitlint/config-conventional": "19.7.1",
|
||||
"@eslint/js": "9.28.0",
|
||||
"@interactjs/types": "1.10.27",
|
||||
"@intlify/unplugin-vue-i18n": "4.0.0",
|
||||
"@types/crypto-js": "4.2.2",
|
||||
@ -70,32 +71,32 @@
|
||||
"@types/lodash-es": "4.17.12",
|
||||
"@types/mockjs": "1.0.10",
|
||||
"@types/three": "0.171.0",
|
||||
"@typescript-eslint/eslint-plugin": "8.20.0",
|
||||
"@typescript-eslint/parser": "8.20.0",
|
||||
"@vitejs/plugin-vue": "5.2.1",
|
||||
"@vitejs/plugin-vue-jsx": "4.1.1",
|
||||
"@typescript-eslint/eslint-plugin": "8.24.0",
|
||||
"@typescript-eslint/parser": "8.24.0",
|
||||
"@vitejs/plugin-vue": "5.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "4.1.2",
|
||||
"@vitest/ui": "2.1.8",
|
||||
"@vue/eslint-config-prettier": "10.1.0",
|
||||
"@vue/eslint-config-typescript": "14.2.0",
|
||||
"@vue/test-utils": "2.4.6",
|
||||
"autoprefixer": "10.4.20",
|
||||
"autoprefixer": "10.4.21",
|
||||
"depcheck": "1.4.7",
|
||||
"eslint": "9.18.0",
|
||||
"eslint-config-prettier": "10.0.1",
|
||||
"eslint-plugin-prettier": "5.2.2",
|
||||
"eslint": "9.20.1",
|
||||
"eslint-config-prettier": "10.1.2",
|
||||
"eslint-plugin-prettier": "5.2.6",
|
||||
"eslint-plugin-vue": "9.32.0",
|
||||
"globals": "15.14.0",
|
||||
"happy-dom": "16.6.0",
|
||||
"globals": "16.0.0",
|
||||
"happy-dom": "17.1.0",
|
||||
"husky": "8.0.3",
|
||||
"lint-staged": "15.3.0",
|
||||
"postcss": "8.5.1",
|
||||
"lint-staged": "15.4.3",
|
||||
"postcss": "8.5.4",
|
||||
"postcss-px-to-viewport-8-with-include": "1.2.2",
|
||||
"prettier": "3.4.2",
|
||||
"prettier": "3.5.3",
|
||||
"rollup-plugin-gzip": "4.0.1",
|
||||
"sass": "1.83.4",
|
||||
"sass": "1.86.3",
|
||||
"svg-sprite-loader": "6.0.11",
|
||||
"typescript": "5.6.3",
|
||||
"unplugin-auto-import": "19.0.0",
|
||||
"typescript": "5.8.3",
|
||||
"unplugin-auto-import": "19.1.2",
|
||||
"unplugin-vue-components": "0.28.0",
|
||||
"vite": "6.3.5",
|
||||
"vite-bundle-analyzer": "0.16.0",
|
||||
@ -107,7 +108,8 @@
|
||||
"vite-plugin-svg-icons": "2.0.1",
|
||||
"vite-svg-loader": "5.1.0",
|
||||
"vitest": "2.1.8",
|
||||
"vue-tsc": "2.2.0"
|
||||
"vue-eslint-parser": "9.4.3",
|
||||
"vue-tsc": "2.2.8"
|
||||
},
|
||||
"description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
|
||||
"main": "index.ts",
|
||||
|
||||
2010
pnpm-lock.yaml
generated
2010
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -86,8 +86,28 @@ const useForm = <
|
||||
*
|
||||
* @description
|
||||
* 获取表项中收集到的值的对象。
|
||||
*
|
||||
* 调用该方法时，需要确保初始化 useForm 方法的时候传入了 model，否则可能有意想不到的问题发生。
|
||||
*
|
||||
* 该方法可以实现重置表单的需求，因为在 vue 的设计理念中，表单的值绑定是直接绑定在每个组件上，
|
||||
* 而不是利用 Form 表单机制，所以需要这么去做表单的初始化操作维护机制。
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* interface FormModel {
|
||||
* name: string | null
|
||||
* age: number | null
|
||||
* }
|
||||
*
|
||||
* const [register, { formModel }] = useForm<FormModel>({
|
||||
* name: null,
|
||||
* age: null,
|
||||
* })
|
||||
*
|
||||
* const formModelRef = ref(formModel())
|
||||
*
|
||||
* const reset = () => {
|
||||
* formModelRef.value = formModel()
|
||||
* }
|
||||
*/
|
||||
const formModel = () => cloneDeep(model) || ({} as T)
|
||||
|
||||
@ -100,6 +120,31 @@ const useForm = <
|
||||
*/
|
||||
const formRules = () => cloneDeep(rules) || ({} as R)
|
||||
|
||||
/**
|
||||
*
|
||||
* @param values 需要重置的表单值
|
||||
* @param extraValues 额外的表单值，当你需要初始化额外的表单值的时候，可以传入该参数
|
||||
*
|
||||
* @warning
|
||||
* 请注意初始化值的问题，如果设置初始化值为 undefined，
|
||||
* 则会导致 reset 初始化操作失败，必须使用 null 作为初始化的空值。
|
||||
*
|
||||
* @description
|
||||
* 重置表单的值，依赖 useForm 传入的初始化值。
|
||||
* 该方法会将初始化传入的值视为整个表单的初始化绑定值。
|
||||
*
|
||||
* 但是，对于复杂的动态值，也就是在实现业务中额外的对象值，需要手动进行初始化操作。
|
||||
* 所以，最佳的实践应该是初始化 useForm 方法的时候，就应该确定好初始化值。
|
||||
* 然后，在需要重置表单的时候，直接调用该方法即可。
|
||||
*/
|
||||
const reset = <Values extends T = T>(
|
||||
values: Values & Recordable,
|
||||
extraValues?: Recordable,
|
||||
) => {
|
||||
Object.assign(values ?? {}, formModel(), extraValues)
|
||||
restoreValidation()
|
||||
}
|
||||
|
||||
return [
|
||||
register,
|
||||
{
|
||||
@ -108,6 +153,7 @@ const useForm = <
|
||||
restoreValidation,
|
||||
formModel,
|
||||
formRules,
|
||||
reset,
|
||||
},
|
||||
] as const
|
||||
}
|
||||
|
||||
@ -149,9 +149,23 @@ const useTable = () => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 设定表格的过滤状态。
|
||||
*
|
||||
* @see https://www.naiveui.com/zh-CN/dark/components/data-table#DataTable-Methods
|
||||
*/
|
||||
const filter = (filters: FilterState | null) =>
|
||||
getTableInstance().filter.call(null, filters)
|
||||
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 获取 Table 组件配置。
|
||||
*/
|
||||
const getTableConfig = () => extraRef.value
|
||||
|
||||
return [
|
||||
register,
|
||||
{
|
||||
@ -165,7 +179,7 @@ const useTable = () => {
|
||||
sort,
|
||||
print,
|
||||
filter,
|
||||
config: extraRef,
|
||||
getTableConfig,
|
||||
},
|
||||
] as const
|
||||
}
|
||||
|
||||
@ -3,9 +3,23 @@ import tableProProps from './src/props'
|
||||
import { useTablePro } from './src/hooks/useTablePro'
|
||||
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import type {
|
||||
BasePagination,
|
||||
TablePagination,
|
||||
FormatRangeTime,
|
||||
TableRequestConfig,
|
||||
TableProFieldNames,
|
||||
} from './src/types'
|
||||
|
||||
type TableProProps = ExtractPropTypes<typeof tableProProps>
|
||||
|
||||
export type { TableProProps }
|
||||
export type {
|
||||
TableProProps,
|
||||
BasePagination,
|
||||
TablePagination,
|
||||
FormatRangeTime,
|
||||
TableRequestConfig,
|
||||
TableProFieldNames,
|
||||
}
|
||||
|
||||
export { RTablePro, useTablePro, tableProProps }
|
||||
|
||||
@ -7,11 +7,13 @@ import { usePagination } from '@/hooks'
|
||||
import { omit } from 'lodash-es'
|
||||
|
||||
import type { TablePagination, TableRequestConfig, TableProInst } from './types'
|
||||
import type { RTableInst } from '../../..'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RTablePro',
|
||||
props,
|
||||
setup(props) {
|
||||
setup(props, ctx) {
|
||||
const { expose } = ctx
|
||||
const [register, tableFns] = useTable()
|
||||
const [
|
||||
paginationRef,
|
||||
@ -92,9 +94,9 @@ export default defineComponent({
|
||||
return requestParams
|
||||
}
|
||||
|
||||
// 会重置 pagination 的请求，默认会重置
|
||||
const runResetPaginationRequest = (
|
||||
extraConfig?: TableRequestConfig,
|
||||
// 同步执行 request 请求，允许重置 pagination 请求，返回 Promise 对象
|
||||
const runResetPaginationRequest: TableProInst['runTableRequest'] = (
|
||||
extraConfig,
|
||||
reset = true,
|
||||
) => {
|
||||
if (reset) {
|
||||
@ -106,6 +108,20 @@ export default defineComponent({
|
||||
tableRequestRef.value?.(requestParams)
|
||||
}
|
||||
|
||||
// 异步执行 request 请求，允许重置 pagination 请求，返回 Promise 对象
|
||||
const runResetPaginationRequestAsync: TableProInst['runAsyncTableRequest'] =
|
||||
(extraConfig, reset = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
runResetPaginationRequest(extraConfig, reset)
|
||||
|
||||
resolve(void 0)
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
setItemCount(props.paginationCount)
|
||||
setCallback(() => {
|
||||
@ -124,14 +140,16 @@ export default defineComponent({
|
||||
|
||||
if (onRegister) {
|
||||
call(onRegister, {
|
||||
...tableFns,
|
||||
...(tableFns as unknown as RTableInst),
|
||||
getTablePagination: update,
|
||||
runTableRequest: runResetPaginationRequest,
|
||||
runAsyncTableRequest: runResetPaginationRequestAsync,
|
||||
getCurrentTableRequestParams: combineRequestParams,
|
||||
resetTablePagination: resetPagination,
|
||||
} as unknown as TableProInst)
|
||||
})
|
||||
}
|
||||
})
|
||||
expose()
|
||||
|
||||
return {
|
||||
register,
|
||||
|
||||
@ -195,6 +195,29 @@ export const useTablePro = () => {
|
||||
const resetTablePagination = () =>
|
||||
getTableProInstance().resetTablePagination.call(null)
|
||||
|
||||
/**
|
||||
*
|
||||
* @param extraConfig 额外请求合并配置项
|
||||
* @param reset 是否重置分页请求
|
||||
*
|
||||
* @description
|
||||
* 异步手动触发表格请求，用于手动刷新表格。
|
||||
*/
|
||||
const runAsyncTableRequest = <
|
||||
T extends Recordable,
|
||||
ExcludeParams extends keyof T = keyof T,
|
||||
>(
|
||||
extraConfig?: TableRequestConfig<T, ExcludeParams>,
|
||||
reset?: boolean,
|
||||
) => getTableProInstance().runAsyncTableRequest.call(null, extraConfig, reset)
|
||||
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 获取 TablePro 组件配置。
|
||||
*/
|
||||
const getTableProConfig = () => getTableProInstance().config
|
||||
|
||||
return [
|
||||
register,
|
||||
{
|
||||
@ -211,6 +234,8 @@ export const useTablePro = () => {
|
||||
print,
|
||||
getCurrentTableRequestParams,
|
||||
resetTablePagination,
|
||||
runAsyncTableRequest,
|
||||
getTableProConfig,
|
||||
},
|
||||
] as const
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@ import { omit } from 'lodash-es'
|
||||
import type { PropType } from 'vue'
|
||||
import type {
|
||||
TableProInst,
|
||||
TablePagination,
|
||||
TableRequestConfig,
|
||||
PaginationPrefix,
|
||||
TablePaginationUpdate,
|
||||
} from './types'
|
||||
import type { AnyFC } from '@/types'
|
||||
|
||||
@ -67,7 +67,7 @@ const props = {
|
||||
* @default undefined
|
||||
*/
|
||||
onTablePaginationUpdate: {
|
||||
type: Function as PropType<(pagination: TablePagination) => void>,
|
||||
type: Function as PropType<TablePaginationUpdate>,
|
||||
},
|
||||
/**
|
||||
*
|
||||
|
||||
@ -17,16 +17,20 @@ export type FormatRangeTime = {
|
||||
target: [string | number, string | number]
|
||||
}
|
||||
|
||||
export interface BasePagination {
|
||||
page: number
|
||||
pageSize: number
|
||||
itemCount: number
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* Pagination 分页配置。
|
||||
*/
|
||||
export interface TablePagination {
|
||||
page: number
|
||||
pageSize: number
|
||||
itemCount: number
|
||||
}
|
||||
export type TablePagination = BasePagination
|
||||
|
||||
export type TablePaginationUpdate = (pagination: TablePagination) => void
|
||||
|
||||
export type PaginationPrefix = UsePaginationOptions['prefix']
|
||||
|
||||
@ -100,6 +104,30 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
|
||||
extraConfig?: TableRequestConfig<T, ExcludeParams>,
|
||||
reset?: boolean,
|
||||
) => void
|
||||
/**
|
||||
*
|
||||
* @param extraConfig 额外请求合并配置项
|
||||
* @param reset 是否重置分页请求
|
||||
*
|
||||
* @description
|
||||
* 异步手动触发表格请求，用于手动刷新表格。
|
||||
*
|
||||
* @example
|
||||
* const [register, { runAsyncTableRequest }] = useTablePro()
|
||||
*
|
||||
* // 重置分页请求
|
||||
* runAsyncTableRequest(void 0, true)
|
||||
* runAsyncTableRequest()
|
||||
* // 不重置分页请求
|
||||
* runAsyncTableRequest(void 0, false)
|
||||
*/
|
||||
runAsyncTableRequest: <
|
||||
T extends Recordable,
|
||||
ExcludeParams extends keyof T = keyof T,
|
||||
>(
|
||||
extraConfig?: TableRequestConfig<T, ExcludeParams>,
|
||||
reset?: boolean,
|
||||
) => Promise<void>
|
||||
/**
|
||||
*
|
||||
* @param extraConfig 额外请求合并配置项
|
||||
@ -132,3 +160,24 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
|
||||
*/
|
||||
resetTablePagination: () => void
|
||||
}
|
||||
|
||||
export interface TableProFieldNames {
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 分页器页码字段。
|
||||
*/
|
||||
page: string
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 分页器每页条数字段。
|
||||
*/
|
||||
pageSize: string
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 分页器总条数字段。
|
||||
*/
|
||||
itemCount: string
|
||||
}
|
||||
|
||||
2
src/types/properties.d.ts
vendored
2
src/types/properties.d.ts
vendored
@ -4,7 +4,7 @@ import type { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
// 为 vue 添加一些自定义属性
|
||||
// https://cn.vuejs.org/guide/typescript/options-api#augmenting-global-properties
|
||||
declare module 'vue' {
|
||||
declare module '*.vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$router: ReturnType<typeof useRouter>
|
||||
$route: ReturnType<typeof useRoute>
|
||||
|
||||
@ -9,11 +9,18 @@ import {
|
||||
NButton,
|
||||
NRadio,
|
||||
NRadioGroup,
|
||||
NCard,
|
||||
} from 'naive-ui'
|
||||
|
||||
import { useForm, useModal } from '@/components'
|
||||
import { useForm } from '@/components'
|
||||
|
||||
import type { RFormRules } from '@/components'
|
||||
interface FormModel {
|
||||
name: string | null
|
||||
age: number | null
|
||||
gender: string | null
|
||||
date: Date | null
|
||||
remark: string | null
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RFormDemo',
|
||||
@ -21,8 +28,15 @@ export default defineComponent({
|
||||
// 使用以下 hooks 的时候，应该注意调用时机
|
||||
const [
|
||||
register,
|
||||
{ getFormInstance, validate, restoreValidation, formModel, formRules },
|
||||
] = useForm(
|
||||
{
|
||||
getFormInstance,
|
||||
validate,
|
||||
restoreValidation,
|
||||
formModel,
|
||||
formRules,
|
||||
reset,
|
||||
},
|
||||
] = useForm<FormModel>(
|
||||
{
|
||||
name: null,
|
||||
age: null,
|
||||
@ -35,6 +49,7 @@ export default defineComponent({
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: ['blur', 'change'],
|
||||
key: 'name',
|
||||
},
|
||||
date: {
|
||||
required: true,
|
||||
@ -56,93 +71,102 @@ export default defineComponent({
|
||||
},
|
||||
)
|
||||
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 如果待验证数据类型为: number, array 等，需要手动设置 type 类型。
|
||||
* 具体可以吃查看: async-validator type
|
||||
* @see https://github.com/yiminghe/async-validator?tab=readme-ov-file#type
|
||||
*
|
||||
* 如果你需要自定义验证，可以查看：naive ui custom validation
|
||||
* @see https://www.naiveui.com/zh-CN/dark/components/form#custom-validation.vue
|
||||
*
|
||||
* 如果只是简单的 rules 管理，可以在初始化 useForm 的时候传入第二个参数；
|
||||
* 然后使用 formRules 方法获取到初始化 rules 数据。
|
||||
*/
|
||||
const rules = ref(formRules())
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
* 如果只是简单的数据，可以在初始化 useForm 的时候直接传入第一个参数；
|
||||
* 然后使用 formModel 方法获取到初始化 model 数据。
|
||||
*
|
||||
* 动态的复杂数据，不建议使用该方法管理 model；手动的拆分出来是一个更加好的选择。
|
||||
* 当然，在 vue 中，推荐使用该方法进行表单值的初始化操作；
|
||||
* 因为，可以在你需要的时候实现便捷的一键初始化表单需求。
|
||||
*/
|
||||
const condition = ref(formModel())
|
||||
|
||||
/**
|
||||
*
|
||||
* @param key 需要校验的字段。
|
||||
*
|
||||
* @see https://www.naiveui.com/zh-CN/dark/components/form#partially-apply-rules.vue
|
||||
*
|
||||
* @description
|
||||
* 执行部分的校验规则。
|
||||
*/
|
||||
const onlyValidateSection = (key: string) => {
|
||||
validate(void 0, (rules) => {
|
||||
return rules?.key === key
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
register,
|
||||
rules,
|
||||
condition,
|
||||
restoreValidation,
|
||||
formModel,
|
||||
validate,
|
||||
formRules,
|
||||
onlyValidateSection,
|
||||
reset,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { rules } = this
|
||||
const { register, restoreValidation, formModel, validate } = this
|
||||
const { condition } = this
|
||||
const {
|
||||
register,
|
||||
restoreValidation,
|
||||
validate,
|
||||
formRules,
|
||||
onlyValidateSection,
|
||||
reset,
|
||||
} = this
|
||||
|
||||
return (
|
||||
<RForm onRegister={register} rules={rules} model={this.condition}>
|
||||
<NCard title="useForm 表单校验">
|
||||
<RForm onRegister={register} rules={formRules()} model={condition}>
|
||||
<NGrid cols={24} xGap={24}>
|
||||
<NFormItemGi label="姓名" path="name" span={12}>
|
||||
<NInput v-model:value={this.condition.name} />
|
||||
<NInput v-model:value={condition.name} />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi label="年龄" path="age" span={12}>
|
||||
<NInputNumber
|
||||
v-model:value={this.condition.age}
|
||||
v-model:value={condition.age}
|
||||
showButton={false}
|
||||
style="width: 100%"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi label="出生日期" path="date" span={12}>
|
||||
<NDatePicker
|
||||
v-model:value={this.condition.date}
|
||||
style="width: 100%"
|
||||
/>
|
||||
<NDatePicker v-model:value={condition.date} style="width: 100%" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi label="性别" path="gender" span={12}>
|
||||
<NRadioGroup v-model:value={this.condition.gender}>
|
||||
<NRadioGroup v-model:value={condition.gender}>
|
||||
<NRadio value="girl">女</NRadio>
|
||||
<NRadio value="man">男</NRadio>
|
||||
</NRadioGroup>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi label="备注信息" span={24}>
|
||||
<NInput type="textarea" v-model:value={this.condition.remark} />
|
||||
<NInput type="textarea" v-model:value={condition.remark} />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span={24}>
|
||||
<NFlex justify="flex-end" style="width: 100%">
|
||||
<NButton
|
||||
type="info"
|
||||
onClick={() => {
|
||||
this.condition = formModel()
|
||||
|
||||
restoreValidation()
|
||||
}}
|
||||
>
|
||||
<NButton type="info" onClick={() => reset(this.condition)}>
|
||||
重置表单为初始状态
|
||||
</NButton>
|
||||
<NButton type="warning" onClick={restoreValidation.bind(this)}>
|
||||
移除校验状态
|
||||
</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
onClick={() => onlyValidateSection('name')}
|
||||
>
|
||||
仅校验姓名字段
|
||||
</NButton>
|
||||
<NButton type="primary" onClick={() => validate()}>
|
||||
校验
|
||||
</NButton>
|
||||
<NButton attrType="reset">重置</NButton>
|
||||
</NFlex>
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</RForm>
|
||||
</NCard>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
@ -2,11 +2,20 @@ import { NCard, NFlex } from 'naive-ui'
|
||||
|
||||
const RouterDemoDetail = defineComponent({
|
||||
name: 'RouterDemoDetail',
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
|
||||
return {
|
||||
route,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { route } = this
|
||||
|
||||
return (
|
||||
<NFlex>
|
||||
<NCard title={(this.$route.query.name as string) || 'hello'}>
|
||||
你好 {this.$route.query.name}
|
||||
<NCard title={(route.query.name as string) || 'hello'}>
|
||||
你好 {route.query.name}
|
||||
</NCard>
|
||||
<NCard title="平层路由详情页面">我是平层路由详情页面</NCard>
|
||||
<NCard title="TIP">
|
||||
|
||||
@ -19,20 +19,19 @@ import { uuid } from '@/utils'
|
||||
import { useHookPlusRequest } from '@/axios'
|
||||
import Mock from 'mockjs'
|
||||
import dayjs from 'dayjs'
|
||||
import { useTablePro } from '@/components'
|
||||
import { useCheckedRowKeys } from '@/components'
|
||||
import { useCheckedRowKeys, useTablePro, useForm } from '@/components'
|
||||
import { useDayjs } from '@/hooks'
|
||||
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
|
||||
type RowData = {
|
||||
key: number | string
|
||||
name: string
|
||||
name: string | null
|
||||
age: number
|
||||
address: string
|
||||
tags: string[]
|
||||
remark: string
|
||||
status: string
|
||||
status: string | null
|
||||
statusText: string
|
||||
signTimeEnd: number
|
||||
signTimeStart: number
|
||||
@ -100,6 +99,11 @@ export default defineComponent({
|
||||
setup() {
|
||||
const { format } = useDayjs()
|
||||
|
||||
const [register, { formModel, reset }] = useForm<ParamsRef>({
|
||||
RangeTime: null,
|
||||
name: null,
|
||||
status: null,
|
||||
})
|
||||
/**
|
||||
*
|
||||
* @description
|
||||
@ -109,7 +113,13 @@ export default defineComponent({
|
||||
*/
|
||||
const [
|
||||
tableProRegister,
|
||||
{ runTableRequest, getCurrentTableRequestParams, print, downloadCsv },
|
||||
{
|
||||
runTableRequest,
|
||||
getCurrentTableRequestParams,
|
||||
print,
|
||||
downloadCsv,
|
||||
runAsyncTableRequest,
|
||||
},
|
||||
] = useTablePro()
|
||||
// 表格数据
|
||||
const tableDataRef = ref<RowData[]>([])
|
||||
@ -163,7 +173,7 @@ export default defineComponent({
|
||||
// 表格分页数据
|
||||
const itemCountRef = ref(0)
|
||||
// 查询条件
|
||||
const conditionRef = ref<ParamsRef>({})
|
||||
const conditionRef = ref<ParamsRef>(formModel())
|
||||
// 缓存模拟数据，不用关心
|
||||
const mockPersonList = ref<RowData[]>(
|
||||
(() => {
|
||||
@ -227,7 +237,7 @@ export default defineComponent({
|
||||
const defaultLength = mockPersonList.value.length
|
||||
|
||||
if (name) {
|
||||
list = list.filter((curr) => curr.name.includes(name))
|
||||
list = list.filter((curr) => curr.name!.includes(name))
|
||||
}
|
||||
|
||||
if (status) {
|
||||
@ -294,6 +304,8 @@ export default defineComponent({
|
||||
clearAll,
|
||||
collapseRef,
|
||||
selectKey,
|
||||
register,
|
||||
reset,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
@ -315,11 +327,13 @@ export default defineComponent({
|
||||
clearKey,
|
||||
clearAll,
|
||||
selectKey,
|
||||
register,
|
||||
reset,
|
||||
} = this
|
||||
|
||||
return (
|
||||
<NFlex vertical>
|
||||
<RCollapse open={this.collapseRef} bordered>
|
||||
<RCollapse open={this.collapseRef} onRegister={register}>
|
||||
{{
|
||||
default: () => (
|
||||
<>
|
||||
@ -356,6 +370,7 @@ export default defineComponent({
|
||||
),
|
||||
action: () => (
|
||||
<NFlex>
|
||||
<NButton onClick={() => reset(this.conditionRef)}>重置</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
onClick={() => runTableRequest()}
|
||||
|
||||
@ -86,6 +86,8 @@
|
||||
"onWatcherCleanup": true,
|
||||
"useId": true,
|
||||
"useModel": true,
|
||||
"useTemplateRef": true
|
||||
"useTemplateRef": true,
|
||||
"Slot": true,
|
||||
"Slots": true
|
||||
}
|
||||
}
|
||||
|
||||
2
unplugin/auto-imports.d.ts
vendored
2
unplugin/auto-imports.d.ts
vendored
@ -83,6 +83,6 @@ declare global {
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user