cld/global/vue/fee/receipt_trave_component.js

/*
 * @description: 费用-差旅组件
 * @Author: CP
 * @Date: 2020-11-16 14:52:08
 * @FilePath: \cld\global\vue\fee\receipt_trave_component.js
 */

Vue.component("trave", {
    data: function () {
        return {
            // 行程时间
            traveDay: 0,
            tripTime: "",

            regionOption: region,
            // regionLeve2Option: region[0].child,
            // arrivalLeve2Option: region[0].child,
            //新增下拉地区
            regionLeve2Option: region[defaultTraveProvinceIndex].child,
            arrivalLeve2Option: region[defaultTraveProvinceIndex].child,
            //编辑下拉地区
            regionLeve2OptionEdi: [],
            arrivalLeve2OptionEdi: [],

            // 出发地 省 市
            // departureProvince: region[0].name,
            // departureCity: region[0].child[0].name,
            departureProvince: defaultTraveProvince,
            departureCity: region[defaultTraveProvinceIndex].child[0].name,
            // 结束地 省 市
            // arrivalProvince: region[0].name,
            // arrivalCity: region[0].child[0].name,
            arrivalProvince: defaultTraveProvince,
            arrivalCity: region[defaultTraveProvinceIndex].child[0].name,
            // 目的地数组
            arrivalList: [],

            tripTimeEdi: "",
            departureProvinceEdi: '',
            departureCityEdi: '',
            arrivalProvinceEdi: '',
            arrivalCityEdi: '',
            ediIndex: '',
            // arrivalListEdi: [],
        }
    },
    props: ['traveItem', 'alertDia', 'traveList', 'traveExplain'],
    computed: {
        travePrice: function () {
            return travePrice(this.traveList);
        }
    },
    methods: {
        //行程时间验证
        changeCount: function (event) {
            this.tripTime = event.target.value;
            this.tripTimeEdi = event.target.value;
            let dateArray = event.target.value.split(" - ");


            if (dateArray.length == 2) {
                let dateFormat = /^(\d{4})-(\d{2})-(\d{2})$/;
                if (!dateFormat.test(dateArray[0])) {
                    this.alertDia("差旅行程时间填写有误");
                    return 
                }
                if (!dateFormat.test(dateArray[1])) {
                    this.alertDia("差旅行程时间填写有误");
                    return 
                }
            }
              

            // if(ValidTraveDate(dateArray)){
            //     this.alertDia("差旅行程时间填写有误");
            //     return 
            // }


            traveDay = (Math.abs(Date.parse(dateArray[0]) - Date.parse(dateArray[1]))) / (1000 * 60 * 60 * 24) + 1;
            if (!isNaN(traveDay)) {
                this.traveDay = traveDay;
                let alertDia = this.alertDia;
                // 验证时间
                $.ajax({
                    type: "GET",
                    url: "/json/trave/date/all",
                    dataType: "json",
                    processData: false,
                    contentType: false,
                }).success(function (sortList) {
                    let item = new Array(new Date(Math.round(new Date(dateArray[0]).getTime() / 1000 - 28800)).getTime(), new Date(Math.round(new Date(dateArray[1]).getTime() / 1000 - 28800)).getTime());
                    sortList.push(item);
                    let TraveStatus = isTraveDate(sortList);
                    if (TraveStatus == 2) {
                        alertDia("差旅行程日期段-有重复");
                    }
                   

                }).fail(function (msg) {
                    alertDia("历史差旅时间获取失败");
                });
            }
            // this.traveDay=new Date(dateArray[1]).getDate()-new Date(dateArray[0]).getDate()+1;
        },
        changeRegionLeve2: function (event, model) {
            this.regionOption.forEach(element => {
                if (element.name == event.target.value) {
                    if (model == "departureCity") {
                        this.regionLeve2Option = element.child;
                        this.departureCity = element.child[0].name;
                        this.departureCityEdi = element.child[0].name;
                        this.arrivalProvinceEdi = element.name;
                        this.arrivalProvince = element.name;
                        this.arrivalLeve2Option = element.child;
                        this.arrivalCity = element.child[0].name;
                        this.arrivalCityEdi = element.child[0].name;
                    } else if (model == "arrivalCity") {
                        this.arrivalLeve2Option = element.child;
                        this.arrivalCity = element.child[0].name;
                        this.arrivalCityEdi = element.child[0].name;

                    }
                    return
                }
            });
        },
        changeArrivalCity: function (event) {
            this.arrivalCity = event.target.value
            this.arrivalCityEdi = event.target.value
        },
        // 行程单相关
        // 打开行程单
        openTrip: function () {
            this.arrivalList = [];
            this.tripTime = "";
        },
        deleteTrip(index) {
            this.traveList.splice(index, 1)
        },
        addTrip: function () {
            if (this.tripTime == "") {
                this.alertDia("请选择行程时间");
                return
            }
            // 构建行程信息
            tripList = [];
            // 出发地
            var newTripItem = NewTraveItem();
            tripList.push({
                province: this.departureProvince,
                city: this.departureCity,
                tripItem: newTripItem,
                subtotal: 0,
            });
            // 目的地
            this.arrivalList.forEach(element => {
                var newTripItem = NewTraveItem();
                tripList.push({
                    province: element.arrivalProvince,
                    city: element.arrivalCity,
                    tripItem: newTripItem,
                    subtotal: 0,
                });
            });
            // 结束地
            var newTripItem = NewTraveItem();
            tripList.push({
                province: this.arrivalProvince,
                city: this.arrivalCity,
                tripItem: newTripItem,
                subtotal: 0.00,
            });
            // 构建差旅信息
            trave = {
                tripTime: this.tripTime,
                tripList: tripList,
                total: 0.00,
            };
            this.traveList.push(trave);
            $('#route-add').modal('hide')
        },
        openEdiTrip(index) {
            this.ediIndex = index;
            let tripData = this.traveList[index];
            this.tripTimeEdi = tripData.tripTime;
            // 出发地
            this.departureProvinceEdi = tripData.tripList[0].province;
            this.departureCityEdi = tripData.tripList[0].city;
            
            this.regionOption.forEach(el => {
                if (el.name == this.departureProvinceEdi) {
                    this.regionLeve2OptionEdi = el.child;
                    return
                }
            });

            //this.regionLeve2Option= tripData.tripList;
            // 结束
            let endIndex = tripData.tripList.length - 1
            this.arrivalProvinceEdi = tripData.tripList[endIndex].province;
            this.arrivalCityEdi = tripData.tripList[endIndex].city;
            this.regionOption.forEach(el => {
                if (el.name == this.arrivalProvinceEdi) {
                    this.arrivalLeve2OptionEdi = el.child;
                    return
                }
            });
            //this.arrivalLeve2Option=tripData.tripList,
            // 目的地
            this.arrivalList = [];
            tripData.tripList.forEach((element, index) => {
                // 获得目的城市下拉菜单
                let arrivalCityOption = [];
                this.regionOption.forEach(el => {
                    if (el.name == element.province) {
                        arrivalCityOption = el.child;
                        return
                    }
                });
                if (index !== 0 && index !== endIndex) {
                    this.arrivalList.push({
                        "arrivalProvince": element.province,
                        "arrivalCity": element.city,
                        "arrivalCityOption": arrivalCityOption
                    });
                }
            });

        },
        ediTrip() {
            if (this.tripTime == "") {
                this.alertDia("请选择行程时间");
                return
            }
            // // 构建行程信息
            // tripList = [];
            // // 出发地
            // var newTripItem = NewTraveItem();
            // tripList.push({
            //     province: this.departureProvinceEdi,
            //     city: this.departureCityEdi,
            //     tripItem: newTripItem,
            //     subtotal: 0,
            // });
            // // 目的地
            // this.arrivalList.forEach(element => {
            //     var newTripItem = NewTraveItem();
            //     tripList.push({
            //         province: element.arrivalProvince,
            //         city: element.arrivalCity,
            //         tripItem: newTripItem,
            //         subtotal: 0,
            //     });
            // });
            // // 结束地
            // var newTripItem = NewTraveItem();
            // tripList.push({
            //     province: this.arrivalProvinceEdi,
            //     city: this.arrivalCityEdi,
            //     tripItem: newTripItem,
            //     subtotal: 0.00,
            // });
            // // 构建差旅信息
            // trave = {
            //     tripTime: this.tripTime,
            //     tripList: tripList,
            //     total: 0.00,
            // };

            // this.traveList[this.ediIndex] = trave;

            // // 更新差旅信息
            this.traveList[this.ediIndex].tripList[0].province=this.departureProvinceEdi;
            this.traveList[this.ediIndex].tripList[0].city=this.departureCityEdi;
            // this.traveList[this.ediIndex].tripList[0].subtotal=0;
            // // 更新出发地
            // this.traveList[this.ediIndex].tripList[0].tripItem.forEach(element => {
            //     element.price=0.00;
            //     element.remark="";
            // });
            // 更新目的地
            let countOriginal=this.traveList[this.ediIndex].tripList.length-2;
            let countNow=this.arrivalList.length;
            
            if(countOriginal>countNow){
                let poor=countOriginal-countNow;
                this.traveList[this.ediIndex].tripList.splice(countNow,poor);
            }

            // 相等-更新省市，是否更新过
            if(countOriginal==countNow){
                let count=this.traveList[this.ediIndex].tripList.length-1;
                
                this.traveList[this.ediIndex].tripList.forEach((element,index) => {
                    if(index>0&&index<count){
                        element.province=this.arrivalList[index-1].arrivalProvince;
                        element.city=this.arrivalList[index-1].arrivalCity;
                    }
                });
            }

            if(countOriginal<countNow){
                // 更新原地区
                let count=this.traveList[this.ediIndex].tripList.length
                if(count>2){
                    this.traveList[this.ediIndex].tripList.forEach((element,index) => {
                        if(index>0&&index<count){
                            element.province=this.arrivalList[index-1].arrivalProvince;
                            element.city=this.arrivalList[index-1].arrivalCity;;
                        }
                    });
                }
                
                if(countOriginal==0){
                    this.arrivalList.forEach(element => {
                        var newTripItem = NewTraveItem();
                        this.traveList[this.ediIndex].tripList.splice(1,0,{
                            province: element.arrivalProvince,
                            city: element.arrivalCity,
                            tripItem: newTripItem,
                            subtotal: 0,
                        });
                    });
                }else{
                    let poor=countNow-countOriginal;
                    for (let i = 0; i < poor; i++) {
                        var newTripItem = NewTraveItem();
                        this.traveList[this.ediIndex].tripList.splice(countOriginal+1,0,{
                            province: this.arrivalList[poor+i].arrivalProvince,
                            city: this.arrivalList[poor+i].arrivalCity,
                            tripItem: newTripItem,
                            subtotal: 0,
                        });
                    }
                }
                

            }

            // this.traveList[this.ediIndex].tripList.splice(1,countOriginal-2);
            
            // this.traveList[this.ediIndex].tripList.forEach((element,index) => {
            //     if(index>0&&index<count){
            //         delete this.traveList[this.ediIndex].tripList[index];
            //     }
            // });
            // 目的地
            // this.arrivalList.forEach(element => {
            //     var newTripItem = NewTraveItem();
            //     this.traveList[this.ediIndex].tripList.splice(1,0,{
            //         province: element.arrivalProvince,
            //         city: element.arrivalCity,
            //         tripItem: newTripItem,
            //         subtotal: 0,
            //     });
            //     // this.traveList[this.ediIndex].tripList.push({
            //     //     province: element.arrivalProvince,
            //     //     city: element.arrivalCity,
            //     //     tripItem: newTripItem,
            //     //     subtotal: 0,
            //     // });
            // });
            // 结束地
            let count=this.traveList[this.ediIndex].tripList.length;
            this.traveList[this.ediIndex].tripList[count-1].province=this.arrivalProvinceEdi;
            this.traveList[this.ediIndex].tripList[count-1].city=this.arrivalCityEdi;
            // this.traveList[this.ediIndex].tripList[count-1].subtotal=0.00;
            // var newTripItem = NewTraveItem();
            // this.traveList[this.ediIndex].tripList.push({
            //     province: this.arrivalProvinceEdi,
            //     city: this.arrivalCityEdi,
            //     tripItem: newTripItem,
            //     subtotal: 0.00,
            // });


            this.traveList[this.ediIndex].tripTime=this.tripTime;
            this.traveList[this.ediIndex].total=0.00;
        //    重新计算费用合计
            this.computeTraveItem();
            

            // this.travePrice();







            // this.traveItem=[];
            // 更新完成
            this.ediIndex = '';
            this.tripTimeEdi = '';
            this.departureProvinceEdi = '';
            this.departureCityEdi = '';
            this.arrivalProvinceEdi = '';
            this.arrivalCityEdi = '';
            this.arrivalList = [];
            $('#route-edi').modal('hide')
        },
        addArrivalDom: function (option) {
            // dom = {
            //     "arrivalProvince": region[0].name,
            //     "arrivalCity": region[0].child[0].name,
            //     "arrivalCityOption": region[0].child,
            // }
            //1.没有目的地的时候

            let arrivalProvince = this.departureProvince;
            let arrivalCity = this.departureCity;
            let childIndexValue = this.departureProvince;
            if (option == "edi") {
                arrivalProvince = this.departureProvinceEdi;
                arrivalCity = this.departureCityEdi;
                childIndexValue = this.departureProvinceEdi;
            }

            if (this.arrivalList.length !== 0) {
                childIndexValue = this.arrivalList[this.arrivalList.length - 1].arrivalProvince
                arrivalProvince = childIndexValue;
                arrivalCity = this.arrivalList[this.arrivalList.length - 1].arrivalCity;
            }
            let index = 0;
            region.forEach((element, i) => {
                if (element.name === childIndexValue) {
                    index = i;
                    return;
                }
            });
            dom = {
                "arrivalProvince": arrivalProvince,
                "arrivalCity": arrivalCity,
                "arrivalCityOption": region[index].child,
            }
            this.arrivalList.push(dom);
        },
        delArrivalDom: function (index) {
            this.arrivalList.splice(index, 1)
        },
        changeArrivalLeve2: function (event, index) {
            this.regionOption.forEach(element => {
                if (element.name == event.target.value) {
                    this.arrivalList[index].arrivalCityOption = element.child;
                    this.arrivalList[index].arrivalCity = element.child[0].name;
                    return
                }
            });
        },
        computeTraveItem: function (event) {
            this.traveItem.forEach((element, index) => {
                let sum = 0;
                // 每一列求和
                this.traveList.forEach(el => {
                    el.tripList.forEach(elementlv2 => {
                        elementlv2.tripItem.forEach(elementlv3 => {
                            if (element.name == elementlv3.name) {
                                sum += Number(elementlv3.price);
                            }
                        });
                    });
                });
                this.traveItem[index].price = sum.toFixed(2);
            });
            // 每一个小目的地合计
            this.traveList.forEach((el, index) => {
                let total = 0;
                el.tripList.forEach((elementlv2, indexlv2) => {
                    let sum = 0;
                    elementlv2.tripItem.forEach(elementlv3 => {
                        sum += Number(elementlv3.price);
                    });
                    total += sum
                    this.traveList[index].tripList[indexlv2].subtotal = sum.toFixed(2);
                });
                this.traveList[index].total = total.toFixed(2);
            });
        },
        blurSetTraveDay:function (event){
            // 补齐日期
            // 交互事件没有合适的，日期控件会重复触发失去焦点
            console.log(event.target.value)
            console.log(this.tripTime)
        },
    },
    template:
        `
<div>
<div class="seTable">
<table class="table table-bordered table-condensed mb-0">
    <tbody>
        <tr>
            <th colspan="2" class="taC">差旅相关费用</th>
        </tr>
        <tr>
            <td colspan="2">
                <!--行程1-->
                <table v-for="(trave,index) in traveList" class="table table-bordered table-condensed table-hover"
                    style="margin-bottom: 5px;">
                    <tr>
                        <th colspan="3" class="taC">行程{{ index+1 }}#
                            {{ trave.tripTime }}
                            <div class="fR ">
                                <a href="javascript:void(0)" @click="deleteTrip(index)" class="text-danger" data-toggle="modal">删除</a>
                                <a href="#route-edi" @click="openEdiTrip(index)" data-toggle="modal">编辑</a>
                                </div>
                        </th>
                    </tr>

                    <tbody v-for="(trip,i) in trave.tripList"  >
                    <tr>
                        <th colspan="3" class="ta"><i class="contactsMark icon-">P</i> {{trip.province}}-{{trip.city}}</th>
                    </tr>
                    <tr v-for="item in trip.tripItem" v-if="i!==trave.tripList.length-1" >
                        <th width="90">{{item.name}}</th>
                        <td class="taR" width="100">
                            ￥<input type="number" v-model="item.price" @input="computeTraveItem"  pattern="[0-9]" step="0.01" min="0" class="span1">
                        </td>
                        <th>
                        <textarea required v-model="item.remark" rows="2" style="width: 99%; margin-bottom: 0" ></textarea>
                        </th>
                    </tr>
                    </tbody>

                </table>
            </td>
        </tr>
        <tr>
            <th colspan="2" class="taC"><a href="#route-add" @click="openTrip" data-toggle="modal"
                    class="button">添加新行程</a></th>
        </tr>
        <tr>
            <th colspan="2" class="taC">差旅相关费用合计</th>
        </tr>

        <tr v-for="item in traveItem" >
            <th>{{ item.name }}</th>
            <td class="taR" width="200">￥{{ item.price }}</td>
        </tr>
        
        <tr class="warning">
            <td class="taR"><b>差旅相关费用合计</b></td>
            <td class="colGreed taR"><b style="font-size: 24px">￥{{travePrice}}</b></td>
        </tr>
        <tr>
            <th colspan="2" class="taC">报销说明</th>
        </tr>
        <tr>
            <th colspan="2" v-for="item in traveExplain"  >
            <textarea required rows="6" style="width: 99%" v-model="item.traveExplain" placeholder="差旅相关费用额外说明"></textarea>
            </th>
        </tr>
    </tbody>
</table>
</div>
<div class="seCensor receipt-censor">
<div class="title">报销单填写说明</div>
<div class="detail">
    <p>1
        请按先后发生顺序填写报销明细，交通费（市内交通费及往来交通费）、邮寄费需在批注明注明费用明细（例：珠海-广州70元-佛山20元）；</p>
    <p>2 出差补助30元/天，不需提供发票，只需在报销单上填写清楚；</p>
    <p>
        3 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处。
    </p>
</div>
<div class="itinerary">
    <h2 class="itineraryTitle">总行程单</h2>
    <div class="itineraryCon">
        <ul v-for="(trave,index) in traveList" >
            <li class="sub-title">行程{{ index+1 }}# {{ trave.tripTime }}</li>
            <li v-for="(trip,i) in trave.tripList" >
                <div class="itineraryList">
                    <div class="addressName">
                        <i class="contactsMark icon-">P</i> <b>{{trip.city}}</b>
                    </div>
                    <div class="pointLine " v-if="i!==trave.tripList.length-1" >
                        <div class="timeList">
                            <div class="priceList">
                                <span class="priceTitle">小计</span> 
                                <span class="price">￥{{ trip.subtotal }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="sub-title">行程{{ index+1 }}# 合计：{{ trave.total }}</li>
        </ul>
    </div>
</div>
</div>


<!--弹出 编辑行程 -->
<div class="modal hide fade" id="route-edi">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑行程</h3>
            </div>
            <div class="modal-body saeaList">
                <table class="table table-bordered table-condensed">
                    <tr>
                        <th class="taC" colspan="2">行程</th>
                    </tr>
                    <tr>
                        <th>出发/结束日期</th>
                        <td><input class="datepicker-here span3" placeholder="按时间筛选" type="text" data-range="true"
                                data-multiple-dates-separator=" - " data-language="zh" @blur.prevent="changeCount" v-model="tripTimeEdi" >
                                &nbsp;&nbsp;旅程合计：<b class="colRed">{{ traveDay }}</b>天
                        </td>
                    </tr>
                    <tr>
                        <th><span>┌</span> 出发地</th>
                        <td>
                            <select v-model="departureProvinceEdi" @change="changeRegionLeve2($event,'departureCity')" >
                                    <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
                            </select>
                            <select v-model="departureCityEdi" @change="changeArrivalCity($event)">
                                <option v-for="option in regionLeve2OptionEdi">{{option.name}}</option>
                            </select>
                            <a href="javascript:void(0)" @click="addArrivalDom('edi')" >+添加目的地</a>
                        </td>
                    </tr>

                    
                    <tr v-for="(item,index) in arrivalList" >
                        <th><span class="">├</span> 目的地</th>
                        <td>
                            <select v-model="item.arrivalProvince" @change="changeArrivalLeve2($event,index)" >
                                <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
                            </select>
                            <select  v-model="item.arrivalCity">
                                <option v-for="option in item.arrivalCityOption">{{option.name}}</option>
                            </select> <a href="javascript:void(0)" @click="delArrivalDom(index)">-移除</a>
                        </td>
                    </tr>

                    
                    <tr>
                        <th><span class="">└</span> 结束</th>
                        <td>
                            <select v-model="arrivalProvinceEdi" @change="changeRegionLeve2($event,'arrivalCity')" >
                                <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
                            </select>
                            <select v-model="arrivalCityEdi">
                                <option v-for="option in arrivalLeve2OptionEdi">{{option.name}}</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0)" class="button" @click="ediTrip" >确认</a>
                <a href="javascript:void(0)" class="button btn-gray" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>

<!--弹出 添加行程 -->
<div class="modal hide fade" id="route-add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加行程</h3>
            </div>
            <div class="modal-body saeaList">
                <table class="table table-bordered table-condensed">
                    <tr>
                        <th class="taC" colspan="2">行程</th>
                    </tr>
                    <tr>
                        <th>出发/结束日期</th>
                        <td><input class="datepicker-here span3" placeholder="按时间筛选" type="text" data-range="true"
                                data-multiple-dates-separator=" - " data-language="zh" @blur.prevent="changeCount" v-model="tripTime" @blur="blurSetTraveDay" >
                            &nbsp;&nbsp;旅程合计：<b class="colRed">{{ traveDay }}</b>天        
                        </td>
                    </tr>
                    <tr>
                        <th><span>┌</span> 出发地</th>
                        <td>
                            <select v-model="departureProvince" @change="changeRegionLeve2($event,'departureCity')" >
                                    <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
                            </select>
                            <select v-model="departureCity" @change="changeArrivalCity($event)">
                                <option v-for="option in regionLeve2Option">{{option.name}}</option>
                            </select>
                            <a href="javascript:void(0)" @click="addArrivalDom" >+添加目的地</a>
                        </td>
                    </tr>

                    
                    <tr  v-for="(item,index) in arrivalList" >
                        <th><span class="">├</span> 目的地</th>
                        <td>
                            <select v-model="item.arrivalProvince" @change="changeArrivalLeve2($event,index)" >
                                <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
                            </select>
                            <select  v-model="item.arrivalCity">
                                <option v-for="option in item.arrivalCityOption">{{option.name}}</option>
                            </select> <a href="javascript:void(0)" @click="delArrivalDom(index)">-移除</a>
                        </td>
                    </tr>

                    
                    <tr>
                        <th><span class="">└</span> 结束</th>
                        <td>
                            <select v-model="arrivalProvince" @change="changeRegionLeve2($event,'arrivalCity')" >
                                <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
                            </select>
                            <select v-model="arrivalCity">
                                <option v-for="option in arrivalLeve2Option">{{option.name}}</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0)" class="button" @click="addTrip" >确认</a>
                <a href="javascript:void(0)" class="button btn-gray" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>
<!--结束 弹出 添加行程 -->

</div>
    `
})