feat: pages

TODO.md

@@ -15,3 +15,7 @@
 * [ ] 我的出差-详情页面 流程中缺少发起人数据
 * [ ] 抄送人是否查看的字段
 
+
+## 今日完成
+
+* 用车申请表单页 60%

src/App.vue

@@ -48,7 +48,8 @@ export default {
     }
   },
   created() {
-    if (!this.$store.state.enum.evectionTypeList) {
+    let list = this.$store.state.enum.evectionTypeList
+    if (!list.length) {
       this.$store.dispatch('enum/getTypeList')
     }
   }

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

@@ -7,15 +7,15 @@ import {
 } from "@/api/common" /* eslint-disable-line */
 
 const state = {
-    evectionTypeList: null, // 出差列表
-    moduleList: null, // 模块列表
-    degreeList: null, // 缓急程度
-    applyTypeList: null, // 采购类型
-    applyPayTypeList: null, // 采购支付类型
-    offerTypeList: null, // 呈批类型
-    leaveTypeList: null, // 请假类型
-    maintainTypeList: null, // 维修类型
-    contractTypeList: null, // 合同类型
+    evectionTypeList: [], // 出差列表
+    moduleList: [], // 模块列表
+    degreeList: [], // 缓急程度
+    applyTypeList: [], // 采购类型
+    applyPayTypeList: [], // 采购支付类型
+    offerTypeList: [], // 呈批类型
+    leaveTypeList: [], // 请假类型
+    maintainTypeList: [], // 维修类型
+    contractTypeList: [], // 合同类型
 
     // 1=待审批,2=审批中,3=审批通过,4=审批拒绝  
     // NOTE: 审批信息中的审核流程枚举

src/styles/index.less

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

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,11 @@ import {
     DatetimePicker,
     ActionSheet,
     Switch,
-    List
+    List,
+    Dialog
 } 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.$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,11 @@ 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))

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/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

@@ -14,54 +14,55 @@
             </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

@@ -59,7 +59,6 @@
 .source-listbox {
      // 附件样式
      .files {
-        // &-comtainer {}
         &-row {
             margin-bottom: 5px;
             &:last-child {
@@ -97,13 +96,13 @@
                 color: #3290C4;
                 line-height: 18px;
             }
-            // &__div {}
         }
     }
 }
 </style>
 
 <script>
