vue日历排班
带我的师傅说能自己写出这个就算是可以了，人家都是script标签里面的代码写得多，我是template里面写得多，哎，慢慢来吧。这个代码是带我的人写的，放出来算是记录一下复杂的心情
index.vue
<template> <div class="g-mn"> <div class="m-sch"> <el-row :gutter="15"> <el-col :span="6"> <el-input v-model="query.search['empNo_eq']" placeholder="请输入员工姓名/工号" @keyup.enter.native="keyDown($event)" > <template slot="prepend">工号/姓名</template> </el-input> </el-col> <el-col :span="6"> <div class="el-input el-input--medium el-input-group el-input-group--prepend"> <div class="el-input-group__prepend">班组</div> <el-select @change="search" v-model="query.search['classId_eq']" style="width:100%" placeholder="请选择班组" > <el-option v-for="item in classInfos" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </div> </el-col> <el-col :span="6"> <div class="el-input el-input--medium el-input-group el-input-group--prepend"> <div class="el-input-group__prepend">排班年月</div> <el-date-picker style="width:100%" v-model="query.search['yearMonth_eq']" @change="changeTime" value-format="yyyy-MM" type="month" placeholder="选择日期" ></el-date-picker> </div> </el-col> <el-col :span="6"> <el-button-group> <el-button type="info" icon="el-icon-search" @click="search">查询</el-button> <el-button type="info" icon="el-icon-refresh" @click="cleanSearch">重置</el-button> </el-button-group> </el-col> </el-row> </div> <div class="m-bd-tp"> <el-row class="u-btns"> <el-col :span="10"> <div> <el-button-group v-if="showBtn"> <el-button v-for="(item,index) in frequencies" :key="index" type="info" icon="el-icon-alarm-clock" @click="setWork(item.bsInfo)" >{{ item.name }}({{ item.bsInfo }})</el-button> <el-button type="primary" icon="el-icon-plus" @click="save()">保存</el-button> <el-button type="warning" icon="el-icon-close" @click="cannelSelect()">取消选择</el-button> </el-button-group> <div v-else>.</div> </div> </el-col> <el-col :span="14" class="f-tar icon-btn"> <el-button-group> <el-button type="primary" icon="el-icon-refresh" @click="cleanSearch()" /> </el-button-group> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="24" class="m-db-tp"> <div style="width:100%;background:#fff;display:flex"> <div style> <div style="display:flex"> <div class="u-table-tle" style="background:#EBEEF5 !important">工号</div> <div class="u-table-tle" style="background:#EBEEF5 !important">姓名</div> </div> <div v-for="(data,index) in tableData" :key="index" style="display:flex"> <div class="u-table-tle">{{ data.no }}</div> <div class="u-table-tle">{{ data.name }}</div> </div> </div> <div style="width:calc(100vw - 510px);overflow-x:auto"> <div style="display:flex;width:100%"> <div v-for="(item,index) in dayList" :key="index" class="u-day" style="background:#EBEEF5 !important" @click="selectColumn(index)" > <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer" > <div>{{ item.day }}</div> <div style="margin-top:5px">{{ item.week }}</div> </div> </div> </div> <div v-for="(data,dataIndex) in valueList" :key="dataIndex"> <div style="display:flex;width:100%"> <div v-for="(item,index) in data" :ref="index+'-'+dataIndex" :key="index" class="u-day" @mousedown="down(index,dataIndex,$event)" @mousemove="move(index,dataIndex,$event)" @mouseup="up(index,dataIndex)" > <div style="cursor:pointer;width:100%;height:100%;display:flex;justify-content:center;align-items:center" >{{ item.value }}</div> </div> </div> </div> </div> </div> <br /> <div style="text-align:right"> <el-pagination :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="changeSize" @current-change="changePage" /> </div> </el-col> </el-row> </div> <create v-if="isShowCreate" ref="addModel" :drawer.sync="isShowCreate" :select-id="selectedId" @close="closeModel" /> </div> </template> <script> import create from './create.vue' import dataTable from '@/mixins/dataTable' export default { components: { create: create }, mixins: [dataTable], data () { return { frequencies: [], radio: '', valueList: [], dayList: [], isDown: false, starRow: -1, showBtn: true, starColumn: -1, row: -1, isInitData: false, value: '', classInfos: [], column: -1, url: 'freq/workforceManagements', query: { search: { 'classId_eq': '', 'yearMonth_eq': '', 'empNo_eq': '' } }, input: '', loading: false, form: {}, treeData: [], selectList: [] } }, created () { window.this = this }, mounted () { }, methods: { changeTime () { this.$http.get(this.url + '/getMonthInfo', { yearMonth: this.query.search['yearMonth_eq'] }).then(data => { if (data.status === 200) { if (this.query.search['yearMonth_eq'] < new Date().getFullYear() + '-' + (new Date().getMonth() + 1)) { this.showBtn = false } else { this.showBtn = true } var weekList = data.content.weekList var dateList = data.content.dateList var list = [] for (var i in weekList) { list = list.concat({ day: new Date(dateList[i]).getDate(), week: weekList[i] }) } this.dayList = list this.cannelSelect(); this.search() } }).catch(res => { }) }, getOption () { this.$http.get(this.url + '/optionsData').then(data => { if (data.status === 200) { this.optionsData = data.content var weekList = this.optionsData.weekList var dateList = this.optionsData.dateList var list = [] for (var i in weekList) { list = list.concat({ day: new Date(dateList[i]).getDate(), week: weekList[i] }) } this.dayList = list this.classInfos = this.optionsData.classInfos this.query.search['classId_eq'] = this.classInfos[0].id this.frequencies = this.optionsData.frequencies this.query.search['yearMonth_eq'] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) this.search() } }) }, getData () { this.tableLoading = true this.$http .get(this.url, { page: { pn: this.currentPage, size: this.pageSize }, ...this.query }) .then(data => { if (data.status === 200) { this.tableLoading = false this.total = data.content.total this.tableData = data.content.records var listOne = [] for (var i in this.tableData) { var listTwo = [] if (this.tableData[i].wmValue) { this.tableData[i].wmValue = this.tableData[i].wmValue.split(',') } for (var j in this.dayList) { listTwo = listTwo.concat({ id: this.tableData[i].employeeId, row: i, column: j, value: this.tableData[i].wmValue ? this.tableData[i].wmValue[j] == '空' ? null : this.tableData[i].wmValue[j] : null, select: false }) } listOne.push(listTwo) } this.valueList = listOne } }) }, selectColumn (index) { this.row = index this.column = this.tableData.length - 1 this.starRow = index this.starColumn = 0 this.changStyle() this.getRed() }, down (res, data, event) { this.starRow = res this.starColumn = data if (this.$refs[parseInt(res) + '-' + parseInt(data)][0].style.background === 'red') { this.$refs[parseInt(res) + '-' + parseInt(data)][0].style.background = 'white' } else { this.$refs[parseInt(res) + '-' + parseInt(data)][0].style.background = 'red' } this.isDown = true }, move (res, data, event) { window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty() if (!this.isDown) { return } else { if (this.row === res && this.column === data) { return } else { this.row = res this.column = data this.changStyle() } } }, up (res, data) { this.isDown = false this.getRed() }, getRed () { for (var i in this.tableData) { for (var j in this.dayList) { if (this.$refs[parseInt(j) + '-' + parseInt(i)][0].style.background === 'red') { this.valueList[i][j].select = true } else { this.valueList[i][j].select = false } } } }, changStyle (type) { console.log('123') // eslint-disable-next-line no-unused-vars var a1 = 0 // eslint-disable-next-line no-unused-vars var a2 = 0 var s1 = 0 var s2 = 0 if (this.starColumn < this.column) { s1 = this.starColumn s2 = this.column } else { s1 = this.column s2 = this.starColumn } if (this.starRow < this.row) { a1 = this.starRow a2 = this.row } else { a1 = this.row a2 = this.starRow } for (var z in this.tableData) { for (var x in this.dayList) { this.$refs[parseInt(x) + '-' + parseInt(z)][0].style.background = 'white' } } for (var q in this.valueList) { for (var w in this.valueList[q]) { if (this.valueList[q][w].select) { this.$refs[parseInt(w) + '-' + parseInt(q)][0].style.background = 'red' } } } for (var i = a1; i <= a2; i++) { for (var j = s1; j <= s2; j++) { this.$refs[parseInt(i) + '-' + parseInt(j)][0].style.background = 'red' } } }, cannelSelect () { for (var i in this.valueList) { for (var j in this.valueList[i]) { this.valueList[i][j].select = false this.$refs[parseInt(j) + '-' + parseInt(i)][0].style.background = 'white' } } this.starRow = -1 this.starColumn = -1 this.row = -1 this.column = -1 }, setWork (name) { for (var i in this.tableData) { for (var j in this.dayList) { if (this.$refs[parseInt(j) + '-' + parseInt(i)][0].style.background === 'red') { this.valueList[i][j].value = name } } } }, save () { console.log(this.valueList) var items = this.valueList.map(res => { var contValue = res.map(data => { if (data.value === null) { return '空' } else { return data.value } }) var wmValue = contValue.join(',') return { employeeId: res[0].id, wmValue: wmValue } }) console.log(items) this.$http.postJSON(this.url + '/savaWorkManagement', { classId: this.query.search['classId_eq'], wmDate: this.query.search['yearMonth_eq'], items: items }).then(res => { if (res.success) { this.$message.success(res.message) } }).catch(res => { }) }, initData () { this.getTree() this.search() }, handleNodeClick (res) { this.query.search['department_ids_like'] = '/' + res.id + '/' this.search() }, newLabel (newList) { if (newList) { for (var i = 0; i < newList.length; i++) { newList[i].label = newList[i].name newList[i].value = newList[i].id + '' if (newList[i].children) { this.newLabel(newList[i].children) } if (newList[i].children == null || newList[i].children.length === 0) { newList[i].children = null } } } }, getTree () { this.$http .get('base/departmentInfos/getLevel') .then(data => { if (data.success) { var tree = data.content this.newLabel(tree) this.treeData = tree } }) .catch(data => { }) }, cleanSearch () { this.query.search['no_like,name_like'] = '' this.query.search['department_ids_like'] = '' this.search() } } } </script> <style scoped> .u-table-tle { width: 130px; height: 50px; background: #fff; border: 1px solid #ddd; text-align: center; line-height: 50px; } .u-day { width: 100%; min-width: 50px; height: 50px; background: #fff; border: 1px solid #ddd; } ::-webkit-scrollbar { width: 10px; height: 6px; } ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #ddd; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(100, 100, 100, 0.1); background: #fff; border-radius: 5px; } </style>
create.vue
<template> <div> <el-drawer ref="drawer" :title="selectId!=''?'编辑排班管理信息':'添加排班管理信息'" :visible.sync="drawer" size="500px" direction="rtl" :destroy-on-close="true" :show-close="false" :wrapper-closable="false" @open="initDom" > <div class="drawer__content formData"> <div class="content-rolling"> <el-form ref="modelForm" class="myForm" :model="modelForm" label-width="30px"> <el-row> <el-col :span="24"> <el-form-item label=" " prop="id"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">ID</div> <el-input-number class="qy-w-100p" v-model="modelForm.id" :controls="false"></el-input-number> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="wmDate"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">时间月份</div> <el-input class="qy-w-100p" v-model="modelForm.wmDate" placeholder="请输入时间月份"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="employeeId"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">人员id</div> <el-input-number class="qy-w-100p" v-model="modelForm.employeeId" :controls="false"></el-input-number> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="employeeNo"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">人员编码</div> <el-input class="qy-w-100p" v-model="modelForm.employeeNo" placeholder="请输入人员编码"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="employeeName"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">人员姓名</div> <el-input class="qy-w-100p" v-model="modelForm.employeeName" placeholder="请输入人员姓名"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="departmentId"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">所属部门id</div> <el-input-number class="qy-w-100p" v-model="modelForm.departmentId" :controls="false"></el-input-number> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="departmentNo"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">所属部门no</div> <el-input class="qy-w-100p" v-model="modelForm.departmentNo" placeholder="请输入所属部门no"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="departmentName"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">所属部门</div> <el-input class="qy-w-100p" v-model="modelForm.departmentName" placeholder="请输入所属部门"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="departmentIds"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">部门ids</div> <el-input class="qy-w-100p" v-model="modelForm.departmentIds" placeholder="请输入部门ids"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="classId"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">所属班组id</div> <el-input-number class="qy-w-100p" v-model="modelForm.classId" :controls="false"></el-input-number> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="className"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">班组名称</div> <el-input class="qy-w-100p" v-model="modelForm.className" placeholder="请输入班组名称"></el-input> </div> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label=" " prop="wmValue"> <div class="el-input el-input-group el-input-group--prepend"> <div class="el-input-group__prepend" tabIndex="-1">排班汇总</div> <el-input class="qy-w-100p" v-model="modelForm.wmValue" placeholder="请输入排班汇总"></el-input> </div> </el-form-item> </el-col> </el-row> </el-form> </div> <div class="demo-drawer__footer"> <el-button-group v-if="selectId==''"> <el-button type="primary" icon="el-icon-finished" :disabled="subLoading" @click="save('modelForm')">{{ subLoading ? '提交中 ...' : '保 存' }}</el-button> <el-button type="danger" icon="el-icon-finished" :disabled="subLoading" @click="save('modelForm',true)">{{ subLoading ? '提交中 ...' : '保存并退出' }}</el-button> <el-button type="warning" icon="el-icon-arrow-left" @click="clearData(true)">返回</el-button> </el-button-group> <el-button-group v-else> <el-button type="primary" icon="el-icon-finished" :disabled="subLoading" @click="save('modelForm',true)">{{ subLoading ? '提交中 ...' : '保 存' }}</el-button> <el-button type="warning" icon="el-icon-arrow-left" @click="clearData(true)">返回</el-button> </el-button-group> </div> </div> </el-drawer> </div> </template> <script> // 注意路径 import dataForm from '@/mixins/dataForm.js' export default { mixins: [dataForm], props: { drawer: { type: Boolean }, selectId: { type: String, default: '' } }, data() { return { url: 'freq/workforceManagements', } }, methods: { } } </script> <style scoped> </style>
show.vue
<template> <div> <el-drawer ref="drawer" title="查看排班管理详情" :visible.sync="drawer" size="500px" direction="rtl" :destroy-on-close="true" :show-close="false" :wrapper-closable="false" > <div class="show-pd"> <table style="width: 100%;" border="0"> <tr class="show-pd-tl"> <th style="width:20%;text-align:center">序号</th> <th style="width:30%;text-align:center">属性</th> <th style="width:50%">值</th> </tr> <tr> <td style="width:20%;text-align:center">2</td> <td style="width:30%;text-align:center">ID</td> <td style="width:50%">{{ detail.id }}</td> </tr> <tr> <td style="width:20%;text-align:center">3</td> <td style="width:30%;text-align:center">时间月份</td> <td style="width:50%">{{ detail.wmDate }}</td> </tr> <tr> <td style="width:20%;text-align:center">4</td> <td style="width:30%;text-align:center">人员id</td> <td style="width:50%">{{ detail.employeeId }}</td> </tr> <tr> <td style="width:20%;text-align:center">5</td> <td style="width:30%;text-align:center">人员编码</td> <td style="width:50%">{{ detail.employeeNo }}</td> </tr> <tr> <td style="width:20%;text-align:center">6</td> <td style="width:30%;text-align:center">人员姓名</td> <td style="width:50%">{{ detail.employeeName }}</td> </tr> <tr> <td style="width:20%;text-align:center">7</td> <td style="width:30%;text-align:center">所属部门id</td> <td style="width:50%">{{ detail.departmentId }}</td> </tr> <tr> <td style="width:20%;text-align:center">8</td> <td style="width:30%;text-align:center">所属部门no</td> <td style="width:50%">{{ detail.departmentNo }}</td> </tr> <tr> <td style="width:20%;text-align:center">9</td> <td style="width:30%;text-align:center">所属部门</td> <td style="width:50%">{{ detail.departmentName }}</td> </tr> <tr> <td style="width:20%;text-align:center">10</td> <td style="width:30%;text-align:center">部门ids</td> <td style="width:50%">{{ detail.departmentIds }}</td> </tr> <tr> <td style="width:20%;text-align:center">11</td> <td style="width:30%;text-align:center">所属班组id</td> <td style="width:50%">{{ detail.classId }}</td> </tr> <tr> <td style="width:20%;text-align:center">12</td> <td style="width:30%;text-align:center">班组名称</td> <td style="width:50%">{{ detail.className }}</td> </tr> <tr> <td style="width:20%;text-align:center">13</td> <td style="width:30%;text-align:center">排班汇总</td> <td style="width:50%">{{ detail.wmValue }}</td> </tr> </table> </div> <div class="demo-drawer__footer"> <el-button type="warning" icon="el-icon-arrow-left" @click="back()" >返回</el-button > </div> </el-drawer> </div> </template> <script> // 注意路径 import dataDetail from "@/mixins/dataDetail.js"; export default { mixins: [dataDetail], props: { drawer: { type: Boolean }, selectId: { type: Number, default: -1 } }, data() { return { url: "freq/workforceManagements" }; } }; </script> <style scoped></style>
