receipt_trave_component.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737
  1. /*
  2. * @description: 费用-差旅组件
  3. * @Author: CP
  4. * @Date: 2020-11-16 14:52:08
  5. * @FilePath: \cld\global\vue\fee\receipt_trave_component.js
  6. */
  7. Vue.component("trave", {
  8. data: function () {
  9. return {
  10. // 行程时间
  11. traveDay: 0,
  12. tripTime: "",
  13. regionOption: region,
  14. // regionLeve2Option: region[0].child,
  15. // arrivalLeve2Option: region[0].child,
  16. //新增下拉地区
  17. regionLeve2Option: region[defaultTraveProvinceIndex].child,
  18. arrivalLeve2Option: region[defaultTraveProvinceIndex].child,
  19. //编辑下拉地区
  20. regionLeve2OptionEdi: [],
  21. arrivalLeve2OptionEdi: [],
  22. // 出发地 省 市
  23. // departureProvince: region[0].name,
  24. // departureCity: region[0].child[0].name,
  25. departureProvince: defaultTraveProvince,
  26. departureCity: region[defaultTraveProvinceIndex].child[0].name,
  27. // 结束地 省 市
  28. // arrivalProvince: region[0].name,
  29. // arrivalCity: region[0].child[0].name,
  30. arrivalProvince: defaultTraveProvince,
  31. arrivalCity: region[defaultTraveProvinceIndex].child[0].name,
  32. // 目的地数组
  33. arrivalList: [],
  34. tripTimeEdi: "",
  35. departureProvinceEdi: '',
  36. departureCityEdi: '',
  37. arrivalProvinceEdi: '',
  38. arrivalCityEdi: '',
  39. ediIndex: '',
  40. // arrivalListEdi: [],
  41. }
  42. },
  43. props: ['traveItem', 'alertDia', 'traveList', 'traveExplain'],
  44. computed: {
  45. travePrice: function () {
  46. return travePrice(this.traveList);
  47. }
  48. },
  49. methods: {
  50. //行程时间验证
  51. changeCount: function (event) {
  52. this.tripTime = event.target.value;
  53. this.tripTimeEdi = event.target.value;
  54. let dateArray = event.target.value.split(" - ");
  55. if (dateArray.length == 2) {
  56. let dateFormat = /^(\d{4})-(\d{2})-(\d{2})$/;
  57. if (!dateFormat.test(dateArray[0])) {
  58. this.alertDia("差旅行程时间填写有误");
  59. return
  60. }
  61. if (!dateFormat.test(dateArray[1])) {
  62. this.alertDia("差旅行程时间填写有误");
  63. return
  64. }
  65. }
  66. // if(ValidTraveDate(dateArray)){
  67. // this.alertDia("差旅行程时间填写有误");
  68. // return
  69. // }
  70. traveDay = (Math.abs(Date.parse(dateArray[0]) - Date.parse(dateArray[1]))) / (1000 * 60 * 60 * 24) + 1;
  71. if (!isNaN(traveDay)) {
  72. this.traveDay = traveDay;
  73. let alertDia = this.alertDia;
  74. // 验证时间
  75. $.ajax({
  76. type: "GET",
  77. url: "/json/trave/date/all",
  78. dataType: "json",
  79. processData: false,
  80. contentType: false,
  81. }).success(function (sortList) {
  82. 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());
  83. sortList.push(item);
  84. let TraveStatus = isTraveDate(sortList);
  85. if (TraveStatus == 2) {
  86. alertDia("差旅行程日期段-有重复");
  87. }
  88. }).fail(function (msg) {
  89. alertDia("历史差旅时间获取失败");
  90. });
  91. }
  92. // this.traveDay=new Date(dateArray[1]).getDate()-new Date(dateArray[0]).getDate()+1;
  93. },
  94. changeRegionLeve2: function (event, model) {
  95. this.regionOption.forEach(element => {
  96. if (element.name == event.target.value) {
  97. if (model == "departureCity") {
  98. this.regionLeve2Option = element.child;
  99. this.departureCity = element.child[0].name;
  100. this.departureCityEdi = element.child[0].name;
  101. this.arrivalProvinceEdi = element.name;
  102. this.arrivalProvince = element.name;
  103. this.arrivalLeve2Option = element.child;
  104. this.regionLeve2OptionEdi = element.child;
  105. // console.log(this.arrivalLeve2Option);
  106. this.arrivalCity = element.child[0].name;
  107. this.arrivalCityEdi = element.child[0].name;
  108. } else if (model == "arrivalCity") {
  109. this.arrivalLeve2Option = element.child;
  110. this.arrivalLeve2OptionEdi = element.child;
  111. this.arrivalCity = element.child[0].name;
  112. this.arrivalCityEdi = element.child[0].name;
  113. }
  114. return
  115. }
  116. });
  117. },
  118. changeArrivalCity: function (event) {
  119. this.arrivalCity = event.target.value
  120. this.arrivalCityEdi = event.target.value
  121. },
  122. // 行程单相关
  123. // 打开行程单
  124. openTrip: function () {
  125. this.arrivalList = [];
  126. this.tripTime = "";
  127. },
  128. deleteTrip(index) {
  129. this.traveList.splice(index, 1)
  130. },
  131. addTrip: function () {
  132. if (this.tripTime == "") {
  133. this.alertDia("请选择行程时间");
  134. return
  135. }
  136. // 构建行程信息
  137. tripList = [];
  138. // 出发地
  139. var newTripItem = NewTraveItem();
  140. tripList.push({
  141. province: this.departureProvince,
  142. city: this.departureCity,
  143. tripItem: newTripItem,
  144. subtotal: 0,
  145. });
  146. // 目的地
  147. this.arrivalList.forEach(element => {
  148. var newTripItem = NewTraveItem();
  149. tripList.push({
  150. province: element.arrivalProvince,
  151. city: element.arrivalCity,
  152. tripItem: newTripItem,
  153. subtotal: 0,
  154. });
  155. });
  156. // 结束地
  157. var newTripItem = NewTraveItem();
  158. tripList.push({
  159. province: this.arrivalProvince,
  160. city: this.arrivalCity,
  161. tripItem: newTripItem,
  162. subtotal: 0.00,
  163. });
  164. // 构建差旅信息
  165. trave = {
  166. tripTime: this.tripTime,
  167. tripList: tripList,
  168. total: 0.00,
  169. };
  170. this.traveList.push(trave);
  171. $('#route-add').modal('hide')
  172. },
  173. openEdiTrip(index) {
  174. this.ediIndex = index;
  175. let tripData = this.traveList[index];
  176. this.tripTimeEdi = tripData.tripTime;
  177. // 出发地
  178. this.departureProvinceEdi = tripData.tripList[0].province;
  179. this.departureCityEdi = tripData.tripList[0].city;
  180. this.regionOption.forEach(el => {
  181. if (el.name == this.departureProvinceEdi) {
  182. this.regionLeve2OptionEdi = el.child;
  183. return
  184. }
  185. });
  186. //this.regionLeve2Option= tripData.tripList;
  187. // 结束
  188. let endIndex = tripData.tripList.length - 1
  189. this.arrivalProvinceEdi = tripData.tripList[endIndex].province;
  190. this.arrivalCityEdi = tripData.tripList[endIndex].city;
  191. this.regionOption.forEach(el => {
  192. if (el.name == this.arrivalProvinceEdi) {
  193. this.arrivalLeve2OptionEdi = el.child;
  194. return
  195. }
  196. });
  197. //this.arrivalLeve2Option=tripData.tripList,
  198. // 目的地
  199. this.arrivalList = [];
  200. tripData.tripList.forEach((element, index) => {
  201. // 获得目的城市下拉菜单
  202. let arrivalCityOption = [];
  203. this.regionOption.forEach(el => {
  204. if (el.name == element.province) {
  205. arrivalCityOption = el.child;
  206. return
  207. }
  208. });
  209. if (index !== 0 && index !== endIndex) {
  210. this.arrivalList.push({
  211. "arrivalProvince": element.province,
  212. "arrivalCity": element.city,
  213. "arrivalCityOption": arrivalCityOption
  214. });
  215. }
  216. });
  217. },
  218. ediTrip() {
  219. if (this.tripTime == "") {
  220. this.alertDia("请选择行程时间");
  221. return
  222. }
  223. // // 构建行程信息
  224. // tripList = [];
  225. // // 出发地
  226. // var newTripItem = NewTraveItem();
  227. // tripList.push({
  228. // province: this.departureProvinceEdi,
  229. // city: this.departureCityEdi,
  230. // tripItem: newTripItem,
  231. // subtotal: 0,
  232. // });
  233. // // 目的地
  234. // this.arrivalList.forEach(element => {
  235. // var newTripItem = NewTraveItem();
  236. // tripList.push({
  237. // province: element.arrivalProvince,
  238. // city: element.arrivalCity,
  239. // tripItem: newTripItem,
  240. // subtotal: 0,
  241. // });
  242. // });
  243. // // 结束地
  244. // var newTripItem = NewTraveItem();
  245. // tripList.push({
  246. // province: this.arrivalProvinceEdi,
  247. // city: this.arrivalCityEdi,
  248. // tripItem: newTripItem,
  249. // subtotal: 0.00,
  250. // });
  251. // // 构建差旅信息
  252. // trave = {
  253. // tripTime: this.tripTime,
  254. // tripList: tripList,
  255. // total: 0.00,
  256. // };
  257. // this.traveList[this.ediIndex] = trave;
  258. // // 更新差旅信息
  259. this.traveList[this.ediIndex].tripList[0].province=this.departureProvinceEdi;
  260. this.traveList[this.ediIndex].tripList[0].city=this.departureCityEdi;
  261. // this.traveList[this.ediIndex].tripList[0].subtotal=0;
  262. // // 更新出发地
  263. // this.traveList[this.ediIndex].tripList[0].tripItem.forEach(element => {
  264. // element.price=0.00;
  265. // element.remark="";
  266. // });
  267. // 更新目的地
  268. let countOriginal=this.traveList[this.ediIndex].tripList.length-2;
  269. let countNow=this.arrivalList.length;
  270. if(countOriginal>countNow){
  271. let poor=countOriginal-countNow;
  272. this.traveList[this.ediIndex].tripList.splice(countNow,poor);
  273. }
  274. // 相等-更新省市,是否更新过
  275. if(countOriginal==countNow){
  276. let count=this.traveList[this.ediIndex].tripList.length-1;
  277. this.traveList[this.ediIndex].tripList.forEach((element,index) => {
  278. if(index>0&&index<count){
  279. element.province=this.arrivalList[index-1].arrivalProvince;
  280. element.city=this.arrivalList[index-1].arrivalCity;
  281. }
  282. });
  283. }
  284. if(countOriginal<countNow){
  285. // 更新原地区
  286. let count=this.traveList[this.ediIndex].tripList.length
  287. if(count>2){
  288. this.traveList[this.ediIndex].tripList.forEach((element,index) => {
  289. if(index>0&&index<count){
  290. element.province=this.arrivalList[index-1].arrivalProvince;
  291. element.city=this.arrivalList[index-1].arrivalCity;;
  292. }
  293. });
  294. }
  295. if(countOriginal==0){
  296. this.arrivalList.forEach(element => {
  297. var newTripItem = NewTraveItem();
  298. this.traveList[this.ediIndex].tripList.splice(1,0,{
  299. province: element.arrivalProvince,
  300. city: element.arrivalCity,
  301. tripItem: newTripItem,
  302. subtotal: 0,
  303. });
  304. });
  305. }else{
  306. let poor=countNow-countOriginal;
  307. for (let i = 0; i < poor; i++) {
  308. var newTripItem = NewTraveItem();
  309. this.traveList[this.ediIndex].tripList.splice(countOriginal+1,0,{
  310. province: this.arrivalList[poor+i].arrivalProvince,
  311. city: this.arrivalList[poor+i].arrivalCity,
  312. tripItem: newTripItem,
  313. subtotal: 0,
  314. });
  315. }
  316. }
  317. }
  318. // this.traveList[this.ediIndex].tripList.splice(1,countOriginal-2);
  319. // this.traveList[this.ediIndex].tripList.forEach((element,index) => {
  320. // if(index>0&&index<count){
  321. // delete this.traveList[this.ediIndex].tripList[index];
  322. // }
  323. // });
  324. // 目的地
  325. // this.arrivalList.forEach(element => {
  326. // var newTripItem = NewTraveItem();
  327. // this.traveList[this.ediIndex].tripList.splice(1,0,{
  328. // province: element.arrivalProvince,
  329. // city: element.arrivalCity,
  330. // tripItem: newTripItem,
  331. // subtotal: 0,
  332. // });
  333. // // this.traveList[this.ediIndex].tripList.push({
  334. // // province: element.arrivalProvince,
  335. // // city: element.arrivalCity,
  336. // // tripItem: newTripItem,
  337. // // subtotal: 0,
  338. // // });
  339. // });
  340. // 结束地
  341. let count=this.traveList[this.ediIndex].tripList.length;
  342. this.traveList[this.ediIndex].tripList[count-1].province=this.arrivalProvinceEdi;
  343. this.traveList[this.ediIndex].tripList[count-1].city=this.arrivalCityEdi;
  344. // this.traveList[this.ediIndex].tripList[count-1].subtotal=0.00;
  345. // var newTripItem = NewTraveItem();
  346. // this.traveList[this.ediIndex].tripList.push({
  347. // province: this.arrivalProvinceEdi,
  348. // city: this.arrivalCityEdi,
  349. // tripItem: newTripItem,
  350. // subtotal: 0.00,
  351. // });
  352. this.traveList[this.ediIndex].tripTime=this.tripTime;
  353. this.traveList[this.ediIndex].total=0.00;
  354. // 重新计算费用合计
  355. this.computeTraveItem();
  356. // this.travePrice();
  357. // this.traveItem=[];
  358. // 更新完成
  359. this.ediIndex = '';
  360. this.tripTimeEdi = '';
  361. this.departureProvinceEdi = '';
  362. this.departureCityEdi = '';
  363. this.arrivalProvinceEdi = '';
  364. this.arrivalCityEdi = '';
  365. this.arrivalList = [];
  366. $('#route-edi').modal('hide')
  367. },
  368. addArrivalDom: function (option) {
  369. // dom = {
  370. // "arrivalProvince": region[0].name,
  371. // "arrivalCity": region[0].child[0].name,
  372. // "arrivalCityOption": region[0].child,
  373. // }
  374. //1.没有目的地的时候
  375. let arrivalProvince = this.departureProvince;
  376. let arrivalCity = this.departureCity;
  377. let childIndexValue = this.departureProvince;
  378. if (option == "edi") {
  379. arrivalProvince = this.departureProvinceEdi;
  380. arrivalCity = this.departureCityEdi;
  381. childIndexValue = this.departureProvinceEdi;
  382. }
  383. if (this.arrivalList.length !== 0) {
  384. childIndexValue = this.arrivalList[this.arrivalList.length - 1].arrivalProvince
  385. arrivalProvince = childIndexValue;
  386. arrivalCity = this.arrivalList[this.arrivalList.length - 1].arrivalCity;
  387. }
  388. let index = 0;
  389. region.forEach((element, i) => {
  390. if (element.name === childIndexValue) {
  391. index = i;
  392. return;
  393. }
  394. });
  395. dom = {
  396. "arrivalProvince": arrivalProvince,
  397. "arrivalCity": arrivalCity,
  398. "arrivalCityOption": region[index].child,
  399. }
  400. this.arrivalList.push(dom);
  401. },
  402. delArrivalDom: function (index) {
  403. this.arrivalList.splice(index, 1)
  404. },
  405. changeArrivalLeve2: function (event, index) {
  406. this.regionOption.forEach(element => {
  407. if (element.name == event.target.value) {
  408. this.arrivalList[index].arrivalCityOption = element.child;
  409. this.arrivalList[index].arrivalCity = element.child[0].name;
  410. return
  411. }
  412. });
  413. },
  414. computeTraveItem: function (event) {
  415. this.traveItem.forEach((element, index) => {
  416. let sum = 0;
  417. // 每一列求和
  418. this.traveList.forEach(el => {
  419. el.tripList.forEach(elementlv2 => {
  420. elementlv2.tripItem.forEach(elementlv3 => {
  421. if (element.name == elementlv3.name) {
  422. sum += Number(elementlv3.price);
  423. }
  424. });
  425. });
  426. });
  427. this.traveItem[index].price = sum.toFixed(2);
  428. });
  429. // 每一个小目的地合计
  430. this.traveList.forEach((el, index) => {
  431. let total = 0;
  432. el.tripList.forEach((elementlv2, indexlv2) => {
  433. let sum = 0;
  434. elementlv2.tripItem.forEach(elementlv3 => {
  435. sum += Number(elementlv3.price);
  436. });
  437. total += sum
  438. this.traveList[index].tripList[indexlv2].subtotal = sum.toFixed(2);
  439. });
  440. this.traveList[index].total = total.toFixed(2);
  441. });
  442. },
  443. blurSetTraveDay:function (event){
  444. // 补齐日期
  445. // 交互事件没有合适的,日期控件会重复触发失去焦点
  446. console.log(event.target.value)
  447. console.log(this.tripTime)
  448. },
  449. },
  450. template:
  451. `
  452. <div>
  453. <div class="seTable">
  454. <table class="table table-bordered table-condensed mb-0">
  455. <tbody>
  456. <tr>
  457. <th colspan="2" class="taC">差旅相关费用</th>
  458. </tr>
  459. <tr>
  460. <td colspan="2">
  461. <!--行程1-->
  462. <table v-for="(trave,index) in traveList" class="table table-bordered table-condensed table-hover"
  463. style="margin-bottom: 5px;">
  464. <tr>
  465. <th colspan="3" class="taC">行程{{ index+1 }}#
  466. {{ trave.tripTime }}
  467. <div class="fR ">
  468. <a href="javascript:void(0)" @click="deleteTrip(index)" class="text-danger" data-toggle="modal">删除</a>
  469. <a href="#route-edi" @click="openEdiTrip(index)" data-toggle="modal">编辑</a>
  470. </div>
  471. </th>
  472. </tr>
  473. <tbody v-for="(trip,i) in trave.tripList" >
  474. <tr>
  475. <th colspan="3" class="ta"><i class="contactsMark icon-">P</i> {{trip.province}}-{{trip.city}}</th>
  476. </tr>
  477. <tr v-for="item in trip.tripItem" v-if="i!==trave.tripList.length-1" >
  478. <th width="90">{{item.name}}</th>
  479. <td class="taR" width="100">
  480. ¥<input type="number" v-model="item.price" @input="computeTraveItem" pattern="[0-9]" step="0.01" min="0" class="span1">
  481. </td>
  482. <th>
  483. <textarea required v-model="item.remark" rows="2" style="width: 99%; margin-bottom: 0" ></textarea>
  484. </th>
  485. </tr>
  486. </tbody>
  487. </table>
  488. </td>
  489. </tr>
  490. <tr>
  491. <th colspan="2" class="taC"><a href="#route-add" @click="openTrip" data-toggle="modal"
  492. class="button">添加新行程</a></th>
  493. </tr>
  494. <tr>
  495. <th colspan="2" class="taC">差旅相关费用合计</th>
  496. </tr>
  497. <tr v-for="item in traveItem" >
  498. <th>{{ item.name }}</th>
  499. <td class="taR" width="200">¥{{ item.price }}</td>
  500. </tr>
  501. <tr class="warning">
  502. <td class="taR"><b>差旅相关费用合计</b></td>
  503. <td class="colGreed taR"><b style="font-size: 24px">¥{{travePrice}}</b></td>
  504. </tr>
  505. <tr>
  506. <th colspan="2" class="taC">报销说明</th>
  507. </tr>
  508. <tr>
  509. <th colspan="2" v-for="item in traveExplain" >
  510. <textarea required rows="6" style="width: 99%" v-model="item.traveExplain" placeholder="差旅相关费用额外说明"></textarea>
  511. </th>
  512. </tr>
  513. </tbody>
  514. </table>
  515. </div>
  516. <div class="seCensor receipt-censor">
  517. <div class="title">报销单填写说明</div>
  518. <div class="detail">
  519. <p>1
  520. 请按先后发生顺序填写报销明细,交通费(市内交通费及往来交通费)、邮寄费需在批注明注明费用明细(例:珠海-广州70元-佛山20元);</p>
  521. <p>2 出差补助30元/天,不需提供发票,只需在报销单上填写清楚;</p>
  522. <p>
  523. 3 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处。
  524. </p>
  525. </div>
  526. <div class="itinerary">
  527. <h2 class="itineraryTitle">总行程单</h2>
  528. <div class="itineraryCon">
  529. <ul v-for="(trave,index) in traveList" >
  530. <li class="sub-title">行程{{ index+1 }}# {{ trave.tripTime }}</li>
  531. <li v-for="(trip,i) in trave.tripList" >
  532. <div class="itineraryList">
  533. <div class="addressName">
  534. <i class="contactsMark icon-">P</i> <b>{{trip.city}}</b>
  535. </div>
  536. <div class="pointLine " v-if="i!==trave.tripList.length-1" >
  537. <div class="timeList">
  538. <div class="priceList">
  539. <span class="priceTitle">小计</span>
  540. <span class="price">¥{{ trip.subtotal }}</span>
  541. </div>
  542. </div>
  543. </div>
  544. </div>
  545. </li>
  546. <li class="sub-title">行程{{ index+1 }}# 合计:{{ trave.total }}</li>
  547. </ul>
  548. </div>
  549. </div>
  550. </div>
  551. <!--弹出 编辑行程 -->
  552. <div class="modal hide fade" id="route-edi">
  553. <div class="modal-dialog">
  554. <div class="modal-content">
  555. <div class="modal-header">
  556. <h3>编辑行程</h3>
  557. </div>
  558. <div class="modal-body saeaList">
  559. <table class="table table-bordered table-condensed">
  560. <tr>
  561. <th class="taC" colspan="2">行程</th>
  562. </tr>
  563. <tr>
  564. <th>出发/结束日期</th>
  565. <td><input class="datepicker-here span3" placeholder="按时间筛选" type="text" data-range="true"
  566. data-multiple-dates-separator=" - " data-language="zh" @blur.prevent="changeCount" v-model="tripTimeEdi" >
  567. &nbsp;&nbsp;旅程合计:<b class="colRed">{{ traveDay }}</b>天
  568. </td>
  569. </tr>
  570. <tr>
  571. <th><span>┌</span> 出发地</th>
  572. <td>
  573. <select v-model="departureProvinceEdi" @change="changeRegionLeve2($event,'departureCity')" >
  574. <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
  575. </select>
  576. <select v-model="departureCityEdi" @change="changeArrivalCity($event)">
  577. <option v-for="option in regionLeve2OptionEdi">{{option.name}}</option>
  578. </select>
  579. <a href="javascript:void(0)" @click="addArrivalDom('edi')" >+添加目的地</a>
  580. </td>
  581. </tr>
  582. <tr v-for="(item,index) in arrivalList" >
  583. <th><span class="">├</span> 目的地</th>
  584. <td>
  585. <select v-model="item.arrivalProvince" @change="changeArrivalLeve2($event,index)" >
  586. <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
  587. </select>
  588. <select v-model="item.arrivalCity">
  589. <option v-for="option in item.arrivalCityOption">{{option.name}}</option>
  590. </select> <a href="javascript:void(0)" @click="delArrivalDom(index)">-移除</a>
  591. </td>
  592. </tr>
  593. <tr>
  594. <th><span class="">└</span> 结束</th>
  595. <td>
  596. <select v-model="arrivalProvinceEdi" @change="changeRegionLeve2($event,'arrivalCity')" >
  597. <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
  598. </select>
  599. <select v-model="arrivalCityEdi">
  600. <option v-for="option in arrivalLeve2OptionEdi">{{option.name}}</option>
  601. </select>
  602. </td>
  603. </tr>
  604. </table>
  605. </div>
  606. <div class="modal-footer">
  607. <a href="javascript:void(0)" class="button" @click="ediTrip" >确认</a>
  608. <a href="javascript:void(0)" class="button btn-gray" data-dismiss="modal" aria-hidden="true">关闭</a>
  609. </div>
  610. </div>
  611. </div>
  612. </div>
  613. <!--弹出 添加行程 -->
  614. <div class="modal hide fade" id="route-add">
  615. <div class="modal-dialog">
  616. <div class="modal-content">
  617. <div class="modal-header">
  618. <h3>添加行程</h3>
  619. </div>
  620. <div class="modal-body saeaList">
  621. <table class="table table-bordered table-condensed">
  622. <tr>
  623. <th class="taC" colspan="2">行程</th>
  624. </tr>
  625. <tr>
  626. <th>出发/结束日期</th>
  627. <td><input class="datepicker-here span3" placeholder="按时间筛选" type="text" data-range="true"
  628. data-multiple-dates-separator=" - " data-language="zh" @blur.prevent="changeCount" v-model="tripTime" @blur="blurSetTraveDay" >
  629. &nbsp;&nbsp;旅程合计:<b class="colRed">{{ traveDay }}</b>天
  630. </td>
  631. </tr>
  632. <tr>
  633. <th><span>┌</span> 出发地</th>
  634. <td>
  635. <select v-model="departureProvince" @change="changeRegionLeve2($event,'departureCity')" >
  636. <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
  637. </select>
  638. <select v-model="departureCity" @change="changeArrivalCity($event)">
  639. <option v-for="option in regionLeve2Option">{{option.name}}</option>
  640. </select>
  641. <a href="javascript:void(0)" @click="addArrivalDom" >+添加目的地</a>
  642. </td>
  643. </tr>
  644. <tr v-for="(item,index) in arrivalList" >
  645. <th><span class="">├</span> 目的地</th>
  646. <td>
  647. <select v-model="item.arrivalProvince" @change="changeArrivalLeve2($event,index)" >
  648. <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
  649. </select>
  650. <select v-model="item.arrivalCity">
  651. <option v-for="option in item.arrivalCityOption">{{option.name}}</option>
  652. </select> <a href="javascript:void(0)" @click="delArrivalDom(index)">-移除</a>
  653. </td>
  654. </tr>
  655. <tr>
  656. <th><span class="">└</span> 结束</th>
  657. <td>
  658. <select v-model="arrivalProvince" @change="changeRegionLeve2($event,'arrivalCity')" >
  659. <option v-for="option in regionOption" :value="option.name" >{{option.name}}</option>
  660. </select>
  661. <select v-model="arrivalCity">
  662. <option v-for="option in arrivalLeve2Option">{{option.name}}</option>
  663. </select>
  664. </td>
  665. </tr>
  666. </table>
  667. </div>
  668. <div class="modal-footer">
  669. <a href="javascript:void(0)" class="button" @click="addTrip" >确认</a>
  670. <a href="javascript:void(0)" class="button btn-gray" data-dismiss="modal" aria-hidden="true">关闭</a>
  671. </div>
  672. </div>
  673. </div>
  674. </div>
  675. <!--结束 弹出 添加行程 -->
  676. </div>
  677. `
  678. })