/* * @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, // 出发地 省 市 // 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) { this.alertDia("差旅行程时间填写有误"); return } let dateFormat = /^(\d{4})-(\d{2})-(\d{2})$/; if (!dateFormat.test(dateArray[0])) { this.alertDia("差旅行程时间填写有误"); return } if (!dateFormat.test(dateArray[1])) { 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("差旅行程日期段-有重复"); } // console.log(sortList); // sortList.forEach((element,index) => { // const start = element[0]; // const end = element[1]; // itemIndex=index+1; // if(sortList.length===itemIndex){ // return // } // const isRangeStartAndEnd = sortList.some(item => { // return (sortList[itemIndex][0]<=start&&sortList[itemIndex][1]>=start)||(sortList[itemIndex][0]<=end&&sortList[itemIndex][1]>=end) // }) // if(isRangeStartAndEnd) { // // 有重复区间 // alertDia("历史差旅行程时间段-有重复"); // flag = true; // return ; // } // }); }).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; // 结束 let endIndex = tripData.tripList.length - 1 this.arrivalProvinceEdi = tripData.tripList[endIndex].province; this.arrivalCityEdi = tripData.tripList[endIndex].city; // 目的地 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.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); }); }, }, template: `
差旅相关费用
行程{{ index+1 }}# {{ trave.tripTime }}
删除 编辑
P {{trip.province}}-{{trip.city}}
{{item.name}} ￥
添加新行程
差旅相关费用合计
{{ item.name }} ￥{{ item.price }}
差旅相关费用合计 ￥{{travePrice}}
报销说明
报销单填写说明

1 请按先后发生顺序填写报销明细，交通费（市内交通费及往来交通费）、邮寄费需在批注明注明费用明细（例：珠海-广州70元-佛山20元）；

2 出差补助30元/天，不需提供发票，只需在报销单上填写清楚；

3 产生费用所在办事处 默认使用您所在的第一个办事处。

总行程单

  • 行程{{ index+1 }}# {{ trave.tripTime }}
  • P {{trip.city}}
    小计 ￥{{ trip.subtotal }}
  • 行程{{ index+1 }}# 合计：{{ trave.total }}
` })