|
|
@@ -1,314 +1,173 @@
|
|
|
- <template>
|
|
|
- <el-dialog title="新增值班表"
|
|
|
- :visible.sync="dialogvisible"
|
|
|
- width="80%">
|
|
|
- <el-form size="mini"
|
|
|
- label-width="100px">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="学年"
|
|
|
- label-width="120px">
|
|
|
- <el-select placeholder="请选择学年"
|
|
|
- style="width:100%"
|
|
|
- v-model="year">
|
|
|
- <el-option v-for="item in years"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="学期"
|
|
|
- label-width="120px">
|
|
|
- <el-input placeholder="请输入"
|
|
|
- style="width:100%"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="地点"
|
|
|
- label-width="120px">
|
|
|
- <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 @click="personClick(1)">人员1</el-tag>
|
|
|
- <el-tag @click="personClick(2)">人员2</el-tag>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
+<template>
|
|
|
+ <el-dialog title="新增课程表信息"
|
|
|
+ :visible.sync="dialogvisible"
|
|
|
+ @opened="dialogOpen"
|
|
|
+ @closed="dialogClose"
|
|
|
+ width="30%">
|
|
|
+ <el-form size="mini"
|
|
|
+ :model="course"
|
|
|
+ label-width="80px"
|
|
|
+ ref="courseForm">
|
|
|
+ <el-form-item label="标题"
|
|
|
+ prop="Title">
|
|
|
+ <el-input v-model="course.Title"
|
|
|
+ placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="教学周"
|
|
|
+ prop="title">
|
|
|
+ <el-input v-model="course.CourseWeek"
|
|
|
+ placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学年"
|
|
|
+ prop="Year">
|
|
|
+ <el-select v-model="course.Year"
|
|
|
+ placeholder="请选择年级学年">
|
|
|
+ <el-option v-for="item in years"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级"
|
|
|
+ prop="title">
|
|
|
+ <el-select v-model="course.Class"
|
|
|
+ placeholder="请选择班级"
|
|
|
+ filterable="true">
|
|
|
+ <el-option v-for="item in classList"
|
|
|
+ :key="item.Id"
|
|
|
+ :label="item.Name"
|
|
|
+ :value="item.Id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学期"
|
|
|
+ prop="title">
|
|
|
+ <el-select v-model="course.Term">
|
|
|
+ <el-option v-for="item in term"
|
|
|
+ :key="item.ItemValue"
|
|
|
+ :label="item.ItemName"
|
|
|
+ :value="item.ItemValue">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-radio-group v-model="course.Status">
|
|
|
|
|
|
- <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-radio class="radio"
|
|
|
+ v-for="item in statusList"
|
|
|
+ :label="item.ItemValue"
|
|
|
+ :key="item.ItemName">{{item.ItemName}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <span slot="footer">
|
|
|
<el-button size="mini"
|
|
|
- type="primary">保存</el-button>
|
|
|
+ @click="save()">保存</el-button>
|
|
|
<el-button size="mini"
|
|
|
- @click="dialogvisible=false">关闭</el-button>
|
|
|
+ @click="dialogClose">关闭</el-button>
|
|
|
+
|
|
|
</span>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
-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'
|
|
|
-]
|
|
|
+
|
|
|
+import CourseApi from '@/api/course'
|
|
|
+import itemDetailApi from '@/api/sysadmin/itemdetail'
|
|
|
|
|
|
export default {
|
|
|
- name: 'dutyEdit',
|
|
|
+ name: 'courseInfoDialog',
|
|
|
+ props: {
|
|
|
+ courseId: Number,
|
|
|
+ statusList: Array,
|
|
|
+ term: Array,
|
|
|
+ classList: Array
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
- year: '',
|
|
|
- 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,
|
|
|
- selectcites: [],
|
|
|
- // 时间选择
|
|
|
- isIndeterminateTime: true,
|
|
|
- schoolclass: classTime,
|
|
|
- timeAll: false,
|
|
|
- checkedTime: [],
|
|
|
years: [],
|
|
|
+ checkAll: 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
|
|
|
- }]
|
|
|
+ fileList: [],
|
|
|
+ course: {}
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
- this.init()
|
|
|
+ var myDate = new Date()
|
|
|
+ var year = myDate.getFullYear()// 获取当前年
|
|
|
+ this.initSelectYear(year)
|
|
|
+ this.getData()
|
|
|
},
|
|
|
methods: {
|
|
|
- init () {
|
|
|
- var myDate = new Date()
|
|
|
- var year = myDate.getFullYear()// 获取当前年
|
|
|
- this.initSelectYear(year)
|
|
|
- },
|
|
|
- handleCheckAllChange (checked, val) {
|
|
|
- checked = val ? this.val : []
|
|
|
- this.isIndeterminate = false
|
|
|
- },
|
|
|
-
|
|
|
- // 时间多选框
|
|
|
- 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
|
|
|
+ // 获取字典表
|
|
|
+ getTerm () {
|
|
|
+ itemDetailApi.getItemDetailByItemCode({ ItemCode: 'Term' })
|
|
|
+ .then(res => {
|
|
|
+ this.term = res
|
|
|
+ // this.initDatas()
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
},
|
|
|
initSelectYear (year) {
|
|
|
this.years = []
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
+ for (let i = 0; i < 30; 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()
|
|
|
+ dialogOpen () {
|
|
|
+ this.course = {}
|
|
|
+ this.$refs.courseForm.resetFields()
|
|
|
+ this.getData()
|
|
|
},
|
|
|
- // 列选中
|
|
|
- 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()
|
|
|
+ dialogClose () {
|
|
|
+ this.course = {}
|
|
|
+ this.$refs.courseForm.resetFields()
|
|
|
+ this.$emit('handleClose')
|
|
|
+ this.dialogVisible = false
|
|
|
},
|
|
|
- // tag点击
|
|
|
- personClick (person) {
|
|
|
- this.selectcell.forEach(function (value, key) {
|
|
|
- if (value) {
|
|
|
- var property = key.split('_')
|
|
|
- value[property[1]] = person
|
|
|
+ save () {
|
|
|
+ this.$refs.courseForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ CourseApi.addCourse(this.course, {})
|
|
|
+ .then(res => {
|
|
|
+ this.$emit('handleClose')
|
|
|
+ this.dialogvisible = false
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // handle error
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
}
|
|
|
})
|
|
|
- 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
|
|
|
+ // 编辑修改
|
|
|
+ getData () {
|
|
|
+ if (this.courseId > 0) {
|
|
|
+ var id = {
|
|
|
+ id: this.courseId
|
|
|
}
|
|
|
+ CourseApi.getById(id)
|
|
|
+ .then(res => {
|
|
|
+ this.course = res
|
|
|
+ })
|
|
|
}
|
|
|
- return label
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
</script>
|
|
|
-<style>
|
|
|
-.selectedCell {
|
|
|
- background-color: green !important;
|
|
|
- color: white;
|
|
|
-}
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .button {
|
|
|
+ padding: 0;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
</style>
|
liuyang