fix: 新增员工入职信息登记表移动端布局完成

src/api/personnel-entry/index.js

@@ -0,0 +1,13 @@
+import { postRequest, getRequest } from '/@/lib/axios';
+/* 新增员工 */
+export function addPersonnel(params){
+    return postRequest('/supports/employee/onboarding/create',params)
+}
+/* 获取入职员工信息 */
+export function getPersonnelInfo(id){
+    return getRequest(`/supports/employee/onboarding/query/${id}`)
+}
+/* 编辑更新入职员工 */
+export function updatePersonnel(params){
+    return postRequest('/supports/employee/onboarding/update',params)
+}

src/router/system/login.js

@@ -46,4 +46,14 @@ export const loginRouters = [
       isWhite: true
     },
   },
+   {
+    path: '/enrollment',
+    name: 'enrollment',
+    component: () => import('/@/views/personnel-entry/mobile/index.vue'),
+    meta: {
+      title: '员工入职信息登记表',
+      hideInMenu: true,
+      isWhite: true
+    },
+  },
 ];

src/views/personnel-entry/mobile/components/one-step.vue

@@ -0,0 +1,121 @@
+<template>
+    <van-form @failed="onFailed" @sumbit="onSubmit">
+        <van-cell-group class="cell-group">
+            <div class="title">
+                <div class="line"></div>
+                <div class="title-info">基本信息</div>
+            </div>
+            <van-field v-model="formDataOneStep.name" label="姓名" name="name" placeholder="请输入姓名"
+                :rules="[{ required: true, message: '请输入您的姓名' }]" required />
+            <van-field name="sex" label="性别" :rules="[{ required: true, message: '请选择您的性别' }]" required>
+                <template #input>
+                    <van-radio-group v-model="formDataOneStep.sex" direction="vertical" class="sex-radio">
+                        <van-radio :name="1">男士</van-radio>
+                        <van-radio :name="0">女士</van-radio>
+                    </van-radio-group>
+                </template>
+            </van-field>
+            <van-field v-model="formDataOneStep.name" label="证件号" name="name" placeholder="请输入证件号"
+                :rules="[{ required: true, message: '请输入证件号' }]" required />
+            <van-field v-model="formDataOneStep.name" label="手机号" name="name" placeholder="请输入手机号"
+                :rules="[{ required: true, message: '请输入手机号' }]" required />
+            <van-field v-model="formDataOneStep.name" is-link readonly name="name" label="岗位" placeholder="请选择岗位"
+                @click="showPicker = true" required />
+            <van-popup v-model:show="showPicker" position="bottom">
+                <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
+            </van-popup>
+            <!-- <van-field name="name" label="文件上传" :rules="[{ required: true, message: '请选择您的性别' }]">
+                    <template #input>
+                        <van-uploader v-model="formData.name" />
+                    </template>
+            </van-field> -->
+            <van-field v-model="formDataOneStep.name" is-link readonly name="name" label="类型" placeholder="请选择招聘类型"
+                @click="showPicker = true" required />
+            <van-popup v-model:show="showPicker" position="bottom">
+                <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
+            </van-popup>
+            <van-field v-model="formDataOneStep.name" label="工作年限" name="name" placeholder="请输入工作年限"
+                :rules="[{ required: true, message: '请输入工作年限' }]" required />
+            <van-field v-model="formDataOneStep.name" is-link readonly name="name" label="学历" placeholder="请选择最高学历"
+                @click="showArea = true" required />
+            <van-popup v-model:show="showArea" position="bottom">
+                <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
+            </van-popup>
+            <van-field v-model="formDataOneStep.name" label="学校" name="name" placeholder="请输入毕业院校"
+                :rules="[{ required: true, message: '请输入毕业院校' }]" required />
+            <van-field v-model="formDataOneStep.name" label="专业" name="name" placeholder="请输入所学专业"
+                :rules="[{ required: true, message: '请输入所学专业' }]" required />
+            <van-field v-model="formDataOneStep.name" is-link readonly name="name" label="联系地址" placeholder="请选择联系地址"
+                @click="showArea = true" required />
+            <van-popup v-model:show="showArea" position="bottom">
+                <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
+            </van-popup>
+            <van-field v-model="formDataOneStep.name" type="textarea" label="详细地址" name="name" placeholder="请输入详细地址"
+                :rules="[{ required: true, message: '请输入详细地址' }]" required />
+        </van-cell-group>
+        <div class="gap"></div>
+        <van-cell-group class="cell-group">
+            <div class="title">
+                <div class="line"></div>
+                <div class="title-info">基本信息-紧急联系人</div>
+            </div>
+            <van-field v-model="formDataOneStep.name" name="name" label="紧急联系人" placeholder="请输入紧急联系人称呼"
+                @click="showArea = true" required />
+            <van-field v-model="formDataOneStep.name" name="name" label="紧急联系人关系" placeholder="请输入紧急联系人关系"
+                @click="showArea = true" required />
+            <van-field v-model="formDataOneStep.name" name="name" label="联系方式" placeholder="请输入联系人手机号" required />
+        </van-cell-group>
+    </van-form>
+</template>
+<script setup>
+import { ref, reactive } from "vue"
+import useBsDict from '/@/utils/dict.js';
+const formDataOneStep = defineModel('formDataOneStep')
+const showArea = ref(false)
+const showPicker = ref(false)
+const columns = []
+const areaList = []
+function onFailed(errorInfo) {
+
+}
+function onConfirm() {
+
+}
+function onSubmit(values) {
+
+}
+</script>
+<style lang="scss" scoped>
+.gap {
+    height: .6rem;
+    background-color: #EBEEF5;
+}
+
+.cell-group {
+    padding: .8rem .5rem;
+}
+
+.title {
+    display: inline-flex;
+    gap: .5rem;
+    margin: 0 1rem;
+
+    .line {
+        width: .3rem;
+        height: 1.3rem;
+        background-color: #2B69F8;
+    }
+
+    .title-info {
+        font-size: 1.3rem;
+        font-weight: 500;
+        font-family: 'PingFang SC';
+    }
+}
+
+.sex-radio {
+    display: flex;
+    flex: 1;
+    gap: 4rem;
+}
+</style>

