Skip to content

B
basic-vue-admin
提交 0b6110a8 作者: vben
操作

feat(form-page): add form page demo

上级 4ddee05d
正在显示 包含 1389 行增加 和 116 行删除
CHANGELOG.zh_CN.md
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
- 新增 base64 文件流下载 - 新增 base64 文件流下载
- 优化上传组件及示例 - 优化上传组件及示例
- 新增可编辑行示例
- 新增个人页
- 新增表单页
### 🎫 Chores ### 🎫 Chores
......
README.md
...@@ -232,6 +232,8 @@ yarn clean:lib # 删除node_modules，兼容window系统 ...@@ -232,6 +232,8 @@ yarn clean:lib # 删除node_modules，兼容window系统
## 正在开发的功能 ## 正在开发的功能
- [ ] 新分支全局国家化
- [ ] 示例 page 页面
- [ ] 主题配置 - [ ] 主题配置
- [ ] 黑暗主题 - [ ] 黑暗主题
- [ ] 打包 CDN - [ ] 打包 CDN
......
package.json
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
"dependencies": { "dependencies": {
"@iconify/iconify": "^2.0.0-rc.2", "@iconify/iconify": "^2.0.0-rc.2",
"@vueuse/core": "^4.0.0-beta.41", "@vueuse/core": "^4.0.0-beta.41",
"ant-design-vue": "^2.0.0-rc.1", "ant-design-vue": "^2.0.0-beta.15",
"apexcharts": "3.22.0", "apexcharts": "3.22.0",
"axios": "^0.21.0", "axios": "^0.21.0",
"echarts": "^4.9.0", "echarts": "^4.9.0",
......
src/components/Basic/src/BasicHelp.vue
...@@ -48,6 +48,10 @@ ...@@ -48,6 +48,10 @@
bottom: 0, bottom: 0,
}), }),
}, },
placement: {
type: String as PropType<string>,
defualt: 'right',
},
}, },
setup(props, { slots }) { setup(props, { slots }) {
const getOverlayStyleRef = computed(() => { const getOverlayStyleRef = computed(() => {
...@@ -97,7 +101,7 @@ ...@@ -97,7 +101,7 @@
overlayClassName: 'base-help__wrap', overlayClassName: 'base-help__wrap',
autoAdjustOverflow: true, autoAdjustOverflow: true,
overlayStyle: unref(getOverlayStyleRef), overlayStyle: unref(getOverlayStyleRef),
placement: 'right', placement: props.placement,
getPopupContainer: () => getPopupContainer(), getPopupContainer: () => getPopupContainer(),
}, },
{ {
......
src/components/Footer/index.ts 0 → 100644
export { default as AppFooter } from './src/index.vue';
src/components/Footer/src/index.vue 0 → 100644
<template>
<div class="app-footer" :style="{ width: getWidth }">
<div class="app-footer__left">
<slot name="left" />
</div>
<div class="app-footer__right">
<slot name="right" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, unref } from 'vue';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
import { appStore } from '/@/store/modules/app';
import { menuStore } from '/@/store/modules/menu';
export default defineComponent({
name: 'AppFooter',
setup() {
const getMiniWidth = computed(() => {
const {
menuSetting: { collapsedShowTitle },
} = appStore.getProjectConfig;
return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
});
const getWidth = computed(() => {
const { getCollapsedState, getMenuWidthState } = menuStore;
const width = getCollapsedState ? unref(getMiniWidth) : getMenuWidthState;
return `calc(100% - ${width}px)`;
});
return { getWidth };
},
});
</script>
<style lang="less" scoped>
.app-footer {
position: fixed;
right: 0;
bottom: 0;
z-index: 99;
display: flex;
width: 100%;
align-items: center;
padding: 0 24px;
line-height: 44px;
background: #fff;
border-top: 1px solid #f0f0f0;
box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
0 -12px 48px 16px rgba(0, 0, 0, 0.03);
transition: width 0.3s;
&__left {
flex: 1 1;
}
}
</style>
src/components/Form/src/BasicForm.vue
<template> <template>
<Form v-bind="$attrs" ref="formElRef" :model="formModel"> <Form v-bind="{ ...$attrs, ...$props }" ref="formElRef" :model="formModel">
<Row :class="getProps.compact ? 'compact-form-row' : ''"> <Row :class="getProps.compact ? 'compact-form-row' : ''">
<slot name="formHeader" /> <slot name="formHeader" />
<template v-for="schema in getSchema" :key="schema.field"> <template v-for="schema in getSchema" :key="schema.field">
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
const formModel = reactive({}); const formModel = reactive({});
const actionState = reactive({ const actionState = reactive({
resetAction: () => {}, resetAction: {},
submitAction: () => {}, submitAction: {},
}); });
const advanceState = reactive<AdvanceState>({ const advanceState = reactive<AdvanceState>({
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
const defaultValueRef = ref<any>({}); const defaultValueRef = ref<any>({});
const propsRef = ref<Partial<FormProps>>({}); const propsRef = ref<Partial<FormProps>>({});
const schemaRef = ref<FormSchema[] | null>(null); const schemaRef = ref<Nullable<FormSchema[]>>(null);
const formElRef = ref<Nullable<FormActionType>>(null); const formElRef = ref<Nullable<FormActionType>>(null);
const getMergePropsRef = computed( const getMergePropsRef = computed(
...@@ -98,7 +98,15 @@ ...@@ -98,7 +98,15 @@
for (const schema of schemas) { for (const schema of schemas) {
const { defaultValue, component } = schema; const { defaultValue, component } = schema;
if (defaultValue && dateItemType.includes(component!)) { if (defaultValue && dateItemType.includes(component!)) {
schema.defaultValue = moment(defaultValue); if (!Array.isArray(defaultValue)) {
schema.defaultValue = moment(defaultValue);
} else {
const def: moment.Moment[] = [];
defaultValue.forEach((item) => {
def.push(moment(item));
});
schema.defaultValue = def;
}
} }
} }
return schemas as FormSchema[]; return schemas as FormSchema[];
...@@ -139,8 +147,8 @@ ...@@ -139,8 +147,8 @@
formModel, formModel,
getSchema, getSchema,
defaultValueRef, defaultValueRef,
formElRef: formElRef as any, formElRef: formElRef as Ref<FormActionType>,
schemaRef: schemaRef as any, schemaRef: schemaRef as Ref<FormSchema[]>,
handleFormValues, handleFormValues,
actionState, actionState,
}); });
...@@ -156,6 +164,13 @@ ...@@ -156,6 +164,13 @@
} }
); );
watch(
() => getSchema.value,
() => {
initDefault();
}
);
/** /**
* @description:设置表单 * @description:设置表单
*/ */
......
src/components/Form/src/FormItem.tsx
...@@ -250,14 +250,21 @@ export default defineComponent({ ...@@ -250,14 +250,21 @@ export default defineComponent({
} }
function renderLabelHelpMessage() { function renderLabelHelpMessage() {
const { label, helpMessage, helpComponentProps } = props.schema; const { label, helpMessage, helpComponentProps, subLabel } = props.schema;
const renderLabel = subLabel ? (
<span>
{label} <span style="color:#00000073">{subLabel}</span>
</span>
) : (
label
);
if (!helpMessage || (Array.isArray(helpMessage) && helpMessage.length === 0)) { if (!helpMessage || (Array.isArray(helpMessage) && helpMessage.length === 0)) {
return label; return renderLabel;
} }
return ( return (
<span> <span>
{label} {renderLabel}
<BasicHelp class="mx-1" text={helpMessage} {...helpComponentProps} /> <BasicHelp placement="top" class="mx-1" text={helpMessage} {...helpComponentProps} />
</span> </span>
); );
} }
...@@ -291,6 +298,7 @@ export default defineComponent({ ...@@ -291,6 +298,7 @@ export default defineComponent({
const { colProps = {}, colSlot, renderColContent, component } = props.schema; const { colProps = {}, colSlot, renderColContent, component } = props.schema;
if (!componentMap.has(component)) return null; if (!componentMap.has(component)) return null;
const { baseColProps = {} } = props.formProps; const { baseColProps = {} } = props.formProps;
const realColProps = { ...baseColProps, ...colProps }; const realColProps = { ...baseColProps, ...colProps };
const { isIfShow, isShow } = getShow(); const { isIfShow, isShow } = getShow();
const getContent = () => { const getContent = () => {
......
src/components/Form/src/helper.ts
...@@ -7,7 +7,7 @@ export function createPlaceholderMessage(component: ComponentType) { ...@@ -7,7 +7,7 @@ export function createPlaceholderMessage(component: ComponentType) {
if (component.includes('Input') || component.includes('Complete')) { if (component.includes('Input') || component.includes('Complete')) {
return '请输入'; return '请输入';
} }
if (component.includes('Picker') && !component.includes('Range')) { if (component.includes('Picker')) {
return '请选择'; return '请选择';
} }
if ( if (
......
src/components/Form/src/hooks/useLabelWidth.ts
...@@ -25,19 +25,26 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref< ...@@ -25,19 +25,26 @@ export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<
const { labelCol = {}, wrapperCol = {} } = schemaItem.itemProps || {}; const { labelCol = {}, wrapperCol = {} } = schemaItem.itemProps || {};
const { labelWidth, disabledLabelWidth } = schemaItem; const { labelWidth, disabledLabelWidth } = schemaItem;
const { labelWidth: globalLabelWidth } = unref(propsRef) as any; const {
labelWidth: globalLabelWidth,
labelCol: globalLabelCol,
wrapperCol: globWrapperCol,
} = unref(propsRef) as any;
// 如果全局有设置labelWidth, 则所有item使用 // 如果全局有设置labelWidth, 则所有item使用
if ((!globalLabelWidth && !labelWidth) || disabledLabelWidth) { if ((!globalLabelWidth && !labelWidth && !globalLabelCol) || disabledLabelWidth) {
return { labelCol, wrapperCol }; return { labelCol, wrapperCol };
} }
let width = labelWidth || globalLabelWidth; let width = labelWidth || globalLabelWidth;
const col = { ...globalLabelCol, ...labelCol };
const wrapCol = { ...globWrapperCol, ...wrapperCol };
if (width) { if (width) {
width = isNumber(width) ? `${width}px` : width; width = isNumber(width) ? `${width}px` : width;
} }
return { return {
labelCol: { style: { width }, ...labelCol }, labelCol: { style: { width }, ...col },
wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapperCol }, wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol },
}; };
}); });
} }
src/components/Form/src/types/form.ts
...@@ -41,6 +41,7 @@ export type RegisterFn = (formInstance: FormActionType) => void; ...@@ -41,6 +41,7 @@ export type RegisterFn = (formInstance: FormActionType) => void;
export type UseFormReturnType = [RegisterFn, FormActionType]; export type UseFormReturnType = [RegisterFn, FormActionType];
export interface FormProps { export interface FormProps {
// layout?: 'vertical' | 'inline' | 'horizontal';
// 表单值 // 表单值
model?: any; model?: any;
// 整个表单所有项宽度 // 整个表单所有项宽度
...@@ -108,6 +109,8 @@ export interface FormSchema { ...@@ -108,6 +109,8 @@ export interface FormSchema {
valueField?: string; valueField?: string;
// 标签名 // 标签名
label: string; label: string;
// 辅助文本
subLabel?: string;
// 文本右侧帮助文本 // 文本右侧帮助文本
helpMessage?: string | string[]; helpMessage?: string | string[];
// BaseHelp组件props // BaseHelp组件props
......
src/components/Menu/src/BasicMenu.tsx
...@@ -136,9 +136,9 @@ export default defineComponent({ ...@@ -136,9 +136,9 @@ export default defineComponent({
const flag = await beforeClickFn(menu); const flag = await beforeClickFn(menu);
if (!flag) return; if (!flag) return;
} }
emit('menuClick', menu);
const { path } = menu; const { path } = menu;
menuState.selectedKeys = [path]; menuState.selectedKeys = [path];
emit('menuClick', menu);
} }
function handleMenuChange() { function handleMenuChange() {
...@@ -219,7 +219,6 @@ export default defineComponent({ ...@@ -219,7 +219,6 @@ export default defineComponent({
: {}; : {};
return ( return (
<Menu <Menu
forceSubMenuRender={props.isAppMenu}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
defaultSelectedKeys={defaultSelectedKeys} defaultSelectedKeys={defaultSelectedKeys}
mode={mode} mode={mode}
......
src/components/Table/index.ts
export { default as BasicTable } from './src/BasicTable.vue'; export { default as BasicTable } from './src/BasicTable.vue';
export { default as TableAction } from './src/components/TableAction'; export { default as TableAction } from './src/components/TableAction';
export { default as TableImg } from './src/components/TableImg.vue'; export { default as TableImg } from './src/components/TableImg.vue';
export { renderEditableCell } from './src/components/renderEditableCell'; export { renderEditableCell, renderEditableRow } from './src/components/renderEditable';
export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue'; export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue';
export * from './src/types/table'; export * from './src/types/table';
...@@ -11,3 +11,5 @@ export * from './src/types/tableAction'; ...@@ -11,3 +11,5 @@ export * from './src/types/tableAction';
export { useTable } from './src/hooks/useTable'; export { useTable } from './src/hooks/useTable';
export type { FormSchema, FormProps } from '/@/components/Form/src/types/form'; export type { FormSchema, FormProps } from '/@/components/Form/src/types/form';
export type { EditRecordRow } from './src/components/renderEditable';
src/components/Table/src/components/TableAction.tsx
...@@ -32,7 +32,7 @@ export default defineComponent({ ...@@ -32,7 +32,7 @@ export default defineComponent({
disabled={disabled} disabled={disabled}
color={color} color={color}
{...action} {...action}
key={index} key={`${index}-${label}`}
> >
{() => ( {() => (
<> <>
...@@ -60,7 +60,7 @@ export default defineComponent({ ...@@ -60,7 +60,7 @@ export default defineComponent({
} = popConfirm; } = popConfirm;
return ( return (
<Popconfirm <Popconfirm
key={`P-${index}`} key={`p-${index}-${title}`}
title={title} title={title}
onConfirm={confirm} onConfirm={confirm}
onCancel={cancel} onCancel={cancel}
......
src/components/Table/src/components/renderEditableCell.tsx → src/components/Table/src/components/renderEditable.tsx
import { defineComponent, PropType, ref, unref, nextTick } from 'vue'; import { defineComponent, PropType, ref, unref, nextTick, watchEffect } from 'vue';
import { injectTable } from '../hooks/useProvinceTable';
import ClickOutSide from '/@/components/ClickOutSide/index.vue'; import ClickOutSide from '/@/components/ClickOutSide/index.vue';
import { RenderEditableCellParams } from '../types/table'; import { RenderEditableCellParams } from '../types/table';
import { ComponentType } from '../types/componentType'; import { ComponentType } from '../types/componentType';
import { componentMap } from '../componentMap'; import { componentMap } from '../componentMap';
import '../style/editable-cell.less';
import { isString, isBoolean } from '/@/utils/is'; import { isString, isBoolean } from '/@/utils/is';
import { FormOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue'; import { FormOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
import '../style/editable-cell.less';
const prefixCls = 'editable-cell'; const prefixCls = 'editable-cell';
const EditableCell = defineComponent({ const EditableCell = defineComponent({
name: 'EditableCell', name: 'EditableCell',
...@@ -37,14 +37,35 @@ const EditableCell = defineComponent({ ...@@ -37,14 +37,35 @@ const EditableCell = defineComponent({
type: String as PropType<ComponentType>, type: String as PropType<ComponentType>,
default: 'Input', default: 'Input',
}, },
editable: {
type: Boolean as PropType<boolean>,
default: false,
},
editRow: {
type: Boolean as PropType<boolean>,
default: false,
},
record: {
type: Object as PropType<EditRecordRow>,
},
placeholder: {
type: String as PropType<string>,
},
}, },
emits: ['submit', 'cancel'], emits: ['submit', 'cancel'],
setup(props, { attrs, emit }) { setup(props, { attrs, emit }) {
const table = injectTable();
const elRef = ref<any>(null); const elRef = ref<any>(null);
const isEditRef = ref(false); const isEditRef = ref(false);
const currentValueRef = ref<string | boolean>(props.value); const currentValueRef = ref<string | boolean>(props.value);
const defaultValueRef = ref<string | boolean>(props.value);
watchEffect(() => {
defaultValueRef.value = props.value;
if (isBoolean(props.editable)) {
isEditRef.value = props.editable;
}
});
function handleChange(e: any) { function handleChange(e: any) {
if (e && e.target && Reflect.has(e.target, 'value')) { if (e && e.target && Reflect.has(e.target, 'value')) {
...@@ -65,37 +86,55 @@ const EditableCell = defineComponent({ ...@@ -65,37 +86,55 @@ const EditableCell = defineComponent({
function handleCancel() { function handleCancel() {
isEditRef.value = false; isEditRef.value = false;
currentValueRef.value = defaultValueRef.value;
emit('cancel'); emit('cancel');
} }
if (props.record) {
/* eslint-disable */
props.record.onCancel = handleCancel;
/* eslint-disable */
props.record.onSubmit = handleSubmit;
}
function handleSubmit() { function handleSubmit() {
const { dataKey, dataIndex } = props; const { dataKey, dataIndex } = props;
if (!dataKey || !dataIndex) { if (!dataKey || !dataIndex) return;
return;
}
isEditRef.value = false;
const { getDataSource } = table; if (props.record) {
const dataSource = getDataSource(); /* eslint-disable */
const target = dataSource.find((item) => item.key === dataKey); props.record[dataIndex] = unref(currentValueRef) as string;
if (target) {
target[dataIndex] = unref(currentValueRef);
emit('submit', { dataKey, dataIndex, value: unref(currentValueRef) });
} }
isEditRef.value = false;
} }
function onClickOutside() { function onClickOutside() {
if (props.editRow) return;
const { component } = props; const { component } = props;
if (component && component.includes('Input')) { if (component && component.includes('Input')) {
handleCancel(); handleCancel();
} }
} }
function renderValue() {
const { value } = props;
if (props.editRow) {
return !unref(isEditRef) ? value : null;
}
return (
!unref(isEditRef) && (
<div class={`${prefixCls}__normal`} onClick={handleEdit}>
{value}
<FormOutlined class={`${prefixCls}__normal-icon`} />
</div>
)
);
}
return () => { return () => {
const { value, component, componentProps = {} } = props; const { component, componentProps = {} } = props;
const Comp = componentMap.get(component!) as any; const Comp = componentMap.get(component!) as any;
// const propsData: any = {};
return ( return (
<div class={prefixCls}> <div class={prefixCls}>
{unref(isEditRef) && ( {unref(isEditRef) && (
...@@ -103,6 +142,7 @@ const EditableCell = defineComponent({ ...@@ -103,6 +142,7 @@ const EditableCell = defineComponent({
{() => ( {() => (
<div class={`${prefixCls}__wrapper`}> <div class={`${prefixCls}__wrapper`}>
<Comp <Comp
placeholder={props.placeholder}
{...{ {...{
...attrs, ...attrs,
...componentProps, ...componentProps,
...@@ -114,21 +154,20 @@ const EditableCell = defineComponent({ ...@@ -114,21 +154,20 @@ const EditableCell = defineComponent({
onChange={handleChange} onChange={handleChange}
onPressEnter={handleSubmit} onPressEnter={handleSubmit}
/> />
<div class={`${prefixCls}__action`}> {!props.editRow && (
<CheckOutlined class={[`${prefixCls}__icon`, 'mx-2']} onClick={handleSubmit} /> <div class={`${prefixCls}__action`}>
<CloseOutlined class={[`${prefixCls}__icon `]} onClick={handleCancel} /> <CheckOutlined
</div> class={[`${prefixCls}__icon`, 'mx-2']}
onClick={handleSubmit}
/>
<CloseOutlined class={[`${prefixCls}__icon `]} onClick={handleCancel} />
</div>
)}
</div> </div>
)} )}
</ClickOutSide> </ClickOutSide>
)} )}
{renderValue()}
{!unref(isEditRef) && (
<div class={`${prefixCls}__normal`} onClick={handleEdit}>
{value}
<FormOutlined class={`${prefixCls}__normal-icon`} />
</div>
)}
</div> </div>
); );
}; };
...@@ -138,15 +177,16 @@ const EditableCell = defineComponent({ ...@@ -138,15 +177,16 @@ const EditableCell = defineComponent({
export function renderEditableCell({ export function renderEditableCell({
dataIndex, dataIndex,
component, component,
componentOn = {},
componentProps = {}, componentProps = {},
placeholder,
}: RenderEditableCellParams) { }: RenderEditableCellParams) {
return ({ text, record }: { text: string; record: any }) => { return ({ text, record }: { text: string; record: EditRecordRow }) => {
return ( return (
<EditableCell <EditableCell
{...componentOn}
{...componentProps} {...componentProps}
placeholder={placeholder}
value={text} value={text}
record={record}
dataKey={record.key} dataKey={record.key}
dataIndex={dataIndex} dataIndex={dataIndex}
component={component} component={component}
...@@ -154,3 +194,32 @@ export function renderEditableCell({ ...@@ -154,3 +194,32 @@ export function renderEditableCell({
); );
}; };
} }
export function renderEditableRow({
dataIndex,
component,
componentProps = {},
placeholder,
}: RenderEditableCellParams) {
return ({ text, record }: { text: string; record: EditRecordRow }) => {
return (
<EditableCell
{...componentProps}
value={text}
placeholder={placeholder}
editRow={true}
editable={record.editable}
dataKey={record.key}
record={record}
dataIndex={dataIndex}
component={component}
/>
);
};
}
export type EditRecordRow<T = { [key: string]: any }> = {
editable: boolean;
onCancel: Fn;
onSubmit: Fn;
} & T;
src/components/Table/src/types/table.ts
...@@ -68,8 +68,8 @@ export interface SorterResult { ...@@ -68,8 +68,8 @@ export interface SorterResult {
export interface RenderEditableCellParams { export interface RenderEditableCellParams {
dataIndex: string; dataIndex: string;
component?: ComponentType; component?: ComponentType;
componentOn?: { [key: string]: Fn };
componentProps?: any; componentProps?: any;
placeholder?: string;
} }
export interface FetchParams { export interface FetchParams {
...@@ -88,15 +88,15 @@ export type SizeType = 'default' | 'middle' | 'small' | 'large'; ...@@ -88,15 +88,15 @@ export type SizeType = 'default' | 'middle' | 'small' | 'large';
export interface TableActionType { export interface TableActionType {
reload: (opt?: FetchParams) => Promise<void>; reload: (opt?: FetchParams) => Promise<void>;
getSelectRows: () => any[]; getSelectRows: <T = any>() => T[];
clearSelectedRowKeys: () => void; clearSelectedRowKeys: () => void;
getSelectRowKeys: () => string[]; getSelectRowKeys: () => string[];
deleteSelectRowByKey: (key: string) => void; deleteSelectRowByKey: (key: string) => void;
setPagination: (info: Partial<PaginationProps>) => void; setPagination: (info: Partial<PaginationProps>) => void;
setTableData: (values: any[]) => void; setTableData: <T = any>(values: T[]) => void;
getColumns: (opt?: GetColumnsParams) => BasicColumn[]; getColumns: (opt?: GetColumnsParams) => BasicColumn[];
setColumns: (columns: BasicColumn[] | string[]) => void; setColumns: (columns: BasicColumn[] | string[]) => void;
getDataSource: () => any[]; getDataSource: <T = any>() => T[];
setLoading: (loading: boolean) => void; setLoading: (loading: boolean) => void;
setProps: (props: Partial<BasicTableProps>) => void; setProps: (props: Partial<BasicTableProps>) => void;
redoHeight: () => void; redoHeight: () => void;
......
src/components/Table/src/types/tableAction.ts
export interface ActionItem { export interface ActionItem {
on?: any;
onClick?: any; onClick?: any;
label: string; label: string;
disabled?: boolean; disabled?: boolean;
......
src/components/registerGlobComp.ts
import Icon from './Icon/index'; import Icon from './Icon/index';
import Button from './Button/index.vue'; import Button from './Button/index.vue';
import { AppFooter } from './Footer';
import { import {
// Need // Need
Button as AntButton, Button as AntButton,
...@@ -28,10 +29,12 @@ import { ...@@ -28,10 +29,12 @@ import {
Upload, Upload,
Transfer, Transfer,
Steps, Steps,
PageHeader,
Result,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { getApp } from '/@/useApp'; import { getApp } from '/@/useApp';
const compList = [Icon, Button, AntButton.Group]; const compList = [Icon, Button, AntButton.Group, AppFooter];
// Fix hmr multiple registered components // Fix hmr multiple registered components
let registered = false; let registered = false;
...@@ -70,5 +73,7 @@ export function registerGlobComp() { ...@@ -70,5 +73,7 @@ export function registerGlobComp() {
.use(Upload) .use(Upload)
.use(Transfer) .use(Transfer)
.use(Steps) .use(Steps)
.use(PageHeader)
.use(Result)
.use(Tabs); .use(Tabs);
} }
src/design/ant/index.less
...@@ -109,18 +109,21 @@ ...@@ -109,18 +109,21 @@
content: ''; content: '';
} }
.ant-form-item-with-help {
margin-bottom: 0;
}
.ant-form-item { .ant-form-item {
&-label label::after { &-label label::after {
margin: 0 6px 0 2px; margin: 0 6px 0 2px;
} }
}
&-control { .ant-form-item:not(.ant-form-item-with-help) {
line-height: 36px; margin-bottom: 20px;
}
} }
.ant-form-explain { .ant-form-explain {
margin-bottom: 2px;
font-size: 14px; font-size: 14px;
} }
......
src/design/index.less
...@@ -13,6 +13,14 @@ ...@@ -13,6 +13,14 @@
box-sizing: border-box; box-sizing: border-box;
} }
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s !important;
}
// Background color setting in full screen state in each browser // Background color setting in full screen state in each browser
::backdrop, ::backdrop,
html, html,
......
src/design/transition/base.less
.transition-default() { .transition-default() {
&-enter-active, &-enter-active,
&-leave-active { &-leave-active {
transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important; transition: 0.1s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
} }
&-move { &-move {
transition: transform 0.5s; transition: transform 0.2s;
} }
} }
......
src/design/transition/fade.less
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
/* fade-slide */ /* fade-slide */
.fade-slide-leave-active, .fade-slide-leave-active,
.fade-slide-enter-active { .fade-slide-enter-active {
transition: all 0.5s; transition: all 0.2s;
} }
.fade-slide-enter-from { .fade-slide-enter-from {
......
src/design/var/index.less
...@@ -16,4 +16,4 @@ ...@@ -16,4 +16,4 @@
@page-loading-z-index: 10000; @page-loading-z-index: 10000;
// left-menu // left-menu
@app-menu-item-height: 44px; @app-menu-item-height: 46px;
src/layouts/default/menu/LayoutMenu.tsx
...@@ -154,12 +154,12 @@ export default defineComponent({ ...@@ -154,12 +154,12 @@ export default defineComponent({
function handleMenuClick(menu: Menu) { function handleMenuClick(menu: Menu) {
const { path } = menu; const { path } = menu;
if (path) { if (path) {
push(path);
const { splitType } = props; const { splitType } = props;
// split mode top // split mode top
if (splitType === MenuSplitTyeEnum.TOP) { if (splitType === MenuSplitTyeEnum.TOP) {
menuStore.commitCurrentTopSplitMenuPathState(path); menuStore.commitCurrentTopSplitMenuPathState(path);
} }
push(path);
} }
} }
......
src/router/menus/modules/demo/form.ts
...@@ -14,7 +14,7 @@ const menu: MenuModule = { ...@@ -14,7 +14,7 @@ const menu: MenuModule = {
name: '基础表单', name: '基础表单',
tag: { tag: {
type: 'warn', type: 'warn',
content: 'updated', dot: true,
}, },
}, },
{ {
...@@ -34,7 +34,7 @@ const menu: MenuModule = { ...@@ -34,7 +34,7 @@ const menu: MenuModule = {
name: '表单校验', name: '表单校验',
tag: { tag: {
type: 'warn', type: 'warn',
content: 'updated', dot: true,
}, },
}, },
{ {
...@@ -42,7 +42,7 @@ const menu: MenuModule = { ...@@ -42,7 +42,7 @@ const menu: MenuModule = {
name: '动态表单', name: '动态表单',
tag: { tag: {
type: 'warn', type: 'warn',
content: 'updated', dot: true,
}, },
}, },
{ {
...@@ -50,7 +50,7 @@ const menu: MenuModule = { ...@@ -50,7 +50,7 @@ const menu: MenuModule = {
name: '自定义组件', name: '自定义组件',
tag: { tag: {
type: 'warn', type: 'warn',
content: 'updated', dot: true,
}, },
}, },
], ],
......
src/router/menus/modules/demo/page.ts
...@@ -16,6 +16,27 @@ const menu: MenuModule = { ...@@ -16,6 +16,27 @@ const menu: MenuModule = {
}, },
children: [ children: [
{ {
path: 'form',
name: '表单页',
tag: {
content: 'new',
},
children: [
{
path: 'basic',
name: '基础表单',
},
{
path: 'step',
name: '分步表单',
},
{
path: 'high',
name: '高级表单',
},
],
},
{
path: 'result', path: 'result',
name: '结果页', name: '结果页',
tag: { tag: {
......
src/router/menus/modules/demo/table.ts
...@@ -4,6 +4,9 @@ const menu: MenuModule = { ...@@ -4,6 +4,9 @@ const menu: MenuModule = {
menu: { menu: {
path: '/table', path: '/table',
name: 'Table', name: 'Table',
tag: {
dot: true,
},
children: [ children: [
{ {
path: 'basic', path: 'basic',
...@@ -61,6 +64,13 @@ const menu: MenuModule = { ...@@ -61,6 +64,13 @@ const menu: MenuModule = {
path: 'editCellTable', path: 'editCellTable',
name: '可编辑单元格', name: '可编辑单元格',
}, },
{
path: 'editRowTable',
name: '可编辑行',
tag: {
content: 'new',
},
},
], ],
}, },
}; };
......
src/router/routes/modules/demo/page.ts
...@@ -15,6 +15,43 @@ const page: AppRouteModule = { ...@@ -15,6 +15,43 @@ const page: AppRouteModule = {
title: '页面', title: '页面',
}, },
children: [ children: [
// =============================form start=============================
{
path: '/form',
name: 'FormPage',
redirect: '/page-demo/form/basic',
meta: {
title: '表单页',
},
children: [
{
path: 'basic',
name: 'FormBasicPage',
component: () => import('/@/views/demo/page/form/basic/index.vue'),
meta: {
title: '基础表单',
},
},
{
path: 'step',
name: 'FormStepPage',
component: () => import('/@/views/demo/page/form/step/index.vue'),
meta: {
title: '分步表单',
},
},
{
path: 'high',
name: 'FormHightPage',
component: () => import('/@/views/demo/page/form/high/index.vue'),
meta: {
title: '高级表单',
},
},
],
},
// =============================form end=============================
// =============================result start============================= // =============================result start=============================
{ {
path: '/result', path: '/result',
......
src/router/routes/modules/demo/table.ts
...@@ -127,6 +127,14 @@ const table: AppRouteModule = { ...@@ -127,6 +127,14 @@ const table: AppRouteModule = {
title: '可编辑单元格', title: '可编辑单元格',
}, },
}, },
{
path: '/editRowTable',
name: 'EditRowTableDemo',
component: () => import('/@/views/demo/table/EditRowTable.vue'),
meta: {
title: '可编辑行',
},
},
], ],
}; };
......
src/views/demo/page/account/center/Project.vue
...@@ -51,7 +51,6 @@ ...@@ -51,7 +51,6 @@
img { img {
width: 100%; width: 100%;
height: 100px;
} }
&-title { &-title {
......
src/views/demo/page/form/basic/data.ts 0 → 100644
import { FormSchema } from '/@/components/Form';
export const schemas: FormSchema[] = [
{
field: 'title',
component: 'Input',
label: '标题',
componentProps: {
placeholder: '给目标起个名字',
},
required: true,
},
{
field: 'time',
component: 'RangePicker',
label: '起止日期',
required: true,
},
{
field: 'target',
component: 'InputTextArea',
label: '目标描述',
componentProps: {
placeholder: '请输入你的阶段性工作目标',
rows: 4,
},
required: true,
},
{
field: 'metrics',
component: 'InputTextArea',
label: '衡量标准',
componentProps: {
placeholder: '请输入衡量标准',
rows: 4,
},
required: true,
},
{
field: 'client',
component: 'Input',
label: '客户',
helpMessage: '目标的服务对象',
subLabel: '( 选填 )',
componentProps: {
placeholder: '请描述你服务的客户，内部客户直接 @姓名／工号',
},
},
{
field: 'inviteer',
component: 'Input',
label: '邀评人',
subLabel: '( 选填 )',
componentProps: {
placeholder: '请直接 @姓名／工号，最多可邀请 5 人',
},
},
{
field: 'weights',
component: 'InputNumber',
label: '权重',
subLabel: '( 选填 )',
componentProps: {
formatter: (value: string) => (value ? `${value}%` : ''),
parser: (value: string) => value.replace('%', ''),
placeholder: '请输入',
},
},
{
field: 'disclosure',
component: 'RadioGroup',
label: '目标公开',
itemProps: {
extra: '客户、邀评人默认被分享',
},
componentProps: {
options: [
{
label: '公开',
value: '1',
},
{
label: '部分公开',
value: '2',
},
{
label: '不公开',
value: '3',
},
],
},
},
{
field: 'disclosurer',
component: 'Select',
label: ' ',
show: ({ model }) => {
return model.disclosure === '2';
},
componentProps: {
placeholder: '公开给',
mode: 'multiple',
options: [
{
label: '同事1',
value: '1',
},
{
label: '同事2',
value: '2',
},
{
label: '同事3',
value: '3',
},
],
},
},
];
src/views/demo/page/form/basic/index.vue 0 → 100644
<template>
<div>
<a-page-header title="基础表单" :ghost="false">
表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
</a-page-header>
<div class="m-5 form-wrap">
<BasicForm @register="register" />
</div>
</div>
</template>
<script lang="ts">
import { BasicForm, useForm } from '/@/components/Form';
import { defineComponent } from 'vue';
import { schemas } from './data';
import { useMessage } from '/@/hooks/web/useMessage';
export default defineComponent({
components: { BasicForm },
setup() {
const { createMessage } = useMessage();
const [register, { validate, setProps }] = useForm({
labelCol: {
span: 7,
},
wrapperCol: {
span: 10,
},
schemas: schemas,
actionColOptions: {
offset: 8,
},
submitButtonOptions: {
text: '提交',
},
submitFunc: customSubmitFunc,
});
async function customSubmitFunc() {
try {
await validate();
setProps({
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
createMessage.success('提交成功！');
}, 2000);
} catch (error) {}
}
return { register };
},
});
</script>
<style lang="less" scoped>
.form-wrap {
padding: 24px;
background: #fff;
}
</style>
src/views/demo/page/form/high/PersonTable.vue 0 → 100644
<template>
<div>
<BasicTable @register="registerTable">
<template #action="{ record, column }">
<TableAction :actions="createActions(record, column)" />
</template>
</BasicTable>
<a-button block class="mt-5" type="dashed" @click="handleAdd">新增成员</a-button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
BasicTable,
useTable,
TableAction,
BasicColumn,
ActionItem,
renderEditableRow,
EditTableHeaderIcon,
EditRecordRow,
} from '/@/components/Table';
const columns: BasicColumn[] = [
{
title: '成员姓名',
dataIndex: 'name',
customRender: renderEditableRow({ dataIndex: 'name', placeholder: '请输入成员姓名' }),
},
{
title: '工号',
dataIndex: 'no',
customRender: renderEditableRow({ dataIndex: 'no', placeholder: '请输入工号' }),
},
{
title: '所属部门',
dataIndex: 'dept',
customRender: renderEditableRow({ dataIndex: 'dept', placeholder: '请输入所属部门' }),
},
];
const data: any[] = [
{
name: 'John Brown',
no: '00001',
dept: 'New York No. 1 Lake Park',
},
{
name: 'John Brown2',
no: '00002',
dept: 'New York No. 2 Lake Park',
},
{
name: 'John Brown3',
no: '00003',
dept: 'New York No. 3Lake Park',
},
];
export default defineComponent({
components: { BasicTable, EditTableHeaderIcon, TableAction },
setup() {
const [registerTable, { getDataSource }] = useTable({
columns: columns,
showIndexColumn: false,
dataSource: data,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
pagination: false,
});
function handleEdit(record: EditRecordRow) {
record.editable = true;
}
function handleCancel(record: EditRecordRow) {
record.editable = false;
record.onCancel && record.onCancel();
if (record.isNew) {
const data = getDataSource();
const index = data.findIndex((item) => item.key === record.key);
data.splice(index, 1);
}
}
function handleSave(record: EditRecordRow) {
record.editable = false;
record.onSubmit && record.onSubmit();
}
function handleAdd() {
const data = getDataSource();
const addRow: EditRecordRow = {
name: '',
no: '',
dept: '',
editable: true,
isNew: true,
};
data.push(addRow);
}
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
label: '删除',
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record, column),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record, column),
},
},
];
}
return {
registerTable,
handleEdit,
createActions,
handleAdd,
getDataSource,
};
},
});
</script>
src/views/demo/page/form/high/data.ts 0 → 100644
import { FormSchema } from '/@/components/Form';
const basicOptions: SelectOptions = [
{
label: '付晓晓',
value: '1',
},
{
label: '周毛毛',
value: '2',
},
];
const storeTypeOptions: SelectOptions = [
{
label: '私密',
value: '1',
},
{
label: '公开',
value: '2',
},
];
export const schemas: FormSchema[] = [
{
field: 'f1',
component: 'Input',
label: '仓库名',
required: true,
},
{
field: 'f2',
component: 'Input',
label: '仓库域名',
required: true,
componentProps: {
addonBefore: 'http://',
addonAfter: 'com',
},
colProps: {
offset: 2,
},
},
{
field: 'f3',
component: 'Select',
label: '仓库管理员',
componentProps: {
options: basicOptions,
},
required: true,
colProps: {
offset: 2,
},
},
{
field: 'f4',
component: 'Select',
label: '审批人',
componentProps: {
options: basicOptions,
},
required: true,
},
{
field: 'f5',
component: 'RangePicker',
label: '生效日期',
required: true,
colProps: {
offset: 2,
},
},
{
field: 'f6',
component: 'Select',
label: '仓库类型',
componentProps: {
options: storeTypeOptions,
},
required: true,
colProps: {
offset: 2,
},
},
];
export const taskSchemas: FormSchema[] = [
{
field: 't1',
component: 'Input',
label: '任务名',
required: true,
},
{
field: 't2',
component: 'Input',
label: '任务描述',
required: true,
colProps: {
offset: 2,
},
},
{
field: 't3',
component: 'Select',
label: '执行人',
componentProps: {
options: basicOptions,
},
required: true,
colProps: {
offset: 2,
},
},
{
field: 't4',
component: 'Select',
label: '责任人',
componentProps: {
options: basicOptions,
},
required: true,
},
{
field: 't5',
component: 'TimePicker',
label: '生效日期',
required: true,
componentProps: {
style: { width: '100%' },
},
colProps: {
offset: 2,
},
},
{
field: 't6',
component: 'Select',
label: '任务类型',
componentProps: {
options: storeTypeOptions,
},
required: true,
colProps: {
offset: 2,
},
},
];
src/views/demo/page/form/high/index.vue 0 → 100644
<template>
<div class="high-form">
<a-page-header title="高级表单" :ghost="false">
高级表单常见于一次性输入和提交大批量数据的场景。
</a-page-header>
<div class="m-5">
<a-card title="仓库管理" :bordered="false">
<BasicForm @register="register" layout="vertical" />
</a-card>
<a-card title="任务管理" :bordered="false" class="mt-5">
<BasicForm @register="registerTask" layout="vertical" />
</a-card>
<a-card title="成员管理" :bordered="false" class="mt-5">
<PersonTable ref="tableRef" />
</a-card>
</div>
<app-footer>
<template #right>
<a-button type="primary" @click="submitAll">提交</a-button>
</template>
</app-footer>
</div>
</template>
<script lang="ts">
import { BasicForm, useForm } from '/@/components/Form';
import { defineComponent, ref } from 'vue';
import PersonTable from './PersonTable.vue';
import { schemas, taskSchemas } from './data';
export default defineComponent({
components: { BasicForm, PersonTable },
setup() {
const tableRef = ref<{ getDataSource: () => any } | null>(null);
const [register, { validate }] = useForm({
baseColProps: {
span: 6,
},
schemas: schemas,
showActionButtonGroup: false,
});
const [registerTask, { validate: validateTaskForm }] = useForm({
baseColProps: {
span: 6,
},
schemas: taskSchemas,
showActionButtonGroup: false,
});
async function submitAll() {
try {
if (tableRef.value) {
console.log('table data:', tableRef.value.getDataSource());
}
const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
console.log('form data:', values, taskValues);
} catch (error) {}
}
return { register, registerTask, submitAll, tableRef };
},
});
</script>
<style lang="less" scoped>
.high-form {
padding-bottom: 48px;
}
</style>
src/views/demo/page/form/step/Step1.vue 0 → 100644
<template>
<div class="step1">
<div class="step1-form">
<BasicForm @register="register">
<template #fac="{ model, field }">
<a-input-group compact>
<a-select v-model:value="model['pay']" class="pay-select">
<a-select-option value="zfb"> 支付宝 </a-select-option>
<a-select-option value="yl"> 银联 </a-select-option>
</a-select>
<a-input class="pay-input" v-model:value="model[field]" />
</a-input-group>
</template>
</BasicForm>
</div>
<a-divider />
<h3>说明</h3>
<h4>转账到支付宝账户</h4>
<p>
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
</p>
<h4>转账到银行卡</h4>
<p>
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { step1Schemas } from './data';
export default defineComponent({
components: { BasicForm },
emits: ['next'],
setup(_, { emit }) {
const [register, { validate }] = useForm({
labelWidth: 100,
schemas: step1Schemas,
actionColOptions: {
span: 14,
},
showResetButton: false,
submitButtonOptions: {
text: '下一步',
},
submitFunc: customSubmitFunc,
});
async function customSubmitFunc() {
try {
const values = await validate();
emit('next', values);
} catch (error) {}
}
return { register };
},
});
</script>
<style lang="less" scoped>
.step1 {
&-form {
width: 450px;
margin: 0 auto;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
line-height: 32px;
color: rgba(0, 0, 0, 0.45);
}
h4 {
margin: 0 0 4px;
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
}
p {
color: rgba(0, 0, 0, 0.45);
}
}
.pay-select {
width: 20%;
}
.pay-input {
width: 70%;
}
</style>
src/views/demo/page/form/step/Step2.vue 0 → 100644
<template>
<div class="step2">
<a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
<a-descriptions :column="1" class="mt-5">
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
</a-descriptions>
<a-divider />
<BasicForm @register="register" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { step2Schemas } from './data';
export default defineComponent({
components: { BasicForm },
emits: ['next', 'prev'],
setup(_, { emit }) {
const [register, { validate, setProps }] = useForm({
labelWidth: 80,
schemas: step2Schemas,
actionColOptions: {
span: 14,
},
resetButtonOptions: {
text: '上一步',
},
submitButtonOptions: {
text: '提交',
},
resetFunc: customResetFunc,
submitFunc: customSubmitFunc,
});
async function customResetFunc() {
emit('prev');
}
async function customSubmitFunc() {
try {
const values = await validate();
setProps({
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
emit('next', values);
}, 1500);
} catch (error) {}
}
return { register };
},
});
</script>
<style lang="less" scoped>
.step2 {
width: 450px;
margin: 0 auto;
}
</style>
src/views/demo/page/form/step/Step3.vue 0 → 100644
<template>
<div class="step3">
<a-result status="success" title="操作成功" sub-title="预计两小时内到账">
<template #extra>
<a-button type="primary" @click="redo">再转一笔 </a-button>
<a-button> 查看账单 </a-button>
</template>
</a-result>
<div class="desc-wrap">
<a-descriptions :column="1" class="mt-5">
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
</a-descriptions>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
components: {},
emits: ['redo'],
setup(_, { emit }) {
return {
redo: () => {
emit('redo');
},
};
},
});
</script>
<style lang="less" scoped>
.step3 {
width: 600px;
margin: 0 auto;
}
.desc-wrap {
padding: 24px 40px;
margin-top: 24px;
background: #fafafa;
}
</style>
src/views/demo/page/form/step/data.tsx 0 → 100644
import { FormSchema } from '/@/components/Form';
export const step1Schemas: FormSchema[] = [
{
field: 'account',
component: 'Select',
label: '付款账户',
required: true,
defaultValue: '1',
componentProps: {
options: [
{
label: 'anncwb@126.com',
value: '1',
},
],
},
},
{
field: 'fac',
component: 'InputGroup',
label: '收款账户',
required: true,
defaultValue: 'test@example.com',
slot: 'fac',
},
{
field: 'pay',
component: 'Input',
label: '',
defaultValue: 'zfb',
show: false,
},
{
field: 'payeeName',
component: 'Input',
label: '收款人姓名',
defaultValue: 'Vben',
required: true,
},
{
field: 'money',
component: 'Input',
label: '转账金额',
defaultValue: '500',
required: true,
renderComponentContent: () => {
return {
prefix: () => '￥',
};
},
},
];
export const step2Schemas: FormSchema[] = [
{
field: 'pwd',
component: 'InputPassword',
label: '支付密码',
required: true,
defaultValue: '123456',
},
];
src/views/demo/page/form/step/index.vue 0 → 100644
<template>
<div>
<a-page-header title="分步表单" :ghost="false">
将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
</a-page-header>
<div class="m-5 step-form-content">
<div class="step-form-form">
<a-steps :current="current">
<a-step title="填写转账信息"> </a-step>
<a-step title="确认转账信息"> </a-step>
<a-step title="完成"> </a-step>
</a-steps>
</div>
<div class="mt-5">
<Step1 @next="handleStep1Next" v-show="current === 0" />
<Step2
@prev="handleStepPrev"
@next="handleStep2Next"
v-show="current === 1"
v-if="initSetp2"
/>
<Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';
export default defineComponent({
components: { Step1, Step2, Step3 },
setup() {
const current = ref(0);
const state = reactive({
initSetp2: false,
initSetp3: false,
});
function handleStep1Next(step1Values: any) {
current.value++;
state.initSetp2 = true;
console.log(step1Values);
}
function handleStepPrev() {
current.value--;
}
function handleStep2Next(step2Values: any) {
current.value++;
state.initSetp3 = true;
console.log(step2Values);
}
function handleRedo() {
current.value = 0;
state.initSetp2 = false;
state.initSetp3 = false;
}
return {
current,
handleStep1Next,
handleStep2Next,
handleRedo,
handleStepPrev,
...toRefs(state),
};
},
});
</script>
<style lang="less" scoped>
.step-form-content {
padding: 24px;
background: #fff;
}
.step-form-form {
width: 750px;
margin: 0 auto;
}
</style>
src/views/demo/table/EditRowTable.vue 0 → 100644
<template>
<div class="p-4">
<BasicTable @register="registerTable">
<template #action="{ record, column }">
<TableAction :actions="createActions(record, column)" />
</template>
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
BasicTable,
useTable,
TableAction,
BasicColumn,
ActionItem,
renderEditableRow,
EditTableHeaderIcon,
EditRecordRow,
} from '/@/components/Table';
import { demoListApi } from '/@/api/demo/table';
const columns: BasicColumn[] = [
{
title: 'ID',
dataIndex: 'id',
customRender: renderEditableRow({ dataIndex: 'id' }),
},
{
title: '姓名',
dataIndex: 'name',
customRender: renderEditableRow({
dataIndex: 'name',
}),
},
];
export default defineComponent({
components: { BasicTable, EditTableHeaderIcon, TableAction },
setup() {
const currentEditKeyRef = ref('');
const [registerTable] = useTable({
title: '可编辑行示例',
api: demoListApi,
columns: columns,
showIndexColumn: false,
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
function handleEdit(record: EditRecordRow) {
currentEditKeyRef.value = record.key;
record.editable = true;
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
record.editable = false;
record.onCancel && record.onCancel();
}
function handleSave(record: EditRecordRow) {
currentEditKeyRef.value = '';
record.editable = false;
record.onSubmit && record.onSubmit();
}
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
onClick: handleEdit.bind(null, record),
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record, column),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record, column),
},
},
];
}
return {
registerTable,
handleEdit,
createActions,
};
},
});
</script>
src/views/demo/table/FixedColumn.vue
<template> <template>
<div class="p-4"> <div class="p-4">
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #action> <template #action="{ record }">
<TableAction <TableAction
:actions="[ :actions="[
{ {
label: '删除', label: '删除',
onClick: handleDelete, onClick: handleDelete.bind(null, record),
}, },
]" ]"
:dropDownActions="[ :dropDownActions="[
{ {
label: '启用', label: '启用',
onClick: handleOpen, onClick: handleOpen.bind(null, record),
}, },
]" ]"
/> />
...@@ -73,11 +73,11 @@ ...@@ -73,11 +73,11 @@
slots: { customRender: 'action' }, slots: { customRender: 'action' },
}, },
}); });
function handleDelete() { function handleDelete(record: any) {
console.log('点击了删除'); console.log('点击了删除', record);
} }
function handleOpen() { function handleOpen(record: any) {
console.log('点击了启用'); console.log('点击了启用', record);
} }
return { return {
registerTable, registerTable,
......
yarn.lock
...@@ -1051,9 +1051,9 @@ ...@@ -1051,9 +1051,9 @@
integrity sha512-BybEHU5/I9EQ0CcwKAqmreZ2bMnAXrqLCTptAc6vPetHMbrXdZfejP5mt57e/8PNSt/qE7BHniU5PCYA+PGIHw== integrity sha512-BybEHU5/I9EQ0CcwKAqmreZ2bMnAXrqLCTptAc6vPetHMbrXdZfejP5mt57e/8PNSt/qE7BHniU5PCYA+PGIHw==
"@iconify/json@^1.1.258": "@iconify/json@^1.1.258":
version "1.1.258" version "1.1.259"
resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.258.tgz#392064ae8fd4c6d542c21bb4d0d57d5860f38abb" resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.259.tgz#433ccff8572e42c3abab1cdbac872af0e8340419"
integrity sha512-x5DKhRrg8v1NWmClWa8zA80gWQ9xevivsUAF4s8CyAl/ZplBsEE1funKuuVcIKjexyE1UXb7uFWrUKt1fB5n1A== integrity sha512-tDL4IgKtj3LA2lI+IoZfylBtKWNpV5I9BLj7WGMI/SvGkkYo+9DUap3Ho6iUbQLtu9GmHwpE/cA8mwEBkj/otw==
"@koa/cors@^3.1.0": "@koa/cors@^3.1.0":
version "3.1.0" version "3.1.0"
...@@ -1236,9 +1236,9 @@ ...@@ -1236,9 +1236,9 @@
unist-util-find-all-after "^3.0.1" unist-util-find-all-after "^3.0.1"
"@surma/rollup-plugin-off-main-thread@^1.1.1": "@surma/rollup-plugin-off-main-thread@^1.1.1":
version "1.4.1" version "1.4.2"
resolved "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.1.tgz#bf1343e5a926e5a1da55e3affd761dda4ce143ef" resolved "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
integrity sha512-ZPBWYQDdO4JZiTmTP3DABsHhIPA7bEJk9Znk7tZsrbPGanoGo8YxMv//WLx5Cvb+lRgS42+6yiOIYYHCKDmkpQ== integrity sha512-yBMPqmd1yEJo/280PAMkychuaALyQ9Lkb5q1ck3mjJrFuEobIfhnQ4J3mbvBoISmR3SWMWV+cGB/I0lCQee79A==
dependencies: dependencies:
ejs "^2.6.1" ejs "^2.6.1"
magic-string "^0.25.0" magic-string "^0.25.0"
...@@ -1850,7 +1850,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: ...@@ -1850,7 +1850,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
dependencies: dependencies:
color-convert "^2.0.1" color-convert "^2.0.1"
ant-design-vue@^2.0.0-rc.1: ant-design-vue@^2.0.0-beta.15:
version "2.0.0-rc.1" version "2.0.0-rc.1"
resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.1.tgz#2ef02475f3aa4c1474f2fe3cf44a52c34787be02" resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.1.tgz#2ef02475f3aa4c1474f2fe3cf44a52c34787be02"
integrity sha512-iKXkFtTHarvLHV7LWmYh6g/Cmkv+xK+vS621A1Qvg37Z6lCGg3K9BGAizmklAYzOTiPz0Ltt63eSiNqYMGh52g== integrity sha512-iKXkFtTHarvLHV7LWmYh6g/Cmkv+xK+vS621A1Qvg37Z6lCGg3K9BGAizmklAYzOTiPz0Ltt63eSiNqYMGh52g==
...@@ -1982,9 +1982,9 @@ astral-regex@^2.0.0: ...@@ -1982,9 +1982,9 @@ astral-regex@^2.0.0:
integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
async-validator@^3.3.0, async-validator@^3.4.0: async-validator@^3.3.0, async-validator@^3.4.0:
version "3.4.0" version "3.5.0"
resolved "https://registry.npmjs.org/async-validator/-/async-validator-3.4.0.tgz#871b3e594124bf4c4eb7bcd1a9e78b44f3b09cae" resolved "https://registry.npmjs.org/async-validator/-/async-validator-3.5.0.tgz#f6791ee7217cde8036941591bc3754f7c26bbf89"
integrity sha512-VrFk4eYiJAWKskEz115iiuCf9O0ftnMMPXrOFMqyzGH2KxO7YwncKyn/FgOOP+0MDHMfXL7gLExagCutaZGigA== integrity sha512-jMDcDHrH618eznoO4/3afJG5+I4HE/ipQd7y4mhPJmCaoHCSPOJfjpWgjFoxma2h8irL+zGe+qwyptDrR37Vhg==
async@^2.6.2: async@^2.6.2:
version "2.6.3" version "2.6.3"
...@@ -2079,9 +2079,9 @@ balanced-match@^1.0.0: ...@@ -2079,9 +2079,9 @@ balanced-match@^1.0.0:
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
base64-js@^1.3.1: base64-js@^1.3.1:
version "1.5.0" version "1.5.1"
resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.0.tgz#2d03045876d9e2b68a7a0f87d6bd163595e3b6af" resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
integrity sha512-Jrdy04F2EKcNggUDfubMUPNAZg2vMquLQSm8sKLYJvz40ClFL1S8GKyDshGkNsbNNE5Z+fQavzU7nSK1I9JUGA== integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
base@^0.11.1: base@^0.11.1:
version "0.11.2" version "0.11.2"
...@@ -2297,9 +2297,9 @@ camelcase@^5.0.0, camelcase@^5.3.1: ...@@ -2297,9 +2297,9 @@ camelcase@^5.0.0, camelcase@^5.3.1:
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157: caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157:
version "1.0.30001157" version "1.0.30001158"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz#2d11aaeb239b340bc1aa730eca18a37fdb07a9ab" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001158.tgz#fce86d321369603c2bc855ee0e901a7f49f8310b"
integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA== integrity sha512-s5loVYY+yKpuVA3HyW8BarzrtJvwHReuzugQXlv1iR3LKSReoFXRm86mT6hT7PEF5RxW+XQZg+6nYjlywYzQ+g==
ccount@^1.0.0: ccount@^1.0.0:
version "1.1.0" version "1.1.0"
...@@ -2940,9 +2940,9 @@ cssesc@^3.0.0: ...@@ -2940,9 +2940,9 @@ cssesc@^3.0.0:
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
csstype@^2.6.8: csstype@^2.6.8:
version "2.6.13" version "2.6.14"
resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f" resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de"
integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A== integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==
currently-unhandled@^0.4.1: currently-unhandled@^0.4.1:
version "0.4.1" version "0.4.1"
...@@ -3263,9 +3263,9 @@ ejs@^2.6.1: ...@@ -3263,9 +3263,9 @@ ejs@^2.6.1:
integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA== integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
electron-to-chromium@^1.3.591: electron-to-chromium@^1.3.591:
version "1.3.592" version "1.3.596"
resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.592.tgz#4621521b223bf6e5469373528321e185d3c24670" resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.596.tgz#c7ed98512c7ff36ddcbfed9e54e6355335c35257"
integrity sha512-kGNowksvqQiPb1pUSQKpd8JFoGPLxYOwduNRCqCxGh/2Q1qE2JdmwouCW41lUzDxOb/2RIV4lR0tVIfboWlO9A== integrity sha512-nLO2Wd2yU42eSoNJVQKNf89CcEGqeFZd++QsnN2XIgje1s/19AgctfjLIbPORlvcCO8sYjLwX4iUgDdusOY8Sg==
emoji-regex@^7.0.1: emoji-regex@^7.0.1:
version "7.0.3" version "7.0.3"
...@@ -6931,9 +6931,9 @@ rollup@^1.31.1: ...@@ -6931,9 +6931,9 @@ rollup@^1.31.1:
acorn "^7.1.0" acorn "^7.1.0"
rollup@^2.32.1: rollup@^2.32.1:
version "2.33.1" version "2.33.2"
resolved "https://registry.npmjs.org/rollup/-/rollup-2.33.1.tgz#802795164164ee63cd47769d8879c33ec8ae0c40" resolved "https://registry.npmjs.org/rollup/-/rollup-2.33.2.tgz#c4c76cd405a7605e6ebe90976398c46d4c2ea166"
integrity sha512-uY4O/IoL9oNW8MMcbA5hcOaz6tZTMIh7qJHx/tzIJm+n1wLoY38BLn6fuy7DhR57oNFLMbDQtDeJoFURt5933w== integrity sha512-QPQ6/fWCrzHtSXkI269rhKaC7qXGghYBwXU04b1JsDZ6ibZa3DJ9D1SFAYRMgx1inDg0DaTbb3N4Z1NK/r3fhw==
optionalDependencies: optionalDependencies:
fsevents "~2.1.2" fsevents "~2.1.2"
...@@ -7874,9 +7874,9 @@ type-fest@^0.13.1: ...@@ -7874,9 +7874,9 @@ type-fest@^0.13.1:
integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg== integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
type-fest@^0.18.0: type-fest@^0.18.0:
version "0.18.0" version "0.18.1"
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.18.0.tgz#2edfa6382d48653707344f7fccdb0443d460e8d6" resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
integrity sha512-fbDukFPnJBdn2eZ3RR+5mK2slHLFd6gYHY7jna1KWWy4Yr4XysHuCdXRzy+RiG/HwG4WJat00vdC2UHky5eKiQ== integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
type-fest@^0.3.1: type-fest@^0.3.1:
version "0.3.1" version "0.3.1"
...@@ -7919,9 +7919,9 @@ typescript@^4.0.5: ...@@ -7919,9 +7919,9 @@ typescript@^4.0.5:
integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ== integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
uglify-js@^3.1.4: uglify-js@^3.1.4:
version "3.11.5" version "3.11.6"
resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.11.5.tgz#d6788bc83cf35ff18ea78a65763e480803409bc6" resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.11.6.tgz#144b50d3e05eadd3ad4dd047c60ca541a8cd4e9c"
integrity sha512-btvv/baMqe7HxP7zJSF7Uc16h1mSfuuSplT0/qdjxseesDU+yYzH33eHBH+eMdeRXwujXspaCTooWHQVVBh09w== integrity sha512-oASI1FOJ7BBFkSCNDZ446EgkSuHkOZBuqRFrwXIKWCoXw8ZXQETooTQjkAcBS03Acab7ubCKsXnwuV2svy061g==
unherit@^1.0.4: unherit@^1.0.4:
version "1.1.3" version "1.1.3"
...@@ -8581,7 +8581,7 @@ y18n@^4.0.0: ...@@ -8581,7 +8581,7 @@ y18n@^4.0.0:
resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b" resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w== integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
y18n@^5.0.2: y18n@^5.0.5:
version "5.0.5" version "5.0.5"
resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18" resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg== integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
...@@ -8656,16 +8656,16 @@ yargs@^15.0.0, yargs@^15.1.0: ...@@ -8656,16 +8656,16 @@ yargs@^15.0.0, yargs@^15.1.0:
yargs-parser "^18.1.2" yargs-parser "^18.1.2"
yargs@^16.0.3, yargs@^16.1.0: yargs@^16.0.3, yargs@^16.1.0:
version "16.1.0" version "16.1.1"
resolved "https://registry.npmjs.org/yargs/-/yargs-16.1.0.tgz#fc333fe4791660eace5a894b39d42f851cd48f2a" resolved "https://registry.npmjs.org/yargs/-/yargs-16.1.1.tgz#5a4a095bd1ca806b0a50d0c03611d38034d219a1"
integrity sha512-upWFJOmDdHN0syLuESuvXDmrRcWd1QafJolHskzaw79uZa7/x53gxQKiR07W59GWY1tFhhU/Th9DrtSfpS782g== integrity sha512-hAD1RcFP/wfgfxgMVswPE+z3tlPFtxG8/yWUrG2i17sTWGCGqWnxKcLTF4cUKDUK8fzokwsmO9H0TDkRbMHy8w==
dependencies: dependencies:
cliui "^7.0.2" cliui "^7.0.2"
escalade "^3.1.1" escalade "^3.1.1"
get-caller-file "^2.0.5" get-caller-file "^2.0.5"
require-directory "^2.1.1" require-directory "^2.1.1"
string-width "^4.2.0" string-width "^4.2.0"
y18n "^5.0.2" y18n "^5.0.5"
yargs-parser "^20.2.2" yargs-parser "^20.2.2"
ylru@^1.2.0: ylru@^1.2.0:
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论