Merge branch 'master' into sofia

src/modules/offices/api/index.js

@@ -102,3 +102,18 @@ export function uploadFile(data) {
     headers: { 'Content-Type': 'multipart/form-data' }
   })
 }
+
+// 获取毕业典礼订单列表
+export function getGraduationOrderList(data) {
+  return httpRequest.get('/api/pay/v1/order/my', data)
+}
+
+// 获取毕业典礼商品列表
+export function getGraduationProductList(data) {
+  return httpRequest.get('/api/pay/v1/product/params-details', data)
+}
+
+// 多个商品合并为一个商品
+export function mergeGraduationProduct(data) {
+  return httpRequest.post('/api/pay/v1/product/create-by-details', data)
+}

src/modules/offices/routes.js

@@ -7,6 +7,7 @@ import PauseStudyEdit from './src/studyPause/edit.vue'
 import ContinueStudyEdit from './src/studyContinue/edit.vue'
 import SchoolCertEdit from './src/certSchool/edit.vue'
 import StudyCertEdit from './src/certStudy/edit.vue'
+import GraduationEdit from './src/graduation/edit.vue'
 
 export default [
   {
@@ -96,7 +97,13 @@ export default [
        */
       { name: 'studyCertAdd', path: 'study_cret/add', component: StudyCertEdit },
       { name: 'studyCertEdit', path: 'study_cret/edit/:id', component: StudyCertEdit, props: { isEdit: true } },
-      { name: 'studyCertView', path: 'study_cret/view/:id', component: StudyCertEdit, props: { isView: true } }
+      { name: 'studyCertView', path: 'study_cret/view/:id', component: StudyCertEdit, props: { isView: true } },
+      /**
+       * 毕业典礼
+       */
+      { name: 'graduationAdd', path: 'graduation/add', component: GraduationEdit },
+      { name: 'graduationEdit', path: 'graduation/edit/:id', component: GraduationEdit, props: { isEdit: true } },
+      { name: 'graduationView', path: 'graduation/view/:id', component: GraduationEdit, props: { isView: true } }
     ]
   }
 ]

src/modules/offices/src/graduation/edit.vue

