module=5

TODO.md

@@ -1,13 +1,17 @@
 # 钉钉办公系统 - 待办事项
 
 
-### overpage.
+### 前端TODO
 
+* [ ] 上传文件/图片等模块
+* [ ] 审批详情 底部的 各种功能ICONS 需要设计师给予
+* [ ] 审批详情 顶部 ICON需要 设计切图
 
-
-### 需要后端处理
+### 需要后端处理 才能做的
 
 * [ ] 我的申请记录缺少时间查询字段
-* [ ] 个人申请详情无法查看
+* [x] 个人申请详情无法查看
 * [ ] 我的出差-详情页面缺少 发起人字段
+* [ ] 我的出差-详情页面 流程中缺少发起人数据
+* [ ] 抄送人是否查看的字段
 

src/App.vue

@@ -8,6 +8,7 @@
 
 <script>
 import TabBar from '@/components/TabBar'
+// import store from './store';
 // import NavBar from '@/components/NavBar'
 export default {
   components: {
@@ -47,6 +48,9 @@ export default {
     }
   },
   created() {
+    if (!this.$store.state.enum.evectionTypeList) {
+      this.$store.dispatch('enum/getTypeList')
+    }
   }
 
 }

src/api/approveinfo.js

@@ -25,7 +25,6 @@ export const getDetail = data => (request({
     data
 }))
 
