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

修改多处细节

master
song 4 years ago
parent
77bf514d33
commit
6cfd78f301
6 changed files with 131 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/components/HeadNav/HeadNav.vue
  2. 157
      src/components/List/List.vue
  3. 8
      src/components/MemberPicker/MemberPicker.vue
  4. 8
      src/store/modules/home/actions.js
  5. 9
      src/store/modules/home/mutations.js
  6. 1
      src/store/modules/home/state.js

18
src/components/HeadNav/HeadNav.vue
View File

@ -21,8 +21,22 @@
</div> </div>
</div> </div>
<a-modal v-model="visible" @ok="handleOk" title="提示"> <a-modal v-model="visible" @ok="handleOk" title="提示">
<p>静态小红点：审核人未审核你的打卡状态</p> <div style="max-height: 250px; overflow-y: auto">
<p>动态小红点：某成员选择你为打卡人，需要你审核</p> <!-- 打卡审核规则以及各种状态代表什么 -->
<p>打卡时需选择自己的项目经理为审核人，审核人未审核时显示小红点</p>
<p>自己的：打卡没审核时，显示静态小红点。已审核，没有小红点，文字变为蓝色。</p>
<p>
审核人：某成员选择你为打卡人，需要你审核，该成员的打卡时间上有动态小红点，确认或驳回后小红点消失。点击该时间，出现局部确认框，确认、驳回、修改、取消。
</p>
<p>其他人：不是自己也不是审核人。打开未审核，显示浅色小黄点</p>
<p>
审核人操作：<br />
确认，代表审核通过。通过后，小红点消失，文字变为绿色；<br />
驳回，代表该次打卡无效，成划线状态，灰色；<br />
修改，时间变为时间选择框，选择输入更新打卡时间，日期不变，时分变；<br />
取消，隐藏局部确认框
</p>
</div>
</a-modal> </a-modal>
</div> </div>
</template> </template>

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

