zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

前端代码

Browse Source
This commit is contained in:
liumengyu
2026-08-21 18:42:51 +08:00
parent 054947482f
commit 04e06a9c9a
762 changed files with 62992 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/teachOffice/shiftSemester/ClassTeamSelectDialog.vue
+439
View File
@@ -0,0 +1,439 @@
<template>
<el-dialog
:visible="dialogVisible"
title="学员队选取"
width="90%"
top="5vh"
:close-on-click-modal="false"
class="team-select-dialog"
@update:visible="val => dialogVisible = val"
>
<div class="team-select">
<!-- ==================== 1. 查询条件区域 ==================== -->
<div class="query-panel">
<el-form label-width="88px" class="query-form">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="专业">
<div class="check-field">
<el-checkbox v-model="queryForm.zyEnabled" />
<el-select v-model="queryForm.zy" :disabled="!queryForm.zyEnabled" style="flex: 1">
<el-option v-for="opt in zyOptions" :key="opt" :label="opt" :value="opt" />
</el-select>
</div>
</el-form-item>
<el-form-item label="年级">
<div class="check-field">
<el-checkbox v-model="queryForm.njEnabled" />
<el-input v-model="queryForm.nj" :disabled="!queryForm.njEnabled" placeholder="" />
</div>
</el-form-item>
<el-form-item label="在校状态">
<div class="check-field">
<el-checkbox v-model="queryForm.zxztEnabled" />
<el-select v-model="queryForm.zxzt" :disabled="!queryForm.zxztEnabled" style="flex: 1">
<el-option v-for="opt in zxztOptions" :key="opt" :label="opt" :value="opt" />
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学员队名称">
<div class="check-field">
<el-checkbox v-model="queryForm.xydmcEnabled" />
<el-input v-model="queryForm.xydmc" :disabled="!queryForm.xydmcEnabled" placeholder="" />
</div>
</el-form-item>
<el-form-item label="任务类别">
<div class="check-field">
<el-checkbox v-model="queryForm.rwlbEnabled" />
<el-select v-model="queryForm.rwlb" :disabled="!queryForm.rwlbEnabled" style="flex: 1">
<el-option v-for="opt in rwlbOptions" :key="opt" :label="opt" :value="opt" />
</el-select>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 分页控制区域 -->
<div class="pager-row">
<button type="button" class="gray-btn" @click="handleQuery">查询</button>
<button type="button" class="gray-btn" @click="handleFirst">首页</button>
<button type="button" class="gray-btn" @click="handlePrev">上页</button>
<button type="button" class="gray-btn" @click="handleNext">下页</button>
<button type="button" class="gray-btn" @click="handleLast">末页</button>
<el-input-number v-model="currentPage" :min="1" size="small" controls-position="right" style="width: 90px" />
<span class="pager-label">每页条数</span>
<el-select v-model="pageSize" size="small" style="width: 70px">
<el-option v-for="n in pageSizeOptions" :key="n" :label="String(n)" :value="n" />
</el-select>
<button type="button" class="gray-btn" @click="handleLocate">定位</button>
<el-select v-model="displaySize" size="small" style="width: 80px">
<el-option v-for="n in displaySizeOptions" :key="n" :label="String(n)" :value="n" />
</el-select>
<button type="button" class="blue-btn" @click="handleSetPageSize">设置页项数</button>
</div>
</div>
<!-- ==================== 2. 上方数据表格 ==================== -->
<div class="table-panel">
<el-table
:data="teamList"
border
stripe
highlight-current-row
size="small"
class="team-table"
@selection-change="handleTopSelectionChange"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column prop="xzdbm" label="行政队别名称" width="100" align="center" show-overflow-tooltip />
<el-table-column prop="xydmc" label="学员队名称" width="90" align="center" show-overflow-tooltip />
<el-table-column prop="nj" label="年级" width="70" align="center" show-overflow-tooltip />
<el-table-column prop="zy" label="专业" width="80" align="center" show-overflow-tooltip />
<el-table-column label="人数" width="60" align="center">
<template slot-scope="{ row }">{{ row.rs }}人</template>
</el-table-column>
<el-table-column prop="zxzt" label="在校状态" width="80" align="center" show-overflow-tooltip />
<el-table-column prop="rwlb" label="任务类别" width="80" align="center" show-overflow-tooltip />
<el-table-column prop="zyjs" label="专用教室" width="120" align="center" show-overflow-tooltip />
<el-table-column prop="rxrq" label="入学日期" width="120" align="center" show-overflow-tooltip />
<el-table-column prop="byrq" label="毕业日期" width="120" align="center" show-overflow-tooltip />
</el-table>
</div>
<!-- ==================== 3. 中间操作按钮区域 ==================== -->
<div class="mid-actions">
<span class="mid-label">已选择列表项</span>
<button type="button" class="gray-btn" @click="handleAdd">加入</button>
<button type="button" class="gray-btn" @click="handleRemove">移除</button>
<button type="button" class="gray-btn" @click="handleClear">清除</button>
<button type="button" class="gray-btn" @click="handleReset">重置</button>
</div>
<!-- ==================== 4. 下方数据表格（已选学员队列表） ==================== -->
<div class="table-panel">
<el-table
:data="selectedList"
border
stripe
size="small"
class="team-table"
@selection-change="handleBottomSelectionChange"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column prop="zy" label="专业" width="80" align="center" show-overflow-tooltip />
<el-table-column prop="xydmc" label="学员队名称" width="90" align="center" show-overflow-tooltip />
<el-table-column prop="nj" label="年级" width="70" align="center" show-overflow-tooltip />
<el-table-column label="人数" width="60" align="center">
<template slot-scope="{ row }">{{ row.rs }}人</template>
</el-table-column>
<el-table-column prop="rwlb" label="任务类别" width="80" align="center" show-overflow-tooltip />
<el-table-column prop="zxzt" label="在校状态" width="80" align="center" show-overflow-tooltip />
<el-table-column prop="zyjs" label="专用教室" width="120" align="center" show-overflow-tooltip />
<el-table-column prop="rxrq" label="入学日期" width="120" align="center" show-overflow-tooltip />
<el-table-column prop="byrq" label="毕业日期" width="120" align="center" show-overflow-tooltip />
<el-table-column prop="bz" label="备注" width="80" align="center" show-overflow-tooltip />
</el-table>
<el-empty v-if="!selectedList.length" description="暂无已选学员队，请从上方表格加入" :image-size="60" />
</div>
<!-- ==================== 5. 底部按钮区域 ==================== -->
<div class="footer-actions">
<button type="button" class="gray-btn" @click="handleConfirm">确定</button>
<button type="button" class="gray-btn" @click="handleCancel">取消</button>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'ClassTeamSelectDialog',
props: {
visible: { type: Boolean, default: false }
},
data() {
return {
// ==================== 查询条件区域 ====================
queryForm: {
zyEnabled: false, // 专业启用复选框（未勾选）
zy: '专业219', // 专业（默认值）
njEnabled: true, // 年级启用复选框（已勾选）
nj: '', // 年级（空值）
zxztEnabled: false, // 在校状态启用复选框（未勾选）
zxzt: '毕业', // 在校状态（默认值）
xydmcEnabled: true, // 学员队名称启用复选框（已勾选）
xydmc: '', // 学员队名称（空值）
rwlbEnabled: false, // 任务类别启用复选框（未勾选）
rwlb: '规划内' // 任务类别（默认值）
},
zyOptions: ['专业219', '专业220', '专业221'],
zxztOptions: ['毕业', '在校'],
rwlbOptions: ['规划内', '规划外'],
// ==================== 分页控制区域 ====================
currentPage: 1,
pageSize: 1,
displaySize: 100,
pageSizeOptions: [1, 5, 10, 20],
displaySizeOptions: [50, 100, 200],
// ==================== 上方数据表格（可选学员队列表） ====================
teamList: [
{ xzdbm: '教学五系', xydmc: '班次0417', nj: '2016级', zy: '专业113', rs: 36, zxzt: '毕业', rwlb: '规划内', zyjs: '8-011', rxrq: '2016年8月26日', byrq: '2018年1月21日' },
{ xzdbm: '教学七系', xydmc: '班次0423', nj: '2016级', zy: '专业114', rs: 9, zxzt: '毕业', rwlb: '规划内', zyjs: '8-212（南楼）', rxrq: '2016年8月26日', byrq: '2018年1月21日' },
{ xzdbm: '教学七系', xydmc: '班次0411', nj: '2016级', zy: '专业112', rs: 38, zxzt: '毕业', rwlb: '规划内', zyjs: '6-203', rxrq: '2016年8月26日', byrq: '2018年1月21日' },
{ xzdbm: '教学七系', xydmc: '班次0405', nj: '2016级', zy: '专业111', rs: 34, zxzt: '毕业', rwlb: '规划内', zyjs: '8-007', rxrq: '2016年8月26日', byrq: '2018年1月21日' },
{ xzdbm: '教学五系', xydmc: '班次0429', nj: '2017级', zy: '专业117', rs: 43, zxzt: '毕业', rwlb: '规划内', zyjs: '6-202', rxrq: '2017年8月24日', byrq: '2019年1月21日' },
{ xzdbm: '教学五系', xydmc: '班次0431', nj: '2017级', zy: '专业118', rs: 22, zxzt: '毕业', rwlb: '规划内', zyjs: '2-403', rxrq: '2017年8月24日', byrq: '2019年1月21日' },
{ xzdbm: '教学七系', xydmc: '班次0425', nj: '2017级', zy: '专业115', rs: 19, zxzt: '毕业', rwlb: '规划内', zyjs: '2-406', rxrq: '2017年8月24日', byrq: '2019年1月21日' },
{ xzdbm: '教学七系', xydmc: '班次0432', nj: '2017级', zy: '专业119', rs: 15, zxzt: '毕业', rwlb: '规划内', zyjs: '8-009（南楼）', rxrq: '2017年8月24日', byrq: '2019年1月21日' },
{ xzdbm: '教学七系', xydmc: '班次0434', nj: '2017级', zy: '专业120', rs: 45, zxzt: '毕业', rwlb: '规划内', zyjs: '6-303', rxrq: '2017年8月24日', byrq: '2019年1月21日' },
{ xzdbm: '教学六系', xydmc: '班次0427', nj: '2017级', zy: '专业116', rs: 64, zxzt: '毕业', rwlb: '规划内', zyjs: '2-501', rxrq: '2017年8月24日', byrq: '2019年1月21日' }
],
/** 上方表格多选 */
topSelection: [],
/** 下方数据表格（已选学员队列表） */
selectedList: [],
bottomSelection: []
}
},
computed: {
dialogVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
methods: {
handleTopSelectionChange(rows) {
this.topSelection = rows
},
handleBottomSelectionChange(rows) {
this.bottomSelection = rows
},
// ==================== 分页控制 ====================
handleQuery() {
this.$message.success('查询（前端演示）')
},
handleFirst() {
this.currentPage = 1
this.$message.success('已跳转首页')
},
handlePrev() {
if (this.currentPage > 1) this.currentPage--
},
handleNext() {
this.currentPage++
},
handleLast() {
this.currentPage = this.teamList.length || 1
},
handleLocate() {
this.$message.success(`已定位到第 ${this.currentPage} 页`)
},
handleSetPageSize() {
this.$message.success(`每页显示条数已设置为 ${this.displaySize}`)
},
// ==================== 中间操作按钮 ====================
/** 加入：将上方表格选中行加入已选列表（去重） */
handleAdd() {
if (!this.topSelection.length) {
this.$message.warning('请先在上方表格选择学员队')
return
}
const existing = new Set(this.selectedList.map((r) => r.xydmc))
let added = 0
this.topSelection.forEach((r) => {
if (!existing.has(r.xydmc)) {
this.selectedList.push({ ...r, bz: '' })
added++
}
})
if (added) this.$message.success(`已加入 ${added} 个学员队`)
else this.$message.info('所选学员队已在列表中')
},
/** 移除：将下方表格选中行移除 */
handleRemove() {
if (!this.bottomSelection.length) {
this.$message.warning('请先在下方表格选择要移除的学员队')
return
}
const removeKeys = new Set(this.bottomSelection.map((r) => r.xydmc))
this.selectedList = this.selectedList.filter((r) => !removeKeys.has(r.xydmc))
this.$message.success(`已移除 ${this.bottomSelection.length} 个学员队`)
},
/** 清除：清空已选列表 */
handleClear() {
if (!this.selectedList.length) {
this.$message.info('已选列表为空')
return
}
this.selectedList = []
this.$message.success('已清空已选列表')
},
/** 重置：清空已选列表并重置查询条件 */
handleReset() {
this.selectedList = []
Object.assign(this.queryForm, {
zyEnabled: false, zy: '专业219',
njEnabled: true, nj: '',
zxztEnabled: false, zxzt: '毕业',
xydmcEnabled: true, xydmc: '',
rwlbEnabled: false, rwlb: '规划内'
})
this.currentPage = 1
this.$message.success('已重置')
},
// ==================== 底部按钮 ====================
handleConfirm() {
if (!this.selectedList.length) {
this.$message.warning('请先选择要应用的学员队')
return
}
this.$emit('confirm', this.selectedList.slice())
this.dialogVisible = false
this.$message.success(`选定区域设置已应用于 ${this.selectedList.length} 个班次`)
},
handleCancel() {
this.dialogVisible = false
}
}
}
</script>
<style scoped lang="scss">
.team-select {
display: flex;
flex-direction: column;
gap: 12px;
// ========== 1. 查询条件区域 ==========
.query-panel {
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 12px 16px 8px;
.query-form {
.check-field {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
}
.pager-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding-top: 10px;
border-top: 1px solid #ebeef5;
margin-top: 4px;
.pager-label {
font-size: 13px;
color: #606266;
white-space: nowrap;
}
}
}
// ========== 2/4. 表格区域 ==========
.table-panel {
position: relative;
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
overflow: hidden;
.team-table {
width: 100%;
}
::v-deep .el-empty {
padding: 12px 0;
}
}
// ========== 3. 中间操作按钮区域 ==========
.mid-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
.mid-label {
font-size: 13px;
font-weight: 600;
color: #303133;
white-space: nowrap;
margin-right: 4px;
}
}
// ========== 5. 底部按钮区域 ==========
.footer-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 12px;
border-top: 1px solid #ebeef5;
}
// ========== 银灰色 / 蓝色边框按钮 ==========
.gray-btn {
min-width: 70px;
height: 28px;
padding: 0 14px;
font-size: 12px;
color: #000;
background: linear-gradient(180deg, #fdfdfd 0%, #ececec 50%, #dcdcdc 100%);
border: 1px solid #7a7a7a;
border-radius: 2px;
cursor: pointer;
&:hover {
background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 50%, #e6e6e6 100%);
}
&:active {
background: #c8c8c8;
}
}
.blue-btn {
min-width: 110px;
height: 28px;
padding: 0 14px;
font-size: 12px;
color: #1e6fff;
background: #ecf5ff;
border: 1px solid #1e6fff;
border-radius: 2px;
cursor: pointer;
&:hover {
background: #d9ecff;
}
&:active {
background: #c6e2ff;
}
}
}
</style>