geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: lint格式化文件

Browse Source
This commit is contained in:
t-aonan.gu
2025-10-21 18:04:02 +08:00
parent f9ca969fec
commit 7629120548
1092 changed files with 148218 additions and 157907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

558
src/views/code/demo/components/DemoModal.vue
View File

@ -1,302 +1,302 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="tsx" setup>
import { ref, computed, unref, h } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { ref, computed, unref, h } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { addDemo, getDemo, updateDemo } from '/@/api/code/demo';
import { Input } from 'ant-design-vue';
import { getPostList } from '/@/api/system/post';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { addDemo, getDemo, updateDemo } from '/@/api/code/demo';
import { Input } from 'ant-design-vue';
import { getPostList } from '/@/api/system/post';
const accountFormSchema: FormSchema[] = [
{
field: 'fieldString',
label: '字符串',
component: 'Input',
required: true,
colProps: { span: 24 },
},
{
label: '联动字符串',
field: 'fieldString111',
component: 'ApiSelect',
required: true,
componentProps: {
api: getPostList,
// use name as label
labelField: 'name',
// use id as value
valueField: 'id',
getPopupContainer: () => document.body,
onChange: () => {
console.log('sssssssssss');
const accountFormSchema: FormSchema[] = [
{
field: 'fieldString',
label: '字符串',
component: 'Input',
required: true,
colProps: { span: 24 }
},
},
// width: 120,
},
{
field: 'fieldInt',
label: '整型',
component: 'InputNumber',
required: true,
colProps: { span: 24 },
},
{
field: 'fieldDouble',
label: '浮点',
component: 'InputNumber',
required: true,
colProps: { span: 24 },
},
{
field: 'fieldLong',
label: '长整型',
component: 'InputNumber',
required: true,
colProps: { span: 24 },
},
{
field: 'sortCode',
label: '排序',
component: 'InputNumber',
required: true,
colProps: { span: 24 },
},
{
label: '备注',
field: 'remark',
component: 'InputTextArea',
colProps: { span: 24 },
},
{
label: '部门',
field: 'dept',
component: 'Dept',
required: true,
colProps: { span: 24 },
},
{
label: '用户',
field: 'user',
component: 'User',
required: true,
colProps: { span: 24 },
},
{
label: '信息体',
field: 'info',
component: 'Info',
required: true,
colProps: { span: 24 },
componentProps: { infoType: 0 },
},
{
label: '区域',
field: 'area',
component: 'Area',
required: true,
colProps: { span: 24 },
componentProps: { initFetchParams: { id: '0' } },
},
{
label: '子表单',
field: 'subform',
component: 'SubForm',
required: true,
colProps: { span: 24 },
componentProps: {
mainKey: 'subform',
columns: [
{
title: '字符串',
dataIndex: 'fieldString',
componentType: 'Input',
defaultValue: 111,
rules: [
{
required: true,
message: '子表单组件验证案例',
},
],
// width: 120,
},
{
title: '整型',
dataIndex: 'fieldInt',
componentType: 'Switch',
rules: [
{
required: true,
message: '子表单组件验证案例',
},
],
defaultValue: true,
{
label: '联动字符串',
field: 'fieldString111',
component: 'ApiSelect',
required: true,
componentProps: {
checked: true,
onChange: function () {
console.log('子表单组件事件案例');
},
},
api: getPostList,
// use name as label
labelField: 'name',
// use id as value
valueField: 'id',
getPopupContainer: () => document.body,
onChange: () => {
console.log('sssssssssss');
}
}
// width: 120,
},
{
title: '时间',
dataIndex: 'fieldDatetimeStart,fieldDatetimeEnd',
componentType: 'RangePicker',
defaultValue: ['2022-06-15', '2022-06-18'],
},
{
field: 'fieldInt',
label: '整型',
component: 'InputNumber',
required: true,
colProps: { span: 24 }
},
{
field: 'fieldDouble',
label: '浮点',
component: 'InputNumber',
required: true,
colProps: { span: 24 }
},
{
field: 'fieldLong',
label: '长整型',
component: 'InputNumber',
required: true,
colProps: { span: 24 }
},
{
field: 'sortCode',
label: '排序',
component: 'InputNumber',
required: true,
colProps: { span: 24 }
},
{
label: '备注',
field: 'remark',
component: 'InputTextArea',
colProps: { span: 24 }
},
{
label: '部门',
field: 'dept',
component: 'Dept',
required: true,
colProps: { span: 24 }
},
{
label: '用户',
field: 'user',
component: 'User',
required: true,
colProps: { span: 24 }
},
{
label: '信息体',
field: 'info',
component: 'Info',
required: true,
colProps: { span: 24 },
componentProps: { infoType: 0 }
},
{
label: '区域',
field: 'area',
component: 'Area',
required: true,
colProps: { span: 24 },
componentProps: { initFetchParams: { id: '0' } }
},
{
label: '子表单',
field: 'subform',
component: 'SubForm',
required: true,
colProps: { span: 24 },
componentProps: {
placeholder: ['开始时间', '结束时间'],
},
// width: 120,
},
{
title: '合并',
dataIndex: 'xxxx',
children: [
{
title: '浮点',
dataIndex: 'fieldDouble',
componentType: 'Switch',
// width: 120,
},
{
title: '长整数',
dataIndex: 'fieldLong',
componentType: 'Render', //如果使用自定义渲染 必须设置componentType === 'Render'
rules: [
{
required: true,
message: '子表单组件验证案例',
},
],
componentProps: {
xxxx: ['xxxx', 'xxxx'],
},
render: ({ model, field, rules, componentProps }) => {
const handleChange = (e: ChangeEvent) => {
model[field] = e.target.value;
console.log('参数有', model, field, rules, componentProps);
};
mainKey: 'subform',
columns: [
{
title: '字符串',
dataIndex: 'fieldString',
componentType: 'Input',
defaultValue: 111,
rules: [
{
required: true,
message: '子表单组件验证案例'
}
]
// width: 120,
},
{
title: '整型',
dataIndex: 'fieldInt',
componentType: 'Switch',
rules: [
{
required: true,
message: '子表单组件验证案例'
}
],
defaultValue: true,
componentProps: {
checked: true,
onChange: function () {
console.log('子表单组件事件案例');
}
}
// width: 120,
},
{
title: '时间',
dataIndex: 'fieldDatetimeStart,fieldDatetimeEnd',
componentType: 'RangePicker',
defaultValue: ['2022-06-15', '2022-06-18'],
componentProps: {
placeholder: ['开始时间', '结束时间']
}
// width: 120,
},
{
title: '合并',
dataIndex: 'xxxx',
children: [
{
title: '浮点',
dataIndex: 'fieldDouble',
componentType: 'Switch'
// width: 120,
},
{
title: '长整数',
dataIndex: 'fieldLong',
componentType: 'Render', //如果使用自定义渲染 必须设置componentType === 'Render'
rules: [
{
required: true,
message: '子表单组件验证案例'
}
],
componentProps: {
xxxx: ['xxxx', 'xxxx']
},
render: ({ model, field, rules, componentProps }) => {
const handleChange = (e: ChangeEvent) => {
model[field] = e.target.value;
console.log('参数有', model, field, rules, componentProps);
};
// tsx写法
// tsx写法
// return (
// <Input
// placeholder="请输入"
// v-model:value={model[field]}
// onChange={handleChange}
// ></Input>
// );
// return (
// <Input
// placeholder="请输入"
// v-model:value={model[field]}
// onChange={handleChange}
// ></Input>
// );
//渲染函数写法
return h(Input, {
placeholder: '请输入11111111',
value: model[field],
onChange: handleChange,
});
},
// width: 180,
},
{
title: '备注',
dataIndex: 'remark',
componentType: 'IconPicker',
},
],
// width: 120,
},
{
title: '操作',
key: 'action',
fixed: 'right',
},
],
},
},
];
//渲染函数写法
return h(Input, {
placeholder: '请输入11111111',
value: model[field],
onChange: handleChange
});
}
// width: 180,
},
{
title: '备注',
dataIndex: 'remark',
componentType: 'IconPicker'
}
]
// width: 120,
},
{
title: '操作',
key: 'action',
fixed: 'right'
}
]
}
}
];
const emit = defineEmits(['close', 'register']);
const emit = defineEmits(['close', 'register']);
const { notification } = useMessage();
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const { t } = useI18n();
const isUpdate = ref(true);
const rowId = ref('');
const { t } = useI18n();
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
console.log('useModalInner', data);
console.log('useModalInner', data);
isUpdate.value = !!data?.isUpdate;
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.id;
const record = await getDemo(data.id);
if (unref(isUpdate)) {
rowId.value = data.id;
const record = await getDemo(data.id);
setFieldsValue({
user: '1,2',
dept: '1419276791701966848',
info: '2',
area: '130000,130100',
...record,
});
setFieldsValue({
user: '1,2',
dept: '1419276791701966848',
info: '2',
area: '130000,130100',
...record
});
}
if (data.id) {
//ssss
type.value = data.id;
}
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增用户' : '编辑用户'));
async function handleSubmit() {
try {
const values = await validate();
console.log('handleSubmit', values);
return;
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addDemo(values);
notification.success({
message: 'Tip',
description: t('新增成功！')
}); //提示消息
} else {
values.id = rowId.value;
await updateDemo(values);
notification.success({
message: 'Tip',
description: t('修改成功！')
}); //提示消息
}
closeModal();
emit('close');
} finally {
setModalProps({ confirmLoading: false });
}
}
if (data.id) {
//ssss
type.value = data.id;
}
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增用户' : '编辑用户'));
async function handleSubmit() {
try {
const values = await validate();
console.log('handleSubmit', values);
return;
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addDemo(values);
notification.success({
message: 'Tip',
description: t('新增成功！'),
}); //提示消息
} else {
values.id = rowId.value;
await updateDemo(values);
notification.success({
message: 'Tip',
description: t('修改成功！'),
}); //提示消息
}
closeModal();
emit('close');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

58
src/views/code/demo/components/DeptTree.vue
View File

@ -1,43 +1,35 @@
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
title="机构列表"
toolbar
search
:clickRowToExpand="true"
:treeData="treeData"
:fieldNames="{ key: 'id', title: 'name' }"
@select="handleSelect"
/>
</div>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree title="机构列表" toolbar search :clickRowToExpand="true" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { getDepartmentTree } from '/@/api/system/department';
import { defineComponent, onMounted, ref } from 'vue';
import { getDepartmentTree } from '/@/api/system/department';
import { BasicTree, TreeItem } from '/@/components/Tree';
import { BasicTree, TreeItem } from '/@/components/Tree';
export default defineComponent({
name: 'DeptTree',
components: { BasicTree },
export default defineComponent({
name: 'DeptTree',
components: { BasicTree },
emits: ['select'],
setup(_, { emit }) {
const treeData = ref<TreeItem[]>([]);
emits: ['select'],
setup(_, { emit }) {
const treeData = ref<TreeItem[]>([]);
async function fetch() {
treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
}
async function fetch() {
treeData.value = (await getDepartmentTree()) as unknown as TreeItem[];
}
function handleSelect(keys: string, e) {
emit('select', keys[0]);
console.log(keys, e);
}
function handleSelect(keys: string, e) {
emit('select', keys[0]);
console.log(keys, e);
}
onMounted(() => {
fetch();
});
return { treeData, handleSelect };
},
});
onMounted(() => {
fetch();
});
return { treeData, handleSelect };
}
});
</script>

308
src/views/code/demo/index.vue
View File

@ -1,167 +1,165 @@
<template>
<PageWrapper dense contentFullHeight contentClass="flex">
<!-- <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> -->
<BasicTable @register="registerTable">
<!--class="w-3/4 xl:w-4/5" -->
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</BasicTable>
<DemoModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
<PageWrapper dense contentFullHeight contentClass="flex">
<!-- <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> -->
<BasicTable @register="registerTable">
<!--class="w-3/4 xl:w-4/5" -->
<template #toolbar>
<a-button type="primary" @click="handleCreate">新增</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</BasicTable>
<DemoModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { getDemoPage, deleteDemo } from '/@/api/code/demo';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import DemoModal from './components/DemoModal.vue';
// import DeptTree from './components/DeptTree.vue';
import { ref } from 'vue';
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { getDemoPage, deleteDemo } from '/@/api/code/demo';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import DemoModal from './components/DemoModal.vue';
// import DeptTree from './components/DeptTree.vue';
const searchFormSchema: FormSchema[] = [
{
field: 'fieldString',
label: '字符串',
component: 'Input',
colProps: { span: 8 },
},
{
field: 'fieldInt',
label: '整型',
component: 'Input',
colProps: { span: 8 },
},
{
field: 'fieldDatetime',
label: '时间',
component: 'RangePicker',
colProps: { span: 8 },
},
{
field: 'fieldDouble',
label: '浮点',
component: 'Input',
colProps: { span: 8 },
},
{
field: 'fieldLong',
label: '长整数',
component: 'Input',
colProps: { span: 8 },
},
];
const searchFormSchema: FormSchema[] = [
{
field: 'fieldString',
label: '字符串',
component: 'Input',
colProps: { span: 8 }
},
{
field: 'fieldInt',
label: '整型',
component: 'Input',
colProps: { span: 8 }
},
{
field: 'fieldDatetime',
label: '时间',
component: 'RangePicker',
colProps: { span: 8 }
},
{
field: 'fieldDouble',
label: '浮点',
component: 'Input',
colProps: { span: 8 }
},
{
field: 'fieldLong',
label: '长整数',
component: 'Input',
colProps: { span: 8 }
}
];
const columns: BasicColumn[] = [
{
title: '字符串',
dataIndex: 'fieldString',
// width: 120,
},
{
title: '整型',
dataIndex: 'fieldInt',
// width: 120,
},
{
title: '时间',
dataIndex: 'fieldDatetime',
// width: 120,
},
{
title: '浮点',
dataIndex: 'fieldDouble',
// width: 120,
},
{
title: '长整数',
dataIndex: 'fieldLong',
// width: 180,
},
{
title: '备注',
dataIndex: 'remark',
},
];
const columns: BasicColumn[] = [
{
title: '字符串',
dataIndex: 'fieldString'
// width: 120,
},
{
title: '整型',
dataIndex: 'fieldInt'
// width: 120,
},
{
title: '时间',
dataIndex: 'fieldDatetime'
// width: 120,
},
{
title: '浮点',
dataIndex: 'fieldDouble'
// width: 120,
},
{
title: '长整数',
dataIndex: 'fieldLong'
// width: 180,
},
{
title: '备注',
dataIndex: 'remark'
}
];
defineEmits(['register']);
const { notification } = useMessage();
const { t } = useI18n();
const selectDeptId = ref(''); //左侧树选择
defineEmits(['register']);
const { notification } = useMessage();
const { t } = useI18n();
const selectDeptId = ref(''); //左侧树选择
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: 'Demo列表',
api: getDemoPage,
rowKey: 'id',
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
fieldMapToTime: [
['fieldDatetime', ['fieldDatetimeStart', 'fieldDatetimeEnd'], 'YYYY-MM-DD HH:mm:ss'],
],
},
// beforeFetch: (params) => {
// //发送请求默认新增 左边树结构所选机构id
// return { ...params, departmentId: selectDeptId.value };
// },
useSearchForm: true,
showTableSetting: true,
bordered: true,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
function handleCreate() {
openModal(true, {
isUpdate: false,
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: 'Demo列表',
api: getDemoPage,
rowKey: 'id',
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
fieldMapToTime: [['fieldDatetime', ['fieldDatetimeStart', 'fieldDatetimeEnd'], 'YYYY-MM-DD HH:mm:ss']]
},
// beforeFetch: (params) => {
// //发送请求默认新增 左边树结构所选机构id
// return { ...params, departmentId: selectDeptId.value };
// },
useSearchForm: true,
showTableSetting: true,
bordered: true,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' }
}
});
}
function handleEdit(record: Recordable) {
// console.log(record);
openModal(true, {
id: record.id,
isUpdate: true,
});
}
function handleCreate() {
openModal(true, {
isUpdate: false
});
}
function handleDelete(record: Recordable) {
deleteDemo([record.id]).then((_) => {
reload({ searchInfo: { departmentId: selectDeptId.value } });
notification.success({
message: 'Tip',
description: t('删除成功！'),
}); //提示消息
});
}
function handleEdit(record: Recordable) {
// console.log(record);
openModal(true, {
id: record.id,
isUpdate: true
});
}
function handleSuccess() {
reload({ searchInfo: { departmentId: selectDeptId.value } });
}
function handleDelete(record: Recordable) {
deleteDemo([record.id]).then((_) => {
reload({ searchInfo: { departmentId: selectDeptId.value } });
notification.success({
message: 'Tip',
description: t('删除成功！')
}); //提示消息
});
}
function handleSuccess() {
reload({ searchInfo: { departmentId: selectDeptId.value } });
}
</script>

