出差

fhKeeper/formulahousekeeper/timesheet_h5/src/views/exaLeave/awayOffice.vue

@@ -0,0 +1,652 @@
+<template>
+<div>
+    <van-nav-bar title="出差管理" left-text="返回" @click-left="back" fixed left-arrow style="z-index:1000" />
+<div class="content">
+    <van-tabs v-model="active" @change="activeChange">
+        <van-tab title="出差填报" :name="0"></van-tab>
+        <van-tab title="出差列表" :name="1"></van-tab>
+        <van-tab title="出差审核" :name="2" v-if="leaveAudit"></van-tab>
+    </van-tabs>
+    <div class="edit" v-if="active == 0">
+        <van-form class="edit_form" ref="loginForm" label-width="120">
+                <!-- 请假类型 -->
+                <van-field v-model="editForm.leaveType" label="请假类型" @click="typeShow = true" readonly clickable>
+                    <template #input>{{typeList[editForm.leaveType]}}</template>
+                </van-field>
+                <van-popup v-model="typeShow" position="bottom">
+                    <van-picker
+                    show-toolbar
+                    :columns="typeList"
+                    @confirm="typeChange"
+                    @cancel="typeShow = false;$forceUpdate();"/>
+                </van-popup>
+                <!-- 请假人 -->
+                <van-field v-model="editForm.ownerId" label="请假人" @click="ownerIdShow = true" :readonly="!canExamine" clickable required :rules="[{ required: true, message: '请选择请假人' }]">
+                    <template #input>
+                        <span v-if="user.userNameNeedTranslate == 1 && formshowText.name"><ww-open-data type='userName' :openid='formshowText.name'></ww-open-data></span>
+                        <span v-else>{{formshowText.name}}</span>
+                    </template>
+                </van-field>
+                <van-popup v-model="ownerIdShow" position="bottom" v-if="canExamine">
+                    <div style="minHeight:300px;">
+                        <van-radio-group v-model="userRadio" v-if="user.userNameNeedTranslate == '1'">
+                            <van-radio v-for="item in userList" :key="item.id" :name="item" class="userCheckbox">
+                                <ww-open-data type='userName' :openid='item.name'></ww-open-data>
+                            </van-radio>
+                        </van-radio-group>
+                        <van-radio-group v-model="userRadio" v-else>
+                            <van-radio v-for="item in userList" :key="item.id" :name="item" class="userCheckbox">{{item.name}}</van-radio>
+                        </van-radio-group>
+                        <van-button style="width:100%;position: -webkit-sticky;position: sticky;bottom: 0;" @click="ownerIdChange()">确定</van-button>
+                    </div>
+                </van-popup>
+                <!-- 电话 -->
+                <van-field label="电话" v-model="editForm.tel" type="number" :rules="[{ required: true, message: '请输入联系电话' }]"></van-field>
+                <!-- 按天/小时请假 -->
+                <van-field label="时长单位" readonly>
+                    <template #input>
+                        <van-radio-group v-model="editForm.timeType" direction="horizontal" @change="timeTypeChange">
+                            <van-radio name="0">按天</van-radio>
+                            <van-radio name="1" v-if="editForm.leaveType != 6">按小时</van-radio>
+                        </van-radio-group>
+                    </template>
+                </van-field>
+                <!-- 选择日期 -->
+                <van-field :label="editForm.timeType == '0' ? '选择日期' : '选择时间'" v-model="formshowText.dateTitle" @click="dateShow()" readonly clickable :rules="[{ required: true, message: editForm.timeType == '0' ? '请选择日期' : '请选择时间' }]">
+                    <template #input><span>{{formshowText.dateTitle}}</span></template>
+                </van-field>
+                    <!-- 按天 -->
+                <van-calendar v-model="dateShow_day" type="range" :allow-same-day="true" :show-confirm="false" @confirm="date_dayChange" :min-date="minDate" :max-date="maxDate" />
+                    <!-- 按小时 -->
+                <van-popup v-model="dateShow_hour" position="bottom">
+                    <van-datetime-picker
+                    type="date"
+                    title="选择填报日期"
+                    @confirm="date_hourChange"
+                    v-model="currentDate"
+                    @cancel="dateShow_hour = false;$forceUpdate();"
+                    :min-date="minDate"
+                    :max-date="maxDate"/>
+                </van-popup>
+                <!-- 请假天数 -->
+                <van-field label="请假天数(天)" v-if="editForm.timeType == '0'" @blur="dayBlur()" v-model="editForm.timeDays" type="number" :rules="[{ required: true, message: '请输入请假天数' }]"></van-field>
+                <!-- 请假时长 -->
+                <van-field label="请假时长(小时)" v-else v-model="editForm.timeHours" @blur="hourBlur()" type="number" :rules="[{ required: true, message: '请输入请假时长' }]"></van-field>
+                <!-- 备注 -->
+                <van-field v-model="editForm.remark" label="备注" type="textarea" :autosize="{minHeight:100}"></van-field>
+        </van-form>
+        <!-- 提交 -->
+        <div class="form_btn" style="position:fixed; bottom:0px;width:100%;">
+            <div style="padding-bottom:10px;" v-if="editForm.id">
+                <van-button square block type="default" @click="clearEditForm()" style="width:100%;float:left;">清除</van-button>
+            </div>
+            <div style="padding-bottom:10px;">
+                <van-button square block type="info" @click="submitLeave()" :disabled="txselnum == 0 && editForm.leaveType == 6 && editForm.ownerId != '' ? true : false" :loading="submitLoading" style="width:100%;float:left;">提交</van-button>
+            </div>
+        </div>
+    </div>
+    <div class="list" v-if="active == 1">
+
+        <van-collapse v-model="activeName" accordion class="list_collapse">
+                <van-collapse-item v-for="item in leaveList" :key="item.id" title="标题1" :name="item.id">
+                    <template #title>
+                        <div class="collapse_label_l">请假人：
+                            <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='item.ownerName'></ww-open-data></span>
+                            <span v-else>{{item.ownerName}}</span>
+                        </div>
+                        <div class="collapse_label_r">电话：{{item.tel}}</div>
+                        <div class="collapse_label_l">请假类型：{{typeList[item.leaveType]}}</div>
+                        <div class="collapse_label_r">状态：<span :class="statusClass[item.status]">{{statusList[item.status]}}</span></div>
+                    </template>
+                    <div class="wrapper">
+                        <div><span>请假开始时间：</span><span>{{item.startDate}}</span></div>
+                        <div><span>请假结束时间：</span><span>{{item.endDate}}</span></div>
+                        <div><span>请假天数：</span><span>{{item.timeDays ? item.timeDays + '天' : '/'}}</span></div>
+                        <div><span>请假时长：</span><span>{{item.timeHours ? item.timeHours + '小时' : '/'}}</span></div>
+                        <div><span>备注：</span><span>{{item.remark}}</span></div>
+                    </div>
+                    <div class="operation" v-if="(item.status != 0 && item.ownerId == user.id) || leaveAll">
+                        <van-button v-if="item.status == 3 || item.status == 2" size="small" type="info" @click="submitAgain(item)">重新提交</van-button>
+                        <van-button v-if="item.status == 3 || item.status == 2" style="margin-left:10px" size="small" type="danger" @click="deleteLeave(item.id)">删除</van-button>
+                        <van-button v-if="item.status == 1" style="margin-left:10px" size="small" type="default" @click="cancelLeave(item.id)">撤回</van-button>
+                    </div>
+                </van-collapse-item>
+            </van-collapse>
+    </div>
+    <div class="audit" v-if="active == 2">
+            <van-collapse v-model="auditName" accordion class="list_collapse">
+                <van-collapse-item v-for="item in auditList" :key="item.id" title="标题2" :name="item.id">
+                    <template #title>
+                        <div class="collapse_label_l">请假人：
+                            <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='item.ownerName'></ww-open-data></span>
+                            <span v-else>{{item.ownerName}}</span>
+                        </div>
+                        <div class="collapse_label_r">电话：{{item.tel}}</div>
+                        <div class="collapse_label_l">请假类型：{{typeList[item.leaveType]}}</div>
+                        <div class="collapse_label_r">状态：<span :class="statusClass[item.status]">{{statusList[item.status]}}</span></div>
+                        <div class="operation">
+                            <van-button size="small" type="info" :loading="item.approveLoading" @click.stop="approveLeave(item)">通过</van-button>
+                            <van-button style="margin-left:15px" size="small" type="danger" @click.stop="denyLeave(item.id)">驳回</van-button>
+                        </div>
+                    </template>
+                    <div class="wrapper">
+                        <div><span>请假开始时间：</span><span>{{item.startDate}}</span></div>
+                        <div><span>请假结束时间：</span><span>{{item.endDate}}</span></div>
+                        <div><span>请假天数：</span><span>{{item.timeDays ? item.timeDays + '天' : '/'}}</span></div>
+                        <div><span>请假时长：</span><span>{{item.timeHours ? item.timeHours + '小时' : '/'}}</span></div>
+                        <div><span>备注：</span><span>{{item.remark}}</span></div>
+                    </div>
+                </van-collapse-item>
+            </van-collapse>
+            <van-popup v-model="denyReasonDialog" position="bottom" closeable >
+                <van-cell>请输入原因</van-cell>
+                <van-field class="form_input"
+                    v-model="denyParm.denyReason" name="reason" type="textarea" placeholder="请输入您决定驳回的原因"
+                    rows="3" autosize  />
+                <van-button style="width:100%;" type="info" :loading="denyLoading" @click="deny()">提交</van-button>
+            </van-popup>
+    </div>
+</div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            user: JSON.parse(localStorage.userInfo),
+            canExamine: false,
+            leaveAll: false,
+            leaveAudit: false,
+            leaveFil: false,
+            active: 0,
+            txselnum: 0,
+            editForm: {
+                leaveType: 0,
+                ownerId: '',
+                tel: '',
+                startDate: '',
+                endDate: '',
+                timeType: '0',
+                timeDays: 0,
+                timeHours: 8,
+                remark: ''
+            },
+            formshowText: {
+                name: '',
+                dateTitle: ''
+            },
+            userRadio: null,
+            userList: [],
+            typeList: ['事假','病假','年假','产假','婚假','丧假','调休假','陪产假','其他'],
+            currentDate: new Date(),
+            minDate: new Date(2020,0,1),
+            maxDate: new Date(2030,11,31),
+
+            ownerIdShow: false,
+            canExamine: false,
+            dateShow_day: false,
+            dateShow_hour: false,
+            typeShow: false,
+            submitLoading: false,
+
+
+
+            activeName: '',
+            leaveList: [],
+            statusList: ['审核通过','待审核','已驳回','已撤销'],
+            statusClass: ['','waiting','rejected',''],
+
+            auditName: '',
+            auditList: [],
+            denyReasonDialog: false,
+            denyLoading: false,
+            denyParm: {
+                id: '',
+                denyReason: ''
+            }
+
+            
+        }
+    },
+    mounted() {
+        for(let i in this.user.functionList){
+            if(this.user.functionList[i].name == '查看全部请假单'){
+                this.leaveAll = true
+            }
+            if(this.user.functionList[i].name == '请假审核'){
+                this.leaveAudit = true
+            }
+            if(this.user.functionList[i].name == '请假填报'){
+                this.leaveFil = true
+            }
+        }
+        // if(!this.canExamine){
+            this.editForm.ownerId = this.user.id
+            this.formshowText.name = this.user.name
+            this.editForm.timeHours = this.user.timeType.allday
+            this.getTxsel()
+        // }else{
+        //     this.getUserList()
+        // }
+    },
+    methods: {
+        back(){
+            history.back();
+        },
+        getDaysBetween(date1,date2){
+            let  startDate = Date.parse(date1);
+            let  endDate = Date.parse(date2);
+            if (startDate>endDate){
+                return 0;
+            }
+            if (startDate==endDate){
+                return 1;
+            }
+            let days=(endDate - startDate)/(1*24*60*60*1000);
+            return  days + 1;
+        },
+        formatDate(date) {
+            let mon = date.getMonth() + 1
+            return `${date.getFullYear()}-${mon<10?'0'+mon:mon}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
+        },
+        activeChange(){
+            sessionStorage.setItem('page',JSON.stringify(this.active))
+            if(this.active == 1){
+                this.getLeaveList()
+            }
+            if(this.active == 2){
+                this.getAuditList()
+            }
+        },
+// #region 
+        ownerIdChange(){
+            this.editForm.ownerId = this.userRadio ? this.userRadio.id : ''
+            this.formshowText.name = this.userRadio ? this.userRadio.name : ''
+            this.ownerIdShow = false
+        },
+        timeTypeChange(){
+            if(this.editForm.timeType == '0'){
+                if(this.editForm.startDate && this.editForm.endDate){
+                    this.formshowText.dateTitle = this.editForm.startDate+'\u3000至\u3000'+this.editForm.endDate
+                }else{
+                    this.formshowText.dateTitle = ''
+                }
+            }else{
+                if(this.editForm.startDate){
+                    this.formshowText.dateTitle = this.editForm.startDate
+                }else{
+                    this.formshowText.dateTitle = ''
+                }
+            }
+            
+        },
+        dateShow(){
+            
+            if(this.editForm.timeType == '0'){
+                this.dateShow_day = true
+            }else{
+                this.dateShow_hour = true
+            }
+        },
+        date_dayChange(value,date){
+            this.dateShow_day = false
+            this.editForm.startDate = this.formatDate(value[0])
+            this.editForm.endDate = this.formatDate(value[1])
+            this.formshowText.dateTitle = this.formatDate(value[0])+'\u3000至\u3000'+this.formatDate(value[1])
+            this.editForm.timeDays = this.getDaysBetween(value[0],value[1])
+        },
+        date_hourChange(value){
+            this.editForm.startDate = this.formatDate(value)
+            this.formshowText.dateTitle = this.editForm.startDate
+            this.dateShow_hour = false
+        },
+        dayBlur(){
+            if(this.editForm.startDate && this.editForm.endDate){
+                if(this.editForm.timeDays*1 < this.getDaysBetween(this.editForm.startDate,this.editForm.endDate) - 1){
+                    this.editForm.timeDays = this.getDaysBetween(this.editForm.startDate,this.editForm.endDate) - 1
+                }else if(this.editForm.timeDays*1 > this.getDaysBetween(this.editForm.startDate,this.editForm.endDate)){
+                    this.editForm.timeDays = this.getDaysBetween(this.editForm.startDate,this.editForm.endDate)
+                }
+            }
+        },
+        hourBlur(){
+            if(this.editForm.timeHours*1 > this.user.timeType.allday){
+                this.editForm.timeHours = this.user.timeType.allday
+            }
+            if(this.editForm.timeHours*1 < 0){
+                this.editForm.timeHours = 0.5
+            }
+        },
+
+        typeChange(value,key){
+            this.editForm.leaveType = key
+            this.typeShow = false
+        },
+        submitLeave(){
+            this.$refs.loginForm.validate().then(()=>{
+                console.log('success');
+                this.submitLoading = true
+                this.$axios.post("/leave-sheet/add", this.editForm)
+                .then(res => {
+                    this.submitLoading = false
+                    if(res.code == "ok") {
+                        this.editForm = {
+                            leaveType: 0,
+                            ownerId: this.editForm.ownerId,
+                            tel: this.editForm.tel,
+                            startDate: '',
+                            endDate: '',
+                            timeType: '0',
+                            timeDays: 0,
+                            timeHours: this.user.timeType.allday,
+                            remark: ''
+                        }
+                        this.formshowText.dateTitle = ''
+                    } else {
+                        this.$toast.fail(res.msg);
+                    }
+                }).catch(err=> {this.submitLoading = false;this.$toast.clear();console.log(err)});
+            }).catch(()=>{})
+        },
+        clearEditForm(){
+            this.editForm = {
+                leaveType: 0,
+                ownerId: this.editForm.ownerId,
+                tel: this.editForm.tel,
+                startDate: '',
+                endDate: '',
+                timeType: '0',
+                timeDays: 0,
+                timeHours: this.user.timeType.allday,
+                remark: ''
+            }
+            this.formshowText.dateTitle = ''
+        },
+// #endregion
+
+// #region
+        cancelLeave(pid){
+            this.$dialog.confirm({
+                message: '确认撤回？',
+            })
+            .then(() => {
+                // on confirm
+                this.$axios.post("/leave-sheet/cancel", {id: pid})
+                .then(res => {
+                    if(res.code == "ok") {
+                        this.$toast.success('撤回成功')
+                        this.getLeaveList()
+                    } else {
+                        this.$toast.fail('获取失败');
+                    }
+                }).catch(err=> {this.$toast.clear();console.log(err)});
+            })
+            .catch(() => {
+                // on cancel
+            });
+        },
+        deleteLeave(pid){
+            this.$dialog.confirm({
+                message: '确认删除？',
+            })
+            .then(() => {
+                // on confirm
+                this.$axios.post("/leave-sheet/delete", {id: pid})
+                .then(res => {
+                    if(res.code == "ok") {
+                        this.$toast.success('删除成功')
+                        this.getLeaveList()
+                    } else {
+                        this.$toast.fail('获取失败');
+                    }
+                }).catch(err=> {this.$toast.clear();console.log(err)});
+            })
+            .catch(() => {
+                // on cancel
+            });
+            
+        },
+        submitAgain(item){
+            this.editForm = item
+            if(this.editForm.startDate && !this.editForm.endDate){
+                this.$set(this.editForm,'timeType','1')
+            }else{
+                this.$set(this.editForm,'timeType','0')
+            }
+            this.timeTypeChange()
+            this.active = 0
+        },
+// #endregion
+
+        approveLeave(item){
+            item.approveLoading = true
+            this.$axios.post("/leave-sheet/approve", {id: item.id})
+            .then(res => {
+                if(res.code == "ok") {
+                    this.$toast.success('已通过')
+                    item.approveLoading = false
+                    this.getAuditList()
+                } else {
+                    this.$toast.fail('获取失败');
+                }
+            }).catch(err=> {this.$toast.clear();console.log(err)});
+            
+        },
+        denyLeave(pid){
+            this.denyParm.id = pid
+            this.denyReasonDialog = true
+        },
+        deny(){
+            this.denyLoading = true
+            this.$axios.post("/leave-sheet/deny", this.denyParm)
+            .then(res => {
+                if(res.code == "ok") {
+                    this.$toast.success('已驳回')
+                    this.denyReasonDialog = false
+                    this.denyLoading = false
+                    this.getAuditList()
+                } else {
+                    this.$toast.fail('获取失败');
+                }
+            }).catch(err=> {this.$toast.clear();console.log(err)});
+        },
+
+        getUserList(){
+            this.$axios.post("/user/getSimpleActiveUserList", {})
+            .then(res => {
+                if(res.code == "ok") {
+                    this.userList = res.data
+                } else {
+                    this.$toast.fail('获取失败');
+                }
+            }).catch(err=> {this.$toast.clear();console.log(err)});
+        },
+        getTxsel(){
+            this.$axios.post("/leave-sheet/getOTAvaiDays", {userId: this.user.id})
+            .then(res => {
+                if(res.code == "ok") {
+                    if(res.data < 0.5){
+                        this.txselnum = 0
+                    }else{
+                        this.txselnum = res.data.toFixed(1)
+                    }
+                } else {
+                    this.$toast.fail('获取失败');
+                }
+            }).catch(err=> {this.$toast.clear();console.log(err)});
+        },
+        getLeaveList(){
+            let parameter = {
+                pageIndex: 1,
+                pageSize: 999,
+                // status: '',
+                // startDate: '',
+                // endDate: '',
+                // ownerId: '',
+                // leaveType: ''
+            }
+            this.$axios.post("/leave-sheet/list", parameter)
+            .then(res => {
+                if(res.code == "ok") {
+                    this.leaveList = res.data.records
+                } else {
+                    this.$toast.fail('获取失败:'+res.smg);
+                }
+            }).catch(err=> {this.$toast.clear();console.log(err)});
+        },
+        getAuditList(){
+            this.$axios.post("/leave-sheet/auditList", {
+                pageSize: 999,
+                pageIndex: 1
+            }).then(res => {
+                if(res.code == "ok") {
+                    this.auditList = res.data.records
+                    for(let i in this.auditList){
+                        this.$set(this.auditList[i],'approveLoading',false)
+                    }
+                } else {
+                    this.$toast.fail('获取失败');
+                }
+            }).catch(err=> {this.$toast.clear();console.log(err)});
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.content{
+    margin-top: 46px;
+    overflow: auto;
+    .edit{
+        .userCheckbox {
+            padding: 10px;
+        }
+        padding-bottom: 46px;
+        .form_btn{
+            z-index: 1000;
+        }
+    }
+    .list{
+        .list_collapse>div{
+            margin: 4px;
+        }
+        .list_collapse{
+            .collapse_label_l{
+                width: 50%;
+                padding: 4px;
+                display: inline-block;
+            }
+            .collapse_label_r{
+                width: 50%;
+                padding: 4px;
+                display: inline-block;
+                .waiting {
+                    color:orange;
+                }
+                .rejected {
+                    color:red;
+                }
+            }
+            .wrapper{
+                div{
+                    margin: 8px 16px;
+                    zoom: 1; 
+                }
+                div:after{
+                    content: ""; 
+                    display: block; 
+                    height: 0; 
+                    clear: both; 
+                    visibility: hidden; 
+                }
+                div span:nth-child(1){
+                    width: 40%;
+                    float: left;
+                }
+                div span:nth-child(2){
+                    width: 60%;
+                    float: left;
+                }
+            }
+            .operation{
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+        }
+        
+    }
+    .audit{
+        .list_collapse>div{
+            margin: 4px;
+        }
+        .list_collapse{
+            
+            .collapse_label_l{
+                width: 60%;
+                padding: 4px;
+                display: inline-block;
+            }
+            .collapse_label_r{
+                width: 40%;
+                padding: 4px;
+                display: inline-block;
+                .waiting {
+                    color:orange;
+                }
+                .rejected {
+                    color:red;
+                }
+            }
+            .operation{
+                margin-top: 5px;
+                padding-top: 5px;
+                border-top: 0.5px solid #ebedf0;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                button{
+                    width: 1.2rem;
+                }
+            }
+            .wrapper{
+                div{
+                    margin: 8px 16px;
+                    zoom: 1; 
+                }
+                div:after{
+                    content: ""; 
+                    display: block; 
+                    height: 0; 
+                    clear: both; 
+                    visibility: hidden; 
+                }
+                div span:nth-child(1){
+                    width: 40%;
+                    float: left;
+                }
+                div span:nth-child(2){
+                    width: 60%;
+                    float: left;
+                }
+            }
+            .lookup{
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+            
+        }
+        
+    }
+}
+</style>
+<style>
+.edit_form .invoice .van-field__label{
+    color: #999;
+}
+.edit_form .invoice .van-field__control{
+    color: #999;
+}
+</style>