part code

.env.development

@@ -1,3 +1,3 @@
 NODE_ENV = "development"
 
-VUE_APP_BASE_API = "/"
+VUE_APP_BASE_API = "https://dingding.hdlkeji.com"

TODO.md

@@ -1,4 +1,9 @@
 # 钉钉办公系统 - 待办事项
 
-* [ ] 制作一个底部弹窗选择选项和取消的组件 (components) 
+* [x] 制作一个底部弹窗选择选项和取消的组件 (components) 
+* [x] 缺少选择日期的组件
 
+
+### overpage.
+
+---- (2023/11/10) ----

package-lock.json

@@ -11,6 +11,8 @@
         "amfe-flexible": "^2.2.1",
         "axios": "^1.6.0",
         "core-js": "^3.6.5",
+        "dayjs": "^1.11.10",
+        "dingtalk-design-libs": "^0.2.0",
         "dingtalk-jsapi": "^2.13.71",
         "dingtalk-mock-sdk": "^0.0.2",
         "lodash": "^4.17.21",
@@ -5781,6 +5783,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -5817,7 +5824,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
       "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -6153,6 +6159,38 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
+    "node_modules/dingtalk-design-libs": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dingtalk-design-libs/-/dingtalk-design-libs-0.2.0.tgz",
+      "integrity": "sha512-A5w1sOqtyfB6SfqdXVmZ6Ml3oNOZN+sYTnm377nC0Bc2qcPYzt3pfPwZ/dsCV1kqTgbdCgGj8n3mzd2NxP7zuw==",
+      "dependencies": {
+        "axios": "^0.21.1",
+        "dingtalk-jsapi": "*",
+        "eventemitter2": "^6.4.4",
+        "query-string": "^5.1.1"
+      }
+    },
+    "node_modules/dingtalk-design-libs/node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
+    "node_modules/dingtalk-design-libs/node_modules/query-string": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
+      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dingtalk-jsapi": {
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/dingtalk-jsapi/-/dingtalk-jsapi-2.15.4.tgz",
@@ -6962,6 +7000,11 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/eventemitter2": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
+      "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg=="
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -10611,7 +10654,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14384,7 +14426,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }

package.json

@@ -11,6 +11,8 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^1.6.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.11.10",
+    "dingtalk-design-libs": "^0.2.0",
     "dingtalk-jsapi": "^2.13.71",
     "dingtalk-mock-sdk": "^0.0.2",
     "lodash": "^4.17.21",
@@ -48,7 +50,10 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "vue/no-unused-vars": "warn",
+      "vue/no-unused-components": "warn"
+    }
   },
   "browserslist": [
     "> 1%",

postcss.config.js

@@ -3,7 +3,7 @@ module.exports = {
         "postcss-pxtorem": {
             rootValue: 37.5,
             propList: ["*"],
-            exclude: ['node_modules'],
+            exclude: ["node_modules"],
             unitPrecision: 5, //保留rem小数点多少位
             mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
             minPixelValue: 12, //px小于12的不会被转换

src/api/approveflow.js

@@ -0,0 +1,13 @@
+/**
+ * @description 审批流程模块
+ */
+import request from '@/utils/request'
+
+// 获取审批流程
+export function getApproveFlowPath (formData) {
+    return request({
+        method: 'POST',
+        url: "approveflow/get_data",
+        data: formData
+    })
+}

src/api/approveinfo.js

@@ -0,0 +1,19 @@
+/**
+ * @description 审批申请Api
+ */
+
+import request from '@/utils/request'
+
+// 申请/重新发起申请
+export const postCreateInfo = data => (request({
+    method: 'POST',
+    url: "approveinfo/create",
+    data
+}))
+
+// 获取申请记录
+export const getRecordList = (data) => (request({
+    method: 'POST',
+    url: 'approveinfo/get_list',
+    data
+}))

src/api/common.js

@@ -0,0 +1,13 @@
+/**
+ * @description 公共模块
+ */
+
+import request from '@/utils/request'
+
+// 获取出差类型(室内室外)
+export function getAwayType() {
+    return request({
+        method: 'POST',
+        url: "common/get_evection_type_list",
+    })
+}

src/components/ChooseTime/index.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="choose-time-container">
+        <!-- 
+        test-btn
+        <div class="btn-container">
+            <div class="btn-span" @click="() => show = !show">123</div>
+        </div> -->
+        <van-popup
+            v-model="show"
+            position="bottom"
+        >
+            <div class="switch-data-box flex flex-row flex-row-aic">
+                <div class="left">
+                    <span @click="() => swt = 0" :class="{'active': swt === 0}">{{ dateShow }}</span>
+                    <span @click="() => swt = 2" :class="{'active': swt === 2}">时间</span>
+                </div>
+                <div class="right" @click="handleConfirmBtn">
+                    <div class="btn">确认</div>
+                </div>
+            </div>
+            <van-calendar
+                ref="calendarRef"
+                v-show="swt === 0"
+                :poppable="false"
+                :show-confirm="false"
+                :show-title="false"
+                :show-subtitle="false"
+                :style="{ height: '340px' }"
+                row-height="50"
+                color="#3290c4"
+                :min-date="minDate"
+                :max-date="maxDate"
+                @confirm="handleConfirmDateVal"
+                :default-date="dateVal"
+            />
+
+            <van-datetime-picker
+                v-show="swt === 2"
+                :value="timeVal"
+                type="time"
+                title="选择时间"
+                :style="{ height: '340px' }"
+                :min-hour="0"
+                :max-hour="23"
+                :show-toolbar="false"
+                visible-item-count="8"
+                @change="handleDateTimePickerChange"
+            />
+            <!-- <div class="swtbox2" >
+            </div> -->
+        </van-popup>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.choose-time {
+    &-container {
+
+    }
+}
+
+.switch-data-box {
+    justify-content: space-between;
+    padding: 0 12px;
+    span {
+        display: inline-block;
+        font-size: 14px;
+        font-weight: 400;
+        color: #707073;
+        padding: 10px 8px;
+        margin-right: 6px;
+
+        &.active {
+            border-bottom: 2px solid #707073;
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .right {
+        font-size: 16px;
+        font-weight: 500;
+        color: #3290C4;
+        line-height: 22px;
+    }
+    .dheig {
+        height: 350px;
+    }
+}
+
+.swtbox2 {
+    padding: 20px 0;
+    box-sizing: border-box;
+}
+</style>
+
+<script>
+import dayjs from 'dayjs';
+import { formatTime } from '@/utils/formatTime';
+export default {
+    name: "ChooseTime",
+    computed: {
+        dateShow () {
+            return this.dateVal ? formatTime(this.dateVal) : '日期'
+        },
+    },
+    props: {
+        value: {
+            type: String,
+        },
+        ctype: { // range=选择范围
+            // :max-range="3" 最大可选择的范围
+            type: String,
+            default: ''
+        },
+        // NOTE: 默认最小时间当天的0:0:0起
+        // 最大时间按照当前的六个月以后的23:59:59止
+        minDate: {
+            type: Date,
+            default: () => {
+                let now = new Date()
+                now.setHours(0, 0, 0)
+                return now
+            }
+        },
+        maxDate: {
+            type: Date,
+            default: () => {
+                let now = new Date()
+                now.setMonth(now.getMonth() + 7)
+                now.setHours(23, 59, 59)
+                return now
+            }
+        }
+    },
+    data () {
+        return {
+            show: false,
+            swt: 0,
+            timeVal: '00:00',
+            dateVal: new Date(),
+            callback: null
+        }
+    },
+    methods: {
+        openChooseTime (callback) {
+            this.show = true
+            if (callback) this.callback = callback
+        },
+        reset () {
+            this.swt = 0
+            this.timeVal = '00:00'
+            this.dateVal = new Date()
+        },
+        getTime (){
+            let cnow = new Date(this.dateVal)
+            const [h, m] = this.timeVal.split(':')
+            cnow.setHours(h)
+            cnow.setMinutes(m)
+            return cnow
+        },
+        // time picker change
+        handleDateTimePickerChange (picker) {
+            const [hours, minus] = picker.getValues()
+            this.timeVal = `${hours}:${minus}`
+        },
+        // confirm date
+        handleConfirmDateVal (date) {
+            this.dateVal = date
+        },
+        
+        // confirm btn.
+        handleConfirmBtn () {
+            this.show = false
+            let cnow = new Date(this.dateVal)
+            const [h, m] = this.timeVal.split(':')
+            cnow.setHours(h)
+            cnow.setMinutes(m)
+            if (this.$listeners.input) this.$emit('input', cnow)
+            if (this.$listeners.confirm) this.$emit('confirm', cnow)
+            if (this.callback) this.callback(cnow)
+        }
+    },
+    watch: {
+        value: {
+            handler (dateStr) {
+                if (dateStr) {
+                    let _date = dayjs(dateStr).format('YYYY-MM-DD')
+                    let time = dayjs(dateStr).format('HH:mm')
+                    this.dateVal = new Date(_date)
+                    this.timeVal = time
+                }
+            } ,
+            immediate: true
+        }
+    }
+}
+</script>

src/components/jsapi/biz.contact.complexPicker/index.vue

@@ -15,6 +15,22 @@ export default {
         onHandleClick() {
             dd.biz.contact.complexPicker({
                 corpId: window.__corpId__,
+                title:"选择抄送人",            //标题
+                // corpId:"xxx",              //企业的corpId
+                multiple:true,            //是否多选
+                // limitTips:"超出了",          //超过限定人数返回提示
+                // maxUsers:1000,            //最大可选人数
+                pickedUsers:[],            //已选用户
+                pickedDepartments:[],          //已选部门
+                disabledUsers:[],            //不可选用户
+                disabledDepartments:[],        //不可选部门
+                requiredUsers:[],            //必选用户（不可取消选中状态）
+                requiredDepartments:[],        //必选部门（不可取消选中状态）
+                // appId:158,              //微应用Id，企业内部应用查看AgentId
+                // permissionType:"xxx",          //可添加权限校验，选人权限，目前只有GLOBAL这个参数
+                responseUserOnly: true,        //返回人，或者返回人和部门
+                startWithDepartmentId: 0,   //仅支持0和-1
+                deptId: -1
             });
         }
     }

src/main.js

@@ -7,6 +7,7 @@ import '@/styles/index.less'
 
 import '@/utils/import-vant'
 import '@/utils/import-custom-component' // 自定义组件
+import '@/utils/filter' // 自定义一些全局过滤函数
 
 import App from './App.vue'
 

src/router/index.js

@@ -8,7 +8,7 @@ Vue.use(VueRouter)
 const routes = [
   // {
   //   path: '/',
-  //   redirect: 'Approve',
+  //   redirect: 'ExamineDetail',
   // },
 
   {
@@ -19,6 +19,25 @@ const routes = [
     },
     component: Home
   },
+  
+  {
+    path: '/applyfor',
+    name: 'Applyfor',
+    component: () => import(/* webpackChunkName: "index" */ '../views/applyfor/index.vue')
+  },
+  {
+    path: '/applyfor/peers-out-form',
+    name: 'PeersOutForm',
+    component: () => import(/* webpackChunkName: "index" */ '../views/applyfor/peersOutForm.vue')
+  },
+
+
+  // NOTE：我的审核状态
+  {
+    path: '/apply-state',
+    name: 'ApplyState',
+    component: () => import(/* webpackChunkName: "index" */ '../views/apply-state/index.vue')
+  },
 
 
   // 审核页面
@@ -77,10 +96,11 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  console.log('>>>>> beforeEach >>>>>');
-  console.log('to', to);
-  console.log('form', from);
-  console.log('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<');
+  // console.log('>>>>> beforeEach >>>>>');
+  // console.log('to', to);
+  // console.log('form', from);
+  // console.log('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<');
+  // TODO: 该位置设置navigation title
   next()
 })
 

src/store/getter.js

@@ -1,5 +1,6 @@
 const getter = {
     name: state => state.user.name,
+    token: state => state.user.token,
     tabbarAction: state => {
         return state.app.tabbarAction
     }

src/store/modules/ddtalk.js

@@ -0,0 +1,13 @@
+
+const state = {
+    name: 'unknow'
+}
+const mutations = {}
+const actions = {}
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/user.js

@@ -1,7 +1,9 @@
 
 const state = {
-    name: 'unknow'
+    name: '刘壹手',
+    token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOiI4NSIsImlzcyI6Imh0dHBzOlwvXC96YWluLmNvbSIsImF1ZCI6Imh0dHBzOlwvXC96YWluLmNvbSIsImlhdCI6MTY5ODMxMjI4NSwibmJmIjoxNjk4MzEyMjg1LCJleHAiOjE3MjQyMzIyODV9.ziAXs6DiZKGGjtPuaCZ6Vfpv6Ki_deZhFPnDDLjAJUg',
 }
+
 const mutations = {}
 const actions = {}
 

src/styles/index.less

@@ -48,6 +48,9 @@ html,body{
     &-acc {
         align-content: center;
     }
+    &-jcsp {
+       justify-content: space-between; 
+    }
     &-jic {
         justify-items: center;
     }
@@ -94,4 +97,21 @@ html,body{
         display: block;
         clear: both;
     }
+}
+
+.btn-container {
+    margin-top: 10px;
+    padding: 10px 14px 40px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    .btn-span {
+        text-align: center;
+        height: 41px;
+        background: #3290C4;
+        border-radius: 11px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 41px;
+    }
 }

src/styles/variables.less

@@ -27,7 +27,7 @@
 @font-size-secondery: 14px;
 @font-size-third: 12px;
 
-@main-color: rgba(50, 144, 196, 1);
+@main-color: #3290c4;
 @white: white;
 
 @bg-gary: rgba(242, 241, 246, 1);

src/utils/dingtalk.js

@@ -0,0 +1,109 @@
+// import * as dd from 'dingtalk-jsapi'
+import complexPicker from 'dingtalk-jsapi/api/biz/contact/complexPicker'
+import setRight from 'dingtalk-jsapi/api/biz/navigation/setRight'
+import setTitle from 'dingtalk-jsapi/api/biz/navigation/setTitle';
+
+import { getENV } from "dingtalk-jsapi/lib/env";
+import { compareVersion } from "dingtalk-jsapi/lib/sdk";
+
+import { init } from 'dingtalk-mock-sdk'
+
+init({
+  token: 'U3if31VghziIj3VCnSwgeHO0CVlKs7Z4',
+  jsapiMock: true,
+  httpMock: false,
+})
+
+// 公司CorpId
+const CorpId = 'dingf1b2e9ddf9d214e224f2f5cc6abecb85' /* eslint-disable-line */
+
+// 公司APIToken
+const PpiToken = '43c2466a53613d9088e6364d554500cd' /* eslint-disable-line */
+
+const AppId = '2796673629' /* eslint-disable-line */
+
+export const { platform, version, appType } = getENV()
+
+export function isAuthSDKSupport() {
+    return compareVersion(version, '6.0.5')
+}
+
+/**
+ * 查询钉钉通讯录
+ * @param {Object} options 通讯录配置
+ * @returns Promise pindding
+ */
+export function dingtalkComplexPicker (options) {
+    return new Promise((resove, reject) => {
+        complexPicker({
+            title:"测试标题",            //标题
+            corpId: CorpId,              //企业的corpId
+            multiple:true,            //是否多选
+            limitTips:"超出了",          //超过限定人数返回提示
+            maxUsers:1000,            //最大可选人数
+            pickedUsers:[],            //已选用户
+            pickedDepartments:[],          //已选部门
+            disabledUsers:[],            //不可选用户
+            disabledDepartments:[],        //不可选部门
+            requiredUsers:[],            //必选用户（不可取消选中状态）
+            requiredDepartments:[],        //必选部门（不可取消选中状态）
+            appId:158,              //微应用Id，企业内部应用查看AgentId
+            permissionType:"xxx",          //可添加权限校验，选人权限，目前只有GLOBAL这个参数
+            responseUserOnly:false,        //返回人，或者返回人和部门
+            startWithDepartmentId:0 ,   //仅支持0和-1,
+            ...options,
+            onSuccess: function(result) {
+                /**
+                {
+                    selectedCount:1,                              //选择人数
+                    users:[{"name":"","avatar":"","emplId ":""}]，//返回选人的列表，列表中的对象包含name（用户名），avatar（用户头像），emplId（用户工号）三个字段
+                    departments:[{"id":,"name":"","number":}]//返回已选部门列表，列表中每个对象包含id（部门id）、name（部门名称）、number（部门人数）
+                }
+                */
+                resove(result)
+            },
+           onFail : function(err) {
+            reject(err)
+           }
+        });
+    })
+}
+
+
+/**
+ * @description 设置导航栏右侧单按钮
+ */
+export function settingNavigationRight ({
+    show = true,
+    control = false,
+    text = '我的XX',
+    callback = () => {},
+    callbackErr = () => {}
+}) {
+    setRight({
+        show,
+        control,
+        text,
+        onSuccess: (result) => {
+            callback && callback(result)
+        },
+        onFail: (err) => {
+            callbackErr && callbackErr(err)
+        }
+    })
+}
+
+/**
+ * @description 设置导航栏标题
+ */
+export function settingNavigationTitle ({
+    title = '默认标题',
+    callback
+}) {
+    setTitle({
+        title,
+        onSuccess: result => {
+            callback && callback(result)
+        }
+    })
+}

src/utils/filter.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+
+
+/**
+ * @description 过滤用户名称。只展示两个字
+ * @returns String 名字
+ */
+Vue.filter('changeName', value => {
+    if (!value) return '';
+    let regexp = /(（.*?）)|(\(.*?\))/ig;
+    // 邓婷（瑶） 删除这种中文括号包裹的名字 
+    while(1) { /* eslint-disable-line */
+        if (value.match(regexp)) {
+            value = value.replace(regexp, '')
+        } else break
+    }
+
+    if(value.length <= 2) return value;
+    return value.slice(1,);
+})

src/utils/formatTime.js

@@ -0,0 +1,21 @@
+/**
+ * @description 关于时间的Util
+ */
+
+// import dayjs from "dayjs"
+
+import { fZero } from "./util"
+
+/**
+ * 格式化时间返回
+ * @param {Date} date 时间
+ * @returns String xxxx年xx月xx日
+ */
+export function formatTime (date, format) {
+    let now = new Date(date)
+    let year = now.getFullYear()
+    let month = fZero(now.getMonth() + 1)
+    let _date = fZero(now.getDate())
+    if (format) return `${year}${format}${month}${format}${_date}`
+    return `${year}年${month}月${_date}日`
+}

src/utils/import-custom-component.js

@@ -4,3 +4,8 @@ import Empty from '@/components/Empty'
 
 Vue.component('MyEmpty', Empty)
 
+// 全局渲染VNODE or JSX
+Vue.component('RenderDom', {
+    functional: true,
+    render: (h, ctx) => ctx.props.vnode
+})

src/utils/import-vant.js

@@ -13,9 +13,17 @@ import {
     Toast,
     Popup,
     Tab,
-    Tabs
+    Tabs,
+    Picker,
+    Uploader,
+    Calendar,
+    DatetimePicker,
+    ActionSheet,
+    Switch,
+    List
 } from 'vant'
 
-Vue.use(Tab).use(Tabs).use(Popup).use(Toast).use(Field).use(Button).use(NavBar).use(Icon).use(Tabbar).use(TabbarItem)
+Vue.use(Tab).use(Tabs).use(Popup).use(Toast).use(Field).use(Button).use(NavBar).use(Icon).use(Tabbar).use(TabbarItem).use(Picker)
+.use(Uploader).use(Calendar).use(DatetimePicker).use(ActionSheet).use(Switch).use(List)
 
 Vue.$toast = Toast

src/utils/request.js

@@ -1,12 +1,14 @@
 import axios from 'axios'
+
+import { Toast } from 'vant'
 // import { MessageBox, Message } from 'element-ui'
 
-// import store from '@/store'
+import store from '@/store/index'
 // import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: process.env.VUE_APP_BASE_API + '/api/', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })
@@ -20,7 +22,8 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['Authorization'] = store.getters.token
+      // config.headers['X-Token'] = getToken()
     }
     return config
   },
@@ -47,38 +50,39 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
-      Message({
-        message: res.message || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
+    if (res.code !== 1) {
+      Toast(res.msg)
+      // Message({
+      //   message: res.message || 'Error',
+      //   type: 'error',
+      //   duration: 5 * 1000
+      // })
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
+        // MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+        //   confirmButtonText: 'Re-Login',
+        //   cancelButtonText: 'Cancel',
+        //   type: 'warning'
+        // }).then(() => {
+        //   store.dispatch('user/resetToken').then(() => {
+        //     location.reload()
+        //   })
+        // })
       }
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject(new Error(res.msg || 'Error'))
     } else {
       return res
     }
   },
   error => {
     console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    // Message({
+    //   message: error.message,
+    //   type: 'error',
+    //   duration: 5 * 1000
+    // })
     return Promise.reject(error)
   }
 )

src/utils/util.js

@@ -15,3 +15,10 @@ export function checkPlatform () {
     else if (isiOS) return 'iOS'
     else return 'unknow'
 }
+
+/**
+ * 补零 不满10 进行补零
+ * @param {number} n 小于10的数字
+ * @returns String  number + ''
+ */
+export const fZero = n => (n > 9 ? `${n}` : `0${n}`)

src/utils/vueBus.js

@@ -0,0 +1,6 @@
+/**
+ * @description vue bus
+ */
+import Vue from 'vue'
+const vueBus = new Vue()
+export default vueBus

src/views/Index.vue

@@ -3,7 +3,11 @@
         <div class="rowbox" v-for="(row, idx) in list" :key="idx">
             <div class="rowbox__title">{{ row.title }}</div>
             <div class="rowbox__main">
-                <div class="col" v-for="(col, idx2) in row.list" :key="idx2">
+                <div class="col"
+                    v-for="(col, idx2) in row.list"
+                    :key="idx2"
+                    @click="handleClickItem(col)"
+                >
                     <img :src="col.pic" :alt="col.title">
                     <span>{{ col.title }}</span>
                 </div>
@@ -13,6 +17,7 @@
 </template>
 
 <script>
+
 export default {
     data() {
         return {
@@ -22,7 +27,7 @@ export default {
                     title: '人事管理',
                     list: [
                         {
-                            path: '', // 页面路径
+                            pathType: '5', // 页面类型
                             title: '出差',
                             pic: require('@/assets/index/index-personnel-plane.png')
                         },
@@ -79,12 +84,19 @@ export default {
                     ]
                 }
 
-            ]
+            ],
+            chooseTimeVal: ''
         }
     },
     methods: {
         handleClickItem (item) {
             console.log('click item', item);
+            this.$router.push({
+                name: 'Applyfor',
+                query: {
+                    type: item.pathType
+                }
+            })
         }
     }
 }

src/views/Userinfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="user-info-container userinfo">
-        <div class="backbtn p-h-12">
+        <div class="backbtn p-h-12" @click="handleGoBack">
             <van-icon name="arrow-left" size="24" />
         </div>
         <!-- 个人信息 -->
@@ -94,7 +94,10 @@ export default {
             this.$router.push({
                 name: 'Singleinfo'
             })
-        }
+        },
+        handleGoBack () {
+            this.$router.go(-1)
+        },
     }
 }
 </script>

