xuesinan
/
ts-program
forked from TALL/check-work
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

跳绳报名、缴费、人员列表、红头文件详情页

master
jarvis 4 years ago
parent
112847e2cc
commit
34a948c865
15 changed files with 1335 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/index.html
  2. 4
      src/components/List/List.vue
  3. 20
      src/router/index.js
  4. 413
      src/views/Apply/apply.vue
  5. 309
      src/views/ApplyPay/Pay.vue
  6. 275
      src/views/File/File.vue
  7. BIN
      src/views/File/img/640 (1).webp
  8. BIN
      src/views/File/img/640 (2).webp
  9. BIN
      src/views/File/img/640 (3).webp
  10. BIN
      src/views/File/img/640 (4).webp
  11. BIN
      src/views/File/img/640 (5).webp
  12. BIN
      src/views/File/img/640.webp
  13. 2
      src/views/FirstPage/FirstPage.vue
  14. 314
      src/views/PeopleList/PeopleList.vue
  15. 0
      新建文本文档.txt

2
public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.7/dist/tailwind.min.css">
<title>考勤</title>
<title>跳绳培训</title>
</head>
<body>
<noscript>

4
src/components/List/List.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="mt-5">
<div>
<div class="d-flex flex-nowrap table-head">
<div class="table-head-item" style="width: 16%">姓名</div>
<div class="table-head-item" style="width: 16%">姓名1</div>
<div class="table-head-item">早</div>
<div class="table-head-item">晚</div>
<div class="table-head-item" style="width: 30%">审核人</div>

20
src/router/index.js
View File

