123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521 |
- <template>
- <div>
- <!-- 头部添加查询排班=表 -->
- <div class="header">
- <div class="header-left">
- <div
- class="title"
- :class="activeClass == index ? 'titleActive' : ''"
- v-for="(item, index) in titleList"
- :key="index"
- @click="checkTitle(index)"
- >
- {{ item }}月排班表
- <i class="el-icon-close" @click="delTitle" v-if="index == 1"></i>
- </div>
- <div class="add" @click="addList"><i class="el-icon-plus"></i></div>
- </div>
- <div class="header-right">
- <div class="selectTime">
- <el-date-picker
- popper-class="mydatestyle"
- @change="selectTime"
- v-model="dateList"
- type="month"
- placeholder="查询时间"
- :editable="false"
- :clearable="false"
- :picker-options="pickerOptions"
- >
- <!-- :picker-options="pickerOptions" -->
- </el-date-picker>
- </div>
- <div @click="search" class="search">查询</div>
- </div>
- </div>
- <!-- 排班表 -->
- <div class="list">
- <el-table
- :data="tableData"
- @cell-click="handle"
- :cell-class-name="tableCellClassName"
- :row-class-name="overTime"
- height="550"
- >
- <el-table-column prop="date" label="日期" align="center" width="155">
- </el-table-column>
- <el-table-column
- v-for="(item, index) in nameList"
- :prop="'name' + index"
- :label="item.realname"
- align="center"
- width="155"
- :key="index"
- >
- <template slot-scope="scope">
- <el-dropdown
- @command="selectType"
- :disabled="disabled"
- trigger="click"
- >
- <div
- class="amend"
- :class="
- tableData[scope.row.index]['name' + index] == '早班'
- ? 'color1'
- : tableData[scope.row.index]['name' + index] == '中班'
- ? 'color2'
- : tableData[scope.row.index]['name' + index] == '晚班'
- ? 'color3'
- : tableData[scope.row.index]['name' + index] == '休息'
- ? 'color4'
- : 'color5'
- "
- >
- {{ tableData[scope.row.index]["name" + index] }}
- </div>
- <span v-if="false">{{ scope.row }}</span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item class="color1" command="早班"
- >早班</el-dropdown-item
- >
- <el-dropdown-item class="color2" command="中班"
- >中班</el-dropdown-item
- >
- <el-dropdown-item class="color3" command="晚班"
- >晚班</el-dropdown-item
- >
- <el-dropdown-item class="color4" command="休息"
- >休息</el-dropdown-item
- >
- <el-dropdown-item class="color5" command="离职"
- >离职</el-dropdown-item
- >
- </el-dropdown-menu>
- </el-dropdown>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </template>
- <script>
- import api from "../../../server/home";
- export default {
- data() {
- return {
- level: "", //10店长可排班
- dateList: "", //选择日期的绑定
- tableData: [], //值班列表
- nameList: [], //员工列表
- row: "", //存入数据的行
- column: "", //存入数据的列
- titleList: [], //月份数组(最多两个月份)
- month: "", //今月
- year: "", //今年
- day: "", //今日
- activeClass: 0, //月份活动类名
- one_selectMonth: "",
- one_selectYear: "",
- selectMonth: "", //选择的月份
- selectYear: "", //选择的年份
- pickerOptions: {
- disabledDate: (time) => {
- const sixMonth = new Date().setMonth(new Date().getMonth() - 5);
- const maxValue = new Date().setMonth(new Date().getMonth() + 1);
- return time.getTime() > maxValue || time.getTime() < sixMonth;
- },
- }, // 筛选选择日期只能查看前6个月 后一个月
- disabled: false, // 之前的日期不可分配
- addYear: "",
- typeList: ["早班", "中班", "晚班", "休息", "离职"], //1是早班 2是中班 3是晚班 9是休息 10离职
- };
- },
- methods: {
- // 将本月过去的时间添加背景色
- overTime({ row, rowIndex }) {
- if (row.date.split("日")[0].split("月")[0] != this.month) {
- return;
- }
- let one_selectTime =
- this.year +
- "-" +
- row.date.split("日")[0].split("月")[0] +
- "-" +
- row.date.split("日")[0].split("月")[1];
- //现在的时间
- let one_nowTime = this.year + "-" + this.month + "-" + this.day;
- if (
- new Date(one_selectTime.replace(/-/g, "/")) <
- new Date(one_nowTime.replace(/-/g, "/"))
- ) {
- return "over-row";
- }
- },
- // 删除最后一个标题
- delTitle() {
- // 删除标题数组最后一个
- this.titleList.pop();
- // 自动切换到本月月份
- this.checkTitle(0);
- this.selectMonth = "";
- this.selectYear = "";
- this.addYear = "";
- },
- // 查询日期
- search() {
- // 没有选择日期,返回
- if (this.one_selectMonth == "" || this.one_selectMonth == this.month) {
- return;
- }
- this.activeClass = 1;
- this.selectMonth = this.one_selectMonth;
- this.selectYear = this.one_selectYear;
- // 设置月份数组最后一个为当前选择月份
- this.titleList[1] = this.selectMonth;
- // 获取数据月份
- this.currentMonthDays(this.selectMonth);
- this.getWorkList(this.selectMonth, this.selectYear);
- },
- // 选择日期
- selectTime(e) {
- // 获取月份
- this.one_selectMonth = e.getMonth() + 1;
- this.one_selectYear = e.getFullYear();
- },
- // 获取本月所有的日期
- currentMonthDays(month1) {
- let now = new Date();
- // 这个月的月份
- this.month = now.getMonth() + 1;
- this.year = now.getFullYear();
- this.day = now.getDate();
- const daysOfMonth = [];
- let year = month1 == 1 ? now.getFullYear() + 1 : now.getFullYear();
- let month = month1 || now.getMonth() + 1;
- if (!month1) {
- this.titleList.push(month);
- }
- month = parseInt(month, 10);
- const lastDayOfMonth = new Date(year, month, 0).getDate();
- var weekDay = [
- "(周天)",
- "(周一)",
- "(周二)",
- "(周三)",
- "(周四)",
- "(周五)",
- "(周六)",
- ];
- for (let i = 1; i <= lastDayOfMonth; i++) {
- let arr = year + "/" + month + "/" + i;
- var myDate = new Date(Date.parse(arr));
- let week = weekDay[myDate.getDay()];
- daysOfMonth.push(month + "月" + i + "日" + " " + week);
- }
- let arr = [];
- daysOfMonth.map((item) => {
- arr.push({ date: item });
- });
- this.tableData = arr;
- },
- // 选择上班类型
- selectType(e) {
- this.$set(this.tableData[this.row], [`name${this.column - 1}`], e);
- // 选择的类型 (1是早班 2是中班 3是晚班 9是休息 10离职)
- let type = "";
- e == "早班"
- ? (type = 1)
- : e == "中班"
- ? (type = 2)
- : e == "晚班"
- ? (type = 3)
- : e == "休息"
- ? (type = 4)
- : (type = 5);
- let year = this.year;
- // 判断是否选择的是明年的1月
- if (this.selectYear > this.year && this.activeClass != 0) {
- year = this.year + 1;
- } else {
- year = this.year;
- }
- // 判断添加下一个月是1月
- if (this.addYear && this.titleList[1] == 1) {
- year = this.addYear;
- }
- // 选择的时间
- let day =
- year +
- "-" +
- this.tableData[this.row].date.split("日")[0].split("月")[0] +
- "-" +
- this.tableData[this.row].date.split("日")[0].split("月")[1];
- let user_id = this.nameList[this.column - 1].id;
- let params = {
- day,
- type,
- user_id,
- };
- // 添加排班
- api.selectScheduling(params).then((res) => {
- if (res.code == 200) {
- }
- });
- },
- tableCellClassName({ row, column, rowIndex, columnIndex }) {
- //注意这里是解构
- //利用单元格的 className 的回调方法,给行列索引赋值
- row.index = rowIndex;
- column.index = columnIndex;
- },
- // 获取填写日期的行列
- handle(row, column, event, cell) {
- this.row = row.index; //行
- this.column = column.index; //列
- let one_year = this.selectYear == "" ? this.year : this.selectYear;
- if (this.activeClass == 0) {
- one_year = this.year;
- }
- if (this.month + 1 == this.titleList[1]) {
- one_year = this.year;
- } else if (this.titleList[this.activeClass] == 1) {
- one_year = this.addYear || this.selectYear;
- } else {
- one_year = this.selectYear || this.year;
- }
- //选择的时间
- let one_selectTime =
- one_year +
- "-" +
- this.tableData[this.row].date.split("日")[0].split("月")[0] +
- "-" +
- this.tableData[this.row].date.split("日")[0].split("月")[1];
- //现在的时间
- let one_nowTime = this.year + "-" + this.month + "-" + this.day;
- // 判断是否是今天以前的时间 是否可选择
- new Date(one_selectTime.replace(/-/g, "/")) <
- new Date(one_nowTime.replace(/-/g, "/"))
- ? (this.disabled = true)
- : (this.disabled = false);
- // 如果是店员不予操作
- if (this.level != 10) {
- this.disabled = true;
- }
- },
- // 添加表单
- addList() {
- // 最多可有两个月
- if (this.titleList.length >= 2) {
- return;
- }
- // 判断是否是最后一个月是的话添加表单就为1月份
- if (this.month == 12) {
- this.currentMonthDays(1);
- this.titleList.push(1);
- this.addYear = this.year + 1;
- } else {
- this.currentMonthDays(this.month + 1);
- this.titleList.push(this.month + 1);
- }
- this.activeClass = this.activeClass + 1;
- this.getWorkList(this.month + 1, this.addYear || this.year);
- },
- // 切换表单
- checkTitle(index) {
- this.activeClass = index;
- // 获取切换月的月份
- this.month = this.titleList[index];
- this.currentMonthDays(this.month);
- this.getWorkList(
- this.titleList[this.activeClass],
- this.activeClass == 0
- ? this.year
- : this.addYear == ""
- ? this.selectYear || this.year
- : this.addYear
- );
- },
- // 获取员工列表
- getStaffList() {
- api.getStaffList().then((res) => {
- if (res.code == 200) {
- this.nameList = res.data;
- }
- });
- },
- // 获取排班列表
- getWorkList(month, year) {
- let month1 = year + "-" + month;
- let params = {
- month: month1,
- };
- api.getWorkList(params).then((res) => {
- if (res.code == 200) {
- // 获取全部排班
- let arr = [];
- res.data.map((item) => {
- arr.push(item.type);
- });
- arr.map((item, index) => {
- let newArr = this.tableData[index];
- item.map((item1, index1) => {
- this.$set(newArr, `name${index1}`, this.typeList[item1[0] - 1]);
- });
- });
- }
- });
- },
- },
- created() {
- // 获取店长员工等级
- this.level = localStorage.getItem("level");
- // 获取日期列表
- this.currentMonthDays();
- // 获取员工列表
- this.getStaffList();
- // 获取排班列表
- this.getWorkList(this.month, this.year);
- },
- };
- </script>
- <style lang='less' scoped>
- .header {
- width: 857px;
- height: 70px;
- background: #ffffff;
- border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .header-left {
- display: flex;
- align-items: center;
- .title {
- width: 217px;
- height: 70px;
- // background: #fa7d22;
- border-radius: 8px;
- // color: #ffffff;
- text-align: center;
- line-height: 70px;
- font-size: 24px;
- font-weight: 400;
- position: relative;
- .el-icon-close {
- color: #ffffff;
- font-size: 24px;
- position: absolute;
- top: 3px;
- right: 3px;
- padding: 0;
- }
- }
- .titleActive {
- background: #fa7d22;
- color: #ffffff;
- }
- .add {
- width: 60px;
- height: 60px;
- border-radius: 8px;
- border: 1px solid #e6e6e6;
- margin-left: 5px;
- text-align: center;
- line-height: 60px;
- /deep/i {
- font-size: 19px;
- color: #e6e6e6;
- }
- }
- }
- .header-right {
- display: flex;
- align-items: center;
- .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--month {
- width: 132px;
- height: 32px;
- background: #ffffff;
- border-radius: 2px;
- }
- .search {
- width: 80px;
- height: 30px;
- background: #fa7d22;
- border-radius: 20px;
- line-height: 30px;
- text-align: center;
- color: #ffffff;
- margin-right: 20px;
- margin-left: 10px;
- }
- }
- }
- .list {
- height: 420px;
- width: 857px;
- background: #ffffff;
- border-radius: 8px;
- margin-top: 18px;
- padding: 0 11px;
- overflow-x: scroll;
- overflow-y: scroll;
- .el-dropdown {
- width: 100%;
- height: 100%;
- }
- .amend {
- width: 100%;
- height: 100%;
- }
- }
- /deep/ .el-table tbody tr:hover > td {
- background: #fff !important;
- }
- /deep/tr.el-table__row > * {
- border-left: 1px solid #ebeef5;
- border-right: 1px solid #ebeef5;
- height: 41px;
- width: 115px;
- }
- /deep/.cell {
- height: 100%;
- width: 100%;
- }
- .color1 {
- color: #19d1ca !important;
- }
- .color2 {
- color: #ffafaf !important;
- }
- .color3 {
- color: #4d5e8e !important ;
- }
- .color4 {
- color: #fa7d22 !important;
- }
- .color5 {
- color: #999999 !important;
- }
- .el-month-table td.current:not(.disabled) .cell {
- color: #4d5e8e;
- }
- /deep/ .el-month-table td.today .cell {
- color: #4d5e8e;
- font-size: 40px;
- }
- /deep/.el-picker-panel__body {
- background-color: red;
- }
- /deep/.el-table {
- .el-table__body-wrapper {
- height: calc(100% - 48px) !important; // 表格高度减去表头的高度
- }
- }
- /deep/.el-table .over-row {
- background: #f7f8fa;
- pointer-events: none;
- }
- </style>
|