vue+element项⽬做员⼯排班表
ps：获取当前时间的常⽤格式
var today = new Date();
var strYear = FullYear();
var strDay = Date();
var strMonth = Month() + 1;
var strdate = Day();
var now=strYear+"-"+strMonth+"-"+strDay
console.log(now)
黄⾊标记是主要功能，设计之前要跟后端商量好接⼝设计，我这个是⼀条数据包含⼀个部门⾥⼀个员⼯⼀周的7个排班状态，算是简易版，⼀次添加⼀个员⼯⼀周状态，可以看添加功能⾥⾯字段，传过去就只传周⼀就⾏了，展⽰也只需要发送周⼀的⽇期就⾏
tabletable<template>
<div class>
<el-breadcrumb>
<el-breadcrumb-item>⼈事管理</el-breadcrumb-item>
<el-breadcrumb-item>⼈员排班</el-breadcrumb-item>
</el-breadcrumb>
<!-- 列表 -->
<el-card class="box-card">
<div class="search">
<el-button type="info" @click="lastweek">上⼀周</el-button>
<el-button  type="primary" @click="dialogVisible = true" class="addbtn">新增排班</el-button>
<el-button type="info" @click="nextweek">下⼀周</el-button>
<div>
<span>{{nextMonday}}</span>
<span>星期⼀</span>
<span>~</span>
<span>{{lastsunday}}</span>
<span>星期天</span>
</div>
</div>
<!-- 信息 -->
<el-table :data="tableData" stripe border @selection-change="handleSelectionChange">
<!-- <el-table-column show-overflow-tooltip label="员⼯" prop="nurseName" align="center">
<template slot-scope="scope">{{w.nurse.nurseName}}</template>
</el-table-column>-->
<el-table-column
show-overflow-tooltip
:label="monday1"
prop="mondayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column
show-overflow-tooltip
:label="thursday1"
prop="thursdayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column
show-overflow-tooltip
:label="wednesday1"
prop="wednesdayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column
show-overflow-tooltip
:label="thuesday1"
prop="thuesdayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column
show-overflow-tooltip
:
label="friday1"
prop="fridayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column
show-overflow-tooltip
:label="saturday1"
prop="saturdayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column
show-overflow-tooltip
:label="sunday1"
prop="sundayStatus"
align="center"
width="175"
></el-table-column>
<el-table-column show-overflow-tooltip label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="w)">修改</el-button>
<el-button type="text" size="small" @click="w.id)">删除</el-button>          </template>
</el-table-column>
</el-table>
<!-- 分页功能 -->
<el-pagination
background
layout="total, prev, pager, next,jumper"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-size="queryInfo.pagesize"
:total="total"
></el-pagination>
</el-card>
<!-- 添加信息 -->
<el-dialog :title="title" :visible.sync="dialogVisible" width="55%" @close="dialogClosed">
<el-form label-width="120px" :model="form" :rules="formRules" ref="formRef">
<el-form-item label="排班起始⽇期" prop="schedulingDay">
<el-date-picker
v-model="this.dateFormat2"
value-format="yyyy-MM-dd 00:00:00"
type="date"
editable
disabled
></el-date-picker>
</el-form-item>
<el-form-item label="排班结束⽇期">
<el-date-picker
v-model="this.dateFormat8"
value-format="yyyy-MM-dd 00:00:00"
type="date"
editable
disabled
></el-date-picker>
</el-form-item>
<el-form-item label="员⼯" prop="staffId">
<el-select v-model="form.staffId" placeholder="员⼯">
<el-option v-for="item in workers" :key="item.id" :label="item.name" :value="item.id"></el-option>          </el-select>
</el-form-item>
<el-form-item label="星期⼀" prop="mondayStatus">
<el-input v-model="dayStatus" size="medium" placeholder="排班状态"></el-input>
</el-form-item>
<el-form-item label="星期⼆" prop="thursdayStatus">
<el-input v-model="form.thursdayStatus" size="medium" placeholder="排班状态"></el-input>
</el-form-item>
<el-form-item label="星期三" prop="wednesdayStatus">
<el-input v-model="form.wednesdayStatus" size="medium" placeholder="排班状态"></el-input>
</el-form-item>
<el-form-item label="星期四" prop="thuesdayStatus">
<el-input v-model="form.thuesdayStatus" size="medium" placeholder="排班状态"></el-input>        </el-form-item>
<el-form-item label="星期五" prop="fridayStatus">
<el-input v-model="form.fridayStatus" size="medium" placeholder="排班状态"></el-input>
</el-form-item>
<el-form-item label="星期六" prop="saturdayStatus">
<el-input v-model="form.saturdayStatus" size="medium" placeholder="排班状态"></el-input>        </el-form-item>
<el-form-item label="星期⽇" prop="sundayStatus">
<el-input v-model="form.sundayStatus" size="medium" placeholder="排班状态"></el-input>        </el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</span>
</el-dialog>
<!-- end -->
</div>
</template>
<script>
import rules from "@/defined/rules";
import request from "@/public/http";
export default {
data() {
return {
base: "",
monday: "",
today: "",
dateFormat2: "",
dateFormat8: "",
nextMonday: "",
lastsunday: "",
queryInfo: {
query: "",
pagenum: 1,
pagesize: 10
},
role: false,
homes: [],
workers: [],
total: 0,
tableData: [],
title: "新增",
dialogVisible: false,
form: {},
formRules: {
}
};
},
components: {},
created() {},
watch: {},
mounted() {
},
methods: {
lastweek() {
console.log(this.dateFormat2);
},
nextweek() {
console.log(this.dateFormat2);
},
getTime() {
var myDate = new Date();
var year = FullYear();
var month = Month() + 1;
var date = Date();
var str = Day();
console.log(str, 888);
if (str == 1) {
}
if (str == 2) {
}
if (str == 3) {
}
if (str == 4) {
}
if (str == 5) {
}
if (str == 6) {
}
if (str == 0) {
}
},
getBeforNday(date, n) {
var todays = Time();
var today = new Date();
var yesterday_milliseconds = Time() - n * 1000 * 60 * 60 * 24;      var yesterday = new Date();
yesterday.setTime(yesterday_milliseconds);
var strYear = FullYear();
var strDay = Date();
var strMonth = Month() + 1;
var strdate = Day();
if (strdate == 0) {
}
if (strMonth < 10) {
strMonth = "0" + strMonth;
}
let datastr = strYear + "年" + strMonth + "⽉" + strDay + "⽇";
let md = strMonth + "-" + strDay;
this.sunday = md;
this.lastsunday = datastr;
this.dateFormat1 = strYear + "-" + strMonth + "-" + strDay;
this.base = yesterday;
},
getotherday(date, n) {
var yesterday_milliseconds = Time() - n * 1000 * 60 * 60 * 24;      var yesterday = new Date();
yesterday.setTime(yesterday_milliseconds);
var strYear = FullYear();
var strDay = Date();
var strMonth = Month() + 1;
var strdate = Day();
if (strMonth < 10) {
strMonth = "0" + strMonth;
}
if (strDay < 10) {
strDay = "0" + strDay;
}
if (n == -1) {
"星期⼀" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
strYear + "-" + strMonth + "-" + strDay + " " + "00:00:00";
}
if (n == -2) {
this.thursday = strMonth + "." + strDay;
this.thursday1 =
"星期⼆" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
this.dateFormat3 = strYear + "-" + strMonth + "-" + strDay;
}
if (n == -3) {
this.wednesday = strMonth + "." + strDay;
this.wednesday1 =
"星期三" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
this.dateFormat4 = strYear + "-" + strMonth + "-" + strDay;
}
if (n == -4) {
this.thuesday = strMonth + "." + strDay;
this.thuesday1 =
"星期四" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
this.dateFormat5 = strYear + "-" + strMonth + "-" + strDay;
}
if (n == -5) {
this.friday = strMonth + "." + strDay;
this.friday1 =
"星期五" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
this.dateFormat6 = strYear + "-" + strMonth + "-" + strDay;
}
if (n == -6) {
this.saturday = strMonth + "." + strDay;
this.saturday1 =
"星期六" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
this.dateFormat7 = strYear + "-" + strMonth + "-" + strDay;
}
if (n == -7) {
this.sunday = strMonth + "." + strDay;
this.sunday1 =
"星期天" + "(" + strYear + " / " + strMonth + " / " + strDay + ")";
this.lastsunday = strYear + "年" + strMonth + "⽉" + strDay + "⽇";        this.dateFormat8 =
strYear + "-" + strMonth + "-" + strDay + " " + "00:00:00";
}
},
handleChange_1(data) {
console.log(data);
},
handleChange_2(data) {
console.log(data, 123);
},
dialogClosed() {
this.form = {};
this.title = "新增";
},
/
/获取workers
async getworkers() {
const { data: res } = await this.$http.post(
"",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。