182
src/views/code/demo2/index.vue
View File

@ -1,99 +1,99 @@
<template>
<PageWrapper title="表单基础示例" contentFullHeight>
<CollapseContainer title="基础示例">
<SimpleForm ref="formRef" :formProps="getFormProps" :formModel="formData">
<template #buttonBefore>
<a-button @click="handleChangeProps"> 修改表单props</a-button>
</template>
<template #buttonAfter>
<a-button @click="handleReset"> 按钮之后</a-button>
</template>
</SimpleForm>
<div>
<a-button type="primary" @click="handleSubmit"> 提交</a-button>
<a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
</div>
</CollapseContainer>
</PageWrapper>
<PageWrapper title="表单基础示例" contentFullHeight>
<CollapseContainer title="基础示例">
<SimpleForm ref="formRef" :formProps="getFormProps" :formModel="formData">
<template #buttonBefore>
<a-button @click="handleChangeProps"> 修改表单props</a-button>
</template>
<template #buttonAfter>
<a-button @click="handleReset"> 按钮之后</a-button>
</template>
</SimpleForm>
<div>
<a-button type="primary" @click="handleSubmit"> 提交</a-button>
<a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
</div>
</CollapseContainer>
</PageWrapper>
</template>
<script lang="ts" setup>
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { CollapseContainer } from '/@/components/Container';
import { PageWrapper } from '/@/components/Page';
import { getFormProps } from './data';
import { reactive, ref } from 'vue';
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { CollapseContainer } from '/@/components/Container';
import { PageWrapper } from '/@/components/Page';
import { getFormProps } from './data';
import { reactive, ref } from 'vue';
const formRef = ref();
const formRef = ref();
const formData = reactive<Recordable>({
fieldDouble: '12',
fieldInt: '12',
fieldDatetimeStartTime: '2022-06-29',
fieldDatetimeEndTime: '2022-07-29',
fieldLong: '12',
fieldString: '12',
fieldUpload: '6958325054052503552',
// postId: '1419276795215351808',
subform: [
{
fieldString: 'zzzzzzzzzzzzzzzz',
fieldInt: true,
},
],
});
const formData = reactive<Recordable>({
fieldDouble: '12',
fieldInt: '12',
fieldDatetimeStartTime: '2022-06-29',
fieldDatetimeEndTime: '2022-07-29',
fieldLong: '12',
fieldString: '12',
fieldUpload: '6958325054052503552',
// postId: '1419276795215351808',
subform: [
{
fieldString: 'zzzzzzzzzzzzzzzz',
fieldInt: true
}
]
});
const handleSubmit = async () => {
const res = await formRef.value?.validate();
console.log('通过formRef 调用表单提交方法', res);
};
const handleReset = () => {
formRef.value!.resetFields();
console.log('通过formRef 调用表单重置方法');
};
const handleSubmit = async () => {
const res = await formRef.value?.validate();
console.log('通过formRef 调用表单提交方法', res);
};
const handleReset = () => {
formRef.value!.resetFields();
console.log('通过formRef 调用表单重置方法');
};
let isDisabled = false;
const handleChangeProps = async () => {
{
//-------------------禁用表单------------------------
isDisabled = !isDisabled;
await formRef.value?.setProps({
disabled: isDisabled,
});
//-------------重置整个表单的元素-----------------
// formRef.value?.removeSchemaByFiled('fieldString');
//-------------重置整个表单的元素-----------------
// formRef.value?.resetSchema({
// field: 'fieldString',
// label: '字符串1111',
// component: 'InputNumber',
// rules: [{ required: true, message: 'Please input your fieldString!', trigger: 'blur' }],
// colProps: { span: 24 },
// });
//--------------修改单个表单元素-------------------
// formRef.value?.updateSchema({
// field: 'fieldString',
// label: '字符串1111',
// component: 'InputNumber',
// rules: [{ required: true, message: 'Please input your fieldString!', trigger: 'blur' }],
// colProps: { span: 24 },
// });
//----------------表单新增元素---------------
// formRef.value?.appendSchemaByField(
// {
// field: 'fieldString111',
// label: '字符串',
// component: 'Input',
// rules: [{ required: true, message: 'Please input your fieldString!', trigger: 'blur' }],
// colProps: { span: 24 },
// },
// 'fieldString',
// );
//--------------修改表单配置-----------------
// await formRef.value?.setProps({
// labelWidth: 150,
// showResetButton: false,
// showSubmitButton: false,
// });
}
};
let isDisabled = false;
const handleChangeProps = async () => {
{
//-------------------禁用表单------------------------
isDisabled = !isDisabled;
await formRef.value?.setProps({
disabled: isDisabled
});
//-------------重置整个表单的元素-----------------
// formRef.value?.removeSchemaByFiled('fieldString');
//-------------重置整个表单的元素-----------------
// formRef.value?.resetSchema({
// field: 'fieldString',
// label: '字符串1111',
// component: 'InputNumber',
// rules: [{ required: true, message: 'Please input your fieldString!', trigger: 'blur' }],
// colProps: { span: 24 },
// });
//--------------修改单个表单元素-------------------
// formRef.value?.updateSchema({
// field: 'fieldString',
// label: '字符串1111',
// component: 'InputNumber',
// rules: [{ required: true, message: 'Please input your fieldString!', trigger: 'blur' }],
// colProps: { span: 24 },
// });
//----------------表单新增元素---------------
// formRef.value?.appendSchemaByField(
// {
// field: 'fieldString111',
// label: '字符串',
// component: 'Input',
// rules: [{ required: true, message: 'Please input your fieldString!', trigger: 'blur' }],
// colProps: { span: 24 },
// },
// 'fieldString',
// );
//--------------修改表单配置-----------------
// await formRef.value?.setProps({
// labelWidth: 150,
// showResetButton: false,
// showSubmitButton: false,
// });
}
};
</script>