Skip to content

O
office-web
Commit ef157db0 by 无尘
Options

fix: 修改排班

parent 3ae8cbb8
Showing with 138 additions and 72 deletions
src/components/app/dailyAttendance/people-day-class.vue
...@@ -4,61 +4,53 @@ ...@@ -4,61 +4,53 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-11-07 17:30:04 * @Date: 2019-11-07 17:30:04
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2019-11-07 19:45:41 * @LastEditTime: 2019-11-07 22:26:45
--> -->
<!-- <!--
<people-day-class></people-day-class> <people-day-class :classData="classData" :cycleData="cycleData"></people-day-class>
import peopleDayClass from '@/components/app/dailyAttendance/people-day-class.vue' import peopleDayClass from '@/components/app/dailyAttendance/people-day-class.vue'
--> -->
<template> <template>
<div class="day-tabs"> <div class="day-tabs">
<div role="tablist" class="ant-tabs-bar" tabindex="0"> <div class="tablist">
<div class="right-top-wrap_left flex flex-pack-center"> <div class="right-content-top border-box">
<ul class="flex flex-row flex-pack-center "> <div class="right-top-wrap_left flex flex-pack-center">
<div class="el-tabs__active-bar is-top" :style="translate"></div> <ul class="flex flex-row flex-pack-center ">
<li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 1 ? 'active-li' : '']" @click="chooseTab($event, '1')"><span class="flex flex-align-center flex-pack-center right-top-title">解决方案</span></li> <div class="el-tabs__active-bar is-top" :style="translate"></div>
<li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 2 ? 'active-li' : '']" @click="chooseTab($event, '2')"><span class="flex flex-align-center flex-pack-center right-top-title">开发者接入</span></li> <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 1 ? 'active-li' : '']" @click="chooseTab($event, '1')"><span class="flex flex-align-center flex-pack-center right-top-title">按天排班</span></li>
</ul> <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 2 ? 'active-li' : '']" @click="chooseTab($event, '2')"><span class="flex flex-align-center flex-pack-center right-top-title">按周期排班</span></li>
</ul>
</div>
</div> </div>
</div> </div>
<el-tabs v-model="activeName" @tab-click="handleClick"> <ul v-if="activeTab == 1">
<el-tab-pane label="按天排班" name="first"> <li>
<div class="day-item-title" title="修改该员工当天班次">修改该员工当天班次</div>
<ul> <ul>
<li> <template v-for="(item, index) in classData">
<div class="day-item-title" title="修改该员工当天班次">修改该员工当天班次</div> <li class="day-class-item p-lr-20" :key="index + 'class'" @click.stop="daySet(item)">
<ul> <p class="class-item day-tag-red">{{ item.serial }}</p>
<template v-for="(item, index) in classData"> </li>
<li :key="index + 'class'"> </template>
<p class="class-item day-tag-red">{{ item.serial }}</p> <template v-for="(item, index) in defaultData">
</li> <li class="day-class-item p-lr-20" :key="index + 'defaultClass'" @click.stop="daySet(item)">
</template> <p :class="['class-item', item.id == '0' ? 'class-rest' : 'class-clear']">{{ item.serial }}</p>
<li class="day-class-item p-lr-20"> </li>
<p class="class-item day-tag-red">默认班次</p> </template>
</li>
<li class="day-class-item p-lr-20">
<p class="class-item class-rest">休息</p>
</li>
<li class="day-class-item p-lr-20">
<p class="class-item class-clear">清空</p>
</li>
</ul>
</li>
</ul> </ul>
</el-tab-pane> </li>
<el-tab-pane label="按周期排班" name="second"> </ul>
<ul v-if="activeTab == 2">
<li>
<div class="day-item-title" title="从该天开始周期排班至月底">从该天开始周期排班至月底</div>
<ul> <ul>
<li> <li class="day-class-item p-lr-20">
<div class="day-item-title" title="从该天开始周期排班至月底">从该天开始周期排班至月底</div> <p class="class-item day-tag-blue">{{ cycleData[0].cycleName }} {{ cycleData[0].itemList.map(item => item.className).join('-') }}</p>
<ul>
<li class="day-class-item p-lr-20">
<p class="class-item day-tag-red">默认班次</p>
</li>
</ul>
</li> </li>
</ul> </ul>
</el-tab-pane> </li>
</el-tabs> </ul>
</div> </div>
</template> </template>
<script> <script>
...@@ -70,6 +62,24 @@ export default { ...@@ -70,6 +62,24 @@ export default {
default() { default() {
return []; return [];
} }
},
cycleData: {
type: [Array, Object],
default() {
return [];
}
},
itemSchedule: {
type: [Array, Object],
default() {
return [];
}
},
workDate: {
type: Number,
default() {
return new Date().getTime();
}
} }
}, },
data() { data() {
...@@ -77,8 +87,18 @@ export default { ...@@ -77,8 +87,18 @@ export default {
activeTab: '1', activeTab: '1',
translate: { translate: {
width: '56px', width: '56px',
transform: `translateX(0)` transform: `translateX(30px)`
} },
defaultData: [
{
id: '0',
serial: '休息'
},
{
id: '-2',
serial: '清空'
}
]
}; };
}, },
methods: { methods: {
...@@ -93,44 +113,76 @@ export default { ...@@ -93,44 +113,76 @@ export default {
width: e.target.offsetWidth + 'px', width: e.target.offsetWidth + 'px',
transform: `translateX(${e.target.offsetLeft}px)` transform: `translateX(${e.target.offsetLeft}px)`
}; };
},
/**
* 选择班次
*/
daySet(item) {
const that = this;
that.itemSchedule.push({
classes: {
id: item.id,
serial: item.serial
},
isRest: false,
workDate: that.workDate
});
} }
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.right-top-wrap_left { .tablist {
ul { margin-bottom: 16px;
position: relative; &:focus {
.el-tabs__active-bar { outline: none;
display: block; border: none;
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: #1890ff;
z-index: 1;
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none;
}
} }
li { }
margin-right: 40px; .right-content-top {
cursor: pointer; height: 40px;
.right-top-title { line-height: 40px;
font-size: 14px; border-bottom: 1px solid #ebeef5;
color: #606266; outline: none;
height: 100%; .right-top-wrap_left {
&:focus {
outline: none;
border: none;
} }
ul {
&.active-li { position: relative;
width: 100%;
.el-tabs__active-bar {
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: #1890ff;
z-index: 1;
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none;
}
}
li {
width: 50%;
cursor: pointer;
.right-top-title { .right-top-title {
color: #1890ff; font-size: 14px;
color: #606266;
height: 100%;
}
&.active-li {
.right-top-title {
color: #1890ff;
}
} }
} }
} }
} .right-top-wrap_right {
.right-top-wrap_right { padding: 9px 0;
padding: 9px 0; }
} }
.day-tabs { .day-tabs {
...@@ -163,6 +215,10 @@ export default { ...@@ -163,6 +215,10 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
border-radius: 0; border-radius: 0;
white-space: nowrap;
&:hover {
opacity: 0.7;
}
&.day-tag-blue { &.day-tag-blue {
background: #5e90ff; background: #5e90ff;
border-color: #5e90ff; border-color: #5e90ff;
......
src/views/enterpriseApp/dailyAttendance/workTimeManage.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2019-09-18 15:25:12 * @Date: 2019-09-18 15:25:12
* @LastEditors: 无尘 * @LastEditors: 无尘
* @LastEditTime: 2019-11-07 18:43:56 * @LastEditTime: 2019-11-07 21:09:33
--> -->
<template> <template>
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="day-work"> <div class="day-work">
<el-popover placement="bottom" width="231" trigger="click"> <el-popover placement="bottom" width="231" trigger="click">
<people-day-class></people-day-class> <!-- 当前员工当天排版设置 -->
<people-day-class :itemSchedule="scope.row" :workDate="item.timeStamp" :classData="classes" :cycleData="cycleData"></people-day-class>
<div class="tool-tip-body" slot="reference"> <div class="tool-tip-body" slot="reference">
<div class="day-work-cell schedule_del_class"> <div class="day-work-cell schedule_del_class">
<el-tooltip v-if="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp" class="item" effect="dark" :content="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].classes.serial : ''" placement="top-start"> <el-tooltip v-if="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp" class="item" effect="dark" :content="scope.row.schedules && scope.row.schedules[index] && scope.row.schedules[index].workDate == item.timeStamp ? scope.row.schedules[index].classes.serial : ''" placement="top-start">
...@@ -117,6 +118,15 @@ export default { ...@@ -117,6 +118,15 @@ export default {
currentPage: 1, currentPage: 1,
pageSize: 20, pageSize: 20,
total: 0, total: 0,
// 排班周期
cycleData: [
{
cycleName: '555555',
id: 287955018,
isValid: true,
itemList: [{ classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }, { classId: 468770499, className: '默认班次', isValid: true }]
}
],
// 班次 // 班次
classes: [ classes: [
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment