fix: 新增员工共入职信息登记表

src/components/BsUi/Form/Form.vue

@@ -1,24 +1,35 @@
 <template>
   <div class="form">
-    <a-form ref="formRef" :model="props.formData" v-bind="props.formExtraProps" layout="vertical" :id="props.formId"  :validateTrigger="['submit']" >
-      <a-row v-for="(key, index) in Object.keys(newFormTemp)" :key="index" :id="key">
+    <a-form ref="formRef" :model="props.formData" v-bind="props.formExtraProps" layout="vertical" :id="props.formId"
+      :validateTrigger="['submit']">
+      <a-row v-for="(key, index) in Object.keys(newFormTemp)" :key="index" :id="key" :gutter="16">
         <a-col :span="24" v-if="formGroups.length > 0">
-          <div class="group-title">{{ formGroups.find((v) => v.id === key)?.name }}</div>
+          <BsCatalog :title="formGroups.find((v) => v.id === key)?.name"
+            v-if="formGroups.findIndex((item) => item.type === 'dot') > -1" />
+          <div class="group-title" v-else>{{formGroups.find((v) => v.id === key)?.name}}</div>
         </a-col>
-        <a-col :span="24" v-for="(item, idx) in newFormTemp[key]">
-          <a-row>
-            <a-col :span="24" v-if="item.visible === DISPLAY_STATE.VISIBLE">
-              <a-form-item :label="item.label" :name="item.field" :required="item.required === REQUIRED_STATE.REQUIRED" v-bind="item.formItemExtraProps">
-                <component
-                  :is="item.component"
-                  v-model:value="props.formData[item.field]"
-                  v-model:checked="props.formData[item.field]"
-                  v-bind="item.componentProps"
-                  @change="handleFieldChange(item, $event)"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+        <a-col :span="item.span ?? 24" v-for="(item, idx) in newFormTemp[key]">
+          <a-form-item v-if="item.visible === DISPLAY_STATE.VISIBLE" :name="item.field"
+            :required="item.required === REQUIRED_STATE.REQUIRED" v-bind="item.formItemExtraProps">
+            <template #label v-if="item.tooltip">
+              {{ item.label }}
+              <a-tooltip class="tooltip">
+                <template #title>
+                  <span>{{ item.tooltip }}</span>
+                </template>
+                <QuestionCircleOutlined />
+              </a-tooltip>
+            </template>
+            <template #label v-else>{{ item.label }}</template>
+            <component :is="item.component" v-model:value="props.formData[item.field]"
+              v-model:checked="props.formData[item.field]" v-bind="item.componentProps"
+              @change="handleFieldChange(item, $event)">
+              <slot>{{ item.componentProps?.buttonText || '' }}</slot>
+              <template v-for="slot in item.componentProps.slots" #[slot.slotName]>
+                <component :is="slot.customRender()" v-bind="slot.slotProps"></component>
+              </template>
+            </component>
+          </a-form-item>
         </a-col>
 
         <a-col :span="24" v-if="!footerRender && !slots.footerRender">
@@ -45,111 +56,117 @@
 </template>
 
 <script setup lang="jsx">
-  import { computed, ref, useSlots } from 'vue';
-  import RenderVNode from '/@/components/BsUi/RenderVNode/index.js';
-  import { groupBy, mapValues, sortBy } from 'lodash';
-  import { DISPLAY_STATE, REQUIRED_STATE } from '/@/components/BsUi/constant.js'
-
-  const formRef = ref(null);
-  const confirmLoading = ref(false);
-
-  const props = defineProps({
-    formFields: {
-      required: true,
-      default: [],
-    },
-    formData: {
-      required: true,
-      default: {},
-    },
-    formExtraProps: {
-      required: false,
-      default: null,
-    },
-    footerRender: {
-      required: false,
-      default: null,
-    },
-    formGroups: {
-      required: false,
-      default: [],
-    },
-    formId: {
-      required: false,
-      default: 'AchorContentId',
-    },
-    isShowGroupTitle: {
-      required: false,
-      default: true,
-    },
-  });
-  const emits = defineEmits(['cancel', 'ok', 'change']);
-  const slots = useSlots();
+import { computed, ref, useSlots } from 'vue';
+import RenderVNode from '/@/components/BsUi/RenderVNode/index.js';
+import { groupBy, mapValues, sortBy } from 'lodash';
+import { DISPLAY_STATE, REQUIRED_STATE } from '/@/components/BsUi/constant.js'
+import BsCatalog from '/@/components/BsUi/Catalog/index.vue';
+const formRef = ref(null);
+const confirmLoading = ref(false);
 
