LpRealName/pages/realName/workbench/safeguarding/add.vue

754 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar class="u-navbar" title="欠薪维权申诉填写" placeholder @leftClick="leftClick" leftIconColor="#fff" bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
<scroll-view class="content" scroll-y="true">
<view class="view-box" >
<view class="title-view">
基本信息
</view>
<u--form class="form-box" :model="formData" :rules="rules" ref="cForm">
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>欠薪单位</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='oweCompany' style="width:70%;height: 100%;">
<u--input v-model="formData.oweCompany" type="text" placeholder="请输入" maxlength="40"
border="surround" clearable></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>欠薪项目</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='oweProject' style="width:70%;height: 100%;">
<u--input v-model="formData.oweProject" type="text" placeholder="请输入" maxlength="40"
border="surround" clearable></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>欠薪金额</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='oweMoney' style="width:70%;height: 100%;">
<u--input v-model="formData.oweMoney" type="number" placeholder="请输入" maxlength="7"
border="surround" clearable></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>单位地址</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='address' style="width:70%;height: 100%;">
<u--input v-model="formData.address" type="text" placeholder="请输入" maxlength="40"
border="surround" clearable></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>申请人姓名</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='applayUser' style="width:70%;height: 100%;">
<u--input v-model="formData.applayUser" type="text" placeholder="请输入" maxlength="40"
border="surround" clearable></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>身份证号码</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='idCard' style="width:70%;height: 100%;">
<u--input v-model="formData.idCard" type="text" placeholder="请输入" maxlength="40"
border="surround" clearable></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:25%;height: 100%;">
<text>电话号码</text> <text style="color: red;">*</text>
</view>
<u-form-item prop='phone' style="width:70%;height: 100%;">
<u--input v-model="formData.phone" type="text" placeholder="请输入" maxlength="40"
border="surround" clearable></u--input>
</u-form-item>
</view>
</u--form>
<view class="title-view">
欠薪时间 <text style="color: red;">*</text>
</view>
<view style="width: 90%;margin: 20rpx auto;padding-bottom: 20rpx;">
<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
</view>
<view class="title-view">
有效依据
</view>
<view class="view-item" style="display: block;">
<view>合同照片 (重要!请务必上传)<text style="color: red;">*</text></view>
<view class="img-box">
<view class="img-item upload-btn" @click="openPhotograph(1)">
<image class="img" src="@/static/realName/tianjia-img.png" mode=""></image>
</view>
<view class="img-item" v-if="contractImgUrl!=''">
<image class="img" :src="contractImgUrl" mode=""></image>
</view>
</view>
</view>
<view class="view-item" style="display: block;">
<view>考勤记录 (重要!请务必上传) <text style="color: red;">*</text></view>
<view class="img-box">
<view class="img-item upload-btn" @click="openPhotograph(2)">
<image class="img" src="@/static/realName/tianjia-img.png" mode=""></image>
</view>
<view class="img-item" v-if="attendanceImgUrl!=''">
<image class="img" :src="attendanceImgUrl" mode=""></image>
</view>
</view>
</view>
<view class="view-item" style="display: block;">
<view>工资信息 (重要!请务必上传)<text style="color: red;">*</text></view>
<view class="img-box">
<view class="img-item upload-btn" @click="openPhotograph(3)">
<image class="img" src="@/static/realName/tianjia-img.png" mode=""></image>
</view>
<view class="img-item" v-if="wageImgUrl!=''">
<image class="img" :src="wageImgUrl" mode=""></image>
</view>
</view>
</view>
<view class="view-item" style="display: block;">
<view>其他依据</view>
<view class="img-box">
<view class="img-item upload-btn" @click="openPhotograph(4)">
<image class="img" src="@/static/realName/tianjia-img.png" mode=""></image>
</view>
<view class="img-item" v-if="otherImgUrl!=''">
<image class="img" :src="otherImgUrl" mode=""></image>
</view>
</view>
</view>
<view style="padding-bottom: 50rpx;">
<view class="sumbit-btn" @click="sumbit">确 定</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import config from '@/config';
import {
pathToBase64,
base64ToPath
} from 'image-tools';
export default {
data() {
return {
formData: {
"id": "", //uuid
"oweCompany": "", //欠薪单位
"oweProject": "", //欠薪项目
"address": "", //单位地址
"applayUser": "", //申请人姓名
"idCard": "", //身份证号码
"phone": "", //电话号码
"oweMoney": "", //欠薪金
"oweStartDay": "", //欠薪开始时间
"oweEndDay": "", //欠薪结束时间
"representationTime": "",
"addTime": "",
"uploadUserId": uni.getStorageSync('realNameUser').userId,
"currentDay": "",
"isActive": "1",
"replyStatus": "0",
"replyContent": "",
},
range: [],
rules: {
'oweCompany': {
type: 'string',
required: true,
message: '请填写欠薪单位',
trigger: ['blur', 'change']
},
'oweProject': {
type: 'string',
required: true,
message: '请填写欠薪项目',
trigger: ['blur', 'change']
},
'address': {
type: 'string',
required: true,
message: '请填写单位地址',
trigger: ['blur', 'change']
},
'applayUser': {
type: 'string',
required: true,
message: '请填写申请人姓名',
trigger: ['blur', 'change']
},
'idCard': {
type: 'string',
required: true,
message: '请填写身份证号码',
trigger: ['blur', 'change']
},
'phone': {
type: 'string',
required: true,
message: '请填写电话号码',
trigger: ['blur', 'change']
},
'oweMoney': {
type: 'string',
required: true,
message: '请填写欠薪金额',
trigger: ['blur', 'change']
},
},
safeguardingId: '',
contractPath: '',
attendancePath: '',
wagePath: '',
otherPath: '',
contractImgUrl: '',
attendanceImgUrl: '',
wageImgUrl: '',
otherImgUrl: '',
listData: []
}
},
onLoad() {
this.formData.id = this.uuid()
this.safeguardingId = this.formData.id
},
onShow() {},
methods: {
//提交
sumbit() {
this.$refs.cForm.validate().then(res => {
// this.formData.id=this.uuid()
this.formData.representationTime = this.timeFormat(null, 'yyyy-mm-dd hh:MM:ss');
this.formData.addTime = this.timeFormat(null, 'yyyy-mm-dd hh:MM:ss');
this.formData.currentDay = this.timeFormat(null, 'yyyy-mm-dd');
var pattern = /^1[3-9]\d{9}$/;
if (!this.verifyidNumber(this.formData.idCard)) {
uni.$u.toast('请填写正确身份证号');
} else if (!pattern.test(this.formData.phone)) {
uni.$u.toast('请填写正确手机号码');
}
// else if (this.range.length == 0) {
// uni.$u.toast('请选择欠薪时间');
// }
else if (this.contractPath == '') {
uni.$u.toast('请上传合同照片图片');
} else if (this.attendancePath == '') {
uni.$u.toast('请上传考勤记录图片');
} else if (this.wagePath == '') {
uni.$u.toast('请上传工资信息图片');
} else {
// this.formData.oweStartDay = this.range[0]
// this.formData.oweEndDay = this.range[1]
this.formData.oweStartDay = '2024-12-23'
this.formData.oweEndDay = '2024-12-25'
console.log(this.formData)
uni.request({
url: config.lpAppUrl + '/safeguardingInfo/uploadSafeguardingInfo',
method: 'post',
data: this.formData,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
console.log(res)
res = res.data;
if (res.code == 200) {
uni.showToast({
title: res.data,
icon: 'none'
})
this.formData = {
"id": "", //uuid
"oweCompany": "", //欠薪单位
"oweProject": "", //欠薪项目
"address": "", //单位地址
"applayUser": "", //申请人姓名
"idCard": "", //身份证号码
"phone": "", //电话号码
"oweMoney": "", //欠薪金
"oweStartDay": "", //欠薪开始时间
"oweEndDay": "", //欠薪结束时间
"representationTime": "",
"addTime": "",
"uploadUserId": uni.getStorageSync('realNameUser').userId,
"currentDay": "",
"isActive": "1",
"replyStatus": "0",
"replyContent": "",
}
this.range = []
this.uploadPhoto(this.contractPath, 1)
this.uploadPhoto(this.attendancePath, 2)
this.uploadPhoto(this.wagePath, 3)
if (this.otherPath != '') {
this.uploadPhoto(this.otherPath, 4)
}
uni.navigateTo({
url: `/pages/realName/workbench/safeguarding/index`
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
},
fail: err => {
console.log(err)
}
})
}
}).catch(errors => {
console.log(errors)
uni.$u.toast('填写数据存在问题')
})
},
// 拍照录入
openPhotograph(type) {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['camera'],
success: res => {
console.log('?? ~ res-拍照:', res)
this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
if (type == 1) {
this.contractImgUrl = base64;
this.contractPath = res.tempFilePaths[0];
}
if (type == 2) {
this.attendanceImgUrl = base64;
this.attendancePath = res.tempFilePaths[0];
}
if (type == 3) {
this.wageImgUrl = base64;
this.wagePath = res.tempFilePaths[0];
}
if (type == 4) {
this.otherImgUrl = base64;
this.otherPath = res.tempFilePaths[0];
}
})
},
fail: err => {
console.log('?? ~ err:', err)
}
})
},
//上传图片
uploadPhoto(path, type) {
uni.uploadFile({
url: config.lpFileUrl + `file/upload`, //服务器地址
fileType: "image", //ZFB必填,不然报错
filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
name: "imgFile",
formData: {
photoType: 'safeguarding',
},
success: (uploadFileRes) => {
console.log(uploadFileRes)
if (uploadFileRes.statusCode == 200) {
this.uploadSafeguardingPhoto(JSON.parse(uploadFileRes.data).data.url, type)
} else {
uni.$u.toast('上传失败');
}
},
fail: err => {
uni.$u.toast('上传失败');
console.log(err)
}
});
},
//更新图片
uploadSafeguardingPhoto(path, type) {
let obj = {
"id": this.uuid(),
"safeguardingId": this.safeguardingId,
"path": path,
"type": type,
"uploadUserId": uni.getStorageSync('realNameUser').userId,
"addTime": this.timeFormat(null, 'yyyy-mm-dd hh:MM:ss'),
"currentDay": this.timeFormat(null, 'yyyy-mm-dd')
}
console.log(obj)
uni.request({
url: config.lpAppUrl + '/safeguardingInfo/uploadSafeguardingPhoto',
method: 'post',
data: obj,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
console.log(res)
res = res.data;
if (res.code == 200) {
if (type == 1) {
this.contractImgUrl = "";
this.contractPath = "";
}
if (type == 2) {
this.attendanceImgUrl = "";
this.attendancePath = "";
}
if (type == 3) {
this.wageImgUrl = "";
this.wagePath = "";
}
if (type == 4) {
this.otherImgUrl = "";
this.otherPath = "";
}
uni.showToast({
title: '图片已上传',
icon: 'none'
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
},
fail: err => {
console.log(err)
}
})
},
imgToBase64(data) {
return new Promise((resolve, reject) => {
pathToBase64(data)
.then(base64 => {
resolve(base64)
})
.catch(error => {
console.error(error)
reject(error)
})
})
},
//身份证校验
verifyidNumber(idNumber) {
// 校验长度
if (idNumber.length !== 18) {
return false;
}
// 校验前17位是否为数字
if (!/^\d{17}$/.test(idNumber.substr(0, 17))) {
return false;
}
// 校验最后一位
var weightFactor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
var checkCodeList = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
var checkSum = 0;
for (var i = 0; i < 17; i++) {
checkSum += parseInt(idNumber.charAt(i)) * weightFactor[i];
}
var checkCodeIndex = checkSum % 11;
if (idNumber.charAt(17).toUpperCase() !== checkCodeList[checkCodeIndex]) {
return false;
}
return true;
},
timeFormat(dateTime = null, formatStr = 'yyyy-mm-dd') {
let date
// 若传入时间为假值,则取当前时间
if (!dateTime) {
date = new Date()
}
// 若为unix秒时间戳则转为毫秒时间戳逻辑有点奇怪但不敢改以保证历史兼容
else if (/^\d{10}$/.test(dateTime?.toString().trim())) {
date = new Date(dateTime * 1000)
}
// 若用户传入字符串格式时间戳new Date无法解析需做兼容
else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
date = new Date(Number(dateTime))
}
// 处理平台性差异在Safari/Webkit中new Date仅支持/作为分割符的字符串时间
// 处理 '2022-07-10 01:02:03',跳过 '2022-07-10T01:02:03'
else if (typeof dateTime === 'string' && dateTime.includes('-') && !dateTime.includes('T')) {
date = new Date(dateTime.replace(/-/g, '/'))
}
// 其他都认为符合 RFC 2822 规范
else {
date = new Date(dateTime)
}
const timeSource = {
'y': date.getFullYear().toString(), // 年
'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
'd': date.getDate().toString().padStart(2, '0'), // 日
'h': date.getHours().toString().padStart(2, '0'), // 时
'M': date.getMinutes().toString().padStart(2, '0'), // 分
's': date.getSeconds().toString().padStart(2, '0') // 秒
// 有其他格式化字符需求可以继续添加,必须转化成字符串
}
for (const key in timeSource) {
const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
if (ret) {
// 年可能只需展示两位
const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
}
}
return formatStr
},
uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 32; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23];
var uuid = s.join("");
return uuid;
},
// 返回
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
},
},
}
</script>
<style lang="scss">
/deep/.uni-date .uni-date-x {
background: #EFEFEF;
}
.page {
width: 100vw;
height: 100vh;
background-color: #EFEFEF;
box-sizing: border-box;
// padding: 0 20px;
.tab-box {
width: 100%;
margin: 20rpx auto;
display: flex;
justify-content: space-between;
.tab-item {
height: 70upx;
width: 45%;
font-size: 30upx;
text-align: center;
line-height: 70upx;
color: #666;
}
.active {
color: #00337A;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
.activeLine {
background: #00337A;
border-radius: 10upx;
width: 100%;
height: 6upx;
}
}
.content {
width: 100%;
height: 87vh;
margin-top: 20rpx;
// padding-bottom: 80rpx;
background-color: #EFEFEF;
}
.view-box {
width: 100%;
height: auto;
margin: 20rpx auto;
border-radius: 10rpx;
padding-top: 20rpx;
// background-color: #FFF;
.title-view {
font-weight: 600;
margin-left: 20rpx;
border-bottom: 1rpx solid #EFEFEF;
}
.form-box {
width: 100%;
height: auto;
font-size: 26rpx;
.form-input-box {
padding: 0 20rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #eee;
}
}
.view-item {
width: 94%;
margin: 0rpx auto;
padding: 10rpx;
display: flex;
border-bottom: 1rpx solid #EFEFEF;
font-size: 26rpx;
.label {
width: 160rpx;
color: #666;
margin-bottom: 10rpx;
}
.img-box {
width: 94%;
height: auto;
margin: 0rpx auto;
padding: 10rpx;
display: flex;
border-bottom: 1rpx solid #EFEFEF;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
background: #eee;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
display: flex;
justify-content: center;
align-items: center;
.img {
width: 60upx;
height: 60upx;
margin: unset;
}
}
}
}
.sumbit-btn {
width: 94%;
height: 80rpx;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: #00337A;
color: #FFF;
border-radius: 10rpx;
}
}
.list-box {
width: 90%;
height: auto;
// border: 1px solid #000;
margin: 0rpx auto;
.list-item {
width: 100%;
height: auto;
background-color: #fff;
border-radius: 20rpx;
margin: 20rpx 0;
.content-box {
width: 94%;
height: auto;
margin: 20rpx;
// background-color: #F8F9FC;
padding: 10rpx 0;
.item-text {
width: 95%;
margin-left: 20rpx;
margin-top: 15rpx;
// display: flex;
align-items: center;
position: relative;
.label {
color: #3A3A3A;
font-weight: 500;
}
.info-right {
position: absolute;
top: 0rpx;
right: 40rpx;
}
.info {
color: #6F6F6F;
}
}
}
}
}
}
</style>