src/views/apply-state/index.vue

@@ -0,0 +1,521 @@
+<template>
+    <div class="approve-container flex flex-col">
+        <van-tabs
+            v-model="tabVal"
+            :before-change="handleTabBeforeChangeEvnet"
+            >
+            <van-tab
+                v-for="(tab, idx) in tabs"
+                :key="idx"
+                :title="tab.title"
+                :name="tab.name"
+                color="#000"
+            />
+        </van-tabs>
+        <div class="filter-container p-h-12 flex flex-row flex-row-aic">
+            <van-field v-model="searchVal" clearable placeholder="搜索" left-icon="search" :disabled="true" :readonly="true"
+                @click="handleClickSearchBox" />
+            <div class="filterbox flex flex-row flex-0shrink" @click="() => popupVisibility = true">
+                <van-icon name="filter-o" size="20" />
+                <span>筛选</span>
+            </div>
+        </div>
+        <div class="approve-main">
+            <!-- TODO：需要一个滚动框架 是否需要采用 `mescroll.js` -->
+            <van-list
+                v-model="listLoading"
+                :finished="finished"
+                :finished-text="finishedText"
+                @load="onLoadData"
+            >
+                <approve-item
+                    v-for="(item, idx) in tableData"
+                    :key="idx"
+                    approve-type="xx"
+                    :title="rendeTitleCom"
+                    :time="item.apply_date"
+                    :rows="item.__rows_item__"
+                    :person="item.approve_one.user.name"
+                    flag="info"
+                    :flag-state="Number(tabVal)"
+                />
+            </van-list>
+
+
+            <!-- <div class="btnbox" @click="goexamine">jumptoexamine-pass</div>
+            <div class="btnbox" @click="goexamine2">jumptoexamine-refuse</div>
+            <div class="btnbox" @click="goDetail">goDetail</div> -->
+
+            <my-empty
+                v-show="showEmpty"
+                tip="暂无数据"
+            />
+        </div>
+
+        <!-- 弹窗 全部筛选 -->
+        <van-popup class="popupxx" v-model="popupVisibility" position="bottom" :style="{ height: '60%' }" closeable
+            close-icon-position="top-left">
+            <div>
+                <div class="popup__title">全部筛选</div>
+                <!-- <div class="popup__typebox">
+                    <div class="popup__typebox__header">
+                        <span>全部类型</span>
+                    </div>
+                    <div class="popup__typebox__list flex">
+                        <span v-for="(type, idx) in types" :key="idx" class="item"
+                            @click="handleTouchThatType(event, type)">
+                            {{ type.name }}
+                        </span>
+                    </div>
+                </div> -->
+                <div class="popup__rangetime">
+                    <div class="popup__typebox__header">
+                        <span>申请时间</span>
+                    </div>
+                    <div class="popup__rangetime__main flex flex-row flex-row-aic">
+                        <van-field
+                            v-model="timeStart"
+                            clearable
+                            placeholder="开始时间"
+                            :center="true"
+                            @click-input="handleClickTimeStart"
+                        />
+                        <span class="horization"></span>
+                        <van-field
+                            v-model="timeEnd"
+                            clearable
+                            placeholder="结束时间"
+                            :center="true"
+                            @click-input="handleClickTimeEnd"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div class="btn-popup" @click="handleSubmitFilter">
+                <span>搜索</span>
+            </div>
+
+
+        </van-popup>
+
+        <ChooseTime
+            ref="chooseTimeRef"
+            v-model="timeVal"
+        />
+    </div>
+</template>
+
+<script>
+import ChooseTime from '@/components/ChooseTime'
+import { getRecordList } from '@/api/approveinfo'
+import ApproveItem from '../approve/components/ApproveItem.vue'
+import store from '@/store'
+import dayjs from 'dayjs'
+
+export default {
+    nameText: '我的申请状态',
+    name: 'ApplyState',
+    components: {
+        ApproveItem,
+        ChooseTime
+    },
+    computed: {
+        rendeTitleCom () {
+            let t = this.formType
+            let welcomeTxt = `${store.getters.name}提交的`
+            switch (t) {
+                case 5:
+                    welcomeTxt += '出差申请'
+                    break
+            }
+            return welcomeTxt
+        }
+    },
+    data() {
+        return {
+            timeVal: '',
+            formType: undefined,
+            popupVisibility: false,
+            tabVal: '2',
+            tabs: [
+                {
+                    title: '审批中',
+                    name: '2'
+                },
+                {
+                    title: '已通过',
+                    name: '3'
+                },
+                {
+                    title: '已驳回',
+                    name: '4'
+                },
+                {
+                    title: '已撤销',
+                    name: '5'
+                }
+            ],
+            searchVal: '',
+            // types: [
+            //     { name: '领用申请', id: '' },
+            //     { name: '申请批呈', id: '' },
+            //     { name: '学校文件', id: '' },
+            //     { name: '批阅申请', id: '' },
+            //     { name: '合同批呈', id: '' },
+            //     { name: '维修申请', id: '' },
+            //     { name: '用车申请', id: '' },
+            //     { name: '请假申请', id: '' },
+            //     { name: '出差申请', id: '' },
+            //     { name: '领用申请', id: '' },
+            //     { name: '入库申请', id: '' },
+            //     { name: '申购申请', id: '' },
+            // ],
+            // typeVal: '',
+
+            timeStart: '', // 开始时间
+            timeEnd: '',
+
+            pagination: {
+                page: 1,
+                page_num: 10,
+            },
+            showEmpty: false,
+            listLoading: false,
+            finished: false,
+            finishedText: '暂无更多数据',
+            tableData: [],
+        }
+    },
+    created() {
+        if (this.$route.query) {
+            this.formType = this.$route.query.type
+        }
+    },
+    methods: {
+        async __record_list__ () {
+            try {
+                let THAT = this
+                const params = {
+                    module: this.formType,
+                    status: Number(this.tabVal),
+                    ...this.pagination
+                }
+                const res = await getRecordList(params)
+                if (res.code === 1) {
+                    this.listLoading = false
+                    let list = res.data || []
+                    list = list.map(item => ({
+                        ...item,
+                        __rows_item__: THAT.filterRow(item)
+                    }))
+                    if (list.length < this.pagination.page_num) this.finished = true
+                    else {
+                        this.pagination.page++
+                    }
+                    this.tableData = this.tableData.concat(list)
+                    if (this.finished && !this.tableData.length) {
+                        this.finishedText = ''
+                        this.showEmpty = true
+                    }
+                }
+            } catch (e) {
+                console.log('record list', e);
+            }
+        },
+        filterRow (data) {
+            let arrs = []
+            switch (this.formType) {
+                case 5: // 出差申请展示内容
+                    arrs = [
+                        {
+                            label: '发起事由',
+                            val: data.reason
+                        },
+                        {
+                            label: '同行人员',
+                            val: data.peer_user.length ? data.peer_user.map(user => (user.name)).join('、') : '暂无同行人员'
+                        },
+                        {
+                            label: '出差时间',
+                            val: `${data.start_time} — ${data.end_time}`
+                        }
+                    ]
+                    break
+            }
+            return arrs
+        },
+        onLoadData () {
+            this.__record_list__()
+        },
+        // Tab 切换前验证
+        handleTabBeforeChangeEvnet(val) {
+            this.tabVal = val
+            this.showEmpty = false
+            this.tableData = []
+            this.listLoading = true
+            this.finished = false
+            this.finishedText = '暂无更多数据'
+            this.pagination.page = 1
+            this.onLoadData()
+            return true
+        },
+
+        handleClickTimeStart () {
+            const THAT = this
+            THAT.timeVal = THAT.timeStart
+            this.$refs.chooseTimeRef.openChooseTime(date => {
+                THAT.timeStart = dayjs(date).format('YYYY-MM-DD HH:mm')
+            })
+        },
+        handleClickTimeEnd () {
+            const THAT = this
+            THAT.timeVal = THAT.timeEnd
+            this.$refs.chooseTimeRef.openChooseTime(date => {
+                THAT.timeEnd = dayjs(date).format('YYYY-MM-DD HH:mm')
+            })
+        },
+
+        // 切换接口中转站
+        handleGetListMiddware() {
+            let type = this.activeName
+
+            switch (type) {
+                case '2':
+                    this.__wait__()
+                    break;
+                case '3':
+                    this.__over__()
+                    break;
+                case '4':
+                    this.__recive__()
+                    break;
+                case '5':
+                    this.__backed__()
+                    break;
+            }
+        },
+        __wait__() { },
+        __over__() { },
+        __recive__() { },
+        __backed__() {},
+
+        // NOTE: choosed type
+        handleTouchThatType(type) {
+            const { name } = type
+            this.typeVal = name
+        },
+
+        // NOTE: 点击跳转搜索页
+        handleClickSearchBox() {
+            this.$router.push({
+                name: 'Search',
+                query: {
+                    formType: this.formType,
+                    flag: 'info',
+                    flagState: this.tabVal
+
+                }
+            })
+        },
+
+        // NOTE: 点击筛选弹出选择内容
+        handleSwitchFilterBox() {
+
+        },
+
+        // NOTE: 提交过滤搜索条件
+        handleSubmitFilter() {
+            // 搜索添加时间
+            this.popupVisibility = false // close popup window.
+            this.showEmpty = false
+            this.tableData = []
+            this.listLoading = true
+            this.finished = false
+            this.finishedText = '暂无更多数据'
+            this.pagination.page = 1
+            this.onLoadData()
+        },
+        // goexamine() {
+        //     this.$router.push({
+        //         name: 'Examine',
+        //         query: {
+        //             type: 'pass'
+        //         }
+        //     })
+        // },
+
+        // goexamine2() {
+        //     this.$router.push({
+        //         name: 'Examine',
+        //         query: {
+        //             type: 'refuse'
+        //         }
+        //     })
+        // },
+        // goDetail() {
+        //     this.$router.push({
+        //         name: 'ExamineDetail',
+        //         query: {}
+        //     })
+        // }
+    }
+}
+</script>
+  
+<style lang="less">
+@import url("@/styles/variables.less");
+
+.approve {
+    &-container {
+        height: 100%;
+
+        .van-tabs {
+            padding-bottom: 4px;
+            border-bottom: 1px solid rgba(216, 216, 216, 1);
+            background-color: white;
+        }
+
+        .van-tabs__line {
+            background-color: #000;
+        }
+
+        .van-popup.van-popup--bottom {
+            padding: 14px 12px;
+            box-sizing: border-box;
+        }
+    }
+
+    &-main {
+        flex: 1;
+        padding: 6px;
+        .approve-item-container {
+            margin-bottom: 6px;
+            &:last-child {
+                margin-bottom: initial;
+            }
+        }
+    }
+}
+
+.filter-container {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    background-color: @white;
+
+    .van-cell.van-field {
+        background-color: rgba(238, 238, 239, 1);
+        border-radius: 6px;
+        padding-top: 6px;
+        padding-bottom: 6px;
+        position: relative;
+
+        &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+        }
+    }
+
+    .filterbox {
+        padding-left: 10px;
+
+        span {
+            font-size: @font-size-third;
+            font-weight: 500;
+            color: #727273;
+            line-height: 22px;
+        }
+    }
+}
+
+
+.popup {
+    &__title {
+        text-align: center;
+        font-size: @font-size-common;
+        font-weight: 600;
+        color: #0A1629;
+        line-height: 22px;
+        padding-bottom: 30px;
+    }
+
+    &__typebox {
+        &__header {
+            font-size: @font-size-secondery;
+            font-weight: 600;
+            color: #0A1629;
+            line-height: 20px;
+            margin-bottom: 12px;
+        }
+
+        &__list {
+            flex-wrap: wrap;
+            justify-content: space-between;
+            padding-bottom: 14px;
+
+            span {
+                display: inline-block;
+                width: 111px;
+                height: 34px;
+                line-height: 34px;
+                text-align: center;
+                background: #F6F6F6;
+                border-radius: 8px;
+                font-size: @font-size-third;
+                font-weight: 400;
+                color: #191A1E;
+                margin-bottom: 8px;
+            }
+        }
+    }
+
+    &__rangetime {
+        &__main {
+            justify-content: space-between;
+        }
+
+        .van-cell.van-field {
+            width: 40%;
+            background: #F6F6F6;
+            border-radius: 8px;
+            text-align: center;
+
+            .van-field__control {
+                text-align: center;
+            }
+        }
+
+        span.horization {
+            display: inline-block;
+            width: 30px;
+            height: 1px;
+            background-color: #000;
+        }
+    }
+}
+
+.popupxx {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .btn-popup {
+        background: #3290C4;
+        border-radius: 11px;
+        font-size: @font-size-common;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: center;
+        padding: 10px 0;
+    }
+}
+</style>
+  

