apply and approve

TODO.md

@@ -1,9 +1,13 @@
 # 钉钉办公系统 - 待办事项
 
-* [x] 制作一个底部弹窗选择选项和取消的组件 (components) 
-* [x] 缺少选择日期的组件
-
 
 ### overpage.
 
----- (2023/11/10) ----
+
+
+### 需要后端处理
+
+* [ ] 我的申请记录缺少时间查询字段
+* [ ] 个人申请详情无法查看
+* [ ] 我的出差-详情页面缺少 发起人字段
+

src/api/approve.js

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

src/api/approveinfo.js

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

src/api/common.js

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

src/utils/approve-item.js

@@ -0,0 +1,26 @@
+/**
+ * @description 设置审核Row的数据内容等
+ */
+
+export function formatApproveItemRow(data, type) {
+    let arrs = []
+    switch (type) {
+        case 5: // 出差申请展示内容
+            arrs = [
+                {
+                    label: '发起事由',
+                    val: data.reason
+                },
+                {
+                    label: '同行人员',
+                    val: data.peer_user.length ? data.peer_user.map(user => (user.name)).join('、') : '暂无同行人员'
+                },
+                {
+                    label: '出差时间',
+                    val: `${data.start_time} — ${data.end_time}`
+                }
+            ]
+            break
+    }
+    return arrs
+}

src/views/Approve.vue

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

src/views/apply-state/index.vue

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

src/views/applyfor/indexMixins.js

@@ -26,7 +26,7 @@ export default {
                     /*
                     [{
                         userid: string,
-                        headimg: string,
+                        avatar: string,
                         name: string
                     }]
                      */

src/views/approve/components/ApproveItem.vue

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

src/views/approve/detail.vue

@@ -66,6 +66,8 @@ import DetailRows from './components/DetailRows.vue'
 import ApproveFlowPath from './components/ApproveFlowPath.vue'
 import ApproveControl from './components/ApproveControl.vue'
 
+import * as ApproveInfoApi from '@/api/approveinfo'
+
 export default {
     name: 'ExamineDetail',
     components: {
@@ -168,6 +170,10 @@ export default {
                     value: '银行转账' // NOTE: 转账方式理论上来讲也是一套枚举
                 }
             ],
+
+            pageType: '', // 页面类型 info and approve
+            apiFunc: null, // 接口函数 
+            id: '',
         }
     },
     created () {
@@ -195,13 +201,99 @@ export default {
     methods: {
         // NOTE: 页面初始化的模块
         __init__ () {
+            let { id, type } = this.$route.query
+            // type [info, approve]
+            console.log('orderNo>>', id, type);
+            this.id = id
+            this.pageType = type
             // TODO: 请求接口&整合数据给予`datalist`字段
+            this.apiFunc = type === 'info' ? ApproveInfoApi.getDetail : () => {}
+
+            this.$nextTick(() => {
+                this.__detail__()
+            })
+        },
+
+
+        async __detail__ () {
+            try {
+                const params = {
+                    id: this.id
+                }
+                const res = await this.apiFunc(params)
+                if (res.code === 1) {
+                    // const { module_info } = res.data
+                    this.datalist = this.formatModuleInfoData(res.data)
+                    console.log(res.data);
+
+                }
+            } catch (e) {
+                console.log('approve detail - error>>', e);
+            }
         },
 
         handleBackEvent() {
             console.log('press back btn');
             // NOTE: 通过路由返回
             this.$router.push('/approve')
+        },
+
+
+        // NOTE: 渲染`module_info`字段函数； 让其更好的渲染
+        formatModuleInfoData (data) {
+            const { module, order_no, module_info, department_data } = data
+            let temporaryList = [
+                {
+                    title: '审批编号',
+                    value: order_no
+                }
+            ]
+            switch(module) {
+                case 5:
+                    temporaryList.push(...[
+                        {
+                            title: '所在部门',
+                            value: department_data.map(department => (department.name)).join('-')
+                        },
+                        {
+                            title: '申请日期',
+                            value: data.create_at
+                            // type: 'date'
+                        },
+                        {
+                            title: '发起人',
+                            value: data.user_id
+                        },
+                        { title: '外出事由', value: module_info.reason },
+                        { title: '同行人员', value: data.peer_user.map(user => (user.name)).join('、') },
+                        { title: '出差开始时间', value: module_info.start_time },
+                        { title: '出差结束时间', value: module_info.end_time },
+                        { title: '附件材料',
+                            type: 'files',
+                            value: module_info.document_text
+                        },
+                        {
+                            type: 'images',
+                            title: '图片',
+                            value: module_info.images_text
+                        },
+                        {
+                            title: '类型',
+                            value: module_info.type
+                        },
+                        {
+                            title: '是否跨关内关外',
+                            value: module_info.is_who
+                        },
+                        {
+                            title: module_info.is_who ? '预算金额' : '备注',
+                            value: module_info.remark
+                        }
+                    ])
+                break
+            }
+
+            return temporaryList
         }
     },
     beforeDestroy () {

src/views/approve/search.vue

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