feature: 新增成绩单功能

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "dev-build": "vue-cli-service build --mode dev"

src/api/index.js

@@ -72,3 +72,11 @@ export function getCourses(data) {
     method: 'get'
   })
 }
+// 获取成绩单
+export function getTranscript(params) {
+  return httpRequest({
+    url: `/api/ehall/v2/lobby/havereport`,
+    method: 'get',
+    params
+  })
+}

src/components/Form.vue

@@ -44,6 +44,7 @@
         <!-- 文本框 -->
         <van-field
           :border="false"
+          :disabled="disabled"
           v-bind="item"
           v-model="ruleForm[item.name]"
           v-else
@@ -78,6 +79,7 @@ export default {
   name: 'VForm',
   components: { Upload },
   props: {
+    disabled: { type: Boolean, default: false },
     model: {
       type: Object,
       default() {

src/components/Layout.vue

@@ -9,7 +9,7 @@
           <ul class="menu-list">
             <li @click="toPage({ name: 'index' })">首页</li>
             <li
-              v-for="item in affairTypes"
+              v-for="item in menus"
               :key="item.id"
               @click="
                 toPage({
@@ -20,6 +20,7 @@
             >
               {{ item.affair_name }}
             </li>
+            <li @click="toPage({ name: 'transcriptIndex' })">成绩单</li>
             <li @click="$router.back()">返回上一页</li>
           </ul>
         </div>
@@ -42,6 +43,11 @@ export default {
   computed: {
     affairTypes() {
       return this.$store.state.affairTypes
+    },
+    menus() {
+      return this.affairTypes.filter(
+        item => !['pareport', 'elreport'].includes(item.form_name)
+      )
     }
   },
   methods: {

src/router/index.js

@@ -43,6 +43,22 @@ const routes = [
     children: [
       { name: 'view', path: '', component: () => import('@/views/View.vue') }
     ]
+  },
+  {
+    path: '/transcript',
+    component: Layout,
+    children: [
+      {
+        name: 'transcriptIndex',
+        path: '',
+        component: () => import('@/views/transcript/Index.vue')
+      },
+      {
+        name: 'transcriptCreate',
+        path: 'create',
+        component: () => import('@/views/transcript/Create.vue')
+      }
+    ]
   }
 ]
 

src/views/Index.vue

@@ -3,7 +3,7 @@
     <h2 class="choose-title">请选择事务</h2>
     <div class="choose-list">
       <van-radio-group v-model="radio">
-        <div class="choose-item" v-for="item in affairTypes" :key="item.value">
+        <div class="choose-item" v-for="item in chooseList" :key="item.value">
           <van-radio :name="item.id">{{ item.affair_name }}</van-radio>
         </div>
       </van-radio-group>
@@ -28,6 +28,23 @@ export default {
     },
     currentItem() {
       return this.affairTypes.find(item => item.id === this.radio)
+    },
+    // 成绩单列表
+    transcriptList() {
+      return this.affairTypes.filter(item =>
+        ['pareport', 'elreport'].includes(item.form_name)
+      )
+    },
+    chooseList() {
+      let list = this.affairTypes.filter(
+        item => !['pareport', 'elreport'].includes(item.form_name)
+      )
+      list.push({
+        id: 'transcript',
+        affair_name: '成绩单',
+        children: this.transcriptList
+      })
+      return list
     }
   },
   methods: {
@@ -36,6 +53,11 @@ export default {
         this.$toast('请选择事务')
         return
       }
+      // 成绩单
+      if (this.radio === 'transcript') {
+        this.$router.push({ name: 'transcriptIndex' })
+        return
+      }
       this.$router.push({
         name: 'list',
         query: Object.assign(this.$route.query, {

src/views/transcript/Create.vue

+<template>
+  <div class="main">
+    <v-form
+      ref="form"
+      :model="formModel"
+      :fields="page.form.fields"
+      :disabled="isSubmited"
+      @submit="onSubmit"
+    ></v-form>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" v-if="isSubmited">已提交</div>
+        <div class="fixed-button" @click="handleSubmit" v-else>提交</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VForm from '@/components/Form'
+import * as api from '@/api/index'
+const pages = {
+  pareport: {
+    title: '纸质成绩单',
+    form: {
+      fields: [
+        {
+          name: 'personal_name',
+          label: '姓名',
+          required: true,
+          placeholder: '请输入姓名',
+          rules: [{ required: true, message: '请输入姓名' }]
+        },
+        {
+          name: 'class_name',
+          label: '班级',
+          required: true,
+          placeholder: '请输入班级',
+          rules: [{ required: true, message: '请输入班级' }]
+        },
+        {
+          type: 'digit',
+          name: 'sofia_id',
+          label: 'Sofia ID',
+          required: true,
+          placeholder: '请输入班级',
+          rules: [{ required: true, message: '请输入Sofia ID' }]
+        },
+        {
+          type: 'tel',
+          name: 'telephone',
+          label: '电话',
+          required: true,
+          placeholder: '请输入班级',
+          rules: [{ required: true, message: '请输入电话' }]
+        },
+        {
+          name: 'email',
+          label: '邮寄地址',
+          required: true,
+          placeholder: '请输入邮寄地址',
+          rules: [{ required: true, message: '请输入邮寄地址' }]
+        },
+        {
+          type: 'digit',
+          name: 'number',
+          label: '需打印的份数',
+          required: true,
+          placeholder: '请输入需打印的份数',
+          rules: [{ required: true, message: '请输入需打印的份数' }]
+        }
+      ]
+    }
+  },
+  elreport: {
+    title: '电子成绩单',
+    form: {
+      fields: [
+        {
+          name: 'personal_name',
+          label: '姓名',
+          required: true,
+          placeholder: '请输入姓名',
+          rules: [{ required: true, message: '请输入姓名' }]
+        },
+        {
+          name: 'class_name',
+          label: '班级',
+          required: true,
+          placeholder: '请输入班级',
+          rules: [{ required: true, message: '请输入班级' }]
+        },
+        {
+          type: 'digit',
+          name: 'sofia_id',
+          label: 'Sofia ID',
+          required: true,
+          placeholder: '请输入班级',
+          rules: [{ required: true, message: '请输入Sofia ID' }]
+        },
+        {
+          name: 'email',
+          label: '邮箱',
+          required: true,
+          placeholder: '请输入邮箱',
+          rules: [{ required: true, message: '请输入邮箱' }]
+        }
+      ]
+    }
+  }
+}
+export default {
+  name: 'Create',
+  components: { VForm },
+  metaInfo() {
+    return {
+      title: this.page.title
+    }
+  },
+  data() {
+    return {
+      formModel: {}
+    }
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      deep: true,
+      handler(route) {
+        if (!route.query.channel) {
+          this.$dialog
+            .alert({
+              message: '请选择事务'
+            })
+            .then(() => {
+              this.$router.replace({
+                name: 'index',
+                query: this.$route.query
+              })
+            })
+        }
+      }
+    }
+  },
+  computed: {
+    // 页面配置
+    page() {
+      return pages[this.channel] ? pages[this.channel] : {}
+    },
+    channel() {
+      return this.$route.query.channel
+    },
+    channelId() {
+      return this.$route.query.channel_id
+    },
+    isSubmited() {
+      return this.formModel.submit === 1
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.submit()
+    },
+    onSubmit(data) {
+      data.affair_id = this.channelId
+      api.createAffair(data).then(response => {
+        if (response.success) {
+          this.$dialog
+            .alert({ confirmButtonText: '确定', message: '提交成功' })
+            .then(() => {
+              this.getDetail()
+            })
+        } else {
+          this.$toast(response.message)
+        }
+      })
+    },
+    // 获取详情
+    getDetail() {
+      api.getTranscript({ type: this.channel }).then(response => {
+        this.formModel = response
+      })
+    }
+  },
+  beforeMount() {
+    this.getDetail()
+  }
+}
+</script>

src/views/transcript/Index.vue

+<template>
+  <div class="choose">
+    <div class="choose-list">
+      <van-radio-group v-model="radio">
+        <div
+          class="choose-item"
+          v-for="item in transcriptList"
+          :key="item.value"
+        >
+          <van-radio :name="item.id">{{ item.affair_name }}</van-radio>
+        </div>
+      </van-radio-group>
+    </div>
+    <div class="fixed-box">
+      <div class="fixed-inner">
+        <div class="fixed-button" @click="toListPage">下一步</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  metaInfo: { title: '成绩单' },
+  data() {
+    return {
+      radio: ''
+    }
+  },
+  computed: {
+    // 所有类型
+    affairTypes() {
+      return this.$store.state.affairTypes
+    },
+    currentItem() {
+      return this.affairTypes.find(item => item.id === this.radio)
+    },
+    // 成绩单列表
+    transcriptList() {
+      return this.affairTypes.filter(item =>
+        ['pareport', 'elreport'].includes(item.form_name)
+      )
+    }
+  },
+  methods: {
+    toListPage() {
+      if (!this.radio) {
+        this.$toast('请选择成绩单类型')
+        return
+      }
+      this.$router.push({
+        name: 'transcriptCreate',
+        query: Object.assign(this.$route.query, {
+          channel: this.currentItem.form_name,
+          channel_id: this.radio
+        })
+      })
+    },
+    getList() {
+      if (this.affairTypes.length) {
+        const [first] = this.affairTypes
+        this.radio = first.id
+      } else {
+        this.$store.dispatch('getAffairTypes')
+      }
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.choose {
+  padding: 0 30px;
+}
+.choose-title {
+  font-size: 19px;
+  font-weight: normal;
+}
+.choose-list {
+  margin-top: 46px;
+}
+.choose-item {
+  margin-bottom: 50px;
+}
+</style>