Browse Source

解决冲突

master
jarvis 4 years ago
parent
commit
43eb5e4620
  1. 1
      public/index.html
  2. 3
      src/App.vue
  3. BIN
      src/assets/arrow.png
  4. BIN
      src/assets/build.png
  5. BIN
      src/assets/bullhorn.png
  6. BIN
      src/assets/code.png
  7. BIN
      src/assets/enterprise-banner.png
  8. BIN
      src/assets/gywm01.jpg
  9. BIN
      src/assets/gywm02.png
  10. BIN
      src/assets/hzhb01.png
  11. BIN
      src/assets/hzhb02.png
  12. BIN
      src/assets/hzhb03.png
  13. BIN
      src/assets/hzhb04.png
  14. BIN
      src/assets/image.jpeg
  15. BIN
      src/assets/image.png
  16. BIN
      src/assets/join-us.png
  17. BIN
      src/assets/logo.png
  18. BIN
      src/assets/logo_bottom.png
  19. BIN
      src/assets/new01.png
  20. BIN
      src/assets/new02.png
  21. BIN
      src/assets/round.png
  22. BIN
      src/assets/settleIn.png
  23. BIN
      src/assets/solicitation.png
  24. BIN
      src/assets/t-top.png
  25. BIN
      src/assets/zckj.png
  26. BIN
      src/assets/zckj01.png
  27. BIN
      src/assets/矩形 133.png
  28. 363
      src/common/dateRangUtil.js
  29. 60
      src/components/HeadNav/HeadNav.vue
  30. 95
      src/components/List/List.vue
  31. 7
      src/components/MemberPicker/MemberPicker.vue
  32. 91
      src/components/TimePicker/TimePicker.vue
  33. 4
      src/store/modules/home/state.js
  34. 37
      src/views/FirstPage/FirstPage.vue

1
public/index.html

@ -4,6 +4,7 @@
<meta charset="utf-8">
<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>
</head>
<body>

3
src/App.vue

