项目申报表单添加 10.15

jeecgboot-vue3/src/views/projectApplication/PersonTable.vue

@@ -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>

jeecgboot-vue3/src/views/projectApplication/data.ts

@@ -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,
+    },
+  },
+];

jeecgboot-vue3/src/views/projectApplication/projectApplicationList.vue

@@ -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>