src/views/applyfor/components/CDate.vue

@@ -0,0 +1,205 @@
+<template>
+    <layout
+        :title="$attrs.title"
+        :required="$attrs.required"
+    >
+        <div class="custom-date-container flex flex-row flex-row-aic">
+            <div class="left" @click="() => show = !show">
+                <div v-if="selectVal" class="value">{{ selectVal }}</div>
+                <div v-else class="default">请选择</div>
+            </div>
+            <div class="right">
+                <van-icon v-if="selectVal" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
+                <van-icon color="#A2A3A4" name="arrow"  @click="() => show = !show" />
+            </div>
+        </div>
+
+        <!-- 
+            NOTE: 
+                调用日期和时间组件
+        -->
+        <van-popup
+            v-model="show"
+            position="bottom"
+        >
+            <div class="switch-data-box flex flex-row flex-row-aic">
+                <div class="left">
+                    <span @click="() => swt = 0" :class="{'active': swt === 0}">{{ dateShow }}</span>
+                    <span @click="() => swt = 1" :class="{'active': swt === 1}">{{ rangeShow }}</span>
+                    <span @click="() => swt = 2" :class="{'active': swt === 2}">时间</span>
+                </div>
+                <div class="right" @click="handleConfirmBtn">
+                    <div class="btn">确认</div>
+                </div>
+            </div>
+            <van-calendar
+                v-show="swt === 0"
+                v-model="date"
+                :poppable="false"
+                :show-confirm="true"
+                :style="{ height: '340px' }"
+                :show-title="false"
+                :show-subtitle="true"
+                row-height="50"
+                @confirm="onConfirmDateVal"
+            />
+            <van-picker
+                v-show="swt === 1"
+                title=""
+                :show-toolbar="false"
+                :columns="rangeTimeList"
+                @change="handlePickerChange"
+            />
+
+            <div class="swtbox2" v-show="swt === 2">
+                <van-datetime-picker
+                    v-model="timeVal"
+                    type="time"
+                    title="选择时间"
+                    :min-hour="0"
+                    :max-hour="23"
+                    :show-toolbar="false"
+                    visible-item-count="4"
+                    />
+            </div>
+        </van-popup>
+    </layout>
+</template>
+
+
+<style lang="less" scoped>
+.custom-date {
+    &-container {
+        justify-content: space-between;
+        .left {
+            flex: 1;
+            .value {
+                font-size: 14px;
+                font-weight: 400;
+                color: #1A1A1F;
+                line-height: 20px;
+            }
+            .default {
+                font-size: 14px;
+                font-weight: 400;
+                color: #727273;
+                line-height: 20px;
+            }
+        }
+        .right {
+            .van-icon {
+                margin-left: 2px;
+            }
+        }
+    }
+}
+.switch-data-box {
+    justify-content: space-between;
+    padding: 0 12px;
+    span {
+        display: inline-block;
+        font-size: 14px;
+        font-weight: 400;
+        color: #707073;
+        padding: 10px 8px;
+        margin-right: 6px;
+
+        &.active {
+            border-bottom: 2px solid #707073;
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .right {
+        font-size: 16px;
+        font-weight: 500;
+        color: #3290C4;
+        line-height: 22px;
+    }
+}
+
+.swtbox2 {
+    padding: 20px 0;
+    box-sizing: border-box;
+}
+</style>
+
+<script>
+import Layout from './Layout.vue';
+
+import { formatTime } from '@/utils/formatTime'
+
+export default {
+    name: "CDate",
+    components: {
+        Layout
+    },
+    computed: {
+        dateShow () {
+            return this.dateVal ? formatTime(this.dateVal) : '日期'
+        },
+        rangeShow () {
+            return this.rangeTime === '上午' ? '上午' : '下午'
+        }
+    },
+    data () {
+        return {
+            swt: 0,
+            show: false,
+            selectVal: '',
+            date: '',
+
+            rangeTimeList: ['上午', '下午'],
+            dateVal: '',
+            rangeTime: '上午',
+            timeVal: '',
+
+            // NOTE: 是否需要外界选择最小出发时间； 例如出发结束时间不能和开始同一时间
+        }
+    },
+    methods: {
+        // 确定日期内容
+        onConfirmDateVal (date) {
+            this.dateVal = date
+        },
+
+        handleRemoveVal () {
+            console.log('placehoder handleRemoveVal');
+            this.selectVal = ''
+        },
+
+        // 选择上午还是下午
+        handlePickerChange (event, valT, valI) {
+            console.log(valT, valI);
+            this.rangeTime = valT
+            console.log(arguments);
+        },
+        
+        // 确认提交的按钮
+        handleConfirmBtn () {
+            this.show = false
+            this.selectVal = `${formatTime(this.dateVal)} ${this.timeVal}`
+            console.log('confirm btn timeRange>>>', {
+                date: this.dateVal,
+                ranget: this.rangeTime,
+                time: this.timeVal
+            });
+            this.$emit('input', {
+                date: this.dateVal,
+                ranget: this.rangeTime,
+                time: this.timeVal
+            })
+        }
+    },
+    watch: {
+        show (bool) {
+            if (!bool) {
+                this.swt = 0
+            }
+        },
+
+        // TODO: 需要 回显渲染页面
+    }
+}
+</script>

src/views/applyfor/components/CFiles.vue

@@ -0,0 +1,229 @@
+<template>
+    <!-- NOTE: 附件和图片组件 -->
+    <div class="custom-files-container">
+        <div
+            :class="[
+                'custom-files__header',
+                'flex','flex-row','flex-row-aic','flex-row-jcsp',
+                filelist.length ? 'pb6' : '',
+            ]">
+            <span class="title">{{ headerTitle }}</span>
+            <van-icon
+                color="#a2a3a4"
+                :size="20"
+                name="add-o"
+                @click="handleLaunchUploadBox"
+            />
+        </div>
+
+        <!-- files show style -->
+        <div class="source-listbox">
+            <render-dom :vnode="vnodecom" />
+        </div>
+        
+        <van-uploader
+            v-show="filelist.length && !isFs"
+            ref="uploadFileRef"
+            v-model="filelist"
+            :after-read="afterRead"
+            :max-count="$attrs.maxCount"
+            :before-read="beforeRead"
+            @oversize="onOversize"
+            :show-upload="false"
+            :accept="acceptHandle"
+            :preview-image="!isFs"
+            preview-size="48px"
+        ></van-uploader>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+.custom-files {
+    &-container {
+        padding: 9px 12px;
+        background: #fff;
+    }
+    &__header {
+        &.pb6 {
+            padding-bottom: 6px;
+        }
+        .title {
+            font-size: @font-size-secondery;
+            font-weight: 400;
+            color: #191A1E;
+            line-height: 20px;
+        }
+    }
+}
+.source-listbox {
+     // 附件样式
+     .files {
+        // &-comtainer {}
+        &-row {
+            margin-bottom: 5px;
+            &:last-child {
+                margin-bottom: initial;
+            }
+            .icon {
+                width: 35px;
+                height: 42px;
+                background: #FFCF95;
+                margin-right: 12px;
+            }
+            &__info {
+                flex: 1;
+            }
+        }
+        &-name {
+            font-size: @font-size-common;
+            font-weight: 400;
+            color: #191A1E;
+            line-height: 18px;
+        }
+        &-other-info {
+            justify-content: space-between;
+            margin-top: 4px;
+            .size {
+                font-size: @font-size-third;
+                font-weight: 400;
+                color: #9A9A9A;
+                line-height: 18px;
+                margin-right: 10px;
+            }
+            .review {
+                font-size: @font-size-third;
+                font-weight: 400;
+                color: #3290C4;
+                line-height: 18px;
+            }
+            // &__div {}
+        }
+    }
+}
+</style>
+
+<script>
+
+export default {
+    name: 'CFiles',
+    props: {
+        ctype: {
+            validator: val => ['files', 'images'].includes(val),
+            default: 'files'
+        }
+    },
+    computed: {
+        isFs () { // 是否是文件类型上传
+            return this.ctype === 'files'
+        },
+        acceptHandle () { // 图片上传文件限制
+            return this.isFs ? "*" : "image/*"
+        },
+        vnodecom () {
+            return this.isFs ? this.handleRenderFiles() : null
+        },
+        headerTitle () {
+            return this.isFs ? '附件' : '图片'
+        }
+    },
+    data () {
+        return {
+            filelist: []
+        }
+    },
+    
+    methods: {
+        // 启动上传组件
+        handleLaunchUploadBox() {
+            console.log(this.$refs.uploadFileRef);
+            this.$refs.uploadFileRef.chooseFile()
+        },
+
+        // 渲染文件
+        handleRenderFiles() {
+            let files = this.filelist
+            return (
+                <ul class="files-container">
+                    {
+                        files.map((file, index) => (
+                            <li class="files-row flex flex-row flex-row-aic">
+                                <div class="icon"></div>
+                                <div class="files-row__info">
+                                    <div class="files-name">{ file.file.name }</div>
+                                    <div class="files-other-info flex flex-row flex-row-aic">
+                                        <div class="files-other-info__div flex flex-row">
+                                            <div class="size">{ file.file.size }</div>
+                                            <div class="review" onClick={this.handleReviewFiles.bind(this, file.file)}>预览</div>
+                                        </div>
+                                        <van-icon
+                                            size={20}
+                                            color="#A2A3A4"
+                                            name="clear"
+                                            onClick={this.handleRemoveFile.bind(this, file, index)}
+                                        />
+                                    </div>
+                                </div>
+                            </li>
+                        ))
+                    }
+                </ul>
+            )
+            // <div class="files-row flex flex-row flex-row-aic"
+            //     v-for="(file, idx) in value"
+            //     :key="idx"
+            // >
+            //     <div class="icon">
+            //         <!-- NOTE: 根据文件类型放置Icon -->
+            //     </div>
+            //     <div class="files-row__info">
+            //         <div class="files-name">{{ file.name }}</div>
+            //         <div class="files-other-info flex flex-row flex-row-aic">
+            //             <div class="size">{{ file.size }}</div>
+            //             <div class="review" @click="handleReviewFiles(file, idx)">预览</div>
+            //         </div>
+            //     </div>
+            // </div>
+        },
+
+        // 渲染图片 采用组件自带图片渲染
+        // handleRenderImages() {},
+
+        // @returns Boolean {true/false}
+        beforeRead (file) {
+            if ([].includes(file.ctype)) {
+                console.log(file);
+            }
+            return true
+        },
+        // 自行上传文件
+        afterRead (file) {
+            // 通过 status 属性可以标识上传状态，uploading 表示上传中，failed 表示上传失败，done 表示上传完成。
+            // file.status = 'uploading';
+            // file.message = '上传中...';
+
+            // setTimeout(() => {
+            //     file.status = 'failed';
+            //     file.message = '上传失败';
+            // }, 1000);
+            console.log(file)
+        },
+        // 超出文件大小
+        onOversize (file) {
+            console.log('超出大小', file);
+        },
+        // 预览文件
+        handleReviewFiles(file, p2, p3) {
+            // TODO: 如果是图片直接预览。 非图片其他方式预览（下载、或者插件）
+            console.log('func', file, p2, p3);
+            console.log('ref', this.$refs.uploadFileRef);
+            this.$refs.uploadFileRef.onPreviewImage()
+        },
+        handleRemoveFile (file, index) {
+            // console.log('f>>>>', file, index);
+            this.filelist.splice(index, 1)
+        }
+    }
+}
+
+</script>

src/views/applyfor/components/CFlowPath.vue

@@ -0,0 +1,297 @@
+<template>
+    <layout
+        title="流程"
+    >
+        <div class="custom-flow-path-container">
+            <!-- 审批人 -->
+            <div class="rows">
+                <div class="left">
+                    <div class="left__title">
+                        审批人
+                    </div>
+                    <div class="left__desc">
+                        {{ approveTxt }}
+                    </div>
+                </div>
+                <div class="right flex flex-row">
+                    <div v-if="approveSelList.length" class="procesbox flex flex-row flex-row-aic">
+                        <div
+                            class="flex flex-row"
+                            v-for="(personal, idx) in approveSelList"
+                            :key="idx"
+                        >
+                            <div class="personal flex flex-col"
+                            >
+                                <div class="avatar avatar--name">
+                                    <span class="avatar__name">{{ personal.name | changeName }}</span>
+                                </div>
+                                <div class="personal__name">{{ personal.name }}</div>
+                            </div>
+
+                            <van-icon class="arrow" v-if="idx !== approveSelList.length - 1" :size="14" name="arrow" />
+                        </div>
+                    </div>
+                    <div v-if="approveSelList.length < 3" class="empty-box" @click="handleOpenContacts">
+                        <van-icon color="#979797" name="plus" />
+                    </div>
+                </div>
+                <div class="rows-line"></div>
+            </div>
+
+            <!-- 抄送人 -->
+            <div class="rows">
+                <div class="left">
+                    <div class="left__title">
+                        抄送人
+                    </div>
+                    <div class="left__desc">
+                        {{ sendTxt }}
+                    </div>
+                </div>
+                <div class="right flex flex-row">
+                    <div v-if="copySelList.length" class="procesbox flex flex-row flex-row-aic">
+                        <div
+                            class="flex flex-row"
+                            v-for="(personal, idx) in copySelList"
+                            :key="idx"
+                        >
+                            <div class="personal flex flex-col"
+                            >
+                                <div class="avatar avatar--name">
+                                    <span class="avatar__name">{{ personal.name | changeName }}</span>
+                                </div>
+                                <div class="personal__name">{{ personal.name }}</div>
+                            </div>
+
+                            <van-icon class="arrow" v-if="idx !== 2" :size="14" name="arrow" />
+
+                        </div>
+                    </div>
+                    <div v-if="copySelList.length < 3" class="empty-box">
+                        <van-icon color="#979797" name="plus" />
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </layout>
+</template>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+
+.custom-flow-path {
+    &-container {
+        padding: 10px 12px;
+        background-color: @white;
+        .rows {
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            // align-items: center;
+            justify-content: space-between;
+            margin-bottom: 16px;
+            
+            .rows-line {
+                position: absolute;
+                left: -10px;
+                top: 17px;
+                width: 1px;
+                height: 100%;
+                background-color: #D8D8D8;
+            }
+
+            .left {
+                &__title {
+                    position: relative;
+                    font-size: @font-size-common;
+                    font-weight: 400;
+                    color: #191A1E;
+                    line-height: 18px;
+                    &::after {
+                        position: absolute;
+                        content: "";
+                        left: -12px;
+                        top: 50%;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 8px;
+                        background: #D8D8D8;
+                        transform: translateY(-50%);
+
+                    }
+                }
+                &__desc {
+                    font-size: @font-size-third;
+                    font-weight: 400;
+                    color: #9A9A9A;
+                    line-height: 18px;
+                }
+            }
+
+            .empty-box {
+                width: 31px;
+                height: 31px;
+                text-align: center;
+                line-height: 31px;
+                background: #FFFFFF;
+                border-radius: 5px;
+                border: 1px solid #EEEEEF;
+            }
+            .right {
+
+            }
+            &:last-child {
+                .rows-line {
+                    width: 0;
+                }
+            }
+        }
+
+        .avatar {
+            position: relative;
+            width: 31px;
+            height: 31px;
+            background: #3290C4;
+            border-radius: 4px;
+            &--name {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+            }
+            &__name {
+                font-size: @font-size-third;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #FFFFFF;
+                line-height: 9px;
+            }
+        }
+
+        .procesbox {
+            flex-wrap: wrap;
+            .avatar {
+                font-size: @font-size-third;
+                &__name {
+                    white-space: nowrap;
+                }
+            }
+            .personal {
+                align-items: center;
+                &__name {
+                    font-size: @font-size-third;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #9A9A9A;
+                    text-align: center;
+                    line-height: 20px;
+                }
+            }
+            .arrow {
+                height: 31px;
+                line-height: 31px;
+                padding: 0 5px;
+            }
+        }
+        
+    }
+}
+</style>
+
+<script>
+import * as dd from 'dingtalk-jsapi';
+import Layout from './Layout.vue';
+
+export default {
+    name: 'CFlowPath',
+    components: {
+        Layout
+    },
+    computed: {
+        approveTxt () {
+            let list = this.approvePersonal
+            return list.length ? `${list.length}人依次审批` : '请选择审批人'
+        },
+        sendTxt () {
+            let list = this.sendTo
+            return list.length ? `抄送${list.length}人` : '请选择抄送人'
+        },
+    },
+    props: {
+        approve: {
+            type: Array
+        },
+        copy: {
+            type: Array
+        },
+        isAllowCopy: { // 是否允许抄送人存在变更 (0:否, 1:是)
+            validator: val => (['0', '1'].includes(val))
+        }
+    },
+    data () {
+        return {
+            approveSelList: [],
+            copySelList: [],
+
+            personalList: [],
+            personalList2: [],
+
+            approvePersonal: [1],
+            sendTo: []
+        }
+    },
+    methods: {
+
+        // 打开钉钉联系人控件。完成选审批/抄送人操作
+        handleOpenContacts () {
+            // biz.contact.complexPicker
+            dd.biz.contact.complexPicker({
+                title:"测试标题",            //标题
+                corpId:"xxx",              //企业的corpId
+                multiple:true,            //是否多选
+                limitTips:"超出了",          //超过限定人数返回提示
+                maxUsers:1000,            //最大可选人数
+                pickedUsers:[],            //已选用户
+                pickedDepartments:[],          //已选部门
+                disabledUsers:[],            //不可选用户
+                disabledDepartments:[],        //不可选部门
+                requiredUsers:[],            //必选用户（不可取消选中状态）
+                requiredDepartments:[],        //必选部门（不可取消选中状态）
+                appId:158,              //微应用Id，企业内部应用查看AgentId
+                permissionType:"xxx",          //可添加权限校验，选人权限，目前只有GLOBAL这个参数
+                responseUserOnly:false,        //返回人，或者返回人和部门
+                startWithDepartmentId:0 ,   //仅支持0和-1
+                onSuccess: function(result) {
+                    console.log(result);
+                    /**
+                    {
+                        selectedCount:1,                              //选择人数
+                        users:[{"name":"","avatar":"","emplId ":""}]，//返回选人的列表，列表中的对象包含name（用户名），avatar（用户头像），emplId（用户工号）三个字段
+                        departments:[{"id":,"name":"","number":}]//返回已选部门列表，列表中每个对象包含id（部门id）、name（部门名称）、number（部门人数）
+                    }
+                    */
+                },
+                onFail : function(err) {
+                    console.log(err);
+                }
+            });
+        },
+    },
+    watch: {
+        approve: {
+            handler (arrs) {
+                if (arrs.length) this.approveSelList = [...arrs]
+            },
+            deep: true,
+        },
+        copy: {
+            handler (arrs) {
+                if (arrs.length) this.copySelList = [...arrs]
+            },
+            deep: true
+        }
+    }
+
+}
+</script>

src/views/applyfor/components/CInput.vue

@@ -0,0 +1,72 @@
+<template>
+    <layout
+        :title="$attrs.title"
+        :required="$attrs.required"
+    >
+        <div class="custom-input-container flex flex-row flex-row-aic">
+            <van-field
+                class="input-padding"
+                v-model="inputValue"
+                :type="inputType"
+                :placeholder="$attrs.placeholder || '请输入'"
+                @input="handleInputEvent"
+                @clear="handleCloseInput"
+                clearable
+                :maxlength="$attrs.maxlength || undefined"
+                show-word-limit
+                rows="3"
+                autosize
+            />
+        </div>
+    </layout>
+</template>
+
+<style lang="less" scoped>
+.custom-input {
+    &-container {
+        .input-padding {
+            padding: 3px 0;
+        }
+    }
+}
+</style>
+
+<script>
+import Layout from './Layout.vue';
+export default {
+    name: 'CInput',
+    components: {
+        Layout
+    },
+    
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        inputType: {
+            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/CSelect.vue

@@ -0,0 +1,129 @@
+<template>
+    <layout
+        :title="$attrs.title"
+        :required="$attrs.required"
+    >
+        <div class="custom-select-container flex flex-row flex-row-aic">
+            <div class="left" @click="() => show = !show">
+                <div v-if="selectVal" class="value">{{ selectVal }}</div>
+                <div v-else class="default">请选择</div>
+            </div>
+            <div class="right">
+                <van-icon v-if="selectVal" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
+                <van-icon color="#A2A3A4" name="arrow"  @click="() => show = !show" />
+            </div>
+        </div>
+
+        <!-- NOTE: 调用选择组件picker -->
+        <van-popup
+            v-model="show"
+            position="bottom"
+        >
+            <van-picker
+                title=""
+                show-toolbar
+                :columns="columns"
+                :value-key="pickerValueKey"
+                @confirm="onConfirm"
+                @cancel="onCancel"
+            />
+        </van-popup>
+    </layout>
+</template>
+
+<style lang="less" scoped>
+.custom-select {
+    &-container {
+        justify-content: space-between;
+        .left {
+            flex: 1;
+            .value {
+                font-size: 14px;
+                font-weight: 400;
+                color: #1A1A1F;
+                line-height: 20px;
+            }
+            .default {
+                font-size: 14px;
+                font-weight: 400;
+                color: #727273;
+                line-height: 20px;
+            }
+        }
+        .right {
+            .van-icon {
+                margin-left: 2px;
+            }
+        }
+    }
+}
+</style>
+
+<script>
+import Layout from './Layout.vue';
+export default {
+    name: 'CSelect',
+    components: {
+        Layout
+    },
+    
+    props: {
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        list: {
+            type: Array,
+            default: () => ([])
+        },
+        pickerValueKey: {
+            type: [String, Number],
+            default: ''
+        },
+        pickerValueId: {
+            type: [String, Number],
+            default: ''
+        }
+    },
+    
+    data () {
+        return {
+            show: false,
+            selectVal: '',
+            columns: [],
+        }
+    },
+    methods: {
+        handleRemoveVal () {
+            this.selectVal = ''
+            this.$emit('input', '')
+        },
+        onConfirm(value) {
+            this.selectVal = value[this.pickerValueKey]
+            this.show = false
+            console.log('???', value[this.pickerValueKey], value);
+            this.$emit('input', value[this.pickerValueId])
+        },
+        onCancel() {
+            this.$listeners['cancel'] && this.$emit('cancel')
+            this.$emit('cancel')
+        },
+    },
+    watch: {
+        list: {
+            handler (arrs) {
+                if (arrs.length) this.columns = arrs
+            },
+            immediate: true
+        },
+        value: {
+            handler (val) {
+                if (val) {
+                    let fidx = this.list.findIndex(item => item[this.pickerValueId] == val)
+                    if (fidx >= 0) this.selectVal = this.list[fidx][this.pickerValueKey]
+                }
+            }
+        }
+    }
+}
+</script>

src/views/applyfor/components/CSwitch.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="layout-container">
+        <div class="layout__title flex flex-row flex-row-aic">
+            <div class="left">
+                <span class="title">{{ $attrs.title }}</span>
+                <span v-if="$attrs.required" class="require">*</span>
+            </div>
+            <div class="right">
+                <van-switch
+                    :size="20"
+                    :value="$attrs.value"
+                    active-color="#3290c4"
+                    :active-value="$attrs.activeValue"
+                    :inactive-value="$attrs.inactiveValue"
+                    @change="value => ($emit('input', value))"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.layout {
+    &-container {
+        padding: 9px 12px;
+        background: #fff;
+        .title,
+        .require {
+            font-size: 14px;
+            font-weight: 400;
+        }
+        .title {
+            color: #191A1E;
+            line-height: 20px;
+            margin-bottom: 5px;
+        }
+        .require {
+            color: #F45642;
+            line-height: 20px;
+            margin-left: 2px;
+        }
+    }
+    &__title {
+        justify-content: space-between;
+    }
+}
+</style>
+
+<script>
+export default {
+    name: 'CSwitch'
+}
+</script>

src/views/applyfor/components/IndexType5.vue

@@ -0,0 +1,266 @@
+<template>
+    <div class="type5-container">
+        <div class="btn-container" @click="handleNavRightBack">
+            <div class="btn-span">我的出差</div>
+        </div>
+        <c-input
+            title="填写事由"
+            :required="true"
+            v-model="reason"
+        />
+
+        <peers
+            v-model="peer_user"
+        />
+
+        <c-date
+            title="出差开始时间"
+            :required="true"
+            v-model="start_time"
+        />
+        <c-date
+            title="出差结束时间"
+            :required="true"
+            v-model="end_time"
+
+        />
+
+        <c-files />
+
+        <c-files ctype="images" />
+
+        <c-select 
+            title="类型"
+            :required="true"
+            :list="awayArr"
+            pickerValueKey="name"
+            pickerValueId="id"
+            v-model="type"
+        />
+
+        <c-switch
+            v-if="type == 2"
+            title="是否跨关内关外"
+            :required="true"
+            v-model="is_who"
+            :activeValue="1"
+            :inactiveValue="0"
+        />
+
+        <c-input
+            :title="is_who ? '预算金额' : '备注'"
+            :required="Boolean(is_who)"
+            v-model="remark"
+            input-type="textarea"
+            :placeholder="is_who ? '请输入预算金额' : '请输入往返主要方式、预算金额'"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 出差申请页面
+ */
+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'
+
+import { formatTime } from '@/utils/formatTime';
+
+import { settingNavigationRight, settingNavigationTitle } from '@/utils/dingtalk';
+
+export default {
+    name: 'IndexType5',
+    mixins: [
+        indexComponentsMixins,
+        indexMixin
+    ],
+    components: {
+        Peers
+    },
+
+    data() {
+        return {
+            formType: 5,
+            awayArr: [], // 出差类型
+            
+            // 必填字段
+            requiredKey: [
+                'reason',
+                'start_time',
+                'end_time',
+                'type'
+                // 是否出境需要在 type === 2 时才必传
+            ],
+
+            module: 5,
+            id: undefined, // id存在，表示编辑
+            reason: '', // 申请理由
+            start_time: '', // 开始时间
+            end_time: '', // 结束时间
+            type: undefined, // 市内，市外
+
+            document: '', // 附件
+            images: '', // 图片
+            remark: '', // 备注
+            is_who: 0, // 是否出境
+            peer_user: [ // 同行人员信息
+                // {
+                //     is_who: '',
+                //     user_id: '',
+                //     name: '',
+                //     desc: ''
+                // }
+            ],
+            approve_user: '',
+            copy_user: ''
+        }
+    },
+    created () {
+        this.navigationSetting()
+        this.init()
+    },
+    methods: {
+        init () {
+            this.handleRenderType5Event()
+            this.getCommonFlowPathData()
+        },
+        navigationSetting () {
+            settingNavigationTitle({
+                title: '出差申请'
+            })
+            settingNavigationRight({
+                show: true,
+                control: true,
+                text: '我的出差',
+                callback: this.handleNavRightBack
+            })
+        },
+        handleNavRightBack (result) {
+            console.log('result', result);
+            this.$router.push({
+                name: 'ApplyState',
+                query: {
+                    type: 5
+                }
+            })
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+        handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData');
+            this.__post__(formData)
+        },
+        async __post__ (data) {
+            try {
+                const res = await postCreateInfo(data)
+                if (res.code === 1) {
+                    this.$toast(res.msg)
+
+                    // TODO: 提交成功后跳转到我的审批
+                    /*
+                    this.$router.push({
+                        name: '',
+                        query: {
+                            formtype: this.formType
+                        }
+                    })
+                    */
+
+                }
+            } catch(e) {
+                console.log('it5, __post__', e);
+            }
+        },
+        validate (data) {
+            let mapTxt = {
+                'reason': '申请事由',
+                'start_time': '开始时间',
+                'end_time': '结束时间',
+                'type': '出差类型',
+                is_who: '跨关内外'
+            }
+            let hasEmpty = false
+            let hasKey = ''
+            for(let i = 0; i < this.requiredKey.length; i++) {
+                let key =this.requiredKey[i]
+                let val = data[key]
+                let type = typeof data[key]
+                if (!val) {
+                    if (type === 'number' && !isNaN(val)) continue
+                    else {
+                        hasKey = key
+                        hasEmpty = true
+                        break
+                    }
+                }
+            }
+            if (data.type == 2 && !data.is_who) {
+                hasEmpty = true
+                hasKey = 'is_who'
+            }
+            if (hasEmpty) {
+                this.$toast(mapTxt[hasKey] + '为空')
+                return true
+            }
+        },
+        __format_data__ () {
+            let params = {
+                module: 5,
+                reason: this.reason, // 申请理由
+                start_time: '', // 开始时间
+                end_time: '', // 结束时间
+                type: this.type,
+
+                document: '', // 附件
+                images: '', // 图片
+                remark: this.remark, // 备注
+                is_who: this.is_who,
+                peer_user: [ // 同行人员信息
+                    ...this.peer_user.map(item => ({ /* eslint-disable-line */
+                        is_who: item.xtype === 'inside' ? 0 : 1,
+                        name: item.name,
+                        desc: item.xtype === 'inside' ? item.selectDeptName : item.remark,
+                        user_id: item.emplId || item.user_id || ''
+                    }))
+                ],
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+            if (this.id) params.id = this.id
+            if (this.start_time) {
+                params.start_time = `${formatTime(this.start_time.date, '-')} ${this.start_time.time}`
+            }
+            if (this.end_time) {
+                params.end_time = `${formatTime(this.end_time.date, '-')} ${this.end_time.time}`
+            }
+            return params
+        },
+        /**
+         * @description 获取出差类型
+         */
+        async handleRenderType5Event() {
+            try {
+                this.awayArr = await getAwayTypeList()
+            } catch (e) {
+                console.log(e);
+            }
+        },
+    }
+}
+</script>

src/views/applyfor/components/Layout.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="layout-container">
+        <div class="layout__title">
+            <span class="title">{{ title }}</span>
+            <span v-if="required" class="require">*</span>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.layout {
+    &-container {
+        padding: 9px 12px;
+        background: #fff;
+        .title,
+        .require {
+            font-size: 14px;
+            font-weight: 400;
+
+        }
+        .title {
+            color: #191A1E;
+            line-height: 20px;
+            margin-bottom: 5px;
+        }
+        .require {
+            color: #F45642;
+            line-height: 20px;
+            margin-left: 2px;
+        }
+    }
+}
+</style>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: '默认文案'
+        },
+        required: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>
+

src/views/applyfor/components/Peers.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="peers-info-container">
+        <div class="peers__header flex flex-row flex-row-aic">
+            <span class="left-title">同行人员</span>
+            <span class="right-addd"
+                @click="handleAddPeerData"
+            >添加人员</span>
+        </div>
+        <template v-if="!peerList.length">
+            <div class="peers__emptybox">
+                还未添加同行人员
+            </div>
+        </template>
+        <template v-else>
+            <!-- 同行人员渲染列表 -->
+            <div class="peers__mainlist">
+                <div 
+                    class="peers__row"
+                        v-for="(item, idx) in peersListCom"
+                        :key="idx"
+                    >
+                        <div class="peers__row__header flex flex-row flex-row-aic">
+                            <div class="peers__row__header__left">
+                                <span>{{ InsideOutMap[item.xtype] }}</span>
+                                <span>({{ item.xtype === 'inside' ? (item.selectDeptName || '无部门') : item.remark }})</span>
+                            </div>
+                            <div class="operate">
+                                <span @click="handleUpdateRow(item, idx)" class="update">更新</span>
+                                <span @click="handleRemoveRow(item, idx)" class="remove">删除</span>
+                            </div>
+                        </div>
+                        <div class="peers__row__foot">
+                            <span class="name">{{ item.name }}</span>
+                        </div>
+                </div>
+            </div>
+            <div class="peers__more" v-if="peerList.length > 2">
+                <span @click="handleShowMore">{{ isShowMore ? '收起' : '展开' }}</span>
+                <van-icon @click="handleShowMore" v-if="isShowMore" :size="14" name="arrow-up" />
+                <van-icon @click="handleShowMore" v-else :size="14" name="arrow-down" />
+            </div>
+        </template>
+
+        <van-action-sheet
+            v-model="actionSheetVisibility"
+            :actions="actions"
+            @select="handleActionSheetSelected"
+            cancel-text="取消"
+            close-on-click-action
+        />
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import url('@/styles/variables.less');
+.peers {
+    // &-info-container {}
+    &__header {
+        justify-content: space-between;
+        padding: 4px 12px;
+        box-sizing: border-box;
+        .left-title {
+            font-size: @font-size-third;
+            font-weight: 400;
+            color: #727273;
+            line-height: 24px;
+        }
+        .right-addd {
+            font-size: 12px;
+            font-weight: 400;
+            color: @link-color;
+            line-height: 24px;
+        }
+    }
+    &__emptybox {
+        padding: 15px 12px;
+        background-color: #fff;
+        font-size: 14px;
+        font-weight: 400;
+        color: #191A1E;
+        line-height: 20px;
+    }
+    &__mainlist {
+        padding: 8px 0;
+        background-color: @white;
+        border-bottom: 1px solid rgba(151, 151, 151, 0.4);
+    }
+    &__row {
+        padding: 8px 12px 0;
+        &__header {
+            justify-content: space-between;
+            &__left {
+                font-size: 14px;
+                font-weight: 400;
+                color: #191A1E;
+                line-height: 20px;
+            }
+            .operate {
+                font-size: 14px;
+                font-weight: 400;
+                color: #3290C4;
+                line-height: 20px;
+                .remove {
+                    color: #F45642;
+                    padding-left: 10px;
+                }
+            }
+        }
+        &__foot {
+            border-bottom: 1px solid rgba(151, 151, 151, 0.4);
+            .name {
+                font-size: 16px;
+                font-weight: 400;
+                color: #191A1E;
+                line-height: 30px;
+            }
+        }
+        &:last-child {
+            .peers__row__foot {
+                border-bottom: initial;
+            }
+        }
+    }
+    &__more {
+        padding: 12px 0;
+        text-align: center;
+        background-color: @white;
+        font-size: 14px;
+        font-weight: 400;
+        color: @link-color;
+        line-height: 16px;
+    }
+}
+</style>
+
+<script>
+/**
+ * @description 同行人员组件
+ */
+
+import bus from '@/utils/vueBus'
+import { dingtalkComplexPicker } from '@/utils/dingtalk'
+
+const InsideOutMap = {
+    'inside': '内部人员',
+    'out': '外部人员'
+}
+
+export default {
+    name: 'Peers',
+    computed: {
+        peersListCom () {
+            if (this.isShowMore) return [...this.peerList]
+            return [...this.peerList.slice(0, 2)]
+        },
+    },
+    props: {
+        value: {
+            type: Array,
+            require: true
+        }
+    },
+    created () {
+        bus.$on('addOutPeersEvent', (data) => {
+            console.log('add out peers data', data);
+            // 调用外部人员[增加/修改]人员增加
+            this.__handle_out_peers(data)
+        })
+    },
+    data () {
+        return {
+            InsideOutMap,
+            isShowMore: true,
+            actionSheetVisibility: false,
+            actions: [{ name: '内部人员', type: 'in' }, { name: '外部人员', type: 'out' }],
+            // 同行人员数据
+            peerList: [
+                // example
+                // { name, orgUserName, nick, avatar, empId, corpId, selectDeptId, selectDeptName }
+                // {
+                //     xtype: 'inside',
+                //     name: '刘北方',
+                //     selectDeptName: '教师'
+                // }, // 内部人员
+                // {
+                //     xtype: 'out',
+                //     remark: '其他学校教授',
+                //     name: '柴静'
+                // }, // 外部人员
+            ],
+        }
+    },
+    methods: {
+        async handleActionSheetSelected (item) {
+            const { type } = item
+            console.log('select', item.type, item);
+            if (type === 'in') {// 内部人员
+                try {
+                    const data = await dingtalkComplexPicker({
+                        title: '请选择内部联络人'
+                    })
+                    this.__handle_in_press__(data)
+                } catch (e) {
+                    console.log('err', e);
+                }
+                
+            } else if (type === 'out') {
+                // TODO: TEMPORARY: example
+                this.__handle_out_peers({ xtype:'out', name: `a${Date.now()}`, remark: '123333'})
+
+                // 添加外部人员
+                // this.$router.push({
+                //     name: 'PeersOutForm',
+                //     query: {
+                //         name: '',
+                //         remark: ''
+                //     },
+                // })
+
+            }
+        },
+        // NOTE: 展开/收齐更多
+        handleShowMore () {
+            this.isShowMore = !this.isShowMore
+        },
+        // 更新当前人员信息
+        handleUpdateRow (row, idx) {
+            console.log('handleUpdateRow', row, idx);
+        },
+        // 删除当前人员
+        handleRemoveRow (row, idx) {
+            console.log('handleRemoveRow', row, idx);
+            // Toast
+            this.peerList.splice(idx, 1)
+        },
+        // NOTE: 选择添加内部/外部人员
+        handleAddPeerData () {
+            this.actionSheetVisibility = true
+        },
+        // 更新外部人员
+        __handle_out_peers (data) {
+            if (data.isUpdate) { // Update
+                let fIdx = this.peerList.findIndex(item => item.idx === data.idx)
+                this.peerList[fIdx] = {
+                    ...this.peerList[fIdx],
+                    ...data
+                }
+            } else {
+                this.peerList.push({
+                    idx: Date.now(),
+                    xtype: 'out',
+                    ...data
+                })
+            }
+        },
+        __handle_in_press__ (data) {
+            const { users } = data
+            console.log('handle_in_press', data);
+            users.forEach(item => {
+                // 判断empId是否存在。 存在意味着更新
+                let hasEmpIdIdx = this.peerList.findIndex(user => (user.emplId == item.emplId))
+                if (hasEmpIdIdx >= 0) { // Update
+                    this.peerList[hasEmpIdIdx] = {
+                        ...this.peerList[hasEmpIdIdx],
+                        ...item
+                    }
+                } else {
+                    this.peerList.push({
+                        idx: Date.now(),
+                        xtype: 'inside',
+                        ...item,
+                    })
+                }
+
+            })
+
+        }
+    },
+    watch: {
+        peerList: {
+            handler(arrs) {
+                console.log('peers', arrs);
+                this.$emit('input', arrs)
+            },
+            deep: true
+        }
+    }
+}
+</script>

src/views/applyfor/index.vue

@@ -0,0 +1,693 @@
+<!-- 申请主页 -->
+<template>
+    <div class="apply-for-container">
+        <component
+            ref="rendeRef"
+            :is="renderComponent"
+        />
+
+        <!-- btnbox -->
+        <div class="btnbox">
+            <div class="btn" @click="handleSubmitData">提交</div>
+        </div>
+
+        <bizCont />
+    </div>
+</template>
+
+<style lang="less">
+@import url("@/styles/variables.less");
+.apply-for {
+    &-container {
+        .layout-container {
+            margin-top: 10px!important;
+        }
+        .custom-files-container {
+            margin-top: 10px;
+        }
+        .group-box {
+            .group__title {
+                font-size: @font-size-third;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #727273;
+                line-height: 28px;
+                padding: 0 12px;
+            }
+            .layout-container {
+                margin-top: 0;
+            }
+            > div:not(.group__title,:last-child) {
+                border-bottom: 1px solid rgba(255, 151, 151, 0.3);
+            }
+        }
+        .btnbox {
+            margin-top: 10px;
+            padding: 10px 14px 40px;
+            box-sizing: border-box;
+            background-color: #FFFFFF;
+            .btn {
+                height: 41px;
+                background: #3290C4;
+                border-radius: 11px;
+                font-size: 16px;
+                font-weight: 400;
+                color: #FFFFFF;
+                line-height: 41px;
+            }
+        }
+    }
+}
+</style>
+
+<script>
+import CSelect from './components/CSelect.vue';
+import CInput from './components/CInput.vue';
+import CFiles from './components/CFiles.vue';
+import CFlowPath from './components/CFlowPath.vue';
+import CDate from './components/CDate.vue';
+import Peers from './components/Peers.vue';
+
+import bizCont from '@/components/jsapi/biz.contact.complexPicker'
+
+import { formatTime } from '@/utils/formatTime';
+
+import IndexType5 from './components/IndexType5.vue';
+
+export default {
+    name: 'Applyfor',
+    components: {
+        CSelect,
+        CInput,
+        CFiles,
+        CFlowPath,
+        CDate,
+        Peers,
+        IndexType5,
+        bizCont
+    },
+    computed: {
+        // 获取需要渲染的组件
+        renderComponent () {
+            const TYPE = this.formType
+            let cname = ''
+            switch (TYPE) {
+                case 5:
+                    cname = 'IndexType5'
+                    break
+
+            }
+            return cname
+        },
+        renderFormList () {
+            const TYPE = this.formType
+            let VNODE = null
+            switch (TYPE) {
+                case 1:
+                    VNODE = this.handleRenderType1()
+                    break
+                case 2:
+                    VNODE = this.handleRenderType2()
+                    break
+                case 3:
+                    VNODE = this.handleRenderType3()
+                    break
+                case 4:
+                    VNODE = this.handleRenderType4()
+                    break
+                case 5:
+                    VNODE = this.handleRenderType5()
+                    break
+                case 6:
+                    VNODE = this.handleRenderType6()
+                    break
+                case 7:
+                    VNODE = this.handleRenderType7()
+                    break
+                case 8:
+                    VNODE = this.handleRenderType8()
+                    break
+                case 9:
+                    VNODE = this.handleRenderType9()
+                    break
+                case 10:
+                    VNODE = this.handleRenderType10()
+                    break
+                case 11:
+                    VNODE = this.handleRenderType11()
+                    break
+            }
+            return VNODE
+        },
+    },
+    created () {
+        console.log('apply for created>', this.$route.query.type);
+
+        if (this.$route.query.type) this.formType = Number(this.$route.query.type)
+
+        this.init ()
+    },
+    data () {
+        return {
+            formType: 5, // 代表某申请类型
+
+            formData1: {
+                reason: '',
+                selVal: '',
+                money: '',
+                playmethod: ''
+            },
+            formData2: {
+
+            },
+
+            formData5: {
+                id: undefined,
+                module: 5,
+                reason: '', // 申请理由
+                start_time: '', // 开始时间
+                end_time: '', // 结束时间
+                type: undefined,
+
+                document: '', // 附件
+                images: '', // 图片
+                remark: '', // 备注
+                is_who: undefined,
+                peer_user: [ // 同行人员信息
+                    // {
+                    //     is_who: '',
+                    //     user_id: '',
+                    //     name: '',
+                    //     desc: ''
+                    // }
+                ],
+                approve_user: '',
+                copy_user: ''
+            }
+        }
+    },
+    methods: {
+        init () {},
+        
+        handleSubmitData () {
+            let callback = this.$refs.rendeRef.handleSubmitData
+            callback && callback()
+        },
+        handleConfig (val) {
+            const utilDingtail = require("@/utils/dingtalk")
+            console.log('conf??', val, utilDingtail.isAuthSDKSupport());
+        },
+        handleConfig2(val) {
+            console.log('conf2', val);
+        },
+
+        // 申购渲染详情
+        handleRenderType1 () {
+            // const RMethods = require('./renderType1');
+            // const THAT = this
+            const formData = this.formData1
+            return (<div>
+                <c-input
+                    title="申请事由"
+                    required={true}
+                    value={formData.reason}
+                    input-type="textarea"
+                    onInput={value => (formData.reason = value)}
+                />
+
+                <c-select
+                    title="采购类型"
+                    required={true}
+                    value={formData.selval}
+                    onConfig={value => (formData.selval = value)}
+                    onCancel={() => (formData.selval = '')}
+                />
+
+                {/* 根据采购类型。这个地方 渲染不同的采购明细框 */}
+                
+                <c-input
+                    title="总金额（元）"
+                    required={true}
+                    modelValue={formData.money}
+                />
+
+                <div>
+                    此处是日期组件占位
+                </div>
+
+                <c-files />
+
+                <c-files
+                    ctype="images"
+                />
+
+                <c-select
+                    title="支付方式"
+                    required={true}
+                    modelValue={formData.playmethod}
+                />
+
+                <c-flow-path />
+                
+            </div>)
+        },
+
+        // 申请审批
+        handleRenderType2 () {
+            const formData = this.formData2
+            return (<div>
+                <c-input
+                    title="呈批类型"
+                    required={true}
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                />
+
+                <c-input
+                    title="发文字号"
+                    required={true}
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                />
+
+                <c-select
+                    title="缓急程度"
+                    required={true}
+                    value={formData.selval}
+                    onConfig={value => (formData.selval = value)}
+                    onCancel={() => (formData.selval = '')}
+                />
+
+                <c-input
+                    title="印制份数"
+                    value={formData.money}
+                />
+
+                {/* 根据采购类型。这个地方 渲染不同的采购明细框 */}
+                
+                <c-input
+                    title="申请标题"
+                    required={true}
+                    value={formData.money}
+                />
+
+                <c-input
+                    title="申请内容"
+                    value={formData.money}
+                    input-type="textarea"
+                />
+
+                <c-files />
+
+                <c-flow-path />
+            </div>)
+        },
+
+        // 入库申请
+        handleRenderType3 () {
+            const formData = this.formData2
+            return (<div>
+                <c-input
+                    title="采购审批单"
+                    required={true}
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                />
+                
+                <div>
+                    <span>入库明细组件</span>
+                </div>
+
+                <c-files />
+                <c-files ctype="images" />
+
+                <c-input
+                    title="其他补充说明"
+                    value={formData.money}
+                    input-type="textarea"
+                />
+
+                <c-flow-path />
+            </div>)
+        },
+
+        // 领用申请
+        handleRenderType4 () {
+            const formData = this.formData2
+            return (<div>
+                <c-input
+                    title="物品用途"
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                />
+                
+                <div>
+                    <span>领用明细组件</span>
+                </div>
+
+                <c-files />
+
+                <c-input
+                    title="其他补充说明"
+                    value={formData.money}
+                    input-type="textarea"
+                />
+
+                <c-flow-path />
+            </div>)
+        },
+
+        // 出差申请
+        handleRenderType5 () {
+            const formData = this.formData5
+            return (<div>
+                {/* TODO:
+                    发起人默认当前用户 是否可以选择其他人
+                    出差理论上来讲默认自己申请 (不应该代人申请)
+                */}
+
+                {/* <c-input
+                    title="发起人"
+                    required={true}
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                /> */}
+
+                <c-input
+                    title="填写事由"
+                    required={true}
+                    value={formData.reason}
+                    onInput={val => (formData.reason = val)}
+                />
+
+                <peers
+                    value={formData.peer_user}
+                    onInput={arrs => (formData.peer_user = arrs)}
+                />
+
+                <c-date
+                    title="出差开始时间"
+                    required={true}
+                    onInput={obj => {
+                        formData.start_time = `${formatTime(obj.date, '-')} ${obj.time}`
+                    }}
+                />
+                
+                <c-date
+                    title="出差结束时间"
+                    required={true}
+                    onInput={obj => {
+                        formData.end_time = `${formatTime(obj.date, '-')} ${obj.time}`
+                    }}
+                />
+
+                <c-files />
+
+                <c-files ctype="images" />
+
+                <c-select
+                    title="类型"
+                    required={true}
+                    list={this.awayArr}
+                    pickerValueKey="name"
+                    pickerValueId="id"
+                    config={val => (formData.type = val)}
+                />
+                {/* is_who 是否跨关内关外:0=否,1=是   */}
+
+
+                {/* 根据type === 2（省外） 判断关内外 */}
+                {
+                    formData.type === 2 ? <c-select 
+                        title="是否跨关内外"
+                        required={true}
+                        list={[{name: '是', id: 1}, {name: '否', id: 0}]}
+                        pickerValueKey="name"
+                        pickerValueId="id"
+                        onInput={val => (formData.type = val)}
+                    /> : null
+                }
+                
+
+                <c-flow-path
+                    approve={this.approvePeople}
+                    copy={this.copyPeople}
+                    isAllowCopy={(this.isCopy)}
+                />
+            </div>)
+        },
+
+        // 请假申请
+        handleRenderType6 () {
+            const formData = this.formData2
+            return (<div>
+                {/* TODO:
+                    发起人默认当前用户 是否可以选择其他人
+                    出差理论上来讲默认自己申请 (不应该代人申请)
+                */}
+                <c-input
+                    title="发起人"
+                    required={true}
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                />
+
+                {/* NOTE: 请假类型 需要通过前置页面选中 */}
+                <c-select
+                    title="请假类型"
+                    required={true}
+                />
+
+                <div>
+                    <span>请假开始时间</span>
+                </div>
+                <div>
+                    <span>请假结束时间</span>
+                </div>
+                
+                <c-input
+                    title="请假时长"
+
+                />
+
+                <c-input
+                    title="原因"
+                    required={true}
+                    input-type="textarea"
+                />
+
+                <c-files />
+
+                <c-files ctype="images" />
+
+                <c-input
+                    title="是否离“深”"
+                    required={true}
+                    input-type="textarea"
+                    placeholder="需写清目的地（到街道）、是否涉疫、出行方式及班次"
+                />
+
+                <c-flow-path />
+            </div>)
+        },
+        // 用车申请
+        handleRenderType7 () {
+            const formData = this.formData2
+            return (<div>
+                {/* TODO:
+                    发起人默认当前用户 是否可以选择其他人
+                    出差理论上来讲默认自己申请 (不应该代人申请)
+                */}
+                <c-input
+                    title="发起人"
+                    required={true}
+                    value={formData.reason}
+                    onInput={value => (formData.reason = value)}
+                />
+
+                <dv>用车信息</dv>
+                <div class="group-box">
+                    <c-input 
+                        title="出发地点"
+                        required={true}
+                    />
+                    <div>
+                        start time
+                    </div>
+                </div>
+
+                <div class="group-box">
+                    <c-input 
+                        title="到达地点"
+                        required={true}
+                    />
+                    <div>
+                        endtime
+                    </div>
+                    <c-input
+                        title="返回地点"
+                    />
+                </div>
+
+                <c-files ctype="images" />
+
+                <c-files />
+
+                <c-flow-path />
+            </div>)
+        },
+        // 维修申请
+        handleRenderType8() {
+            // const formData = this.formData2
+            return (<div>
+                <div class="group-box">
+                    <div class="group__title">
+                        维修信息
+                    </div>
+                    <dv></dv>
+                    <c-select
+                        title="维修分类"
+                        required={true}
+                    />
+                    <c-input 
+                        title="维修地点"
+                        required={true}
+                        placeholder="请选填维修地点"
+                    />
+                </div>
+
+                <c-input
+                    title="具体内容"
+                    required={true}
+                    input-type="textarea"
+                />
+
+                <c-files
+                    ctype="images"
+                    placeholder="最多9张"
+                />
+
+                <c-flow-path />
+            </div>)
+        },
+        // 合同呈批
+        handleRenderType9() {
+            let a = "本合同已经法律顾问审核同意，详见附件《法律意见》"
+            return (<div>
+                <c-select 
+                    title="合同类型"
+                />
+                <c-input 
+                    title="合同编号"
+                    required={true}
+                />
+                <c-select
+                    title="缓急程度"
+                    required={true}
+                />
+                <c-input
+                    title="印制份数"
+                />
+                <c-input
+                    title="发放范围"
+                    placeholder="请输入发放范围，比如合同双方"
+                />
+
+                <c-input
+                    title="法务意见"
+                    value={a}
+                />
+
+                <c-files />
+
+                <c-input 
+                    title="备注说明"
+                    input-type="textarea"
+                />
+
+                <c-flow-path />
+            </div>)
+        },
+        // 批阅申请
+        handleRenderType10() {
+            return (<div>
+                <c-input
+                    title="创建人"
+                />
+                <c-input 
+                    title="来文单位名称"
+                    required={true}
+                />
+                <c-input 
+                    title="收文序号"
+                    required={true}
+                />
+                <c-input
+                    title="文件名称"
+                />
+
+                <div>
+                    收文日期组件
+                </div>
+
+                <c-input 
+                    title="内容摘要"
+                    input-type="textarea"
+                />
+
+                <c-select
+                    title="缓急程度"
+                    required={true}
+                />
+
+                <c-files />
+
+                <c-flow-path />
+            </div>)
+        },
+
+        // 学校文件
+        handleRenderType11() {
+            return (<div>
+                <c-select
+                    title="拟稿部门"
+                    required={true}
+                />
+
+                <c-input 
+                    title="文件名称"
+                    required={true}
+                />
+
+                <c-select 
+                    title="落款"
+                    required={true}
+                />
+
+                <c-input 
+                    title="上会情况"
+                    input-type="textarea"
+                />
+
+                <c-files />
+
+                <c-select
+                    title="缓急程度"
+                    required={true}
+                />
+
+                <div>
+                    拟文发送时间
+                </div>
+
+                <c-input 
+                    title="文件号"
+                    required={true}
+                />
+
+                <c-flow-path />
+            </div>)
+        },
+    }
+}
+</script>

src/views/applyfor/indexMixins.js

@@ -0,0 +1,48 @@
+
+
+import { getApproveFlowPath } from '@/api/approveflow'
+
+export default {
+    data () {
+        return {
+            approvePeople: [], // 审核人员
+            copyPeople: [], // 抄送人
+            isCopy: undefined, // 是否可修改抄送人
+        }
+    },
+
+    methods: {
+        /**
+         * @description 普通申请人获取的默认审核流程数据
+         *  */
+        async getCommonFlowPathData () {
+            try {
+                const params = {
+                    module: this.formType
+                }
+                const res = await getApproveFlowPath(params)
+                if (res.code === 1) {
+                    // format data
+                    /*
+                    [{
+                        userid: string,
+                        headimg: string,
+                        name: string
+                    }]
+                     */
+                    const { 
+                        approve_user = [],
+                        copy_user = [],
+                        is_copy = "0"
+                    } = res.data
+                    this.isCopy = is_copy
+                    this.approvePeople = approve_user
+                    this.copyPeople = copy_user
+
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        },
+    },
+}

src/views/applyfor/js/IndexComponentsMixins.js

@@ -0,0 +1,20 @@
+/**
+ * @description 混入组件
+ */
+import CSelect from '../components/CSelect.vue';
+import CInput from '../components/CInput.vue';
+import CFiles from '../components/CFiles.vue';
+import CFlowPath from '../components/CFlowPath.vue';
+import CDate from '../components/CDate.vue';
+import CSwitch from '../components/CSwitch.vue'
+
+export default {
+    components: {
+        CSelect,
+        CInput,
+        CFiles,
+        CFlowPath,
+        CDate,
+        CSwitch
+    }
+}

src/views/applyfor/js/renderType1.js

@@ -0,0 +1,12 @@
+/**
+ * @description 渲染填写表单数据
+ * @param type = 1 申购
+ * @time 2023/11/08
+ */
+
+export function renderList () {
+    return [
+        
+    ]
+}
+

src/views/applyfor/js/type5.js

@@ -0,0 +1,36 @@
+/**
+ * @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 钉钉返回数据格式
+ * @returns [user]
+ */
+export const choosedFormatUsers = (resData) => {
+    // const { method, success, result } = resData
+    // const { users } = result
+    /**
+     * @param users [{ name, orgUserName, nick, avatar, empId, corpId, selectDeptId, selectDeptName }]
+     */
+    return resData
+}

src/views/applyfor/peersOutForm.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="peers-out-form-container flex flex-col">
+        <div class="content">
+            <c-input
+                title="同行姓名"
+                v-model="name"
+            />
+
+            <c-input 
+                title="备注"
+                v-model="remark"
+                input-type="textarea"
+                :maxlength="20"
+            />
+
+        </div>
+        <div class="btn-container">
+            <div class="btn-span" @click="handleConfirmSub">确认</div>
+        </div>
+    </div>
+</template>
+<style lang="less" scoped>
+.peers-out-form-container {
+    height: 100%;
+    justify-content: space-between;
+    align-items: space-between;
+    .content {
+        .layout-container {
+            margin-top: 10px;
+        }
+    }
+}
+
+</style>
+
+<script>
+/**
+ * @description 出差申请-同行人员-添加外部人员
+ */
+import CInput from './components/CInput.vue';
+import vueBus from '@/utils/vueBus';
+
+export default {
+    components: {
+        CInput
+    },
+    data () {
+        return {
+            name: '',
+            remark: ''
+        }
+    },
+    created () {
+        let query = this.$router.query
+        if (query.name && query.remark) {
+            this.name = query.name
+            this.remark = query.remark
+        }
+    },
+    methods: {
+        handleConfirmSub () {
+            if (!this.name) return this.$toast('请填写同行人姓名')
+            if (!this.remark) return this.$toast('请填写备注')
+            let params = {
+                name: this.name,
+                remark: this.remark
+            }
+            if (this.$router.query.isUpdate) {
+                params = {
+                    ...this.$router.query,
+                    ...params,
+                    isUpdate: true
+                }
+            }
+            this.$router.go(-1)
+            vueBus.$emit('addOutPeersEvent', params)
+        },
+    }
+}
+</script>

src/views/approve/components/ApproveControl.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="approve-control-container flex flex-row flex-row-aic">
+        <!-- 审核通过
+            下载文件
+        -->
+
+        <!-- 领导审批
+            提醒，修改，下载文件；拒绝按钮，同意按钮
+        -->
+
+        <!-- 提交人
+        催办，修改，撤销，下载文件
+        -->
+
+        <!-- 
+            催办，修改，撤销，提醒，修改，下载文件；拒绝按钮，同意按钮
+         -->
+
+
+         <!-- TODO: class 这块 还需要根据审核到某块禁用某些功能 -->
+         <div class="item"
+            v-for="(item, idx) in controlComputed"
+            :key="idx"
+         >
+            <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')">
+                拒绝
+            </div>
+            <div class="btn btn--primary"  @click="handleGoExaminePage('pass')">
+                同意
+            </div>
+         </div>
+    </div>
+</template>
+
+<script>
+export default {
+    computed: {
+        controlComputed () {
+            const [urging, edit, revoke, ding, print ] = 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;
+            }
+            return temparr
+        },
+        btnIshow () {
+            return [3].includes(this.type)
+        },
+    },
+    data () {
+        return {
+            type: 3,
+            control: [
+                {
+                    title: "催办",
+                    img: require('@/assets/icons-ding.png'),
+                    event: this.handleEvent
+                },
+                {
+                    title: "修改",
+                    img: require('@/assets/icons-edit.png'),
+                    event: this.handleEvent
+                },
+                {
+                    title: "撤销",
+                    img: require('@/assets/icons-ding.png'),
+                    event: this.handleEvent
+                },
+                {
+                    title: "提醒",
+                    img: require('@/assets/icons-ding.png'),
+                    event: this.handleEvent
+                },
+                {
+                    title: "下载文件",
+                    img: require('@/assets/icons-print.png'),
+                    event: this.handleEvent
+                },
+        ]
+        }
+    },
+    methods: {
+        handleEvent () {},
+        handleGoExaminePage (type) {
+            console.log('type', type);
+            this.$router.push({
+                name: 'Examine',
+                query: {
+                    // 携带详情Id.
+                    type
+                }
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+.approve-control {
+    &-container {
+        padding: 11px 24px 30px;
+        background-color: #f2f1f6;
+        justify-content: space-between;
+        .item {
+            display: flex;
+            flex-direction: column;
+            // align-content: center;
+            align-items: center;
+            justify-content: center;
+            font-size: @font-size-third;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #151419;
+            line-height: 18px;
+            .icon {
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+        .btnd {
+            .btn {
+                width: 56px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                background: #FFFFFF;
+                border-radius: 7px;
+                border: 1px solid #E1E3E5;
+                margin-right: 10px;
+
+                font-size: @font-size-common;
+                font-weight: 400;
+                color: #191A1E;
+                
+                &--primary {
+                    background: #3290C4;
+                    color: @white;
+                }
+                &:last-child {
+                    margin-right: initial;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/approve/components/ApproveFlowPath.vue

@@ -0,0 +1,319 @@
+<template>
+    <div class="flow-path-container">
+        <div class="flow-path__title">
+            流程
+        </div>
+        <div class="flow-path-main">
+            <!-- 发起人 -->
+            <div class="row flex flex-row">
+                <div class="row__line"></div>
+                <div class="avatar avatar--name">
+                    <span class="avatar__name">刘辉</span>
+                    <div class="status-bar">
+                        <van-icon color="#15BC83" :size="16" name="checked" />
+                    </div>
+                </div>
+                <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>
+                    </div>
+                    <div class="mainbox flex flex-row flex-row-aic">
+                        <div class="mainbox__cur-name">
+                            刘辉（发起人）
+                        </div>
+                        <div class="mainbox__cur-use-time">
+                            <!-- 平均审批时长：0天0时23分 -->
+                        </div>
+                    </div>
+                    <div class="footerinfo">
+                        <!-- <div class="messagebox"></div> -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- 审批人 -->
+            <div class="row flex flex-row">
+                <div class="row__line"></div>
+                <div class="avatar avatar--name">
+                    <span class="avatar__name">北方</span>
+                    <div class="status-bar">
+                        <van-icon color="rgba(254, 148, 62, 1)" :size="16" name="more" />
+                    </div>
+                </div>
+                <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>
+                    </div>
+                    <div class="mainbox flex flex-row flex-row-aic">
+                        <div class="mainbox__cur-name">
+                            刘北方（审核人）
+                        </div>
+                        <div class="mainbox__cur-use-time">
+                            平均审批时长：0天0时23分
+                        </div>
+                    </div>
+                    <div class="footerinfo footerinfo--ptop10">
+                        <div class="messagebox">
+                            拟由教导处阅办。请校长申批。
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <!-- 抄送人 -->
+            <div class="row flex flex-row">
+                <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" />
+                            <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分 -->
+                        </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"
+                                :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" />
+                                        <van-icon v-else color="rgba(254, 148, 62, 1)" :size="12" name="more" />
+                                    </div>
+                                </div>
+                                <div class="personal__name">{{ personal.name }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+
+
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: () => ({
+        reciveMore: true,
+        personalList: [
+            {
+                name: '柴静',
+                status: 1,
+            },
+            {
+                name: '刘辉',
+                status: 0,
+            }
+        ]
+    }),
+    methods: {
+        handleSwitchreciveMore() {
+
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+
+.flow-path {
+    &-container {
+        padding: 10px 12px;
+        background-color: @white;
+        margin-top: 10px;
+    }
+    &__title {
+        font-size: @font-size-secondery;
+        font-weight: 600;
+        color: #191A1E;
+        line-height: 24px;
+        padding-bottom: 15px;
+    }
+}
+.row {
+    position: relative;
+    margin-bottom: 43px;
+    .avatar {
+        position: relative;
+        width: 36px;
+        height: 36px;
+        background: #3290C4;
+        border-radius: 4px;
+        margin-right: 18px;
+        // margin-bottom: 4px;
+        &--name {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+        }
+        &--volume {
+            background-color: rgba(79, 148, 236, 1);
+        }
+        &__name {
+            font-size: @font-size-third;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 9px;
+        }
+        .status-bar {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 14px;
+            height: 14px;
+            text-align: center;
+            line-height: 14px;
+            background: @white;
+            border: 2px solid #FFFFFF;
+            border-radius: 14px;
+            transform: translate(30%, 30%);
+        }
+        // &::after {
+        //     position: absolute;
+        //     content: "";
+        //     left: 50%;
+        //     top: 100%;
+        //     width: 2px;
+        //     height: 100%;
+        //     background-color: #E3E3E4;
+        // }
+        
+    }
+    // &:last-child {
+    //     .avatar::after {
+    //         width: 0;
+    //     }
+    // }
+    &__line {
+        position: absolute;
+        content: "";
+        left: 18px;
+        top: 40px;
+        width: 2px;
+        height: 100%;
+        background-color: #E3E3E4;
+    }
+    &-main {
+        flex: 1;
+        .header {
+            justify-content: space-between;
+            &__title {
+                font-size: @font-size-third;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #9A9A9A;
+                line-height: 18px;
+            }
+            &__time {
+                font-size: @font-size-third;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #B0B0B0;
+                line-height: 16px;
+            }
+        }
+        .mainbox {
+            justify-content: space-between;
+            &__cur-name {
+                font-size: @font-size-common;
+                font-weight: 400;
+                color: #191A1E;
+                line-height: 18px;
+            }
+            &__cur-use-time {
+                font-size: @font-size-third;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #B0B0B0;
+                line-height: 16px;
+            }
+        }
+        .footerinfo {
+            &--ptop10 {
+                padding-top: 6px;
+                
+            }
+            .messagebox {
+                width: 100%;
+                background: #F2F1F6;
+                border-radius: 4px;
+
+                font-size: @font-size-third;
+                font-weight: 400;
+                color: #B0B0B0;
+                line-height: 18px;
+                padding: 9px 8px;
+                box-sizing: border-box;
+            }
+            .recive-of {
+                flex-wrap: wrap;
+                .avatar {
+                    width: 21px;
+                    height: 21px;
+                    font-size: @font-size-third;
+                    &__name {
+                        transform: scale(0.6);
+                        white-space: nowrap;
+                    }
+                    .status-bar {
+                        width: 12px;
+                        height: 12px;
+                        line-height: 12px;
+                        background: @white;
+                        border-radius: 12px;
+                        transform: translate(38%, 48%);
+                    }
+                }
+                .personal {
+                    margin-bottom: 10px;
+                    &__name {
+                        font-size: @font-size-third;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #9A9A9A;
+                        line-height: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    &:last-child {
+        margin-bottom: 20px;
+    }
+
+
+}
+</style>

src/views/approve/components/ApproveItem.vue

@@ -14,45 +14,65 @@
             <render-dom :vnode="rowsRender" />
         </div>
 
-        <!-- 三种(状态栏)展示情况
-            1. [待处理]某人审批 + 处理中
-            2. [已处理]通过与否
-            3. [我收到的]不展示
+        <!-- 
+            [处理状态]
+                1[待处理] 某人审批 + 处理中
+                2[已处理] 通过与否
+                3[我收到的] 不展示
+
+            [审批状态]
+                2[审批中]
+                3[已通过]
+                4[已驳回]
+                5[已撤销]
+
         -->
         <!-- stateus-br -->
         <div class="approve-item__status-bar">
-            <div class="wait flex flex-row flex-row-acc">
+            <div
+                v-if="showLRBox"
+                class="wait flex flex-row flex-row-acc">
                 <div class="personal">{{ waitPersonalComp }}</div>
-                <div class="status">{{ waitStatusComp }}</div>
+                <div :class="[
+                    'status',
+                    statusOtherClass
+                ]">{{ waitStatusComp }}</div>
             </div>
-            <div v-if="false" class="approved">
+            <div v-else-if="showLbox" class="approved">
                 <div class="status status--pass">{{ approvedStatusComp }}</div>
             </div>
-            <!-- 我收到的。 没有状态展示 -->
-            <!-- <div class="recived"></div> -->
+            <!-- v-else 没有状态展示 -->
         </div>
     </div>
 </template>
 
 <script>
+// 状态参考
+// 处理状态:1=待处理,2=已处理,3=我收到的
+// 审批状态:2=审批中,3=审批通过,4=审批驳回,5=审批撤销  
 
 let h = null
 export default {
     name: 'ApproveItem',
-    components: {
-        // NOTE： 中间件。渲染VNode
-        RenderDom: {
-            functional: true,
-            render: (h, ctx) => ctx.props.vnode
-
-            // 这种方法也生效
-            // props: ['vNode'],
-            // render () {
-            //     return this.vNode
-            // }
-        }
-    },
     computed: {
+        showLRBox () { // 展示底部左右两侧信息
+            let type = this.flag
+            let key = this.flagState
+            return (type === 'approve' && key === 1) || (type === 'info' && [2, 4].includes(key))
+        },
+        // 根据状态渲染不同的样式
+        statusOtherClass () {
+            let type = this.flag
+            let key = this.flagState
+            let className = ''
+            if (type === 'info' && key === 4) className = 'status--refuse'
+            return className
+        },
+        showLbox () { // 只展示左侧线索
+            let type = this.flag
+            let key = this.flagState
+            return (type === 'approve' && key === 2) || (type === 'info' && key === 3)
+        },
         // 渲染内容通过(JSX/createElement)
         rowsRender () {
             let type = this.approveType
@@ -60,7 +80,6 @@ export default {
             switch (type) {
                 case 'xx':
                     return  this.handleRender_xx()
-                    // break;
                 case 'c123':
                     break;
             }
@@ -68,46 +87,65 @@ export default {
             return VNODE_DOM
         },
 
-        // waitPersonal 计算
+        // 根据 falg 和 flagState进行
         waitPersonalComp () {
-            return `${this.waitPersonal}正在处理中`
+            let type = this.flag
+            let key = this.flagState
+            let returnStr = ''
+            let person = this.person
+            if (type === 'approve' || (type === 'info' && key === 2)) {
+                returnStr = `${person}处理中`
+            } else if (type === 'info' && key === 4) {
+                returnStr = `${person}已处理`
+            }
+            return returnStr
         },
 
         // 通过枚举文件确定状态
         waitStatusComp () {
-            return `处理中${this.waitStatus}`
+            if (this.flag === 'info' && this.flagState === 4) return `已驳回`
+            return `处理中`
         },
 
         approvedStatusComp () {
-            return `已通过${this.approvedStatus}`
+            let rStr = ''
+            if (this.flag === 'info' && this.flagState === 3) rStr = `已通过`
+            else if (this.flag === 'approve' && this.flagState === 2) rStr = '已通过'
+
+            return rStr
         }
     },
     props: {
-        // Item 类型
+        // Item类型。 根据类型渲染不同的main内容
         approveType: {
             type: String,
             required: true
         },
+        // 标题：xxxx提交的申请/xxxx
         title: {
             type: String
         },
+        // 标题右侧时间节点
         time: {
             type: String
         },
+
+        // main内容数据列表 [{label, val}]
         rows: {
             type: Array,
             default: () => []
         },
 
-        waitPersonal: {
-            type: String
+        flag: { // 添加标识判断是 处理展示/申请展示
+            validator: key => (['info', 'approve'].includes(key))
         },
-        waitStatus: {
-            type: Number
+        
+        flagState: { // 进度标识： 处理/申请的类型(123,2345)
+            validator: key => ([1, 2, 3, 4, 5].includes(key))
         },
-
-        approvedStatus: {
-            type: Number
+        // 添加当前审核人
+        person: {
+            type: String
         }
         
     },
@@ -191,6 +229,9 @@ export default {
                 font-weight: 500;
                 color: #DF9C4A;
                 line-height: 18px;
+                &--refuse {
+                    color: #FF0000;
+                }
             }
         }
         .approved {

src/views/approve/components/DetailRows.vue

@@ -7,6 +7,11 @@
             </div>
 
             <!-- TODO: 采购明细 展开&收起 -->
+            <div class="more-box" v-if="type === 'projects'" @click="() => more = !more">
+                <span>{{ moreText }}</span>
+                <van-icon v-if="more" name="arrow-up" />
+                <van-icon v-else name="arrow-down" />
+            </div>
         </div>
         <div v-if="[undefined, ''].includes(type)" class="value value--common">{{ value }}</div>
         <div class="value value--link" v-else-if="type === 'link'">{{ value }}</div>
@@ -52,7 +57,7 @@
         <!-- NOTE: 附件材料 -->
         <template v-else-if="type === 'files'">
             <div class="files-container">
-                <div class="files-row"
+                <div class="files-row flex flex-row flex-row-aic"
                     v-for="(file, idx) in value"
                     :key="idx"
                 >
@@ -63,7 +68,7 @@
                         <div class="files-name">{{ file.name }}</div>
                         <div class="files-other-info flex flex-row flex-row-aic">
                             <div class="size">{{ file.size }}</div>
-                            <div class="review">预览</div>
+                            <div class="review" @click="handleReviewFiles(file, idx)">预览</div>
                         </div>
                     </div>
                 </div>
@@ -73,8 +78,13 @@
 
         <!-- NOTE：图片 -->
         <template v-else-if="type === 'images'">
-            <div class="images-container">
-
+            <div class="images-container flex flex-row">
+                <div class="images-row"
+                    v-for="(image, idx) in value"
+                    :key="idx"
+                >
+                    <img :src="image.url" :alt="image.name" />
+                </div>
             </div>
         </template>
 
@@ -89,7 +99,7 @@ export default {
             type: String
         },
         type: {
-            validatro: (val) => {
+            validator: (val) => {
                 return [
                     undefined,
                     '',
@@ -106,6 +116,21 @@ export default {
             type: [String, Array, Object]
         }
     },
+    computed: {
+        moreText () {
+            return this.more ? '收起' : '展开'
+        },
+    },
+    data () {
+        return {
+            more: true, // 展开与收起的`more`key
+        }
+    },
+    methods: {
+        handleReviewFiles(file, index) {
+            console.log('handleReviewFile', file, index);
+        }
+    }
 
 }
 </script>
@@ -115,10 +140,20 @@ export default {
 .detail-rows {
     &-container {
         &__title {
+            justify-content: space-between;
             font-size: @font-size-third;
             font-weight: 400;
             color: #727273;
             line-height: 20px;
+            .more-box {
+                font-size: @font-size-third;
+                font-weight: 400;
+                color: #3290C4;
+                line-height: 12px;
+                .van-icon {
+                    margin-left: 2px;
+                }
+            }
         }
 
         .value {
@@ -134,7 +169,6 @@ export default {
             }
         }
 
-
         // 商品明细
         .projects {
             &-box-wrapper {
@@ -184,6 +218,71 @@ export default {
                 }
             }
         }
+
+        // 附件样式
+        .files {
+            &-comtainer {
+
+            }
+            &-row {
+                .icon {
+                    width: 35px;
+                    height: 42px;
+                    background: #FFCF95;
+                    margin-right: 12px;
+                }
+                &__info {
+
+                }
+            }
+            &-name {
+                font-size: @font-size-common;
+                font-weight: 400;
+                color: #191A1E;
+                line-height: 18px;
+            }
+            &-other-info {
+                margin-top: 4px;
+                .size {
+                    font-size: @font-size-third;
+                    font-weight: 400;
+                    color: #9A9A9A;
+                    line-height: 18px;
+                    margin-right: 6px;
+                }
+                .review {
+                    font-size: @font-size-third;
+                    font-weight: 400;
+                    color: #3290C4;
+                    line-height: 18px;
+                }
+            }
+        }
+
+        // 图片Style
+        .images {
+            &-container {
+                flex-wrap: nowrap;
+            }
+            &-row {
+                width: 48px;
+                height: 48px;
+                margin-right: 10px;
+                margin-bottom: 10px;
+                &:last-child {
+                    margin-right: initial;
+                    // margin-bottom: initial;
+                }
+                img {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 4px;
+                    border: 1px solid #E2E3E5;
+                    background-color: green;
+                    vertical-align: middle;
+                }
+            }
+        }
     }
 }
 

src/views/approve/detail.vue

@@ -4,17 +4,22 @@
             <div class="title">
                 <span>{{ title }}</span>
             </div>
-            <div class="location">
+            <div class="location flex flex-row flex-row-cic">
                 <van-icon name="chat-o" />
                 <span>{{ schoolName }}</span>
             </div>
             <div class="status-bar status-bar--warning">
                 <span>等待我处理</span>
             </div>
+
+            <!-- TODO: 配置审核通过/撤销/拒绝 -->
+            <div class="float-status">
+
+            </div>
         </div>
 
 
-        <!-- 各种审批内容盒子 -->
+        <!-- 各种审批内容组件 -->
         <div class="examine-detail__main">
             <detail-rows
                 class="detail-row"
@@ -27,10 +32,17 @@
 
         <!-- 流程组件 -->
         <!-- @Description 流程化 用到的地方很多 -->
+        <!-- ApproveFlowPath -->
+        <div class="approve-flow-path-box">
+            <approve-flow-path />
+        </div>
 
 
         <!-- operate. 操作台 -->
         <!-- 集成 提醒, 修改, 下载, 拒绝，同意  5种 -->
+        <div class="approve-control">
+            <approve-control />
+        </div>
     </div>
 </template>
 
@@ -40,7 +52,7 @@ import * as dd from 'dingtalk-jsapi'
 import { init } from 'dingtalk-mock-sdk'
 
 init({
-  token: 'GpsyyrAXNibXbqTA4CCtZkHmIuuYqGnS',
+  token: 'U3if31VghziIj3VCnSwgeHO0CVlKs7Z4',
   jsapiMock: true,
   httpMock: false,
 })
@@ -51,11 +63,15 @@ import setTitle from 'dingtalk-jsapi/api/biz/navigation/setTitle'
 import { checkPlatform } from '@/utils/util'
 
 import DetailRows from './components/DetailRows.vue'
+import ApproveFlowPath from './components/ApproveFlowPath.vue'
+import ApproveControl from './components/ApproveControl.vue'
 
 export default {
     name: 'ExamineDetail',
     components: {
-        DetailRows
+        DetailRows,
+        ApproveFlowPath,
+        ApproveControl
     },
     data () {
         return {
@@ -138,6 +154,12 @@ export default {
                     value: [
                         {
                             url: 'http://xxxxx'
+                        },
+                        {
+                            url: 'http://xxxxx'
+                        },
+                        {
+                            url: 'http://xxxxx'
                         }
                     ]
                 },
@@ -183,11 +205,11 @@ export default {
         }
     },
     beforeDestroy () {
-            if (this.isAndroid) {
-                // 安卓移除回调
+        if (this.isAndroid) {
+            // 安卓移除回调
             dd.off('leftBtnClick', this.handleBackEvent)
         }
-    },
+    }
 }
 </script>
 
@@ -201,9 +223,20 @@ export default {
         }
     }
     &__header {
+        position: relative;
         padding: 10px 12px;
         background-color: @white;
         margin-bottom: 6px;
+        .float-status {
+            position: absolute;
+            right: 12px;
+            bottom: -30%;
+            width: 80px;
+            height: 80px;
+            background-color: #eee;
+            border-radius: 80px;
+            overflow: hidden;
+        }
         .title {
             font-size: 16px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -220,6 +253,7 @@ export default {
                 font-weight: 400;
                 color: #727273;
                 line-height: 18px;
+                margin-left: 6px;
             }
         }
         .status-bar {

src/views/approve/examine.vue

@@ -43,8 +43,7 @@ export default {
     data () {
         return {
             message: '',
-           type: undefined, 
-           inputPlaceholder: ''
+            type: undefined
         }
     },
     created () {
@@ -58,6 +57,12 @@ export default {
             title: this.btnTxt
         })
     },
+    methods: {
+        handleResetSignature () {
+            let msg = this.message
+            console.log('msg', msg);
+        },
+    }
 }
 </script>
 <style lang="less">

vue.config.js

@@ -13,7 +13,8 @@ module.exports = {
     devServer: {
       headers: {
         'Access-Control-Allow-Origin': '*'
-      }
+      },
+      disableHostCheck: true
     }
   },
   css: {
@@ -26,5 +27,6 @@ module.exports = {
         }
       }
     }
-  }
+  },
+
 }