bowen
2 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with
41 additions and
27 deletions
-
src/api/demo/model/tableModel.ts
-
src/components/Form/src/hooks/useForm.ts
-
src/components/Form/src/types/form.ts
-
src/components/Markdown/src/MarkdownViewer.vue
-
src/components/Table/src/components/settings/SizeSetting.vue
-
src/components/Tree/src/hooks/useTree.ts
-
src/views/demo/page/form/high/PersonTable.vue
-
src/views/demo/table/EditRowTable.vue
-
src/views/form-design/components/VFormCreate/index.vue
-
src/views/form-design/hooks/useFormInstanceMethods.ts
-
src/views/form-design/hooks/useVFormMethods.ts
-
types/global.d.ts
|
|
|
@ -2,7 +2,7 @@ import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel'; |
|
|
|
/** |
|
|
|
* @description: Request list interface parameters |
|
|
|
*/ |
|
|
|
export type DemoParams = BasicPageParams; |
|
|
|
export type DemoParams = Partial<BasicPageParams>; |
|
|
|
|
|
|
|
export interface DemoListItem { |
|
|
|
id: string; |
|
|
|
|
|
|
|
@ -107,7 +107,7 @@ export function useForm(props?: Props): UseFormReturnType { |
|
|
|
return form.submit(); |
|
|
|
}, |
|
|
|
|
|
|
|
validate: async (nameList?: NamePath[] | false): Promise<Recordable> => { |
|
|
|
validate: async <T = Recordable>(nameList?: NamePath[] | false): Promise<T> => { |
|
|
|
const form = await getForm(); |
|
|
|
return form.validate(nameList); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -39,7 +39,7 @@ export interface FormActionType { |
|
|
|
first?: boolean | undefined, |
|
|
|
) => Promise<void>; |
|
|
|
validateFields: (nameList?: NamePath[]) => Promise<any>; |
|
|
|
validate: <T = any>(nameList?: NamePath[] | false) => Promise<T>; |
|
|
|
validate: <T = Recordable>(nameList?: NamePath[] | false) => Promise<T>; |
|
|
|
scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -3,7 +3,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { defineProps, onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue'; |
|
|
|
import { onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue'; |
|
|
|
import VditorPreview from 'vditor/dist/method.min'; |
|
|
|
import { onMountedOrActivated } from '@vben/hooks'; |
|
|
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
|
|
|
|
|
|
|
@ -25,7 +25,7 @@ |
|
|
|
<script lang="ts"> |
|
|
|
import type { SizeType } from '../../types/table'; |
|
|
|
import { defineComponent, ref } from 'vue'; |
|
|
|
import { Tooltip, Dropdown, Menu } from 'ant-design-vue'; |
|
|
|
import { Tooltip, Dropdown, Menu, type MenuProps } from 'ant-design-vue'; |
|
|
|
import { ColumnHeightOutlined } from '@ant-design/icons-vue'; |
|
|
|
import { useI18n } from '/@/hooks/web/useI18n'; |
|
|
|
import { useTableContext } from '../../hooks/useTableContext'; |
|
|
|
@ -46,12 +46,12 @@ |
|
|
|
|
|
|
|
const selectedKeysRef = ref<SizeType[]>([table.getSize()]); |
|
|
|
|
|
|
|
function handleTitleClick({ key }: { key: SizeType }) { |
|
|
|
selectedKeysRef.value = [key]; |
|
|
|
const handleTitleClick: MenuProps['onClick'] = ({ key }) => { |
|
|
|
selectedKeysRef.value = [key as SizeType]; |
|
|
|
table.setProps({ |
|
|
|
size: key, |
|
|
|
size: key as SizeType, |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
return { |
|
|
|
handleTitleClick, |
|
|
|
|
|
|
|
@ -65,7 +65,7 @@ export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: Compute |
|
|
|
} |
|
|
|
|
|
|
|
// Update node
|
|
|
|
function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) { |
|
|
|
function updateNodeByKey(key: string, node: Omit<TreeDataItem, 'key'>, list?: TreeDataItem[]) { |
|
|
|
if (!key) return; |
|
|
|
const treeData = list || unref(treeDataRef); |
|
|
|
const { key: keyField, children: childrenField } = unref(getFieldNames); |
|
|
|
@ -184,7 +184,7 @@ export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: Compute |
|
|
|
if (!key && key !== 0) return null; |
|
|
|
const treeData = list || unref(treeDataRef); |
|
|
|
const { key: keyField, children: childrenField } = unref(getFieldNames); |
|
|
|
if (!keyField) return; |
|
|
|
if (!keyField) return null; |
|
|
|
treeData.forEach((item) => { |
|
|
|
if (selectedNode?.key || selectedNode?.key === 0) return selectedNode; |
|
|
|
if (item[keyField] === key) { |
|
|
|
|
|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<BasicTable @register="registerTable" @edit-change="handleEditChange"> |
|
|
|
<template #bodyCell="{ column, record }"> |
|
|
|
<template v-if="column.key === 'action'"> |
|
|
|
<TableAction :actions="createActions(record, column)" /> |
|
|
|
<TableAction :actions="createActions(record)" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</BasicTable> |
|
|
|
@ -107,7 +107,7 @@ |
|
|
|
data.push(addRow); |
|
|
|
} |
|
|
|
|
|
|
|
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] { |
|
|
|
function createActions(record: EditRecordRow): ActionItem[] { |
|
|
|
if (!record.editable) { |
|
|
|
return [ |
|
|
|
{ |
|
|
|
@ -122,13 +122,13 @@ |
|
|
|
return [ |
|
|
|
{ |
|
|
|
label: '保存', |
|
|
|
onClick: handleSave.bind(null, record, column), |
|
|
|
onClick: handleSave.bind(null, record), |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '取消', |
|
|
|
popConfirm: { |
|
|
|
title: '是否取消编辑', |
|
|
|
confirm: handleCancel.bind(null, record, column), |
|
|
|
confirm: handleCancel.bind(null, record), |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<BasicTable @register="registerTable" @edit-change="onEditChange"> |
|
|
|
<template #bodyCell="{ column, record }"> |
|
|
|
<template v-if="column.key === 'action'"> |
|
|
|
<TableAction :actions="createActions(record, column)" /> |
|
|
|
<TableAction :actions="createActions(record)" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</BasicTable> |
|
|
|
@ -278,7 +278,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] { |
|
|
|
function createActions(record: EditRecordRow): ActionItem[] { |
|
|
|
if (!record.editable) { |
|
|
|
return [ |
|
|
|
{ |
|
|
|
@ -291,13 +291,13 @@ |
|
|
|
return [ |
|
|
|
{ |
|
|
|
label: '保存', |
|
|
|
onClick: handleSave.bind(null, record, column), |
|
|
|
onClick: handleSave.bind(null, record), |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '取消', |
|
|
|
popConfirm: { |
|
|
|
title: '是否取消编辑', |
|
|
|
confirm: handleCancel.bind(null, record, column), |
|
|
|
confirm: handleCancel.bind(null, record), |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
@ -78,9 +78,16 @@ |
|
|
|
const fApi = useVModel(props, 'fApi', emit); |
|
|
|
|
|
|
|
const { submit, validate, clearValidate, resetFields, validateField } = |
|
|
|
useFormInstanceMethods(props, formModelNew, context, eFormModel); |
|
|
|
useFormInstanceMethods<['submit', 'change', 'update:fApi', 'update:formModel']>( |
|
|
|
props, |
|
|
|
formModelNew, |
|
|
|
context, |
|
|
|
eFormModel, |
|
|
|
); |
|
|
|
|
|
|
|
const { linkOn, ...methods } = useVFormMethods( |
|
|
|
const { linkOn, ...methods } = useVFormMethods< |
|
|
|
['submit', 'change', 'update:fApi', 'update:formModel'] |
|
|
|
>( |
|
|
|
{ formConfig: props.formConfig, formData: props.formModel } as unknown as IProps, |
|
|
|
context, |
|
|
|
eFormModel, |
|
|
|
|
|
|
|
@ -1,13 +1,13 @@ |
|
|
|
import { IAnyObject } from '../typings/base-type'; |
|
|
|
import { Ref, SetupContext, getCurrentInstance, toRaw } from 'vue'; |
|
|
|
import { Ref, SetupContext, getCurrentInstance, toRaw, type EmitsOptions } from 'vue'; |
|
|
|
import { cloneDeep, forOwn, isFunction } from 'lodash-es'; |
|
|
|
import { AForm, IVFormComponent } from '../typings/v-form-component'; |
|
|
|
import { Form } from 'ant-design-vue'; |
|
|
|
|
|
|
|
export function useFormInstanceMethods( |
|
|
|
export function useFormInstanceMethods<E extends EmitsOptions = EmitsOptions>( |
|
|
|
props: IAnyObject, |
|
|
|
formdata, |
|
|
|
context: Partial<SetupContext>, |
|
|
|
context: SetupContext<E>, |
|
|
|
_formInstance: Ref<AForm | null>, |
|
|
|
) { |
|
|
|
/** |
|
|
|
|
|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import { Ref, SetupContext } from 'vue'; |
|
|
|
import { Ref, SetupContext, type EmitsOptions } from 'vue'; |
|
|
|
import { IVFormComponent, IFormConfig, AForm } from '../typings/v-form-component'; |
|
|
|
import { findFormItem, formItemsForEach } from '../utils'; |
|
|
|
import { cloneDeep, isFunction } from 'lodash-es'; |
|
|
|
@ -52,9 +52,9 @@ export interface IVFormMethods extends Partial<IFormInstanceMethods> { |
|
|
|
getData: IGetData; |
|
|
|
disable: IDisable; |
|
|
|
} |
|
|
|
export function useVFormMethods( |
|
|
|
export function useVFormMethods<E extends EmitsOptions = EmitsOptions>( |
|
|
|
props: IProps, |
|
|
|
_context: Partial<SetupContext>, |
|
|
|
_context: SetupContext<E>, |
|
|
|
formInstance: Ref<AForm | null>, |
|
|
|
formInstanceMethods: Partial<IFormInstanceMethods>, |
|
|
|
): IVFormMethods { |
|
|
|
|
|
|
|
@ -22,6 +22,13 @@ declare global { |
|
|
|
// __APP__: App<Element>;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// fix FullScreen type error
|
|
|
|
interface Document { |
|
|
|
mozFullScreenElement?: Element; |
|
|
|
msFullscreenElement?: Element; |
|
|
|
webkitFullscreenElement?: Element; |
|
|
|
} |
|
|
|
|
|
|
|
// vue
|
|
|
|
declare type PropType<T> = VuePropType<T>; |
|
|
|
declare type VueNode = VNodeChild | JSX.Element; |
|
|
|
|