+import uploadFile from '@/utils/upload'
 
 export default {
     name: 'CFiles',
@@ -136,7 +135,7 @@ export default {
     methods: {
         // 启动上传组件
         handleLaunchUploadBox() {
-            console.log(this.$refs.uploadFileRef);
+            // console.log(this.$refs.uploadFileRef);
             this.$refs.uploadFileRef.chooseFile()
         },
 
@@ -148,7 +147,9 @@ export default {
                     {
                         files.map((file, index) => (
                             <li class="files-row flex flex-row flex-row-aic">
-                                <div class="icon"></div>
+                                <div class="icon">
+                                    <img src={file.url} ></img>
+                                </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">
@@ -169,21 +170,6 @@ export default {
                     }
                 </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>
         },
 
         // 渲染图片 采用组件自带图片渲染
@@ -192,12 +178,13 @@ export default {
         // @returns Boolean {true/false}
         beforeRead (file) {
             if ([].includes(file.ctype)) {
-                console.log(file);
+                console.log('before read', file);
             }
             return true
         },
+
         // 自行上传文件
-        afterRead (file) {
+        async afterRead (file, detail) {
             // 通过 status 属性可以标识上传状态，uploading 表示上传中，failed 表示上传失败，done 表示上传完成。
             // file.status = 'uploading';
             // file.message = '上传中...';
@@ -206,7 +193,18 @@ export default {
             //     file.status = 'failed';
             //     file.message = '上传失败';
             // }, 1000);
-            console.log(file)
+            console.log('after read', file, detail)
+            try {
+                const url = await uploadFile(file.file)
+
+                console.log('%c url >>>', 'background: blue; color: #fff', url);
+                file.url = url
+                file.status = 'success'
+
+               return file
+            } catch (error) {
+                console.log('upload catch', error);
+            }
         },
         // 超出文件大小
         onOversize (file) {

src/views/applyfor/components/CFlowPath.vue

@@ -67,7 +67,7 @@
 
                         </div>
                     </div>
-                    <div v-if="copySelList.length < 3" class="empty-box">
+                    <div v-if="copySelList.length < 3" class="empty-box" @click="handleOpenContactsCopy">
                         <van-icon color="#979797" name="plus" />
                     </div>
                 </div>
@@ -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/CSelect.vue

@@ -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

@@ -19,11 +19,11 @@
             :required="true"
             v-model="start_time"
         />
+
         <c-date
             title="出差结束时间"
             :required="true"
             v-model="end_time"
-
         />
 
         <c-files />
@@ -40,7 +40,7 @@
         />
 
         <c-switch
-            v-if="type == 2"
+            v-if="type == 1"
             title="是否跨关内关外"
             :required="true"
             v-model="is_who"
@@ -71,40 +71,25 @@
  * @description 出差申请页面
  */
 import { postCreateInfo } from '@/api/approveinfo'
+import { editApprove } from '@/api/approve'
 import Peers from './Peers.vue';
-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
     },
-    props: {
-        editData: {
-            type: Object,
-            default: () => (null)
-        },
-        editId: {
-            type: Number,
-            default: 0
-        },
-        flag: {
-            type: String,
-            validator: flag => (['info', 'approve'].includes(flag))
-        }
-    },
 
     data() {
         return {
+            postApi: null,
             formType: 5,
             awayArr: this.$store.state.enum.evectionTypeList, // 出差类型
             
@@ -114,7 +99,7 @@ export default {
                 'start_time',
                 'end_time',
                 'type'
-                // 是否出境需要在 type === 2 时才必传
+                // 是否出境需要在 type === 1 时才必传
             ],
 
             // formData =========
@@ -149,6 +134,7 @@ export default {
     methods: {
         init () {
             this.getCommonFlowPathData()
+            this.postApi = this.flag === 'approve' ? editApprove : postCreateInfo
         },
         // NOTE: 格式化编辑数据
         handleFormatEditData (data) {
@@ -180,8 +166,6 @@ export default {
             this.type = type
             this.remark = remark
             this.is_who = is_who
-            
-
         },
         navigationSetting () {
             settingNavigationTitle({
@@ -216,10 +200,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({
@@ -241,40 +225,34 @@ 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, // 备注
@@ -291,23 +269,9 @@ export default {
                 copy_user: this.copyPeople.map(user => (user.userid || user.emplId)).join(',')
             }
             if (this.id) params.id = this.id
-            if (this.start_time) {
-                params.start_time = `${formatTime(this.start_time.date, '-')} ${this.start_time.time}`
-            }
-            if (this.end_time) {
-                params.end_time = `${formatTime(this.end_time.date, '-')} ${this.end_time.time}`
-            }
             return params
         },
     },
-    watch: {
-        editData: {
-            handler (vals) {
-                if (vals) this.handleFormatEditData(vals)
-            },
-            deep: true,
-            immediate: true
-        }
-    }
+    
 }
 </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

@@ -38,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 {
@@ -65,20 +65,20 @@
 
 <script>
 // components
-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'
-
-// utils
-import { formatTime } from '@/utils/formatTime';
+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'
@@ -87,126 +87,53 @@ 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);
 
+    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 = this.$route.query.id
+            this.editId = Number(this.$route.query.id)
             this.isEdit = true
             this.flag = this.$route.query.flag
         }
 
         this.init ()
     },
+
     data () {
         return {
-            flag: '',
-            isEdit: false,
-            editId: '',
-            formType: 5, // 代表某申请类型
-            editData: null,
-
-            formData1: {
-                reason: '',
-                selVal: '',
-                money: '',
-                playmethod: ''
-            },
-            formData2: {
-
-            },
-
-            formData5: {
-                id: undefined,
-                module: 5,
-                reason: '', // 申请理由
-                start_time: '', // 开始时间
-                end_time: '', // 结束时间
-                type: undefined,
+            formType: -1, // 代表某申请类型
 
-                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 () {
             // NOTE: 判断
@@ -232,508 +159,12 @@ export default {
             } catch (error) {
                 console.log('aplyof error >>>', error)
             }
-
         },
         
         handleSubmitData () {
             let callback = this.$refs.rendeRef.handleSubmitData
             callback && callback()
-        },
-        handleConfig (val) {
-            const utilDingtail = require("@/utils/dingtalk")
-            console.log('conf??', val, utilDingtail.isAuthSDKSupport());
-        },
-        handleConfig2(val) {
-            console.log('conf2', val);
-        },
-
-        // 申购渲染详情
-        handleRenderType1 () {
-            // const RMethods = require('./renderType1');
-            // const THAT = this
-            const formData = this.formData1
-            return (<div>
-                <c-input
-                    title="申请事由"
-                    required={true}
-                    value={formData.reason}
-                    input-type="textarea"
-                    onInput={value => (formData.reason = value)}
-                />
-
-                <c-select
-                    title="采购类型"
-                    required={true}
-                    value={formData.selval}
-                    onConfig={value => (formData.selval = value)}
-                    onCancel={() => (formData.selval = '')}
-                />
-
-                {/* 根据采购类型。这个地方 渲染不同的采购明细框 */}
-                
-                <c-input
-                    title="总金额（元）"
-                    required={true}
-                    modelValue={formData.money}
-                />
-
-                <div>
-                    此处是日期组件占位
-                </div>
-
-                <c-files />
-
-                <c-files
-                    ctype="images"
-                />
-
-                <c-select
-                    title="支付方式"
-                    required={true}
-                    modelValue={formData.playmethod}
-                />
-
-                <c-flow-path />
-                
-            </div>)
-        },
-
-        // 申请审批
-        handleRenderType2 () {
-            const formData = this.formData2
-            return (<div>
-                <c-input
-                    title="呈批类型"
-                    required={true}
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                />
-
-                <c-input
-                    title="发文字号"
-                    required={true}
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                />
-
-                <c-select
-                    title="缓急程度"
-                    required={true}
-                    value={formData.selval}
-                    onConfig={value => (formData.selval = value)}
-                    onCancel={() => (formData.selval = '')}
-                />
-
-                <c-input
-                    title="印制份数"
-                    value={formData.money}
-                />
-
-                {/* 根据采购类型。这个地方 渲染不同的采购明细框 */}
-                
-                <c-input
-                    title="申请标题"
-                    required={true}
-                    value={formData.money}
-                />
-
-                <c-input
-                    title="申请内容"
-                    value={formData.money}
-                    input-type="textarea"
-                />
-
-                <c-files />
-
-                <c-flow-path />
-            </div>)
-        },
-
-        // 入库申请
-        handleRenderType3 () {
-            const formData = this.formData2
-            return (<div>
-                <c-input
-                    title="采购审批单"
-                    required={true}
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                />
-                
-                <div>
-                    <span>入库明细组件</span>
-                </div>
-
-                <c-files />
-                <c-files ctype="images" />
-
-                <c-input
-                    title="其他补充说明"
-                    value={formData.money}
-                    input-type="textarea"
-                />
-
-                <c-flow-path />
-            </div>)
-        },
-
-        // 领用申请
-        handleRenderType4 () {
-            const formData = this.formData2
-            return (<div>
-                <c-input
-                    title="物品用途"
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                />
-                
-                <div>
-                    <span>领用明细组件</span>
-                </div>
-
-                <c-files />
-
-                <c-input
-                    title="其他补充说明"
-                    value={formData.money}
-                    input-type="textarea"
-                />
-
-                <c-flow-path />
-            </div>)
-        },
-
-        // 出差申请
-        handleRenderType5 () {
-            const formData = this.formData5
-            return (<div>
-                {/* TODO:
-                    发起人默认当前用户 是否可以选择其他人
-                    出差理论上来讲默认自己申请 (不应该代人申请)
-                */}
-
-                {/* <c-input
-                    title="发起人"
-                    required={true}
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                /> */}
-
-                <c-input
-                    title="填写事由"
-                    required={true}
-                    value={formData.reason}
-                    onInput={val => (formData.reason = val)}
-                />
-
-                <peers
-                    value={formData.peer_user}
-                    onInput={arrs => (formData.peer_user = arrs)}
-                />
-
-                <c-date
-                    title="出差开始时间"
-                    required={true}
-                    onInput={obj => {
-                        formData.start_time = `${formatTime(obj.date, '-')} ${obj.time}`
-                    }}
-                />
-                
-                <c-date
-                    title="出差结束时间"
-                    required={true}
-                    onInput={obj => {
-                        formData.end_time = `${formatTime(obj.date, '-')} ${obj.time}`
-                    }}
-                />
-
-                <c-files />
-
-                <c-files ctype="images" />
-
-                <c-select
-                    title="类型"
-                    required={true}
-                    list={this.awayArr}
-                    pickerValueKey="name"
-                    pickerValueId="id"
-                    config={val => (formData.type = val)}
-                />
-                {/* is_who 是否跨关内关外:0=否,1=是   */}
-
-
-                {/* 根据type === 2（省外） 判断关内外 */}
-                {
-                    formData.type === 2 ? <c-select 
-                        title="是否跨关内外"
-                        required={true}
-                        list={[{name: '是', id: 1}, {name: '否', id: 0}]}
-                        pickerValueKey="name"
-                        pickerValueId="id"
-                        onInput={val => (formData.type = val)}
-                    /> : null
-                }
-                
-
-                <c-flow-path
-                    approve={this.approvePeople}
-                    copy={this.copyPeople}
-                    isAllowCopy={(this.isCopy)}
-                />
-            </div>)
-        },
-
-        // 请假申请
-        handleRenderType6 () {
-            const formData = this.formData2
-            return (<div>
-                {/* TODO:
-                    发起人默认当前用户 是否可以选择其他人
-                    出差理论上来讲默认自己申请 (不应该代人申请)
-                */}
-                <c-input
-                    title="发起人"
-                    required={true}
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                />
-
-                {/* NOTE: 请假类型 需要通过前置页面选中 */}
-                <c-select
-                    title="请假类型"
-                    required={true}
-                />
-
-                <div>
-                    <span>请假开始时间</span>
-                </div>
-                <div>
-                    <span>请假结束时间</span>
-                </div>
-                
-                <c-input
-                    title="请假时长"
-
-                />
-
-                <c-input
-                    title="原因"
-                    required={true}
-                    input-type="textarea"
-                />
-
-                <c-files />
-
-                <c-files ctype="images" />
-
-                <c-input
-                    title="是否离“深”"
-                    required={true}
-                    input-type="textarea"
-                    placeholder="需写清目的地（到街道）、是否涉疫、出行方式及班次"
-                />
-
-                <c-flow-path />
-            </div>)
-        },
-        // 用车申请
-        handleRenderType7 () {
-            const formData = this.formData2
-            return (<div>
-                {/* TODO:
-                    发起人默认当前用户 是否可以选择其他人
-                    出差理论上来讲默认自己申请 (不应该代人申请)
-                */}
-                <c-input
-                    title="发起人"
-                    required={true}
-                    value={formData.reason}
-                    onInput={value => (formData.reason = value)}
-                />
-
-                <dv>用车信息</dv>
-                <div class="group-box">
-                    <c-input 
-                        title="出发地点"
-                        required={true}
-                    />
-                    <div>
-                        start time
-                    </div>
-                </div>
-
-                <div class="group-box">
-                    <c-input 
-                        title="到达地点"
-                        required={true}
-                    />
-                    <div>
-                        endtime
-                    </div>
-                    <c-input
-                        title="返回地点"
-                    />
-                </div>
-
-                <c-files ctype="images" />
-
-                <c-files />
-
-                <c-flow-path />
-            </div>)
-        },
-        // 维修申请
-        handleRenderType8() {
-            // const formData = this.formData2
-            return (<div>
-                <div class="group-box">
-                    <div class="group__title">
-                        维修信息
-                    </div>
-                    <dv></dv>
-                    <c-select
-                        title="维修分类"
-                        required={true}
-                    />
-                    <c-input 
-                        title="维修地点"
-                        required={true}
-                        placeholder="请选填维修地点"
-                    />
-                </div>
-
-                <c-input
-                    title="具体内容"
-                    required={true}
-                    input-type="textarea"
-                />
-
-                <c-files
-                    ctype="images"
-                    placeholder="最多9张"
-                />
-
-                <c-flow-path />
-            </div>)
-        },
-        // 合同呈批
-        handleRenderType9() {
-            let a = "本合同已经法律顾问审核同意，详见附件《法律意见》"
-            return (<div>
-                <c-select 
-                    title="合同类型"
-                />
-                <c-input 
-                    title="合同编号"
-                    required={true}
-                />
-                <c-select
-                    title="缓急程度"
-                    required={true}
-                />
-                <c-input
-                    title="印制份数"
-                />
-                <c-input
-                    title="发放范围"
-                    placeholder="请输入发放范围，比如合同双方"
-                />
-
-                <c-input
-                    title="法务意见"
-                    value={a}
-                />
-
-                <c-files />
-
-                <c-input 
-                    title="备注说明"
-                    input-type="textarea"
-                />
-
-                <c-flow-path />
-            </div>)
-        },
-        // 批阅申请
-        handleRenderType10() {
-            return (<div>
-                <c-input
-                    title="创建人"
-                />
-                <c-input 
-                    title="来文单位名称"
-                    required={true}
-                />
-                <c-input 
-                    title="收文序号"
-                    required={true}
-                />
-                <c-input
-                    title="文件名称"
-                />
-
-                <div>
-                    收文日期组件
-                </div>
-
-                <c-input 
-                    title="内容摘要"
-                    input-type="textarea"
-                />
-
-                <c-select
-                    title="缓急程度"
-                    required={true}
-                />
-
-                <c-files />
-
-                <c-flow-path />
-            </div>)
-        },
-
-        // 学校文件
-        handleRenderType11() {
-            return (<div>
-                <c-select
-                    title="拟稿部门"
-                    required={true}
-                />
-
-                <c-input 
-                    title="文件名称"
-                    required={true}
-                />
-
-                <c-select 
-                    title="落款"
-                    required={true}
-                />
-
-                <c-input 
-                    title="上会情况"
-                    input-type="textarea"
-                />
-
-                <c-files />
-
-                <c-select
-                    title="缓急程度"
-                    required={true}
-                />
-
-                <div>
-                    拟文发送时间
-                </div>
-
-                <c-input 
-                    title="文件号"
-                    required={true}
-                />
-
-                <c-flow-path />
-            </div>)
-        },
+        }
     }
 }
 </script>

src/views/applyfor/indexMixins.js

@@ -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,12 +37,21 @@ 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,
@@ -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
+        }
+    }
 }