Cost.vue 44 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082
  1. <template>
  2. <div class="cost-all">
  3. <div class="cost-box">
  4. <div class="cost-haed">
  5. <div class="ser-btn">
  6. <div class="ser-btn-li">
  7. <el-select v-model="value" filterable placeholder="请选择">
  8. <el-option
  9. v-for="item in options"
  10. :key="item.value"
  11. :label="item.label"
  12. :value="item.value">
  13. </el-option>
  14. </el-select>
  15. </div>
  16. <div class="ser-btn-li">
  17. <el-button type="primary">导入收款账单</el-button>
  18. <el-button type="primary">生成收款账单</el-button>
  19. <el-button type="primary">导出客户报表</el-button>
  20. <el-button type="primary">导出成本</el-button>
  21. <el-button type="primary">保存设置</el-button>
  22. <el-button type="primary">一键复制</el-button>
  23. <el-button type="primary">成本通知</el-button>
  24. </div>
  25. </div>
  26. <div class="cost-input">
  27. <el-form :inline="true" :model="formInline" class="demo-form-inline">
  28. <el-form-item label="税率:">
  29. <el-input v-model="formInline.user" placeholder="税率"></el-input>
  30. </el-form-item>
  31. <el-form-item label="货币:">
  32. <el-select v-model="currencyValueL" placeholder="请选择">
  33. <el-option
  34. v-for="item in currencyOption"
  35. :key="item.value"
  36. :label="item.label"
  37. :value="item.value">
  38. </el-option>
  39. </el-select>
  40. </el-form-item>
  41. <el-form-item label="汇率:">
  42. <el-input v-model="formInline.user" placeholder="汇率"></el-input>
  43. </el-form-item>
  44. <div>
  45. <el-form-item label="TBR:">
  46. <el-input v-model="formInline.user" placeholder="TBR"><i slot="suffix" style="font-style:normal;margin-right: 10px;">间</i></el-input>
  47. </el-form-item>
  48. <el-form-item label="SGR:">
  49. <el-input v-model="formInline.user" placeholder="SGR"><i slot="suffix" style="font-style:normal;margin-right: 10px;">间</i></el-input>
  50. </el-form-item>
  51. <el-form-item label="JS/ES:">
  52. <el-input v-model="formInline.user" placeholder="JS/ES"><i slot="suffix" style="font-style:normal;margin-right: 10px;">间</i></el-input>
  53. </el-form-item>
  54. <el-form-item label="SUITE:">
  55. <el-input v-model="formInline.user" placeholder="SUITE"><i slot="suffix" style="font-style:normal;margin-right: 10px;">间</i></el-input>
  56. </el-form-item>
  57. </div>
  58. </el-form>
  59. </div>
  60. <div class="cost-info">
  61. <div class="cost-info-li">
  62. <label>团 号:</label>
  63. <span>9XGYL</span>
  64. </div>
  65. <div class="cost-info-li">
  66. <label>客 户:</label>
  67. <span>小熟悉熟悉</span>
  68. </div>
  69. <div class="cost-info-li">
  70. <label>出访国家:</label>
  71. <span>新加坡</span>
  72. </div>
  73. <div class="cost-info-li">
  74. <label>起止日期:</label>
  75. <span>2023-05-18 ~ 2023-05-27</span>
  76. </div>
  77. <div class="cost-info-li">
  78. <label>天数/人数:</label>
  79. <span>10天/6人</span>
  80. </div>
  81. </div>
  82. </div>
  83. <div style="color: #606266;font-size: 15px;font-weight: 600;">请选择要显示的项:</div>
  84. <el-checkbox-group class="form-ss" v-model="checkList">
  85. <el-checkbox v-for="(item,index) in checkOptions" :key="index" :title="item.tips" :label="item.label"></el-checkbox>
  86. </el-checkbox-group>
  87. <el-table
  88. :summary-method="getSummaries"
  89. show-summary
  90. :data="tableData"
  91. :border="true"
  92. size="small"
  93. row-class-name="row"
  94. cell-class-name="column"
  95. :highlight-current-row="true"
  96. fit
  97. >
  98. <template v-for="(item, index) in tableLabel" >
  99. <el-table-column
  100. :key="index"
  101. :prop="item.prop"
  102. :width="item.width"
  103. :label="item.label"
  104. v-if="checkList.includes(item.label)">
  105. <!-- eslint-disable-next-line -->
  106. <template slot="header" slot-scope="scope">
  107. <el-tooltip effect="dark" :content="item.describe" placement="top">
  108. <span class="rapAddress">{{item.label}}</span>
  109. </el-tooltip>
  110. </template>
  111. <template slot-scope="scope">
  112. <div v-if="item.prop === 'sales'">
  113. <el-input
  114. :ref="'el-input-' + index"
  115. v-model="scope.row[item.prop]"
  116. show-word-limit/>
  117. </div>
  118. <div v-else-if="item.prop === 'id'">
  119. <el-input
  120. :ref="'el-input-' + index"
  121. v-model="scope.row[item.prop]"
  122. type="number"
  123. min="0"/>
  124. </div>
  125. <div v-else-if="item.prop === 'sale'">
  126. <el-row class="figures-btn">
  127. <el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">司兼导</el-button>
  128. <el-button size="mini" type="primary">导 游</el-button>
  129. <el-button size="mini" type="primary">车数据</el-button>
  130. <el-button size="mini" type="primary">景 点</el-button>
  131. </el-row>
  132. </div>
  133. <span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] }}</span>
  134. </template>
  135. </el-table-column>
  136. </template>
  137. <el-table-column
  138. label="操作">
  139. <!-- eslint-disable-next-line -->
  140. <template slot-scope="scope">
  141. <el-button size="mini" @click="handleDelete(scope.$index, scope.row,tableData)" type="danger"><i class="el-icon-delete"></i></el-button>
  142. </template>
  143. </el-table-column>
  144. </el-table>
  145. <div style="text-align: center;padding: 10px 0;"><el-button @click="addStrip" type="primary">添 加 <i class="el-icon-plus"></i></el-button></div>
  146. <div class="sheet-box">
  147. <div class="sheet-li">
  148. <div style="color: #606266;font-size: 15px;font-weight: 600;">请选择要显示的项:</div>
  149. <el-checkbox-group v-model="sheetoneList">
  150. <el-checkbox v-for="(item,index) in sheetoneOptions" :key="index" :label="item"></el-checkbox>
  151. </el-checkbox-group>
  152. <div v-for="(sheetitem,index) in sheetDatal" :key="index">
  153. <div class="biaoge" v-if="sheetoneList.includes(sheetitem.label)">
  154. <el-table
  155. :data="sheetitem.sheetInfo"
  156. border
  157. style="width: 100%">
  158. <el-table-column
  159. v-for="(itemsheetone,index) in sheetitem.childList"
  160. :key="index"
  161. :prop="itemsheetone.prop"
  162. :label="itemsheetone.childLabel">
  163. <template slot-scope="scope">
  164. <div v-if="itemsheetone.prop === 'costPerson'">
  165. <el-input
  166. :ref="'el-input-' + index"
  167. v-model="scope.row[itemsheetone.prop]"
  168. show-word-limit/>
  169. </div>
  170. <div v-else-if="itemsheetone.prop === 'toll'">
  171. <el-input
  172. :ref="'el-input-' + index"
  173. v-model="scope.row[itemsheetone.prop]"
  174. show-word-limit/>
  175. </div>
  176. <div v-else-if="itemsheetone.prop === 'coefficient'">
  177. <el-input
  178. :ref="'el-input-' + index"
  179. v-model="scope.row[itemsheetone.prop]"
  180. show-word-limit/>
  181. </div>
  182. <span v-else :title="scope.row[itemsheetone.prop]">{{ scope.row[itemsheetone.prop] }}</span>
  183. </template>
  184. </el-table-column>
  185. </el-table>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="cabin-box">
  191. <div class="cabin-li">
  192. <div style="color: #606266;font-size: 15px;font-weight: 600;">请选择要显示的项:</div>
  193. <el-checkbox-group v-model="cabinoneList">
  194. <el-checkbox v-for="(item,index) in cabinoneOptions" :key="index" :label="item"></el-checkbox>
  195. </el-checkbox-group>
  196. <div v-for="(cabinitem,index) in cabinDatal" :key="index">
  197. <div class="biaoge" v-if="cabinoneList.includes(cabinitem.label)">
  198. <div style=" color: rgb(96, 98, 102);font-size: 15px;font-weight: 600;">{{cabinitem.label}}</div>
  199. <el-table
  200. :data="cabinitem.sheetInfo"
  201. border
  202. style="width: 100%">
  203. <el-table-column
  204. v-for="(itemcabinone,index) in cabinitem.childList"
  205. :key="index"
  206. :prop="itemcabinone.prop"
  207. :label="itemcabinone.childLabel">
  208. <template slot-scope="scope">
  209. <div v-if="itemcabinone.prop === 'toll'">
  210. <el-input
  211. :ref="'el-input-' + index"
  212. v-model="scope.row[itemcabinone.prop]"
  213. show-word-limit/>
  214. </div>
  215. <span v-else :title="scope.row[itemcabinone.prop]">{{ scope.row[itemcabinone.prop] }}</span>
  216. </template>
  217. </el-table-column>
  218. </el-table>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
  225. <el-dialog
  226. width="30%"
  227. title="内层 Dialog"
  228. :visible.sync="innerVisible"
  229. append-to-body>
  230. </el-dialog>
  231. <div slot="footer" class="dialog-footer">
  232. <el-button @click="outerVisible = false">取 消</el-button>
  233. <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
  234. </div>
  235. </el-dialog>
  236. </div>
  237. </template>
  238. <script>
  239. export default {
  240. data () {
  241. return {
  242. outerVisible: false,
  243. innerVisible: false,
  244. checkList: ['DAY','ITIN','VA','VF','VRD','T/G S'],
  245. checkOptions:[
  246. {label:'DAY',tips:'时间(DATE)'},
  247. {label:'DATE',tips:'行程描述(ITINERARY)'},
  248. {label:'ITIN',tips:'行程描述(ITINERARY)'},
  249. {label:'VA',tips:'车服务区域(Vehicle Area)'},
  250. {label:'VT',tips:'车型(VEHICLE TYPE)'},
  251. {label:'VF',tips:'车费用(VEHICLE FEES)'},
  252. {label:'VN',tips:'车数量(VEHICLE Number)'},
  253. {label:'VRD',tips:'用车时间(VEHICLE RENTAL DURATION)'},
  254. {label:'T/G S',tips:'导游工资(TOUR GUIDE SALARY)'},
  255. {label:'T/G N',tips:'导游数量(TOUR GUIDE Number)'},
  256. {label:'T/G WH',tips:'导游工作时间(导游工作时间)'},
  257. {label:'T/G OF',tips:'导游超时费用(TOUR GUIDE OVERTIME FEES)'},
  258. {label:'T/G M',tips:'导游餐补(TOUR GUIDE MEALS)'},
  259. {label:'T/G A',tips:'导游房补(TOUR GUIDE ACCOMMODATION)'},
  260. {label:'T/G TF',tips:'导游交通费(TOUR GUIDE TRANSPORATION FEES)'},
  261. {label:'T/G EF',tips:'导游景点费(TOUR GUIDE ENTRANCE FEES)'},
  262. {label:'C/F M',tips:'司机餐补(CHAUFFEUR MEALS)'},
  263. {label:'C/F OF',tips:'司机超时费用(CHAUFFEUR OVERTIME FEES)'},
  264. {label:'B',tips:'早餐(BREAKFAST) #个人成本'},
  265. {label:'L',tips:'午餐(LUNCH) #个人成本'},
  266. {label:'D',tips:'晚餐(DINNER) #个人成本'},
  267. {label:'TBR',tips:'双人间(TWIN BED ROOM) #个人成本'},
  268. {label:'SGR',tips:'单间(SINGLE ROOM) #个人成本'},
  269. {label:'JS/ES',tips:'小套房/豪华套房(JUNIOR SUITE/EXECUTIVE SUITE) #个人成本'},
  270. {label:'SUITE',tips:'套房(SUITE) #个人成本'},
  271. {label:'ACCO N',tips:'住宿地名称(ACCOMMODATION NAME)'},
  272. {label:'T/V',tips:'公务活动费用(T/V)'},
  273. {label:'1/L',tips:'公务活动费用(1/L)'},
  274. {label:'I/F',tips:'公务翻译费用(INTERPRETER FEES)'},
  275. {label:'EF',tips:'景点门票(ENTRANCE FEE) #个人成本'},
  276. {label:'B/R/F',tips:'饮料零食水果(BEVERAGE/RRESHMENT/FRUIT)'},
  277. {label:'TE',tips:'出行物资(TRAVELLLING ESSENTIALS) #个人成本'},
  278. {label:'T/G T',tips:'导游小费(T/G TIPS) #个人成本'},
  279. {label:'DRV T',tips:'司机小费(DRIVER TIPS #个人成本)'},
  280. {label:'P/C',tips:'零用金(PETTY CASH) #个人成本'},
  281. {label:'T/L F',tips:'领队费(TOUR LEADER FEES)'},
  282. {label:'E/C T',tips:'会务费(EXPO/CONFERENCE TICKET)'}
  283. ],
  284. tableLabel: [
  285. {label: 'DAY', width: '90', prop: 'id',describe:'时间(DATE)'},
  286. {label: 'DATE', width: '', prop: 'date',describe:'行程描述(ITINERARY)'},
  287. {label: 'ITIN', width: '', prop: 'sales',describe:'行程描述(ITINERARY)'},
  288. {label: 'VA', width: '', prop: 'sale',describe:'车服务区域(Vehicle Area)'},
  289. {label: 'VT', width: '', prop: 'const',describe:'车型(VEHICLE TYPE)'},
  290. {label: 'VF', width: '', prop: 'profit',describe:'车费用(VEHICLE FEES)'},
  291. {label: 'VN', total: '', prop: 'profit',describe:'车数量(VEHICLE Number)'},
  292. {label: 'VRD', width: '', prop: 'profit',describe:'用车时间(VEHICLE RENTAL DURATION)'},
  293. {label: 'T/G S', width: '', prop: 'profit',describe:'导游工资(TOUR GUIDE SALARY)'},
  294. {label: 'T/G N', width: '', prop: 'profit',describe:'导游数量(TOUR GUIDE Number'},
  295. {label: 'T/G WH', width: '', prop: 'profit',describe:'导游工作时间(导游工作时间)'},
  296. {label: 'T/G OF', width: '', prop: 'profit',describe:'导游超时费用(TOUR GUIDE OVERTIME FEES)'},
  297. {label: 'T/G M', width: '', prop: 'profit',describe:'导游餐补(TOUR GUIDE MEALS)'},
  298. {label: 'T/G A', width: '', prop: 'profit',describe:'导游房补(TOUR GUIDE ACCOMMODATION)'},
  299. {label: 'T/G TF', width: '', prop: 'profit',describe:'导游交通费(TOUR GUIDE TRANSPORATION FEES)'},
  300. {label: 'T/G EF', width: '', prop: 'profit',describe:'导游景点费(TOUR GUIDE ENTRANCE FEES)'},
  301. {label: 'C/F M', width: '', prop: 'profit',describe:'司机餐补(CHAUFFEUR MEALS)'},
  302. {label: 'C/F OF', width: '', prop: 'profit',describe:'司机超时费用(CHAUFFEUR OVERTIME FEES)'},
  303. {label: 'B', width: '', prop: 'profit',describe:'早餐(BREAKFAST) #个人成本'},
  304. {label: 'L', width: '', prop: 'profit',describe:'午餐(LUNCH) #个人成本'},
  305. {label: 'D', width: '', prop: 'profit',describe:'晚餐(DINNER) #个人成本'},
  306. {label: 'TBR', width: '', prop: 'profit',describe:'双人间(TWIN BED ROOM) #个人成本'},
  307. {label: 'SGR', width: '', prop: 'profit',describe:'单间(SINGLE ROOM) #个人成本'},
  308. {label: 'JS/ES', width: '', prop: 'profit',describe:'小套房/豪华套房(JUNIOR SUITE/EXECUTIVE SUITE) #个人成本'},
  309. {label: 'SUITE', width: '', prop: 'profit',describe:'套房(SUITE) #个人成本'},
  310. {label: 'ACCO N', width: '', prop: 'profit',describe:'住宿地名称(ACCOMMODATION NAME)'},
  311. {label: 'T/V', width: '', prop: 'profit',describe:'公务活动费用(T/V)'},
  312. {label: '1/L', width: '', prop: 'profit',describe:'公务活动费用(1/L)'},
  313. {label: 'I/F', width: '', prop: 'profit',describe:'公务翻译费用(INTERPRETER FEES)'},
  314. {label: 'EF', width: '', prop: 'profit',describe:'景点门票(ENTRANCE FEE) #个人成本'},
  315. {label: 'B/R/F', width: '', prop: 'profit',describe:'饮料零食水果(BEVERAGE/RRESHMENT/FRUIT)'},
  316. {label: 'TE', width: '', prop: 'profit',describe:'出行物资(TRAVELLLING ESSENTIALS) #个人成本'},
  317. {label: 'T/G T', width: '', prop: 'profit',describe:'导游小费(T/G TIPS) #个人成本'},
  318. {label: 'DRV T', width: '', prop: 'profit',describe:'司机小费(DRIVER TIPS #个人成本)'},
  319. {label: 'P/C', width: '', prop: 'profit',describe:'零用金(PETTY CASH) #个人成本'},
  320. {label: 'T/L F', width: '', prop: 'profit',describe:'领队费(TOUR LEADER FEES)'},
  321. {label: 'E/C T', width: '', prop: 'profit',describe:'会务费(EXPO/CONFERENCE TICKET)'}
  322. ],
  323. statisticsArr: [
  324. {label: 'DAY', total: '', individual: ''},
  325. {label: 'DATE', total: '', individual: ''},
  326. {label: 'ITIN', total: '', individual: ''},
  327. {label: 'VA', total: '', individual: ''},
  328. {label: 'VT', total: '', individual: ''},
  329. {label: 'VF', total: '车费', individual: '车费人均'},
  330. {label: 'VN', total: '', individual: ''},
  331. {label: 'VRD', total: '', individual: ''},
  332. {label: 'T/G S', total: '导游工资', individual: '导游工资人均'},
  333. {label: 'T/G N', total: '', individual: ''},
  334. {label: 'T/G WH', total: '', individual: ''},
  335. {label: 'T/G OF', total: '', individual: ''},
  336. {label: 'T/G M', total: '', individual: ''},
  337. {label: 'T/G A', total: '', individual: ''},
  338. {label: 'T/G TF', total: '', individual: ''}
  339. ],
  340. tableData: [
  341. {id: 1, date: '2018-07-24', sales: 23.34, sale: 'ass', const: 102203.71, profit: 35394.05,a:"12"},
  342. {id: 2, date: '2018-07-24', sales: 23.34, sale: 'z', const: 102203.71, profit: 35394.05}
  343. ],
  344. options: [{
  345. value: '选项1',
  346. label: '黄金糕'
  347. }, {
  348. value: '选项2',
  349. label: '双皮奶'
  350. }, {
  351. value: '选项3',
  352. label: '蚵仔煎'
  353. }, {
  354. value: '选项4',
  355. label: '龙须面'
  356. }, {
  357. value: '选项5',
  358. label: '北京烤鸭'
  359. }],
  360. value: '',
  361. currencyOption: [{
  362. value: 'CNY',
  363. label: 'CNY'
  364. }, {
  365. value: 'CAD',
  366. label: 'CAD'
  367. }, {
  368. value: 'EGP',
  369. label: 'EGP'
  370. }, {
  371. value: 'EUR',
  372. label: 'EUR'
  373. }, {
  374. value: 'USD',
  375. label: 'USD'
  376. }],
  377. currencyValueL:'CNY',
  378. formInline: {
  379. user: '',
  380. region: ''
  381. },
  382. sheetoneList: ['签证','机票','核酸检测',],
  383. sheetoneOptions:['签证','机票','火车票','船票','保险','核酸检测','酒店TBR','酒店SGR','酒店JSES','酒店SUITE','地接','公务','零用金'],
  384. sheetDatal:[
  385. {
  386. label:'签证',
  387. childList:[
  388. {
  389. childLabel:'签证单人成本(CNY)',
  390. prop:'costPerson'
  391. },
  392. {
  393. childLabel:'人数',
  394. prop:'toll'
  395. },
  396. {
  397. childLabel:'签证系数',
  398. prop:'coefficient'
  399. },
  400. {
  401. childLabel:'签证总成本(CNY)',
  402. prop:'totalCost'
  403. },
  404. {
  405. childLabel:'签证单人报价(CNY)',
  406. prop:'singleQuote'
  407. },
  408. {
  409. childLabel:'签证总报价(CNY)',
  410. prop:'totalQuote'
  411. },
  412. {
  413. childLabel:'签证单人利润(CNY)',
  414. prop:'singleProfit'
  415. },
  416. {
  417. childLabel:'签证总利润(CNY)',
  418. prop:'totalProfit'
  419. },
  420. ],
  421. sheetInfo:[
  422. {
  423. costPerson: 1,
  424. toll: 11,
  425. coefficient: 23.34,
  426. totalCost: 137597.76,
  427. singleQuote: 102203.71,
  428. totalQuote: 35394.05,
  429. singleProfit: 35394.05,
  430. totalProfit: 35394.05
  431. },
  432. ]
  433. },
  434. {
  435. label:'火车票',
  436. childList:[
  437. {
  438. childLabel:'签证单人成本(CNY)',
  439. prop:'costPerson'
  440. },
  441. {
  442. childLabel:'人数',
  443. prop:'toll'
  444. },
  445. {
  446. childLabel:'签证系数',
  447. prop:'coefficient'
  448. },
  449. {
  450. childLabel:'签证总成本(CNY)',
  451. prop:'totalCost'
  452. },
  453. {
  454. childLabel:'签证单人报价(CNY)',
  455. prop:'singleQuote'
  456. },
  457. {
  458. childLabel:'签证总报价(CNY)',
  459. prop:'totalQuote'
  460. },
  461. {
  462. childLabel:'签证单人利润(CNY)',
  463. prop:'singleProfit'
  464. },
  465. {
  466. childLabel:'签证总利润(CNY)',
  467. prop:'totalProfit'
  468. },
  469. ],
  470. sheetInfo:[
  471. {
  472. costPerson: 133,
  473. toll: 11,
  474. coefficient: 23.34,
  475. totalCost: 137597.76,
  476. singleQuote: 102203.71,
  477. totalQuote: 35394.05,
  478. singleProfit: 35394.05,
  479. totalProfit: 35394.05
  480. },
  481. ]
  482. },
  483. {
  484. label:'机票',
  485. childList:[
  486. {
  487. childLabel:'签证单人成本(CNY)',
  488. prop:'costPerson'
  489. },
  490. {
  491. childLabel:'人数',
  492. prop:'toll'
  493. },
  494. {
  495. childLabel:'签证系数',
  496. prop:'coefficient'
  497. },
  498. {
  499. childLabel:'签证总成本(CNY)',
  500. prop:'totalCost'
  501. },
  502. {
  503. childLabel:'签证单人报价(CNY)',
  504. prop:'singleQuote'
  505. },
  506. {
  507. childLabel:'签证总报价(CNY)',
  508. prop:'totalQuote'
  509. },
  510. {
  511. childLabel:'签证单人利润(CNY)',
  512. prop:'singleProfit'
  513. },
  514. {
  515. childLabel:'签证总利润(CNY)',
  516. prop:'totalProfit'
  517. },
  518. ],
  519. sheetInfo:[
  520. {
  521. costPerson: 133,
  522. toll: 11,
  523. coefficient: 23.34,
  524. totalCost: 137597.76,
  525. singleQuote: 102203.71,
  526. totalQuote: 35394.05,
  527. singleProfit: 35394.05,
  528. totalProfit: 35394.05
  529. },
  530. ]
  531. },
  532. {
  533. label:'船票',
  534. childList:[
  535. {
  536. childLabel:'签证单人成本(CNY)',
  537. prop:'costPerson'
  538. },
  539. {
  540. childLabel:'人数',
  541. prop:'toll'
  542. },
  543. {
  544. childLabel:'签证系数',
  545. prop:'coefficient'
  546. },
  547. {
  548. childLabel:'签证总成本(CNY)',
  549. prop:'totalCost'
  550. },
  551. {
  552. childLabel:'签证单人报价(CNY)',
  553. prop:'singleQuote'
  554. },
  555. {
  556. childLabel:'签证总报价(CNY)',
  557. prop:'totalQuote'
  558. },
  559. {
  560. childLabel:'签证单人利润(CNY)',
  561. prop:'singleProfit'
  562. },
  563. {
  564. childLabel:'签证总利润(CNY)',
  565. prop:'totalProfit'
  566. },
  567. ],
  568. sheetInfo:[
  569. {
  570. costPerson: 133,
  571. toll: 11,
  572. coefficient: 23.34,
  573. totalCost: 137597.76,
  574. singleQuote: 102203.71,
  575. totalQuote: 35394.05,
  576. singleProfit: 35394.05,
  577. totalProfit: 35394.05
  578. },
  579. ]
  580. },
  581. {
  582. label:'保险',
  583. childList:[
  584. {
  585. childLabel:'签证单人成本(CNY)',
  586. prop:'costPerson'
  587. },
  588. {
  589. childLabel:'人数',
  590. prop:'toll'
  591. },
  592. {
  593. childLabel:'签证系数',
  594. prop:'coefficient'
  595. },
  596. {
  597. childLabel:'签证总成本(CNY)',
  598. prop:'totalCost'
  599. },
  600. {
  601. childLabel:'签证单人报价(CNY)',
  602. prop:'singleQuote'
  603. },
  604. {
  605. childLabel:'签证总报价(CNY)',
  606. prop:'totalQuote'
  607. },
  608. {
  609. childLabel:'签证单人利润(CNY)',
  610. prop:'singleProfit'
  611. },
  612. {
  613. childLabel:'签证总利润(CNY)',
  614. prop:'totalProfit'
  615. },
  616. ],
  617. sheetInfo:[
  618. {
  619. costPerson: 133,
  620. toll: 11,
  621. coefficient: 23.34,
  622. totalCost: 137597.76,
  623. singleQuote: 102203.71,
  624. totalQuote: 35394.05,
  625. singleProfit: 35394.05,
  626. totalProfit: 35394.05
  627. },
  628. ]
  629. },
  630. {
  631. label:'核酸检测',
  632. childList:[
  633. {
  634. childLabel:'签证单人成本(CNY)',
  635. prop:'costPerson'
  636. },
  637. {
  638. childLabel:'人数',
  639. prop:'toll'
  640. },
  641. {
  642. childLabel:'签证系数',
  643. prop:'coefficient'
  644. },
  645. {
  646. childLabel:'签证总成本(CNY)',
  647. prop:'totalCost'
  648. },
  649. {
  650. childLabel:'签证单人报价(CNY)',
  651. prop:'singleQuote'
  652. },
  653. {
  654. childLabel:'签证总报价(CNY)',
  655. prop:'totalQuote'
  656. },
  657. {
  658. childLabel:'签证单人利润(CNY)',
  659. prop:'singleProfit'
  660. },
  661. {
  662. childLabel:'签证总利润(CNY)',
  663. prop:'totalProfit'
  664. },
  665. ],
  666. sheetInfo:[
  667. {
  668. costPerson: 133,
  669. toll: 11,
  670. coefficient: 23.34,
  671. totalCost: 137597.76,
  672. singleQuote: 102203.71,
  673. totalQuote: 35394.05,
  674. singleProfit: 35394.05,
  675. totalProfit: 35394.05
  676. },
  677. ]
  678. }
  679. ],
  680. cabinoneList: ['经济舱 TBR','经济舱 SGR','核酸检测','团组预算明细'],
  681. cabinoneOptions:['经济舱 TBR','经济舱 SGR','公务舱 SGR','公务舱 JS/ES','公务舱 SUITE'],
  682. cabinDatal:[
  683. {
  684. label:'经济舱 TBR',
  685. childList:[
  686. {
  687. childLabel:'单人成本(CNY)',
  688. prop:'costPerson'
  689. },
  690. {
  691. childLabel:'人数',
  692. prop:'toll'
  693. },
  694. {
  695. childLabel:'总成本(CNY)',
  696. prop:'totalCost'
  697. },
  698. {
  699. childLabel:'单人报价(CNY)',
  700. prop:'singleQuote'
  701. },
  702. {
  703. childLabel:'总报价(CNY)',
  704. prop:'totalQuote'
  705. },
  706. {
  707. childLabel:'单人利润(CNY)',
  708. prop:'singleProfit'
  709. },
  710. {
  711. childLabel:'总利润(CNY)',
  712. prop:'totalProfit'
  713. },
  714. ],
  715. sheetInfo:[
  716. {
  717. costPerson: 1,
  718. toll: 11,
  719. totalCost: 137597.76,
  720. singleQuote: 102203.71,
  721. totalQuote: 35394.05,
  722. singleProfit: 35394.05,
  723. totalProfit: 35394.05
  724. },
  725. ]
  726. },
  727. {
  728. label:'经济舱 SGR',
  729. childList:[
  730. {
  731. childLabel:'单人成本(CNY)',
  732. prop:'costPerson'
  733. },
  734. {
  735. childLabel:'人数',
  736. prop:'toll'
  737. },
  738. {
  739. childLabel:'总成本(CNY)',
  740. prop:'totalCost'
  741. },
  742. {
  743. childLabel:'单人报价(CNY)',
  744. prop:'singleQuote'
  745. },
  746. {
  747. childLabel:'总报价(CNY)',
  748. prop:'totalQuote'
  749. },
  750. {
  751. childLabel:'单人利润(CNY)',
  752. prop:'singleProfit'
  753. },
  754. {
  755. childLabel:'总利润(CNY)',
  756. prop:'totalProfit'
  757. },
  758. ],
  759. sheetInfo:[
  760. {
  761. costPerson: 1,
  762. toll: 11,
  763. totalCost: 137597.76,
  764. singleQuote: 102203.71,
  765. totalQuote: 35394.05,
  766. singleProfit: 35394.05,
  767. totalProfit: 35394.05
  768. },
  769. ]
  770. },
  771. {
  772. label:'公务舱 SGR',
  773. childList:[
  774. {
  775. childLabel:'单人成本(CNY)',
  776. prop:'costPerson'
  777. },
  778. {
  779. childLabel:'人数',
  780. prop:'toll'
  781. },
  782. {
  783. childLabel:'总成本(CNY)',
  784. prop:'totalCost'
  785. },
  786. {
  787. childLabel:'单人报价(CNY)',
  788. prop:'singleQuote'
  789. },
  790. {
  791. childLabel:'总报价(CNY)',
  792. prop:'totalQuote'
  793. },
  794. {
  795. childLabel:'单人利润(CNY)',
  796. prop:'singleProfit'
  797. },
  798. {
  799. childLabel:'总利润(CNY)',
  800. prop:'totalProfit'
  801. },
  802. ],
  803. sheetInfo:[
  804. {
  805. costPerson: 1,
  806. toll: 11,
  807. totalCost: 137597.76,
  808. singleQuote: 102203.71,
  809. totalQuote: 35394.05,
  810. singleProfit: 35394.05,
  811. totalProfit: 35394.05
  812. },
  813. ]
  814. },
  815. {
  816. label:'公务舱 JS/ES',
  817. childList:[
  818. {
  819. childLabel:'单人成本(CNY)',
  820. prop:'costPerson'
  821. },
  822. {
  823. childLabel:'人数',
  824. prop:'toll'
  825. },
  826. {
  827. childLabel:'总成本(CNY)',
  828. prop:'totalCost'
  829. },
  830. {
  831. childLabel:'单人报价(CNY)',
  832. prop:'singleQuote'
  833. },
  834. {
  835. childLabel:'总报价(CNY)',
  836. prop:'totalQuote'
  837. },
  838. {
  839. childLabel:'单人利润(CNY)',
  840. prop:'singleProfit'
  841. },
  842. {
  843. childLabel:'总利润(CNY)',
  844. prop:'totalProfit'
  845. },
  846. ],
  847. sheetInfo:[
  848. {
  849. costPerson: 1,
  850. toll: 11,
  851. totalCost: 137597.76,
  852. singleQuote: 102203.71,
  853. totalQuote: 35394.05,
  854. singleProfit: 35394.05,
  855. totalProfit: 35394.05
  856. },
  857. ]
  858. },
  859. {
  860. label:'公务舱 SUITE',
  861. childList:[
  862. {
  863. childLabel:'单人成本(CNY)',
  864. prop:'costPerson'
  865. },
  866. {
  867. childLabel:'人数',
  868. prop:'toll'
  869. },
  870. {
  871. childLabel:'总成本(CNY)',
  872. prop:'totalCost'
  873. },
  874. {
  875. childLabel:'单人报价(CNY)',
  876. prop:'singleQuote'
  877. },
  878. {
  879. childLabel:'总报价(CNY)',
  880. prop:'totalQuote'
  881. },
  882. {
  883. childLabel:'单人利润(CNY)',
  884. prop:'singleProfit'
  885. },
  886. {
  887. childLabel:'总利润(CNY)',
  888. prop:'totalProfit'
  889. },
  890. ],
  891. sheetInfo:[
  892. {
  893. costPerson: 1,
  894. toll: 11,
  895. totalCost: 137597.76,
  896. singleQuote: 102203.71,
  897. totalQuote: 35394.05,
  898. singleProfit: 35394.05,
  899. totalProfit: 35394.05
  900. },
  901. ]
  902. }
  903. ,
  904. {
  905. label:'团组预算明细',
  906. childList:[
  907. {
  908. childLabel:'团组成本(CNY)',
  909. prop:'groupCosts'
  910. },
  911. {
  912. childLabel:'团组报价(CNY)',
  913. prop:'gtroupQuotes'
  914. },
  915. {
  916. childLabel:'团组利润(CNY)',
  917. prop:'groupProfit'
  918. }
  919. ],
  920. sheetInfo:[
  921. {
  922. groupCosts: 1,
  923. gtroupQuotes: 11,
  924. groupProfit: 137597.76,
  925. },
  926. ]
  927. }
  928. ]
  929. };
  930. },
  931. watch:{
  932. // 此处监听variable变量,当期有变化时执行
  933. checkList(item1,item2){
  934. // console.log(item1)
  935. // console.log(item2)
  936. // item1为新值,item2为旧值
  937. },
  938. },
  939. methods:{
  940. getSummaries(param) {
  941. console.log(param)
  942. const { columns, data } = param;
  943. const sums = [];
  944. columns.forEach((column, index) => {
  945. if (index === 0) {
  946. sums[index] = "总计:";
  947. return;
  948. }
  949. const values = data.map(item => Number(item[column.property]));
  950. console.log(values)
  951. if (!values.every(value => isNaN(value))) {
  952. sums[index] = values.reduce((prev, curr) => {
  953. const value = Number(curr);
  954. if (!isNaN(value)) {
  955. return prev + curr;
  956. } else {
  957. return prev;
  958. }
  959. }, 0);
  960. sums[index] = sums[index] + '(' + this.currencyValueL + ')' + ' 人均(' +sums[index]+')';
  961. } else {
  962. sums[index] = 'N/A';
  963. }
  964. });
  965. return sums;
  966. },
  967. handleEdit(index, row) {
  968. console.log(index, row);
  969. this.outerVisible=true;
  970. },
  971. handleDelete(index, row,rows) {
  972. console.log(index, row,rows);
  973. this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
  974. confirmButtonText: '确定',
  975. cancelButtonText: '取消',
  976. type: 'warning'
  977. }).then(() => {
  978. this.$message({
  979. message:'已删除' ,
  980. type: 'success',
  981. offset:50
  982. });
  983. rows.splice(index, 1);
  984. }).catch(() => {
  985. this.$message({
  986. type: 'info',
  987. message: '已取消删除'
  988. });
  989. });
  990. },
  991. addStrip(){
  992. this.tableData.push(
  993. {id: '', date: '', sales:'', sale: '', const: '', profit: ''}
  994. )
  995. }
  996. },
  997. mounted(){
  998. }
  999. }
  1000. </script>
  1001. <style>
  1002. .cost-box {
  1003. background-color: #fff;
  1004. padding: 10px;
  1005. box-shadow: 0 0 5px #0005;
  1006. border-radius: 10px;
  1007. }
  1008. .cost-box .el-button+.el-button{
  1009. margin-left: 0;
  1010. }
  1011. .fade-enter-active,
  1012. .fade-leave-active {
  1013. transition: opacity 1;
  1014. }
  1015. .fade-enter,
  1016. .fade-leave-to {
  1017. opacity: 0;
  1018. }
  1019. .cost-haed{
  1020. margin-bottom: 10px;
  1021. }
  1022. .ser-btn{
  1023. display: flex;
  1024. justify-content: space-between;
  1025. margin-bottom: 10px;
  1026. }
  1027. .cost-info{
  1028. display: flex;
  1029. }
  1030. .cost-info-li{
  1031. margin-right: 30px;
  1032. }
  1033. .cost-info-li label{
  1034. color: #606266;
  1035. font-size: 15px;
  1036. font-weight: 600;
  1037. }
  1038. .cost-info-li span{
  1039. color: #606266;
  1040. font-size: 14px;
  1041. }
  1042. .cost-box .el-checkbox-group{
  1043. margin: 5px 0;
  1044. }
  1045. .form-ss .el-checkbox{
  1046. width: 100px;
  1047. margin: 5px 0;
  1048. }
  1049. .sheet-box{
  1050. margin-top: 30px;
  1051. }
  1052. .cabin-box{
  1053. margin-top: 30px;
  1054. }
  1055. .biaoge{
  1056. margin-bottom: 30px;
  1057. }
  1058. .rapAddress{
  1059. overflow: hidden;
  1060. white-space: nowrap;
  1061. text-overflow: ellipsis;
  1062. }
  1063. .cost-box .cabin-box .cost-box .el-checkbox{
  1064. margin-right: 20px;
  1065. }
  1066. .cost-box .el-table .cell{
  1067. text-align: center;
  1068. }
  1069. .figures-btn{
  1070. display: flex;
  1071. flex-direction: column;
  1072. align-items: center;
  1073. }
  1074. .figures-btn .el-button--mini{
  1075. width: 70px;
  1076. margin: 2px 0;
  1077. margin-left:0 ;
  1078. }
  1079. </style>