education/frontend/src/views/teachOffice/shiftSemester/ClassTeamSelectDialog.vue

<template>
  <el-dialog
    :visible="dialogVisible"
    :title="title"
    width="900px"
    top="8vh"
    :close-on-click-modal="false"
    class="team-select-dialog"
    @update:visible="val => dialogVisible = val"
  >
    <div class="team-select">
      <!-- ==================== 操作说明 ==================== -->
      <div v-if="excludeNote" class="note-bar">
        <i class="el-icon-info"></i>
        <span>{{ excludeNote }}</span>
      </div>

      <!-- ==================== 查询条件区域 ==================== -->
      <div class="query-panel">
        <el-form :inline="true" class="query-form" @submit.native.prevent>
          <el-form-item label="班次编号">
            <el-input
              v-model="queryForm.xydbh"
              placeholder="请输入班次编号（模糊）"
              clearable
              style="width: 220px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button size="small" @click="handleResetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- ==================== 目标班次学期表格 ==================== -->
      <div class="table-panel">
        <el-table
          ref="tableRef"
          v-loading="loading"
          :data="filteredList"
          border
          stripe
          size="small"
          max-height="360"
          class="team-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="44" align="center" reserve-selection />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="nd" label="年度" width="80" align="center" show-overflow-tooltip />
          <el-table-column label="学期第次" width="90" align="center">
            <template slot-scope="{ row }">{{ xqdcLabel(row.xqdc) }}</template>
          </el-table-column>
          <el-table-column prop="xydbh" label="班次编号" min-width="150" align="center" show-overflow-tooltip />
          <el-table-column prop="kxrq" label="开学日期" width="110" align="center" :formatter="fmtDate" />
          <el-table-column prop="jsrq" label="结束日期" width="110" align="center" :formatter="fmtDate" />
          <el-table-column prop="bz" label="备注" min-width="120" align="left" header-align="center" show-overflow-tooltip />
        </el-table>
        <el-empty v-if="!filteredList.length" description="暂无可选的目标班次学期" :image-size="60" />
      </div>

      <!-- ==================== 底部按钮区域 ==================== -->
      <div class="footer-actions">
        <span class="selected-count">已选择 {{ selection.length }} 个班次学期</span>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" :disabled="!selection.length" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClassTeamSelectDialog',
  props: {
    visible: { type: Boolean, default: false },
    /** 标题（可选） */
    title: { type: String, default: '目标班次学期选取' },
    /** 可选的目标班次学期列表（含 bh/nd/xqdc/xydbh/kxrq/jsrq 等） */
    semesterList: { type: Array, default: () => [] },
    /** 需要排除的班次学期编号（当前班次学期，不可复制给自己） */
    excludeBh: { type: String, default: '' },
    /** 顶部操作说明 */
    excludeNote: { type: String, default: '' }
  },
  data() {
    return {
      loading: false,
      queryForm: { xydbh: '' },
      selection: []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    /** 排除当前班次学期后的可选列表 */
    availableList() {
      const excludeBh = this.excludeBh || ''
      return (this.semesterList || []).filter(item => item.bh && String(item.bh) !== String(excludeBh))
    },
    /** 本地过滤后的列表 */
    filteredList() {
      const kw = (this.queryForm.xydbh || '').trim()
      if (!kw) return this.availableList
      return this.availableList.filter(item => item.xydbh && String(item.xydbh).includes(kw))
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.selection = []
        this.queryForm.xydbh = ''
        this.$nextTick(() => {
          if (this.$refs.tableRef) this.$refs.tableRef.clearSelection()
        })
      }
    }
  },
  methods: {
    fmtDate(val) {
      if (!val) return '-'
      return String(val).slice(0, 10)
    },
    xqdcLabel(val) {
      if (val === 1 || val === '1') return '第1学期'
      if (val === 2 || val === '2') return '第2学期'
      if (val === 3 || val === '3') return '第3学期'
      return val !== undefined && val !== null && val !== '' ? `第${val}学期` : '-'
    },
    handleSelectionChange(rows) {
      this.selection = rows
    },
    handleQuery() {},
    handleResetQuery() {
      this.queryForm.xydbh = ''
    },
    handleConfirm() {
      if (!this.selection.length) {
        this.$message.warning('请先勾选目标班次学期')
        return
      }
      this.$emit('confirm', this.selection.slice())
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.team-select {
  display: flex;
  flex-direction: column;
  gap: 12px;

  // ========== 操作说明 ==========
  .note-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1e6fff;
    background: #ecf5ff;
    border: 1px solid #d9ecff;
    border-radius: 4px;
  }

  // ========== 查询条件区域 ==========
  .query-panel {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px 12px 2px;

    .query-form {
      ::v-deep .el-form-item {
        margin-bottom: 8px;
      }
    }
  }

  // ========== 表格区域 ==========
  .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;
    }
  }

  // ========== 底部按钮区域 ==========
  .footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #ebeef5;

    .selected-count {
      flex: 1;
      font-size: 13px;
      color: #606266;
    }
  }
}
</style>