forked from TALL/check-work
9 changed files with 640 additions and 883 deletions
@ -1,309 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div |
|
||||
data-tname="考勤" |
|
||||
data-pid="1433332016270811136" |
|
||||
data-uid="1217647686598135808" |
|
||||
data-rid="rid333" |
|
||||
data-tid="tid444" |
|
||||
data-did="did555" |
|
||||
style="height: 50px; width: 100%" |
|
||||
> |
|
||||
<div data-root="p1432643387798069248" style="height: 100%; width: 100%"> |
|
||||
<div class="title"></div> |
|
||||
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">选择缴费方式</div> |
|
||||
<div class="bg-white pl-4 pr-4"> |
|
||||
<div class="flex justify-between items-center h-12 border-b"> |
|
||||
<label class="text-sm text-gray-400">微信缴费</label> |
|
||||
<div class="flex flex-nowrap rounded-md startBtnBox"> |
|
||||
<div class="flex flex-nowrap ml-4" onclick="weiXin()"> |
|
||||
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex justify-between items-center h-12 border-b"> |
|
||||
<label class="text-sm text-gray-400">支付宝缴费</label> |
|
||||
<div class="flex flex-nowrap rounded-md startBtnBox"> |
|
||||
<div class="flex flex-nowrap ml-4" onclick="p1432643387798069248.jumpDetails(this)"> |
|
||||
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex justify-between items-center h-12 border-b"> |
|
||||
<label class="text-sm text-gray-400">兑换券缴费</label> |
|
||||
<div class="flex flex-nowrap rounded-md startBtnBox"> |
|
||||
<div class="flex flex-nowrap ml-4" onclick="p1432643387798069248.jumpDetails(this)"> |
|
||||
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">上传缴费凭证</div> |
|
||||
<div class="paymentDocument pl-8 bg-white"> |
|
||||
<p class="text-sm text-gray-400">上传支付凭证（仅支持jpg格式）</p> |
|
||||
<div class="flex justify-center items-center uploadJpg bg-gray-100 border-dashed border-gray-900" onclick="uploadJpg()"> |
|
||||
<div> |
|
||||
<p class="text-center">＋</p> |
|
||||
<p>上传照片</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="flex justify-between pl-8 pr-8 apply"> |
|
||||
<button class="border border-4 rounded text-base w-5/12 h-10" onclick="immediatelyApply()">稍后缴费</button> |
|
||||
<button class="rounded bg-blue-500 text-white text-base w-5/12 h-10" onclick="immediatelyApply()">立即缴费</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
// export default { |
|
||||
// data() { |
|
||||
// return { |
|
||||
// columns, |
|
||||
// clockInfos: [], |
|
||||
// options: null, |
|
||||
// checkerId: undefined, |
|
||||
// placement: 'left', |
|
||||
// timer: null, |
|
||||
// chooseTime: '', |
|
||||
// auditOptions: null, |
|
||||
// morningLoading: false, |
|
||||
// nightLoading: false, |
|
||||
// today: this.$moment(new Date()).format('YYYY-MM-DD'), |
|
||||
// selectedDate: '', // 当前选择的日期 |
|
||||
// }; |
|
||||
// }, |
|
||||
|
|
||||
// computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId', 'checkers']), |
|
||||
|
|
||||
// mounted() { |
|
||||
// this.timer = setInterval(async () => { |
|
||||
// if (this.projectId) { |
|
||||
// clearInterval(this.timer); |
|
||||
// await this.setParams(); |
|
||||
|
|
||||
// // 自动移动到目标位置 |
|
||||
// // document.querySelector('#scrollTo').scrollIntoView({ |
|
||||
// // behavior: 'smooth', // 平滑过渡 |
|
||||
// // block: 'start', // 上边框与视窗顶部平齐。默认值 |
|
||||
// // }); |
|
||||
// } |
|
||||
// }, 300); |
|
||||
|
|
||||
// const time = this.$moment(Date.now()).format('YYYY-MM-DD'); |
|
||||
// if (!this.startTime) { |
|
||||
// this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0); |
|
||||
// } |
|
||||
// if (!this.endTime) { |
|
||||
// this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0); |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// methods: { |
|
||||
// ...mapMutations('home', ['setStartTime', 'setEndTime', 'setMemberIdList']), |
|
||||
|
|
||||
// async setParams() { |
|
||||
// const { projectId, startTime, endTime, memberIdList, roleId } = this; |
|
||||
// const params = { param: { projectId, memberIdList, startTime, endTime, roleId } }; |
|
||||
// await this.getClockQuery(params); |
|
||||
// }, |
|
||||
|
|
||||
// /** |
|
||||
// * 查询考勤信息 |
|
||||
// * @param {string} projectId |
|
||||
// * @param {array} memberIdList |
|
||||
// * @param {string} startTime |
|
||||
// * @param {string} endTime |
|
||||
// */ |
|
||||
// async getClockQuery(params) { |
|
||||
// try { |
|
||||
// const res = await clockQuery(params); |
|
||||
// const { code, msg, data } = res.data; |
|
||||
// if (code === 200) { |
|
||||
// data.forEach(item => { |
|
||||
// item.recordList.forEach(clcok => { |
|
||||
// clcok.morningVisible = false; |
|
||||
// clcok.nightVisible = false; |
|
||||
// clcok.showNightTime = false; |
|
||||
// clcok.showMorningTime = false; |
|
||||
// }); |
|
||||
// }); |
|
||||
|
|
||||
// this.clockInfos = [...data]; |
|
||||
// } else { |
|
||||
// this.$message.error(msg || '获取失败'); |
|
||||
// throw msg; |
|
||||
// } |
|
||||
// } catch (error) { |
|
||||
// throw error || '获取失败'; |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// // 选择审核人 |
|
||||
// chooseChecker(value) { |
|
||||
// this.checkerId = value; |
|
||||
// }, |
|
||||
|
|
||||
// // 打卡 |
|
||||
// checkTime(listIndex, index, clockType, id, memberId, checkerId, clockTime) { |
|
||||
// const time = Date.now(); |
|
||||
// const selectTime = this.$moment(time).format('HH:mm'); |
|
||||
// if (clockType === 0) { |
|
||||
// this.clockInfos[listIndex].recordList[index].morning = selectTime; |
|
||||
// } else { |
|
||||
// this.clockInfos[listIndex].recordList[index].night = selectTime; |
|
||||
// } |
|
||||
// const dateTime = this.$moment(`${clockTime} ${selectTime}`).format('x') - 0; |
|
||||
// const params = { param: { checkerId: this.checkerId || checkerId || this.checkers[0].memberId, clockType, dateTime, id, memberId } }; |
|
||||
// this.handleClockPunch(params); |
|
||||
// }, |
|
||||
|
|
||||
// /** |
|
||||
// * 打卡 |
|
||||
// * @param {string} checkerId 审核员id |
|
||||
// * @param {array} clockType 打卡类型(0-早,1-晚) |
|
||||
// * @param {string} dateTime 打卡时间 |
|
||||
// * @param {string} id 记录id(没有则不传) |
|
||||
// * @param {string} memberId 考勤信息中的成员id |
|
||||
// */ |
|
||||
// async handleClockPunch(params) { |
|
||||
// try { |
|
||||
// if (params.param.clockType === 0) { |
|
||||
// this.morningLoading = true; |
|
||||
// } else { |
|
||||
// this.nightLoading = true; |
|
||||
// } |
|
||||
// const res = await clockPunch(params); |
|
||||
// const { code, msg } = res.data; |
|
||||
// if (code === 200) { |
|
||||
// this.$message.success('打卡成功'); |
|
||||
// const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList }; |
|
||||
// this.setParams(options); |
|
||||
// } else { |
|
||||
// this.$message.error(msg || '打卡失败'); |
|
||||
// throw msg; |
|
||||
// } |
|
||||
// if (params.param.clockType === 0) { |
|
||||
// this.morningLoading = false; |
|
||||
// } else { |
|
||||
// this.nightLoading = false; |
|
||||
// } |
|
||||
// } catch (error) { |
|
||||
// if (params.param.clockType === 0) { |
|
||||
// this.morningLoading = false; |
|
||||
// } else { |
|
||||
// this.nightLoading = false; |
|
||||
// } |
|
||||
// throw error || '打卡失败'; |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// changeVisible(index, status, type) { |
|
||||
// if (status !== 0) { |
|
||||
// this.clockInfos.forEach(item => { |
|
||||
// item.recordList.forEach((clcok, i) => { |
|
||||
// if (i === index && type === 'morningVisible') { |
|
||||
// clcok.morningVisible = !clcok.morningVisible; |
|
||||
// clcok.nightVisible = false; |
|
||||
// } else if (i === index && type === 'nightVisible') { |
|
||||
// clcok.morningVisible = false; |
|
||||
// clcok.nightVisible = !clcok.nightVisible; |
|
||||
// } else { |
|
||||
// clcok.morningVisible = false; |
|
||||
// clcok.nightVisible = false; |
|
||||
// } |
|
||||
// }); |
|
||||
// }); |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// // 修改 |
|
||||
// changeStatus(id, type, record, visible, show, selectedDate) { |
|
||||
// record[visible] = false; |
|
||||
// record[show] = true; |
|
||||
// this.selectedDate = selectedDate; |
|
||||
// this.auditOptions = { id, type }; |
|
||||
// }, |
|
||||
// // 选择修改时间 |
|
||||
// timeChange(time) { |
|
||||
// let updateTime = this.$moment(time).format('HH:mm:ss'); |
|
||||
// let updateDate = this.selectedDate + ' ' + updateTime; |
|
||||
// this.chooseTime = this.$moment(updateDate).format('x'); |
|
||||
// }, |
|
||||
// async openChange(open, record, show, timeType) { |
|
||||
// if (!open && this.chooseTime) { |
|
||||
// this.auditOptions[timeType] = this.chooseTime; |
|
||||
// this.auditOptions.projectId = this.projectId; |
|
||||
// const params = { param: this.auditOptions }; |
|
||||
// await this.handleClockAudit(params, record, show); |
|
||||
// } |
|
||||
// if (!open && !this.chooseTime) { |
|
||||
// record[show] = false; |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// // 驳回 |
|
||||
// async rejectStatus(id, type, timeType, time, record, show) { |
|
||||
// record[show] = false; |
|
||||
// const params = { param: { id, type, [timeType]: time, projectId: this.projectId } }; |
|
||||
// await this.handleClockAudit(params, record, show); |
|
||||
// }, |
|
||||
|
|
||||
// // 取消 |
|
||||
// cancel(record, type) { |
|
||||
// record[type] = false; |
|
||||
// }, |
|
||||
|
|
||||
// /** |
|
||||
// * 审核打卡 |
|
||||
// * @param {string} id 打卡记录id |
|
||||
// * @param {string} morning 早打卡时间 |
|
||||
// * @param {string} night 晚打卡时间 |
|
||||
// * @param {string} projectId 项目id |
|
||||
// * @param {string} type 审批类型(0-修改,1-驳回,2-通过) |
|
||||
// */ |
|
||||
// async handleClockAudit(params, record, show) { |
|
||||
// try { |
|
||||
// const res = await clockAudit(params); |
|
||||
// const { code, msg } = res.data; |
|
||||
// if (code === 200) { |
|
||||
// this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过'); |
|
||||
// record[show] = false; |
|
||||
// this.auditOptions = null; |
|
||||
// this.chooseTime = ''; |
|
||||
// const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList }; |
|
||||
// this.setParams(options); |
|
||||
// } else { |
|
||||
// this.$message.error(msg || '审核失败'); |
|
||||
// throw msg; |
|
||||
// } |
|
||||
// } catch (error) { |
|
||||
// throw error || '审核失败'; |
|
||||
// } |
|
||||
// }, |
|
||||
// }, |
|
||||
// }; |
|
||||
</script> |
|
||||
<style scoped> |
|
||||
.content, |
|
||||
.task-bar { |
|
||||
overflow-y: scroll; |
|
||||
} |
|
||||
.content::-webkit-scrollbar, |
|
||||
.task-bar::-webkit-scrollbar { |
|
||||
display: none; |
|
||||
} |
|
||||
.paymentDocument { |
|
||||
height: 10.25rem; |
|
||||
padding-top: 0.9375rem; |
|
||||
} |
|
||||
.uploadJpg { |
|
||||
width: 6.5rem; |
|
||||
height: 6.5rem; |
|
||||
margin-top: 0.8125rem; |
|
||||
} |
|
||||
.apply { |
|
||||
margin-top: 3.75rem; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,229 @@ |
|||||
|
<template> |
||||
|
<div class="pay-flex"> |
||||
|
<div class="title">选择缴费方式</div> |
||||
|
|
||||
|
<div class="container px-6 bg-white"> |
||||
|
<div class="item-box flex justify-between items-center border-b"> |
||||
|
<div class="item-title text-gray-400">微信缴费</div> |
||||
|
<a-icon type="right" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item-box flex justify-between items-center border-b"> |
||||
|
<div class="item-title text-gray-400">支付宝缴费</div> |
||||
|
<a-icon type="right" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item-box flex justify-between items-center border-b"> |
||||
|
<div class="item-title text-gray-400">兑换券缴费</div> |
||||
|
<a-icon type="right" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="title">其他支付凭证</div> |
||||
|
|
||||
|
<div class="container px-6 pb-3 bg-white"> |
||||
|
<div class="item-box"> |
||||
|
<div class="text-gray-400">上传缴费凭证</div> |
||||
|
</div> |
||||
|
|
||||
|
<a-upload list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChange"> |
||||
|
<div v-if="fileList.length < 1"> |
||||
|
<a-icon class="mb-2 text-xl" type="plus" /> |
||||
|
<div class="ant-upload-text">上传照片</div> |
||||
|
</div> |
||||
|
</a-upload> |
||||
|
|
||||
|
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> |
||||
|
<img alt="example" style="width: 100%" :src="previewImage" /> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
|
||||
|
<div class="mt-14 px-6 flex justify-between items-center"> |
||||
|
<a-button class="rounded" @click="back"> 稍后缴费 </a-button> |
||||
|
<a-button class="rounded" type="primary" @click="uploadPay"> 立即支付 </a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import { toPay, uploadImg } from '@/config/api'; |
||||
|
|
||||
|
function getBase64(file) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const reader = new FileReader(); |
||||
|
reader.readAsDataURL(file); |
||||
|
reader.onload = () => resolve(reader.result); |
||||
|
reader.onerror = error => reject(error); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
timer: null, |
||||
|
player_id: '', |
||||
|
fileId: '', |
||||
|
previewVisible: false, |
||||
|
previewImage: '', |
||||
|
fileList: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: mapState('home', ['projectId', 'userId', 'roleId']), |
||||
|
|
||||
|
mounted() { |
||||
|
this.timer = setInterval(async () => { |
||||
|
if (this.projectId) { |
||||
|
clearInterval(this.timer); |
||||
|
await this.setParams(); |
||||
|
|
||||
|
// 自动移动到目标位置 |
||||
|
// document.querySelector('#scrollTo').scrollIntoView({ |
||||
|
// behavior: 'smooth', // 平滑过渡 |
||||
|
// block: 'start', // 上边框与视窗顶部平齐。默认值 |
||||
|
// }); |
||||
|
} |
||||
|
}, 300); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// ...mapMutations('home', ['setStartTime', 'setEndTime', 'setMemberIdList']), |
||||
|
|
||||
|
async setParams() { |
||||
|
const { projectId, roleId } = this; |
||||
|
const params = { param: { projectId, roleId } }; |
||||
|
await this.getUserInfo(params); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 个人信息 |
||||
|
*/ |
||||
|
async getUserInfo() { |
||||
|
try { |
||||
|
const params = { param: { projectId: this.projectId } }; |
||||
|
const res = await getUserInfo(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200 && data) { |
||||
|
this.player_id = data.id; |
||||
|
} else { |
||||
|
this.$message.error(msg || '获取失败'); |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error || '获取失败'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleCancel() { |
||||
|
this.previewVisible = false; |
||||
|
}, |
||||
|
|
||||
|
async handlePreview(file) { |
||||
|
if (!file.url && !file.preview) { |
||||
|
file.preview = await getBase64(file.originFileObj); |
||||
|
} |
||||
|
this.previewImage = file.url || file.preview; |
||||
|
this.previewVisible = true; |
||||
|
}, |
||||
|
|
||||
|
handleChange({ fileList }) { |
||||
|
this.fileList = fileList; |
||||
|
console.log(this.fileList); |
||||
|
this.uploadImg(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 上传文件 |
||||
|
*/ |
||||
|
async uploadImg() { |
||||
|
try { |
||||
|
const params = { param: this.fileList[0] }; |
||||
|
const res = await uploadImg(); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.fileId = data.fileId; |
||||
|
} else { |
||||
|
this.$message.error(msg || '获取失败'); |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error || '获取失败'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async uploadPay() { |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
projectId: this.projectId, |
||||
|
player_id: this.player_id, |
||||
|
fileId: this.fileId, |
||||
|
}, |
||||
|
}; |
||||
|
const res = await toPay(); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
this.targetList = data; |
||||
|
} else { |
||||
|
this.$message.error(msg || '获取失败'); |
||||
|
throw msg; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw error || '获取失败'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
back() { |
||||
|
window.open( |
||||
|
'https://test.tall.wiki/tall/v3.2.0/#/pages/project-webview/project-webview?u=' + |
||||
|
this.projectId + |
||||
|
'&p=' + |
||||
|
this.userId + |
||||
|
'&pname=' + |
||||
|
this.name + |
||||
|
'&url=https://test.tall.wiki/gateway/sports', |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.pay-flex { |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
background: #f3f3f3; |
||||
|
|
||||
|
.title { |
||||
|
padding-top: 12px; |
||||
|
padding-left: 16px; |
||||
|
height: 48px; |
||||
|
line-height: 36px; |
||||
|
} |
||||
|
|
||||
|
.item-box { |
||||
|
height: 48px; |
||||
|
line-height: 48px; |
||||
|
|
||||
|
.item-title { |
||||
|
width: 80px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
height: 40px; |
||||
|
width: calc(100% - 80px); |
||||
|
} |
||||
|
|
||||
|
div.flex { |
||||
|
width: calc(100% - 80px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
width: 45%; |
||||
|
height: 40px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,322 +1,118 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div class="list-flex"> |
||||
<div |
<div class="px-4 pb-2 bg-white"> |
||||
data-tname="考勤" |
<div class="title flex items-center justify-around border-b"> |
||||
data-pid="1433332016270811136" |
<div class="text-gray-400 text-center" style="width: 25%">姓名</div> |
||||
data-uid="1217647686598135808" |
<div class="text-gray-400 text-center" style="width: 15%">性别</div> |
||||
data-rid="rid333" |
<div class="text-gray-400 text-center" style="width: 15%">年龄</div> |
||||
data-tid="tid444" |
<div class="text-gray-400 text-center" style="width: 35%">手机号</div> |
||||
data-did="did555" |
<!-- <div class="text-gray-400 text-center" style="width: 30%">目标</div> --> |
||||
class="p-3" |
<!-- <div class="text-gray-400 text-center" style="width: 20%">是否缴费</div> --> |
||||
> |
</div> |
||||
<div data-root="p1432643387798069248" style="height: 100%; width: 100%"> |
|
||||
<div class="title"></div> |
<div> |
||||
<ul> |
<div class="item title flex items-center justify-around border-b" v-for="(item, index) in lists" :key="index"> |
||||
<li class="flex h-12 items-center border-b"> |
<div class="text-center" style="width: 25%">{{ item.name }}</div> |
||||
<span class="flex-1 text-sm font-bold">姓名</span> |
<div class="text-center" style="width: 15%">{{ item.gender === 0 ? '女' : '男' }}</div> |
||||
<!-- <span class="flex-1 text-sm font-bold">年龄</span> --> |
<div class="text-center" style="width: 15%">{{ item.age }}</div> |
||||
<!-- <span class="flex-1 text-sm font-bold">性别</span> --> |
<div class="text-center" style="width: 35%">{{ item.phone }}</div> |
||||
<span class="flex-3 text-sm font-bold">联系方式</span> |
<!-- <div class="text-center" style="width: 30%">目标</div> --> |
||||
<span class="flex-3 text-sm font-bold">目标</span> |
<!-- <div class="text-center" style="width: 20%">是</div> --> |
||||
<span class="flex-2 text-sm font-bold">缴费状态</span> |
</div> |
||||
</li> |
|
||||
<li class="flex h-12 items-center border-b"> |
<div class="item title flex items-center justify-around border-b"> |
||||
<span class="flex-1 text-sm">张三</span> |
<div class="text-center" style="width: 25%">薛思男</div> |
||||
<!-- <span class="flex-1 text-sm">32</span> --> |
<div class="text-center" style="width: 15%">女</div> |
||||
<!-- <span class="flex-1 text-sm">女</span> --> |
<div class="text-center" style="width: 15%">28</div> |
||||
<span class="flex-3 text-sm">15588888888</span> |
<div class="text-center" style="width: 35%">18435164840</div> |
||||
<span class="flex-3 text-sm">运动员</span> |
<!-- <div class="text-center" style="width: 30%">目标</div> --> |
||||
<span class="flex-2 text-sm">未交费</span> |
<!-- <div class="text-center" style="width: 20%">是</div> --> |
||||
</li> |
</div> |
||||
<li class="flex h-12 items-center border-b"> |
|
||||
<span class="flex-1 text-sm">张三</span> |
<div class="item title flex items-center justify-around border-b"> |
||||
<!-- <span class="flex-1 text-sm">32</span> |
<div class="text-center" style="width: 25%">薛思男</div> |
||||
<span class="flex-1 text-sm">女</span> --> |
<div class="text-center" style="width: 15%">女</div> |
||||
<span class="flex-3 text-sm">15588888888</span> |
<div class="text-center" style="width: 15%">28</div> |
||||
<span class="flex-3 text-sm">裁判员</span> |
<div class="text-center" style="width: 35%">18435164840</div> |
||||
<span class="flex-2 text-sm">未交费</span> |
<!-- <div class="text-center" style="width: 30%">目标</div> --> |
||||
</li> |
<!-- <div class="text-center" style="width: 20%">是</div> --> |
||||
<li class="flex h-12 items-center border-b"> |
</div> |
||||
<span class="flex-1 text-sm">张三</span> |
|
||||
<!-- <span class="flex-1 text-sm">32</span> |
|
||||
<span class="flex-1 text-sm">女</span> --> |
|
||||
<span class="flex-3 text-sm">15588888888</span> |
|
||||
<span class="flex-3 text-sm">裁判员</span> |
|
||||
<span class="flex-2 text-sm">未交费</span> |
|
||||
</li> |
|
||||
<li class="flex h-12 items-center border-b"> |
|
||||
<span class="flex-1 text-sm">张三</span> |
|
||||
<!-- <span class="flex-1 text-sm">32</span> |
|
||||
<span class="flex-1 text-sm">女</span> --> |
|
||||
<span class="flex-3 text-sm">15588888888</span> |
|
||||
<span class="flex-3 text-sm">裁判员</span> |
|
||||
<span class="flex-2 text-sm">未交费</span> |
|
||||
</li> |
|
||||
<li class="flex h-12 items-center border-b"> |
|
||||
<span class="flex-1 text-sm">张三</span> |
|
||||
<!-- <span class="flex-1 text-sm">32</span> |
|
||||
<span class="flex-1 text-sm">女</span> --> |
|
||||
<span class="flex-3 text-sm">15588888888</span> |
|
||||
<span class="flex-3 text-sm">裁判员</span> |
|
||||
<span class="flex-2 text-sm">未交费</span> |
|
||||
</li> |
|
||||
<li class="flex h-12 items-center border-b"> |
|
||||
<span class="flex-1 text-sm">张三</span> |
|
||||
<!-- <span class="flex-1 text-sm">32</span> |
|
||||
<span class="flex-1 text-sm">女</span> --> |
|
||||
<span class="flex-3 text-sm">15588888888</span> |
|
||||
<span class="flex-3 text-sm">裁判员</span> |
|
||||
<span class="flex-2 text-sm">未交费</span> |
|
||||
</li> |
|
||||
<li class="flex h-12 items-center border-b"> |
|
||||
<span class="flex-1 text-sm">张三</span> |
|
||||
<!-- <span class="flex-1 text-sm">32</span> |
|
||||
<span class="flex-1 text-sm">女</span> --> |
|
||||
<span class="flex-3 text-sm">15588888888</span> |
|
||||
<span class="flex-3 text-sm">裁判员</span> |
|
||||
<span class="flex-2 text-sm">未交费</span> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
// export default { |
import { mapState, mapMutations } from 'vuex'; |
||||
// data() { |
import { studentList } from '@/config/api'; |
||||
// return { |
|
||||
// columns, |
export default { |
||||
// clockInfos: [], |
data() { |
||||
// options: null, |
return { |
||||
// checkerId: undefined, |
timer: null, |
||||
// placement: 'left', |
lists: [], |
||||
// timer: null, |
}; |
||||
// chooseTime: '', |
}, |
||||
// auditOptions: null, |
|
||||
// morningLoading: false, |
computed: mapState('home', ['projectId', 'roleId', 'userId']), |
||||
// nightLoading: false, |
|
||||
// today: this.$moment(new Date()).format('YYYY-MM-DD'), |
mounted() { |
||||
// selectedDate: '', // 当前选择的日期 |
this.timer = setInterval(async () => { |
||||
// }; |
if (this.projectId) { |
||||
// }, |
clearInterval(this.timer); |
||||
|
await this.getStudentList(); |
||||
// computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId', 'checkers']), |
|
||||
|
// 自动移动到目标位置 |
||||
// mounted() { |
// document.querySelector('#scrollTo').scrollIntoView({ |
||||
// this.timer = setInterval(async () => { |
// behavior: 'smooth', // 平滑过渡 |
||||
// if (this.projectId) { |
// block: 'start', // 上边框与视窗顶部平齐。默认值 |
||||
// clearInterval(this.timer); |
// }); |
||||
// await this.setParams(); |
} |
||||
|
}, 300); |
||||
// // 自动移动到目标位置 |
}, |
||||
// // document.querySelector('#scrollTo').scrollIntoView({ |
|
||||
// // behavior: 'smooth', // 平滑过渡 |
methods: { |
||||
// // block: 'start', // 上边框与视窗顶部平齐。默认值 |
async getStudentList() { |
||||
// // }); |
try { |
||||
// } |
const params = { param: this.fileList[0] }; |
||||
// }, 300); |
const res = await studentList(); |
||||
|
const { code, msg, data } = res.data; |
||||
// const time = this.$moment(Date.now()).format('YYYY-MM-DD'); |
if (code === 200) { |
||||
// if (!this.startTime) { |
this.lists = data; |
||||
// this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0); |
} else { |
||||
// } |
this.$message.error(msg || '获取失败'); |
||||
// if (!this.endTime) { |
throw msg; |
||||
// this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0); |
} |
||||
// } |
} catch (error) { |
||||
// }, |
throw error || '获取失败'; |
||||
|
} |
||||
// methods: { |
}, |
||||
// ...mapMutations('home', ['setStartTime', 'setEndTime', 'setMemberIdList']), |
}, |
||||
|
}; |
||||
// async setParams() { |
|
||||
// const { projectId, startTime, endTime, memberIdList, roleId } = this; |
|
||||
// const params = { param: { projectId, memberIdList, startTime, endTime, roleId } }; |
|
||||
// await this.getClockQuery(params); |
|
||||
// }, |
|
||||
|
|
||||
// /** |
|
||||
// * 查询考勤信息 |
|
||||
// * @param {string} projectId |
|
||||
// * @param {array} memberIdList |
|
||||
// * @param {string} startTime |
|
||||
// * @param {string} endTime |
|
||||
// */ |
|
||||
// async getClockQuery(params) { |
|
||||
// try { |
|
||||
// const res = await clockQuery(params); |
|
||||
// const { code, msg, data } = res.data; |
|
||||
// if (code === 200) { |
|
||||
// data.forEach(item => { |
|
||||
// item.recordList.forEach(clcok => { |
|
||||
// clcok.morningVisible = false; |
|
||||
// clcok.nightVisible = false; |
|
||||
// clcok.showNightTime = false; |
|
||||
// clcok.showMorningTime = false; |
|
||||
// }); |
|
||||
// }); |
|
||||
|
|
||||
// this.clockInfos = [...data]; |
|
||||
// } else { |
|
||||
// this.$message.error(msg || '获取失败'); |
|
||||
// throw msg; |
|
||||
// } |
|
||||
// } catch (error) { |
|
||||
// throw error || '获取失败'; |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// // 选择审核人 |
|
||||
// chooseChecker(value) { |
|
||||
// this.checkerId = value; |
|
||||
// }, |
|
||||
|
|
||||
// // 打卡 |
|
||||
// checkTime(listIndex, index, clockType, id, memberId, checkerId, clockTime) { |
|
||||
// const time = Date.now(); |
|
||||
// const selectTime = this.$moment(time).format('HH:mm'); |
|
||||
// if (clockType === 0) { |
|
||||
// this.clockInfos[listIndex].recordList[index].morning = selectTime; |
|
||||
// } else { |
|
||||
// this.clockInfos[listIndex].recordList[index].night = selectTime; |
|
||||
// } |
|
||||
// const dateTime = this.$moment(`${clockTime} ${selectTime}`).format('x') - 0; |
|
||||
// const params = { param: { checkerId: this.checkerId || checkerId || this.checkers[0].memberId, clockType, dateTime, id, memberId } }; |
|
||||
// this.handleClockPunch(params); |
|
||||
// }, |
|
||||
|
|
||||
// /** |
|
||||
// * 打卡 |
|
||||
// * @param {string} checkerId 审核员id |
|
||||
// * @param {array} clockType 打卡类型(0-早,1-晚) |
|
||||
// * @param {string} dateTime 打卡时间 |
|
||||
// * @param {string} id 记录id(没有则不传) |
|
||||
// * @param {string} memberId 考勤信息中的成员id |
|
||||
// */ |
|
||||
// async handleClockPunch(params) { |
|
||||
// try { |
|
||||
// if (params.param.clockType === 0) { |
|
||||
// this.morningLoading = true; |
|
||||
// } else { |
|
||||
// this.nightLoading = true; |
|
||||
// } |
|
||||
// const res = await clockPunch(params); |
|
||||
// const { code, msg } = res.data; |
|
||||
// if (code === 200) { |
|
||||
// this.$message.success('打卡成功'); |
|
||||
// const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList }; |
|
||||
// this.setParams(options); |
|
||||
// } else { |
|
||||
// this.$message.error(msg || '打卡失败'); |
|
||||
// throw msg; |
|
||||
// } |
|
||||
// if (params.param.clockType === 0) { |
|
||||
// this.morningLoading = false; |
|
||||
// } else { |
|
||||
// this.nightLoading = false; |
|
||||
// } |
|
||||
// } catch (error) { |
|
||||
// if (params.param.clockType === 0) { |
|
||||
// this.morningLoading = false; |
|
||||
// } else { |
|
||||
// this.nightLoading = false; |
|
||||
// } |
|
||||
// throw error || '打卡失败'; |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// changeVisible(index, status, type) { |
|
||||
// if (status !== 0) { |
|
||||
// this.clockInfos.forEach(item => { |
|
||||
// item.recordList.forEach((clcok, i) => { |
|
||||
// if (i === index && type === 'morningVisible') { |
|
||||
// clcok.morningVisible = !clcok.morningVisible; |
|
||||
// clcok.nightVisible = false; |
|
||||
// } else if (i === index && type === 'nightVisible') { |
|
||||
// clcok.morningVisible = false; |
|
||||
// clcok.nightVisible = !clcok.nightVisible; |
|
||||
// } else { |
|
||||
// clcok.morningVisible = false; |
|
||||
// clcok.nightVisible = false; |
|
||||
// } |
|
||||
// }); |
|
||||
// }); |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// // 修改 |
|
||||
// changeStatus(id, type, record, visible, show, selectedDate) { |
|
||||
// record[visible] = false; |
|
||||
// record[show] = true; |
|
||||
// this.selectedDate = selectedDate; |
|
||||
// this.auditOptions = { id, type }; |
|
||||
// }, |
|
||||
// // 选择修改时间 |
|
||||
// timeChange(time) { |
|
||||
// let updateTime = this.$moment(time).format('HH:mm:ss'); |
|
||||
// let updateDate = this.selectedDate + ' ' + updateTime; |
|
||||
// this.chooseTime = this.$moment(updateDate).format('x'); |
|
||||
// }, |
|
||||
// async openChange(open, record, show, timeType) { |
|
||||
// if (!open && this.chooseTime) { |
|
||||
// this.auditOptions[timeType] = this.chooseTime; |
|
||||
// this.auditOptions.projectId = this.projectId; |
|
||||
// const params = { param: this.auditOptions }; |
|
||||
// await this.handleClockAudit(params, record, show); |
|
||||
// } |
|
||||
// if (!open && !this.chooseTime) { |
|
||||
// record[show] = false; |
|
||||
// } |
|
||||
// }, |
|
||||
|
|
||||
// // 驳回 |
|
||||
// async rejectStatus(id, type, timeType, time, record, show) { |
|
||||
// record[show] = false; |
|
||||
// const params = { param: { id, type, [timeType]: time, projectId: this.projectId } }; |
|
||||
// await this.handleClockAudit(params, record, show); |
|
||||
// }, |
|
||||
|
|
||||
// // 取消 |
|
||||
// cancel(record, type) { |
|
||||
// record[type] = false; |
|
||||
// }, |
|
||||
|
|
||||
// /** |
|
||||
// * 审核打卡 |
|
||||
// * @param {string} id 打卡记录id |
|
||||
// * @param {string} morning 早打卡时间 |
|
||||
// * @param {string} night 晚打卡时间 |
|
||||
// * @param {string} projectId 项目id |
|
||||
// * @param {string} type 审批类型(0-修改,1-驳回,2-通过) |
|
||||
// */ |
|
||||
// async handleClockAudit(params, record, show) { |
|
||||
// try { |
|
||||
// const res = await clockAudit(params); |
|
||||
// const { code, msg } = res.data; |
|
||||
// if (code === 200) { |
|
||||
// this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过'); |
|
||||
// record[show] = false; |
|
||||
// this.auditOptions = null; |
|
||||
// this.chooseTime = ''; |
|
||||
// const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList }; |
|
||||
// this.setParams(options); |
|
||||
// } else { |
|
||||
// this.$message.error(msg || '审核失败'); |
|
||||
// throw msg; |
|
||||
// } |
|
||||
// } catch (error) { |
|
||||
// throw error || '审核失败'; |
|
||||
// } |
|
||||
// }, |
|
||||
// }, |
|
||||
// }; |
|
||||
</script> |
</script> |
||||
<style scoped> |
|
||||
.content, |
<style lang="scss" scoped> |
||||
.task-bar { |
.list-flex { |
||||
overflow-y: scroll; |
width: 100%; |
||||
} |
min-height: 100vh; |
||||
.content::-webkit-scrollbar, |
background: #f3f3f3; |
||||
.task-bar::-webkit-scrollbar { |
|
||||
display: none; |
.title { |
||||
|
height: 48px; |
||||
|
line-height: 48px; |
||||
|
} |
||||
|
|
||||
|
.item-box { |
||||
|
height: 48px; |
||||
|
line-height: 48px; |
||||
|
|
||||
|
.item-title { |
||||
|
width: 80px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
div.flex { |
||||
|
width: calc(100% - 80px); |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue