TODO.md

@@ -1,9 +1,21 @@
 # 钉钉办公系统 - 待办事项
 
-* [x] 制作一个底部弹窗选择选项和取消的组件 (components) 
-* [x] 缺少选择日期的组件
 
+### 前端TODO
 
-### overpage.
+* [ ] 上传文件/图片等模块
+* [ ] 审批详情 底部的 各种功能ICONS 需要设计师给予
+* [ ] 审批详情 顶部 ICON需要 设计切图
 
----- (2023/11/10) ----
+### 需要后端处理 才能做的
+
+* [ ] 我的申请记录缺少时间查询字段
+* [x] 个人申请详情无法查看
+* [ ] 我的出差-详情页面缺少 发起人字段
+* [ ] 我的出差-详情页面 流程中缺少发起人数据
+* [ ] 抄送人是否查看的字段
+
+
+## 今日完成
+
+* 用车申请表单页 60%

src/App.vue

@@ -8,7 +8,10 @@
 
 <script>
 import TabBar from '@/components/TabBar'
+// import store from './store';
 // import NavBar from '@/components/NavBar'
+
+
 export default {
   components: {
     TabBar,
@@ -47,7 +50,17 @@ export default {
     }
   },
   created() {
-  }
+    let list = this.$store.state.enum.evectionTypeList
+    if (!list.length) {
+      this.$store.dispatch('enum/getTypeList')
+    }
+
+    try {
+      // NOTE: 静默获取用户token
+      this.$store.dispatch('user/login')
+      
+    } catch (e) {} /* eslint-disable-line */
 
+  }
 }
 </script>

src/api/approve.js

@@ -0,0 +1,39 @@
+/**
+ * @description 审批接口
+ */
+import request from '@/utils/request'
+
+// 审批列表
+export const getApproveList = data => (request({
+    data,
+    method: 'POST',
+    url: 'approve/get_list'
+}))
+
+// 详情
+export const getDetail = data => (request({
+    data,
+    method: 'POST',
+    url: 'approve/get_detail'
+}))
+
+// 信息
+export const getInfo = data => (request({
+    data,
+    method: 'POST',
+    url: 'approve/get_info'
+}))
+
+// 审批
+export const putAudit = data => (request({
+    data,
+    method: 'POST',
+    url: 'approve/audit'
+}))
+
+// 修改
+export const editApprove = data => (request({
+    data,
+    method: 'POST',
+    url: 'approve/edit'
+}))

src/api/approveinfo.js

@@ -12,8 +12,36 @@ export const postCreateInfo = data => (request({
 }))
 
 // 获取申请记录
-export const getRecordList = (data) => (request({
+export const getRecordList = data => (request({
     method: 'POST',
     url: 'approveinfo/get_list',
     data
-}))
+}))
+
+// 获取申请详情
+export const getDetail = data => (request({
+    method: 'POST',
+    url: 'approveinfo/get_detail',
+    data
+}))
+
+// 获取申请信息 - 重新发起时使用
+export const getInfo = data => (request({
+    method: 'POST',
+    url: 'approveinfo/get_info',
+    data
+}))
+
+// 催办
+export const putUrging = data => (request({
+    method: 'POST',
+    url: 'approveinfo/urging',
+    data
+}))
+
+// 撤销
+export const putCancel = data => (request({
+    method: 'POST',
+    url: 'approveinfo/cancel',
+    data
+}))

src/api/common.js

@@ -1,13 +1,67 @@
 /**
  * @description 公共模块
  */
-
 import request from '@/utils/request'
 
+// 各种类型集合
+export const getTypeList = () => (request({
+    method: "POST",
+    url: "common/get_type_list"
+}))
+
+/*
 // 获取出差类型(室内室外)
-export function getAwayType() {
-    return request({
-        method: 'POST',
-        url: "common/get_evection_type_list",
-    })
-}
+export const getAwayType = () => (request({
+    method: 'POST',
+    url: "common/get_evection_type_list",
+}))
+
+
+// 模块列表
+export const getModuleList = () => (request({
+    method: 'POST',
+    url: 'get_module_list'
+}))
+
+// 缓急程度列表
+export const getDegreeList = () => (request({
+    method: 'POST',
+    url: 'get_degree_list'
+}))
+
+// 采购类型列表
+export const getApplyTypeList = () => (request({
+    method: 'POST',
+    url: 'get_apply_type_list'
+}))
+
+// 采购支付方式列表
+export const getApplyPayTypeList = () => (request({
+    method: 'POST',
+    url: 'get_apply_pay_type_list'
+}))
+
+// 呈批类型列表
+export const getOfferTypeList = () => (request({
+    method: 'POST',
+    url: 'get_offer_type_list'
+}))
+
+// 请假类型列表
+export const getLeaveTypeList = () => (request({
+    method: 'POST',
+    url: 'get_leave_type_list'
+}))
+
+// 维修类型列表
+export const getMaintainTypeList = () => (request({
+    method: 'POST',
+    url: 'get_maintain_type_list'
+}))
+
+// 合同类型列表
+export const getContractTypeList = () => (request({
+    method: 'POST',
+    url: 'get_contract_type_list'
+}))
+*/

src/api/login.js

@@ -0,0 +1,19 @@
+/**
+ * @description api/login/xx
+ */
+
+
+import request from '@/utils/request'
+
+/**
+ * 获取用户token
+ * @param {String} code 前端获取的免授权code
+ * @returns {Object} {data: userToken}
+ */
+export const login = code => (request({
+    data: {
+        code
+    },
+    method: 'POST',
+    url: 'login/login'
+}))

src/api/member.js

@@ -0,0 +1,26 @@
+/**
+ * @description api/member/xxx
+ */
+
+import request from '@/utils/request'
+
+/**
+ * 获取用户信息
+ * @param {String} code 前端获取的免授权code
+ * @returns {Object} {data: userToken}
+ */
+export const getUserinfo = () => (request({
+    method: 'POST',
+    url: 'member/user_info'
+}))
+
+// /api/member/edit
+// type: 修改的类型（1：昵称，2：签名，3：手机号）  
+// nickname: 昵称  
+// signature: 签名  
+// phone: 手机号  
+export const putUserInfo = (data) => (request({
+    data,
+    method: 'POST',
+    url: '/member/edit'
+}))

src/api/upload.js

@@ -0,0 +1,27 @@
+/**
+ * @description 上传文件APi
+ */
+
+import request from '@/utils/request'
+
+/**
+ * 获取上传Oss参数
+ * @param {Object} data { type: String } type=上传的目录
+ * @returns {Object} 返回上传参数
+ */
+export const getUploadOssParams = data => (request({
+    params: data,
+    url: 'upload/getSignedUrl'
+}))
+
+
+/**
+ * 上传到服务器本地(导入模板)
+ * @param {Object} data FileData
+ * @returns {response} 返回上传文件路径
+ */
+export const uploadFile = data => (request({
+    data,
+    method: "POST",
+    url: 'upload/upload'
+}))

src/router/index.js

@@ -20,6 +20,8 @@ const routes = [
     component: Home
   },
   
+
+  // ====== 申请页面
   {
     path: '/applyfor',
     name: 'Applyfor',
@@ -30,6 +32,11 @@ const routes = [
     name: 'PeersOutForm',
     component: () => import(/* webpackChunkName: "index" */ '../views/applyfor/peersOutForm.vue')
   },
+  {
+    path: '/applyfor/type6-before',
+    name: 'AskForLeave',
+    component: () => import(/* webpackChunkName: "type6" */ '../views/applyfor/')
+  },
 
 
   // NOTE：我的审核状态
@@ -40,7 +47,7 @@ const routes = [
   },
 
 
-  // 审核页面
+  // ====== 审核页面
   {
     path: '/approve',
     name: 'Approve',
@@ -69,7 +76,7 @@ const routes = [
   },
 
 
-  // 我的页面
+  // ====== 我的页面
   {
     path: '/my',
     name: 'My',

src/store/modules/enum.js

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

src/store/modules/user.js

@@ -1,11 +1,83 @@
+import { getRequestAuthCode, platform } from '@/utils/dingtalk'
+import { login } from '@/api/login'
+import { getUserinfo } from '@/api/member'
+import { Toast } from 'vant'
+
+
+// import { init } from 'dingtalk-mock-sdk'
+
+// init({
+//   token: 'U3if31VghziIj3VCnSwgeHO0CVlKs7Z4',
+//   jsapiMock: true,
+//   httpMock: false,
+// })
 
 const state = {
     name: '刘壹手',
     token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1aWQiOiI4NSIsImlzcyI6Imh0dHBzOlwvXC96YWluLmNvbSIsImF1ZCI6Imh0dHBzOlwvXC96YWluLmNvbSIsImlhdCI6MTY5ODMxMjI4NSwibmJmIjoxNjk4MzEyMjg1LCJleHAiOjE3MjQyMzIyODV9.ziAXs6DiZKGGjtPuaCZ6Vfpv6Ki_deZhFPnDDLjAJUg',
 }
 
-const mutations = {}
-const actions = {}
+const mutations = {
+    UPDATE_USER_DATA: (state, payload) => {
+        const { phone, name } = payload.data
+        state.phone = phone
+        state.name = name
+        state.userinfo = payload.data
+    },
+    // 更新用户Token
+    UPDATE_USER_TOKEN: (state, payload) => (state.token = payload.token),
+}
+const actions = {
+    async getUserInfo ({ commit }) {
+        try {
+            const result = await getUserinfo()
+            if (result.code === 1) {
+                const data = result.data
+
+                commit({
+                    type: 'UPDATE_USER_DATA',
+                    data
+                })
+
+                // phone	int			手机号  
+                // name	string			姓名  
+                // nickname	string		昵称  
+                // headimg	string			头像地址  
+                // title	string			职称  
+                // department	string		部门（多个部门以逗号分隔）  
+                // signature	string		个人签名  
+            }
+        } catch (error) {
+            Toast({
+                icon: 'error',
+                message: error.message
+            })
+        }
+    },
+
+    // 登录获取token
+    async login ({ dispatch, commit }) {
+        try {
+            if (platform === 'notInDingTalk') {
+                Toast({
+                    message: '当前应用不在钉钉使用无法登录'
+                })
+                return
+            }
+            const code = await getRequestAuthCode()
+            const result = await login(code)
+            if (result.code === 1) {
+                commit({
+                    type: 'UPDATE_USER_TOKEN',
+                    token: result.data
+                })
+                dispatch('getUserInfo')
+            }
+        } catch (error) {
+            login
+        }
+    },
+}
 
 export default {
     namespaced: true,

src/styles/index.less

@@ -114,4 +114,12 @@ html,body{
         color: #FFFFFF;
         line-height: 41px;
     }
+}
+
+.m {
+    &-t {
+        &-10 {
+            margin-top: 10px;
+        }
+    }
 }

src/utils/approve-item.js

@@ -0,0 +1,26 @@
+/**
+ * @description 设置审核Row的数据内容等
+ */
+
+export function formatApproveItemRow(data, type) {
+    let arrs = []
+    switch (type) {
+        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
+}

src/utils/constant.js

@@ -0,0 +1,7 @@
+/**
+ * @项目常用且不可变更
+ */
+
+//定义文件大小全局化
+export const FileSize = 50
+export const PicSize = 10

src/utils/dingtalk.js

@@ -3,16 +3,19 @@ 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 requestAuthCode from 'dingtalk-jsapi/api/runtime/permission/requestAuthCode'
+import requestOperateAuthCode from 'dingtalk-jsapi/api/runtime/permission/requestOperateAuthCode'
+
 import { getENV } from "dingtalk-jsapi/lib/env";
 import { compareVersion } from "dingtalk-jsapi/lib/sdk";
 
-import { init } from 'dingtalk-mock-sdk'
+// import { init } from 'dingtalk-mock-sdk'
 
-init({
-  token: 'U3if31VghziIj3VCnSwgeHO0CVlKs7Z4',
-  jsapiMock: true,
-  httpMock: false,
-})
+// init({
+//   token: 'U3if31VghziIj3VCnSwgeHO0CVlKs7Z4',
+//   jsapiMock: true,
+//   httpMock: false,
+// })
 
 // 公司CorpId
 const CorpId = 'dingf1b2e9ddf9d214e224f2f5cc6abecb85' /* eslint-disable-line */
@@ -96,6 +99,7 @@ export function settingNavigationRight ({
 /**
  * @description 设置导航栏标题
  */
+// FIXME: 需要修改入参
 export function settingNavigationTitle ({
     title = '默认标题',
     callback
@@ -106,4 +110,44 @@ export function settingNavigationTitle ({
             callback && callback(result)
         }
     })
+}
+
+/**
+ * @description 获取微登录免授权码-无感操作 (only 5min life)
+ */
+export function getRequestAuthCode () {
+    return new Promise((resolve, reject) => {
+        requestAuthCode({
+            corpId: CorpId,
+            onSuccess: function(result) {
+                resolve(result.code)
+            },
+            onFail : function(err) {
+                console.log(err);
+                reject(err)
+            }
+        })
+    })
+}
+
+/**
+ * @description 获取登录授权-有交互方式
+ */
+export function getRequestOperateAuthCode () {
+    return new Promise((resolve, reject) => {
+        requestOperateAuthCode({
+            corpId: CorpId,
+            agentId: AppId,
+            onSuccess: function(result) {
+                /*{
+                    code: 'hYLK98jkf0m' //string authCode
+                }*/
+                resolve(result)
+            },
+            onFail : function(err) {
+                reject(err)
+            }
+         
+        })
+    })
 }

src/utils/formatTime.js

@@ -2,7 +2,7 @@
  * @description 关于时间的Util
  */
 
-// import dayjs from "dayjs"
+import dayjs from "dayjs"
 
 import { fZero } from "./util"
 
@@ -18,4 +18,12 @@ export function formatTime (date, format) {
     let _date = fZero(now.getDate())
     if (format) return `${year}${format}${month}${format}${_date}`
     return `${year}年${month}月${_date}日`
-}
+}
+
+/**
+ * 默认时间格式化
+ * @param {String} date 2022-02-02
+ * @param {DateFormat} formatStyle 'YYYY-MM-DD'
+ */
+
+export const formatBaseDateTime = (date, formatStyle = 'YYYY-MM-DD') => (dayjs(date).format(formatStyle))

src/utils/import-vant.js

@@ -20,10 +20,16 @@ import {
     DatetimePicker,
     ActionSheet,
     Switch,
-    List
+    List,
+    Dialog,
+    ImagePreview
 } from 'vant'
 
 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)
+.use(Uploader).use(Calendar).use(DatetimePicker).use(ActionSheet).use(Switch).use(List).use(Dialog)
 
+
+Vue.use(ImagePreview)
+
+Vue.$imagePreview = ImagePreview
 Vue.$toast = Toast

src/utils/request.js

@@ -16,7 +16,13 @@ const service = axios.create({
 // request interceptor
 service.interceptors.request.use(
   config => {
-    // do something before request is sent
+    // console.log('%c config >>>', 'background: blue; color: #fff', config);
+    
+    // NOTE: 上传接口 `content-type`有变化
+    if (config.url === 'upload/upload') {
+      config.headers['Content-Type'] = "multipart/form-data"
+      config.timeout = 50000 // 上传文件给50s
+    }
 
     if (store.getters.token) {
       // let each request carry token

src/utils/upload.js

@@ -0,0 +1,26 @@
+/**
+ * @description 上传文件
+ * @create time 2023/11/22
+ */
+
+const { uploadFile } = require("@/api/upload");
+
+export default function upload (file, options) {
+    return new Promise((resolve, reject) => {
+        const formData = new FormData()
+        formData.append('file', file)
+
+        if (options) {
+            for (const key in options) {
+                formData.append(key, options[key])
+            }
+        }
+
+        uploadFile(formData).then(result => {
+            if (result.code === 1) resolve(result.data)
+            else reject(new Error(result.msg))
+        }).catch(error => {
+            reject(new Error(error.msg))
+        })
+    })
+}

src/utils/util.js

@@ -21,4 +21,86 @@ export function checkPlatform () {
  * @param {number} n 小于10的数字
  * @returns String  number + ''
  */
-export const fZero = n => (n > 9 ? `${n}` : `0${n}`)
+export const fZero = n => (n > 9 ? `${n}` : `0${n}`)
+
+/**
+ * 
+ * @param {unknown} variable 一个不知道类型的变量
+ * @returns {String} 返回变量类型(String/Number/Null/Undefined/...)
+ */
+export const getStringTye = variable => (Object.prototype.toString.call(variable, variable).split(' ')[1].slice(0, -1))
+
+
+
+/**
+ * 获取静态资源基本信息
+ * @param {String} url 静态资源链接
+ * @returns 
+ *      filename: 文件名称(无后缀)
+ *      name: 文件名称 + 后缀
+ *      suffix: 后缀
+ *      path: 文件路径（不包含域名、文件名 + 后缀）
+ *      domainName: 域名
+ *      url: 输入
+ */
+export const getStaticLinkInfo = url => {
+    // https://chaoting-washing.oss-cn-zhangjiakou.aliyuncs.com/dd808164257b2fc2/a729087658ff1ef0.pdf
+    let regexp = /^(http[s]:\/\/.*\.com)(.*?)(([\w\d\s.]*?)\.(\w*))$/i;
+    console.log('%c getStaticLinkInfo url >>>', 'background: blue; color: #fff', url);
+    
+    let matchArrs = url.match(regexp);
+    
+    let name = 'unknow'
+    let suffix = 'unknow'
+    let path = ''
+    let filename = ''
+    let domainName = ''
+
+    if (Array.isArray(matchArrs) && matchArrs.length) {
+        const [, _domainName, _path, filenameAll, _filename, _suffix ] = matchArrs        
+        name = filenameAll
+        suffix = _suffix
+        path = _path
+        filename = _filename
+        domainName = _domainName
+    }
+
+    return {
+        filename,
+        name,
+        suffix,
+        path,
+        domainName,
+        url
+    }
+}
+
+export const getFileNameSuffix = filename => {
+    let regexp = /^[\w\d\s.]*?\.(\w*)$/i;
+    let matchRes = filename.match(regexp);
+    if (Array.isArray(matchRes) && matchRes.length) {
+        const [,suffix] = matchRes
+        return suffix
+    }
+    return ''
+}
+
+
+/**
+ * 获取可视化的大小
+ * @param {Number} size 字节大小
+ */
+export const getByteShowSize = size => {
+    if (!size)  return "";
+    var num = 1024.00; //byte
+    if (size < num)
+        return size + "B";
+    if (size < Math.pow(num, 2))
+        return (size / num).toFixed(2) + "KB"; //kb
+    if (size < Math.pow(num, 3))
+        return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
+    if (size < Math.pow(num, 4))
+        return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
+    return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
+
+}

src/views/Approve.vue

@@ -243,7 +243,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 @import url("@/styles/variables.less");
 
 .approve {
@@ -300,7 +300,6 @@ export default {
   }
 }
 
-
 .popup {
   &__title {
     text-align: center;

src/views/Index.vue

@@ -27,15 +27,17 @@ export default {
                     title: '人事管理',
                     list: [
                         {
-                            pathType: '5', // 页面类型
+                            module: 5, // 页面类型
                             title: '出差',
                             pic: require('@/assets/index/index-personnel-plane.png')
                         },
                         {
+                            module: 6,
                             title: '请假',
                             pic: require('@/assets/index/index-personnel-ask.png')
                         },
                         {
+                            module: 7,
                             title: '用车申请',
                             pic: require('@/assets/index/index-personnel-usecar.png')
                         }
@@ -45,18 +47,22 @@ export default {
                     title: '业务管理',
                     list: [
                         {
+                            module: 1,
                             title: '申购',
                             pic: require('@/assets/index/index-business-shoppcar.png')
                         },
                         {
+                            module: 3,
                             title: '入库',
                             pic: require('@/assets/index/index-business-libs.png')
                         },
                         {
+                            module: 4,
                             title: '领用',
                             pic: require('@/assets/index/index-business-recive.png')
                         },
                         {
+                            module: 8,
                             title: '维修',
                             pic: require('@/assets/index/index-business-setting.png')
                         },
@@ -66,35 +72,37 @@ export default {
                     title: '文件管理',
                     list: [
                         {
+                            module: 2,
                             title: '申请呈批',
                             pic: require('@/assets/index/index-file-req.png')
                         },
                         {
+                            module: 9,
                             title: '合同呈批',
                             pic: require('@/assets/index/index-file-contract.png')
                         },
                         {
+                            module: 10,
                             title: '收文批阅',
                             pic: require('@/assets/index/index-file-rec-approve.png')
                         },
                         {
+                            module: 11,
                             title: '学校文件',
                             pic: require('@/assets/index/index-file-school-file.png')
                         },
                     ]
                 }
 
-            ],
-            chooseTimeVal: ''
+            ]
         }
     },
     methods: {
         handleClickItem (item) {
-            console.log('click item', item);
             this.$router.push({
                 name: 'Applyfor',
                 query: {
-                    type: item.pathType
+                    type: item.module
                 }
             })
         }
@@ -104,10 +112,6 @@ export default {
 
 <style lang="less" scoped>
 @import url("@/styles/variables.less");
-// .index-container {}
-
-// .index {}
-
 .rowbox {
     display: flex;
     flex-direction: column;

src/views/apply-state/index.vue

@@ -21,7 +21,6 @@
             </div>
         </div>
         <div class="approve-main">
-            <!-- TODO：需要一个滚动框架 是否需要采用 `mescroll.js` -->
             <van-list
                 v-model="listLoading"
                 :finished="finished"
@@ -38,14 +37,10 @@
                     :person="item.approve_one.user.name"
                     flag="info"
                     :flag-state="Number(tabVal)"
+                    @click="handleGoInfo(item)"
                 />
             </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="暂无数据"
@@ -102,6 +97,8 @@
         <ChooseTime
             ref="chooseTimeRef"
             v-model="timeVal"
+            :min-date="minDate"
+            :max-date="maxDate"
         />
     </div>
 </template>
@@ -113,6 +110,9 @@ import ApproveItem from '../approve/components/ApproveItem.vue'
 import store from '@/store'
 import dayjs from 'dayjs'
 
+
+import { formatApproveItemRow } from '@/utils/approve-item'
+
 export default {
     nameText: '我的申请状态',
     name: 'ApplyState',
@@ -185,14 +185,25 @@ export default {
             finished: false,
             finishedText: '暂无更多数据',
             tableData: [],
+            minDate: '',
+            maxDate: ''
         }
     },
     created() {
         if (this.$route.query) {
             this.formType = this.$route.query.type
         }
+        this.init()
     },
     methods: {
+        init () {
+            // NOTE: 设置时间返回是前6个月 - 现在
+            let now = new Date()
+            now.setMonth(now.getMonth() - 7)
+            this.minDate = now
+            let nowMax = new Date()
+            this.maxDate = nowMax
+        },
         async __record_list__ () {
             try {
                 let THAT = this
@@ -201,13 +212,17 @@ export default {
                     status: Number(this.tabVal),
                     ...this.pagination
                 }
+                if (this.timeStart && this.timeEnd) {
+                    params.start_time = this.timeStart
+                    params.end_time = this.timeEnd
+                }
                 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)
+                        __rows_item__: formatApproveItemRow(item, THAT.formType)
                     }))
                     if (list.length < this.pagination.page_num) this.finished = true
                     else {
@@ -223,28 +238,7 @@ export default {
                 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__()
         },
@@ -268,6 +262,7 @@ export default {
                 THAT.timeStart = dayjs(date).format('YYYY-MM-DD HH:mm')
             })
         },
+
         handleClickTimeEnd () {
             const THAT = this
             THAT.timeVal = THAT.timeEnd
@@ -276,30 +271,6 @@ export default {
             })
         },
 
-        // 切换接口中转站
-        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
@@ -321,11 +292,19 @@ export default {
 
         // NOTE: 点击筛选弹出选择内容
         handleSwitchFilterBox() {
-
         },
 
         // NOTE: 提交过滤搜索条件
         handleSubmitFilter() {
+            // 判断时间是不是开始比结束前。
+            let startTime = new Date(this.timeStart).getTime()
+            let endTime = new Date(this.timeEnd).getTime()
+
+            if (endTime <= startTime) {
+                this.$toast('结束时间不可以比开始时间小')
+                return 
+            }
+
             // 搜索添加时间
             this.popupVisibility = false // close popup window.
             this.showEmpty = false
@@ -336,6 +315,18 @@ export default {
             this.pagination.page = 1
             this.onLoadData()
         },
+        handleGoInfo (data) {
+            // console.log('goInfo>', data);
+            if (!data) return
+            this.$router.push({
+                name: 'ExamineDetail',
+                query: {
+                    id: data.id,
+                    type: 'info'
+                }
+            })
+        }
+
         // goexamine() {
         //     this.$router.push({
         //         name: 'Examine',
@@ -363,7 +354,7 @@ export default {
 }
 </script>
   
-<style lang="less">
+<style lang="less" scoped>
 @import url("@/styles/variables.less");
 
 .approve {

src/views/applyfor/askForLeaveType.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="ask-for-leave-container">
+        ask-for-leave
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AskForLeave',
+    data () {
+        return {
+
+        }
+    },
+    methods: {
+
+    }
+}
+</script>

src/views/applyfor/components/CDate.vue

@@ -9,59 +9,60 @@
                 <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" />
+                <van-icon v-if="selectVal" :size="20" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
+                <van-icon color="#A2A3A4" :size="20" name="arrow"  @click="() => show = !show" />
             </div>
         </div>
 
-        <!-- 
-            NOTE: 
-                调用日期和时间组件
-        -->
+        <!-- NOTE: 调用日期和时间组件 -->
         <van-popup
             v-model="show"
             position="bottom"
         >
+            <!-- choose time -->
             <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>
+                    <span v-if="hasAm" @click="() => swt = 1" :class="{'active': swt === 1}">{{ rangeShow }}</span>
+                    <span v-else @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-confirm="false"
                 :show-title="false"
-                :show-subtitle="true"
+                :show-subtitle="false"
+                :style="{ height: '340px' }"
                 row-height="50"
+                color="#3290c4"
+                :default-date="calenderDefaultVal"
                 @confirm="onConfirmDateVal"
             />
+
             <van-picker
-                v-show="swt === 1"
-                title=""
+                v-show="swt === 1 && hasAm"
                 :show-toolbar="false"
                 :columns="rangeTimeList"
                 @change="handlePickerChange"
+                :style="{ height: '340px' }"
             />
 
-            <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-datetime-picker
+                v-show="swt === 2 && !hasAm"
+                :value="timeVal"
+                type="time"
+                :show-toolbar="false"
+                :min-hour="rendeMinHours"
+                :max-hour="23"
+                :style="{ height: '340px' }"
+                visible-item-count="7"
+                @change="handleDateTimePickerChange"
+            />
         </van-popup>
     </layout>
 </template>
@@ -128,7 +129,7 @@
 <script>
 import Layout from './Layout.vue';
 
-import { formatTime } from '@/utils/formatTime'
+import { formatTime, formatBaseDateTime } from '@/utils/formatTime'
 
 export default {
     name: "CDate",
@@ -139,23 +140,40 @@ export default {
         dateShow () {
             return this.dateVal ? formatTime(this.dateVal) : '日期'
         },
+
         rangeShow () {
             return this.rangeTime === '上午' ? '上午' : '下午'
+        },
+
+        rendeMinHours () {
+            let minHour = 0
+            if (this.rangeTime === '下午') minHour = 12
+            return minHour 
+        }
+    },
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        hasAm: {
+            type: Boolean,
+            default: false
         }
     },
     data () {
         return {
-            swt: 0,
             show: false,
-            selectVal: '',
-            date: '',
+            swt: 0,
 
+            selectVal: '',
             rangeTimeList: ['上午', '下午'],
-            dateVal: '',
-            rangeTime: '上午',
-            timeVal: '',
+            calenderDefaultVal: new Date,
 
-            // NOTE: 是否需要外界选择最小出发时间； 例如出发结束时间不能和开始同一时间
+            // dateTime vals
+            rangeTime: '上午',
+            dateVal: '',
+            timeVal: '00:00',
         }
     },
     methods: {
@@ -163,33 +181,36 @@ export default {
         onConfirmDateVal (date) {
             this.dateVal = date
         },
+        
+        reset () {
+            this.selectVal = ''
+            this.dateVal = ''
+            this.timeVal = '00:00'
+            this.rangeTime = '上午'
+        },
 
         handleRemoveVal () {
-            console.log('placehoder handleRemoveVal');
-            this.selectVal = ''
+            this.reset()
         },
 
         // 选择上午还是下午
-        handlePickerChange (event, valT, valI) {
-            console.log(valT, valI);
-            this.rangeTime = valT
-            console.log(arguments);
+        handlePickerChange (event, val) {
+            this.rangeTime = val
+        },
+
+        // time picker change
+        handleDateTimePickerChange (picker) {
+            const [hours, minus] = picker.getValues()
+            this.timeVal = `${hours}:${minus}`
         },
         
         // 确认提交的按钮
         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
-            })
+            if (!this.dateVal) this.dateVal = this.calenderDefaultVal
+            let selval = this.hasAm ? `${formatBaseDateTime(this.dateVal)} ${this.rangeTime}` : `${formatBaseDateTime(this.dateVal)} ${this.timeVal}`
+            this.selectVal = selval
+            this.$emit('input', selval)
         }
     },
     watch: {
@@ -198,8 +219,25 @@ export default {
                 this.swt = 0
             }
         },
-
-        // TODO: 需要 回显渲染页面
+        value: {
+            handler (vals) {
+                if (vals) {
+                    const [date, time] = vals.split(' ')
+                    let isM = time.includes(':') // 判断是否包含:
+                    if (isM) {
+                        let [hours] = time.split(':')
+                        this.rangeTime = hours > 12 ? '下午' : '上午'
+                        this.timeVal = time
+                    } else {
+                        this.rangeTime = time
+                    }
+                    this.selectVal = vals
+                    this.calenderDefaultVal = new Date(date)
+                    this.dateVal = date
+                }
+            },
+            immediate: true
+        }
     }
 }
 </script>

src/views/applyfor/components/CFiles.vue

@@ -17,23 +17,54 @@
         </div>
 
         <!-- files show style -->
-        <div class="source-listbox">
-            <render-dom :vnode="vnodecom" />
+        <div class="source-listbox" v-if="isFs">
+            <ul class="files-container">
+                <li class="files-row flex flex-row flex-row-aic"
+                    v-for="(file, index) in filelist"
+                    :key="index"
+                >
+                    <div class="icon">
+                        <template v-if="['png', 'jpg', 'jpeg'].includes(file.type)">
+                            <span>pic</span>
+                        </template>
+                        <span v-else-if="file.type === 'word'">word</span>
+                        <span v-else-if="file.type === 'pdf'">pdf</span>
+                        <span v-else-if="['xsl'].includes(file.type)">表格</span>
+                    </div>
+                    <div class="files-row__info">
+                        <div class="files-name ellipsis">{{ 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.size }}</div>
+                                <div class="review" @click="handleReviewFiles(file)">预览</div>
+                            </div>
+                            <van-icon
+                                :size="20"
+                                color="#A2A3A4"
+                                name="clear"
+                                @click="handleRemoveFile(file, index)"
+                            />
+                        </div>
+                    </div>
+                </li>
+            </ul>
         </div>
-        
+
         <van-uploader
             v-show="filelist.length && !isFs"
             ref="uploadFileRef"
             v-model="filelist"
-            :after-read="afterRead"
+            preview-size="48px"
             :max-count="$attrs.maxCount"
-            :before-read="beforeRead"
-            @oversize="onOversize"
+            :max-size="maxSizeComp"
             :show-upload="false"
             :accept="acceptHandle"
             :preview-image="!isFs"
-            preview-size="48px"
-        ></van-uploader>
+            :before-read="beforeRead"
+            :after-read="afterRead"
+            @oversize="onOversize"
+        >
+        </van-uploader>
     </div>
 </template>
 
@@ -59,7 +90,6 @@
 .source-listbox {
      // 附件样式
      .files {
-        // &-comtainer {}
         &-row {
             margin-bottom: 5px;
             &:last-child {
@@ -73,9 +103,11 @@
             }
             &__info {
                 flex: 1;
+                width: 0;
             }
         }
         &-name {
+            width: 88%;
             font-size: @font-size-common;
             font-weight: 400;
             color: #191A1E;
@@ -97,13 +129,23 @@
                 color: #3290C4;
                 line-height: 18px;
             }
-            // &__div {}
         }
     }
 }
 </style>
 
 <script>
+import { ImagePreview } from 'vant';
+import uploadFile from '@/utils/upload'
+import {
+    getStaticLinkInfo,
+    getByteShowSize
+} from '@/utils/util'
+
+import {
+    FileSize,
+    PicSize
+} from "@/utils/constant"
 
 export default {
     name: 'CFiles',
@@ -120,15 +162,19 @@ export default {
         acceptHandle () { // 图片上传文件限制
             return this.isFs ? "*" : "image/*"
         },
-        vnodecom () {
-            return this.isFs ? this.handleRenderFiles() : null
-        },
         headerTitle () {
             return this.isFs ? '附件' : '图片'
+        },
+        // 文件大小
+        maxSizeComp () {
+            let mb = 1 * 1024 * 1024;
+            return this.isFs ? FileSize * mb : PicSize * mb
         }
     },
+
     data () {
         return {
+            toastInstance: null,
             filelist: []
         }
     },
@@ -136,93 +182,83 @@ export default {
     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);
-            }
+        beforeRead () {
+            this.toastInstance = this.$toast.loading({
+                duration: 0,
+                message: '上传中'
+            })
+            // NOTE: 上传前的控制
+            // console.log('before read func>>', file);
+            // if ([].includes(file.ctype)) {
+            //     console.log('before read', file);
+            // }
             return true
         },
-        // 自行上传文件
-        afterRead (file) {
-            // 通过 status 属性可以标识上传状态，uploading 表示上传中，failed 表示上传失败，done 表示上传完成。
-            // file.status = 'uploading';
-            // file.message = '上传中...';
 
-            // setTimeout(() => {
-            //     file.status = 'failed';
-            //     file.message = '上传失败';
-            // }, 1000);
-            console.log(file)
+        // 自行上传文件
+        async afterRead (file, detail) {
+            console.log('after read', file, detail)
+            try {
+                const url = await uploadFile(file.file)
+                const { suffix } = getStaticLinkInfo(url)
+                file.name = file.file.name
+                file.type = suffix
+                file.url = url
+                file.size = getByteShowSize(file.file.size)
+                file.status = 'success'
+                this.$forceUpdate() // 强制更新渲染视图
+            } catch (error) {
+                file.status = 'failed'
+                file.message = error.message
+            } finally {
+                this.toastInstance.clear()
+            }
         },
+        
         // 超出文件大小
-        onOversize (file) {
-            console.log('超出大小', file);
+        onOversize () {
+            let desc = this.isFs ? `文件超过${FileSize}MB` : `图片超过${PicSize}MB`
+            this.$toast(desc)
         },
+
         // 预览文件
-        handleReviewFiles(file, p2, p3) {
+        handleReviewFiles(file) {
             // TODO: 如果是图片直接预览。 非图片其他方式预览（下载、或者插件）
-            console.log('func', file, p2, p3);
-            console.log('ref', this.$refs.uploadFileRef);
-            this.$refs.uploadFileRef.onPreviewImage()
+            // NOTE: 可进行图片预览类型
+            if (['png', 'jpg', 'jpeg'].includes(file.type)) {
+                ImagePreview([file.url])
+            } else {
+                this.$toast(file.type + '预览开发中...')
+            }
         },
         handleRemoveFile (file, index) {
-            // console.log('f>>>>', file, index);
             this.filelist.splice(index, 1)
         }
+    },
+    watch: {
+        // NOTE: 判断是否有新添加。 新添加赋值
+        filelist: {
+            handler(arrs) {
+                let hasAdd = arrs.some(image => (image.content))
+                if (hasAdd) {
+                    this.$listeners['input'] && this.$emit('input', arrs)   
+                }
+            }
+        },
+        value: {
+            handler (arrs) {
+                if (Array.isArray(arrs) && arrs.length) {
+                    this.filelist = [
+                        ...arrs
+                    ]
+                }
+            },
+            immediate: true
+        }
     }
 }
 

src/views/applyfor/components/CFlowPath.vue

@@ -32,7 +32,7 @@
                         </div>
                     </div>
                     <div v-if="approveSelList.length < 3" class="empty-box" @click="handleOpenContacts">
-                        <van-icon color="#979797" name="plus" />
+                        <van-icon :size="20" color="#979797" name="plus" />
                     </div>
                 </div>
                 <div class="rows-line"></div>
@@ -67,8 +67,8 @@
 
                         </div>
                     </div>
-                    <div v-if="copySelList.length < 3" class="empty-box">
-                        <van-icon color="#979797" name="plus" />
+                    <div v-if="copySelList.length < 3" class="empty-box" @click="handleOpenContactsCopy">
+                        <van-icon :size="20" color="#979797" name="plus" />
                     </div>
                 </div>
             </div>
@@ -130,17 +130,17 @@
             }
 
             .empty-box {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
                 width: 31px;
                 height: 31px;
-                text-align: center;
-                line-height: 31px;
                 background: #FFFFFF;
                 border-radius: 5px;
                 border: 1px solid #EEEEEF;
             }
-            .right {
-
-            }
+            // .right {}
             &:last-child {
                 .rows-line {
                     width: 0;
@@ -200,9 +200,10 @@
 </style>
 
 <script>
-import * as dd from 'dingtalk-jsapi';
 import Layout from './Layout.vue';
 
+import { dingtalkComplexPicker } from '@/utils/dingtalk'
+
 export default {
     name: 'CFlowPath',
     components: {
@@ -237,45 +238,25 @@ export default {
             personalList: [],
             personalList2: [],
 
-            approvePersonal: [1],
+            approvePersonal: [],
             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);
-                }
-            });
+        async handleOpenContacts () {
+
+            const result = await dingtalkComplexPicker({})
+            
+            console.log(result);
+        },
+        async handleOpenContactsCopy () {
+            if (this.isAllowCopy != 1) return
+            
+            const result = await dingtalkComplexPicker({})
+            
+            console.log(result);
         },
     },
     watch: {

src/views/applyfor/components/CInput.vue

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

src/views/applyfor/components/CSelect.vue

@@ -9,8 +9,8 @@
                 <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" />
+                <van-icon v-if="selectVal" :size="20" color="#A2A3A4" name="clear" @click="handleRemoveVal"/>
+                <van-icon color="#A2A3A4" :size="20" name="arrow"  @click="() => show = !show" />
             </div>
         </div>
 
@@ -105,22 +105,25 @@ export default {
             this.$emit('input', value[this.pickerValueId])
         },
         onCancel() {
+            this.show = false
             this.$listeners['cancel'] && this.$emit('cancel')
-            this.$emit('cancel')
         },
     },
     watch: {
         list: {
             handler (arrs) {
-                if (arrs.length) this.columns = arrs
+                if (Array.isArray(arrs) && 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]
+                    let arrs = this.list
+                    if (Array.isArray(arrs) && arrs.length) {
+                        let fidx = this.list.findIndex(item => item[this.pickerValueId] == val)
+                        if (fidx >= 0) this.selectVal = this.list[fidx][this.pickerValueKey]
+                    }
                 }
             }
         }

src/views/applyfor/components/IndexType1.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="type6-container">
+        <c-input
+            title="申请事由"
+            :required="true"
+            input-type="textarea"
+            :maxlength="800"
+            v-model="reason"
+        />
+
+        <c-select
+            title="采购类型"
+            :required="true"
+            v-model="type"
+            :list="applyTypeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+        />
+
+        {/* 根据采购类型。这个地方 渲染不同的采购明细框 */}
+                
+        <c-input
+            title="总金额（元）"
+            :required="true"
+            v-model="total_amount"
+        />
+
+        <c-date
+            title="预计申购完成日期"
+            v-model="apply_date"
+        />
+
+        <c-files
+            v-model="document"
+        />
+
+        <c-files
+            ctype="images"
+            v-model="images"
+        />
+
+        <c-select
+            title="支付方式"
+            :required="true"
+            :list="applyPayTypeList"
+            v-model="pay_type"
+            pickerValueKey="name"
+            pickerValueId="id"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 申购申请页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType1',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            degreeList: this.$store.state.enum.degreeList,
+            applyTypeList: this.$store.state.enum.applyTypeList,
+            applyPayTypeList: this.$store.state.enum.applyPayTypeList,
+
+            // TODO: 缺少拟稿部门、落款选择数据列表
+
+            // formData start
+            id: '',
+            module: 1,
+            reason: '', // 申购事由
+            type: '', // 采购类型
+            document: [], // 附件
+            images: [],
+            total_amount: '', // 总金额
+            pay_type: '',  // 支付方式
+            apply_date: '', // 预计申购完成日期(日期)
+
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                type: this.type,
+                total_amount: this.total_amount,
+                pay_type: this.pay_type,
+                apply_date: this.apply_date,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // document
+            // images
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        
+        validate (data) {
+            let mapTxt = {
+                'reason': '申购事由',
+                'type': '采购类型',
+                // 申购明细
+                'total_amount': '总金额',
+                'pay_type': '支付方式'
+            }
+            let requiredKey = [
+                'reason',
+                'type',
+                // 申购明细
+                'total_amount',
+                'pay_type'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType10.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="type6-container">
+        <c-input
+            title="创建人"
+            v-model="founder"
+        />
+
+        <c-input
+            title="来文单位名称"
+            :required="true"
+            v-model="desc"
+        />
+        <c-input
+            title="收文序号"
+            :required="true"
+            v-model="serial_number"
+        />
+        <c-input
+            title="文件名称"
+            v-model="reason"
+        />
+        <c-date 
+            title="收文日期"
+            :required="true"
+            v-model="apply_date"
+        />
+        <c-input
+            title="内容摘要"
+            :required="true"
+            input-type="textarea"
+            v-model="remark"
+        />
+
+        <c-select
+            title="缓急程度"
+            :required="true"
+            :list="degreeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+            v-model="degree"
+        />
+
+        <c-files
+            ctype="files"
+            v-model="document"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 收文批阅页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType10',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            degreeList: this.$store.state.enum.degreeList,
+
+            // formData start
+            id: '',
+            module: 10,
+            reason: '', // 文件名称
+            desc: '', // 来文单位名称
+            document: [], // 附件
+            remark: '', // 内容摘要
+            founder: '', // 创建人
+            serial_number: '', // 收文序号
+            apply_date: '', // 收文日期
+            degree: '', // 缓急程度
+
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                desc: this.desc,
+                remark: this.remark,
+                founder: this.founder,
+                serial_number: this.serial_number,
+                apply_date: this.apply_date,
+                degree: this.degree,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // document
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'desc': '来文单位名称',
+                'serial_number': '收文序号',
+                'apply_date': '收文日期',
+                'degree': '缓急程度'
+            }
+            let requiredKey = [
+                'desc',
+                'serial_number',
+                'apply_date',
+                'degree',
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType11.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="type6-container">
+        <c-select
+            title="拟稿部门"
+            :required="true"
+            v-model="department"
+        />
+
+        <c-input
+            title="文件名称"
+            :required="true"
+            v-model="reason"
+        />
+
+        <c-select
+            title="落款"
+            :required="true"
+            v-model="department_sign"
+        />
+
+        <c-input
+            title="上会情况"
+            input-type="textarea"
+            v-model="remark"
+        />
+
+        <c-files
+            ctype="files"
+            v-model="document"
+        />
+
+        <c-select
+            title="缓急程度"
+            :required="true"
+            :list="degreeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+            v-model="desc"
+        />
+
+        <c-date
+            title="拟发文时间"
+            :required="true"
+            v-model="apply_date"
+        />
+
+        <c-input
+            title="文件号"
+            :required="true"
+            v-model="serial_number"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 收文批阅页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType11',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            degreeList: this.$store.state.enum.degreeList,
+
+            // TODO: 缺少拟稿部门、落款选择数据列表
+
+            // formData start
+            id: '',
+            module: 11,
+            reason: '', // 文件名称
+            desc: '', // 缓急程度
+            document: [], // 附件
+            remark: '', // 上会情况
+            serial_number: '', // 文件号
+            apply_date: '', // 拟发文时间（日期）
+            department: '', // 部门
+            department_sign: '', // 落款
+
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+
+                reason: this.reason,
+                desc: this.desc,
+                remark: this.remark,
+                serial_number: this.serial_number,
+                apply_date: this.apply_date,
+                department: this.department,
+                department_sign: this.department_sign,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // document
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'department': '拟稿部门',
+                'reason': '文件名称',
+                'department_sign': '落款',
+                'desc': '缓急程度',
+                'apply_date': '拟发文时间',
+                'serial_number': '文件号'
+            }
+            let requiredKey = [
+                'department',
+                'reason',
+                'department_sign',
+                'desc',
+                'apply_date',
+                'serial_number'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType2.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="type6-container">
+        <c-input
+            title="呈批类型"
+            :required="true"
+            v-model="type"
+        />
+
+        <c-input
+            title="发文字号"
+            :required="true"
+            v-model="word_size"
+        />
+
+        <c-select
+            title="缓急程度"
+            :required="true"
+            v-model="desc"
+            :list="degreeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+        />
+
+        <c-input
+            title="印制份数"
+            input-type="number"
+            v-model="number"
+        />
+                
+        <c-input
+            title="申请标题"
+            :required="true"
+            v-model="reason"
+        />
+
+        <c-input
+            title="申请内容"
+            input-type="textarea"
+            v-model="remark"
+        />
+
+        <c-files
+            v-model="document"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 呈批申请页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType2',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            degreeList: this.$store.state.enum.degreeList,
+
+            // TODO: 缺少拟稿部门、落款选择数据列表
+
+            // formData start
+            id: '',
+            module: 2,
+            reason: '', // 申请标题
+            type: '', // 呈批类型
+            desc: '', // 缓急程度
+            document: [], // 附件
+            remark: '', // 申请内容
+            word_size: '', // 发文字号
+            number: '', // 印制份数
+
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                type: this.type,
+                desc: this.desc,
+                remark: this.remark,
+                word_size: this.word_size,
+                number: this.number,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // document
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'type': '呈批类型',
+                'word_size': '发文字号',
+                'desc': '缓急程度',
+                'reason': '申请标题'
+            }
+            let requiredKey = [
+                'type',
+                'word_size',
+                'desc',
+                'reason'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(data)
+                if (res.code === 1) {
+                    this.$toast(res.msg)
+                    // TODO: 提交成功后跳转到我的审批
+                    /*
+                    this.$router.push({
+                        name: '',
+                        query: {
+                            formtype: this.formType
+                        }
+                    })
+                    */
+                }
+            } catch(e) {
+                console.log('it2, __post__', e);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType3.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="type6-container">
+
+        <!-- 关联单子 -->
+        <c-select
+            title="采购审批单"
+        />
+                
+        <div>
+            <span>入库明细组件</span>
+        </div>
+
+        <c-files
+            v-model="document"
+        />
+
+        <c-files
+            v-model="images"
+            ctype="images"
+        />
+
+        <c-input
+            title="其他补充说明"
+            input-type="textarea"
+            v-model="remark"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 入库申请 页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType3',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            degreeList: this.$store.state.enum.degreeList,
+
+            // TODO: 缺少拟稿部门、落款选择数据列表
+
+            // formData start
+            id: '',
+            module: 3,
+            document: [], // 附件
+            images: [],
+            remark: '', // 其他补充说明
+
+            selOrd: '', // 关联审批单
+            libraryInfo: [], // 入库明细
+
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+
+                selOrd: this.selOrd,
+                remark: this.remark,
+                libraryInfo: this.libraryInfo,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // document
+            // images
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'libraryInfo': '入库明细'
+            }
+            let requiredKey = [
+                'libraryInfo'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType4.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="type6-container">
+        <c-input
+            title="物品用途"
+            v-model="reason"
+        />
+
+
+        <!-- TODO: 领用明细 -->
+
+        <c-files
+            ctype="files"
+            v-model="document"
+        />
+
+        <c-input
+            title="其他补充说明"
+            input-type="textarea"
+            v-model="remark"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 领用申请页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType4',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            degreeList: this.$store.state.enum.degreeList,
+
+            // TODO: 缺少拟稿部门、落款选择数据列表
+
+            // formData start
+            id: '',
+            module: 4,
+            reason: '', // 物品用途
+            document: [], // 附件
+            remark: '', // 补充说明
+
+            infolist: '', // 明细
+
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                remark: this.remark,
+                infolist: this.infolist,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // document
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'infolist': '领用明细'
+            }
+            let requiredKey = [
+                'infolist'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType5.vue

@@ -3,6 +3,7 @@
         <div class="btn-container" @click="handleNavRightBack">
             <div class="btn-span">我的出差</div>
         </div>
+
         <c-input
             title="填写事由"
             :required="true"
@@ -18,16 +19,20 @@
             :required="true"
             v-model="start_time"
         />
+
         <c-date
             title="出差结束时间"
             :required="true"
             v-model="end_time"
-
         />
 
-        <c-files />
+        <c-files
+            v-model="document"
+        />
 
-        <c-files ctype="images" />
+        <c-files ctype="images"
+            v-model="images"
+        />
 
         <c-select 
             title="类型"
@@ -39,7 +44,7 @@
         />
 
         <c-switch
-            v-if="type == 2"
+            v-if="type == 1"
             title="是否跨关内关外"
             :required="true"
             v-model="is_who"
@@ -70,29 +75,27 @@
  * @description 出差申请页面
  */
 import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
 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 {
+            postApi: null,
             formType: 5,
-            awayArr: [], // 出差类型
+            awayArr: this.$store.state.enum.evectionTypeList, // 出差类型
             
             // 必填字段
             requiredKey: [
@@ -100,9 +103,10 @@ export default {
                 'start_time',
                 'end_time',
                 'type'
-                // 是否出境需要在 type === 2 时才必传
+                // 是否出境需要在 type === 1 时才必传
             ],
 
+            // formData =========
             module: 5,
             id: undefined, // id存在，表示编辑
             reason: '', // 申请理由
@@ -124,6 +128,7 @@ export default {
             ],
             approve_user: '',
             copy_user: ''
+            // ===========================
         }
     },
     created () {
@@ -132,9 +137,42 @@ export default {
     },
     methods: {
         init () {
-            this.handleRenderType5Event()
             this.getCommonFlowPathData()
+            this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
         },
+        // NOTE: 格式化编辑数据
+        handleFormatEditData (data) {
+            console.log('%c data---- >>>', 'background: blue; color: #fff', data);
+            const {
+                module_info,
+                id,
+                peerUser
+            } = data
+            const {
+                end_time,
+                is_who,
+                reason,
+                remark,
+                start_time,
+                type,
+                // document_text,
+                // images,
+                // images_text,
+                // info_id,
+                // document,
+            } = module_info /* eslint-disable-line */
+
+            this.id = id
+            this.peer_user = peerUser
+            this.reason = reason
+            this.start_time = start_time
+            this.end_time = end_time
+            this.type = type
+            this.remark = remark
+            this.is_who = is_who
+        },
+
+        // NOTE: 设置标题等
         navigationSetting () {
             settingNavigationTitle({
                 title: '出差申请'
@@ -168,10 +206,10 @@ export default {
         },
         async __post__ (data) {
             try {
-                const res = await postCreateInfo(data)
+                // TODO: 审批人修改需要更换接口
+                const res = await this.postApi(data)
                 if (res.code === 1) {
                     this.$toast(res.msg)
-
                     // TODO: 提交成功后跳转到我的审批
                     /*
                     this.$router.push({
@@ -193,46 +231,40 @@ export default {
                 'start_time': '开始时间',
                 'end_time': '结束时间',
                 'type': '出差类型',
-                is_who: '跨关内外'
+                '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
-                    }
+            let requiredKey = [
+                'type',
+                'start_time',
+                'end_time',
+                'reason',
+            ]
+            return  this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            }, (data, hasEmpty, hasKey) => {
+                // 判断当type == 1 市内出差时。 判断是否出境
+                if (data.type == 1 && !data.is_who) {
+                    hasEmpty = true
+                    hasKey = 'is_who'
                 }
-            }
-            if (data.type == 2 && !data.is_who) {
-                hasEmpty = true
-                hasKey = 'is_who'
-            }
-            if (hasEmpty) {
-                this.$toast(mapTxt[hasKey] + '为空')
-                return true
-            }
+                return [hasEmpty, hasKey]
+            })
         },
         __format_data__ () {
             let params = {
                 module: 5,
                 reason: this.reason, // 申请理由
-                start_time: '', // 开始时间
-                end_time: '', // 结束时间
+                start_time: this.start_time, // 开始时间
+                end_time: this.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 */
+                    ...this.peer_user.map(item => ({
                         is_who: item.xtype === 'inside' ? 0 : 1,
                         name: item.name,
                         desc: item.xtype === 'inside' ? item.selectDeptName : item.remark,
@@ -242,25 +274,23 @@ export default {
                 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}`
+
+            let images = this.images
+            if (Array.isArray(images) && images.length) {
+                console.log('%c add images? >>>', 'background: blue; color: #fff', images);
+                params.images = images.map(image => image.url).join(',')
+                
             }
-            if (this.end_time) {
-                params.end_time = `${formatTime(this.end_time.date, '-')} ${this.end_time.time}`
+
+            let documents = this.document
+            if (Array.isArray(documents) && documents.length) {
+                params.document = documents.map(document => document.url).join(',')
             }
+
+            if (this.id) params.id = this.id
             return params
         },
-        /**
-         * @description 获取出差类型
-         */
-        async handleRenderType5Event() {
-            try {
-                this.awayArr = await getAwayTypeList()
-            } catch (e) {
-                console.log(e);
-            }
-        },
-    }
+    },
+    
 }
 </script>

src/views/applyfor/components/IndexType6.vue

@@ -0,0 +1,203 @@
+<template>
+    <div class="type6-container">
+        <c-select
+            title="请假类型"
+            :required="true"
+            :list="askForleaveTypeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+            v-model="type"
+        />
+
+        <c-date
+            title="请假开始时间"
+            :required="true"
+            :has-am="true"
+            v-model="start_time"
+        />
+
+        <c-date
+            title="请假结束时间"
+            :required="true"
+            :has-am="true"
+            v-model="end_time"
+        />
+
+        <c-input 
+            title="请假时长"
+            input-type="number"
+            v-model="time"
+        />
+
+        <c-input
+            title="原因"
+            :required="true"
+            input-type="textarea"
+            :maxlength="300"
+            v-model="reason"
+        />
+
+        <c-files
+            ctype="files"
+            v-model="document"
+        />
+
+        <c-files
+            ctype="images"
+            v-model="images"
+        />
+
+        <c-input 
+            title="是否离“深”"
+            input-type="textarea"
+            placeholder="需写清目的地（到街道）、是否涉疫、出行方式及班次"
+            v-model="remark"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 请假申请页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType6',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            askForleaveTypeList: this.$store.state.enum.leaveTypeList, // 请假类型
+
+            // formData start
+            id: '',
+            module: 6,
+            reason: '', // 请假原因
+            type: '', // 请假类型
+            document: [],
+            images: [],
+            remark: '', // 是否离深
+            start_time: '',
+            end_time: '',
+            start_am: '', // 开始时间段（上午/下午）
+            end_am: '', // 结束时间段（上午/下午）
+            time: '', // 请假时长
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        console.log('%c type6 main >>>', 'background: blue; color: #fff', this.$route);
+        // TODO: 判断是否有请假类型。 无请假类型router.replace到请假类型上
+
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                type: this.type,
+                remark: this.remark,
+                time: this.time,
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+            if (this.start_time) {
+                const [date, amOrPm] = this.start_time.split(' ')
+                templateObj.start_time = date
+                templateObj.start_am = amOrPm
+            }
+            if (this.end_time) {
+                const [date, amOrPm] = this.end_time.split(' ')
+                templateObj.end_time = date
+                templateObj.end_am = amOrPm
+            }
+            // TODO: 格式化尚未完成
+            // document
+            // images
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'type': '请假类型',
+                'start_time': '开始时间',
+                'end_time': '结束时间',
+                'reason': '原因',
+            }
+            let requiredKey = [
+                'type',
+                'start_time',
+                'end_time',
+                'reason',
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+    watch: {
+        type (val, valo) {
+            if (val && val !== valo) this.getCommonFlowPathData()
+        }
+    }
+}
+
+</script>

src/views/applyfor/components/IndexType7.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="type6-container">
+
+        <div class="group-box">
+            <div class="group__title">用车信息</div>
+            <c-input
+                title="出发地点"
+                :required="true"
+                v-model="reason"
+             />
+            <c-date
+                title="出发时间"
+                :required="true"
+                v-model="start_time"
+            />
+        </div>
+
+
+        <div class="group-box m-t-10">
+            <c-input
+                title="到达地点"
+                :required="true"
+                v-model="reach_address"
+             />
+            <c-date
+                title="返回时间"
+                v-model="end_time"
+            />
+            <c-input
+                title="返回地点"
+                v-model="end_address"
+             />
+        </div>
+
+        <c-files
+            ctype="files"
+            v-model="document"
+        />
+
+        <c-files
+            ctype="images"
+            v-model="images"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 用车申请页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType7',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+
+            // formData start
+            id: '',
+            module: 7,
+            reason: '', // 出发地点
+            start_time: '', // 出发时间
+            end_time: '', // 返回时间
+            document: [],
+            images: [],
+            reach_address: '', // 到达地点
+            end_address: '', // 返回地点
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                reach_address: this.reach_address,
+                end_address: this.end_address,
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+            if (this.start_time) {
+                const [date, amOrPm] = this.start_time.split(' ')
+                templateObj.start_time = date
+                templateObj.start_am = amOrPm
+            }
+            if (this.end_time) {
+                const [date, amOrPm] = this.end_time.split(' ')
+                templateObj.end_time = date
+                templateObj.end_am = amOrPm
+            }
+            if (this.id) templateObj.id = this.id
+            // TODO: 格式化尚未完成
+            // document
+            // images
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'start_time': '出发时间',
+                'end_time': '返回时间',
+                'reason': '出发地点',
+            }
+            let requiredKey = [
+                'reason',
+                'start_time',
+                'reach_address',
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType8.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="type6-container">
+
+        <div class="group-box">
+            <div class="group__title">保修信息</div>
+            <c-select
+                title="维修分类"
+                :required="true"
+                :list="maintainTypeList"
+                pickerValueKey="name"
+                pickerValueId="id"
+                v-model="type"
+            />
+            <c-input
+                title="维修地点"
+                :required="true"
+                v-model="reason"
+             />
+        </div>
+
+        <c-input
+            title="具体内容"
+            :required="true"
+            input-type="textarea"
+            :maxlength="800"
+            v-model="desc"
+        />
+
+        <c-files
+            ctype="images"
+            v-model="images"
+            placeholder="最多九张"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 维修申请页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType8',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            maintainTypeList: this.$store.state.enum.maintainTypeList,
+
+            // formData start
+            id: '',
+            module: 8,
+            reason: '', // 维修地点
+            type: '', // 维修类型
+            desc: '', // 维修具体内容
+            images: [],
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                type: this.type,
+                desc: this.desc,
+
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // images
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'type': '维修分类',
+                'reason': '维修地点',
+                'desc': '具体内容'
+            }
+            let requiredKey = [
+                'type',
+                'reason',
+                'desc'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/IndexType9.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="type6-container">
+        <c-select
+            title="合同类型"
+            :list="contractTypeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+            v-model="type"
+        />
+
+        <c-input
+            title="合同编号"
+            :required="true"
+            v-model="reason"
+        />
+
+        <c-select
+            title="缓急程度"
+            :required="true"
+            :list="degreeList"
+            pickerValueKey="name"
+            pickerValueId="id"
+            v-model="desc"
+        />
+
+        <c-input
+            title="印制份数"
+            input-type="number"
+            v-model="number"
+        />
+
+        <c-input
+            title="发放范围"
+            placeholder="请输入发放范围,比如合同双方"
+            v-model="scope"
+        />
+
+        <c-input
+            title="法务意见"
+            placeholder="本合同已经法律顾问审核同意，详见附件《法律意见书》"
+            v-model="legal_opinion"
+        />
+
+        <c-files
+            ctype="files"
+            v-model="document"
+        />
+
+        <c-input
+            title="备注说明"
+            v-model="remark"
+        />
+
+        <c-flow-path
+            :approve="approvePeople"
+            :copy="copyPeople"
+            :isAllowCopy="isCopy"
+        />
+
+    </div>
+</template>
+
+<style lang="less" scoped></style>
+
+<script>
+/**
+ * @description 合同呈批页面
+ */
+
+import indexMixin from '../indexMixins'
+import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
+
+
+export default {
+    name: 'IndexType9',
+    mixins: [
+        indexMixin
+    ],
+    data () {
+        return {
+            postApi: null,
+            contractTypeList: this.$store.state.enum.contractTypeList,
+            degreeList: this.$store.state.enum.degreeList,
+
+            // formData start
+            id: '',
+            module: 9,
+            reason: '', // 合同编号
+            type: '', // 合同类型
+            desc: '', // 缓急程度
+            document: [], // 附件
+            remark: '', // 备注说明
+            number: '', // 印制份数
+            scope: '', // 发放范围
+            legal_opinion: '',  // 法务意见
+            approve_user: [],
+            copy_user: []
+            // formData end
+        }
+    },
+
+    created () {
+        this.getCommonFlowPathData()
+        this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
+    },
+
+    methods: {
+        // 获取编辑数据
+        handleFormatEditData (data) {
+            console.log('%c edit data type6 >>>', 'background: blue; color: #fff', data);
+        },
+        /**
+         * @description 提交数据默认函数
+         */
+         handleSubmitData () {
+            let formData = this.__format_data__()
+            console.log('format data>>>', formData);
+            let bol = this.validate(formData)
+            if (bol) return
+            console.log('execute handleSubmitData', formData);
+            this.__post__(formData)
+        },
+        __format_data__ () {
+            let templateObj = {
+                module: this.module,
+                reason: this.reason,
+                type: this.type,
+                desc: this.desc,
+                remark: this.remark,
+                number: this.number,
+                scope: this.scope,
+                legal_opinion: this.legal_opinion,
+                approve_user: this.approvePeople.map(user => (user.userid || user.emplId)).join(','),
+                copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
+            }
+
+            // TODO: 格式化尚未完成
+            // images
+            // document
+
+            if (this.id) templateObj.id = this.id
+            return templateObj
+        },
+        validate (data) {
+            let mapTxt = {
+                'reason': '合同编号',
+                'desc': '缓急程度'
+            }
+            let requiredKey = [
+                'reason',
+                'desc'
+            ]
+            return this.__validtor__({
+                mapTxt,
+                requiredKey,
+                data
+            })
+        },
+        async __post__ (data) {
+            try {
+                const res = await this.postApi(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);
+            }
+        },
+    },
+}
+
+</script>

src/views/applyfor/components/Peers.vue

@@ -140,6 +140,7 @@
 
 import bus from '@/utils/vueBus'
 import { dingtalkComplexPicker } from '@/utils/dingtalk'
+import { Dialog } from 'vant'
 
 const InsideOutMap = {
     'inside': '内部人员',
@@ -208,7 +209,7 @@ export default {
                 // TODO: TEMPORARY: example
                 this.__handle_out_peers({ xtype:'out', name: `a${Date.now()}`, remark: '123333'})
 
-                // 添加外部人员
+                // TEMPORARY: 添加外部人员
                 // this.$router.push({
                 //     name: 'PeersOutForm',
                 //     query: {
@@ -230,8 +231,12 @@ export default {
         // 删除当前人员
         handleRemoveRow (row, idx) {
             console.log('handleRemoveRow', row, idx);
-            // Toast
-            this.peerList.splice(idx, 1)
+            Dialog.confirm({
+                title: '温馨提示',
+                message: "请确认是否删除当前人员",
+            }).then(() => {
+                this.peerList.splice(idx, 1)
+            })
         },
         // NOTE: 选择添加内部/外部人员
         handleAddPeerData () {
@@ -252,10 +257,12 @@ export default {
                     ...data
                 })
             }
+            this.$emit('input', this.peerList)
         },
+
         __handle_in_press__ (data) {
             const { users } = data
-            console.log('handle_in_press', data);
+            // console.log('handle_in_press', data);
             users.forEach(item => {
                 // 判断empId是否存在。 存在意味着更新
                 let hasEmpIdIdx = this.peerList.findIndex(user => (user.emplId == item.emplId))
@@ -271,17 +278,24 @@ export default {
                         ...item,
                     })
                 }
-
             })
-
+            this.$emit('input', this.peerList)
         }
     },
     watch: {
-        peerList: {
+        value: {
             handler(arrs) {
-                console.log('peers', arrs);
-                this.$emit('input', arrs)
+                if (arrs) {
+                    console.log('peers val', arrs);
+                    this.peerList = [...arrs].map(user => ({
+                        ...user,
+                        xtype: user.is_who ? 'out' : 'inside',
+                        remark: user.is_who ? user.desc : '',
+                        selectDeptName: user.is_who ? '' : user.desc
+                    }))
+                }
             },
+            immediate: true,
             deep: true
         }
     }

src/views/applyfor/index.vue

@@ -3,6 +3,9 @@
     <div class="apply-for-container">
         <component
             ref="rendeRef"
+            :flag="flag"
+            :editId="editId"
+            :edit-data="editData"
             :is="renderComponent"
         />
 
@@ -35,10 +38,10 @@
                 padding: 0 12px;
             }
             .layout-container {
-                margin-top: 0;
+                margin-top: 0!important;
             }
             > div:not(.group__title,:last-child) {
-                border-bottom: 1px solid rgba(255, 151, 151, 0.3);
+                border-bottom: 1px solid rgba(255, 151, 151, 0.2)!important;
             }
         }
         .btnbox {
@@ -61,633 +64,107 @@
 </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';
-
+// components
+import bizCont from '@/components/jsapi/biz.contact.complexPicker' // useless
+
+// components
+import IndexType1 from './components/IndexType1.vue';
+import IndexType2 from './components/IndexType2.vue';
+import IndexType3 from './components/IndexType3.vue';
+import IndexType4 from './components/IndexType4.vue';
 import IndexType5 from './components/IndexType5.vue';
+import IndexType6 from './components/IndexType6.vue';
+import IndexType7 from './components/IndexType7.vue';
+import IndexType8 from './components/IndexType8.vue';
+import IndexType9 from './components/IndexType9.vue';
+import IndexType10 from './components/IndexType10.vue';
+import IndexType11 from './components/IndexType11.vue';
+
+// Api
+import * as approveInfoApi from '@/api/approveinfo'
+import * as approveApi from '@/api/approve'
 
 export default {
     name: 'Applyfor',
     components: {
-        CSelect,
-        CInput,
-        CFiles,
-        CFlowPath,
-        CDate,
-        Peers,
+        IndexType1,
+        IndexType2,
+        IndexType3,
+        IndexType4,
         IndexType5,
+        IndexType6,
+        IndexType7,
+        IndexType8,
+        IndexType9,
+        IndexType10,
+        IndexType11,
         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
+            return `IndexType${TYPE}`
         },
     },
-    created () {
-        console.log('apply for created>', this.$route.query.type);
 
+    created () {
+        console.log('%c Apply for crated >>>', 'background: blue; color: #fff', this.$route.query);
+        
         if (this.$route.query.type) this.formType = Number(this.$route.query.type)
+        
+        // check is edit
+        if (this.$route.query.edit == 1) {
+            this.editId = Number(this.$route.query.id)
+            this.isEdit = true
+            this.flag = this.$route.query.flag
+        }
 
         this.init ()
     },
+
     data () {
         return {
-            formType: 5, // 代表某申请类型
+            formType: -1, // 代表某申请类型
 
-            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: ''
-            }
+            flag: '', // [info, approve] // 页面状态 info: 申请 approve: 审核
+            isEdit: false, // 是否编辑
+            editId: -1, // 编辑Id
+            editData: null, // 编辑时存放数据
         }
     },
-    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>)
+    methods: {
+        init () {
+            // NOTE: 判断
+            if (this.isEdit) {
+                this.__detail__()
+            }
         },
 
-        // 出差申请
-        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}`
-                    }}
-                />
+        // NOTE: 因为是编辑 需要判断接口
+        // TODO: 缺少
+        async __detail__ () {
+            try {
+                console.log('%c printlog >>>', 'background: blue; color: #fff', approveInfoApi, approveApi);
                 
-                <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
+                const func = this.flag === 'info' ? approveInfoApi.getInfo : approveApi.getInfo
+                const params = {
+                    id: this.editId
                 }
-                
-
-                <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>)
+                const result = await func(params)
+                if (result.code === 1) {
+                    this.editData = result.data
+                }
+            } catch (error) {
+                console.log('aplyof error >>>', error)
+            }
         },
+        
+        handleSubmitData () {
+            let callback = this.$refs.rendeRef.handleSubmitData
+            callback && callback()
+        }
     }
 }
 </script>

src/views/applyfor/indexMixins.js

@@ -1,8 +1,28 @@
 
 
+import { getStringTye } from '@/utils/util'
+import indexComponentsMixins from './js/IndexComponentsMixins'
 import { getApproveFlowPath } from '@/api/approveflow'
 
+
 export default {
+    mixins: [
+        indexComponentsMixins
+    ],
+    props: {
+        editData: {
+            type: Object,
+            default: () => (null)
+        },
+        editId: {
+            type: Number,
+            default: 0
+        },
+        flag: {
+            type: String,
+            validator: flag => (['', 'info', 'approve'].includes(flag)),
+        }
+    },
     data () {
         return {
             approvePeople: [], // 审核人员
@@ -17,16 +37,25 @@ export default {
          *  */
         async getCommonFlowPathData () {
             try {
+                let module = this.module
                 const params = {
-                    module: this.formType
+                    module
                 }
+
+                // NOTE: moduel = [5, 6]时，需要填写 `flow_item`字段。 取值 `type`; 获取审批流程
+                if ([5, 6].includes(module)) {
+                    params['flow_item'] = this.type
+                }
+
+                console.log('%c getCommonFlowPathData >>>', 'background: blue; color: #fff', params);
+                
                 const res = await getApproveFlowPath(params)
+
                 if (res.code === 1) {
-                    // format data
                     /*
                     [{
                         userid: string,
-                        headimg: string,
+                        avatar: string,
                         name: string
                     }]
                      */
@@ -44,5 +73,65 @@ export default {
                 console.log(e);
             }
         },
+
+        /**
+         * @description 基础校验是否为空, callback 可以自定义继续判断
+         * @param {Object} param0 { mapTxt, requiredKey, data}
+         * @param {Function} callback (data, hasEmpty, hasKey) => ([hasEmpty, hasKey, [toast,]])
+         * @returns Boolean
+         */
+        __validtor__ ({ mapTxt, requiredKey, data  }, callback) {
+            // let requiredKey = [
+            //     'somekey'
+            // ]
+            // let mapTxt = {
+            //      'somekey': 'something'
+            // }
+            let requiredKeyLength = requiredKey.length
+            let hasEmpty = false
+            let hasKey = ''
+
+            for(let i = 0; i < requiredKeyLength; i++) {
+                let key = requiredKey[i]
+                let val = data[key]
+                let type = getStringTye(val)
+                
+                if (type === 'Number' && !isNaN(val)) continue
+                else if (type === 'Array' && val.length) continue
+                else if (type === 'String' && val) continue
+                else {
+                    hasKey = key
+                    hasEmpty = true
+                    break
+                }
+            }
+
+            // NOTE: 回调是为了判断当某值需要满足上游字段必填才出现的判断
+            // 参考文件`IndexType5`的 `validate`函数
+            let customToast = ''
+            if (callback) {
+                const [hEmpty, hKey, toastContext] = callback(data, hasEmpty, hasKey)
+                hasEmpty = hEmpty
+                hasKey = hKey
+                customToast = toastContext
+            }
+
+            if (customToast) {
+                this.$toast(customToast)
+                return true
+            } else if (hasEmpty) {
+                this.$toast(mapTxt[hasKey] + '为空')
+                return true
+            }
+        },
     },
+    watch: {
+        editData: {
+            handler (vals) {
+                if (vals) this.handleFormatEditData(vals)
+            },
+            deep: true,
+            immediate: true
+        }
+    }
 }

src/views/applyfor/js/type5.js

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

src/views/approve/components/ApproveControl.vue

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

src/views/approve/components/ApproveFlowPath.vue

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

src/views/approve/components/ApproveItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="approve-item-container">
+    <div class="approve-item-container" @click="handleGoDetail">
         <div class="approve-item__header flex flex-row">
             <div class="title ellipsis flex-0shrink">{{ title }}</div>
             <div class="time">{{ time }}</div>
@@ -73,7 +73,7 @@ export default {
             let key = this.flagState
             return (type === 'approve' && key === 2) || (type === 'info' && key === 3)
         },
-        // 渲染内容通过(JSX/createElement)
+        // TODO: 渲染内容通过(JSX/createElement)
         rowsRender () {
             let type = this.approveType
             let VNODE_DOM = null
@@ -153,7 +153,7 @@ export default {
         h = this.$createElement
     },
     methods: {
-        // NOTE: 申请类审批
+        // NOTE: 审批基础内容展示框
         handleRender_xx() {
             return h('ul', {
                 class: ['flex', 'flex-col']
@@ -167,6 +167,10 @@ export default {
                     class: ['row__content', 'ellipsis-2rows']
                 }, row.val)
             ])))
+        },
+        // NOTE: 前往项目详情页
+        handleGoDetail () {
+            if (this.$listeners.click) this.$emit('click')
         }
     }
 }

src/views/approve/detail.vue

@@ -9,12 +9,12 @@
                 <span>{{ schoolName }}</span>
             </div>
             <div class="status-bar status-bar--warning">
-                <span>等待我处理</span>
+                <span>{{ approveStatusMap }}</span>
             </div>
 
             <!-- TODO: 配置审核通过/撤销/拒绝 -->
             <div class="float-status">
-
+                审核状态标识：{{ dataDetail && dataDetail.status }}
             </div>
         </div>
 
@@ -34,28 +34,28 @@
         <!-- @Description 流程化 用到的地方很多 -->
         <!-- ApproveFlowPath -->
         <div class="approve-flow-path-box">
-            <approve-flow-path />
+            <approve-flow-path
+                :approve-list="approveList"
+                :copys="approveCopyList"
+            />
         </div>
 
 
         <!-- operate. 操作台 -->
         <!-- 集成 提醒, 修改, 下载, 拒绝，同意  5种 -->
         <div class="approve-control">
-            <approve-control />
+            <approve-control
+                :id="id"
+                :module="module"
+                :flag="pageType"
+                :flag-state="dataDetailStatus"
+            />
         </div>
     </div>
 </template>
 
 <script>
 import * as dd from 'dingtalk-jsapi'
-// dingtalk mock
-import { init } from 'dingtalk-mock-sdk'
-
-init({
-  token: 'U3if31VghziIj3VCnSwgeHO0CVlKs7Z4',
-  jsapiMock: true,
-  httpMock: false,
-})
 
 import setLeft from 'dingtalk-jsapi/api/biz/navigation/setLeft'
 import setTitle from 'dingtalk-jsapi/api/biz/navigation/setTitle'
@@ -66,6 +66,10 @@ import DetailRows from './components/DetailRows.vue'
 import ApproveFlowPath from './components/ApproveFlowPath.vue'
 import ApproveControl from './components/ApproveControl.vue'
 
+import * as ApproveInfoApi from '@/api/approveinfo'
+
+import { mapState } from 'vuex'
+
 export default {
     name: 'ExamineDetail',
     components: {
@@ -73,12 +77,26 @@ export default {
         ApproveFlowPath,
         ApproveControl
     },
+    computed: {
+        ...mapState('enum', [
+            'evectionTypeList',
+        ]),
+        approveStatusMap () {
+            if (!this.dataDetail) return ''
+            let status = this.dataDetail.status
+            return this.$store.getters['enum/getApproveFlowPathEnum'](status)
+        }
+    },
     data () {
         return {
+            dataDetail: null,
             isAndroid: checkPlatform() === 'android',
             isiOS: checkPlatform() === 'iOS',
+
+            // TODO: 标识标题、学校名称如何获取
             title: '刘辉提交的申请单',
             schoolName: '深圳市第二特殊教育学校',
+
             datalist: [
                 {
                     title: '审批编号',
@@ -168,6 +186,16 @@ export default {
                     value: '银行转账' // NOTE: 转账方式理论上来讲也是一套枚举
                 }
             ],
+
+            pageType: '', // 页面类型 info and approve
+            apiFunc: null, // 接口函数 
+            id: '', // NOTE: 当前页面的(申请/审核)id
+
+
+            approveList: [],
+            approveCopyList: [],
+            dataDetailStatus: -1,
+            module: undefined,
         }
     },
     created () {
@@ -195,13 +223,113 @@ export default {
     methods: {
         // NOTE: 页面初始化的模块
         __init__ () {
+            let { id, type } = this.$route.query
+            this.id = id
+            this.pageType = type
+
             // TODO: 请求接口&整合数据给予`datalist`字段
+            this.apiFunc = type === 'info' ? ApproveInfoApi.getDetail : () => {}
+
+            this.$nextTick(() => {
+                this.__detail__()
+            })
+        },
+
+
+        async __detail__ () {
+            try {
+                const params = {
+                    id: this.id
+                }
+                const res = await this.apiFunc(params)
+                if (res.code === 1) {
+                    this.dataDetail = res.data
+                    console.log(res.data);
+                    const { status, module, approve, approve_copy } = res.data
+                    this.module = module
+                    this.dataDetailStatus = status
+                    this.approveList = approve
+                    this.approveCopyList = approve_copy
+                    this.datalist = await this.formatModuleInfoData(res.data)
+
+                }
+            } catch (e) {
+                console.log('approve detail - error>>', e);
+            }
         },
 
         handleBackEvent() {
             console.log('press back btn');
             // NOTE: 通过路由返回
             this.$router.push('/approve')
+        },
+
+        // NOTE: 渲染`module_info`字段函数； 让其更好的渲染
+        async formatModuleInfoData (data) {
+            const { module, order_no, module_info, department_data } = data
+            let evectionTypeMap = this.evectionTypeList
+            if (module === 5 && evectionTypeMap) {
+                let vops = evectionTypeMap.filter(option => (option.id === module_info.type))[0]
+                module_info.type_text = vops.name
+            }
+            
+            let temporaryList = [
+                {
+                    title: '审批编号',
+                    value: order_no
+                }
+            ]
+            switch(module) {
+                case 5:
+                    temporaryList.push(...[
+                        {
+                            title: '所在部门',
+                            value: department_data.map(department => (department.name)).join('-')
+                        },
+                        {
+                            title: '申请日期',
+                            value: data.create_at
+                            // type: 'date'
+                        },
+                        {
+                            title: '发起人',
+                            value: data.user_id
+                        },
+                        { title: '外出事由', value: module_info.reason },
+                        { title: '同行人员', value: data.peer_user.map(user => (user.name)).join('、') },
+                        { title: '出差开始时间', value: module_info.start_time },
+                        { title: '出差结束时间', value: module_info.end_time },
+
+                        module_info.document_text.length ? { title: '附件材料',
+                            type: 'files',
+                            value: module_info.document_text
+                        } : undefined,
+                        
+                        module_info.images_text.length ? {
+                            type: 'images',
+                            title: '图片',
+                            value: module_info.images_text
+                        } : undefined,
+
+                        {
+                            title: '类型',
+                            value: module_info.type_text
+                        },
+                        {
+                            title: '是否跨关内关外',
+                            value: module_info.is_who ? '是' : '否'
+                        },
+                        {
+                            title: module_info.is_who ? '预算金额' : '备注',
+                            value: module_info.remark
+                        }
+                    ])
+                break
+            }
+            // NOTE: 过滤undefined的数组值
+            temporaryList = temporaryList.filter(row => row)
+            console.log('%c Render Temporary List >>>', 'background: blue; color: #fff', temporaryList.filter(row => row));
+            return Promise.resolve(temporaryList)
         }
     },
     beforeDestroy () {
@@ -209,7 +337,8 @@ export default {
             // 安卓移除回调
             dd.off('leftBtnClick', this.handleBackEvent)
         }
-    }
+    },
+    
 }
 </script>
 

src/views/approve/search.vue

@@ -3,44 +3,207 @@
     <div class="search-container">
         <div class="filter-container p-h-12 flex flex-row flex-row-aic">
             <van-field
-                v-model="searchVal"
+                v-model.trim="searchVal"
                 clearable
-                placeholder="搜索日期、姓名、状态、关键词"
+                :placeholder="inputPlaceholderText"
                 left-icon="search"
+                @input="handleInputEvent"
             />
             <div class="filterbox flex flex-row flex-0shrink">
-                <span @click="handleStartSearch">筛选</span>
+                <span @click="handleStartSearch">搜索</span>
             </div>
         </div>
         <div class="search-main">
-            <!-- list... -->
-            <!-- NOTE: 滚动 + ApproveItem 组件 -->
+            <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="flagState"
+                />
+            </van-list>
+            <my-empty
+                v-show="showEmpty"
+                tip="暂无数据"
+            />
         </div>
     </div>
 </template>
 
 <script>
+import throttle from 'lodash/throttle'
+
+import ApproveItem from '@/views/approve/components/ApproveItem.vue'
+import store from '@/store'
+
+import { getRecordList } from '@/api/approveinfo' 
+import { formatApproveItemRow } from '@/utils/approve-item'
+
+
+
 export default {
     name: 'search',
+    components: {
+        ApproveItem
+    },
+    computed: {
+        // NOTE: 输入框的placeholder
+        inputPlaceholderText () {
+            let placeholder = 'xxx'
+            let ft = Number(this.formType)
+            switch(ft) {
+                case 5:
+                    placeholder = '请输入申请内容、编号'
+                break
+            }
+            return  placeholder
+        },
+        // NOTE: 单项标题
+        rendeTitleCom () {
+            let t = this.formType
+            let welcomeTxt = `${store.getters.name}提交的`
+            switch (t) {
+                case 5:
+                    welcomeTxt += '出差申请'
+                break
+            }
+            return welcomeTxt
+        },
+    },
     data () {
         return {
-            searchVal: ''
+            formType: '',
+            flag: '',
+            flagState: '',
+            apifunc: null,
+
+            searchVal: '',
+            tableData: [],
+            showEmpty: false,
+            listLoading: false,
+            finished: false,
+            finishedText: '暂无更多数据了',
+            pagination: {
+                page: 1,
+                page_num: 10
+            }
         }
     },
+    created () {
+        console.log('quers', this.$route.query);
+        this.init()
+    },
     methods: {
+        init () {
+            const { formType, flag, flagState } = this.$route.query
+            this.formType = Number(formType)
+            this.flagState = Number(flagState)
+            this.flag = flag
+            this.apifunc = flag === 'info' ? getRecordList : () => {}
+        },
+
+        handleInputEvent: throttle(function (keyword) {
+            console.log('keyword>>>', keyword);
+        }, 200),
+
         handleStartSearch () {
-            let val = this.searchVal
-            console.log('search val:', val);
+            this.tableData = []
+            this.listLoading = true
+            this.pagination.page = 1
+            this.finished = false
+            this.showEmpty = false
+            this.finishedText = '暂无更多数据了'
+            this.__getlist__()
+        },
+
+        onLoadData () {
+            this.__getlist__()
+        },
+
+        // NOTE: 获取参数
+        getParams() {
+            const { page, page_num } = this.pagination
+            const search = this.searchVal
+            return {
+                page,
+                page_num,
+                search,
+                module: this.formType,
+                status: this.flagState,
+            }
+        },
+
+        // NOTE: 获取列表
+        async __getlist__ () {
+            try {
+                const params = this.getParams()
+                const res = await this.apifunc(params)
+                if (res.code === 1) {
+                    const THAT = this
+                    console.log(res.data);
+                    this.listLoading = false
+                    let list = res.data || []
+                    list = list.map(item => ({
+                        ...item,
+                        __rows_item__: formatApproveItemRow(item, THAT.formType)
+                    }))
+                    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('getlist-error', e);
+            }
+
         },
-        
-        // 通过dd的返回函数进行回退
-        // back() {
-        //     console.log(this.$router.options);
-        //     this.$router.replace('/approve')
-        // }
     }
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+.search {
+    &-container {
+        height: 100%;
+        .filter-container {
+            padding-top: 7px;
+            padding-bottom: 7px;
+            box-sizing: border-box;
+            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;
+            }
+            .filterbox {
+                padding-left: 10px;
+                span {
+                    font-size: @font-size-common;
+                    font-weight: 500;
+                    color: @link-color;
+                    line-height: 22px;
+                }
+            }
+        }
+    }
+}
+
 </style>