first commit
This commit is contained in:
ye1023
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable" @edit-change="handleEditChange">
|
||||
<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, EditRecordRow } from '/@/components/Table';
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '成员姓名',
|
||||
dataIndex: 'name',
|
||||
editRow: true,
|
||||
},
|
||||
{
|
||||
title: '工号',
|
||||
dataIndex: 'no',
|
||||
editRow: true,
|
||||
},
|
||||
{
|
||||
title: '所属部门',
|
||||
dataIndex: 'dept',
|
||||
editRow: true,
|
||||
},
|
||||
];
|
||||
|
||||
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, 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.onEdit?.(true);
|
||||
}
|
||||
|
||||
function handleCancel(record: EditRecordRow) {
|
||||
record.onEdit?.(false);
|
||||
if (record.isNew) {
|
||||
const data = getDataSource();
|
||||
const index = data.findIndex((item) => item.key === record.key);
|
||||
data.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSave(record: EditRecordRow) {
|
||||
record.onEdit?.(false, true);
|
||||
}
|
||||
|
||||
function handleEditChange(data: Recordable) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
const data = getDataSource();
|
||||
const addRow: EditRecordRow = {
|
||||
name: '',
|
||||
no: '',
|
||||
dept: '',
|
||||
editable: true,
|
||||
isNew: true,
|
||||
key: `${Date.now()}`,
|
||||
};
|
||||
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,
|
||||
handleEditChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,149 @@
|
||||
import { FormSchema } from '/@/components/Form';
|
||||
|
||||
const basicOptions: LabelValueOptions = [
|
||||
{
|
||||
label: '付晓晓',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '周毛毛',
|
||||
value: '2',
|
||||
},
|
||||
];
|
||||
|
||||
const storeTypeOptions: LabelValueOptions = [
|
||||
{
|
||||
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,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<PageWrapper class="high-form" title="高级表单" content=" 高级表单常见于一次性输入和提交大批量数据的场景。">
|
||||
<a-card title="仓库管理" :bordered="false">
|
||||
<BasicForm @register="register" />
|
||||
</a-card>
|
||||
<a-card title="任务管理" :bordered="false" class="!mt-5">
|
||||
<BasicForm @register="registerTask" />
|
||||
</a-card>
|
||||
<a-card title="成员管理" :bordered="false">
|
||||
<PersonTable ref="tableRef" />
|
||||
</a-card>
|
||||
|
||||
<template #rightFooter>
|
||||
<a-button type="primary" @click="submitAll"> 提交 </a-button>
|
||||
</template>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { BasicForm, useForm } from '/@/components/Form';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import PersonTable from './PersonTable.vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { schemas, taskSchemas } from './data';
|
||||
import { Card } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormHightPage',
|
||||
components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
|
||||
setup() {
|
||||
const tableRef = ref<{ getDataSource: () => any } | null>(null);
|
||||
|
||||
const [register, { validate }] = useForm({
|
||||
baseColProps: {
|
||||
span: 6,
|
||||
},
|
||||
labelWidth: 200,
|
||||
layout: 'vertical',
|
||||
schemas: schemas,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
|
||||
const [registerTask, { validate: validateTaskForm }] = useForm({
|
||||
baseColProps: {
|
||||
span: 6,
|
||||
},
|
||||
labelWidth: 200,
|
||||
layout: 'vertical',
|
||||
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;
|
||||
}
|
||||
|
||||
/** update-begin-author:taoyan date:2022-5-16 for:/issues/63 下拉框z-index问题 */
|
||||
:deep(.ant-select-dropdown) {
|
||||
z-index: 98 !important;
|
||||
}
|
||||
/** update-end-author:taoyan date:2022-5-16 for:/issues/63 下拉框z-index问题 */
|
||||
</style>
|
||||
Reference in New Issue
Block a user