430 lines
9.6 KiB
Vue
430 lines
9.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="fullHeight">
|
|||
|
|
<headers :showBack="true" :themeType="'white'"
|
|||
|
|
style="position: fixed; top: 0; left: 0; width: 100%; z-index: 1111;">
|
|||
|
|
<view class="headerName">
|
|||
|
|
辅助考勤
|
|||
|
|
</view>
|
|||
|
|
</headers>
|
|||
|
|
<view class="content" :style="{ 'padding-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
|
|||
|
|
<view class="header_title">
|
|||
|
|
姓名：{{workerInfo.workerName}}
|
|||
|
|
</view>
|
|||
|
|
<view class="content-items">
|
|||
|
|
<view class="content-item">
|
|||
|
|
<view>
|
|||
|
|
考勤日期：
|
|||
|
|
</view>
|
|||
|
|
<picker mode="date" :value="form.changeDate" @change="startTimeChange($event,1)">
|
|||
|
|
<view v-if="!form.changeDate" style="color: #c0c4cc; font-size: 28rpx;">开始时间</view>
|
|||
|
|
<view v-else class="uni-input">{{form.changeDate}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-item">
|
|||
|
|
<view>
|
|||
|
|
进出方向：
|
|||
|
|
</view>
|
|||
|
|
<radio-group @change="radioChange">
|
|||
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
|||
|
|
<view>
|
|||
|
|
<radio :value="item.value" :checked="item.value == current" />
|
|||
|
|
</view>
|
|||
|
|
<view>{{item.name}}</view>
|
|||
|
|
</label>
|
|||
|
|
</radio-group>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-item">
|
|||
|
|
<view>
|
|||
|
|
进/出场时间：
|
|||
|
|
</view>
|
|||
|
|
<picker mode="time" :value="form.changeTime" @change="startTimeChange($event,2)">
|
|||
|
|
<view v-if="!form.changeTime" style="color: #c0c4cc; font-size: 28rpx;">点击选择时间</view>
|
|||
|
|
<view v-else class="uni-input">{{form.changeTime}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="cause-items">
|
|||
|
|
<view class="cause-item">
|
|||
|
|
<view class="cause">
|
|||
|
|
使用辅助考勤原因：
|
|||
|
|
</view>
|
|||
|
|
<textarea v-model="form.reissueCardReason" placeholder-style="color:#c0c4cc" placeholder="请输入原因" />
|
|||
|
|
</view>
|
|||
|
|
<view class="cause-item">
|
|||
|
|
<view>
|
|||
|
|
补考勤证明：<text style="color: #8C8C8C; font-size: 28rpx;">(请上传进/出场实时人脸照片)</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="mt-10">
|
|||
|
|
<view class="addImgBox" @click="uploadImg" v-show="form.imgFileList.length == 0">
|
|||
|
|
<image src="/static/safeMange/upload_image.png" class="icon-add"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="imgBox" v-show="form.imgFileList.length>0" v-for="(item,index) in form.imgFileList"
|
|||
|
|
:key="index">
|
|||
|
|
<image :src="url_config+'image/'+item.url" class="img"
|
|||
|
|
@click="previewImage(url_config+'image/'+item.url)"></image>
|
|||
|
|
<view @click="deleteImg(item,1)" class="deleteImg">
|
|||
|
|
<image src="/static/safeMange/close_icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="kqbtn" @click="submitBtn">
|
|||
|
|
提交
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
dateformat
|
|||
|
|
} from "@/utils/tool.js"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
workerId: "",
|
|||
|
|
workerInfo: {},
|
|||
|
|
startTime: this.getDate({
|
|||
|
|
format: true,
|
|||
|
|
}),
|
|||
|
|
form: {
|
|||
|
|
changeDate: dateformat(new Date(), "yyyy-MM-dd"),
|
|||
|
|
changeTime: "",
|
|||
|
|
reissueCardReason: "",
|
|||
|
|
imgFileList: [],
|
|||
|
|
},
|
|||
|
|
items: [{
|
|||
|
|
value: "1",
|
|||
|
|
name: '进场'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: "2",
|
|||
|
|
name: '出场'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
current: "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.workerId = option.id;
|
|||
|
|
this.getDetailsData();
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
submitBtn(){
|
|||
|
|
let that = this;
|
|||
|
|
if(!this.form.changeTime){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择进/出场时间',
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!this.form.reissueCardReason){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入辅助考勤原因',
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(that.form.imgFileList.length == 0){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入补考勤证明',
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/workerAttendance/reissueAttendanceCard',
|
|||
|
|
method: 'post',
|
|||
|
|
data: {
|
|||
|
|
projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
|
|||
|
|
personSn: this.workerInfo.personSn,
|
|||
|
|
time: `${this.form.changeDate} ${this.form.changeTime}:00`,
|
|||
|
|
type: Number(this.current),
|
|||
|
|
reissueCardReason: this.form.reissueCardReason,
|
|||
|
|
photoUrl: that.form.imgFileList[0].url,
|
|||
|
|
},
|
|||
|
|
success: res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交成功！',
|
|||
|
|
icon: "success",
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 2000)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
uploadImg() {
|
|||
|
|
var that = this
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 5 - that.form.imgFileList.length,
|
|||
|
|
success(res) {
|
|||
|
|
const tempFilePaths = res.tempFilePaths;
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
|||
|
|
filePath: tempFilePaths[0],
|
|||
|
|
name: 'files',
|
|||
|
|
success: (uploadFileRes) => {
|
|||
|
|
let data = {
|
|||
|
|
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
|||
|
|
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
|||
|
|
};
|
|||
|
|
that.form.imgFileList.push(data)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//删除附件
|
|||
|
|
deleteImg(val, type) {
|
|||
|
|
let that = this;
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定删除该附件吗?',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
if (type == 1) {
|
|||
|
|
let fileArr = JSON.parse(JSON.stringify(that.form.imgFileList));
|
|||
|
|
fileArr.forEach((item, index) => {
|
|||
|
|
if (item.url == val.url) {
|
|||
|
|
fileArr.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
that.form.imgFileList = fileArr;
|
|||
|
|
} else if (type == 2) {
|
|||
|
|
let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
|
|||
|
|
fileArr.forEach((item, index) => {
|
|||
|
|
if (item.url == val.url) {
|
|||
|
|
fileArr.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
that.videoFileList = fileArr;
|
|||
|
|
}
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
radioChange(evt) {
|
|||
|
|
console.log(evt)
|
|||
|
|
this.current = evt.detail.value;
|
|||
|
|
},
|
|||
|
|
startTimeChange(e, type) {
|
|||
|
|
console.info(e, 'ee')
|
|||
|
|
if (type == 1) {
|
|||
|
|
this.form.changeDate = e.detail.value
|
|||
|
|
} else if (type == 2) {
|
|||
|
|
this.form.changeTime = e.detail.value
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getDate(type) {
|
|||
|
|
const date = new Date();
|
|||
|
|
let year = date.getFullYear();
|
|||
|
|
let month = date.getMonth() + 1;
|
|||
|
|
let day = date.getDate();
|
|||
|
|
if (type === 'start') {
|
|||
|
|
year = year;
|
|||
|
|
} else if (type === 'end') {
|
|||
|
|
// year = year + 2;
|
|||
|
|
}
|
|||
|
|
month = month > 9 ? month : '0' + month;
|
|||
|
|
day = day > 9 ? day : '0' + day;
|
|||
|
|
return `${year}-${month}-${day}`;
|
|||
|
|
},
|
|||
|
|
//获取详情数据
|
|||
|
|
getDetailsData() {
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/workerInfo/viewWorkerInfoDetail',
|
|||
|
|
method: 'post',
|
|||
|
|
data: {
|
|||
|
|
workerId: this.workerId,
|
|||
|
|
},
|
|||
|
|
success: res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.workerInfo = res.result.workerInfo;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.content {
|
|||
|
|
padding-bottom: 100rpx;
|
|||
|
|
}
|
|||
|
|
.kqbtn{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background-color: #2A8BF2;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
.cause-items {
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
|
|||
|
|
.cause-item>.cause::before {
|
|||
|
|
content: '*';
|
|||
|
|
color: #FF0404;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cause-item:not(:first-child){
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep( uni-textarea ){
|
|||
|
|
width: initial;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border: 2rpx solid #F5F5F5;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-10 {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.addImgBox {
|
|||
|
|
border: 1px solid #F5F5F5;
|
|||
|
|
background-color: #FAFAFA;
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
|
|||
|
|
uni-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .icon-add {
|
|||
|
|
// width: 36rpx;
|
|||
|
|
// height: 36rpx;
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.imgBox {
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
position: relative;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.deleteImg {
|
|||
|
|
position: absolute;
|
|||
|
|
right: -12rpx;
|
|||
|
|
top: -18rpx;
|
|||
|
|
|
|||
|
|
uni-image {
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fullHeight {
|
|||
|
|
background-color: #EAF1F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header_title {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-items {
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 20rpx 20rpx 10rpx 20rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
|
|||
|
|
.content-item {
|
|||
|
|
height: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
>uni-view:first-child {
|
|||
|
|
color: #1C1C1C;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-item:not(:last-child) {
|
|||
|
|
border-bottom: 1rpx solid #F5F5F5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep( uni-radio-group ){
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
.uni-label-pointer:has(.uni-radio-input-checked) {
|
|||
|
|
border-color: #3894FF !important;
|
|||
|
|
color: #3894FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-label-pointer {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
border: 1rpx solid #F5F5F5;
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
|
|||
|
|
.uni-radio-input {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-radio-input-checked {
|
|||
|
|
background-color: #3894FF !important;
|
|||
|
|
border-color: #3894FF !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-radio-input-checked:before {
|
|||
|
|
content: "";
|
|||
|
|
width: 26rpx;
|
|||
|
|
height: 26rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
transform: translate(-50%, -50%) scale(.73);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|