sh_real_name_system_app/src/pages/person-exit/data-upload/index.vue

<template>
    <!-- 人员出场资料上传 -->
    <view class="data-upload">
        <view class="exit-tip">
            <view class="red-text exit-tip-item">1. 出场前请确保人员合同及工资卡已上传完整</view>
            <view class="red-text exit-tip-item">2. 人员出场，合同自动失效，不再考勤打卡</view>
            <view class="red-text exit-tip-item">
                3. 请30天内上传《离场人员工资结算确认单》，否则人员自动进入失信人员
            </view>
        </view>

        <!-- 人员信息 -->
        <view class="person-info">
            <view>
                <text>姓名</text>
                <text>
                    {{ exitParams?.name }}
                </text>
            </view>
            <view>
                <text>身份证号</text>
                <text>
                    {{ exitParams?.idNumber }}
                </text>
            </view>
            <view>
                <text>工程名称</text>
                <text>
                    {{ exitParams?.proName }}
                </text>
            </view>
            <view>
                <text>分包商名称</text>
                <text>
                    {{ exitParams?.subName }}
                </text>
            </view>
            <view>
                <text>班组名称</text>
                <text>
                    {{ exitParams?.teamName }}
                </text>
            </view>
        </view>

        <view class="red-text exit-title"> 离场工资结算确认单 </view>

        <view class="upload-content">
            <text>离场工资结算确认单</text>

            <up-upload
                multiple
                :maxCount="3"
                accept="image"
                @delete="deletePic"
                :fileList="fileList"
                @afterRead="afterRead"
                :capture="['album', 'camera']"
            />
        </view>

        <view class="confirm-btn">
            <up-button type="primary" @tap="openConfirmExitModal" text="确 认 出 场" />
        </view>

        <!-- 确认出场提示弹框 -->
        <up-modal
            title="出场确认"
            :showCancelButton="true"
            :content="exitContent"
            :show="showModalConfirmExit"
            @confirm="onConfirmExit"
            @cancel="onCancelConfirmExit"
        />
    </view>
</template>

<script setup name="DataUpload">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const exitParams = ref({}) // 出场参数
const fileList = ref([]) // 离场工资结算确认单
const exitContent = ref('') // 离场工资结算确认单内容
const showModalConfirmExit = ref(false) // 确认出场提示弹框

// 删除图片
const deletePic = (name) => {
    fileList.value = fileList.value.filter((item) => item.name !== name)
}

// 上传图片
const afterRead = (e) => {
    const type = e.file[0].type
    if (!type.includes('image')) {
        uni.$u.toast('请上传图片格式')
        return
    }

    fileList.value.push(e.file[0])
}

// 打开确认出场提示弹框
const openConfirmExitModal = () => {
    if (fileList.value.length === 0) {
        exitContent.value = `当前没有上传离场工资结算确认单，是否确认将人员 <${exitParams.value.name}> 出场？`
    } else {
        exitContent.value = `是否确认将人员 <${exitParams.value.name}> 出场？`
    }
    showModalConfirmExit.value = true
}

// 确认出场
const onConfirmExit = () => {
    // 组装参数
    const params = {
        id: exitParams.value.id,
        proId: exitParams.value.proId,
        workerId: exitParams.value.workerId,
        exitWay: 'APP',
    }
    const fileMsg = []
    const files = []
    if (fileList.value.length > 0) {
        fileList.value.forEach((item) => {
            fileMsg.push({
                name: '工资结算确认单',
                type: 1,
            })
            12`1`.push({
                file: item.file,
                name: 'files',
            })
        })
    }

    uni.uploadFile({
        url: '/bmw/workerExit/exit',
        files: files,
        name: 'files',
        formData: {
            params: JSON.stringify(params),
            fileMsg: JSON.stringify(fileMsg),
        },
        success: async (res) => {
            console.log('res出场结果', res)

            const data = JSON.parse(res.data)

            if (data.code === 200) {
                uni.$u.toast('出场成功')
                setTimeout(() => {
                    uni.navigateBack()
                }, 500)
            } else {
                uni.$u.toast(data.msg)
            }

            showModalConfirmExit.value = false
        },
        fail: (err) => {},
    })
}

// 取消确认出场
const onCancelConfirmExit = () => {
    showModalConfirmExit.value = false
}

onLoad((options) => {
    exitParams.value = JSON.parse(options?.params)
})
</script>

<style scoped lang="scss">
.data-upload {
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
}
.exit-tip {
    padding: 30rpx 15rpx;
    background-color: #f0f2f5;
    border-radius: 10rpx;
}

.exit-tip-item {
    padding: 4rpx 0;
}

.person-info {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #f5f5f5;

    view {
        padding: 20rpx 0;
        border-bottom: 1px solid #e5e5e5;

        & text:first-child {
            display: inline-block;
            width: 200rpx;
            color: #909399;
        }

        & text:last-child {
            margin-left: 20rpx;
        }
    }
}

.exit-title {
    padding: 18rpx 0;
    border-bottom: 1px solid #e5e5e5;
}

.upload-content {
    padding: 30rpx 0;
    display: flex;
    align-items: center;

    & text:first-child {
        display: inline-block;
        width: 200rpx;
        color: #909399;
        margin-right: 50rpx;
    }
}

.confirm-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>