ccsens_fe
/
check-work
forked from TALL/check-work
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整打卡细节

master
song 4 years ago
parent
a26a322ca3
commit
84f543d6c9
6 changed files with 219 additions and 154 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. 4
      rest/project.http
  2. 10
      src/App.vue
  3. 296
      src/components/List/List.vue
  4. 2
      src/components/MemberPicker/MemberPicker.vue
  5. 59
      src/components/TimePicker/TimePicker.vue
  6. 2
      src/plugins/ant-design-vue.js

4
rest/project.http
View File

@ -7,8 +7,8 @@ content-type: application/json;charset=utf-8
{
"client": 1,
"data": {
"credential": "123456",
"identifier": "zb"
"credential": "999999",
"identifier": "song"
},
"scene": 0,
"type": 3

10
src/App.vue
View File

@ -1,8 +1,10 @@
<template>
<div id="app">
<head-nav class="head-nav" />
<router-view></router-view>
</div>
<a-locale-provider :locale="zh_CN">
<div id="app">
<head-nav class="head-nav" />
<router-view></router-view>
</div>
</a-locale-provider>
</template>
<script>

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

@ -6,141 +6,145 @@
<div class="table-head-item">晚</div>
<div class="table-head-item" style="width: 30%">审核人</div>
</div>
<div v-if="clockInfos && clockInfos.length">
<div v-for="(list, listIndex) in clockInfos" :key="listIndex" class="teble-box">
<div class="table-time px-2">{{ list.dateTime }}</div>
<a-table :pagination="false" :show-header="false" :columns="columns" :data-source="list.recordList">
<!-- 早 -->
<template slot="morning" slot-scope="text, record, index">
<div v-if="!record.isMine && !record.isChecker">
<span v-if="record.morningStatus">{{ $moment(record.morning - 0).format('HH:mm') }}</span>
<span v-else>未打卡</span>
</div>
<div v-else>
<div v-if="record.isMine">
<span v-if="record.morningStatus" class="baseColor font-bold">
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
<a-button
v-else
type="primary"
size="small"
@click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId)"
>
打卡
</a-button>
<div id="scrollTo">
<div v-if="clockInfos && clockInfos.length">
<div v-for="(list, listIndex) in clockInfos" :key="listIndex" class="teble-box">
<div class="table-time px-2">{{ list.dateTime }}</div>
<a-table :pagination="false" :show-header="false" :columns="columns" :data-source="list.recordList">
<!-- 早 -->
<template slot="morning" slot-scope="text, record, index">
<div v-if="!record.isMine && !record.isChecker">
<span v-if="record.morningStatus">{{ $moment(record.morning - 0).format('HH:mm') }}</span>
<span v-else>未打卡</span>
</div>
<div v-if="record.isChecker">
<div v-if="record.morningStatus && !showMorningTime">
<a-popconfirm
ok-text="取消"
cancel-text="修改"
ok-type=""
@confirm="cancel"
:visible="morningVisible"
@cancel="changeStatus(record.id, 0, 'morning')"
<div v-else>
<div v-if="record.isMine">
<span v-if="record.morningStatus" class="baseColor font-bold">
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
<a-button
v-else
type="primary"
size="small"
:loading="morningLoading"
@click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId, list.dateTime)"
>
<a-icon slot="icon" type="" />
<a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">驳回</a-button>
<span
class="font-bold"
:class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
@click="changeVisible(record.morningStatus, 'morningVisible')"
打卡
</a-button>
</div>
<div v-if="record.isChecker">
<div v-if="record.morningStatus && !showMorningTime">
<a-popconfirm
ok-text="取消"
cancel-text="修改"
ok-type=""
@confirm="cancel"
:visible="morningVisible"
@cancel="changeStatus(record.id, 0, 'morning')"
>
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
</a-popconfirm>
<a-icon slot="icon" type="" />
<a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">驳回</a-button>
<span
class="font-bold"
:class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
@click="changeVisible(record.morningStatus, 'morningVisible')"
>
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
</a-popconfirm>
</div>
<div v-if="!record.morningStatus && !showMorningTime">未打卡</div>
<!-- 修改时间 -->
<a-time-picker
placeholder="请选择"
style="width: 100%"
v-if="showMorningTime"
format="HH:mm"
class="px-2"
@change="timeChange"
@openChange="openChange($event, 'morning')"
/>
</div>
<div v-if="!record.morningStatus && !showMorningTime">未打卡</div>
<!-- 修改时间 -->
<a-time-picker
placeholder="请选择"
style="width: 100%"
v-if="showMorningTime"
format="HH:mm"
class="px-2"
@change="timeChange"
@openChange="openChange($event, 'morning')"
/>
</div>
</div>
</template>
<!-- 晚 -->
<template slot="night" slot-scope="text, record, index">
<div v-if="!record.isMine && !record.isChecker">
<span v-if="record.nightStatus">{{ $moment(record.night - 0).format('HH:mm') }}</span>
<span v-else>未打卡</span>
</div>
<div v-else>
<div v-if="record.isMine">
<span v-if="record.nightStatus" class="baseColor font-bold">
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
<a-button
v-else
type="primary"
size="small"
@click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId)"
>
打卡
</a-button>
</template>
<!-- 晚 -->
<template slot="night" slot-scope="text, record, index">
<div v-if="!record.isMine && !record.isChecker">
<span v-if="record.nightStatus">{{ $moment(record.night - 0).format('HH:mm') }}</span>
<span v-else>未打卡</span>
</div>
<div v-if="record.isChecker">
<div v-if="record.nightStatus && !showNightTime">
<a-popconfirm
ok-text="取消"
cancel-text="修改"
ok-type=""
@confirm="cancel"
:visible="visible"
@cancel="changeStatus(record.id, 0, 'night')"
<div v-else>
<div v-if="record.isMine">
<span v-if="record.nightStatus" class="baseColor font-bold">
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
<a-button
v-else
type="primary"
size="small"
:loading="nightLoading"
@click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId, list.dateTime)"
>
<a-icon slot="icon" type="" />
<a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">驳回</a-button>
<span
class="font-bold"
:class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
@click="changeVisible(record.nightStatus, 'visible')"
打卡
</a-button>
</div>
<div v-if="record.isChecker">
<div v-if="record.nightStatus && !showNightTime">
<a-popconfirm
ok-text="取消"
cancel-text="修改"
ok-type=""
@confirm="cancel"
:visible="visible"
@cancel="changeStatus(record.id, 0, 'night')"
>
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
</a-popconfirm>
<a-icon slot="icon" type="" />
<a-button slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">驳回</a-button>
<span
class="font-bold"
:class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
@click="changeVisible(record.nightStatus, 'visible')"
>
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
</a-popconfirm>
</div>
<div v-if="!record.nightStatus && !showNightTime">未打卡</div>
<!-- 修改时间 -->
<a-time-picker
placeholder="请选择"
style="width: 100%"
v-if="showNightTime"
format="HH:mm"
class="px-2"
@change="timeChange"
@openChange="openChange($event, 'night')"
/>
</div>
<div v-if="!record.nightStatus && !showNightTime">未打卡</div>
<!-- 修改时间 -->
<a-time-picker
placeholder="请选择"
style="width: 100%"
v-if="showNightTime"
format="HH:mm"
class="px-2"
@change="timeChange"
@openChange="openChange($event, 'night')"
/>
</div>
</div>
</template>
<!-- 审核人 -->
<template slot="checkerName" slot-scope="text, record">
<div class="px-2">
<div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus)">
{{ record.checkerName || members[0].name }}
</template>
<!-- 审核人 -->
<template slot="checkerName" slot-scope="text, record">
<div class="px-2">
<div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus)">
{{ record.checkerName || members[0].name }}
</div>
<a-select v-else :default-value="record.checkerId || members[0].memberId" style="width: 100%" @change="chooseChecker">
<a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
{{ member.name }}
</a-select-option>
</a-select>
</div>
<a-select v-else :default-value="record.checkerId || members[0].memberId" style="width: 100%" @change="chooseChecker">
<a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
{{ member.name }}
</a-select-option>
</a-select>
</div>
</template>
</a-table>
</template>
</a-table>
</div>
</div>
<a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
</div>
<a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
</div>
</template>
@ -178,16 +182,26 @@ export default {
showMorningTime: false,
chooseTime: '',
auditOptions: null,
morningLoading: false,
nightLoading: false,
startTime: '',
endTime: '',
};
},
computed: mapState('home', ['projectId', 'members']),
mounted() {
this.timer = setInterval(() => {
this.timer = setInterval(async () => {
if (this.projectId) {
clearInterval(this.timer);
this.setParams();
await this.setParams();
// 自动移动到目标位置
document.querySelector('#scrollTo').scrollIntoView({
behavior: 'smooth', // 平滑过渡
block: 'start', // 上边框与视窗顶部平齐。默认值
});
}
}, 300);
},
@ -196,10 +210,10 @@ export default {
async setParams(options) {
const { projectId } = this;
const time = this.$moment(Date.now()).format('YYYY-MM-DD');
const startTime = (options && options.startTime) || this.$moment(`${time} 00:00`).format('x') - 0;
const endTime = (options && options.endTime) || this.$moment(`${time} 23:59`).format('x') - 0;
const memberIdList = (options && options.memberIdList) || this.memberIdList;
const params = { param: { projectId, memberIdList, startTime, endTime } };
this.startTime = (options && options.startTime) || this.$moment(`${time} 00:00`).format('x') - 0;
this.endTime = (options && options.endTime) || this.$moment(`${time} 23:59`).format('x') - 0;
this.memberIdList = (options && options.memberIdList) || [];
const params = { param: { projectId, memberIdList: this.memberIdList, startTime: this.startTime, endTime: this.endTime } };
await this.getClockQuery(params);
},
@ -231,7 +245,7 @@ export default {
},
// 打卡
checkTime(listIndex, index, clockType, id, memberId, checkerId) {
checkTime(listIndex, index, clockType, id, memberId, checkerId, clockTime) {
const time = Date.now();
const selectTime = this.$moment(time).format('HH:mm');
if (clockType === 0) {
@ -239,7 +253,7 @@ export default {
} else {
this.clockInfos[listIndex].recordList[index].night = selectTime;
}
const dateTime = this.$moment(time).format('x') - 0;
const dateTime = this.$moment(`${clockTime} ${selectTime}`).format('x') - 0;
const params = { param: { checkerId: this.checkerId || checkerId || this.members[0].memberId, clockType, dateTime, id, memberId } };
this.handleClockPunch(params);
},
@ -254,16 +268,32 @@ export default {
*/
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('打卡成功');
this.setParams();
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 || '打卡失败';
}
},
@ -336,7 +366,8 @@ export default {
this.showNightTime = false;
this.showMorningTime = false;
this.auditOptions = null;
this.setParams();
const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
this.setParams(options);
} else {
this.$message.error(msg || '审核失败');
throw msg;
@ -359,9 +390,10 @@ export default {
}
.table-time {
height: 36px;
line-height: 36px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #e8e8e8;
background: #fafafa;
}
.table-head-item {

2
src/components/MemberPicker/MemberPicker.vue
View File

@ -22,7 +22,7 @@ export default {
setTimeout(() => {
const options = { memberIdList: value };
this.$emit('changeTime', options);
}, 800);
}, 1000);
},
},
};

59
src/components/TimePicker/TimePicker.vue
View File

@ -3,24 +3,36 @@
<a-date-picker
v-model="startValue"
:disabled-date="disabledStartDate"
show-time
allow-clear
locale="zh-cn"
:format="monthFormat"
placeholder="起始时间"
class="box box1"
:show-today="false"
:open="startOpen"
@openChange="handleStartOpenChange"
/>
>
<template slot="renderExtraFooter">
<a-button size="small" type="primary" ghost @click="setYesterday('startValue', 'startOpen')">昨天</a-button>
<a-button class="ml-3" size="small" type="primary" ghost @click="setToday('startValue', 'startOpen')">今天</a-button>
</template>
</a-date-picker>
<a-date-picker
v-model="endValue"
:disabled-date="disabledEndDate"
allow-clear
:format="monthFormat"
class="box box2"
:show-today="false"
placeholder="截止时间"
:open="endOpen"
@openChange="handleEndOpenChange"
/>
>
<template slot="renderExtraFooter">
<a-button size="small" type="primary" ghost @click="setYesterday('endValue', 'endOpen')">昨天</a-button>
<a-button class="ml-3" size="small" type="primary" ghost @click="setToday('endValue', 'endOpen')">今天</a-button>
</template>
</a-date-picker>
</div>
</template>
@ -31,18 +43,42 @@ export default {
monthFormat: 'YYYY-MM-DD',
startValue: null,
endValue: null,
startOpen: false,
endOpen: false,
};
},
watch: {
startValue(val) {
console.log('startValue', val);
},
endValue(val) {
console.log('endValue', val);
if (!this.startValue) {
this.$message.error('请选择起始时间');
return;
}
if (this.startValue && val) {
const startTime = this.$moment(this.startValue).format('x');
const endTime = this.$moment(this.endValue).format('x');
const options = { startTime, endTime };
this.$emit('changeTime', options);
}
},
},
methods: {
// 昨天
setYesterday(value, open) {
this[value] = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
this[open] = false;
if (open === 'startOpen' && !this.startOpen) {
this.endOpen = true;
}
},
setToday(value, open) {
this[value] = this.$moment(new Date()).format('YYYY-MM-DD');
this[open] = false;
if (open === 'startOpen' && !this.startOpen) {
this.endOpen = true;
}
},
disabledStartDate(startValue) {
const endValue = this.endValue;
if (!startValue || !endValue) {
@ -58,20 +94,13 @@ export default {
return startValue.valueOf() >= endValue.valueOf();
},
handleStartOpenChange(open) {
this.startOpen = open;
if (!open) {
this.endOpen = true;
}
},
handleEndOpenChange(open) {
this.endOpen = open;
if (!this.startValue) {
this.$message.error('请选择起始时间');
} else {
const startTime = this.$moment(this.startValue).format('x');
const endTime = this.$moment(this.endValue).format('x');
const options = { startTime, endTime };
this.$emit('changeTime', options);
}
},
},
};

2
src/plugins/ant-design-vue.js
View File

@ -44,6 +44,7 @@ import {
Skeleton,
Drawer,
TimePicker,
LocaleProvider,
} from 'ant-design-vue';
import { ConfigProvider } from 'ant-design-vue';
Vue.component(ConfigProvider.name, ConfigProvider);
@ -82,6 +83,7 @@ Vue.use(Card);
Vue.use(Skeleton);
Vue.use(Drawer);
Vue.use(TimePicker);
Vue.use(LocaleProvider);
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;

Write Preview
Loading…
Cancel
Save