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> |
|||
<div> |
|||
<div |
|||
data-tname="考勤" |
|||
data-pid="1433332016270811136" |
|||
data-uid="1217647686598135808" |
|||
data-rid="rid333" |
|||
data-tid="tid444" |
|||
data-did="did555" |
|||
class="p-3" |
|||
> |
|||
<div data-root="p1432643387798069248" style="height: 100%; width: 100%"> |
|||
<div class="title"></div> |
|||
<ul> |
|||
<li class="flex h-12 items-center border-b"> |
|||
<span class="flex-1 text-sm font-bold">姓名</span> |
|||
<!-- <span class="flex-1 text-sm font-bold">年龄</span> --> |
|||
<!-- <span class="flex-1 text-sm font-bold">性别</span> --> |
|||
<span class="flex-3 text-sm font-bold">联系方式</span> |
|||
<span class="flex-3 text-sm font-bold">目标</span> |
|||
<span class="flex-2 text-sm font-bold">缴费状态</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> |
|||
<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 class="list-flex"> |
|||
<div class="px-4 pb-2 bg-white"> |
|||
<div class="title flex items-center justify-around border-b"> |
|||
<div class="text-gray-400 text-center" style="width: 25%">姓名</div> |
|||
<div class="text-gray-400 text-center" style="width: 15%">性别</div> |
|||
<div class="text-gray-400 text-center" style="width: 15%">年龄</div> |
|||
<div class="text-gray-400 text-center" style="width: 35%">手机号</div> |
|||
<!-- <div class="text-gray-400 text-center" style="width: 30%">目标</div> --> |
|||
<!-- <div class="text-gray-400 text-center" style="width: 20%">是否缴费</div> --> |
|||
</div> |
|||
|
|||
<div> |
|||
<div class="item title flex items-center justify-around border-b" v-for="(item, index) in lists" :key="index"> |
|||
<div class="text-center" style="width: 25%">{{ item.name }}</div> |
|||
<div class="text-center" style="width: 15%">{{ item.gender === 0 ? '女' : '男' }}</div> |
|||
<div class="text-center" style="width: 15%">{{ item.age }}</div> |
|||
<div class="text-center" style="width: 35%">{{ item.phone }}</div> |
|||
<!-- <div class="text-center" style="width: 30%">目标</div> --> |
|||
<!-- <div class="text-center" style="width: 20%">是</div> --> |
|||
</div> |
|||
|
|||
<div class="item title flex items-center justify-around border-b"> |
|||
<div class="text-center" style="width: 25%">薛思男</div> |
|||
<div class="text-center" style="width: 15%">女</div> |
|||
<div class="text-center" style="width: 15%">28</div> |
|||
<div class="text-center" style="width: 35%">18435164840</div> |
|||
<!-- <div class="text-center" style="width: 30%">目标</div> --> |
|||
<!-- <div class="text-center" style="width: 20%">是</div> --> |
|||
</div> |
|||
|
|||
<div class="item title flex items-center justify-around border-b"> |
|||
<div class="text-center" style="width: 25%">薛思男</div> |
|||
<div class="text-center" style="width: 15%">女</div> |
|||
<div class="text-center" style="width: 15%">28</div> |
|||
<div class="text-center" style="width: 35%">18435164840</div> |
|||
<!-- <div class="text-center" style="width: 30%">目标</div> --> |
|||
<!-- <div class="text-center" style="width: 20%">是</div> --> |
|||
</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 || '审核失败'; |
|||
// } |
|||
// }, |
|||
// }, |
|||
// }; |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
import { studentList } from '@/config/api'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
timer: null, |
|||
lists: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: mapState('home', ['projectId', 'roleId', 'userId']), |
|||
|
|||
mounted() { |
|||
this.timer = setInterval(async () => { |
|||
if (this.projectId) { |
|||
clearInterval(this.timer); |
|||
await this.getStudentList(); |
|||
|
|||
// 自动移动到目标位置 |
|||
// document.querySelector('#scrollTo').scrollIntoView({ |
|||
// behavior: 'smooth', // 平滑过渡 |
|||
// block: 'start', // 上边框与视窗顶部平齐。默认值 |
|||
// }); |
|||
} |
|||
}, 300); |
|||
}, |
|||
|
|||
methods: { |
|||
async getStudentList() { |
|||
try { |
|||
const params = { param: this.fileList[0] }; |
|||
const res = await studentList(); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.lists = data; |
|||
} 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; |
|||
|
|||
<style lang="scss" scoped> |
|||
.list-flex { |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
background: #f3f3f3; |
|||
|
|||
.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> |
|||
|
|||
Loading…
Reference in new issue