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
5ea7028879 f02084c64f
commit
ca48d6efb3
2 changed files with 69 additions and 207 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. 19
      src/config/api.js
  2. 257
      src/views/Apply/apply.vue

19
src/config/api.js
View File

@ -1,18 +1,9 @@
import axios from 'axios';
const defaultwbs = `https://test.tall.wiki/gateway/defaultwbs`;
const defaultwbs = `https://test.tall.wiki/gateway/sports`;
// 查询考勤信息
export const clockQuery = params => axios.post(`${defaultwbs}/clock/query`, params);
// 查询用户信息
export const getUserInfo = params => axios.post(`${defaultwbs}/player/info`, params);
// 查询考勤信息
export const clockPunch = params => axios.post(`${defaultwbs}/clock/punch`, params);
// 查询所有成员
export const queryChecker = params => axios.post(`${defaultwbs}/deliver/queryChecker`, params);
// 查询所有成员
export const clockAudit = params => axios.post(`${defaultwbs}/clock/audit`, params);
// 导出考勤excel
export const clockExport = params => axios.post(`${defaultwbs}/clock/export`, params);
// 报名信息提交
export const submitSignUp = params => axios.post(`${defaultwbs}/player/apply`, params);

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

@ -17,15 +17,28 @@
<div>
<div class="flex justify-between items-center h-12 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="请输入您的姓名" />
<input class="text-sm text-right outline-none" id="name" v-model="name" type="text" placeholder="请输入您的姓名" />
</div>
<div class="flex justify-between items-center h-12 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="请输入您的身份证号" />
<input
class="text-sm text-right outline-none"
id="idNumber"
v-model="idCard"
type="text"
placeholder="请输入您的身份证号"
/>
</div>
<div class="flex justify-between items-center h-12 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="请输入您的年龄" />
<input
class="text-sm text-right outline-none"
id="age"
v-model="age"
value="age"
type="number"
placeholder="请输入您的年龄"
/>
</div>
<div class="flex justify-between items-center h-12 border-b">
<label class="text-sm text-gray-400">性别</label>
@ -49,11 +62,11 @@
<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>
<input class="text-sm text-right outline-none" id="address" type="text" placeholder="请输入您的详细地址" />
<input class="text-sm text-right outline-none" id="address" v-model="address" type="text" placeholder="请输入您的详细地址" />
</div>
<div class="flex justify-between items-center h-12 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="请输入您的电话" />
<input class="text-sm text-right outline-none" id="phone" v-model="phone" type="text" placeholder="请输入您的电话" />
</div>
</div>
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">培训信息</div>
@ -67,7 +80,7 @@
</div>
</div>
</div>
<div class="flex justify-between items-center h-12 border-b">
<!-- <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>
@ -75,10 +88,10 @@
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
</div>
</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>
<button class="bg-blue-500 text-white text-base apply-btn" onclick="submitSignUp()">立即报名</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">
@ -98,37 +111,20 @@
<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%',
},
];
import { getUserInfo, submitSignUp } from '@/config/api';
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: '', // 当前选择的日期
name: '',
idCard: '',
age: '',
gender: 0,
position: 1,
address: '',
phone: '',
targetId: 1,
};
},
@ -147,14 +143,6 @@ export default {
// });
}
}, 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: {
@ -163,31 +151,31 @@ export default {
async setParams() {
const { projectId, startTime, endTime, memberIdList, roleId } = this;
const params = { param: { projectId, memberIdList, startTime, endTime, roleId } };
await this.getClockQuery(params);
await this.getUserInfo();
},
/**
* 查询考勤信息
* @param {string} projectId
* @param {array} memberIdList
* @param {string} startTime
* @param {string} endTime
* 报名
*/
async getClockQuery(params) {
async submitSignUp() {
try {
const res = await clockQuery(params);
const params = {
param: {
projectId: this.projectId,
name: this.name,
idCard: this.idCard,
age: this.age,
gender: this.gender,
position: this.position,
address: this.address,
phone: this.phone,
targetId: this.targetId,
},
};
const res = await submitSignUp(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];
console.log(data);
} else {
this.$message.error(msg || '获取失败');
throw msg;
@ -197,146 +185,29 @@ export default {
}
},
// 选择审核人
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) {
async getUserInfo() {
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);
const params = { param: { projectId: this.projectId } };
const res = await getUserInfo(params);
const { code, msg, data } = res.data;
if (code === 200 && data) {
this.name = data.name;
this.idCard = data.idCard;
this.age = data.age;
this.gender = data.gender;
this.position = data.position;
this.address = data.address;
this.phone = data.phone;
this.targetId = data.targetId;
} else {
this.$message.error(msg || '审核失败');
this.$message.error(msg || '获取失败');
throw msg;
}
} catch (error) {
throw error || '审核失败';
throw error || '获取失败';
}
},
},

Write Preview
Loading…
Cancel
Save