@ -14,7 +14,10 @@
<!-- 早 --> <!-- 早 -->
<template slot="morning" slot-scope="text, record, index"> <template slot="morning" slot-scope="text, record, index">
<div v-if="!record.isMine && !record.isChecker"> <div v-if="!record.isMine && !record.isChecker">
<span v-if="record.morningStatus">{{ $moment(record.morning - 0).format('HH:mm') }}</span> <span v-if="record.morningStatus" class="daka" :class="record.morningStatus === 2 ? 'line-through' : ''"
>{{ $moment(record.morning - 0).format('HH:mm') }}
<div class="dian dian-yellow" v-if="record.morningStatus === 1"></div
></span>
<span v-else>未打卡</span> <span v-else>未打卡</span>
</div> </div>
@ -24,12 +27,13 @@
{{ $moment(record.morning - 0).format('HH:mm') }} {{ $moment(record.morning - 0).format('HH:mm') }}
<div class="dian"></div> <div class="dian"></div>
</span> </span>
<span v-else-if="record.morningStatus === 2" class="line-through text-red-500 font-bold"> <span v-else-if="record.morningStatus === 2" class="line-through text-gray-400 font-bold">
{{ $moment(record.morning - 0).format('HH:mm') }} {{ $moment(record.morning - 0).format('HH:mm') }}
</span> </span>
<span v-else-if="record.morningStatus === 3" class="text-blue-500 font-bold"> <span v-else-if="record.morningStatus === 3" class="text-blue-500 font-bold">
{{ $moment(record.morning - 0).format('HH:mm') }} {{ $moment(record.morning - 0).format('HH:mm') }}
</span> </span>
<span v-else-if="today !== list.dateTime">未打卡</span>
<a-button <a-button
v-else v-else
type="primary" type="primary"
@ -42,17 +46,21 @@
</div> </div>
<div v-if="record.isChecker"> <div v-if="record.isChecker">
<div v-if="record.morningStatus && !showMorningTime"> <div v-if="record.morningStatus && !record.showMorningTime">
<a-popconfirm <a-popconfirm
ok-text="取消" ok-text="取消"
cancel-text="修改" cancel-text="修改"
ok-type="" ok-type=""
@confirm="cancel" @confirm="cancel(record, 'morningVisible')"
:visible="morningVisible" :visible="record.morningVisible"
@cancel="changeStatus(record.id, 0, 'morning')" @cancel="changeStatus(record.id, 0, record, 'morningVisible', 'showMorningTime')"
> >
<a-icon slot="icon" type="" /> <a-icon slot="icon" type="" />
<a-button class="okBtn" slot="title" size="small" @click="rejectStatus(record.id, 2, 'morning', record.morning)" <a-button
class="okBtn"
slot="title"
size="small"
@click="rejectStatus(record.id, 2, 'morning', record.morning, record, 'morningVisible')"
>确认</a-button >确认</a-button
> >
<a-button <a-button
@ -60,14 +68,14 @@
class="ml-2" class="ml-2"
slot="title" slot="title"
size="small" size="small"
@click="rejectStatus(record.id, 1, 'morning', record.morning)" @click="rejectStatus(record.id, 1, 'morning', record.morning, record, 'morningVisible')"
> >
驳回 驳回
</a-button> </a-button>
<span <span
class="font-bold daka" class="font-bold daka"
:class="record.morningStatus === 2 ? 'line-through text-red-500' : 'text-green-500'" :class="record.morningStatus === 2 ? 'line-through text-gray-400' : 'text-green-500'"
@click="changeVisible(record.morningStatus, 'morningVisible')" @click="changeVisible(index, record.morningStatus, 'morningVisible')"
> >
<div class="dian animate-ping" v-if="record.morningStatus === 1"></div> <div class="dian animate-ping" v-if="record.morningStatus === 1"></div>
<div class="dian" v-if="record.morningStatus === 1"></div> <div class="dian" v-if="record.morningStatus === 1"></div>
@ -75,16 +83,16 @@
</span> </span>
</a-popconfirm> </a-popconfirm>
</div> </div>
<div v-if="!record.morningStatus && !showMorningTime">未打卡</div> <div v-if="!record.morningStatus && !record.showMorningTime">未打卡</div>
<!-- 修改时间 --> <!-- 修改时间 -->
<a-time-picker <a-time-picker
placeholder="请选择" placeholder="请选择"
style="width: 100%" style="width: 100%"
v-if="showMorningTime" v-if="record.showMorningTime"
format="HH:mm" format="HH:mm"
class="px-2" class="px-2"
@change="timeChange" @change="timeChange"
@openChange="openChange($event, 'morning')" @openChange="openChange($event, record, 'showMorningTime', 'morning')"
/> />
</div> </div>
</div> </div>
@ -92,7 +100,10 @@
<!-- 晚 --> <!-- 晚 -->
<template slot="night" slot-scope="text, record, index"> <template slot="night" slot-scope="text, record, index">
<div v-if="!record.isMine && !record.isChecker"> <div v-if="!record.isMine && !record.isChecker">
<span v-if="record.nightStatus">{{ $moment(record.night - 0).format('HH:mm') }}</span> <span v-if="record.nightStatus" class="daka" :class="record.nightStatus === 2 ? 'line-through' : ''"
>{{ $moment(record.night - 0).format('HH:mm') }}
<div class="dian dian-yellow" v-if="record.nightStatus === 1"></div
></span>
<span v-else>未打卡</span> <span v-else>未打卡</span>
</div> </div>
@ -102,12 +113,13 @@
{{ $moment(record.night - 0).format('HH:mm') }} {{ $moment(record.night - 0).format('HH:mm') }}
<div class="dian"></div> <div class="dian"></div>
</span> </span>
<span v-else-if="record.nightStatus === 2" class="line-through text-red-500 font-bold"> <span v-else-if="record.nightStatus === 2" class="line-through text-gray-400 font-bold">
{{ $moment(record.night - 0).format('HH:mm') }} {{ $moment(record.night - 0).format('HH:mm') }}
</span> </span>
<span v-else-if="record.nightStatus === 3" class="text-blue-500 font-bold"> <span v-else-if="record.nightStatus === 3" class="text-blue-500 font-bold">
{{ $moment(record.night - 0).format('HH:mm') }} {{ $moment(record.night - 0).format('HH:mm') }}
</span> </span>
<span v-else-if="today !== list.dateTime">未打卡</span>
<a-button <a-button
v-else v-else
type="primary" type="primary"
@ -120,17 +132,21 @@
</div> </div>
<div v-if="record.isChecker"> <div v-if="record.isChecker">
<div v-if="record.nightStatus && !showNightTime"> <div v-if="record.nightStatus && !record.showNightTime">
<a-popconfirm <a-popconfirm
ok-text="取消" ok-text="取消"
cancel-text="修改" cancel-text="修改"
ok-type="" ok-type=""
@confirm="cancel" @confirm="cancel(record, 'nightVisible')"
:visible="visible" :visible="record.nightVisible"
@cancel="changeStatus(record.id, 0, 'night')" @cancel="changeStatus(record.id, 0, record, 'nightVisible', 'showNightTime')"
> >
<a-icon slot="icon" type="" /> <a-icon slot="icon" type="" />
<a-button type="primary" slot="title" size="small" @click="rejectStatus(record.id, 2, 'night', record.night)" <a-button
type="primary"
slot="title"
size="small"
@click="rejectStatus(record.id, 2, 'night', record.night, record, 'nightVisible')"
>确认</a-button >确认</a-button
> >
<a-button <a-button
@ -138,14 +154,14 @@
class="ml-2" class="ml-2"
slot="title" slot="title"
size="small" size="small"
@click="rejectStatus(record.id, 1, 'night', record.night)" @click="rejectStatus(record.id, 1, 'night', record.night, record, 'nightVisible')"
> >
驳回 驳回
</a-button> </a-button>
<span <span
class="font-bold daka" class="font-bold daka"
:class="record.nightStatus === 2 ? 'line-through text-red-500' : 'text-green-500'" :class="record.nightStatus === 2 ? 'line-through text-gray-400' : 'text-green-500'"
@click="changeVisible(record.nightStatus, 'visible')" @click="changeVisible(index, record.nightStatus, 'nightVisible')"
> >
<div class="dian animate-ping" v-if="record.nightStatus === 1"></div> <div class="dian animate-ping" v-if="record.nightStatus === 1"></div>
<div class="dian" v-if="record.nightStatus === 1"></div> <div class="dian" v-if="record.nightStatus === 1"></div>
@ -153,16 +169,16 @@
</span> </span>
</a-popconfirm> </a-popconfirm>
</div> </div>
<div v-if="!record.nightStatus && !showNightTime">未打卡</div> <div v-if="!record.nightStatus && !record.showNightTime">未打卡</div>
<!-- 修改时间 --> <!-- 修改时间 -->
<a-time-picker <a-time-picker
placeholder="请选择" placeholder="请选择"
style="width: 100%" style="width: 100%"
v-if="showNightTime" v-if="record.showNightTime"
format="HH:mm" format="HH:mm"
class="px-2" class="px-2"
@change="timeChange" @change="timeChange"
@openChange="openChange($event, 'night')" @openChange="openChange($event, record, 'showNightTime', 'night')"
/> />
</div> </div>
</div> </div>
@ -170,16 +186,16 @@
<!-- 审核人 --> <!-- 审核人 -->
<template slot="checkerName" slot-scope="text, record"> <template slot="checkerName" slot-scope="text, record">
<div class="px-2"> <div class="px-2">
<div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus)"> <div v-if="!record.isMine || (record.isMine && record.morningStatus && record.nightStatus) || today !== list.dateTime">
{{ record.checkerName || members[0].name }} {{ record.checkerName || checkers[0].name }}
</div> </div>
<a-select <a-select
v-else v-else
:default-value="record.lastCheckerId ? record.lastCheckerId : record.checkerId ? record.checkerId : members[0].memberId" :default-value="record.lastCheckerId ? record.lastCheckerId : record.checkerId ? record.checkerId : checkers[0].memberId"
style="width: 100%" style="width: 100%"
@change="chooseChecker" @change="chooseChecker"
> >
<a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId"> <a-select-option :value="member.memberId" v-for="member in checkers" :key="member.memberId">
{{ member.name }} {{ member.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -218,20 +234,17 @@ export default {
clockInfos: [], clockInfos: [],
options: null, options: null,
checkerId: undefined, checkerId: undefined,
morningVisible: false,
visible: false,
placement: 'left', placement: 'left',
timer: null, timer: null,
showNightTime: false,
showMorningTime: false,
chooseTime: '', chooseTime: '',
auditOptions: null, auditOptions: null,
morningLoading: false, morningLoading: false,
nightLoading: false, nightLoading: false,
today: this.$moment(new Date()).format('YYYY-MM-DD'),
}; };
}, },
computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId']), computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId', 'checkers']),
mounted() { mounted() {
this.timer = setInterval(async () => { this.timer = setInterval(async () => {
@ -277,7 +290,16 @@ export default {
const res = await clockQuery(params); const res = await clockQuery(params);
const { code, msg, data } = res.data; const { code, msg, data } = res.data;
if (code === 200) { if (code === 200) {
this.clockInfos = data; data.forEach(item => {
item.recordList.forEach(clcok => {
clcok.morningVisible = false;
clcok.nightVisible = false;
clcok.showNightTime = false;
clcok.showMorningTime = false;
});
});
this.clockInfos = [...data];
} else { } else {
this.$message.error(msg || '获取失败'); this.$message.error(msg || '获取失败');
throw msg; throw msg;
@ -302,7 +324,7 @@ export default {
this.clockInfos[listIndex].recordList[index].night = selectTime; this.clockInfos[listIndex].recordList[index].night = selectTime;
} }
const dateTime = this.$moment(`${clockTime} ${selectTime}`).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 } }; const params = { param: { checkerId: this.checkerId || checkerId || this.checkers[0].memberId, clockType, dateTime, id, memberId } };
this.handleClockPunch(params); this.handleClockPunch(params);
}, },
@ -346,55 +368,57 @@ export default {
} }
}, },
changeVisible(status, type) { changeVisible(index, status, type) {
if (status !== 0) { if (status !== 0) {
this[type] = true; 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, timeType) { changeStatus(id, type, record, visible, show) {
if (timeType === 'morning') { record[visible] = false;
this.morningVisible = false; record[show] = true;
this.showMorningTime = true;
} else {
this.visible = false;
this.showNightTime = true;
}
this.auditOptions = { id, type }; this.auditOptions = { id, type };
}, },
// 选择修改时间 // 选择修改时间
timeChange(time) { timeChange(time) {
this.chooseTime = this.$moment(time).format('x'); this.chooseTime = this.$moment(time).format('x');
}, },
async openChange(open, timeType) { async openChange(open, record, show, timeType) {
if (!open && this.chooseTime) { if (!open && this.chooseTime) {
this.auditOptions[timeType] = this.chooseTime; this.auditOptions[timeType] = this.chooseTime;
this.auditOptions.projectId = this.projectId; this.auditOptions.projectId = this.projectId;
const params = { param: this.auditOptions }; const params = { param: this.auditOptions };
await this.handleClockAudit(params); await this.handleClockAudit(params, record, show);
} }
if (!open && !this.chooseTime) { if (!open && !this.chooseTime) {
this.showNightTime = false; record[show] = false;
this.showMorningTime = false;
} }
}, },
// 驳回 // 驳回
async rejectStatus(id, type, timeType, time) { async rejectStatus(id, type, timeType, time, record, show) {
if (timeType === 'morning') { record[show] = false;
this.morningVisible = false;
} else {
this.visible = false;
}
const params = { param: { id, type, [timeType]: time, projectId: this.projectId } }; const params = { param: { id, type, [timeType]: time, projectId: this.projectId } };
await this.handleClockAudit(params); await this.handleClockAudit(params, record, show);
}, },
// 取消 // 取消
cancel() { cancel(record, type) {
this.visible = false; record[type] = false;
this.morningVisible = false;
}, },
/** /**
@ -405,14 +429,13 @@ export default {
* @param {string} projectId 项目id * @param {string} projectId 项目id
* @param {string} type 审批类型(0-修改,1-驳回,2-通过) * @param {string} type 审批类型(0-修改,1-驳回,2-通过)
*/ */
async handleClockAudit(params) { async handleClockAudit(params, record, show) {
try { try {
const res = await clockAudit(params); const res = await clockAudit(params);
const { code, msg } = res.data; const { code, msg } = res.data;
if (code === 200) { if (code === 200) {
this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过'); this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过');
this.showNightTime = false; record[show] = false;
this.showMorningTime = false;
this.auditOptions = null; this.auditOptions = null;
const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList }; const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
this.setParams(options); this.setParams(options);
@ -484,6 +507,7 @@ img {
.daka { .daka {
position: relative; position: relative;
} }
.dian { .dian {
position: absolute; position: absolute;
width: 6px; width: 6px;
@ -493,6 +517,11 @@ img {
top: 2px; top: 2px;
right: -10px; right: -10px;
} }
.dian-yellow {
background-color: rgb(253, 230, 138);
}
.okBtn { .okBtn {
background-color: #10b981 !important; background-color: #10b981 !important;
color: #fff; color: #fff;

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

@ -6,7 +6,7 @@
style="width: 100%" style="width: 100%"
placeholder="请选择成员" placeholder="请选择成员"
@change="handleChange" @change="handleChange"
:default-value="memberIdList && memberIdList.length ? memberIdList : '全部'" :value="memberIdList && memberIdList.length ? memberIdList : '全部'"
> >
<a-select-option value=""> 全部 </a-select-option> <a-select-option value=""> 全部 </a-select-option>
<a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId"> {{ member.name }} </a-select-option> <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId"> {{ member.name }} </a-select-option>
@ -28,10 +28,10 @@ export default {
...mapMutations('home', ['setMemberIdList']), ...mapMutations('home', ['setMemberIdList']),
handleChange(value) { handleChange(value) {
console.log(value); if (value[value.length - 1] === '') {
if (value) { this.setMemberIdList();
} else if (value) {
const index = value.findIndex(item => item === '全部'); const index = value.findIndex(item => item === '全部');
console.log(index);
if (index !== -1) { if (index !== -1) {
value.splice(index, 1); value.splice(index, 1);
} }

8
src/store/modules/home/actions.js
View File

@ -35,6 +35,14 @@ const actions = {
const { code, msg, data } = res.data; const { code, msg, data } = res.data;
if (code === 200) { if (code === 200) {
commit('setMembers', data); commit('setMembers', data);
// 筛选审核人
let checkers = [];
data.forEach(item => {
if (item.userId && item.userId !== '0' && item.isMine !== 1) {
checkers.push(item);
}
});
commit('setCheckers', [...checkers]);
return data; return data;
} else { } else {
message.error(msg || '查询失败'); message.error(msg || '查询失败');

9
src/store/modules/home/mutations.js
View File

@ -26,6 +26,15 @@ const mutations = {
state.members = data; state.members = data;
}, },
/**
* 设置审核人信息
* @param {object} state
* @param {Array} data
*/
setCheckers(state, data) {
state.checkers = data;
},
/** /**
* 设置开始时间 * 设置开始时间
* @param {object} state * @param {object} state

1
src/store/modules/home/state.js
View File

@ -13,6 +13,7 @@ const state = {
endTime: null, endTime: null,
memberIdList: [], memberIdList: [],
roleId: '', roleId: '',
checkers: [], // 审核人列表
}; };
export default state; export default state;

Write Preview
Loading…
Cancel
Save