+<template>
+  <div>
+    <div class="con-title">毕业典礼申请</div>
+    <div class="con-box">
+      <el-button type="text" @click="goBack">返回列表</el-button>
+      <div class="main-form">
+        <el-form label-width="100px" ref="ruleForm" :model="ruleForm" :rules="rules">
+          <el-form-item label="本人参与方式" prop="product_id">
+            <el-radio-group v-model="ruleForm.product_id" size="small">
+              <el-radio border :label="item.id" v-for="item in selfProductList" :key="item.id">
+                {{ item.name }}
+              </el-radio>
+              <el-radio border>其他</el-radio>
+            </el-radio-group>
+            <el-popover placement="top-start" width="400" trigger="hover">
+              <i class="el-icon-question" slot="reference"></i>
+              <div>
+                <ol>
+                  <li v-for="item in selfProductList" :key="item.id">
+                    {{ item.name }}：{{ item.desc }} {{ item.price / 100 }}元
+                  </li>
+                </ol>
+              </div>
+            </el-popover>
+          </el-form-item>
+          <template v-if="ruleForm.product_id">
+            <el-form-item label="姓名" prop="personal_name">
+              <el-input v-model="ruleForm.personal_name" />
+            </el-form-item>
+            <el-form-item label="手机号" prop="telephone">
+              <el-input v-model="ruleForm.telephone" />
+            </el-form-item>
+            <el-form-item label="班级" prop="class_name">
+              <el-input v-model="ruleForm.class_name" />
+            </el-form-item>
+            <el-form-item label="邮寄地址" prop="address">
+              <el-input type="textarea" v-model="ruleForm.address" />
+            </el-form-item>
+          </template>
+          <el-form-item label="添加随同" prop="has_children">
+            <el-radio-group v-model="ruleForm.has_children" size="small">
+              <el-radio :label="0">否</el-radio>
+              <el-radio :label="1">是</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <template v-if="ruleForm.has_children">
+            <div class="children" v-for="(child, index) in ruleForm.children" :key="index">
+              <i class="el-icon-error" @click="handleRemoveChild(index)"></i>
+              <el-form-item
+                label="随同关系"
+                :prop="'children.' + index + '.product_id'"
+                :rules="{ required: true, message: '请选择', trigger: 'blur' }"
+              >
+                <el-select v-model="child.product_id">
+                  <el-option
+                    :value="item.id"
+                    :label="item.name"
+                    :key="item.id"
+                    v-for="item in otherProductList"
+                  ></el-option>
+                </el-select>
+                <el-popover placement="top-start" width="400" trigger="hover">
+                  <i class="el-icon-question" slot="reference"></i>
+                  <div>
+                    <ol>
+                      <li v-for="item in otherProductList" :key="item.id">
+                        {{ item.name }}：{{ item.desc }} {{ item.price / 100 }}元
+                      </li>
+                    </ol>
+                  </div>
+                </el-popover>
+              </el-form-item>
+              <el-form-item
+                label="姓名"
+                :prop="'children.' + index + '.personal_name'"
+                :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"
+              >
+                <el-input v-model="child.personal_name" />
+              </el-form-item>
+              <el-form-item
+                label="手机号"
+                :prop="'children.' + index + '.telephone'"
+                :rules="{ required: true, message: '请输入手机号', trigger: 'blur' }"
+              >
+                <el-input v-model="child.telephone" />
+              </el-form-item>
+            </div>
+            <div style="text-align: right">
+              <el-button type="text" @click="handleAddChild">新增随同</el-button>
+            </div>
+          </template>
+          <el-form-item label="支付方式" prop="payment">
+            <el-radio-group v-model="ruleForm.payment">
+              <el-radio :label="item.value" v-for="item in payList" :key="item.value">{{ item.label }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="支付金额" prop="payment"><em class="price">￥</em>{{ payPrice }} </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :disabled="disabled" @click="handleSubmit">立即支付</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <el-dialog title="支付" width="400px" :visible.sync="payVisible">
+      <pay :payment="ruleForm.payment" :productId="productId" @success="handlePaySuccess" v-if="payVisible"></pay>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '../../api'
+import Pay from '../../components/pay'
+export default {
+  components: { Pay },
+  data() {
+    return {
+      productList: [],
+      ruleForm: {
+        product_id: '',
+        personal_name: '',
+        telephone: '',
+        class_name: '',
+        address: '',
+        has_children: 0,
+        payment: '2',
+        children: [{ product_id: '', personal_name: '', telephone: '' }]
+      },
+      rules: {
+        personal_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
+        telephone: [{ required: true, message: '请输入您的手机号', trigger: 'blur' }],
+        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }]
+        // address: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
+      },
+      payList: [
+        { label: '微信支付', value: '2' },
+        { label: '支付宝支付', value: '1' }
+      ],
+      payVisible: false,
+      submitDisabled: false,
+      productId: ''
+    }
+  },
+  computed: {
+    affairId() {
+      return this.$route.query.id
+    },
+    selfProductList() {
+      return this.productList.filter((item, index) => index < 3)
+    },
+    otherProductList() {
+      return this.productList.filter((item, index) => index >= 3)
+    },
+    disabled() {
+      return (!this.ruleForm.product_id && !this.ruleForm.has_children) || this.submitDisabled
+    },
+    payPrice() {
+      let price = 0
+      if (this.ruleForm.product_id) {
+        const found = this.productList.find(item => item.id === this.ruleForm.product_id)
+        price += parseFloat(found.price)
+      }
+      if (this.ruleForm.has_children && this.ruleForm.children.length) {
+        this.ruleForm.children.forEach(item => {
+          if (item.product_id) {
+            const found = this.productList.find(product => product.id === item.product_id)
+            price += parseFloat(found.price)
+          }
+        })
+      }
+      return price / 100
+    }
+  },
+  methods: {
+    // 返回
+    goBack() {
+      this.$router.push({ path: '/app/offices', query: { id: this.affairId } })
+    },
+    // 获取学生信息
+    getStudent() {
+      api.getStudent().then(response => {
+        const data = this.$_.pick(response, ['personal_name', 'telephone', 'class_name', 'address'])
+        Object.assign(this.ruleForm, data)
+      })
+    },
+    getProductList() {
+      api.getGraduationProductList().then(response => {
+        const { list = [] } = response
+        const [first] = list
+        this.productList = list
+        if (first) {
+          this.ruleForm.product_id = first.id
+        }
+      })
+    },
+    // 添加随同
+    handleAddChild() {
+      this.ruleForm.children.push({ product_id: '', personal_name: '', telephone: '' })
+    },
+    // 删除随同
+    handleRemoveChild(index) {
+      this.ruleForm.children.splice(index, 1)
+      if (!this.ruleForm.children.length) {
+        this.ruleForm.has_children = 0
+      }
+    },
+    // 提交
+    handleSubmit() {
+      this.$refs.ruleForm.validate().then(this.mergeProduct)
+    },
+    // 合并商品
+    mergeProduct() {
+      const params = []
+      // 个人商品数据
+      if (this.ruleForm.product_id) {
+        const product = this.productList.find(product => product.id === this.ruleForm.product_id)
+        params.push({
+          id: this.ruleForm.product_id,
+          num: 1,
+          comment: `${product.name}:${product.desc}`,
+          personal_name: this.ruleForm.personal_name,
+          telephone: this.ruleForm.telephone,
+          class_name: this.ruleForm.class_name,
+          address: this.ruleForm.address,
+          has_children: this.ruleForm.has_children,
+          is_self: 1,
+          product: JSON.stringify(product)
+        })
+      }
+      // 随同商品数据
+      if (this.ruleForm.has_children && this.ruleForm.children.length) {
+        this.ruleForm.children.forEach(item => {
+          const product = this.productList.find(product => product.id === item.product_id)
+          params.push(
+            Object.assign(
+              {
+                id: item.product_id,
+                num: 1,
+                comment: `${product.name}:${product.desc}`,
+                product: JSON.stringify(product)
+              },
+              item
+            )
+          )
+        })
+      }
+      this.submitDisabled = true
+      api
+        .mergeGraduationProduct({ params })
+        .then(response => {
+          this.productId = response.product_id
+          this.payVisible = true
+        })
+        .finally(() => {
+          this.submitDisabled = false
+        })
+    },
+    handlePaySuccess() {
+      this.$message({ type: 'success', message: '支付成功' })
+      this.payVisible = false
+      this.$router.replace({ path: '/app/offices', query: { id: this.affairId } })
+    }
+  },
+  beforeMount() {
+    // 获取学生信息
+    this.getStudent()
+    this.getProductList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-form {
+  max-width: 600px;
+  margin: 0 auto;
+}
+.price {
+  font-style: normal;
+  color: #b80037;
+  font-size: 20px;
+}
+.children {
+  position: relative;
+  padding: 20px 0;
+  border-top: 1px solid #dcdfe6;
+  &:hover {
+    padding: 20px 20px 20px 0;
+    background-color: #dcdfe6;
+    .el-icon-error {
+      display: block;
+    }
+  }
+  .el-icon-error {
+    display: none;
+    position: absolute;
+    right: -10px;
+    top: -10px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+.el-icon-question {
+  font-size: 20px;
+}
+.el-radio.is-bordered {
+  margin-right: 10px;
+}
+</style>

src/modules/offices/src/graduation/list.vue

+<template>
+  <div>
+    <el-button type="primary" @click="handleAdd">申请活动</el-button>
+    <div style="height: 20px"></div>
+    <el-table border :data="list" style="width: 100%">
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" class="table-expand" v-if="props.row.others.length">
+            <template v-for="(item, index) in props.row.others">
+              <div class="table-expand-item" :key="index">
+                <el-form-item label="随同关系" v-if="item.product">
+                  <span>{{ item.product.name }}</span>
+                </el-form-item>
+                <el-form-item label="姓名">
+                  <span>{{ item.personal_name }}</span>
+                </el-form-item>
+                <el-form-item label="手机号">
+                  <span>{{ item.telephone }}</span>
+                </el-form-item>
+              </div>
+            </template>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column label="姓名" prop="personal.personal_name"></el-table-column>
+      <el-table-column label="参与方式" prop="personal.product.name"></el-table-column>
+      <el-table-column label="手机号" prop="personal.telephone"></el-table-column>
+      <el-table-column label="班级" prop="personal.class_name"></el-table-column>
+      <el-table-column label="支付方式" prop="type">
+        <template slot-scope="props">{{ props.row.type === 1 ? '微信' : '支付宝' }}</template>
+      </el-table-column>
+      <el-table-column label="支付状态" prop="status">
+        <template slot-scope="props">{{ props.row.status === 1 ? '已支付' : '未支付' }}</template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page.sync="page.currentPage"
+      layout="total, prev, pager, next, jumper"
+      :total="page.total"
+      :page-size="page.size"
+      :hide-on-single-page="true"
+      @current-change="handleCurrentChange"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+import * as api from '../../api/index'
+export default {
+  props: { affairId: { type: String } },
+  data() {
+    return {
+      list: [],
+      page: { currentPage: 1, total: 0, size: 20 }
+    }
+  },
+  methods: {
+    handleAdd() {
+      this.$router.push({ name: 'graduationAdd', query: { id: this.affairId } })
+    },
+    getList() {
+      api.getGraduationOrderList({ product_type_id: 1000, page: this.page.currentPage }).then(response => {
+        const { list, total } = response
+        this.page.total = total
+        this.list = list.map(item => {
+          let list = item.product_desc ? JSON.parse(item.product_desc) || [] : []
+          list = list.map(item => {
+            item.product = item.product ? JSON.parse(item.product) || {} : {}
+            return item
+          })
+          const [personal, ...others] = list
+          item.personal = personal
+          item.others = others || []
+          return item
+        })
+      })
+    },
+    handleCurrentChange() {
+      this.getList()
+    }
+  },
+  beforeMount() {
+    this.getList()
+  }
+}
+</script>
+
+<style scoped>
+.table-expand {
+  font-size: 0;
+}
+.table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+.table-expand-item + .table-expand-item {
+  border-top: 1px solid #ebeef5;
+}
+.el-pagination {
+  padding: 20px 0;
+  text-align: right;
+}
+</style>

src/modules/offices/src/index.vue

@@ -31,6 +31,8 @@ import ContinueStudyList from './studyContinue/list'
 import JobCertList from './certSchool/list'
 // 在读证明
 import StudyCertList from './certStudy/list'
+// 毕业典礼
+import GraduationList from './graduation/list'
 
 export default {
   components: {
@@ -43,7 +45,8 @@ export default {
     PauseStudyList,
     ContinueStudyList,
     JobCertList,
-    StudyCertList
+    StudyCertList,
+    GraduationList
   },
   data() {
     return {
@@ -77,7 +80,8 @@ export default {
         suspend: 'PauseStudyList',
         return: 'ContinueStudyList',
         job_certification: 'JobCertList',
-        learn_certification: 'StudyCertList'
+        learn_certification: 'StudyCertList',
+        graduation: 'GraduationList'
       }
       return components[this.active.form_name]
     }
@@ -85,6 +89,7 @@ export default {
   methods: {
     getTypes() {
       api.getAffairType().then(response => {
+        response = response.concat([{ affair_name: '毕业典礼', form_name: 'graduation', id: 'graduation' }])
         const [first = {}] = response
         this.active = first
         this.types = response