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

<template>
  <el-card>
    <template #header>
      <div class="fx-row fx-bet-cen">
        <span>选科报名表</span>
        <div>
          <el-button type="primary" @click="toAiAnalysis">AI分析</el-button>
          <el-button>选科历史记录</el-button>
        </div>

      </div>
    </template>
    <mx-table :propDefines="formatTable.cols" :rows="formatTable.rows">
      <template #temp="{row}">
        <span class="btn-blue mr5" @click="toSelectSub(row)">选择</span>
        <span class="btn-green">查看记录</span>
        <!--        <el-button>查看</el-button>-->
      </template>
      <template #signUp="{row}">
        <span class="btn-red" v-if="row.selected" @click="toUnSelect(row)">取消报名</span>
        <span class="btn-green" v-else @click="toSelect(row)">报名</span>
      </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="click">
              <div class="fx-column">
                <span >{{subject}}</span>
              </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-tag type="success" class="mb10">{{ college.major[0] }}</el-tag>
            :
            <span>{{ college.college }}</span>
          </el-col>
        </el-row>
      </template>
    </mx-table>
    <p>您的选科志愿: <span v-for="(item,index) in selectedList">
      {{ item.groupName }}{{ index + 1 < selectedList.length ? '、' : '' }}</span>
    </p>
    <!-- 拖拽 -->
    <test-drage ref="drage" :sortList="selectedList"></test-drage>
    <el-button @click="commit" type="primary">提交</el-button>
    <el-dialog
      title="电子签名"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <vue-esign></vue-esign>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <choose-subject-dialog ref="chooseDialog" @chooseReally="toggleSubject"></choose-subject-dialog>
    <Ai-dialog ref="aiDialog"></Ai-dialog>
  </el-card>
</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 VueEsign from '@/components/VueEsign/index'
import ChooseSubjectDialog from './choose-subject-dialog'

export default {
  components: {
    TestDrage,
    VueEsign,
    ChooseSubjectDialog,
    AiDialog
  },
  mixins: [MxSelectTranslate],
  data() {
    return {
      preferenceCount: 3,
      optionalMajors: [],
      dialogVisible: false,
      modelsWrapper: {},
      selectedList: []
    }
  },
  computed: {
    formatTable() {
      if (!this.modelsWrapper.models) return {}
      if (!this.optionalMajors) return {}
      // 行
      const rows = this.modelsWrapper.models.map(item => {
        item.allowSelectTips = item.allowSelect ? '报名中' : '无法报名'
        item.subjects = this.optionalMajors.filter(college => {
          if (college.matchedGroupIds.indexOf(item.groupId) != -1) return college.majorCategoryName
        }).map(item => item.majorCategoryName)
        item.colleges = this.optionalMajors.filter(college => {
          if (college.matchedGroupIds.indexOf(item.groupId) != -1) return college.majorCategoryName
        }).map(item => {
          return {
            college: item.collegeName,
            major: item.majorCategoryName
          }
        })
        return item
      })

      // 列
      const statCols = {}
      this.modelsWrapper.statColumns.map((column, index) => {
        const prop = 'statistic_' + index
        statCols[prop] = { label: column.name }
        rows.forEach((row) => {
          const descriptors = column.groupDescriptors.find(desc => desc.groupId == row.groupId) ?
            column.groupDescriptors.find(desc => desc.groupId == row.groupId).descriptors : []
            console.log(descriptors)
           row[prop] = descriptors.length > 0 ?  descriptors.length > 1 ? `${descriptors[0].value}/${descriptors[1].value}` : `${descriptors[0].value}`  : ''
        })
      })
      const cols = {
        index: {
          type: 'index',
          label: '编号'
        },
        groupName: {
          label: '选科组合'
        },
        classCount: {
          label: '开设班级数'
        },
        personCount: {
          label: '人数设置'
        },
        ...statCols,
        rankInGroup: {
          label: '当前组合实时排名'
        },
        rankInGrade: {
          label: '选科全校排名'
        },
        allowSelectTips: {
          label: '报名状态'
        },
        temp: {
          label: '选择专业',
          width: '140',
          slot: 'temp'
        },
        subjects: {
          label: '已选专业',
          slot: 'subjects',
          width: '150'
        },
        colleges: {
          label: '院校',
          slot: 'colleges',
          width: '250'
        },
        signUp: {
          label: '操作',
          slot: 'signUp',
          width: '100',
          fixed: 'right'
        }
      }
      return {
        rows,
        cols
      }
    }

  },
  methods: {
    toAiAnalysis() {
      //
      const currentGeneration = 1
      // AI 分析 跳转
      this.$refs.aiDialog.open(this.formatTable,currentGeneration)
    },
    commit() {
      console.log(this.selectedList)
      const real = this.selectedList.filter(item => {
        return item.selected == true
      })
      if (real.length < this.preferenceCount) {
        this.$message.warning(`初录报名需要选择${this.preferenceCount}个志愿`)
        return
      }
      this.dialogVisible = true
    },
    toSelect(row) {
      const count = this.modelsWrapper.models.reduce((prev, cur) => {
        return prev += cur.selected ? 1 : 0
      }, 0)
      console.log(count)
      if (count >= this.preferenceCount) {
        this.$message.warning(`最多选择${this.preferenceCount}个志愿`)
        return
      }
      row.selected = true
      this.selectedList.push(row)
      this.$refs.drage.init(this.selectedList)
    },
    toUnSelect(row) {
      this.$confirm(`是否解除选科组合【${row.groupName}】`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.selected = false
        this.selectedList.splice(
          this.selectedList.indexOf(this.selectedList.find((selected) => {
                return selected.groupId === row.groupId
              }
            )
          ), 1)
        this.$refs.drage.init(this.selectedList)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    toSelectSub(row) {
      // 打开选科弹窗
      const course0 = this.translateCourse0(row.groupId)
      const course1 = this.translateCourse1(row.groupId)
      this.$refs.chooseDialog.open(course0, course1)
    },
    init(list) {
      console.log(list)
      this.modelsWrapper = list
    },
    initOption(optionalMajors) {
      console.log(optionalMajors)
      this.optionalMajors = optionalMajors
    }
  }
}
</script>
<style scoped>
.cell .el-tag {
  margin-right: 5px;
}
</style>