选科分析报告完善

src/views/career/bigdataSelectCourse/electiveSign.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="mb10 f16 jc-between fx-row">
+      <p>请您签名</p>
+      <el-button @click="handleReset">清空</el-button>
+    </div>
+    <vue-esign
+      ref="esign"
+      class="mySign"
+      :width="1200"
+      :height="500"
+      :isCrop="isCrop"
+      :lineWidth="lineWidth"
+      :lineColor="lineColor"
+      :bgColor.sync="bgColor"
+    />
+  </div>
+</template>
+<script>
+import { saveEsign } from '@/api/webApi/elective/selected-subject'
+
+export default {
+  props: ['flowId'],
+  data() {
+    return {
+      lineWidth: 3, // 画笔的线条粗细
+      lineColor: '#000000', // 画笔的颜色
+      bgColor: '', // 画布的背景颜色
+      base64Img: '', // 最终画布生成的base64图片
+      isCrop: false // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+    }
+  },
+  methods: {
+    // 清空画板
+    handleReset() {
+      this.$refs.esign.reset()
+    },
+    saveElective(callback) {
+      saveEsign({
+        id: this.flowId,
+        esignPath: this.base64Img
+      }).then(res => {
+        callback()
+      })
+    },
+    // 生成签字图
+    handleGenerate(callback) {
+      this.$refs.esign
+        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+        .then((res) => {
+          this.base64Img = res
+          this.saveElective(callback)
+          // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
+          // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
+        })
+        .catch((err) => {
+          console.log(err)
+          // 画布没有签字时会执行这里提示一下
+          this.$message({
+            type: 'warning',
+            message: '请先签名'
+          })
+          return
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+// 设置一下签字区域的虚线边框
+.mySign {
+  border: 1px dashed #000;
+}
+
+</style>

src/views/career/bigdataSelectCourse/personalDivideClass.vue

@@ -9,12 +9,11 @@
         {{ title }}
       </div>
       <div>
-        <p class="mb10">
-          <el-button type="primary" @click="dialogVisible = true">整体报告</el-button>
-          <el-button type="primary" @click="toSign">完成选科签字</el-button>
+        <p class="mb10" v-if="!isSign">
+          <el-button type="primary" @click="dialogVisible = true">签字</el-button>
           <el-button type="primary" @click="showDispatchInfo">查看分班信息</el-button>
         </p>
-        <div v-if="isSign && isShow">
+        <div v-if="isSign">
           <el-alert
             class="mb5"
             :title="tips"
@@ -32,13 +31,16 @@
     </el-card>
     <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
     <el-dialog
-      title="整体报告"
+      title="选科分析报告"
       :visible.sync="dialogVisible"
-      width="80%"
+      width="60"
+      :close-on-click-modal="false"
     >
       <report :generation="generation" :dispatchInfo="rows[0]" :optional-majors="optionalMajors"></report>
+      <elective-sign ref="sign" :flowId="rows[0] ? rows[0].flowId : ''"></elective-sign>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button type="primary" @click="handleGenerate">确 定</el-button>
+        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
       </span>
     </el-dialog>
   </div>
@@ -49,14 +51,14 @@ import { classesResult, getRound } from '@/api/webApi/elective/dispatch'
 import MxCondition from '@/components/MxCondition/mx-condition'
 import RoundSelect from '@/views/system/user/profile/round-select'
 import Report from './report'
+import ElectiveSign from './electiveSign'
 import { mapGetters } from 'vuex'
  export default {
-   components:{MxCondition,Report},
+   components:{MxCondition,Report,ElectiveSign},
    mixins:[RoundSelect],
    data(){
      return{
        dialogVisible:false,
-       isShow:false,
        rows: [],
        requireFields: ['year', 'roundId'],
        queryParams: {
@@ -138,21 +140,11 @@ import { mapGetters } from 'vuex'
          this.$message.warning(this.rows[0].statusText )
          return
        }
-       if(!this.isShow) {
-         this.isShow = true
-       }else {
-         this.$message.warning('已显示')
-       }
-
      },
-     toSign() {
-       if(this.isSign) {
-         this.$message.warning('已完成签名,可查看分班信息')
-         return
-       }
-       this.$Dialog('ElectiveSign',{flowId:this.rows[0].flowId},() => {
-          this.$message.success('已完成签名')
-          this.handleQuery()
+     handleGenerate() {
+       this.$refs.sign.handleGenerate(res=> {
+         this.dialogVisible = false
+         this.getInfo()
        })
      },
      handleInvalidQuery() {

src/views/career/bigdataSelectCourse/report.vue

@@ -1,33 +1,86 @@
 <template>
-  <div class="report">
-    <p>{{nickName}}同学：</p>
+  <div class="report f16">
+    <p>{{ nickName }}同学：</p>
     <p>您好!</p>
     <div>您所在的学校开设了
-      <span v-for="item in stepOne">，{{`${item.groupName}(${item.classCount}个班级)(${item.count})`}}</span>，
-      <span>共计{{stepOne.length}}个组合。</span>
+      <span v-for="item in stepOne">，{{ `${item.groupName}(${item.classCount}个班级)(${item.count})` }}</span>，
+      <span>共计{{ stepOne.length }}个组合。</span>
     </div>
-    <div v-for="(result,index) in allResult">
-      <template v-if="index <= allResult.findIndex(item => item.isEnroll)">
-        <!-- 已录取 -->
-        <div v-if="result.isEnroll">
-          <span>您在{{ result.name }}时报选了</span><span class="f-primary"> {{result.groupList.map(item=> item.groupName).toString(',')}} </span>组合
-          您在{{result.name}}阶段被 <span class="f-primary"> {{result.groupList.filter(item => item.approved).map(item=> item.groupName).toString(',')}} </span>组合录取
-        </div>
-        <!--    未录取   -->
-        <div v-else>
-          <div>
-            您在{{ result.name }}时报选了<span class="f-red"> {{result.groupList.map(item=> item.groupName).toString(',')}} </span> 组合
-            ，您在{{ result.name }}未被 <span class="f-red"> {{result.groupList.map(item=> item.groupName).toString(',')}} </span> 组合录取
+<!--    <div v-for="(result,index) in allResult">-->
+<!--      <template v-if="index <= allResult.findIndex(item => item.isEnroll)">-->
+<!--        &lt;!&ndash; 已录取 &ndash;&gt;-->
+<!--        <div v-if="result.isEnroll">-->
+<!--          <span>您在{{ result.name }}时报选了</span><span class="f-primary"-->
+<!--        > {{ result.groupList.map(item => item.groupName).toString(',') }} </span>组合-->
+<!--          您在{{ result.name }}阶段被 <span class="f-primary"-->
+<!--        > {{ result.groupList.filter(item => item.approved).map(item => item.groupName).toString(',') }} </span>组合录取-->
+<!--        </div>-->
+<!--        &lt;!&ndash;    未录取   &ndash;&gt;-->
+<!--        <div v-else>-->
+<!--          <div>-->
+<!--            您在{{ result.name }}时报选了<span class="f-red"-->
+<!--          > {{ result.groupList.map(item => item.groupName).toString(',') }} </span> 组合-->
+<!--            ，您在{{ result.name }}未被 <span class="f-red"-->
+<!--          > {{ result.groupList.map(item => item.groupName).toString(',') }} </span> 组合录取-->
+<!--          </div>-->
+<!--          <div>-->
+<!--            您在{{ result.name }}未被录取,系统推荐您选报 <span class="f-primary"-->
+<!--          >{{ result.model.find(item => item.nextRecommend) ? result.model.find(item => item.nextRecommend).groupName : '' }}</span>-->
+<!--            组合-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </template>-->
+<!--    </div>-->
+
+    <el-steps direction="vertical"  >
+      <template v-for="(result,index) in allResult">
+        <el-step v-if="index <= allResult.findIndex(item => item.isEnroll)" status="process">
+          <div slot="description" class="f16">
+            <!-- 已录取 -->
+            <div v-if="result.isEnroll">
+              <div v-if="result.model.find(item => item.forceAdjusted)">
+                 您被调剂至<span class="f-primary"> {{ result.groupList.map(item => item.groupName).toString(',') }} </span>组合
+              </div>
+              <div v-else>
+                <span>您在{{ result.name }}时报选了</span><span class="f-primary"
+              > {{ result.groupList.map(item => item.groupName).toString(',') }} </span>组合
+                您在{{ result.name }}阶段被 <span class="f-primary"
+              > {{ result.groupList.filter(item => item.approved).map(item => item.groupName).toString(',') }} </span>组合录取
+              </div>
+            </div>
+            <!--    未录取   -->
+            <div v-else>
+              <div>
+                您在{{ result.name }}时{{applyType(result.groupList)}}
+                <span class="f-red">
+                  {{ result.groupList.map(item => item.groupName).toString(',') }}
+                </span>
+                ， 由于条件不符未被录取
+              </div>
+              <div>
+                您在{{ result.name }}未被录取,
+                <span v-if="result.name == '二次补录报名'">
+                  您将在调剂阶段调剂录取
+                </span>
+                <span v-else>
+                  系统推荐您选报
+                  <span class="f-primary">
+                   {{ result.model.find(item => item.nextRecommend) ? result.model.find(item => item.nextRecommend).groupName : '' }}</span>
+                  组合参与{{allResult[index + 1].name}}
+                </span>
+              </div>
+            </div>
           </div>
-          <div>
-            您在{{result.name}}未被录取,系统推荐您选报 <span class="f-primary">{{result.model.find(item => item.nextRecommend) ?  result.model.find(item => item.nextRecommend).groupName : ''}}</span> 组合
+        </el-step>
+      </template>
+      <template>
+        <el-step status="process">
+          <div slot="description" class="f16">
+            选科完成后您将从原{{ dispatchInfo.originalClassName }}班，重新分班至{{ dispatchInfo.className }}班。
           </div>
-        </div>
+        </el-step>
       </template>
-    </div>
-    <div>
-      选科完成后您将从原{{dispatchInfo.originalClassName}}班，重新分班至{{dispatchInfo.className}}班。
-    </div>
+    </el-steps>
   </div>
 </template>
 
@@ -38,23 +91,26 @@ import ElectiveTableMixin from '@/views/elective/select/components/elective-tabl
 import ElectiveEnrollInfo from '@/views/elective/select/components/elective-enroll-info'
 
 export default {
-  components:{ElectiveEnrollInfo},
-  mixins:[ElectiveTableMixin],
-  data(){
+  components: { ElectiveEnrollInfo },
+  mixins: [ElectiveTableMixin],
+  data() {
     return {}
   },
-  props:{
+  props: {
     generation: Object,
     optionalMajors: { type: Array, default: () => [] },
-    dispatchInfo:{ type: Object, default: () => {} },
+    dispatchInfo: {
+      type: Object, default: () => {
+      }
+    }
   },
-  computed:{
+  computed: {
     ...mapGetters(['nickName']),
     stepOne() {
       return this.generation.models[0].models.map(item => {
         return {
           groupName: item.groupName,
-          classCount:item.classCount,
+          classCount: item.classCount,
           count: item.actualCount
         }
       })
@@ -62,39 +118,44 @@ export default {
     allResult() {
       let options = [
         {
-          key:'primaryDM',
-          value:'初录报名'
-      },
-        { key:'backTrackingDM',
-          value:'补录报名'
+          key: 'primaryDM',
+          value: '初录报名'
+        },
+        {
+          key: 'backTrackingDM',
+          value: '补录报名'
         },
-        { key:'finalAdjustDM',
-          value:'二次补录报名'
+        {
+          key: 'finalAdjustDM',
+          value: '二次补录报名'
         },
-        { key:'forceAdjust',
-          value:'调剂'
-        },]
+        {
+          key: 'forceAdjust',
+          value: '调剂'
+        }]
       return options.map(item => {
-        console.log(item)
-        let result = this.generation.models.find(i => i.generation ==  this.generation.options[item.key].value)
-        let name =  item.value
+        let result = this.generation.models.find(i => i.generation == this.generation.options[item.key].value)
+        let name = item.value
         return {
           groupList: result.selectedList,
-          isEnroll: result.selectedList.findIndex(i => i.approved) != -1,
+          isEnroll: result.selectedList.findIndex(group => this.isGroupEnrolled(group)) != -1,
           name: name,
-          model:result.models
+          model: result.models
         }
       })
-    },
+    }
   },
   methods: {
-
+    applyType(model){
+      if(!model.length) return '未填报'
+      return model.find(group => this.isGroupRejected(group)) ? '拒绝填报' : '报选了'
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-.report{
-  div{
+.report {
+  div {
     margin-bottom: 10px;
   }
 }