front/src/views/system/user/profile/components/report-table.vue

<template>
  <div>
    <div class="mb10 fx-row fx-end-base jc-between">
      <div class="fx-row fx-end-cen">
        <slot name="header-prefix"></slot>
        <p v-if="generation.active > 1" v-html="currentSupplyInfo"></p>
      </div>
      <div>
        <el-button v-if="aiButtonShow" type="primary" @click="toAiAnalysis">AI分析</el-button>
        <!--        <el-button>选科历史记录</el-button>-->
      </div>
    </div>

    <mx-table :propDefines="formatCols" :rows="formatRows">
      <template #underOver="{value}">
        <over-under-badge :value="value"></over-under-badge>
      </template>
      <template #group="{row}">
        <el-badge class="group" value="荐" :hidden="!row.isRecommend" type="success">
          <el-tag size="medium" :type="isGroupOverSetting(row) ? 'danger' : 'warning'">{{ row.groupName }}</el-tag>
        </el-badge>
      </template>
      <template #temp="{row}">
        <span class="btn-blue mr5" @click="toSelectSub(row)">选择</span>
        <span class="btn-green" @click="toReport">查看记录</span>
        <!--        <el-button>查看</el-button>-->
      </template>
      <template #signUp="{row}">
        <span class="f-red" v-if="!row.allowSelect">无法报名</span>
        <div v-else>
          <span v-if="generation.current > 1" @click="commit(row)" class="btn-green">报名</span>
          <div v-else>
            <span class="f-red btn-red" v-if="row.selected" @click="toUnSelect(row)">取消报名</span>
            <span class="btn-green" v-else @click="toSelect(row)">报名</span>
          </div>

        </div>
      </template>
      <template #subjects="{row}">
        <el-row>
          <el-col :span="8" v-for="subject in row.subjects">
            <el-popover
              placement="top"
              popper-class="zero-padding-popover"
              trigger="hover"
            >
              <div class="fx-column">
                <el-button plain type="text">{{ subject }}</el-button>
              </div>
              <el-tag type="success" slot="reference" class="mr10 mb10">{{ subject[0] }}</el-tag>
            </el-popover>
          </el-col>
        </el-row>
      </template>
      <template #colleges="{row}">
        <el-row>
          <el-col :span="12" v-for="college in row.colleges">
            <el-popover
              placement="top"
              popper-class="zero-padding-popover"
              trigger="hover"
            >
              <div class="fx-column">
                <el-button plain type="text">{{ college.major }}</el-button>
              </div>
              <el-tag type="success" slot="reference" class="mr10 mb10">{{ college.major[0] }}</el-tag>
            </el-popover>
            :
            <span>{{ college.college }}</span>
          </el-col>
        </el-row>
      </template>
    </mx-table>
    <!-- 初录 多志愿拖拽 -->
    <div
      v-if="this.generation.active == generation.options.primary.value || this.generation.active == generation.options.primaryDM.value">
      <p>您的选科志愿: <span v-for="(item,index) in activeModels.selectedList">
        {{ item.groupName }}
      </span>
      </p>
      <div>
        <test-drage ref="drage" :btnDisabled="this.generation.current != generation.options.primary.value"
                    :selectedList="activeModels.selectedList"
        ></test-drage>
        <el-button @click="commit" type="primary" v-if="this.generation.current == generation.options.primary.value">
          提交
        </el-button>
      </div>
    </div>
    <div v-if="generation.current > generation.active && generation.active > generation.options.primaryDM.value">
      <!--  补录报名和二次补录报名和调剂报名历史报名信息 -->
      {{ historySupply }}
    </div>
    <!--  补录报名和二次补录报名和调剂报名 -->
    <div v-if="flagShow">
      <div class="mb5 mt10 text-right">
        <el-popover
          placement="right"
          width="300"
          v-model="popoShow"
          trigger="click"
        >
          <div>
            确定拒绝系统给您推荐的<span class="f-primary">{{recommendGroup.groupName}}</span>组合么？
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入原因"
              v-model="regInfo"
            >
            </el-input>
            <p class="fx-row jc-between mt10">
              <el-button type="primary" size="mini" @click="popoShow = false">取消</el-button>
              <el-button type="danger" size="mini" @click="handleRejectRecommend">提交</el-button>
            </p>
          </div>

          <el-button slot="reference" type="danger">不同意</el-button>
        </el-popover>
      </div>
    </div>
    <esign-dialog ref="esignDialog"></esign-dialog>
    <choose-subject-dialog ref="chooseDialog"></choose-subject-dialog>
    <select-subject-report-dialog ref="reportDialog"></select-subject-report-dialog>
    <Ai-dialog ref="aiDialog" :prevPreferencesInfo="currentSupplyInfo" :generation="generation"></Ai-dialog>
  </div>
