332 lines
8.5 KiB
Vue
332 lines
8.5 KiB
Vue
<template>
|
||
<!-- 工资卡见证表单 -->
|
||
<view style="height: 100%">
|
||
<up-form
|
||
labelWidth="120"
|
||
labelPosition="left"
|
||
ref="wageCardFormRef"
|
||
:model="wageCardInfoForm"
|
||
:rules="wageCardInfoFormRules"
|
||
>
|
||
<up-cell style="padding: 0 13px" :border="false">
|
||
<template #icon>
|
||
<text class="red-text">
|
||
非必填，后期可在工资卡见证模块补录工资卡，但如果部分填写，则需把信息全部完善
|
||
</text>
|
||
</template>
|
||
</up-cell>
|
||
|
||
<up-cell style="padding: 0 13px">
|
||
<template #right-icon>
|
||
<up-button
|
||
icon="photo"
|
||
:plain="true"
|
||
size="small"
|
||
type="primary"
|
||
text="银行卡号识别）"
|
||
@tap="onHandleRecognizeBankCard"
|
||
/>
|
||
</template>
|
||
</up-cell>
|
||
|
||
<up-form-item label="银行名称" prop="bankName" :borderBottom="true">
|
||
<up-input
|
||
clearable
|
||
border="none"
|
||
placeholder="请输入银行名称"
|
||
v-model="wageCardInfoForm.bankName"
|
||
/>
|
||
</up-form-item>
|
||
|
||
<up-form-item label="银行卡号" prop="bankCardCode" :borderBottom="true">
|
||
<up-input
|
||
clearable
|
||
border="none"
|
||
placeholder="请输入银行卡号"
|
||
v-model="wageCardInfoForm.bankCardCode"
|
||
/>
|
||
</up-form-item>
|
||
|
||
<up-form-item label="银行支行名称" prop="bankBranchName" :borderBottom="true">
|
||
<up-input
|
||
clearable
|
||
border="none"
|
||
placeholder="请输入银行支行名称"
|
||
v-model="wageCardInfoForm.bankBranchName"
|
||
/>
|
||
</up-form-item>
|
||
|
||
<up-cell style="padding: 0 13px">
|
||
<template #icon>
|
||
<text class="red-text"> 工资卡见证照片 </text>
|
||
</template>
|
||
</up-cell>
|
||
<up-form-item
|
||
:key="item.type"
|
||
:label="item.title"
|
||
v-for="(item, index) in wageCardImageList"
|
||
>
|
||
<up-upload
|
||
multiple
|
||
:maxCount="1"
|
||
accept="image"
|
||
:name="item.name"
|
||
:fileList="item.fileList"
|
||
:capture="['album', 'camera']"
|
||
@delete="deletePic($event, index)"
|
||
@afterRead="afterRead($event, index)"
|
||
/>
|
||
</up-form-item>
|
||
</up-form>
|
||
|
||
<view class="red-text tip-container">
|
||
<text> 提醒事项： </text>
|
||
<text> 1： 未完成工资卡上传为【黄灯人员】</text>
|
||
<text> 2： 生成工资册之前必须上传工资卡</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup name="wageCardForm">
|
||
import { ref, watch } from 'vue'
|
||
|
||
const wageCardFormRef = ref(null) // 工资卡见证表单ref
|
||
|
||
const wageCardInfoForm = ref({
|
||
bankName: '', // 银行名称
|
||
bankCardCode: '', // 银行卡号
|
||
bankBranchName: '', // 银行支行名称
|
||
}) // 合同表单数据
|
||
|
||
const wageCardImageList = ref([
|
||
{
|
||
type: 1,
|
||
fileList: [],
|
||
name: 'wageCard',
|
||
title: '手持银行卡、承诺书',
|
||
},
|
||
{
|
||
type: 2,
|
||
fileList: [],
|
||
name: 'wageCard',
|
||
title: '银行卡照片',
|
||
},
|
||
{
|
||
type: 3,
|
||
fileList: [],
|
||
name: 'wageCard',
|
||
title: '个人工资卡承诺书',
|
||
},
|
||
{
|
||
type: 4,
|
||
fileList: [],
|
||
name: 'wageCard',
|
||
title: '其它照片',
|
||
},
|
||
]) // 合同见证照片
|
||
|
||
const wageCardInfoFormRules = ref({
|
||
bankName: [
|
||
{
|
||
required: false,
|
||
},
|
||
{
|
||
max: 50,
|
||
message: '银行名称长度不能超过50个字符',
|
||
},
|
||
{
|
||
required: false,
|
||
},
|
||
],
|
||
bankBranchName: [
|
||
{
|
||
required: false,
|
||
},
|
||
{
|
||
max: 50,
|
||
message: '银行支行名称长度不能超过50个字符',
|
||
},
|
||
],
|
||
bankCardCode: [
|
||
{
|
||
required: false,
|
||
},
|
||
{
|
||
trigger: 'blur',
|
||
pattern: /^[1-9]\d{12,18}$/,
|
||
message: '请输入13-19位的正确银行卡号',
|
||
},
|
||
],
|
||
})
|
||
|
||
// 删除图片
|
||
const deletePic = (e, index) => {
|
||
wageCardImageList.value[index].fileList = []
|
||
}
|
||
|
||
// 上传图片
|
||
const afterRead = (e, index) => {
|
||
const type = e.file[0].type
|
||
if (!type.includes('image')) {
|
||
uni.$u.toast('请上传图片格式')
|
||
return
|
||
}
|
||
wageCardImageList.value[index].fileList = [e.file[0]]
|
||
}
|
||
|
||
// 检查表单状态
|
||
const checkFormStatus = () => {
|
||
// 检查图片是否有上传（排除附件）
|
||
const imageFieldsToCheck = wageCardImageList.value // 排除最后一个附件
|
||
// 检查字段是否全部为空或全部有值
|
||
let emptyFieldCount = 0
|
||
let filledFieldCount = 0
|
||
const fieldsList = [
|
||
'bankName', // 银行名称
|
||
'bankCardCode', // 银行卡号
|
||
'bankBranchName', // 银行支行名称
|
||
]
|
||
|
||
// 检查普通字段
|
||
fieldsList.forEach((field) => {
|
||
if (!wageCardInfoForm.value[field]) {
|
||
emptyFieldCount++
|
||
} else {
|
||
filledFieldCount++
|
||
}
|
||
})
|
||
|
||
// 检查图片字段
|
||
imageFieldsToCheck.forEach((item) => {
|
||
if (item.fileList.length === 0) {
|
||
emptyFieldCount++
|
||
} else {
|
||
filledFieldCount++
|
||
}
|
||
})
|
||
|
||
// 返回状态
|
||
if (emptyFieldCount === fieldsList.length + imageFieldsToCheck.length) {
|
||
return 'all_empty' // 全部为空
|
||
} else if (filledFieldCount === fieldsList.length + imageFieldsToCheck.length) {
|
||
return 'all_filled' // 全部有值
|
||
} else {
|
||
return 'partial' // 部分有值
|
||
}
|
||
}
|
||
|
||
// 表单校验
|
||
const validateWageCardForm = async () => {
|
||
// console.log(wageCardFormRef.value, '9995')
|
||
return new Promise((resolve, reject) => {
|
||
wageCardFormRef.value
|
||
.validate()
|
||
.then((valid) => {
|
||
// console.log(valid, '9996')
|
||
if (valid) {
|
||
// resolve(true)
|
||
const status = checkFormStatus()
|
||
if (status === 'partial') {
|
||
uni.$u.toast('请完善工资卡见证中的所有信息')
|
||
return reject(new Error('工资卡信息未完善'))
|
||
} else {
|
||
resolve({
|
||
status,
|
||
isValid: true,
|
||
data: wageCardInfoForm.value,
|
||
imgList: wageCardImageList.value,
|
||
})
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
reject(false)
|
||
})
|
||
})
|
||
}
|
||
|
||
// 更新工资卡信息
|
||
const updateWageCardInfo = () => {
|
||
Object.assign(wageCardInfoForm.value, props.wageCardInfo)
|
||
}
|
||
|
||
// 银行卡号识别
|
||
const onHandleRecognizeBankCard = () => {
|
||
uni.$u.toast('功能正在开发中，敬请期待...')
|
||
}
|
||
|
||
// 向父组件暴露方法
|
||
defineExpose({
|
||
validateWageCardForm,
|
||
updateWageCardInfo,
|
||
})
|
||
|
||
const props = defineProps({
|
||
wageCardInfo: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
wageCardImageList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
})
|
||
|
||
// 增加监听
|
||
watch(
|
||
props.wageCardInfo,
|
||
(newVal) => {
|
||
if (Object.keys(newVal).length > 0) {
|
||
Object.assign(wageCardInfoForm.value, newVal)
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
)
|
||
watch(
|
||
props.wageCardImageList,
|
||
(newVal) => {
|
||
if (newVal.length > 0) {
|
||
wageCardImageList.value = newVal
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
)
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/uni.scss';
|
||
|
||
.blue-text {
|
||
font-size: 14px;
|
||
color: $uni-color-primary;
|
||
}
|
||
|
||
.u-form-item {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
::v-deep .u-cell__body {
|
||
padding: 13px 0;
|
||
}
|
||
|
||
.color-text {
|
||
color: rgb(48, 49, 51) !important;
|
||
}
|
||
|
||
.time-text {
|
||
color: rgb(192, 196, 204);
|
||
}
|
||
|
||
.tip-container {
|
||
padding: 0 13px;
|
||
margin-top: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
</style>
|