项目申报表单添加

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

@@ -1,12 +1,12 @@
 import { FormSchema } from '@/components/Form';
 
-const basicOptions: LabelValueOptions = [
+/*const basicOptions: LabelValueOptions = [
   {
-    label: '付晓晓',
+    label: '付晓晓222',
     value: '1',
   },
   {
-    label: '周毛毛',
+    label: '周毛毛333',
     value: '2',
   },
 ];
@@ -20,19 +20,39 @@ const storeTypeOptions: LabelValueOptions = [
     label: '公开',
     value: '2',
   },
-];
+];*/
 
-export const schemas: FormSchema[] = [
+//项目基本信息schema
+export const projectBaseInfoSchemas: FormSchema[] = [
+  {
+    field: 'projectType',
+    component: 'Input',
+    label: '项目类别',
+    required: true,
+  },
   {
-    field: 'f1',
+    field: 'annualId',
     component: 'Input',
-    label: '仓库名',
+    label: '计划年度',
     required: true,
   },
   {
+    field: 'batchNo',
+    component: 'Input',
+    label: '批次',
+    defaultValue: 1,
+    required: true,
+  },
+  {
+    field: 'projectName',
+    component: 'Input',
+    label: '项目名称',
+    required: true,
+  },
+  /*{
     field: 'f2',
     component: 'Input',
-    label: '仓库域名',
+    label: '仓库域名2',
     required: true,
     componentProps: {
       addonBefore: 'http://',
@@ -41,11 +61,10 @@ export const schemas: FormSchema[] = [
     colProps: {
       offset: 2,
     },
-  },
+  },{
-  {
     field: 'f3',
     component: 'Select',
-    label: '仓库管理员',
+    label: '仓库管理员2',
     componentProps: {
       options: basicOptions,
     },
@@ -53,8 +72,7 @@ export const schemas: FormSchema[] = [
     colProps: {
       offset: 2,
     },
-  },
+  },{
-  {
     field: 'f4',
     component: 'Select',
     label: '审批人',
@@ -62,17 +80,17 @@ export const schemas: FormSchema[] = [
       options: basicOptions,
     },
     required: true,
-  },
+  },*/
   {
     field: 'f5',
     component: 'RangePicker',
     label: '生效日期',
     required: true,
-    colProps: {
+    /*colProps: {
       offset: 2,
+    },*/
   },
-  },
+  /*{
-  {
     field: 'f6',
     component: 'Select',
     label: '仓库类型',
@@ -83,67 +101,143 @@ export const schemas: FormSchema[] = [
     colProps: {
       offset: 2,
     },
-  },
+  },*/
 ];
-export const taskSchemas: FormSchema[] = [
+
+//项目负责人schema
+export const userSchemas: FormSchema[] = [
   {
-    field: 't1',
+    field: 'name',
     component: 'Input',
-    label: '任务名',
+    label: '姓名',
     required: true,
   },
   {
-    field: 't2',
+    field: 'sex',
+    label: '性别',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'sex',
+      // stringToNumber: true,
+    },
+  },
+  {
+    field: 'age',
     component: 'Input',
-    label: '任务描述',
+    label: '年龄',
     required: true,
-    colProps: {
+    // colProps: { span: 6 },
-      offset: 2,
   },
+  {
+    label: '名族',
+    field: 'nation',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'nation',
+      // stringToNumber: true,
+    },
+    //colProps: { span: 6 },
   },
   {
-    field: 't3',
+    label: '党派',
-    component: 'Select',
+    field: 'political',
-    label: '执行人',
+    component: 'JDictSelectTag',
     componentProps: {
-      options: basicOptions,
+      dictCode: 'political',
+      // stringToNumber: true,
     },
-    required: true,
+    //colProps: { span: 6 },
-    colProps: {
-      offset: 2,
   },
+  {
+    field: 'title',
+    component: 'Input',
+    label: '职称',
+    // required: true,
+    // colProps: { span: 6 },
   },
   {
-    field: 't4',
+    field: 'job',
-    component: 'Select',
+    component: 'Input',
-    label: '责任人',
+    label: '职务',
+    // required: true,
+    // colProps: { span: 6 },
+  },
+  {
+    field: 'currentPerfession',
+    component: 'Input',
+    label: '现从事专业',
+    // required: true,
+    // colProps: { span: 6 },
+  },
+];
+
+//单位信息schema
+export const departSchemas: FormSchema[] = [
+  {
+    field: 'org_name',
+    component: 'Input',
+    label: '单位名称',
+    // required: true,
+  },
+  {
+    field: 'category',
+    component: 'JDictSelectTag',
+    label: '单位性质',
     componentProps: {
-      options: basicOptions,
+      dictCode: 'depart_category',
+      // stringToNumber: true,
     },
-    required: true,
   },
   {
-    field: 't5',
+    field: 'type',
-    component: 'TimePicker',
+    component: 'JDictSelectTag',
-    label: '生效日期',
+    label: '企业登记注册类型',
-    required: true,
     componentProps: {
-      style: { width: '100%' },
+      dictCode: 'depart_type',
+      // stringToNumber: true,
     },
-    colProps: {
+    // colProps: { span: 6 },
-      offset: 2,
   },
+  {
+    field: 'address',
+    component: 'Input',
+    label: '注册地址',
+    // required: true,
+    // colProps: { span: 6 },
   },
   {
-    field: 't6',
+    field: 'fax',
-    component: 'Select',
+    component: 'Input',
-    label: '任务类型',
+    label: '传真',
-    componentProps: {
+    // required: true,
-      options: storeTypeOptions,
+    // colProps: { span: 6 },
   },
-    required: true,
+  {
-    colProps: {
+    field: 'bankName',
-      offset: 2,
+    component: 'Input',
+    label: '开户银行',
+    // required: true,
+    // colProps: { span: 6 },
   },
+  {
+    field: 'bankNo',
+    component: 'Input',
+    label: '账号',
+    // required: true,
+    // colProps: { span: 6 },
+  },
+  {
+    field: 'employeeNum',
+    component: 'Input',
+    label: '职工总数',
+    // required: true,
+    // colProps: { span: 6 },
+  },
+  {
+    field: 'lastYearFee',
+    component: 'Input',
+    label: '上年度研发经费',
+    // required: true,
+    // colProps: { span: 6 },
   },
 ];

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

@@ -1,13 +1,13 @@
 <template>
-  <PageWrapper class="high-form" title="高级表单" content=" 高级表单常见于一次性输入和提交大批量数据的场景。">
+  <PageWrapper title="基本信息">
-    <a-card title="仓库管理" :bordered="false">
+    <a-card title="项目概况" :bordered="false">
-      <BasicForm @register="register" />
+      <BasicForm @register="registerProjectInfo" />
     </a-card>
-    <a-card title="任务管理" :bordered="false" class="!mt-5">
+    <a-card title="项目负责人" :bordered="false" class="!mt-5">
-      <BasicForm @register="registerTask" />
+      <BasicForm @register="registerUser" />
     </a-card>
-    <a-card title="成员管理" :bordered="false">
+    <a-card title="申请单位概况" :bordered="false" class="!mt-5">
-      <PersonTable ref="tableRef" />
+      <BasicForm @register="registerDepart" />
     </a-card>
 
     <template #rightFooter>
@@ -18,49 +18,59 @@
 <script lang="ts">
   import { BasicForm, useForm } from '@/components/Form';
   import { defineComponent, ref } from 'vue';
-  import PersonTable from './PersonTable.vue';
+  // import PersonTable from './PersonTable.vue';
   import { PageWrapper } from '@/components/Page';
-  import { schemas, taskSchemas } from './data';
+  import { projectBaseInfoSchemas, userSchemas, departSchemas } from './data';
   import { Card } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'FormHightPage',
-    components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
+    components: { BasicForm, PageWrapper, [Card.name]: Card },
     setup() {
-      const tableRef = ref<{ getDataSource: () => any } | null>(null);
+      const [registerProjectInfo, { validate: validateProjectInfoForm }] = useForm({
+        baseColProps: {
+          span: 6,
+        },
+        labelWidth: 200,
+        layout: 'vertical',
+        schemas: projectBaseInfoSchemas,
+        showActionButtonGroup: false,
+      });
 
-      const [register, { validate }] = useForm({
+      const [registerUser, { validate: validateUserForm }] = useForm({
         baseColProps: {
           span: 6,
         },
         labelWidth: 200,
         layout: 'vertical',
-        schemas: schemas,
+        schemas: userSchemas,
         showActionButtonGroup: false,
       });
 
-      const [registerTask, { validate: validateTaskForm }] = useForm({
+      const [registerDepart, { validate: validateDepartForm }] = useForm({
         baseColProps: {
           span: 6,
         },
         labelWidth: 200,
         layout: 'vertical',
-        schemas: taskSchemas,
+        schemas: departSchemas,
         showActionButtonGroup: false,
       });
 
       async function submitAll() {
         try {
-          if (tableRef.value) {
+          // if (tableRef.value) {
-            console.log('table data:', tableRef.value.getDataSource());
+          //   console.log('table data:', tableRef.value.getDataSource());
-          }
+          // }
-
+          const [projectBaseInfoValues, userValues, deaprtValues] = await Promise.all([validateProjectInfoForm(), validateUserForm(), validateDepartForm()]);
-          const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
+          console.log('projectBaseInfoValues form data:', projectBaseInfoValues);
-          console.log('form data:', values, taskValues);
+          console.log('userValuesform data:', userValues);
+          console.log('deaprtValues form data:', deaprtValues);
         } catch (error) {}
       }
 
-      return { register, registerTask, submitAll, tableRef };
+      // return { register, registerUser, registerDepart, submitAll, tableRef };
+      return { registerProjectInfo, registerUser, registerDepart, submitAll };
     },
   });
 </script>