</template>
<script>
import AiDialog from './ai-analysis-dialog'
import MxSelectTranslate from '@/components/Cache/modules/mx-select-translate-mixin.js'
import TestDrage from './test-drage'
import ChooseSubjectDialog from './choose-subject-dialog'
import SelectSubjectReportDialog from '@/views/system/user/profile/components/select-subject-report-dialog'
import EsignDialog from '@/views/system/user/profile/components/esign-dialog'
import ReportStep from './report-step'
import OverUnderBadge from '@/views/elective/publish/components/steps/fauclty/over-under-badge'
import { submitElectiveModels } from '@/api/webApi/elective/selected-subject'

const resolverModules = require.context('./round-select-resolvers', false, /\.js$/)
const resolvers = resolverModules.keys().map(key => resolverModules(key).default)

export default {
  props: {
    generation: Object,
    readonly: Boolean, // 校长端不允许操作
    optionalMajors: { type: Array, default: () => [] }
  },
  components: {
    OverUnderBadge,
    SelectSubjectReportDialog,
    ReportStep,
    EsignDialog,
    TestDrage,
    ChooseSubjectDialog,
    AiDialog
  },
  inject: {
    'refreshData': {
      default: function() {
        // do nothing
      }
    }
  },
  mixins: [MxSelectTranslate, ...resolvers],
  data() {
    return {
      popoShow: false,
      activeStep: '',
      regInfo: '',
      dialogVisible: false,
      singleList: [], // 单志愿列表
      rows: []
    }
  },
  computed: {
    historySupply() {
      // 当前代历史报名信息
      if (!this.generation.models.length) return ''
      // 填报 || 拒绝  || 未选择
      // 当前代
      const activeModels = this.generation.models.find(item => item.generation == this.generation.active)
      const isRefuse = activeModels.models.filter(item => item.rejected)
      if (isRefuse.length > 0) {
        // 拒绝了
        return '您拒绝了填报志愿'
      } else {
        //  填报 or 未选择
        const supply = activeModels.models.filter(item => item.selected)
        if (supply.length > 0) {
          return `填报志愿为${supply[0].groupName}`
        } else {
          return '您未填报志愿'
        }
      }
    },
    // 不符
    currentSupplyInfo() {
      if (!this.generation.models.length) return ''
      // console.log(this.generation)
      if (this.generation.active < this.generation.options.primaryDM.value) return ''
      let info = ''
      const activeModels = this.generation.models.find(item => item.generation == this.generation.active)
      // 是否被录取？
      const approved = activeModels.models.filter(item => {
        return item.approved
      })
      if (approved.length) {
        // 查找
        // 已被录取
        info = `同学，你好，你之前所选择的${approved.groupName}已被录取`
      } else {
        // 已报名未被录取的group 取当前models的前一个
        const prevModels = this.generation.models.find(item => item.generation == activeModels.generation - 1)

        // 是否拒绝 ？
        const isRefuse = prevModels.models.filter(item => item.rejected)
        if (isRefuse.length > 0) {
          // 拒绝报名
          let tips = ''
          const prevGen = Object.values(this.generation.options).find(item => item.value == prevModels.generation)
          if (prevGen.decisionMaking) {
            tips = Object.values(this.generation.options).find(item => item.value == prevModels.generation - 1).title
          } else {
            tips = prevGen.title
          }
          const isSupply = prevGen.decisionMaking ? '，现有以下标黄组合可以重新报名' : ''
          info = `<p>同学，你好，你在${tips}时拒绝填报志愿 ${isSupply} </p>`
        } else {
          // 没被录取的组合
          const refuseGroup = prevModels.models.filter(item => {
            return item.selected
          })
          // 获取报名的阶段
          let tips = ''
          const prevGen = Object.values(this.generation.options).find(item => item.value == prevModels.generation)
          if (prevGen.decisionMaking) {
            tips = Object.values(this.generation.options).find(item => item.value == prevModels.generation - 1).title
          } else {
            tips = prevGen.title
          }
          const isSupply = prevGen.decisionMaking ? '，现有以下标黄组合可以重新报名' : ''
          if (refuseGroup.length > 0) {
            info = `<p>同学，你好，你在${tips}所选择的 <span class="f-red">${refuseGroup.map(g => g.groupName).join(',').toString()}</span> 不符合条件${isSupply} </p>`
          } else {
            info = `<p>同学，你好，你在${tips}时未填报志愿 ${isSupply} </p>`
          }
        }
      }
      return info
    },
    flagShow() {
      const stepMatched = this.generation.active == this.generation.current
      const selectStep = !this.generation.activeOpt.decisionMaking
      return stepMatched && selectStep && !this.readonly
    },
    aiButtonShow() {
      if (!this.generation.activeOpt) return false
      const options = this.generation.options
      return !this.generation.activeOpt.decisionMaking &&
        this.generation.activeOpt != options.primary &&
        !this.readonly
    },
    resolveTablePrefix() {
      return {
        index: {
          type: 'index',
          label: '编号'
        },
        groupName: {
          label: '选科组合',
          slot: 'group',
          width: '85px'
        },
        scoreSumGroup: {
          label: '组合成绩'
        },
        classCount: {
          label: '开设班级数'
        },
        personCount: {
          label: '人数设置'
        }
      }
    },
    resolveTableSuffix() {
      const stepMatched = this.generation.active == this.generation.current
      const enableApply = !this.generation.currentOpt.decisionMaking
      const enableSignUp = stepMatched && enableApply && !this.readonly
      return {
        allowSelectTips: {
          label: '报名状态'
        },
        temp: {
          label: '选择专业',
          width: '140',
          slot: 'temp',
          hidden: this.readonly
        },
        subjects: {
          label: '自选专业',
          slot: 'subjects',
          minWidth: '150'
        },
        colleges: {
          label: '院校',
          slot: 'colleges',
          minWidth: '250'
        },
        signUp: {
          label: '操作',
          slot: 'signUp',
          width: '100',
          fixed: 'right',
          hidden: !enableSignUp
        }
      }
    },
    resolveDynamicTable() {
      if (!Object.keys(this.formatRows).length) return {}
      const options = this.generation.options
      if (!options || !this.generation.active) return {}
      const optValues = Object.values(options)
      const dynamicColumns = {}
      for (let gen = options.primary.value; gen <= this.generation.active; gen++) {
        const opt = optValues.find(opt => opt.value == gen)
        const resolverKey = opt.key + 'Resolver'
        const resolver = this[resolverKey]
        if (typeof resolver === 'function') {
          const genColumns = resolver(gen, this.generation.active, dynamicColumns)
          Object.assign(dynamicColumns, genColumns)
        }
      }
      return dynamicColumns
    },
    activeModels() {
      if (!this.generation) return {}
      const generation = this.generation.models.find(item => item.generation == this.generation.active)
      // generation.selectedList = generation.models.filter(item => {
      //   return item.selected
      // })
      return generation
    },
    recommendGroup() {
      return this.activeModels?.models?.find(m => m.isRecommend) || {}
    },
    // 初始化 rows 填充固定数据
    formatRows() {
      if (!this.optionalMajors) return []
      if (!this.generation.roundGroups?.length) return []
      if (!this.generation.activeModels?.length) return []
      const generationModels = this.generation.activeModels.last()?.models || []
      return this.generation.roundGroups.map(rg => {
        const row = generationModels.find(item => item.groupId == rg.groupId) || {}
        row.allowSelectTips = row.allowSelect ? '报名中' : row.disabledReason || '无法报名'
        const matchedMajors = this.optionalMajors.filter(college => college.matchedGroupIds.includes(row.groupId))
        row.colleges = matchedMajors.map(m => ({ college: m.collegeName, major: m.majorCategoryName }))
        row.subjects = matchedMajors.map(m => m['majorCategoryName'])
        // this.$set(row,'colleges',matchedMajors.map(m => ({ college: m.collegeName, major: m.majorCategoryName })))
        // this.$set(row,'subjects',matchedMajors.map(m => m['majorCategoryName']))
        return row
      })
    },
    formatCols() {
      return {
        ...this.resolveTablePrefix,
        ...this.resolveDynamicTable,
        ...this.resolveTableSuffix
      }
    }
  },
  methods: {
    getModelsByStep() {
      return this.models.findIndex()
    },
    isGroupOverSetting(row) {
      if (this.generation.activeOpt.decisionMaking) {
        console.log('isGroupOverSetting decisionMaking', row.groupApprovedCount >= row.personCount, row)
        return row.groupApprovedCount >= row.personCount
      } else {
        console.log('isGroupOverSetting', row.actualCount >= row.groupIndicator, row)
        return row.actualCount >= row.groupIndicator
      }
    },
    toReport() {
      // 是否更改了报名数据 ?
      const flag = this.activeModels.models.filter(item => item.selected).length == this.activeModels.selectedList.length
      if (!flag) {
        this.$message.warning('请先提交更改过的志愿')
        return
      }
      this.$refs.reportDialog.open()
    },
    toAiAnalysis() {
      // AI 分析 跳转
      this.$refs.aiDialog.open(this.formatRows)
    },
    commit(row) {
      if (this.generation.current == 1) {
        const real = this.activeModels.selectedList.filter(item => {
          return item.selected == true
        })
        if (real.length < this.generation.status.preferenceCount) {
          this.$message.warning(`初录报名需要选择${this.generation.status.preferenceCount}个志愿`)
          return
        }
      } else {
        this.toSelect(row)
      }
      this.$confirm(`是否要提交报名`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        submitElectiveModels({
          models: this.activeModels.selectedList
          // esign:this.base64Img
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('报名成功')
            this.refreshData()
          }
          console.log(res)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        })
      })

      //
      // this.$refs.esignDialog.open(this.activeModels.selectedList)
    },
    toSelect(row) {
      const preferenceCount = this.generation.status.preferenceCount
      const count = this.formatRows.reduce((prev, cur) => {
        return prev += cur.selected ? 1 : 0
      }, 0)
      if (count >= preferenceCount) {
        this.$message.warning(`最多选择${preferenceCount}个志愿`)
        return
      }
      this.activeModels.models.find(item => item.groupId == row.groupId).selected = true
      row.selected = true
      if (!this.activeModels.selectedList.includes(row)) this.activeModels.selectedList.push(row)
    },
    toUnSelect(row) {
      this.$confirm(`是否解除选科组合【${row.groupName}】`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.activeModels.models.find(item => item.groupId == row.groupId).selected = false
        row.selected = false
        const start = this.activeModels.selectedList.findIndex(item => item.groupId == row.groupId)
        console.log(start)
        this.activeModels.selectedList.splice(start, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解除报名'
        })
      })
    },
    toSelectSub(row) {
      // 是否更改了报名数据 ?
      const flag = this.activeModels.models.filter(item => item.selected).length == this.activeModels.selectedList.length
      if (!flag) {
        this.$message.warning('请先提交更改过的志愿')
        return
      }
      // 打开选科弹窗
      const course0 = this.translateCourse0(row.groupId)
      const course1 = this.translateCourse1(row.groupId)
      this.$refs.chooseDialog.open(course0, course1)
    },
    async handleRejectRecommend() {
      await this.$confirm(`拒绝系统给您推荐的${this.recommendGroup.groupName}组合可能会导致您无法正常录取，确认继续？`)

    },
    initOption(optionalMajors) {
      console.log(optionalMajors)
      this.optionalMajors = optionalMajors
    }
  }
}
</script>
<style scoped>
.cell .el-tag {
  margin-right: 5px;
}

.group /deep/ .el-badge__content.is-fixed {
  top: 8px;
  right: 14px;
}
</style>