前端代码
This commit is contained in:
liumengyu
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible="dialogVisible"
|
||||
title="教学班次学期信息明细"
|
||||
width="720px"
|
||||
class="class-detail-dialog"
|
||||
:close-on-click-modal="false"
|
||||
@update:visible="val => dialogVisible = val"
|
||||
>
|
||||
<el-form label-width="100px" class="detail-form">
|
||||
<el-row :gutter="24">
|
||||
<!-- 左列 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班次">
|
||||
<el-input v-model="form.bc" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="专业">
|
||||
<el-input v-model="form.xkzy" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="年级">
|
||||
<el-input v-model="form.nj" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="学期">
|
||||
<div class="semester-field">
|
||||
<el-input v-model="form.xq" readonly />
|
||||
<el-input v-model="form.ghn" class="plan-input" placeholder="" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="开学日期">
|
||||
<el-date-picker v-model="form.kxrq" type="date" format="yyyy年M月d日" value-format="yyyy-MM-dd" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期">
|
||||
<el-date-picker v-model="form.jsrq" type="date" format="yyyy年M月d日" value-format="yyyy-MM-dd" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="学期周数">
|
||||
<el-input v-model="form.zs" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 右列 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="教学任务">
|
||||
<el-select v-model="form.jxrw" clearable placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="opt in taskOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学期层次">
|
||||
<el-select v-model="form.xqcc" style="width: 100%">
|
||||
<el-option v-for="opt in levelOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开放教员排课">
|
||||
<el-checkbox v-model="form.kfpy" />
|
||||
</el-form-item>
|
||||
<el-form-item label="查找教室">
|
||||
<el-select v-model="form.zxjs" style="width: 100%">
|
||||
<el-option v-for="opt in roomOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="教学楼">
|
||||
<el-select v-model="form.jxl" style="width: 100%">
|
||||
<el-option v-for="opt in buildingOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="专用教室">
|
||||
<el-select v-model="form.zyjs" style="width: 100%">
|
||||
<el-option v-for="opt in zyjsOptions" :key="opt" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 备注 -->
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.bz" type="textarea" :rows="3" placeholder="" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ClassSemesterDetailDialog',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
/** 选中的班次信息 */
|
||||
classInfo: { type: Object, default: null },
|
||||
/** 学期名称 */
|
||||
semesterName: { type: String, default: '2017年秋季学期' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
bc: '班次0633', // 班次
|
||||
xkzy: '专业209', // 专业
|
||||
nj: '2017级', // 年级
|
||||
xq: this.semesterName, // 学期
|
||||
ghn: '规划内', // 规划内
|
||||
kxrq: '2017-09-03', // 开学日期
|
||||
jsrq: '2018-02-11', // 结束日期
|
||||
zs: 24, // 学期周数
|
||||
jxrw: '', // 教学任务
|
||||
xqcc: '第1学期', // 学期层次
|
||||
kfpy: true, // 开放教员排课
|
||||
zxjs: '10-03&10-03(50)', // 查找教室
|
||||
jxl: '5号楼', // 教学楼
|
||||
zyjs: '作战实验中心学术报告厅', // 专用教室
|
||||
bz: '' // 备注
|
||||
},
|
||||
taskOptions: ['2017年下半年教学任务', '研究生2017下半年教学任务'],
|
||||
levelOptions: ['第1学期', '第2学期', '第3学期'],
|
||||
roomOptions: ['10-03&10-03(50)', '10-04&10-04(40)', '9-01'],
|
||||
buildingOptions: ['5号楼', '6号楼', '综合楼'],
|
||||
zyjsOptions: ['作战实验中心学术报告厅', '综合教学楼101', '学术报告厅']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 每次打开时按传入的班次信息初始化表单
|
||||
visible(val) {
|
||||
if (!val) return
|
||||
this.form.bc = (this.classInfo && this.classInfo.bc) || '班次0633'
|
||||
this.form.xkzy = (this.classInfo && this.classInfo.xkzy) || '专业209'
|
||||
this.form.nj = (this.classInfo && this.classInfo.nj) || '2017级'
|
||||
this.form.xq = this.semesterName
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm() {
|
||||
this.$emit('confirm')
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.class-detail-dialog {
|
||||
.detail-form {
|
||||
// 只读输入框灰色底
|
||||
::v-deep .el-input__inner[readonly] {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.semester-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.el-input:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.plan-input {
|
||||
flex-shrink: 0;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user