src/views/personnel-entry/mobile/components/submit-step.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="submit-step">
+        <img :src="suceess" class="img">
+        <div class="submit-box">
+            <div class="title">恭喜您完成入职信息登记！</div>
+            <div class="text">亲爱的同事，未来我们将共同努力~</div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, reactive } from "vue"
+import suceess from '/@/assets/images/register/success.png'
+</script>
+<style lang="scss" scoped>
+.submit-step {
+    width: 100%;
+    height: 50%;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    .img {
+        width: 4rem;
+        height: 4rem;   
+    }
+
+    .submit-box {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-top: 1.6rem;
+        .title {
+            font-family: 'PingFang SC';
+            font-weight: 500;
+            font-size: 1.5rem;
+            text-align: center;
+        }
+
+        .text {
+            font-size: 1rem;
+            font-family: 'PingFang SC';
+            text-align: center;
+        }
+    }
+
+}
+</style>

src/views/personnel-entry/mobile/components/three-step.vue

@@ -0,0 +1,103 @@
+<template>
+    <van-form @failed="onFailed" @sumbit="onSubmit">
+        <van-cell-group class="cell-group">
+            <div class="title">
+                <div class="line"></div>
+                <div class="title-info">证件信息</div>
+            </div>
+            <van-field v-model="formDataThreeStep.name" label="身份证" name="name"
+                :rules="[{ required: true, message: '请上传身份证图片' }]" required>
+                <template #input>
+                    <div class="uploader">
+                        <van-uploader />
+                        人像面
+                    </div>
+                    <div class="uploader">
+                        <van-uploader />
+                        国徽面
+                    </div>
+                </template>
+            </van-field>
+            <van-field v-model="formDataThreeStep.name" label="无犯罪记录证明" name="name"
+                :rules="[{ required: true, message: '请上传无犯罪记录证明图片' }]" required>
+                <template #input>
+                    <van-uploader />
+                </template>
+            </van-field>
+            <van-field v-model="formDataThreeStep.name" label="解聘证书" name="name">
+                <template #input>
+                    <van-uploader />
+                </template>
+            </van-field>
+        </van-cell-group>
+        <div class="gap"></div>
+        <van-cell-group class="cell-group">
+            <div class="title">
+                <div class="line"></div>
+                <div class="title-info">学历及其他证书核验</div>
+            </div>
+            <van-field v-model="formDataThreeStep.name" label="毕业证书" name="name"
+                :rules="[{ required: true, message: '请上传毕业证书图片' }]" required>
+                <template #input>
+                    <van-uploader />
+                </template>
+            </van-field>
+            <van-field v-model="formDataThreeStep.name" label="学位证书" name="name"
+                :rules="[{ required: true, message: '请上传学位证书图片' }]" required>
+                <template #input>
+                    <van-uploader />
+                </template>
+            </van-field>
+            <van-field v-model="formDataThreeStep.name" label="其他证书" name="name">
+                <template #input>
+                    <van-uploader />
+                </template>
+            </van-field>
+        </van-cell-group>
+    </van-form>
+</template>
+<script setup>
+import { ref, reactive } from "vue"
+const formDataThreeStep = defineModel('formDataThreeStep')
+
+
+</script>
+<style lang="scss" scoped>
+.gap {
+    height: .6rem;
+    background-color: #EBEEF5;
+}
+
+.cell-group {
+    padding: .8rem .5rem;
+
+    .title {
+        display: inline-flex;
+        gap: .5rem;
+        margin: 0 1rem;
+
+        .line {
+            width: .3rem;
+            height: 1.3rem;
+            background-color: #2B69F8;
+        }
+
+        .title-info {
+            font-size: 1.3rem;
+            font-weight: 500;
+            font-family: 'PingFang SC';
+        }
+    }
+
+    .uploader {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 2rem;
+
+        :deep(.van-uploader__upload) {
+            margin: 0;
+        }
+    }
+}
+</style>

src/views/personnel-entry/mobile/components/two-step.vue

