forked from liweijie/education
liumengyu
440 lines
17 KiB
Vue
440 lines
17 KiB
Vue
<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>
|