|
|
@@ -1,7 +1,6 @@
|
|
|
<template>
|
|
|
<el-dialog title="新增值班表"
|
|
|
:visible.sync="dialogvisible"
|
|
|
- @close='handleCloseAdd'
|
|
|
width="80%">
|
|
|
<el-form size="mini"
|
|
|
label-width="100px">
|
|
|
@@ -11,7 +10,7 @@
|
|
|
label-width="120px">
|
|
|
<el-select placeholder="请选择学年"
|
|
|
style="width:100%"
|
|
|
- v-model="edit.year">
|
|
|
+ v-model="year">
|
|
|
<el-option v-for="item in years"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
@@ -28,51 +27,177 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <el-checkbox :indeterminate="isIndeterminate"
|
|
|
- v-model="checkAll"
|
|
|
- @change="handleCheckAllChange">全选</el-checkbox>
|
|
|
-
|
|
|
- <div style="margin: 15px 0;"></div>
|
|
|
- <el-checkbox-group v-model="checkedCities"
|
|
|
- @change="handleCheckedCitiesChange">
|
|
|
- <el-checkbox v-for="city in cities"
|
|
|
- :label="city"
|
|
|
- :key="city">{{city}}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
+ <el-form-item label="地点"
|
|
|
+ label-width="120px">
|
|
|
+ <!-- <el-checkbox v-model="selectcites"
|
|
|
+ @change="handleCheckAllChange(selectcites,cities)">全选</el-checkbox> -->
|
|
|
+ <div style="margin: 15px 0;"></div>
|
|
|
+ <el-checkbox-group v-model="selectcites">
|
|
|
+ <el-checkbox v-for="city in cities"
|
|
|
+ :label="city.label"
|
|
|
+ :key="city.value">{{city.label}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-form-item label="值班人员"
|
|
|
label-width="120px">
|
|
|
- <el-tag>人员1</el-tag>
|
|
|
- <el-tag>人员2</el-tag>
|
|
|
+ <el-tag @click="personClick(1)">人员1</el-tag>
|
|
|
+ <el-tag @click="personClick(2)">人员2</el-tag>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+
|
|
|
+ <el-checkbox :indeterminate="isIndeterminateTime"
|
|
|
+ v-model="timeAll"
|
|
|
+ @change="handleCheckChange">时间</el-checkbox>
|
|
|
+ <div style="margin: 15px 0;"></div>
|
|
|
+ <el-checkbox-group v-model="checkedTime"
|
|
|
+ @change="handleCheckedChange">
|
|
|
+ <el-checkbox v-for="city in schoolclass"
|
|
|
+ :label="city"
|
|
|
+ :key="city">{{city}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
-
|
|
|
+ <el-table :data="list"
|
|
|
+ ref="multipleTable"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ height="100%"
|
|
|
+ @cell-click="cellclick"
|
|
|
+ @header-click="headclick"
|
|
|
+ :cell-class-name="cellBg"
|
|
|
+ :key="refresh">
|
|
|
+ <el-table-column fit
|
|
|
+ prop="position"
|
|
|
+ min-width="160px"
|
|
|
+ label="地点"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="time"
|
|
|
+ label="时间段"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="mo"
|
|
|
+ label="周一"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ <el-table-column prop="tu"
|
|
|
+ label="周二"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ <el-table-column prop="we"
|
|
|
+ label="周三"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ <el-table-column prop="th"
|
|
|
+ label="周四"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ <el-table-column prop="fr"
|
|
|
+ label="周五"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ <el-table-column prop="sa"
|
|
|
+ label="周六"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ <el-table-column prop="su"
|
|
|
+ label="周日"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :formatter="formatPerson"></el-table-column>
|
|
|
+ </el-table>
|
|
|
<span slot="footer">
|
|
|
<el-button size="mini"
|
|
|
type="primary">保存</el-button>
|
|
|
<el-button size="mini"
|
|
|
- @click="handleCloseAdd">关闭</el-button>
|
|
|
+ @click="dialogvisible=false">关闭</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
-const cityOptions = ['上海', '北京', '广州', '深圳']
|
|
|
+const cityOptions = ['计算机楼', '主楼', '科技楼']
|
|
|
+const classTime = ['8：00-10：00', '13：00-15：00', '18：00-20：00']
|
|
|
+// 总列数
|
|
|
+const columnNum = 9
|
|
|
+// 固定列数
|
|
|
+const fixRowHeadNum = 2
|
|
|
+// todo 欠优化 列属性对应
|
|
|
+const columnProperty = [
|
|
|
+ 'position',
|
|
|
+ 'time',
|
|
|
+ 'mo',
|
|
|
+ 'tu',
|
|
|
+ 'we',
|
|
|
+ 'th',
|
|
|
+ 'fr',
|
|
|
+ 'sa',
|
|
|
+ 'su'
|
|
|
+]
|
|
|
|
|
|
export default {
|
|
|
name: 'dutyEdit',
|
|
|
data () {
|
|
|
return {
|
|
|
- edit: {},
|
|
|
+ edit: { year: 1 },
|
|
|
+ cities: [{ label: '上海', value: 0 }, { label: '北京', value: 1 }, { label: '广州', value: 2 }, { label: '深圳', value: 3 }],
|
|
|
+ times: [{ label: '8:00-12:00', value: 0 }, { label: '12:00-15:00', value: 1 }],
|
|
|
+ persons: [{ label: '人员1', value: 1 }, { label: '人员2', value: 2 }],
|
|
|
+ checkAll: false,
|
|
|
+ // 地点选择
|
|
|
isIndeterminate: true,
|
|
|
cities: cityOptions,
|
|
|
- checkAll: false,
|
|
|
- checkedCities: ['上海', '北京'],
|
|
|
+ checkedCities: [],
|
|
|
+ // 时间选择
|
|
|
+ isIndeterminateTime: true,
|
|
|
+ schoolclass: classTime,
|
|
|
+ timeAll: false,
|
|
|
+ checkedTime: [],
|
|
|
years: [],
|
|
|
- dialogvisible: false
|
|
|
+ dialogvisible: false,
|
|
|
+ // 刷新标志 刷新表格样式
|
|
|
+ refresh: 123,
|
|
|
+ // 已选列表
|
|
|
+ selectcell: new Map(),
|
|
|
+ // 数据列表
|
|
|
+ list: [{
|
|
|
+ position: 0,
|
|
|
+ time: 0,
|
|
|
+ mo: 0,
|
|
|
+ tu: 0,
|
|
|
+ we: 0,
|
|
|
+ th: 0,
|
|
|
+ fr: 0,
|
|
|
+ sa: 0,
|
|
|
+ su: 0
|
|
|
+ }, {
|
|
|
+ position: 1,
|
|
|
+ time: 1,
|
|
|
+ mo: 1,
|
|
|
+ tu: 1,
|
|
|
+ we: 1,
|
|
|
+ th: 1,
|
|
|
+ fr: 1,
|
|
|
+ sa: 1,
|
|
|
+ su: 1
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
@@ -84,24 +209,108 @@ export default {
|
|
|
var year = myDate.getFullYear()// 获取当前年
|
|
|
this.initSelectYear(year)
|
|
|
},
|
|
|
- handleCloseAdd () {
|
|
|
- this.dialogVisible = false
|
|
|
- },
|
|
|
- handleCheckAllChange (val) {
|
|
|
- this.checkedCities = val ? cityOptions : []
|
|
|
+ handleCheckAllChange (checked, val) {
|
|
|
+ checked = val ? this.val : []
|
|
|
this.isIndeterminate = false
|
|
|
},
|
|
|
- handleCheckedCitiesChange (value) {
|
|
|
- let checkedCount = value.length
|
|
|
- this.checkAll = checkedCount === this.cities.length
|
|
|
- this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
|
|
+
|
|
|
+ // 时间多选框
|
|
|
+ handleCheckChange (val) {
|
|
|
+ this.timeAll = val ? classTime : [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ },
|
|
|
+ handleCheckedChange (value) {
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.checkAll = checkedCount === this.schoolclass.length;
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.schoolclass.length;
|
|
|
},
|
|
|
initSelectYear (year) {
|
|
|
this.years = []
|
|
|
- for (let i = 0; i < 30; i++) {
|
|
|
+ for (let i = 0; i < 5; i++) {
|
|
|
this.years.push({ value: (year - i), label: (year - i) + '年' })
|
|
|
}
|
|
|
+ },
|
|
|
+ // 单元格、行选中
|
|
|
+ cellclick (row, column, cell, event) {
|
|
|
+ // 第3列开始可以选中
|
|
|
+ // 单击单元格选中
|
|
|
+ if (cell.cellIndex >= fixRowHeadNum) {
|
|
|
+ if (this.selectcell.get(row.index + '_' + column.property)) {
|
|
|
+ this.selectcell.set(row.index + '_' + column.property, false)
|
|
|
+ } else {
|
|
|
+ this.selectcell.set(row.index + '_' + column.property, this.list[row.index])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 第三列之前选中整行
|
|
|
+ // 行选中
|
|
|
+ var currentcolumnindex = column.index
|
|
|
+ if (cell.cellIndex < fixRowHeadNum) {
|
|
|
+ for (var i = cell.cellIndex; i < columnNum - 1; i++) {
|
|
|
+ currentcolumnindex = currentcolumnindex + 1
|
|
|
+ var nextSibling = cell.nextSibling
|
|
|
+ cell = nextSibling
|
|
|
+ if (i >= fixRowHeadNum - 1) {
|
|
|
+ if (this.selectcell.get(row.index + '_' + columnProperty[currentcolumnindex])) {
|
|
|
+ this.selectcell.set(row.index + '_' + columnProperty[currentcolumnindex], false)
|
|
|
+ } else {
|
|
|
+ this.selectcell.set(row.index + '_' + columnProperty[currentcolumnindex], this.list[row.index])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.refresh = Math.random()
|
|
|
+ },
|
|
|
+ // 列选中
|
|
|
+ headclick (column, event) {
|
|
|
+ // 判断是否为可选列
|
|
|
+ if (column.index > fixRowHeadNum - 1) {
|
|
|
+ for (var i = 0; i < this.list.length; i++) {
|
|
|
+ if (this.selectcell.get(i + '_' + column.property)) {
|
|
|
+ this.selectcell.set(i + '_' + column.property, false)
|
|
|
+ } else {
|
|
|
+ this.selectcell.set(i + '_' + column.property, this.list[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.refresh = Math.random()
|
|
|
+ },
|
|
|
+ // tag点击
|
|
|
+ personClick (person) {
|
|
|
+ this.selectcell.forEach(function (value, key) {
|
|
|
+ if (value) {
|
|
|
+ var property = key.split('_')
|
|
|
+ value[property[1]] = person
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.selectcell = new Map()
|
|
|
+ },
|
|
|
+ // 更新背景
|
|
|
+ cellBg ({ row, column, rowIndex, columnIndex }) {
|
|
|
+ row.index = rowIndex
|
|
|
+ column.index = columnIndex
|
|
|
+ let _this = this
|
|
|
+ // 注意这里是解构
|
|
|
+ // 利用单元格的 className 的回调方法，给行列索引赋值
|
|
|
+
|
|
|
+ if (_this.selectcell.get(row.index + '_' + column.property)) {
|
|
|
+ return 'selectedCell'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatPerson (row, column, cellValue, index) {
|
|
|
+ let label = '休息'
|
|
|
+ for (var i = 0; i < this.persons.length; i++) {
|
|
|
+ if (this.persons[i].value === cellValue) {
|
|
|
+ label = this.persons[i].label
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return label
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style>
|
|
|
+.selectedCell {
|
|
|
+ background-color: green !important;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|
liuyang