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> |