@ -11,6 +11,26 @@ const routes = [
name: 'Home',
component: Home,
},
{
path: '/apply',
name: 'apply',
component: () => import('views/Apply/apply.vue'),
},
{
path: '/file',
name: 'file',
component: () => import('views/File/File.vue'),
},
{
path: '/pay',
name: 'pay',
component: () => import('views/ApplyPay/Pay.vue'),
},
{
path: '/peopleList',
name: 'peopleList',
component: () => import('views/PeopleList/PeopleList.vue'),
},
];
const router = new VueRouter({

413
src/views/Apply/apply.vue
View File

@ -0,0 +1,413 @@
<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="p1449944565128896512" style="height: 100%; width: 100%">
<div class="title"></div>
<form action="">
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">报名信息</div>
<div class="bg-white pl-4 pr-4">
<div>
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">姓名<span class="text-red-500 ml-1 align-middle">*</span></label>
<input class="text-sm text-right outline-none" id="name" type="text" placeholder="请输入您的姓名" />
</div>
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">身份证号<span class="text-red-500 ml-1 align-middle">*</span></label>
<input class="text-sm text-right outline-none" id="idNumber" type="text" placeholder="请输入您的身份证号" />
</div>
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">年龄</label>
<input class="text-sm text-right outline-none" id="age" value="age" type="number" placeholder="请输入您的年龄" />
</div>
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">性别</label>
<div>
<input class="text-sm" type="radio" name="gender" value="woman" /> 女
<input class="text-sm" type="radio" name="gender" value="man" /> 男
</div>
</div>
</div>
<div class="flex justify-between items-center h-12 pl-8 pr-8">
<label class="text-sm text-gray-400" border-b>身份</label>
<div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
<div class="startBtn text-sm">跳绳爱好者</div>
<div class="flex flex-nowrap ml-4">
<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="bg-white pl-4 pr-4">
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">地址</label>
<input class="text-sm text-right outline-none" id="address" type="text" placeholder="请输入您的详细地址" />
</div>
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">电话<span class="text-red-500 ml-1 align-middle">*</span></label>
<input class="text-sm text-right outline-none" id="phone" type="text" placeholder="请输入您的电话" />
</div>
</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 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">培训目标<span class="text-red-500 ml-1 align-middle">*</span></label>
<div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
<div class="startBtn text-sm">裁判员</div>
<div class="flex flex-nowrap ml-4">
<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 pl-8 pr-8 border-b">
<label class="text-sm text-gray-400">培训项目<span class="text-red-500 ml-1 align-middle">*</span></label>
<div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
<div class="startBtn text-sm text-gray-400">请选择培训项目</div>
<div class="flex flex-nowrap ml-4">
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
</div>
</div>
</div>
</div>
<div class="apply pl-8 pr-8">
<button class="bg-blue-500 text-white text-base apply-btn" onclick="p1449944565128896512.immediatelyApply()">立即报名</button>
</div>
</form>
<div class="w-screen h-screen fixed z-10 statusChoose bg-black bg-opacity-50" style="display: none; top: 0; left: 0">
<div class="flex flex-col absolute w-full bg-white" style="bottom: 0">
<div class="flex flex-row justify-between px-5 py-4">
<span class="text-gray-400" onclick="hide()">取消</span>
<span class="text-blue-500" onclick="choose()">确定</span>
</div>
<div class="bg-gray-200" style="width: 100%; height: 1px"></div>
<ul class="flex flex-col text-center" style="height: 240px; overflow-y: auto"></ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { clockQuery, clockPunch, clockAudit } from '@/config/api';
const columns = [
{ title: '姓名', dataIndex: 'memberName', key: 'memberName', align: 'center', width: '16%' },
{ title: '早', dataIndex: 'morning', key: 'morning', scopedSlots: { customRender: 'morning' }, align: 'center', width: '27%' },
{ title: '晚', dataIndex: 'night', key: 'night', scopedSlots: { customRender: 'night' }, align: 'center', width: '27%' },
{
title: '审核人',
dataIndex: 'checkerName',
key: 'checkerName',
scopedSlots: { customRender: 'checkerName' },
align: 'center',
width: '30%',
},
];
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 {
height: 2.5rem;
margin-top: 3.75rem;
}
.apply-btn {
width: 100%;
height: 100%;
}
</style>
<style>
.ant-popover-inner {
width: 256px;
}
.ant-popover-message {
position: absolute !important;
left: 2px;
top: 8px;
}
.ant-popover-buttons button:nth-child(1) {
background-color: #3b82f6 !important;
color: #fff;
}
.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 {
height: 2.5rem;
margin-top: 3.75rem;
}
.apply-btn {
width: 100%;
height: 100%;
}
</style>

309
src/views/ApplyPay/Pay.vue
View File

@ -0,0 +1,309 @@
<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 pl-8 pr-8 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 pl-8 pr-8 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 pl-8 pr-8 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>

275
src/views/File/File.vue
View File

@ -0,0 +1,275 @@
<template>
<div>
<!-- <div
data-tname="文件"
data-pid="1433332016270811136"
data-uid="1217647686598135808"
data-rid="rid333"
data-tid="tid444"
data-did="did555"
style="height: 5.375rem; width: 100%"
> -->
<div data-root="p1432643387798069248" style="height: 100%; width: 100%">
<div class="title"></div>
<ul>
<li><img src="./img/640.webp" alt="" /></li>
<li><img src="./img/640 (1).webp" alt="" /></li>
<li><img src="./img/640 (2).webp" alt="" /></li>
<li><img src="./img/640 (3).webp" alt="" /></li>
<li><img src="./img/640 (4).webp" alt="" /></li>
<li><img src="./img/640 (5).webp" alt="" /></li>
</ul>
</div>
<!-- </div> -->
</div>
</template>
<script>
// import { mapState, mapMutations } from 'vuex';
// import { clockQuery, clockPunch, clockAudit } from '@/config/api';
// const columns = [
// { title: '姓名', dataIndex: 'memberName', key: 'memberName', align: 'center', width: '16%' },
// { title: '早', dataIndex: 'morning', key: 'morning', scopedSlots: { customRender: 'morning' }, align: 'center', width: '27%' },
// { title: '晚', dataIndex: 'night', key: 'night', scopedSlots: { customRender: 'night' }, align: 'center', width: '27%' },
// {
// title: '审核人',
// dataIndex: 'checkerName',
// key: 'checkerName',
// scopedSlots: { customRender: 'checkerName' },
// align: 'center',
// width: '30%',
// },
// ];
// 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>
</style>

BIN
src/views/File/img/640 (1).webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
src/views/File/img/640 (2).webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
src/views/File/img/640 (3).webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/views/File/img/640 (4).webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/views/File/img/640 (5).webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/views/File/img/640.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

2
src/views/FirstPage/FirstPage.vue
View File

@ -2,7 +2,7 @@
<div>
<head-nav class="nav bg-white w-full" @searchParam="searchParam" />
<!-- 列表 -->
<List style="margin-top: 49px" ref="mychild" />
<List ref="mychild" />
</div>
</template>

314
src/views/PeopleList/PeopleList.vue
View File

@ -0,0 +1,314 @@
<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-xs text-gray-400">姓名</span>
<span class="flex-1 text-xs text-gray-400">年龄</span>
<span class="flex-1 text-xs text-gray-400">性别</span>
<span class="flex-1 text-xs text-gray-400">联系方式</span>
<span class="flex-1 text-xs text-gray-400">目标</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">运动员</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">裁判员</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">裁判员</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">裁判员</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">裁判员</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">裁判员</span>
</li>
<li class="flex h-12 items-center border-b">
<span class="flex-1 text-xs">张三</span>
<span class="flex-1 text-xs">32</span>
<span class="flex-1 text-xs">女</span>
<span class="flex-1 text-xs">15588888888</span>
<span class="flex-1 text-xs">裁判员</span>
</li>
</ul>
</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;
}
</style>

0
新建文本文档.txt
View File

Write Preview
Loading…
Cancel
Save