@@ -0,0 +1,83 @@
+<template>
+    <van-form @failed="onFailed" @sumbit="onSubmit">
+        <van-cell-group class="cell-group">
+            <div class="title">
+                <div class="line"></div>
+                <div class="title-info">项目信息</div>
+            </div>
+            <van-field v-model="formDataTwoStep.name" type="textarea" label="个人专长" name="name"
+                placeholder="请围绕管理或技术维度填写，字数不少于120字" :rules="[{ required: true, message: '请输入个人专长' }]" />
+            <van-field label="负责项目情况" class="addBox">
+                <template #input>
+                    <van-button type="primary" size="small" @click="add">新增</van-button>
+                </template>
+            </van-field>
+            <div class="box">
+                <van-button class="btn" size="small" type="danger" @click="remove">删除</van-button>
+                <van-field v-model="formDataTwoStep.name" label="姓名" name="name" placeholder="请输入姓名"
+                    :rules="[{ required: true, message: '请输入您的姓名' }]" />
+                <van-field v-model="formDataTwoStep.name" name="calendar" label="项目周期" placeholder="请选择项目开始和结束时间"
+                    @click="showCalendar = true" />
+                <van-calendar v-model:show="showCalendar" type="range" @confirm="onConfirm" />
+                <van-field v-model="formDataTwoStep.name" label="项目任职" type="textarea" name="name" placeholder="请输入任职描述"
+                    :rules="[{ required: true, message: '请输入您的姓名' }]" label-align="top" />
+            </div>
+        </van-cell-group>
+    </van-form>
+</template>
+<script setup>
+import { ref, reactive } from "vue"
+ 
+const formDataTwoStep = defineModel('formDataTwoStep')
+const showCalendar = ref(false)
+function onConfirm() {
+
+}
+function add() {
+
+}
+function remove(){
+
+}
+</script>
+<style lang="scss" scoped>
+.cell-group {
+
+    .title {
+        display: inline-flex;
+        gap: .5rem;
+        margin: 0 1rem;
+
+        .line {
+            width: .3rem;
+            height: 1.3rem;
+            background-color: #2B69F8;
+        }
+
+        .title-info {
+            font-size: 1.3rem;
+            font-weight: 500;
+            font-family: 'PingFang SC';
+        }
+    }
+
+    .addBox {
+        :deep(.van-field__control--custom) {
+            justify-content: flex-end;
+        }
+    }
+
+    .box {
+        border-radius: 8px;
+        margin: .5rem;
+        box-shadow: 0px 0px 4px 0px rgba(163, 163, 163, 0.6);
+
+        .btn {
+            border-radius: 0 8px;
+            position: absolute;
+            right: .5rem;
+            z-index: 2;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+    <div class="personnel-entry">
+        <van-steps :active="active">
+            <van-step v-for="item in step" :key="item.key">{{ item.title }}</van-step>
+        </van-steps>
+        <div class="personnel-entry-form">
+            <oneStep v-model:form-data-one-step="formDataOneStep" v-if="active === 0" />
+            <twoStep v-model:form-data-two-step="formDataTwoStep" v-else-if="active === 1" />
+            <threeStep v-model:form-data-three-step="formDataThreeStep" v-else-if="active === 2" />
+            <submitStep v-else-if="active === 3" />
+        </div>
+        <div class="personnel-entry-option" v-if="active !==3">
+            <van-button round block type="primary" @click="preStep" v-if="active === 1 || active === 2">
+                上一步
+            </van-button>
+            <van-button round block type="primary" @click="nextStep" v-if="active !== 2 || active !== 2">
+                下一步
+            </van-button>
+            <van-button round block type="primary" native-type="submit" @click="submit" v-if="active === 2">
+                提交
+            </van-button>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, reactive } from "vue"
+import oneStep from "./components/one-step.vue";
+import twoStep from "./components/two-step.vue";
+import threeStep from "./components/three-step.vue";
+import submitStep from "./components/submit-step.vue";
+const active = ref(0)
+
+const formDataOneStep = ref(
+    {
+        name: null,
+        sex: 1
+    }
+)
+const formDataTwoStep = ref({
+
+})
+const formDataThreeStep = ref({
+
+})
+
+const step = [
+    {
+        key: 0,
+        title: '基本信息'
+    },
+    {
+        key: 1,
+        title: '项目信息'
+    },
+    {
+        key: 2,
+        title: '证件信息'
+    },
+]
+function preStep() {
+    active.value -= 1
+}
+function nextStep() {
+    active.value += 1
+}
+function submit() {
+    nextStep()
+}
+</script>
+<style lang="scss" scoped>
+.personnel-entry {
+    height: 100%;
+    width: 100%;
+    background-color: #fff;
+    // padding: .5rem;
+
+
+    .personnel-entry-form {
+        height: calc(100vh - 6rem - 58px);
+        overflow: hidden;
+        overflow-y: scroll;
+    }
+
+    .personnel-entry-option {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+        height: 6rem;
+        padding: 1rem;
+        position: fixed;
+        bottom: 0;
+        box-shadow: 0px -4px 4px 0px #CECECE40;
+    }
+
+}
+</style>