-
 // 获取申请信息 - 重新发起时使用
 export const getInfo = data => (request({
     method: 'POST',

src/api/common.js

@@ -3,6 +3,13 @@
  */
 import request from '@/utils/request'
 
+// 各种类型集合
+export const getTypeList = () => (request({
+    method: "POST",
+    url: "common/get_type_list"
+}))
+
+/*
 // 获取出差类型(室内室外)
 export const getAwayType = () => (request({
     method: 'POST',
@@ -56,4 +63,5 @@ export const getMaintainTypeList = () => (request({
 export const getContractTypeList = () => (request({
     method: 'POST',
     url: 'get_contract_type_list'
-}))
+}))
+*/

src/store/modules/enum.js

@@ -0,0 +1,168 @@
+/**
+ * @description store enum （枚举页面）各种配置枚举
+ */
+
+import {
+    getTypeList,
+} from "@/api/common" /* eslint-disable-line */
+
+const state = {
+    evectionTypeList: null, // 出差列表
+    moduleList: null, // 模块列表
+    degreeList: null, // 缓急程度
+    applyTypeList: null, // 采购类型
+    applyPayTypeList: null, // 采购支付类型
+    offerTypeList: null, // 呈批类型
+    leaveTypeList: null, // 请假类型
+    maintainTypeList: null, // 维修类型
+    contractTypeList: null, // 合同类型
+
+    // 1=待审批,2=审批中,3=审批通过,4=审批拒绝  
+    // NOTE: 审批信息中的审核流程枚举
+    approveFlowPathEnum: [undefined, '待审核', '审核中', '已通过', '已驳回'],
+
+    // :2=审批中,3=审批通过,4=审批驳回,5=审批撤销  
+    // NOTE: 申请`status`枚举
+    approveInfoEnum: [],
+    enumIsYesOrNo: [
+        {
+            id: 0,
+            name: '否'
+        },
+        {
+            id: 1,
+            name: '是'
+        }
+    ]
+}
+
+const getters = {
+    // NOTE: 审核流程枚举
+    getApproveFlowPathEnum: state => (status) => {
+        if (![1, 2, 3, 4].includes(status)) return 'unknow'
+        return state.approveFlowPathEnum[status]
+    }
+}
+
+const mutations = {
+    // NOTE: 出差类型
+    SET_EVECTION_TYPE_LIST(state, paylod) {
+        state.evectionTypeList = [...paylod.list]
+    },
+    // NOTE: 模块列表
+    SET_MODULE_LIST(state, paylod) {
+        state.moduleList = [...paylod.list]
+    },
+    // NOTE: 缓急程度
+    SET_DEGREE_LIST(state, paylod) {
+        state.degreeList = [...paylod.list]
+    },
+    // NOTE: 采购类型
+    SET_APPLY_TYPE_LIST(state, paylod) {
+        state.applyTypeList = [...paylod.list]
+    },
+    // NOTE: 采购支付类型
+    SET_APPLY_PAY_TYPE_LIST(state, paylod) {
+        state.applyPayTypeList = [...paylod.list]
+    },
+    // NOTE: 呈批类型
+    SET_OFFER_TYPE_LIST(state, paylod) {
+        state.offerTypeList = [...paylod.list]
+    },
+    // NOTE: 请假类型
+    SET_LEAVE_TYPE_LIST(state, paylod) {
+        state.leaveTypeList = [...paylod.list]
+    },
+    // NOTE: 维修类型
+    SET_MAINTAIN_TYPE_LIST(state, paylod) {
+        state.maintainTypeList = [...paylod.list]
+    },
+    // NOTE: 合同类型
+    SET_CONTRACT_TYPE_LIST(state, paylod) {
+        state.contractTypeList = [...paylod.list]
+    }
+}
+
+const actions = {
+    getTypeList({ commit }) {
+        return new Promise((resolve, reject) => {
+            getTypeList().then(result => {
+                if (result.code === 1) {
+                    const {
+                        module_list,
+                        degree_list,
+                        pay_type_list,
+                        data1,
+                        data2,
+                        data5,
+                        data6,
+                        data8,
+                        data9
+                    } = result.data
+                    commit({
+                        type: 'SET_EVECTION_TYPE_LIST',
+                        list: data5
+                    })
+                    commit({
+                        type: 'SET_MODULE_LIST',
+                        list: module_list
+                    })
+                    commit({
+                        type: 'SET_DEGREE_LIST',
+                        list: degree_list
+                    })
+                    commit({
+                        type: 'SET_APPLY_PAY_TYPE_LIST',
+                        list: pay_type_list
+                    })
+                    commit({
+                        type: 'SET_APPLY_TYPE_LIST',
+                        list: data1
+                    })
+                    commit({
+                        type: 'SET_OFFER_TYPE_LIST',
+                        list: data2
+                    })
+                    commit({
+                        type: 'SET_LEAVE_TYPE_LIST',
+                        list: data6
+                    })
+                    commit({
+                        type: 'SET_MAINTAIN_TYPE_LIST',
+                        list: data8
+                    })
+                    commit({
+                        type: 'SET_CONTRACT_TYPE_LIST',
+                        list: data9
+                    })
+                    resolve()
+                }
+            }).catch(error => reject(error))
+        })
+    },
+    // 获取出差类型
+    // getEvectionTypeList({ commit }) {
+    //     return new Promise((resolve, reject) => {
+    //         getAwayType().then(result => {
+    //             if (result.code === 1) {
+    //                 commit({
+    //                     type: 'SET_EVECTION_TYPE_LIST',
+    //                     list: result.data
+    //                 })
+    //                 resolve(result.data)
+    //             }
+    //         }).catch(error => {
+    //             console.log('getEvectionTypeList error>', error);
+    //             reject([])
+    //         })
+    //     })
+    // }
+}
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

src/views/applyfor/components/CInput.vue

@@ -6,11 +6,11 @@
         <div class="custom-input-container flex flex-row flex-row-aic">
             <van-field
                 class="input-padding"
-                v-model="inputValue"
+                :value="value"
                 :type="inputType"
                 :placeholder="$attrs.placeholder || '请输入'"
-                @input="handleInputEvent"
-                @clear="handleCloseInput"
+                @input="value => $emit('input', value)"
+                @clear="() => $emit('input', '')"
                 clearable
                 :maxlength="$attrs.maxlength || undefined"
                 show-word-limit
@@ -38,7 +38,6 @@ export default {
     components: {
         Layout
     },
-    
     props: {
         value: {
             type: String,
@@ -48,25 +47,6 @@ export default {
             type: String,
             default: 'text'
         }
-    },
-    
-    data () {
-        return {
-            inputValue: '',
-        }
-    },
-    methods: {
-        handleCloseInput () {
-            this.inputValue = ''
-            this.__call_emit__('')
-        },
-        handleInputEvent(value) {
-            this.inputValue = value
-            this.__call_emit__(value)
-        },
-        __call_emit__ (val) {
-            this.$emit('input', val)
-        }
     }
 }
 </script>

src/views/applyfor/components/IndexType5.vue

@@ -3,6 +3,7 @@
         <div class="btn-container" @click="handleNavRightBack">
             <div class="btn-span">我的出差</div>
         </div>
+
         <c-input
             title="填写事由"
             :required="true"
@@ -71,7 +72,6 @@
  */
 import { postCreateInfo } from '@/api/approveinfo'
 import Peers from './Peers.vue';
-import { getAwayTypeList } from '@/views/applyfor/js/type5'
 import indexComponentsMixins from '../js/IndexComponentsMixins'
 import indexMixin from '../indexMixins'
 
@@ -88,11 +88,25 @@ export default {
     components: {
         Peers
     },
+    props: {
+        editData: {
+            type: Object,
+            default: () => (null)
+        },
+        editId: {
+            type: Number,
+            default: 0
+        },
+        flag: {
+            type: String,
+            validator: flag => (['info', 'approve'].includes(flag))
+        }
+    },
 
     data() {
         return {
             formType: 5,
-            awayArr: [], // 出差类型
+            awayArr: this.$store.state.enum.evectionTypeList, // 出差类型
             
             // 必填字段
             requiredKey: [
@@ -103,6 +117,7 @@ export default {
                 // 是否出境需要在 type === 2 时才必传
             ],
 
+            // formData =========
             module: 5,
             id: undefined, // id存在，表示编辑
             reason: '', // 申请理由
@@ -124,6 +139,7 @@ export default {
             ],
             approve_user: '',
             copy_user: ''
+            // ===========================
         }
     },
     created () {
@@ -132,9 +148,41 @@ export default {
     },
     methods: {
         init () {
-            this.handleRenderType5Event()
             this.getCommonFlowPathData()
         },
+        // NOTE: 格式化编辑数据
+        handleFormatEditData (data) {
+            console.log('%c data---- >>>', 'background: blue; color: #fff', data);
+            const {
+                module_info,
+                id,
+                peerUser
+            } = data
+            const {
+                end_time,
+                is_who,
+                reason,
+                remark,
+                start_time,
+                type,
+                // document_text,
+                // images,
+                // images_text,
+                // info_id,
+                // document,
+            } = module_info /* eslint-disable-line */
+
+            this.id = id
+            this.peer_user = peerUser
+            this.reason = reason
+            this.start_time = start_time
+            this.end_time = end_time
+            this.type = type
+            this.remark = remark
+            this.is_who = is_who
+            
+
+        },
         navigationSetting () {
             settingNavigationTitle({
                 title: '出差申请'
@@ -232,7 +280,7 @@ export default {
                 remark: this.remark, // 备注
                 is_who: this.is_who,
                 peer_user: [ // 同行人员信息
-                    ...this.peer_user.map(item => ({ /* eslint-disable-line */
+                    ...this.peer_user.map(item => ({
                         is_who: item.xtype === 'inside' ? 0 : 1,
                         name: item.name,
                         desc: item.xtype === 'inside' ? item.selectDeptName : item.remark,
@@ -251,16 +299,15 @@ export default {
             }
             return params
         },
-        /**
-         * @description 获取出差类型
-         */
-        async handleRenderType5Event() {
-            try {
-                this.awayArr = await getAwayTypeList()
-            } catch (e) {
-                console.log(e);
-            }
-        },
+    },
+    watch: {
+        editData: {
+            handler (vals) {
+                if (vals) this.handleFormatEditData(vals)
+            },
+            deep: true,
+            immediate: true
+        }
     }
 }
 </script>

src/views/applyfor/index.vue

@@ -3,6 +3,9 @@
     <div class="apply-for-container">
         <component
             ref="rendeRef"
+            :flag="flag"
+            :editId="editId"
+            :edit-data="editData"
             :is="renderComponent"
         />
 
@@ -61,6 +64,7 @@
 </style>
 
 <script>
+// components
 import CSelect from './components/CSelect.vue';
 import CInput from './components/CInput.vue';
 import CFiles from './components/CFiles.vue';
@@ -70,10 +74,16 @@ import Peers from './components/Peers.vue';
 
 import bizCont from '@/components/jsapi/biz.contact.complexPicker'
 
+// utils
 import { formatTime } from '@/utils/formatTime';
 
+// components
 import IndexType5 from './components/IndexType5.vue';
 
+// Api
+import * as approveInfoApi from '@/api/approveinfo'
+import * as approveApi from '@/api/approve'
+
 export default {
     name: 'Applyfor',
     components: {
@@ -141,15 +151,26 @@ export default {
         },
     },
     created () {
-        console.log('apply for created>', this.$route.query.type);
+        console.log('apply for created>', this.$route.query);
 
         if (this.$route.query.type) this.formType = Number(this.$route.query.type)
+        
+        // check is edit
+        if (this.$route.query.edit == 1) {
+            this.editId = this.$route.query.id
+            this.isEdit = true
+            this.flag = this.$route.query.flag
+        }
 
         this.init ()
     },
     data () {
         return {
+            flag: '',
+            isEdit: false,
+            editId: '',
             formType: 5, // 代表某申请类型
+            editData: null,
 
             formData1: {
                 reason: '',
@@ -187,7 +208,32 @@ export default {
         }
     },
     methods: {
-        init () {},
+        init () {
+            // NOTE: 判断
+            if (this.isEdit) {
+                this.__detail__()
+            }
+        },
+
+        // NOTE: 因为是编辑 需要判断接口
+        // TODO: 缺少
+        async __detail__ () {
+            try {
+                console.log('%c printlog >>>', 'background: blue; color: #fff', approveInfoApi, approveApi);
+                
+                const func = this.flag === 'info' ? approveInfoApi.getInfo : approveApi.getInfo
+                const params = {
+                    id: this.editId
+                }
+                const result = await func(params)
+                if (result.code === 1) {
+                    this.editData = result.data
+                }
+            } catch (error) {
+                console.log('aplyof error >>>', error)
+            }
+
+        },
         
         handleSubmitData () {
             let callback = this.$refs.rendeRef.handleSubmitData

src/views/applyfor/js/type5.js

@@ -2,25 +2,8 @@
  * @description 出差申请部分业务逻辑
  */
 
-import { getAwayType } from '@/api/common'
 import store from '@/store' /* eslint-disable-line */
 
-// 出差类型
-export const getAwayTypeList = () => {
-    return new Promise((resove, reject) => {
-        // TODO: 是否需要本地存储或者Store存储。 不每次都接口
-        // if (store.getters.awayarrs) resove(store.getters.awayarrs)
-        getAwayType().then(res => {
-            if (res.code === 1) {
-                resove(res.data)
-            }
-        }).catch(e => {
-            console.log('getAwayTypeList', e);  
-            reject([])
-        })
-    })
-}
-
 /**
  * 选择流程中的人选
  * @param {Object} resData 钉钉返回数据格式

src/views/approve/components/ApproveControl.vue

@@ -1,5 +1,20 @@
 <template>
     <div class="approve-control-container flex flex-row flex-row-aic">
+        <!-- 
+            flag = info 几种状态
+            2处理中: 催办，修改(disabled),撤销，下载文件
+            3通过： 催办（disabled),修改（disabled), 撤销，下载
+            4已驳回：催办（disabled),修改，撤销，下载
+            5撤销：重新发起
+         -->
+        <!-- 
+            flag = approve 几种状态
+            [待处理，已处理，收到的]
+            审核中：提醒，修改，下载文件。拒绝，同意
+            通过：下载文件
+                通过（我的维修）：上传反馈结果，下载文件
+            我的收到：无任何操作权限
+         -->
         <!-- 审核通过
             下载文件
         -->
@@ -13,20 +28,25 @@
         -->
 
         <!-- 
-            催办，修改，撤销，提醒，修改，下载文件；拒绝按钮，同意按钮
+            催办，修改，撤销，提醒，下载文件；拒绝按钮，同意按钮
          -->
 
-
          <!-- TODO: class 这块 还需要根据审核到某块禁用某些功能 -->
-         <div class="item"
+         <div
+            :class="[
+                'item',
+                item.disable ? 'item--disable' : ''
+            ]"
             v-for="(item, idx) in controlComputed"
             :key="idx"
+            @click="() => (!item.disable && item.event())"
          >
             <div class="icon">
                 <img :src="item.img" :alt="item.title">
             </div>
             <span>{{ item.title }}</span>
          </div>
+         <!-- 审核才出现按钮 -->
          <div class="btnd flex flex-row flex-row-aic" v-if="btnIshow">
             <div class="btn" @click="handleGoExaminePage('refuse')">
                 拒绝
@@ -39,53 +59,114 @@
 </template>
 
 <script>
+
+import { putUrging, putCancel } from '@/api/approveinfo'
+
 export default {
+    name: 'ApproveControl',
+    props: {
+        id: {
+            type: Number,
+            require: true
+        },
+        module: { // NOTE: 模块
+            validator: num => ([1,2,3,4,5,6,7,8,9,10,11].includes(num))
+        },
+        flag: {
+            validator: flag => (['info', 'approve'].includes(flag))
+        },
+        flagState: { // NOTE: flag的状态值`status`
+            type: Number
+        },
+    },
     computed: {
         controlComputed () {
-            const [urging, edit, revoke, ding, print ] = this.control
+            let flag = this.flag
+            let state = this.flagState
+            let module = this.module
+            console.log(flag, state, module);
+            const [urging, edit, revoke, ding, print, REISSUE, pushResult] = this.control
             let temparr = []
-            switch (this.type) {
-                case 3: // 领导审批
-                    temparr = [
-                        ding,
-                        edit,
-                        print
-                    ]
-                    // this.approveBtn = true
-                    break;
-                case 4:
-                    temparr = [
-                        urging,
-                        edit,
-                        revoke,
-                        print
-                    ]
-                    break;
+
+            if (flag === 'info') {
+                // 审批状态:2=审批中,3=审批通过,4=审批驳回,5=审批撤销  
+                // state = 2,3,4,5
+                switch (state) {
+                    case 2:
+                        temparr = [
+                            urging,
+                            {
+                                // TEMPORARY: 临时改动禁用为false
+                                ...edit,
+                                disable: false
+                            },
+                            revoke,
+                            print
+                        ]
+                        break;
+                    case 3:
+                        temparr = [
+                            { ...urging, disable: true},
+                            { ...edit, disable: true },
+                            revoke,
+                            print
+                        ]
+                        break;
+                    case 4:
+                        temparr = [
+                            {...urging, disable: true},
+                            edit,
+                            revoke,
+                            print
+                        ]
+                        break;
+                    case 5:
+                        temparr = [
+                            REISSUE
+                        ]
+                        break;
+                }
+            } else if (flag === 'approve') {
+                switch(state) {
+                    // 待审核,已审核，收到的；三种状态
+                    case 2:
+                        temparr = [
+                            ding,
+                            edit,
+                            print
+                        ]
+                        break;
+                    case 3:
+                        if (module === 8) temparr.push(pushResult)
+                        temparr.push(print)
+                        break;
+                    // case 4:
+                }
             }
             return temparr
         },
         btnIshow () {
-            return [3].includes(this.type)
+            return this.flag === 'approve'
         },
     },
     data () {
         return {
             type: 3,
-            control: [
+            control: [ // NOTE: [WARNING] 顺序不可更改。
                 {
                     title: "催办",
                     img: require('@/assets/icons-ding.png'),
-                    event: this.handleEvent
+                    event: this.handleDingEvent
                 },
                 {
                     title: "修改",
                     img: require('@/assets/icons-edit.png'),
-                    event: this.handleEvent
+                    event: this.handleEditEvent
                 },
                 {
                     title: "撤销",
                     img: require('@/assets/icons-ding.png'),
-                    event: this.handleEvent
+                    event: this.handleRevokeEvent
                 },
                 {
                     title: "提醒",
@@ -95,13 +176,86 @@ export default {
                 {
                     title: "下载文件",
                     img: require('@/assets/icons-print.png'),
+                    event: this.handleDownloadFileEvent
+                },
+                // NOTE: 重新发起
+                {
+                    title: "重新发起",
+                    img: require('@/assets/icons-print.png'),
                     event: this.handleEvent
                 },
-        ]
+                // NOTE: 申请呈批(专属。申请呈批)
+                {
+                    title: "申请呈批",
+                    img: require('@/assets/icons-print.png'),
+                    event: this.handleEvent
+                },
+                // NOTE: 我的维修专属
+                {
+                    title: '上传反馈结果',
+                    img: require('@/assets/icons-print.png'),
+                    event: this.handleEvent
+                }
+            ]
         }
     },
     methods: {
-        handleEvent () {},
+        handleEvent () {
+            this.$toast('等待功能实现中')
+        },
+        // NOTE: 提醒
+        // TODO: 申请提醒/审批提醒
+        async handleDingEvent () {
+            try {
+                const func = this.flag === 'info' ? putUrging : () => {}
+                const params = {
+                    id: this.id
+                }
+                const result = await func(params)
+                if (result.code === 1) {
+                    this.$toast(result.msg)
+                }
+            } catch (error) {
+                console.log('ding err>', error);
+            }
+        },
+        // NOTE: 驳回
+        async handleRevokeEvent () {
+            try {
+                const func = this.flag === 'info' ? putCancel : () => {}
+                const params = {
+                    id: this.id
+                }
+                const result = await func(params)
+                if (result.code === 1) {
+                    console.log('%c revoke event data >>>', 'background: blue; color: #fff', result.data);
+                    this.$toast(result.msg)
+                }
+            } catch (error) {
+                console.log('revoke err>', error);
+            }
+        },
+        // NOTE: 下载文件
+        // TODO: 下载文件尚未拥有
+        handleDownloadFileEvent () {
+            try {
+                this.$toast('功能迭代中...')
+            } catch (error) {
+                console.log('download file err>>', error);
+            }
+        },
+        handleEditEvent () {
+            // TODO: 修改跳转填写页面
+            this.$router.replace({
+                name: 'Applyfor',
+                query: {
+                    type: this.module,
+                    edit: 1,
+                    id: this.id,
+                    flag: this.flag
+                }
+            })
+        },
         handleGoExaminePage (type) {
             console.log('type', type);
             this.$router.push({
@@ -134,6 +288,9 @@ export default {
             font-weight: 400;
             color: #151419;
             line-height: 18px;
+            &--disable {
+                opacity: 0.5;
+            }
             .icon {
                 img {
                     width: 24px;

src/views/approve/components/ApproveFlowPath.vue

@@ -5,6 +5,7 @@
         </div>
         <div class="flow-path-main">
             <!-- 发起人 -->
+            <!-- TODO: 发起人需要后端数据携带才行 -->
             <div class="row flex flex-row">
                 <div class="row__line"></div>
                 <div class="avatar avatar--name">
@@ -33,10 +34,18 @@
             </div>
 
             <!-- 审批人 -->
-            <div class="row flex flex-row">
+            <div class="row flex flex-row"
+                v-for="(person, idx) in approveList"
+                :key="idx"
+            >
                 <div class="row__line"></div>
                 <div class="avatar avatar--name">
-                    <span class="avatar__name">北方</span>
+                    <template v-if="person.user.avatar">
+                        <img class="avatar-heade" :src="person.user.avatar" />
+                    </template>
+                    <template v-else>
+                        <span class="avatar__name">{{ person.user.name | changeName }}</span>
+                    </template>
                     <div class="status-bar">
                         <van-icon color="rgba(254, 148, 62, 1)" :size="16" name="more" />
                     </div>
@@ -44,19 +53,19 @@
                 <div class="row-main">
                     <div class="header flex flex-row flex-row-aic">
                         <span class="header__title">审批人</span>
-                        <span class="header__time">11-07 19:12</span>
+                        <span class="header__time">{{ person.approve_time }}</span>
                     </div>
                     <div class="mainbox flex flex-row flex-row-aic">
                         <div class="mainbox__cur-name">
-                            刘北方（审核人）
+                            {{ person.user.name }}（<span :class="handleMapClass(person.status)">{{ person.status | filterFlowPathStatusTxt }}</span>）
                         </div>
-                        <div class="mainbox__cur-use-time">
-                            平均审批时长：0天0时23分
+                        <div class="mainbox__cur-use-time" v-if="person.time_text">
+                            平均审批时长：{{ person.time_text }}
                         </div>
                     </div>
-                    <div class="footerinfo footerinfo--ptop10">
+                    <div v-if="person.remark" class="footerinfo footerinfo--ptop10">
                         <div class="messagebox">
-                            拟由教导处阅办。请校长申批。
+                            {{ person.remark }}
                         </div>
                     </div>
 
@@ -64,66 +73,70 @@
             </div>
 
             <!-- 抄送人 -->
-            <div class="row flex flex-row">
+            <div class="row row-copy flex flex-row" v-if="copys && copys.length">
                 <div class="avatar avatar--name avatar--volume">
                     <!-- 改成小喇叭Icon -->
                     <span class="avatar__name">
                         <van-icon name="volume" :size="22" />
                     </span>
-                    <!-- <div class="status-br"></div> -->
                 </div>
                 <div class="row-main">
                     <div class="header flex flex-row flex-row-aic">
                         <span class="header__title">抄送人</span>
-                        <span class="header__time" @click="() => reciveMore = !reciveMore">
-                            <van-icon v-if="reciveMore" :size="18" name="arrow-up" />
+                        <span class="header__time" @click="() => seeMoreCopy = !seeMoreCopy">
+                            <van-icon v-if="seeMoreCopy" :size="18" name="arrow-up" />
                             <van-icon v-else :size="18" name="arrow-down" />
                         </span>
                     </div>
                     <div class="mainbox">
                         <div class="mainbox__cur-name">
-                            抄送至2人
-                        </div>
-                        <div class="mainbox__cur-use-time">
-                            <!-- 
-                                抄送无时间
-                                平均审批时长：0天0时23分 -->
+                            抄送至{{ copys.length }}人
                         </div>
+                        <div class="mainbox__cur-use-time"></div>
                     </div>
                     <div class="footerinfo footerinfo--ptop10">
-                        <!-- <div class="messagebox"></div> -->
-                        <!-- 被抄送的列表 -->
-                        <div v-show="reciveMore" class="recive-of flex flex-row flex-row-aic">
-                            <div class="personal"
-                                v-for="(personal, idx) in personalList"
+                        <div v-show="seeMoreCopy" class="recive-of flex flex-row flex-row-aic">
+                            <div class="personal flex flex-col flex-col-aic"
+                                v-for="(personal, idx) in copys"
                                 :key="idx"
                             >
                                 <div class="avatar avatar--name">
-                                    <span class="avatar__name">{{ personal.name }}</span>
-                                    <div class="status-bar">
-                                        <van-icon v-if="personal.status === 1" color="#15BC83" :size="12" name="checked" />
+                                    <span class="avatar__name">{{ personal.user.name | changeName }}</span>
+                                    <div class="status-bar" v-if="false">
+                                        <!-- NOTE: （后台与产品咨询。并无抄送人状态） 查看Status暂时无数据 -->
+                                        <van-icon v-if="personal.approve_flow === 1" color="#15BC83" :size="12" name="checked" />
                                         <van-icon v-else color="rgba(254, 148, 62, 1)" :size="12" name="more" />
                                     </div>
                                 </div>
-                                <div class="personal__name">{{ personal.name }}</div>
+                                <div class="personal__name">{{ personal.user.name }}</div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
 
-
-
-
-
         </div>
     </div>
 </template>
 
 <script>
+
+import store from '@/store';
+
 export default {
+    props: {
+        approveList: {
+            type: Array,
+            default: () => ([])
+        },
+
+        copys: {
+            type: Array,
+            default: () => ([])
+        }
+    },
     data: () => ({
-        reciveMore: true,
+        seeMoreCopy: true, // NOTE: 查看更多抄送人
         personalList: [
             {
                 name: '柴静',
@@ -138,8 +151,27 @@ export default {
     methods: {
         handleSwitchreciveMore() {
 
+        },
+        handleMapClass (status) {
+            let className = 'approve--'
+            switch(status) {
+                case 1:
+                case 2:
+                case 3:
+                    className += 'common'
+                break;
+                case 4:
+                    className += 'refuse'
+                break;
+            }
+            return className
         }
-    }
+    },
+    filters: {
+        filterFlowPathStatusTxt (status) {
+            return store.getters['enum/getApproveFlowPathEnum'](status)
+        }
+    },
 }
 </script>
 
@@ -160,6 +192,7 @@ export default {
         padding-bottom: 15px;
     }
 }
+
 .row {
     position: relative;
     margin-bottom: 43px;
@@ -187,6 +220,12 @@ export default {
             color: #FFFFFF;
             line-height: 9px;
         }
+        &-heade {
+            width: 100%;
+            height: 100%;
+            vertical-align: middle;
+            border-radius: 4px;
+        }
         .status-bar {
             position: absolute;
             right: 0;
@@ -313,7 +352,25 @@ export default {
     &:last-child {
         margin-bottom: 20px;
     }
+    &-copy {
+        .footerinfo .avatar {
+            margin-right: initial;
+        }
+        .personal {
+            margin-right: 10px;
+            &:last-child {
+                margin-right: initial;
+            }
+        }
+    }
+}
 
-
+.approve {
+    &--common {
+        color: #191A1E;
+    }
+    &--refuse {
+        color: #F45642;
+    }
 }
 </style>

src/views/approve/detail.vue

@@ -9,12 +9,12 @@
                 <span>{{ schoolName }}</span>
             </div>
             <div class="status-bar status-bar--warning">
-                <span>等待我处理</span>
+                <span>{{ approveStatusMap }}</span>
             </div>
 
             <!-- TODO: 配置审核通过/撤销/拒绝 -->
             <div class="float-status">
-
+                审核状态标识：{{ dataDetail && dataDetail.status }}
             </div>
         </div>
 
@@ -34,14 +34,22 @@
         <!-- @Description 流程化 用到的地方很多 -->
         <!-- ApproveFlowPath -->
         <div class="approve-flow-path-box">
-            <approve-flow-path />
+            <approve-flow-path
+                :approve-list="approveList"
+                :copys="approveCopyList"
+            />
         </div>
 
 
         <!-- operate. 操作台 -->
         <!-- 集成 提醒, 修改, 下载, 拒绝，同意  5种 -->
         <div class="approve-control">
-            <approve-control />
+            <approve-control
+                :id="id"
+                :module="module"
+                :flag="pageType"
+                :flag-state="dataDetailStatus"
+            />
         </div>
     </div>
 </template>
@@ -68,6 +76,8 @@ import ApproveControl from './components/ApproveControl.vue'
 
 import * as ApproveInfoApi from '@/api/approveinfo'
 
+import { mapState } from 'vuex'
+
 export default {
     name: 'ExamineDetail',
     components: {
@@ -75,12 +85,26 @@ export default {
         ApproveFlowPath,
         ApproveControl
     },
+    computed: {
+        ...mapState('enum', [
+            'evectionTypeList',
+        ]),
+        approveStatusMap () {
+            if (!this.dataDetail) return ''
+            let status = this.dataDetail.status
+            return this.$store.getters['enum/getApproveFlowPathEnum'](status)
+        }
+    },
     data () {
         return {
+            dataDetail: null,
             isAndroid: checkPlatform() === 'android',
             isiOS: checkPlatform() === 'iOS',
+
+            // TODO: 标识标题、学校名称如何获取
             title: '刘辉提交的申请单',
             schoolName: '深圳市第二特殊教育学校',
+
             datalist: [
                 {
                     title: '审批编号',
@@ -173,7 +197,13 @@ export default {
 
             pageType: '', // 页面类型 info and approve
             apiFunc: null, // 接口函数 
-            id: '',
+            id: '', // NOTE: 当前页面的(申请/审核)id
+
+
+            approveList: [],
+            approveCopyList: [],
+            dataDetailStatus: -1,
+            module: undefined,
         }
     },
     created () {
@@ -202,10 +232,9 @@ export default {
         // NOTE: 页面初始化的模块
         __init__ () {
             let { id, type } = this.$route.query
-            // type [info, approve]
-            console.log('orderNo>>', id, type);
             this.id = id
             this.pageType = type
+
             // TODO: 请求接口&整合数据给予`datalist`字段
             this.apiFunc = type === 'info' ? ApproveInfoApi.getDetail : () => {}
 
@@ -222,9 +251,14 @@ export default {
                 }
                 const res = await this.apiFunc(params)
                 if (res.code === 1) {
-                    // const { module_info } = res.data
-                    this.datalist = this.formatModuleInfoData(res.data)
+                    this.dataDetail = res.data
                     console.log(res.data);
+                    const { status, module, approve, approve_copy } = res.data
+                    this.module = module
+                    this.dataDetailStatus = status
+                    this.approveList = approve
+                    this.approveCopyList = approve_copy
+                    this.datalist = await this.formatModuleInfoData(res.data)
 
                 }
             } catch (e) {
@@ -238,10 +272,15 @@ export default {
             this.$router.push('/approve')
         },
 
-
         // NOTE: 渲染`module_info`字段函数； 让其更好的渲染
-        formatModuleInfoData (data) {
+        async formatModuleInfoData (data) {
             const { module, order_no, module_info, department_data } = data
+            let evectionTypeMap = this.evectionTypeList
+            if (module === 5 && evectionTypeMap) {
+                let vops = evectionTypeMap.filter(option => (option.id === module_info.type))[0]
+                module_info.type_text = vops.name
+            }
+            
             let temporaryList = [
                 {
                     title: '审批编号',
@@ -268,22 +307,25 @@ export default {
                         { title: '同行人员', value: data.peer_user.map(user => (user.name)).join('、') },
                         { title: '出差开始时间', value: module_info.start_time },
                         { title: '出差结束时间', value: module_info.end_time },
-                        { title: '附件材料',
+
+                        module_info.document_text.length ? { title: '附件材料',
                             type: 'files',
                             value: module_info.document_text
-                        },
-                        {
+                        } : undefined,
+                        
+                        module_info.images_text.length ? {
                             type: 'images',
                             title: '图片',
                             value: module_info.images_text
-                        },
+                        } : undefined,
+
                         {
                             title: '类型',
-                            value: module_info.type
+                            value: module_info.type_text
                         },
                         {
                             title: '是否跨关内关外',
-                            value: module_info.is_who
+                            value: module_info.is_who ? '是' : '否'
                         },
                         {
                             title: module_info.is_who ? '预算金额' : '备注',
@@ -292,8 +334,10 @@ export default {
                     ])
                 break
             }
-
-            return temporaryList
+            // NOTE: 过滤undefined的数组值
+            temporaryList = temporaryList.filter(row => row)
+            console.log('%c Render Temporary List >>>', 'background: blue; color: #fff', temporaryList.filter(row => row));
+            return Promise.resolve(temporaryList)
         }
     },
     beforeDestroy () {
@@ -301,7 +345,8 @@ export default {
             // 安卓移除回调
             dd.off('leftBtnClick', this.handleBackEvent)
         }
-    }
+    },
+    
 }
 </script>