@ -1,7 +1,6 @@
<template>
<a-config-provider :locale="zh_CN">
<div id="app">
<head-nav class="head-nav" />
<router-view></router-view>
</div>
</a-config-provider>
@ -10,11 +9,9 @@
<script>
import { mapActions, mapMutations } from 'vuex';
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import HeadNav from './components/HeadNav/HeadNav.vue';
export default {
name: 'App',
components: { HeadNav },
data() {
return { zh_CN };
},

BIN
src/assets/arrow.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 350 B

BIN
src/assets/build.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 871 KiB

BIN
src/assets/bullhorn.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 612 B

BIN
src/assets/code.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/enterprise-banner.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/assets/gywm01.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
src/assets/gywm02.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/hzhb01.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 596 KiB

BIN
src/assets/hzhb02.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1008 B

BIN
src/assets/hzhb03.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/hzhb04.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 869 B

BIN
src/assets/image.jpeg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

BIN
src/assets/image.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/join-us.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

BIN
src/assets/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/logo_bottom.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

BIN
src/assets/new01.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/new02.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/assets/round.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/settleIn.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
src/assets/solicitation.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

BIN
src/assets/t-top.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/zckj.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 118 KiB

BIN
src/assets/zckj01.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/矩形 133.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 B

363
src/common/dateRangUtil.js

@ -0,0 +1,363 @@
/**
* 日期范围工具类
*/
var dateRangeUtil = (function() {
/***
* 获得当前时间
*/
this.getCurrentDate = function() {
return new Date();
};
/***
* 获得本周起止时间
*/
this.getCurrentWeek = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//返回date是一周中的某一天
var week = currentDate.getDay();
//返回date是一个月中的某一天
var month = currentDate.getDate();
//一天的毫秒数
var millisecond = 1000 * 60 * 60 * 24;
//减去的天数
var minusDay = week != 0 ? week - 1 : 6;
//alert(minusDay);
//本周 周一
var monday = new Date(currentDate.getTime() - minusDay * millisecond);
//本周 周日
var sunday = new Date(monday.getTime() + 6 * millisecond);
//添加本周时间
startStop.push(monday.format('yyyy-MM-dd')); //本周起始时间
//添加本周最后一天时间
startStop.push(sunday.format('yyyy-MM-dd')); //本周终止时间
//返回
return startStop;
};
/***
* 获得本月的起止时间
*/
this.getCurrentMonth = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//获得当前月份0-11
var currentMonth = currentDate.getMonth();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
//求出本月第一天
var firstDay = new Date(currentYear, currentMonth, 1);
//当为12月的时候年份需要加1
//月份需要更新为0 也就是下一年的第一个月
if (currentMonth == 11) {
currentYear++;
currentMonth = 0; //就为
} else {
//否则只是月份增加,以便求的下一月的第一天
currentMonth++;
}
//一天的毫秒数
var millisecond = 1000 * 60 * 60 * 24;
//下月的第一天
var nextMonthDayOne = new Date(currentYear, currentMonth, 1);
//求出上月的最后一天
var lastDay = new Date(nextMonthDayOne.getTime() - millisecond);
//添加至数组中返回
startStop.push(firstDay.format('yyyy-MM-dd'));
startStop.push(lastDay.format('yyyy-MM-dd'));
//返回
return startStop;
};
/**
* 得到本季度开始的月份
* @param month 需要计算的月份
***/
this.getQuarterSeasonStartMonth = function(month) {
var quarterMonthStart = 0;
var spring = 0; //春
var summer = 3; //夏
var fall = 6; //秋
var winter = 9; //冬
//月份从0-11
if (month < 3) {
return spring;
}
if (month < 6) {
return summer;
}
if (month < 9) {
return fall;
}
return winter;
};
/**
* 获得该月的天数
* @param year年份
* @param month月份
* */
this.getMonthDays = function(year, month) {
//本月第一天 1-31
var relativeDate = new Date(year, month, 1);
//获得当前月份0-11
var relativeMonth = relativeDate.getMonth();
//获得当前年份4位年
var relativeYear = relativeDate.getFullYear();
//当为12月的时候年份需要加1
//月份需要更新为0 也就是下一年的第一个月
if (relativeMonth == 11) {
relativeYear++;
relativeMonth = 0;
} else {
//否则只是月份增加,以便求的下一月的第一天
relativeMonth++;
}
//一天的毫秒数
var millisecond = 1000 * 60 * 60 * 24;
//下月的第一天
var nextMonthDayOne = new Date(relativeYear, relativeMonth, 1);
//返回得到上月的最后一天,也就是本月总天数
return new Date(nextMonthDayOne.getTime() - millisecond).getDate();
};
/**
* 获得本季度的起止日期
*/
this.getCurrentSeason = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//获得当前月份0-11
var currentMonth = currentDate.getMonth();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
//获得本季度开始月份
var quarterSeasonStartMonth = this.getQuarterSeasonStartMonth(currentMonth);
//获得本季度结束月份
var quarterSeasonEndMonth = quarterSeasonStartMonth + 2;
//获得本季度开始的日期
var quarterSeasonStartDate = new Date(currentYear, quarterSeasonStartMonth, 1);
//获得本季度结束的日期
var quarterSeasonEndDate = new Date(currentYear, quarterSeasonEndMonth, this.getMonthDays(currentYear, quarterSeasonEndMonth));
//加入数组返回
startStop.push(quarterSeasonStartDate.format('yyyy-MM-dd'));
startStop.push(quarterSeasonEndDate.format('yyyy-MM-dd'));
//返回
return startStop;
};
/***
* 得到本年的起止日期
*
*/
this.getCurrentYear = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
//本年第一天
var currentYearFirstDate = new Date(currentYear, 0, 1);
//本年最后一天
var currentYearLastDate = new Date(currentYear, 11, 31);
//添加至数组
startStop.push(currentYearFirstDate.format('yyyy-MM-dd'));
startStop.push(currentYearLastDate.format('yyyy-MM-dd'));
//返回
return startStop;
};
/**
* 返回上一个月的第一天Date类型
* @param year
* @param month
**/
this.getPriorMonthFirstDay = function(year, month) {
//年份为0代表,是本年的第一月,所以不能减
if (month == 0) {
month = 11; //月份为上年的最后月份
year--; //年份减1
return new Date(year, month, 1);
}
//否则,只减去月份
month--;
return new Date(year, month, 1);
};
/**
* 获得上一月的起止日期
* ***/
this.getPreviousMonth = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//获得当前月份0-11
var currentMonth = currentDate.getMonth();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
//获得上一个月的第一天
var priorMonthFirstDay = this.getPriorMonthFirstDay(currentYear, currentMonth);
//获得上一月的最后一天
var priorMonthLastDay = new Date(
priorMonthFirstDay.getFullYear(),
priorMonthFirstDay.getMonth(),
this.getMonthDays(priorMonthFirstDay.getFullYear(), priorMonthFirstDay.getMonth()),
);
//添加至数组
startStop.push(priorMonthFirstDay.format('yyyy-MM-dd'));
startStop.push(priorMonthLastDay.format('yyyy-MM-dd'));
//返回
return startStop;
};
/**
* 获得上一周的起止日期
* **/
this.getPreviousWeek = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//返回date是一周中的某一天
var week = currentDate.getDay();
//返回date是一个月中的某一天
var month = currentDate.getDate();
//一天的毫秒数
var millisecond = 1000 * 60 * 60 * 24;
//减去的天数
var minusDay = week != 0 ? week - 1 : 6;
//获得当前周的第一天
var currentWeekDayOne = new Date(currentDate.getTime() - millisecond * minusDay);
//上周最后一天即本周开始的前一天
var priorWeekLastDay = new Date(currentWeekDayOne.getTime() - millisecond);
//上周的第一天
var priorWeekFirstDay = new Date(priorWeekLastDay.getTime() - millisecond * 6);
//添加至数组
startStop.push(priorWeekFirstDay.format('yyyy-MM-dd'));
startStop.push(priorWeekLastDay.format('yyyy-MM-dd'));
return startStop;
};
/**
* 得到上季度的起始日期
* year 这个年应该是运算后得到的当前本季度的年份
* month 这个应该是运算后得到的当前季度的开始月份
* */
this.getPriorSeasonFirstDay = function(year, month) {
var quarterMonthStart = 0;
var spring = 0; //春
var summer = 3; //夏
var fall = 6; //秋
var winter = 9; //冬
//月份从0-11
switch (
month //季度的其实月份
) {
case spring:
//如果是第一季度则应该到去年的冬季
year--;
month = winter;
break;
case summer:
month = spring;
break;
case fall:
month = summer;
break;
case winter:
month = fall;
break;
}
return new Date(year, month, 1);
};
/**
* 得到上季度的起止日期
* **/
this.getPreviousSeason = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//获得当前月份0-11
var currentMonth = currentDate.getMonth();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
//上季度的第一天
var priorSeasonFirstDay = this.getPriorSeasonFirstDay(currentYear, currentMonth);
//上季度的最后一天
var priorSeasonLastDay = new Date(
priorSeasonFirstDay.getFullYear(),
priorSeasonFirstDay.getMonth() + 2,
this.getMonthDays(priorSeasonFirstDay.getFullYear(), priorSeasonFirstDay.getMonth() + 2),
);
//添加至数组
startStop.push(priorSeasonFirstDay.format('yyyy-MM-dd'));
startStop.push(priorSeasonLastDay.format('yyyy-MM-dd'));
return startStop;
};
/**
* 得到去年的起止日期
* **/
this.getPreviousYear = function() {
//起止日期数组
var startStop = new Array();
//获取当前时间
var currentDate = this.getCurrentDate();
//获得当前年份4位年
var currentYear = currentDate.getFullYear();
currentYear--;
var priorYearFirstDay = new Date(currentYear, 0, 1);
var priorYearLastDay = new Date(currentYear, 11, 1);
//添加至数组
startStop.push(priorYearFirstDay.format('yyyy-MM-dd'));
startStop.push(priorYearLastDay.format('yyyy-MM-dd'));
return startStop;
};
return this;
})();
Date.prototype.format = function(fmt) {
var o = {
'M+': this.getMonth() + 1, //月份
'd+': this.getDate(), //日
'h+': this.getHours(), //小时
'm+': this.getMinutes(), //分
's+': this.getSeconds(), //秒
'q+': Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
}
}
return fmt;
};