-  const handleFieldChange = (field, value) => {
-    formRef.value.validateFields([field.field])
-    field?.onChange && field?.onChange(value)
-    emits('change', value)
-  }
+const props = defineProps({
+  formFields: {
+    required: true,
+    default: [],
+  },
+  formData: {
+    required: true,
+    default: {},
+  },
+  formExtraProps: {
+    required: false,
+    default: null,
+  },
+  footerRender: {
+    required: false,
+    default: null,
+  },
+  formGroups: {
+    required: false,
+    default: [],
+  },
+  formId: {
+    required: false,
+    default: 'AchorContentId',
+  },
+  isShowGroupTitle: {
+    required: false,
+    default: true,
+  },
+});
+const emits = defineEmits(['cancel', 'ok', 'change']);
+const slots = useSlots();
 
+const handleFieldChange = (field, value) => {
+  formRef.value.validateFields([field.field])
+  field?.onChange && field?.onChange(value)
+  emits('change', value)
+}
 
-  const handlerFormValidator = () => {
-    return new Promise((resolve, reject) => {
-      formRef.value
-        .validateFields()
-        .then(() => {
-          resolve();
-        })
-        .catch((error) => {
-          reject(error);
-        });
-    });
-  };
-
-  const cancelHandle = () => {
-    emits('cancel');
-  };
-  const setLoading = (loading) => {
-    confirmLoading.value = loading;
-  };
-
-  const confirmHandle = () => {
-    handlerFormValidator.then((res) => {
-      emits('ok', props.formData, formRef.value, setLoading);
-    });
-  };
-
-  const newFormTemp = computed(() => {
-    const groupByIds = groupBy(props.formFields, 'groupId');
-    return mapValues(groupByIds, (group) => sortBy(group, 'sort'));
+
+const handlerFormValidator = () => {
+  return new Promise((resolve, reject) => {
+    formRef.value
+      .validateFields()
+      .then(() => {
+        resolve();
+      })
+      .catch((error) => {
+        reject(error);
+      });
   });
+};
+
+const cancelHandle = () => {
+  emits('cancel');
+};
+const setLoading = (loading) => {
+  confirmLoading.value = loading;
+};
+
+const confirmHandle = () => {
+  handlerFormValidator.then((res) => {
+    emits('ok', props.formData, formRef.value, setLoading);
+  });
+};
+
+const newFormTemp = computed(() => {
+  const groupByIds = groupBy(props.formFields, 'groupId');
+  return mapValues(groupByIds, (group) => sortBy(group, 'sort'));
+});
 
-  defineExpose({ handlerFormValidator })
+defineExpose({ handlerFormValidator })
 </script>
 
 <style lang="scss" scoped>
-  .form {
+.form {
+  width: 100%;
+
+  :deep(.ant-form-item) {
+    margin: 10px 0;
+  }
+
+  .group-title {
     width: 100%;
-    :deep(.ant-form-item) {
-      margin: 10px 0;
-    }
+    height: 40px;
+    background: #e0e8f5;
+    line-height: 40px;
+    color: #4285f4;
+    font-size: 16px;
+    padding-left: 15px;
 
-    .group-title {
-      width: 100%;
-      height: 40px;
-      background: #e0e8f5;
-      line-height: 40px;
-      color: #4285f4;
-      font-size: 16px;
-      padding-left: 15px;
-      &::before {
-        content: '';
-        width: 2px;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        background: #4285f4;
-      }
+    &::before {
+      content: '';
+      width: 2px;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      background: #4285f4;
     }
   }
+
+  .tooltip {
+    padding-left: 8px;
+  }
+}
 </style>

src/views/personnel-entry/pc/components/interview-evaluation.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="interview-evaluation" v-show="props.create">
+        <div class="interview-header">
+            <div class="interview-header-left">
+                <div>创建时间：{{ formatDate(currentTime)  }}</div>
+                <div>创建人：{{ userStore.actualName }}</div>
+            </div>
+            <a-button type="link" danger @click="claerAll">删除</a-button>
+        </div>
+        <div class="interview-content">
+            <BsForm :form-fields="formOptions.formFields" :form-data="formOptions.formData"
+            :form-extra-props="formOptions.formExtraProps" :footer-render="() => null" :form-id="formOptions.formId"
+            :form-groups="formOptions.formGroups" ref="bsFormRef" class="personnel-entry-form" ></BsForm>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, nextTick, computed } from "vue"
+import { useUserStore } from "/@/store/modules/system/user";
+import BsForm, { useBsForm } from '/@/components/BsUi/Form/index.js';
+import { formatDate } from "/@/utils/date";
+const props = defineProps(['create'])
+const userStore = useUserStore()
+const current = new Date()
+const currentTime = computed(() => current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate())
+
+const { formOptions, setFormPropsValue: setFVal } = useBsForm({
+    formOptions: {
+        formGroups: [
+            {
+                id: '1',
+                label: '面试官',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+        ]
+    }
+})
+function claerAll(){
+    
+}
+</script>
+<style lang="scss" scoped>
+.interview-evaluation {
+    display: flex;
+    flex-direction: column;
+
+    .interview-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        background-color: #F8F8F9;
+        padding: 0 8px;
+        .interview-header-left {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 8px;
+        }
+    }
+}
+</style>

src/views/personnel-entry/pc/components/project-deatil.vue

@@ -0,0 +1,198 @@
+<template>
+    <bs-table v-bind="tableOptions">
+        <template #edit_projectName="{ row }">
+            <a-input v-model:value="row.projectName" clearable></a-input>
+        </template>
+
+        <template #edit_position="{ row }">
+            <a-input v-model:value="row.position" clearable></a-input>
+        </template>
+
+        <template #action="{ row }">
+            <template v-if="hasEditStatus(row)">
+                <a-button type="link" @click="saveRowEvent(row)">保存</a-button>
+                <a-button type="link" @click="cancelRowEvent()">取消</a-button>
+            </template>
+            <template v-else>
+                <a-button type="link" @click="editRowEvent(row)">编辑</a-button>
+            </template>
+        </template>
+    </bs-table>
+</template>
+
+<script setup lang="jsx">
+import { ref, nextTick, computed } from 'vue';
+import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
+import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
+
+const {
+    tableOptions,
+    setTablePropsValue: setValue,
+    getTablePropsValue: getValue,
+    refreshTable,
+    getGridRef,
+    fetchTableData,
+} = useBsTable({
+    tableOptions: {
+        toolbarTopConfig: {
+            enable: false,
+        },
+        gridOptions: {
+            editConfig: {
+                trigger: 'manual',
+                mode: 'row',
+            },
+            loading: false,
+            columns: [
+                {
+                    type: 'seq',
+                    width: 80,
+                },
+                {
+                    field: 'projectName',
+                    title: '项目名称',
+                    editRender: {},
+                    slots: {
+                        edit: 'edit_projectName',
+                    },
+                },
+                {
+                    field: 'position',
+                    title: '项目任职',
+                    editRender: {},
+                    slots: {
+                        edit: 'edit_position',
+                    },
+                },
+                {
+                    field: 'startDate',
+                    title: '项目开始时间',
+                    editRender: { name: 'VxeDatePicker', props: { type: 'date' } }
+                },
+                {
+                    field: 'endDate',
+                    title: '项目结束时间',
+                    editRender: { name: 'VxeDatePicker', props: { type: 'date' } }
+                },
+                {
+                    field: 'createTime',
+                    title: '创建时间',
+                    editRender: { name: 'VxeDatePicker', props: { type: 'date' } }
+                },
+                {
+                    field: 'opt1',
+                    title: '操作',
+                    width: '120px',
+                    fixed: 'right',
+                    slots: {
+                        default: 'action',
+                    },
+                },
+            ],
+            data: [
+                {
+                    id: 1,
+                    projectName: '项目名称信息展示位置',
+                    position: '具体描述信息，具体描述信息，有具体描述信息',
+                    startDate: '2024-02-24',
+                    endDate: '2025-02-24',
+                    createTime: '2025-06-21 15:12',
+                }
+            ], // 模拟数据源
+        },
+        searchConfig: {
+            enabled: false,
+        },
+        pagerConfig: {
+            enabled: false,
+            isFixed: false,
+        },
+        toolbarConfig: {
+            enable: true,
+            displayToolbar: DISPLAY_STATE.HIDDEN,
+            leftButtons: [{
+                code: 'btn1',
+                title: '新增',
+                props: {
+                    type: 'primary',
+                    disabled: false,
+                    onClick(event) {
+                        const newRow = {
+                            id: Date.now(),
+                            projectName: '',
+                            position: '',
+                            startDate: '',
+                            endDate: '',
+                            createTime: new Date().toLocaleString(),
+                        };
+                        nextTick(() => {
+                            const $table = getGridRef();
+                            $table.insertAt(newRow,-1)
+                        });
+                    },
+                },
+            }],
+        },
+    },
+});
+const hasEditStatus = (row) => {
+    const $grid = getGridRef()
+    if ($grid) {
+        return $grid.isEditByRow(row)
+    }
+}
+function saveRowEvent(row) {
+    const $grid = getGridRef()
+    console.log(row);
+
+    if ($grid) {
+        $grid.clearEdit().then(() => {
+            setValue('gridOptions.loading', true)
+            setTimeout(() => {
+                setValue('gridOptions.loading', false)
+                // VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
+            }, 300)
+        })
+    }
+}
+const editRowEvent = (row) => {
+    const $grid = getGridRef()
+    console.log($grid, row);
+
+    if ($grid) {
+        $grid.setEditRow(row)
+    }
+}
+const cancelRowEvent = () => {
+    const $grid = getGridRef()
+    if ($grid) {
+        $grid.clearEdit()
+    }
+}
+
+</script>
+
+<style scoped lang="scss">
+.dynamic-form-table {
+    padding: 20px;
+
+    :deep(.vxe-table) {
+        .desc-content {
+            white-space: pre-line;
+            line-height: 1.6;
+        }
+
+        .vxe-body--column {
+            padding: 12px 10px;
+        }
+
+        .vxe-button+.vxe-button {
+            margin-left: 8px;
+        }
+    }
+
+    .vxe-toolbar {
+        padding: 0 0 15px 0;
+    }
+}
+</style>

src/views/personnel-entry/pc/index.vue

@@ -0,0 +1,830 @@
+<template>
+    <div class="personnel-entry">
+        <div class="personnel-entry-header">
+            员工入职信息登记表
+        </div>
+        <BsForm :form-fields="formOptions.formFields" :form-data="formOptions.formData"
+            :form-extra-props="formOptions.formExtraProps" :footer-render="() => null" :form-id="formOptions.formId"
+            :form-groups="formOptions.formGroups" ref="bsFormRef" class="personnel-entry-form" >
+            
+        </BsForm>
+        <div class="personnel-entry-footer">
+            <a-button>重置</a-button>
+            <a-button>保存</a-button>
+        </div>
+    </div>
+</template>
+<script setup lang="jsx">
+import { ref, reactive, defineComponent } from "vue"
+import BsForm, { useBsForm } from '/@/components/BsUi/Form/index.js';
+import FileUpload from '/@/components/support/file-upload/index.vue'
+import ProjectDeatil from "./components/project-deatil.vue";
+import interviewEvaluation from "./components/interview-evaluation.vue";
+import AreaCascader from '/@/components/framework/area-cascader/index.vue'
+const bsFormRef = ref(null);
+const createInterviewEvaluation =ref(false)
+
+const { formOptions, setFormPropsValue: setFVal } = useBsForm({
+    formOptions: {
+        formGroups: [
+            {
+                id: "1",
+                name: '基本信息',
+                type:'dot'
+            },
+            {
+                id: "2",
+                name: '项目信息',
+                type:'dot'
+            },
+            {
+                id: "3",
+                name: '证件信息',
+                type:'dot'
+            },
+            {
+                id: "4",
+                name: '入职体检报告',
+                type:'dot'
+            },
+            {
+                id: "5",
+                name: '面试评价',
+                type:'dot'
+            },
+            {
+                id: "6",
+                name: '附件信息',
+                type:'dot'
+            },
+        ],
+        formFields: [
+            {
+                groupId: "1",
+                id: '1',
+                label: '姓名',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入姓名',
+                    
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '2',
+                label: '性别',
+                component: 'a-select',
+                componentProps: {
+                    placeholder: '请选择性别',
+                },
+                field: '',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '3',
+                label: '身份证号码',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入身份证号码',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '4',
+                label: '手机号',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入手机号',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '5',
+                label: '岗位',
+                component: 'a-select',
+                componentProps: {
+                    placeholder: '请选择岗位',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '6',
+                label: '类型 ',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请选择类型',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '7',
+                label: '工作年限',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入工作年限',
+                    slots: [
+                        {
+                            slotName:'suffix',
+                            customRender:()=>{
+                                return (
+                                    <div>人</div>
+                                )
+                            }
+                        }
+                    ]
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '8',
+                label: '学历',
+                component: 'a-select',
+                componentProps: {
+                    placeholder: '请选择学历',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '9',
+                label: '毕业院校',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入毕业院校',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '11',
+                label: '专业',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入专业',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '12',
+                label: '联系地址',
+                component: AreaCascader,
+                componentProps: {
+                    placeholder: '请选择联系地址',
+                    type:'province_city_district',
+                    width:'100%'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '14',
+                label: '详细地址',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入详细地址',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '15',
+                label: '紧急联系人',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入紧急联系人',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '16',
+                label: '与紧急联系人关系',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入与紧急联系人关系',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "1",
+                id: '17',
+                label: '紧急联系人电话',
+                component: 'a-input',
+                componentProps: {
+                    placeholder: '请输入紧急联系人电话',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 6,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "2",
+                id: '18',
+                label: '个人专长',
+                component: 'a-textarea',
+                componentProps: {
+                    placeholder: '请输入个人专长',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 24,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "2",
+                id: '18',
+                label: '负责项目情况',
+                component: ProjectDeatil,
+                componentProps: {
+                    placeholder: '请输入负责项目情况',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 24,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "2",
+                id: '19',
+                label: '身份证人像面',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'人像面上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "2",
+                id: '20',
+                label: '身份证国徽面',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'国徽面上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "2",
+                id: '21',
+                label: '无犯罪记录证明',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'证明上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "2",
+                id: '22',
+                label: '解聘证书',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'证明上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '0',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "3",
+                id: '23',
+                label: '毕业证书',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'证书上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "3",
+                id: '24',
+                label: '学位证书',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'证书上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "3",
+                id: '25',
+                label: '其他证书',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'证书上传',
+                    showUploadList:false,
+                    uploadAterClear:true,
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '0',
+                span: 2,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+             {
+                groupId: "4",
+                id: '26',
+                label: '体检报告',
+                component: FileUpload,
+                componentProps: {
+                    // placeholder: '请输入',
+                    buttonText:'证书上传',
+                    listType:'text',
+                    maxUploadSize:1,
+                    accept:'.png,.jpg,jpeg,.pdf'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                required: '1',
+                span: 2,
+                tooltip:"支持png、jpg、pdf等常见报告格式",
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "5",
+                id: '26',
+                label: '',
+                component: 'a-button',
+                componentProps: {
+                    // placeholder: '请输入',
+                    onClick:()=>{
+                        console.log('1111');
+                        createInterviewEvaluation.value = true
+                    },
+                    buttonText:'创建评价',
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                span: 24,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "5",
+                id: '27',
+                label: '',
+                component: interviewEvaluation,
+                componentProps: {
+                    // setValue("a.b.0.sort", 1)
+                    create:createInterviewEvaluation,
+                    onClick:()=>{
+                        console.log('1111');
+                    },
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1', 
+                span: 24,
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                groupId: "6",
+                id: '26',
+                label: '',
+                component: FileUpload,
+                componentProps: {
+                    buttonText:'点击上传',
+                    listType:'text',
+                    maxUploadSize:3,
+                    accept:'.png,.jpg,jpeg,.pdf,.doc,.ppt,.mp4,.avi'
+                },
+                field: 'name',
+                sort: '1',
+                visible: '1',
+                span: 24,
+                tooltip:"附件上传 支持png、jpg、doc、ppt、pdf、mp4、avi等常见报告格式",
+                formItemExtraProps: {
+                    rules: [
+                        {
+                            validator: (_, value) => {
+                                // return Promise.reject(new Error('报错'));
+                                return Promise.resolve();
+                            },
+                        },
+                    ],
+                },
+            },
+        ],
+        // formData: {
+        //     name: '韩晓辉',
+        // },
+        formId: 'formId',
+        formExtraProps: {},
+    },
+});
+</script>
+<style lang="scss" scoped>
+.personnel-entry {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .personnel-entry-header {
+        border-bottom: 1px solid #E4E7ED;
+        font-size: 24px;
+        font-family: 'PingFang SC';
+        font-weight: 500;
+        text-align: center;
+        padding: 16px 0;
+    }
+
+    .personnel-entry-form {
+        flex: 1;
+        padding: 16px;
+        height: 75vh;
+        overflow-y: scroll;
+    }
+
+    .personnel-entry-footer {
+        position: sticky;
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        box-shadow: 0px -4px 4px 0px rgba(136, 136, 136, 0.25);
+        padding: 20px;
+    }
+}
+</style>