forked from liweijie/education
293 lines
9.2 KiB
Vue
293 lines
9.2 KiB
Vue
<template>
|
||
<div class="app-container tpl-page">
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div>
|
||
<div class="section-title">课表模板管理</div>
|
||
<div class="section-desc">维护课表输出样式模板；「课表生成」页可选择模板套用其显示开关（78节 / 晚上 / 夜间 / 选修 / 显示天数）</div>
|
||
</div>
|
||
<el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增模板</el-button>
|
||
</div>
|
||
<el-form inline class="filter-form" @submit.native.prevent>
|
||
<el-form-item label="模板名称">
|
||
<el-input v-model="queryMbmc" placeholder="按名称模糊" clearable style="width: 200px" @keyup.enter.native="handleQuery" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||
<el-button size="mini" icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="section-card">
|
||
<el-table v-loading="loading" :data="tableData" border stripe size="mini">
|
||
<el-table-column type="index" label="序号" width="55" align="center" />
|
||
<el-table-column prop="mbmc" label="模板名称" min-width="160" show-overflow-tooltip />
|
||
<el-table-column label="78节" width="70" align="center">
|
||
<template slot-scope="scope">{{ boolText(scope.row.zxxs78j) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="晚上" width="70" align="center">
|
||
<template slot-scope="scope">{{ boolText(scope.row.zxxsws) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="夜间" width="70" align="center">
|
||
<template slot-scope="scope">{{ boolText(scope.row.xsyj) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="含选修" width="70" align="center">
|
||
<template slot-scope="scope">{{ boolText(scope.row.kbbhxx) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="zxxsts" label="显示天数" width="80" align="center" />
|
||
<el-table-column prop="wkzwzf" label="无课站位" width="90" align="center" />
|
||
<el-table-column label="可用" width="80" align="center">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
:value="isTrue(scope.row.mbky)"
|
||
active-text=""
|
||
@change="v => handleToggle(scope.row, v)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="gxsj" label="更新时间" width="150" align="center">
|
||
<template slot-scope="scope">{{ fmt(scope.row.gxsj) }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="bz" label="备注" min-width="120" show-overflow-tooltip />
|
||
<el-table-column label="操作" width="130" align="center" fixed="right" class-name="table-action-column">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||
<el-button type="text" size="mini" icon="el-icon-delete" class="danger-text" @click="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
v-if="total > 0"
|
||
class="pagination"
|
||
background
|
||
layout="total, sizes, prev, pager, next"
|
||
:current-page="pageNum"
|
||
:page-size="pageSize"
|
||
:page-sizes="[10, 20, 50]"
|
||
:total="total"
|
||
@current-change="handlePageChange"
|
||
@size-change="handleSizeChange"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 新增/编辑弹窗 -->
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="620px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
|
||
<el-form-item label="模板名称" prop="mbmc">
|
||
<el-input v-model="form.mbmc" placeholder="如：标准周课表" maxlength="50" />
|
||
</el-form-item>
|
||
<el-form-item label="显示 7-8 节">
|
||
<el-switch v-model="form.zxxs78j" />
|
||
</el-form-item>
|
||
<el-form-item label="显示晚上时段">
|
||
<el-switch v-model="form.zxxsws" />
|
||
</el-form-item>
|
||
<el-form-item label="显示夜间时段">
|
||
<el-switch v-model="form.xsyj" />
|
||
</el-form-item>
|
||
<el-form-item label="包含选修课">
|
||
<el-switch v-model="form.kbbhxx" />
|
||
</el-form-item>
|
||
<el-form-item label="一周显示天数">
|
||
<el-input-number v-model="form.zxxsts" :min="1" :max="7" />
|
||
<span class="form-tip">5 = 只显示工作日</span>
|
||
</el-form-item>
|
||
<el-form-item label="无课站位字符">
|
||
<el-input v-model="form.wkzwzf" placeholder="留空则空格，如：—" maxlength="10" />
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="form.bz" type="textarea" :rows="2" maxlength="200" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" :loading="saving" @click="handleSave">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listKcbmb, addKcbmb, updateKcbmb, deleteKcbmb, toggleKcbmb } from '@/api/teachBusiness/kcbmb'
|
||
|
||
export default {
|
||
name: 'TimetableTemplate',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
saving: false,
|
||
queryMbmc: '',
|
||
tableData: [],
|
||
total: 0,
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
dialogVisible: false,
|
||
dialogTitle: '新增模板',
|
||
form: this.emptyForm(),
|
||
rules: {
|
||
mbmc: [{ required: true, message: '请输入模板名称', trigger: 'blur' }]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.loadList()
|
||
},
|
||
methods: {
|
||
emptyForm() {
|
||
return {
|
||
bh: undefined,
|
||
mbmc: '',
|
||
zxxs78j: true,
|
||
zxxsws: true,
|
||
xsyj: false,
|
||
kbbhxx: true,
|
||
zxxsts: 7,
|
||
wkzwzf: '',
|
||
bz: ''
|
||
}
|
||
},
|
||
isTrue(v) {
|
||
return v === true || v === 1 || v === '1' || v === 'true'
|
||
},
|
||
boolText(v) {
|
||
return this.isTrue(v) ? '显示' : '隐藏'
|
||
},
|
||
fmt(t) {
|
||
return (t || '').replace('T', ' ').substring(0, 16)
|
||
},
|
||
loadList() {
|
||
this.loading = true
|
||
listKcbmb({ pageNum: this.pageNum, pageSize: this.pageSize, mbmc: this.queryMbmc }).then(response => {
|
||
const page = response.data || {}
|
||
this.tableData = page.records || []
|
||
this.total = page.total || 0
|
||
}).catch(() => {
|
||
this.tableData = []
|
||
this.total = 0
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
handleQuery() {
|
||
this.pageNum = 1
|
||
this.loadList()
|
||
},
|
||
handleReset() {
|
||
this.queryMbmc = ''
|
||
this.pageNum = 1
|
||
this.loadList()
|
||
},
|
||
handlePageChange(p) {
|
||
this.pageNum = p
|
||
this.loadList()
|
||
},
|
||
handleSizeChange(s) {
|
||
this.pageSize = s
|
||
this.pageNum = 1
|
||
this.loadList()
|
||
},
|
||
handleAdd() {
|
||
this.dialogTitle = '新增模板'
|
||
this.form = this.emptyForm()
|
||
this.dialogVisible = true
|
||
},
|
||
handleEdit(row) {
|
||
this.dialogTitle = '编辑模板'
|
||
this.form = {
|
||
bh: row.bh,
|
||
mbmc: row.mbmc,
|
||
zxxs78j: this.isTrue(row.zxxs78j),
|
||
zxxsws: this.isTrue(row.zxxsws),
|
||
xsyj: this.isTrue(row.xsyj),
|
||
kbbhxx: this.isTrue(row.kbbhxx),
|
||
zxxsts: row.zxxsts || 7,
|
||
wkzwzf: row.wkzwzf || '',
|
||
bz: row.bz || ''
|
||
}
|
||
this.dialogVisible = true
|
||
},
|
||
handleSave() {
|
||
this.$refs.form.validate(valid => {
|
||
if (!valid) return
|
||
this.saving = true
|
||
const fn = this.form.bh ? updateKcbmb : addKcbmb
|
||
fn(this.form).then(() => {
|
||
this.$message.success('保存成功')
|
||
this.dialogVisible = false
|
||
this.loadList()
|
||
}).finally(() => {
|
||
this.saving = false
|
||
})
|
||
})
|
||
},
|
||
handleToggle(row, enabled) {
|
||
toggleKcbmb(row.bh, enabled).then(() => {
|
||
row.mbky = enabled
|
||
this.$message.success(enabled ? '已启用' : '已停用')
|
||
}).catch(() => {})
|
||
},
|
||
handleDelete(row) {
|
||
this.$confirm(`确认删除模板「${row.mbmc}」？`, '提示', { type: 'warning' }).then(() => {
|
||
return deleteKcbmb(row.bh)
|
||
}).then(() => {
|
||
this.$message.success('已删除')
|
||
this.loadList()
|
||
}).catch(() => {})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.tpl-page {
|
||
.section-card {
|
||
background: #fff;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 6px;
|
||
padding: 16px 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #303133;
|
||
}
|
||
|
||
.section-desc {
|
||
margin-top: 6px;
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
|
||
.filter-form ::v-deep .el-form-item {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-tip {
|
||
margin-left: 8px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
.danger-text {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 12px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
</style>
|