60
src/components/HeadNav/HeadNav.vue

@ -1,19 +1,21 @@
<template>
<div class="d-flex justify-space-between align-center justify-center nav mb-4">
<!-- <a-icon type="left" class="back" /> -->
<div>考勤管理</div>
<div>
<a-button type="primary" icon="search" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
<a-button type="primary" size="small" icon="export" @click="clockExport"> 导出 </a-button>
<div class="d-flex justify-space-between pa-3">
<div class="d-flex align-center">
<!-- <a-icon type="left" class="mr-1" @click="back" /> -->
考勤管理
</div>
<div class="timer" v-if="show">
<div class="d-flex align-center">
<a-button type="primary" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
<a-button type="primary" size="small" @click="clockExport"> 导出 </a-button>
</div>
<div class="timer p-4" v-if="show">
<!-- 时间选择 -->
<TimePicker @changeTime="changeTime" />
<TimePicker />
<!-- 成员选择 -->
<MemberPicker @changeTime="changeTime" />
<div class="btns mt-3">
<a-button class="btn" size="small"> 取消 </a-button>
<a-button class="btn" type="primary" size="small"> 确认 </a-button>
<MemberPicker />
<div class="mt-5 flex justify-center">
<a-button size="small" class="mr-10" @click="show = false"> 取消 </a-button>
<a-button type="primary" size="small" @click="searchParam"> 确认 </a-button>
</div>
</div>
</div>
@ -56,45 +58,39 @@ export default {
throw error || '导出失败';
}
},
changeTime() {
this.$refs.mychild.setParams();
searchParam() {
this.$emit('searchParam');
this.show = false;
},
openSearch() {
this.show = !this.show;
},
// back() {
// window.location.href = document.referrer;
// window.history.back(-1);
// },
},
};
</script>
<style lang="less" scoped>
.nav {
position: relative;
// border-bottom: 1px solid #ccc;
}
.back {
position: absolute;
left: 0;
}
.search {
border: none;
}
.timer {
position: absolute;
width: 380px;
height: 150px;
// border: 1px solid black;
top: 50px;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
top: 49px;
left: 0;
background-color: #fff;
color: black;
box-shadow: 0px 0px 5px #ccc;
z-index: 1;
padding: 26px 24px 24px 24px;
}
.btn {
margin-left: 80px;
}
.export {
position: absolute;
top: 0;

95
src/components/List/List.vue

@ -20,7 +20,14 @@
<div v-else>
<div v-if="record.isMine">
<span v-if="record.morningStatus" class="baseColor font-bold">
<span v-if="record.morningStatus === 1" class="font-bold daka">
{{ $moment(record.morning - 0).format('HH:mm') }}
<div class="dian"></div>
</span>
<span v-else-if="record.morningStatus === 2" class="line-through text-red-500 font-bold">
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
<span v-else-if="record.morningStatus === 3" class="text-blue-500 font-bold">
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
<a-button
@ -45,16 +52,17 @@
@cancel="changeStatus(record.id, 0, 'morning')"
>
<a-icon slot="icon" type="" />
<a-button slot="title" size="small">审核</a-button>
<a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)"
>驳回</a-button
>
<a-button slot="title" size="small" @click="rejectStatus(record.id, 2, 'morning', record.morning)">确认</a-button>
<a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'morning', record.morning)">
驳回
</a-button>
<span
class="font-bold daka"
:class="record.morningStatus === 2 ? 'line-through red--text' : 'green--text'"
:class="record.morningStatus === 2 ? 'line-through text-red-500' : 'text-green-500'"
@click="changeVisible(record.morningStatus, 'morningVisible')"
>
<div class="dian"></div>
<div class="dian animate-ping" v-if="record.morningStatus === 1"></div>
<div class="dian" v-if="record.morningStatus === 1"></div>
{{ $moment(record.morning - 0).format('HH:mm') }}
</span>
</a-popconfirm>
@ -82,7 +90,14 @@
<div v-else>
<div v-if="record.isMine">
<span v-if="record.nightStatus" class="baseColor font-bold">
<span v-if="record.nightStatus === 1" class="font-bold daka">
{{ $moment(record.night - 0).format('HH:mm') }}
<div class="dian"></div>
</span>
<span v-else-if="record.nightStatus === 2" class="line-through text-red-500 font-bold">
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
<span v-else-if="record.nightStatus === 3" class="text-blue-500 font-bold">
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
<a-button
@ -107,16 +122,17 @@
@cancel="changeStatus(record.id, 0, 'night')"
>
<a-icon slot="icon" type="" />
<a-button slot="title" size="small">审核</a-button>
<a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)"
>驳回</a-button
>
<a-button slot="title" size="small" @click="rejectStatus(record.id, 2, 'night', record.night)">确认</a-button>
<a-button class="ml-2" slot="title" size="small" @click="rejectStatus(record.id, 1, 'night', record.night)">
驳回
</a-button>
<span
class="font-bold daka"
:class="record.nightStatus === 2 ? 'line-through red--text' : 'green--text'"
:class="record.nightStatus === 2 ? 'line-through text-red-500' : 'text-green-500'"
@click="changeVisible(record.nightStatus, 'visible')"
>
<div class="dian"></div>
<div class="dian animate-ping" v-if="record.nightStatus === 1"></div>
<div class="dian" v-if="record.nightStatus === 1"></div>
{{ $moment(record.night - 0).format('HH:mm') }}
</span>
</a-popconfirm>
@ -141,7 +157,12 @@
<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
v-else
:default-value="record.lastCheckerId ? record.lastCheckerId : record.checkerId ? 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>
@ -150,6 +171,10 @@
</template>
</a-table>
</div>
<div class="text-gray-400 text-xs m-3 flex flex-col justify-start">
<div class="flex align-center mb-2"><a-icon type="exclamation-circle" class="mr-1" />静态小红点审核人未审核你的打卡状态</div>
<div class="mb-10 ml-4">动态小红点某成员选择你为打卡人需要你审核</div>
</div>
</div>
<a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
</div>
@ -203,10 +228,10 @@ export default {
await this.setParams();
//
document.querySelector('#scrollTo').scrollIntoView({
behavior: 'smooth', //
block: 'start', //
});
// document.querySelector('#scrollTo').scrollIntoView({
// behavior: 'smooth', //
// block: 'start', //
// });
}
}, 300);
@ -224,8 +249,6 @@ export default {
async setParams() {
const { projectId, startTime, endTime, memberIdList } = this;
console.log('this.startTime: ', startTime, this.$moment(startTime - 0).format('YYYY-MM-DD HH:mm:ss'));
console.log('this.endTime: ', endTime, this.$moment(endTime - 0).format('YYYY-MM-DD HH:mm:ss'));
const params = { param: { projectId, memberIdList, startTime, endTime } };
await this.getClockQuery(params);
},
@ -353,7 +376,7 @@ export default {
this.visible = false;
}
const params = { param: { id, type, [timeType]: time, projectId: this.projectId } };
// await this.handleClockAudit(params);
await this.handleClockAudit(params);
},
//
@ -368,14 +391,14 @@ export default {
* @param {string} morning 早打卡时间
* @param {string} night 晚打卡时间
* @param {string} projectId 项目id
* @param {string} type 审批类型(0-修改,1-驳回)
* @param {string} type 审批类型(0-修改,1-驳回,2-通过)
*/
async handleClockAudit(params) {
try {
const res = await clockAudit(params);
const { code, msg } = res.data;
if (code === 200) {
this.$message.success(params.param.type === 0 ? '修改成功' : '驳回成功');
this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过');
this.showNightTime = false;
this.showMorningTime = false;
this.auditOptions = null;
@ -445,18 +468,7 @@ img {
background: #fcfcfc;
text-align: center;
}
</style>
<style>
.ant-popover-inner {
width: 250px;
}
.ant-popover-message {
position: absolute !important;
left: 2px;
top: 8px;
}
.daka {
position: relative;
}
@ -468,6 +480,17 @@ img {
border-radius: 50%;
top: 2px;
right: -10px;
box-shadow: 0 0 6px red;
}
</style>
<style>
.ant-popover-inner {
width: 256px;
}
.ant-popover-message {
position: absolute !important;
left: 2px;
top: 8px;
}
</style>

7
src/components/MemberPicker/MemberPicker.vue

@ -1,7 +1,7 @@
<template>
<div class="mt-3">
<!-- 多选 -->
<a-select mode="multiple" style="width: 100%" placeholder="请选择成员" @change="handleChange">
<a-select mode="multiple" style="width: 100%" placeholder="请选择成员" @change="handleChange" :default-value="memberIdList">
<a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId"> {{ member.name }} </a-select-option>
</a-select>
</div>
@ -15,16 +15,13 @@ export default {
return {};
},
computed: mapState('home', ['members']),
computed: mapState('home', ['members', 'memberIdList']),
methods: {
...mapMutations('home', ['setMemberIdList']),
handleChange(value) {
this.setMemberIdList(value);
setTimeout(() => {
this.$emit('changeTime');
}, 1000);
},
},
};

91
src/components/TimePicker/TimePicker.vue

@ -15,6 +15,9 @@
<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>
<a-button class="ml-3" size="small" type="primary" ghost @click="setMonday('startValue', 'startOpen')">本周</a-button>
<a-button class="ml-3" size="small" type="primary" ghost @click="setMonthOne('startValue', 'startOpen')">本月</a-button>
<a-button size="small" type="primary" ghost @click="setLastMonthOne('startValue', 'startOpen')">上月</a-button>
</template>
</a-date-picker>
<a-date-picker
@ -31,13 +34,16 @@
<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>
<a-button class="ml-3" size="small" type="primary" ghost @click="setSunday('endValue', 'endOpen')">本周</a-button>
<a-button class="ml-3" size="small" type="primary" ghost @click="setMonthEnd('endValue', 'endOpen')">本月</a-button>
<a-button size="small" type="primary" ghost @click="setLastMonthEnd('endValue', 'endOpen')">上月</a-button>
</template>
</a-date-picker>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
import { mapState, mapMutations } from 'vuex';
export default {
data() {
@ -49,6 +55,9 @@ export default {
endOpen: false,
};
},
computed: mapState('home', ['startTime', 'endTime']),
watch: {
startValue(val) {
if (val) {
@ -57,9 +66,6 @@ export default {
} else {
const time = this.$moment(Date.now()).format('YYYY-MM-DD');
this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
if (!this.endValue) {
this.$emit('changeTime');
}
}
},
endValue(val) {
@ -75,11 +81,16 @@ export default {
const time = this.$moment(Date.now()).format('YYYY-MM-DD');
this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
}
this.$emit('changeTime');
},
},
mounted() {
this.$nextTick(() => {
this.startValue = this.startTime ? this.$moment(this.startTime - 0).format('YYYY-MM-DD') : null;
this.endValue = this.endTime ? this.$moment(this.endTime - 0).format('YYYY-MM-DD') : null;
});
},
methods: {
...mapMutations('home', ['setStartTime', 'setEndTime']),
@ -101,6 +112,74 @@ export default {
}
},
//
setMonday(value, open) {
var date = this.$moment(this.$moment().format('YYYY-MM-DD'));
var dow = date.day();
var monday1 = date.subtract(dow - 1, 'days').format('YYYY-MM-DD'); //
this[value] = monday1;
this[open] = false;
if (open === 'startOpen' && !this.startOpen) {
this.endOpen = true;
}
},
//
setSunday(value, open) {
var date = this.$moment(this.$moment().format('YYYY-MM-DD'));
var dow = date.day();
var monday1 = date.subtract(dow - 7, 'days').format('YYYY-MM-DD'); //
this[value] = monday1;
this[open] = false;
},
// 1
setMonthOne(value, open) {
const m = this.$moment()
.startOf('month')
.format('YYYY-MM-DD');
this[value] = m;
this[open] = false;
if (open === 'startOpen' && !this.startOpen) {
this.endOpen = true;
}
},
//
setMonthEnd(value, open) {
const end =
this.$moment()
.endOf('month')
.format('YYYY-MM-DD') + ' 23:59:59';
this[value] = end;
this[open] = false;
},
// 1
setLastMonthOne(value, open) {
const t = this.$moment().format('YYYY-MM-DD');
const afterM = this.$moment(t, 'YYYY-MM-DD')
.subtract(1, 'months')
.startOf('month')
.format('YYYY-MM-DD');
this[value] = afterM;
this[open] = false;
if (open === 'startOpen' && !this.startOpen) {
this.endOpen = true;
}
},
//
setLastMonthEnd(value, open) {
const t = this.$moment().format('YYYY-MM-DD');
const afterM = this.$moment(t, 'YYYY-MM-DD')
.subtract(1, 'months')
.endOf('month')
.format('YYYY-MM-DD');
this[value] = afterM;
this[open] = false;
},
disabledStartDate(startValue) {
const endValue = this.endValue;
if (!startValue || !endValue) {

4
src/store/modules/home/state.js

@ -9,8 +9,8 @@ const state = {
projectId: '',
clockInfos: [], // 考勤信息
members: [], // 所有成员
startTime: '',
endTime: '',
startTime: null,
endTime: null,
memberIdList: [],
};

37
src/views/FirstPage/FirstPage.vue

@ -1,27 +1,24 @@
<template>
<div>
<head-nav class="nav bg-white w-full" @searchParam="searchParam" />
<!-- 列表 -->
<List ref="mychild" />
<List style="margin-top: 49px" ref="mychild" />
</div>
</template>
<script>
// import TimePicker from '@/components/TimePicker/TimePicker.vue';
// import MemberPicker from '@/components/MemberPicker/MemberPicker.vue';
import List from '@/components/List/List.vue';
import HeadNav from '@/components/HeadNav/HeadNav.vue';
export default {
components: { TimePicker, MemberPicker, List },
components: { List, HeadNav },
data() {
return {};
},
methods: {
handleChange(value) {
console.log(`selected ${value}`);
},
changeTime() {
searchParam() {
this.$refs.mychild.setParams();
},
},
@ -29,26 +26,10 @@ export default {
</script>
<style lang="less" scoped>
/* .timer {
.nav {
position: fixed;
width: 380px;
height: 150px;
// border: 1px solid black;
margin-left: 50%;
transform: translate(-50%);
background-color: #fff;
color: black;
box-shadow: 0px 0px 5px #ccc;
z-index: 1;
padding: 26px 24px 24px 24px;
} */
.btn {
margin-left: 80px;
}
.export {
position: absolute;
top: 0;
right: 0;
z-index: 2;
z-index: 9;
border-bottom: 1px solid #e8e8e8;
}
</style>

Loading…
Cancel
Save