index.vue 83 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898
  1. <template>
  2. <div>
  3. <basic-container v-if="isShow">
  4. <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" id="out-table"
  5. :header-cell-class-name="headerClassName" :permission="permissionList" :before-open="beforeOpen"
  6. v-model="form" ref="crud" :search.sync="query" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
  7. @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
  8. @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"
  9. @expand-change="expandChange" @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 309.12)"
  10. @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 309.12)">
  11. <!--#region-->
  12. <!--<template slot="search" slot-scope="{row,size}">-->
  13. <!-- <el-form ref="form" :model="row" label-width="80px" :style="fold?'width: 100%':'width: 70%'">-->
  14. <!-- <el-row>-->
  15. <!-- <el-col :span="fold?6:8" >-->
  16. <!-- <el-form-item label="主单号">-->
  17. <!-- <el-input placeholder="请输入主单号" clearable-->
  18. <!-- size="small" style="width:100%" v-model="query.mblno">-->
  19. <!-- </el-input>-->
  20. <!-- </el-form-item>-->
  21. <!-- </el-col>-->
  22. <!-- <el-col :span="fold?6:8">-->
  23. <!-- <el-form-item label="委托人">-->
  24. <!-- &lt;!&ndash;<el-input placeholder="请输入委托人" clearable&ndash;&gt;-->
  25. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.corpCnName">&ndash;&gt;-->
  26. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  27. <!-- <search-query :datalist="corpData"-->
  28. <!-- :selectValue="query.corpCnName"-->
  29. <!-- :filterable="true"-->
  30. <!-- :clearable="true"-->
  31. <!-- :remote="true"-->
  32. <!-- :buttonIf="false"-->
  33. <!-- :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
  34. <!-- placeholder="请输入委托人"-->
  35. <!-- @remoteMethod="corpBcorpslistByType"-->
  36. <!-- @corpChange="corpChange($event,'corpCnName')"-->
  37. <!-- @corpFocus="corpBcorpslistByType" >-->
  38. <!-- </search-query>-->
  39. <!-- </el-form-item>-->
  40. <!-- </el-col>-->
  41. <!-- <el-col :span="fold?6:8" >-->
  42. <!-- <el-form-item label="业务号">-->
  43. <!-- <el-input placeholder="请输入业务号" clearable-->
  44. <!-- size="small" style="width:100%" v-model="query.billNo">-->
  45. <!-- </el-input>-->
  46. <!-- </el-form-item>-->
  47. <!-- </el-col>-->
  48. <!-- <el-col :span="6" v-show="fold">-->
  49. <!-- <el-form-item label="单据类型">-->
  50. <!-- <search-query-->
  51. <!-- :datalist="billTypeData"-->
  52. <!-- :selectValue="query.billType"-->
  53. <!-- :filterable="true"-->
  54. <!-- :clearable="true"-->
  55. <!-- :remote="true"-->
  56. <!-- :buttonIf="false"-->
  57. <!-- @corpChange="corpChange($event,'billType')">-->
  58. <!-- </search-query>-->
  59. <!-- </el-form-item>-->
  60. <!-- </el-col>-->
  61. <!-- <el-col :span="6" v-show="fold">-->
  62. <!-- <el-form-item label="分单号">-->
  63. <!-- <el-input placeholder="请输入分单号" clearable-->
  64. <!-- size="small" style="width:100%" v-model="query.hblno">-->
  65. <!-- </el-input>-->
  66. <!-- </el-form-item>-->
  67. <!-- </el-col>-->
  68. <!-- <el-col :span="6" v-show="fold">-->
  69. <!-- <el-form-item label="船名">-->
  70. <!-- <search-query :datalist="vesselData"-->
  71. <!-- :selectValue="query.vesselEnName"-->
  72. <!-- :filterable="true"-->
  73. <!-- :clearable="true"-->
  74. <!-- :remote="true"-->
  75. <!-- :buttonIf="false"-->
  76. <!-- :forParameter="{key:'id',label:'enName',value:'enName'}"-->
  77. <!-- placeholder="请输入船名"-->
  78. <!-- @remoteMethod="vesselBvesselsListfun"-->
  79. <!-- @corpChange="corpChange($event,'vesselEnName')"-->
  80. <!-- @corpFocus="vesselBvesselsListfun" >-->
  81. <!-- </search-query>-->
  82. <!-- </el-form-item>-->
  83. <!-- </el-col>-->
  84. <!-- <el-col :span="6" v-show="fold" >-->
  85. <!-- <el-form-item label="航次">-->
  86. <!-- <el-input placeholder="请输入航次" clearable-->
  87. <!-- size="small" style="width:100%" v-model="query.voyageNo">-->
  88. <!-- </el-input>-->
  89. <!-- </el-form-item>-->
  90. <!-- </el-col>-->
  91. <!-- <el-col :span="6" v-show="fold">-->
  92. <!-- <el-form-item label="船公司">-->
  93. <!-- <search-query :datalist="carrierData"-->
  94. <!-- :selectValue="query.carrierCnName"-->
  95. <!-- :filterable="true"-->
  96. <!-- :clearable="true"-->
  97. <!-- :remote="true"-->
  98. <!-- :buttonIf="false"-->
  99. <!-- :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
  100. <!-- placeholder="请输入船公司"-->
  101. <!-- @remoteMethod="carrierBcorpslistByTypefun"-->
  102. <!-- @corpChange="corpChange($event,'carrierCnName')"-->
  103. <!-- @corpFocus="carrierBcorpslistByTypefun" >-->
  104. <!-- </search-query>-->
  105. <!-- </el-form-item>-->
  106. <!-- </el-col>-->
  107. <!-- <el-col :span="6" v-show="fold">-->
  108. <!-- <el-form-item label="目的港">-->
  109. <!-- &lt;!&ndash;<el-input placeholder="请输入目的港" clearable&ndash;&gt;-->
  110. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.podCnName">&ndash;&gt;-->
  111. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  112. <!-- <search-query :datalist="podData"-->
  113. <!-- :selectValue="query.podEnName"-->
  114. <!-- :filterable="true"-->
  115. <!-- :clearable="true"-->
  116. <!-- :remote="true"-->
  117. <!-- :buttonIf="false"-->
  118. <!-- :forParameter="{key:'id',label:'enName',value:'enName'}"-->
  119. <!-- placeholder="请输入目的港"-->
  120. <!-- @remoteMethod="podBportsListfun"-->
  121. <!-- @corpChange="corpChange($event,'podEnName')"-->
  122. <!-- @corpFocus="podBportsListfun" >-->
  123. <!-- </search-query>-->
  124. <!-- </el-form-item>-->
  125. <!-- </el-col>-->
  126. <!-- <el-col :span="6" v-show="fold">-->
  127. <!-- <el-form-item label="航线">-->
  128. <!-- &lt;!&ndash;<el-input placeholder="请输入航线" clearable&ndash;&gt;-->
  129. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.lineCnName">&ndash;&gt;-->
  130. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  131. <!-- <search-query :datalist="lineData"-->
  132. <!-- :selectValue="query.lineCnName"-->
  133. <!-- :filterable="true"-->
  134. <!-- :clearable="true"-->
  135. <!-- :remote="true"-->
  136. <!-- :buttonIf="false"-->
  137. <!-- :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
  138. <!-- placeholder="请输入航线"-->
  139. <!-- @remoteMethod="lineBlinesListfun"-->
  140. <!-- @corpChange="corpChange($event,'lineCnName')"-->
  141. <!-- @corpFocus="lineBlinesListfun" >-->
  142. <!-- </search-query>-->
  143. <!-- </el-form-item>-->
  144. <!-- </el-col>-->
  145. <!-- <el-col :span="6" v-show="fold">-->
  146. <!-- <el-form-item label="场站">-->
  147. <!-- &lt;!&ndash;<el-input placeholder="请输入场站" clearable&ndash;&gt;-->
  148. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.cyCode">&ndash;&gt;-->
  149. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  150. <!-- <search-query :datalist="cyData"-->
  151. <!-- :selectValue="query.cyCnName"-->
  152. <!-- :filterable="true"-->
  153. <!-- :clearable="true"-->
  154. <!-- :remote="true"-->
  155. <!-- :buttonIf="false"-->
  156. <!-- :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
  157. <!-- placeholder="请输入场站"-->
  158. <!-- @remoteMethod="cyBcorpslistByType"-->
  159. <!-- @corpChange="corpChange($event,'cyCnName')"-->
  160. <!-- @corpFocus="cyBcorpslistByType" >-->
  161. <!-- </search-query>-->
  162. <!-- </el-form-item>-->
  163. <!-- </el-col>-->
  164. <!-- <el-col :span="6" v-show="fold">-->
  165. <!-- <el-form-item label="业务来源">-->
  166. <!-- <search-query-->
  167. <!-- :datalist="srcTypeData"-->
  168. <!-- :selectValue="query.srcType"-->
  169. <!-- :filterable="true"-->
  170. <!-- :clearable="true"-->
  171. <!-- :remote="true"-->
  172. <!-- :buttonIf="false"-->
  173. <!-- @corpChange="corpChange($event,'srcType')">-->
  174. <!-- </search-query>-->
  175. <!-- </el-form-item>-->
  176. <!-- </el-col>-->
  177. <!-- <el-col :span="6" v-show="fold">-->
  178. <!-- <el-form-item label="来源详情">-->
  179. <!-- <el-input placeholder="请输入来源详情" clearable-->
  180. <!-- size="small" style="width:100%" v-model="query.srcCnName">-->
  181. <!-- </el-input>-->
  182. <!-- </el-form-item>-->
  183. <!-- </el-col>-->
  184. <!-- <el-col :span="9" v-show="fold">-->
  185. <!-- <el-form-item label="ETD">-->
  186. <!-- <el-checkbox v-model="etdDisabled">-->
  187. <!-- <el-date-picker-->
  188. <!-- v-model="etdList"-->
  189. <!-- style="width: 100%"-->
  190. <!-- :disabled="!etdDisabled"-->
  191. <!-- size="small"-->
  192. <!-- type="datetimerange"-->
  193. <!-- range-separator="至"-->
  194. <!-- start-placeholder="开始日期"-->
  195. <!-- end-placeholder="结束日期"-->
  196. <!-- format="yyyy-MM-dd HH:mm"-->
  197. <!-- value-format="yyyy-MM-dd HH:mm"-->
  198. <!-- clearable>-->
  199. <!-- </el-date-picker>-->
  200. <!-- </el-checkbox>-->
  201. <!-- </el-form-item>-->
  202. <!-- </el-col>-->
  203. <!-- <el-col :span="9" v-show="fold">-->
  204. <!-- <el-form-item label="ETA">-->
  205. <!-- <el-checkbox v-model="etaDisabled">-->
  206. <!-- <el-date-picker-->
  207. <!-- v-model="etaList"-->
  208. <!-- style="width: 100%"-->
  209. <!-- :disabled="!etaDisabled"-->
  210. <!-- size="small"-->
  211. <!-- type="datetimerange"-->
  212. <!-- range-separator="至"-->
  213. <!-- start-placeholder="开始日期"-->
  214. <!-- end-placeholder="结束日期"-->
  215. <!-- format="yyyy-MM-dd HH:mm"-->
  216. <!-- value-format="yyyy-MM-dd HH:mm"-->
  217. <!-- clearable>-->
  218. <!-- </el-date-picker>-->
  219. <!-- </el-checkbox>-->
  220. <!-- </el-form-item>-->
  221. <!-- </el-col>-->
  222. <!-- <el-col :span="6" v-show="fold">-->
  223. <!-- <el-form-item label="创建部门">-->
  224. <!-- &lt;!&ndash;<el-input placeholder="请输入创建部门" clearable&ndash;&gt;-->
  225. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.createDeptName">&ndash;&gt;-->
  226. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  227. <!-- <tree-select v-model="query.createDeptName" filterable-->
  228. <!-- :data="createDeptData"-->
  229. <!-- :props="{label: 'title', children:'children' }"-->
  230. <!-- nodeKey="title"-->
  231. <!-- size="small"-->
  232. <!-- :multiple="false"-->
  233. <!-- placeholder="请选择创建部门"-->
  234. <!-- @focus="createDeptLzylistfun"-->
  235. <!-- @input="corpChange($event,'createDeptName')">-->
  236. <!-- </tree-select>-->
  237. <!-- </el-form-item>-->
  238. <!-- </el-col>-->
  239. <!-- <el-col :span="6" v-show="fold">-->
  240. <!-- <el-form-item label="订舱代理">-->
  241. <!-- &lt;!&ndash;<el-input placeholder="请输入订舱代理" clearable&ndash;&gt;-->
  242. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.bookingAgentCnName">&ndash;&gt;-->
  243. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  244. <!-- <search-query :datalist="bookingAgentData"-->
  245. <!-- :selectValue="query.bookingAgentCnName"-->
  246. <!-- :filterable="true"-->
  247. <!-- :clearable="true"-->
  248. <!-- :remote="true"-->
  249. <!-- :buttonIf="false"-->
  250. <!-- :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
  251. <!-- placeholder="请输入订舱代理"-->
  252. <!-- @remoteMethod="bookingAgentBcorpsListfun"-->
  253. <!-- @corpChange="corpChange($event,'bookingAgentCnName')"-->
  254. <!-- @corpFocus="bookingAgentBcorpsListfun">-->
  255. <!-- </search-query>-->
  256. <!-- </el-form-item>-->
  257. <!-- </el-col>-->
  258. <!-- <el-col :span="6" v-show="fold">-->
  259. <!-- <el-form-item label="签单方式">-->
  260. <!-- <search-query-->
  261. <!-- :datalist="issueTypeData"-->
  262. <!-- :selectValue="query.issueType"-->
  263. <!-- :filterable="true"-->
  264. <!-- :clearable="true"-->
  265. <!-- :remote="true"-->
  266. <!-- :buttonIf="false"-->
  267. <!-- :forParameter="{ key:'dictKey', label:'dictValue', value:'dictValue'}"-->
  268. <!-- @corpChange="corpChange($event,'issueType')" >-->
  269. <!-- </search-query>-->
  270. <!-- </el-form-item>-->
  271. <!-- </el-col>-->
  272. <!-- <el-col :span="6" v-show="fold">-->
  273. <!-- <el-form-item label="收货人">-->
  274. <!-- &lt;!&ndash;<el-input placeholder="请输入收货人" clearable&ndash;&gt;-->
  275. <!-- &lt;!&ndash; size="small" style="width:100%" v-model="query.hConsigneeCnName">&ndash;&gt;-->
  276. <!-- &lt;!&ndash;</el-input>&ndash;&gt;-->
  277. <!-- <search-query :datalist="hConsigneeData"-->
  278. <!-- :selectValue="query.hConsigneeCnName"-->
  279. <!-- :filterable="true"-->
  280. <!-- :clearable="true"-->
  281. <!-- :remote="true"-->
  282. <!-- :buttonIf="false"-->
  283. <!-- :forParameter="{key:'id',label:'cnName',value:'cnName'}"-->
  284. <!-- placeholder="请选择收货人"-->
  285. <!-- @remoteMethod="hConsigneeBcorpslistByType"-->
  286. <!-- @corpChange="corpChange($event,'hConsigneeCnName')"-->
  287. <!-- @corpFocus="hConsigneeBcorpslistByType" >-->
  288. <!-- </search-query>-->
  289. <!-- </el-form-item>-->
  290. <!-- </el-col>-->
  291. <!-- </el-row>-->
  292. <!-- </el-form>-->
  293. <!--</template>-->
  294. <!--<template slot="searchMenu" slot-scope="{row,size}">-->
  295. <!-- <el-button type="text" @click="shiftCollapsiable">-->
  296. <!-- <span>-->
  297. <!-- {{ fold ? '收起' : '展开' }}-->
  298. <!-- <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>-->
  299. <!-- </span>-->
  300. <!-- </el-button>-->
  301. <!--</template>-->
  302. <!--#endregion-->
  303. <template slot="menuLeft">
  304. <el-button type="primary" size="small" @click="addbtnfun()">新建业务
  305. </el-button>
  306. <el-button type="primary" size="small" plain @click="CopyDocumentsfun">复制单据
  307. </el-button>
  308. <el-button type="success" size="small" plain @click="increaseMawb">分单->主单
  309. </el-button>
  310. <el-button type="warning" size="small" plain v-if="query.billStatus == 0" @click="Disembarkingfun">退 舱
  311. </el-button>
  312. <el-button type="primary" size="small" plain v-if="query.billStatus == 1"
  313. @click="revokeWithdrawalfun">撤销退舱
  314. </el-button>
  315. <el-button type="danger" size="small" plain v-if="query.billStatus != 3" @click="handleDelete">删 除
  316. </el-button>
  317. <div style="margin-top: 10px">
  318. <el-tabs type="card" v-model="query.billStatus" @tab-click="handleClick">
  319. <el-tab-pane label="接单" name="0">
  320. <span slot="label">接单</span>
  321. </el-tab-pane>
  322. <el-tab-pane label="退舱" name="1">
  323. <span slot="label" style="color: #d86363">退舱</span>
  324. </el-tab-pane>
  325. <el-tab-pane label="完成" name="3"></el-tab-pane>
  326. <el-tab-pane label="全部" name="4"></el-tab-pane>
  327. </el-tabs>
  328. </div>
  329. </template>
  330. <template slot-scope="scope" slot="menu">
  331. <el-button :type="scope.type" :size="scope.size" icon="el-icon-edit"
  332. @click.stop="rowCellfun(scope.row.id, scope.row)">编辑
  333. </el-button>
  334. </template>
  335. <template slot="expand" slot-scope="{row}">
  336. <SplitList :typeMenu="true" :data="row.billsListAllData" :loading="SplitLoading" @corpfun="rowCellfun">
  337. </SplitList>
  338. </template>
  339. <temolate slot="billStatus" slot-scope="{row}">
  340. <span v-if="row.billStatus == item.dictKey" v-for="(item, index) in billStatusData" :key="index"
  341. :style="{ 'background-color': item.colour }"
  342. style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;">
  343. {{ item.dictValue }}
  344. </span>
  345. </temolate>
  346. <template slot="accountStatus" slot-scope="{ row }">
  347. <span v-if="row.accountStatus == item.dictKey" v-for="(item, index) in accountStatusData" :key="index"
  348. :style="{ 'background-color': item.colour }"
  349. style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;">
  350. {{ item.dictValue }}
  351. </span>
  352. </template>
  353. <template slot="status" slot-scope="{ row }">
  354. <div>
  355. <span v-if="row.status == item.dictKey" v-for="(item, index) in auditStatusList" :key="index"
  356. :style="{ 'background-color': item.colour }"
  357. style="color: #fff;border-radius: 30px;padding: 2px 15px;text-align: center;">
  358. {{ item.dictValue }}
  359. </span>
  360. </div>
  361. </template>
  362. <template slot="corpCnName" slot-scope="scope">
  363. <span
  364. style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
  365. @click.stop="rowCellfun(scope.row.id, scope.row)">
  366. {{ scope.row.corpCnName }}
  367. </span>
  368. </template>
  369. <template slot="billNo" slot-scope="scope">
  370. <span
  371. style="color: #1e9fff;cursor: pointer;width: 100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"
  372. @click.stop="rowCellfun(scope.row.id, scope.row)">
  373. {{ scope.row.billNo }}
  374. </span>
  375. </template>
  376. <template slot="eta" slot-scope="scope">
  377. <span>{{ scope.row.eta ? scope.row.eta.slice(0, 10) : '' }}</span>
  378. </template>
  379. <template slot="updateTime" slot-scope="scope">
  380. <span>{{ scope.row.updateTime ? scope.row.updateTime.slice(0, 10) : '' }}</span>
  381. </template>
  382. </avue-crud>
  383. </basic-container>
  384. <bills-details ref="billsDetails" v-if="!isShow" :detailData="detailData" @goBack="goBack" @toAddEdit="toAddEdit"
  385. :key="datekey"></bills-details>
  386. <el-dialog title="主单列表" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
  387. <avue-crud :option="mawbOption" :table-loading="mawbloading" :data="mawbData" :page.sync="mawbPage"
  388. :search="mawbQuery" ref="mawbOptionCrud" id="out-table" :header-cell-class-name="headerClassName"
  389. @search-change="mawbSearch" @size-change="mawbSizeChange" @current-change="mawbCurrentChange"
  390. @resetColumn="resetColumnTwo('mawbOptionCrud', 'mawbOption', 'mawbOptionBack', 309.7)"
  391. @saveColumn="saveColumnTwo('mawbOptionCrud', 'mawbOption', 'mawbOptionBack', 309.7)">
  392. <template slot="radio" slot-scope="{row}">
  393. <el-radio v-model="dialogRadio" :label="row.id" @input="radioInput(row)"></el-radio>
  394. </template>
  395. </avue-crud>
  396. <span slot="footer" class="dialog-footer">
  397. <el-button @click="dialogVisible = false; dialogRadio = null">取 消</el-button>
  398. <el-button type="primary" @click="AddToMainOrder">确 定</el-button>
  399. </span>
  400. </el-dialog>
  401. </div>
  402. </template>
  403. <script>
  404. import {
  405. billsList,
  406. billsDetail,
  407. billsSubmit,
  408. billsRemove,
  409. billsIncreaseReinsurancePolicy, billsListAll, billsDisembarking, editypesSendingEdi, billsRevokeDisembarking
  410. } from "@/api/iosBasicData/bills";
  411. import {
  412. aeabillsDetail, aeabillsDisembarking,
  413. aeabillsIncreaseReinsurancePolicy,
  414. aeabillsList, aeabillsListAll,
  415. aeabillsRemove, aeabillsRevokeDisembarking,
  416. aeabillsSubmit
  417. } from "@/api/iosBasicData/aeabills"
  418. import { mapGetters } from "vuex";
  419. import billsDetails from "@/views/iosBasicData/AirtransportExport/bills/billsDetails.vue";
  420. import feesTemplateItems from "@/views/iosBasicData/losbfeestemplate/feesTemplateItems.vue";
  421. import SplitList from "@/views/iosBasicData/AirtransportExport/bills/assembly/SplitList.vue";
  422. import { getWorkDicts } from "@/api/system/dictbiz";
  423. import { dateFormat, defaultDate } from "@/util/date";
  424. import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
  425. import { editypesList } from "@/api/iosBasicData/editypes";
  426. import { getBvesselsList } from "@/api/iosBasicData/bvessels";
  427. import { getBcorpslistByType, getBcorpsDetail } from "@/api/iosBasicData/bcorps";
  428. import { bportsList } from "@/api/iosBasicData/bports";
  429. import { blinesList } from "@/api/iosBasicData/blines";
  430. import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
  431. import { getDeptTree } from "@/api/system/dept";
  432. export default {
  433. components: { TreeSelect, SearchQuery, feesTemplateItems, billsDetails, SplitList },
  434. data() {
  435. return {
  436. datekey: Date.now(),
  437. // 展开和收回
  438. fold: false,
  439. maxShow: 3,
  440. corpData: [], //委托人
  441. hConsigneeData: [], // 收货人
  442. // 船名
  443. vesselData: [],
  444. // 船公司
  445. carrierData: [],
  446. // 目的港(卸货港)
  447. podData: [],
  448. // 航线
  449. lineData: [],
  450. // 场站
  451. cyData: [],
  452. // 订舱代理
  453. bookingAgentData: [],
  454. createDeptData: [], // 部门数据
  455. // 单据类型
  456. billTypeData: [
  457. {
  458. label: '直单',
  459. value: 'DD'
  460. }, {
  461. label: '主单',
  462. value: 'MM'
  463. }, {
  464. label: '分单',
  465. value: 'MH'
  466. }
  467. ],
  468. // 业务来源
  469. srcTypeData: [
  470. {
  471. label: '公司',
  472. value: 'OWN'
  473. },
  474. {
  475. label: '代理',
  476. value: 'AGENT'
  477. },
  478. {
  479. label: '业务员',
  480. value: 'SALES'
  481. }
  482. ],
  483. // 签单方式
  484. issueTypeData: [],
  485. isShow: true,
  486. detailData: {},
  487. dialogVisible: false, // 弹窗开启
  488. // ETD是否可以检索
  489. etdDisabled: false,
  490. // ETA是否可以检索
  491. etaDisabled: false,
  492. form: {},
  493. // 开船日期和到港日期
  494. etdList: [defaultDate(1)[0] + ' 00:00', defaultDate(1)[1] + ' 23:59'],
  495. etaList: [defaultDate(1)[0] + ' 00:00', defaultDate(1)[1] + ' 23:59'],
  496. // 表格的检索条件
  497. query: {
  498. billStatus: '0',
  499. },
  500. // 弹窗的搜索项
  501. mawbQuery: {
  502. billType: 'MM',
  503. },
  504. loading: true,
  505. // 弹窗加载
  506. mawbloading: false,
  507. // 下拉的加载
  508. SplitLoading: false,
  509. page: {
  510. pageSize: 10,
  511. currentPage: 1,
  512. total: 0
  513. },
  514. // 弹窗分页
  515. mawbPage: {
  516. pageSize: 10,
  517. currentPage: 1,
  518. total: 0
  519. },
  520. selectionList: [],
  521. auditStatusList: [],
  522. // 弹窗的选择数据
  523. dialogRadio: null,
  524. option: {},
  525. optionBack: {
  526. // selectable:(row,index)=>{
  527. // // 禁用主单
  528. // return row.billType != 'MM'
  529. // },
  530. expand: true,
  531. expandRowKeys: [],
  532. rowKey: 'id',
  533. height: 'auto',
  534. calcHeight: 30,
  535. tip: false,
  536. searchShow: true,
  537. searchMenuSpan: 6,
  538. searchLabelWidth: '100',
  539. border: true,
  540. index: true,
  541. selection: true,
  542. dialogClickModal: false,
  543. highlightCurrentRow: true, // 单选
  544. searchIcon: true,
  545. searchIndex: 3,
  546. stripe: true,
  547. addBtn: false,
  548. viewBtn: false,
  549. delBtn: false,
  550. editBtn: false,
  551. menuWidth: 'auto',
  552. align: 'center',
  553. column: [
  554. {
  555. label: "单据类型",
  556. prop: "billType",
  557. type: 'select',
  558. search: true,
  559. span: 6,
  560. searchOrder: 4,
  561. dicData: [{
  562. label: '直单',
  563. value: 'DD'
  564. }, {
  565. label: '主单',
  566. value: 'MM'
  567. }, {
  568. label: '分单',
  569. value: 'MH'
  570. }],
  571. overHidden: true,
  572. },
  573. {
  574. label: "单据编号",
  575. prop: "billNo",
  576. width: "160",
  577. overHidden: true,
  578. search: true,
  579. span: 6,
  580. searchOrder: 3,
  581. },
  582. {
  583. label: "所属团队",
  584. prop: "teamName",
  585. overHidden: true,
  586. },
  587. {
  588. label: "客户名",
  589. prop: "corpCnName",
  590. width: "160",
  591. overHidden: true,
  592. search: true,
  593. type: 'select',
  594. dicData: [],
  595. filterable: true,
  596. remote: true,
  597. dicUrl: "/api/blade-los/bcorps/listByType?shortName={{key}}",
  598. props: {
  599. label: 'cnName',
  600. value: 'cnName',
  601. res: 'data.records'
  602. },
  603. span: 6,
  604. searchOrder: 2,
  605. },
  606. {
  607. label: "客户英文",
  608. prop: "corpEnName",
  609. width: "160",
  610. overHidden: true,
  611. },
  612. {
  613. label: "船名",
  614. prop: "vesselCnName",
  615. overHidden: true,
  616. type: 'select',
  617. dicData: [],
  618. filterable: true,
  619. remote: true,
  620. dicUrl: "/api/blade-los/bvessels/list?cnName={{key}}",
  621. props: {
  622. label: 'cnName',
  623. value: 'cnName',
  624. res: 'data.records'
  625. },
  626. search: true,
  627. span: 6,
  628. searchOrder: 6,
  629. },
  630. {
  631. label: "航次",
  632. prop: "voyageNo",
  633. width: "80",
  634. overHidden: true,
  635. search: true,
  636. span: 6,
  637. searchOrder: 6,
  638. },
  639. {
  640. label: "MB/L NO",
  641. prop: "mblno",
  642. width: "80",
  643. overHidden: true,
  644. search: true,
  645. span: 6,
  646. searchOrder: 1,
  647. },
  648. {
  649. label: "HB/L NO",
  650. prop: "hblno",
  651. width: "80",
  652. overHidden: true,
  653. search: true,
  654. span: 6,
  655. searchOrder: 5,
  656. },
  657. {
  658. label: "开船日期",
  659. prop: "etd",
  660. searchProp: "etdList",
  661. type: "date",
  662. unlinkPanels: true,
  663. searchRange: true,
  664. overHidden: true,
  665. format: "yyyy-MM-dd",
  666. valueFormat: "yyyy-MM-dd HH:mm:ss",
  667. searchDefaultTime: ["00:00:00", "23:59:59"],
  668. search: true,
  669. span: 6,
  670. searchOrder: 14,
  671. },
  672. {
  673. label: "到港日期",
  674. prop: "eta",
  675. width: "80",
  676. overHidden: true,
  677. searchProp: "etaList",
  678. type: "date",
  679. unlinkPanels: true,
  680. searchRange: true,
  681. format: "yyyy-MM-dd",
  682. valueFormat: "yyyy-MM-dd HH:mm:ss",
  683. searchDefaultTime: ["00:00:00", "23:59:59"],
  684. search: true,
  685. span: 6,
  686. searchOrder: 15,
  687. },
  688. {
  689. label: "船公司",
  690. prop: "carrierCnName",
  691. overHidden: true,
  692. type: 'select',
  693. dicData: [],
  694. filterable: true,
  695. remote: true,
  696. dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
  697. props: {
  698. label: 'cnName',
  699. value: 'cnName',
  700. res: 'data.records'
  701. },
  702. search: true,
  703. span: 6,
  704. searchOrder: 8,
  705. },
  706. {
  707. label: "装货港",
  708. prop: "polEnName",
  709. width: "120",
  710. overHidden: true,
  711. },
  712. {
  713. label: "目的港",
  714. prop: "podEnName",
  715. width: "120",
  716. overHidden: true,
  717. type: 'select',
  718. dicData: [],
  719. filterable: true,
  720. remote: true,
  721. dicUrl: "/api/blade-los/bports/list?enName={{key}}",
  722. props: {
  723. label: 'enName',
  724. value: 'enName',
  725. res: 'data.records'
  726. },
  727. search: true,
  728. span: 6,
  729. searchOrder: 9,
  730. },
  731. {
  732. label: "航线",
  733. prop: "lineCnName",
  734. width: "120",
  735. overHidden: true,
  736. type: 'select',
  737. dicData: [],
  738. filterable: true,
  739. remote: true,
  740. dicUrl: "/api/blade-los/blines/list?cnName={{key}}",
  741. props: {
  742. label: 'cnName',
  743. value: 'cnName',
  744. res: 'data.records'
  745. },
  746. search: true,
  747. span: 6,
  748. searchOrder: 10,
  749. },
  750. {
  751. label: "场站",
  752. prop: "cyCnName",
  753. width: "120",
  754. overHidden: true,
  755. type: 'select',
  756. dicData: [],
  757. filterable: true,
  758. remote: true,
  759. dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
  760. props: {
  761. label: 'cnName',
  762. value: 'cnName',
  763. res: 'data.records'
  764. },
  765. search: true,
  766. span: 6,
  767. searchOrder: 11,
  768. },
  769. {
  770. label: "箱型/箱量",
  771. prop: "quantityCntrDescr",
  772. width: "120",
  773. overHidden: true,
  774. },
  775. {
  776. label: "业务来源",
  777. prop: "srcType",
  778. type: 'select',
  779. dicData: [
  780. {
  781. label: '公司',
  782. value: 'OWN'
  783. },
  784. {
  785. label: '代理',
  786. value: 'AGENT'
  787. },
  788. {
  789. label: '业务员',
  790. value: 'SALES'
  791. }
  792. ],
  793. overHidden: true,
  794. search: true,
  795. span: 6,
  796. searchOrder: 12,
  797. },
  798. {
  799. label: "来源详情",
  800. prop: "srcCnName",
  801. width: "80",
  802. overHidden: true,
  803. search: true,
  804. span: 6,
  805. searchOrder: 13,
  806. },
  807. {
  808. label: "装箱方式",
  809. prop: "loadType",
  810. type: 'select',
  811. dicData: [{
  812. label: '整箱',
  813. value: 'FCL'
  814. }, {
  815. label: '拼箱',
  816. value: 'LCL'
  817. }],
  818. overHidden: true,
  819. },
  820. {
  821. label: "货物类别",
  822. prop: "cargoType",
  823. type: 'select',
  824. dicData: [{
  825. label: '普货',
  826. value: 'dry'
  827. }, {
  828. label: '危险品',
  829. value: 'danger'
  830. }, {
  831. label: '冻柜',
  832. value: 'reefer'
  833. }],
  834. overHidden: true,
  835. },
  836. {
  837. label: "创建部门",
  838. prop: "createDeptName",
  839. width: "120",
  840. overHidden: true,
  841. type: 'tree',
  842. dicData: [],
  843. dicUrl: "/api/blade-system/dept/tree",
  844. props: {
  845. label: 'title',
  846. value: 'title',
  847. children: 'children'
  848. },
  849. search: true,
  850. span: 6,
  851. searchOrder: 16,
  852. },
  853. {
  854. label: "订舱代理",
  855. prop: "bookingAgentCnName",
  856. width: "120",
  857. overHidden: true,
  858. type: 'select',
  859. dicData: [],
  860. filterable: true,
  861. remote: true,
  862. dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
  863. props: {
  864. label: 'cnName',
  865. value: 'cnName',
  866. res: 'data.records'
  867. },
  868. search: true,
  869. span: 6,
  870. searchOrder: 16,
  871. },
  872. {
  873. label: "收货人",
  874. prop: "hConsigneeCnName",
  875. width: "120",
  876. overHidden: true,
  877. type: 'select',
  878. dicData: [],
  879. filterable: true,
  880. remote: true,
  881. dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
  882. props: {
  883. label: 'cnName',
  884. value: 'cnName',
  885. res: 'data.records'
  886. },
  887. search: true,
  888. span: 6,
  889. searchOrder: 18,
  890. },
  891. {
  892. label: "签单方式",
  893. prop: "issueType",
  894. width: "120",
  895. overHidden: true,
  896. type: 'select',
  897. dicData: [],
  898. dicUrl: "/api/blade-system/dict-biz/dictionary",
  899. props: {
  900. label: 'dictValue',
  901. value: 'dictValue',
  902. },
  903. search: true,
  904. span: 6,
  905. searchOrder: 17,
  906. },
  907. {
  908. label: "唛头",
  909. prop: "marks",
  910. width: "80",
  911. overHidden: true,
  912. },
  913. {
  914. label: "件数",
  915. prop: "quantity",
  916. overHidden: true,
  917. },
  918. {
  919. label: "毛重 (KGM)",
  920. prop: "grossWeight",
  921. width: "120",
  922. overHidden: true,
  923. },
  924. {
  925. label: "净重 (KGM)",
  926. prop: "netWeight",
  927. width: "120",
  928. overHidden: true,
  929. },
  930. {
  931. label: "体积 (CBM)",
  932. prop: "measurement",
  933. width: "120",
  934. overHidden: true,
  935. },
  936. {
  937. label: "V20",
  938. prop: "quantityV20",
  939. width: "100",
  940. overHidden: true,
  941. },
  942. {
  943. label: "V40",
  944. prop: "quantityV40",
  945. width: "100",
  946. overHidden: true,
  947. },
  948. {
  949. label: "40HC",
  950. prop: "quantityV40hc",
  951. width: "100",
  952. overHidden: true,
  953. },
  954. {
  955. label: "V45",
  956. prop: "quantityV45",
  957. width: "100",
  958. overHidden: true,
  959. },
  960. {
  961. label: "V48",
  962. prop: "quantityV48",
  963. width: "100",
  964. overHidden: true,
  965. },
  966. {
  967. label: "需陆运",
  968. prop: "isNeedLand",
  969. type: 'select',
  970. dicData: [{
  971. label: '否',
  972. value: 0
  973. }, {
  974. label: '是',
  975. value: 1
  976. }],
  977. overHidden: true,
  978. },
  979. {
  980. label: "需报关",
  981. prop: "isNeedDeclare",
  982. type: 'select',
  983. dicData: [{
  984. label: '否',
  985. value: 0
  986. }, {
  987. label: '是',
  988. value: 1
  989. }],
  990. overHidden: true,
  991. },
  992. {
  993. label: "需三检",
  994. prop: "isNeedIq",
  995. type: 'select',
  996. dicData: [{
  997. label: '否',
  998. value: 0
  999. }, {
  1000. label: '是',
  1001. value: 1
  1002. }],
  1003. overHidden: true,
  1004. },
  1005. {
  1006. label: "应收(CNY)",
  1007. prop: "amountDr",
  1008. width: "160",
  1009. overHidden: true,
  1010. },
  1011. {
  1012. label: "应付(CNY)",
  1013. prop: "amountCr",
  1014. width: "160",
  1015. overHidden: true,
  1016. },
  1017. {
  1018. label: "利润(CNY)",
  1019. prop: "amountProfit",
  1020. width: "160",
  1021. overHidden: true,
  1022. },
  1023. {
  1024. // label: "综合 USD 应付(USD) - 非 USD 外币转换为 USD",
  1025. label: "综合应付(USD)",
  1026. prop: "amountCrUsd",
  1027. width: "120",
  1028. overHidden: true,
  1029. },
  1030. {
  1031. label: "综合利润(USD)",
  1032. prop: "amountProfitUsd",
  1033. width: "120",
  1034. overHidden: true,
  1035. },
  1036. {
  1037. label: "合计应收(CNY )",
  1038. prop: "amountDrLoc",
  1039. width: "160",
  1040. overHidden: true,
  1041. },
  1042. {
  1043. label: "合计应付(CNY)",
  1044. prop: "amountCrLoc",
  1045. width: "160",
  1046. overHidden: true,
  1047. },
  1048. {
  1049. label: "合计利润(CNY)",
  1050. prop: "amountProfitLoc",
  1051. width: "160",
  1052. overHidden: true,
  1053. },
  1054. {
  1055. label: "应收对账状态",
  1056. prop: "checkDrStatusDescr",
  1057. width: "160",
  1058. overHidden: true,
  1059. },
  1060. {
  1061. label: "应付对账状态",
  1062. prop: "checkCrStatusDescr",
  1063. width: "160",
  1064. overHidden: true,
  1065. },
  1066. {
  1067. label: "应收结算状态",
  1068. prop: "stlDrStatusDescr",
  1069. width: "160",
  1070. overHidden: true,
  1071. },
  1072. {
  1073. label: "应付结算状态",
  1074. prop: "stlCrStatusDescr",
  1075. width: "160",
  1076. overHidden: true,
  1077. },
  1078. {
  1079. label: "销项发票状态",
  1080. prop: "invoiceDrStatusDescr",
  1081. width: "160",
  1082. overHidden: true,
  1083. },
  1084. {
  1085. label: "进项发票状态",
  1086. prop: "invoiceCrStatusDescr",
  1087. width: "160",
  1088. overHidden: true,
  1089. },
  1090. {
  1091. label: "创建人",
  1092. prop: "createUserName",
  1093. rules: [{
  1094. required: true,
  1095. message: "请输入创建人",
  1096. trigger: "blur"
  1097. }],
  1098. overHidden: true,
  1099. },
  1100. {
  1101. label: "创建时间",
  1102. prop: "createTime",
  1103. width: "160",
  1104. overHidden: true,
  1105. },
  1106. {
  1107. label: "更新人",
  1108. prop: "updateUserName",
  1109. overHidden: true,
  1110. },
  1111. {
  1112. label: "更新时间",
  1113. prop: "updateTime",
  1114. width: "160",
  1115. overHidden: true,
  1116. },
  1117. {
  1118. label: "edi发送状态",
  1119. prop: "ediStatus",
  1120. type: "select",
  1121. dicData: [
  1122. {
  1123. label: '未发送',
  1124. value: '0'
  1125. }, {
  1126. label: '已发送',
  1127. value: '1'
  1128. }
  1129. ],
  1130. width: "100",
  1131. overHidden: true,
  1132. },
  1133. {
  1134. label: "业务状态",
  1135. prop: "billStatus",
  1136. type: "select",
  1137. dicData: [],
  1138. props: {
  1139. label: "dictValue",
  1140. value: "dictKey"
  1141. },
  1142. width: "120",
  1143. overHidden: true,
  1144. },
  1145. {
  1146. label: "财务状态",
  1147. prop: "accountStatus",
  1148. type: "select",
  1149. dicData: [],
  1150. props: {
  1151. label: "dictValue",
  1152. value: "dictKey"
  1153. },
  1154. width: "120",
  1155. overHidden: true,
  1156. },
  1157. {
  1158. label: "审核状态",
  1159. prop: "status",
  1160. type: 'select',
  1161. dicData: [],
  1162. props: {
  1163. label: "dictValue",
  1164. value: "dictKey"
  1165. },
  1166. width: "120",
  1167. overHidden: true,
  1168. },
  1169. {
  1170. label: "备注",
  1171. prop: "remarks",
  1172. overHidden: true,
  1173. },
  1174. ]
  1175. },
  1176. // 弹窗的配置
  1177. mawbOption: {},
  1178. mawbOptionBack: {
  1179. height: '450',
  1180. calcHeight: 30,
  1181. tip: false,
  1182. searchShow: true,
  1183. searchMenuSpan: 6,
  1184. border: true,
  1185. selection: false, // 多选
  1186. dialogClickModal: false,
  1187. stripe: true,
  1188. addBtn: false,
  1189. viewBtn: false,
  1190. delBtn: false,
  1191. editBtn: false,
  1192. menu: false,
  1193. menuWidth: 'auto',
  1194. column: [
  1195. {
  1196. label: '',
  1197. prop: 'radio',
  1198. width: 35,
  1199. hide: false
  1200. },
  1201. {
  1202. label: "船名",
  1203. prop: "vesselCnName",
  1204. overHidden: true,
  1205. },
  1206. {
  1207. label: "航次",
  1208. prop: "voyageNo",
  1209. overHidden: true,
  1210. },
  1211. {
  1212. label: "MB/L NO",
  1213. prop: "mblno",
  1214. search: true,
  1215. overHidden: true,
  1216. },
  1217. {
  1218. label: "HB/L NO",
  1219. prop: "hblno",
  1220. search: true,
  1221. overHidden: true,
  1222. },
  1223. {
  1224. label: "开船日期",
  1225. prop: "etd",
  1226. overHidden: true,
  1227. },
  1228. {
  1229. label: "到港日期",
  1230. prop: "eta",
  1231. overHidden: true,
  1232. },
  1233. {
  1234. label: "装货港",
  1235. prop: "polCnName",
  1236. overHidden: true,
  1237. },
  1238. {
  1239. label: "卸货港",
  1240. prop: "podCnName",
  1241. width: "120",
  1242. overHidden: true,
  1243. },
  1244. {
  1245. label: "单据编号",
  1246. prop: "billNo",
  1247. width: "160",
  1248. overHidden: true,
  1249. },
  1250. {
  1251. label: "客户名",
  1252. prop: "corpCnName",
  1253. overHidden: true,
  1254. },
  1255. {
  1256. label: "客户英文",
  1257. prop: "corpEnName",
  1258. overHidden: true,
  1259. },
  1260. {
  1261. label: "件数",
  1262. prop: "quantity",
  1263. overHidden: true,
  1264. },
  1265. {
  1266. label: "包装单位",
  1267. prop: "packingUnit",
  1268. overHidden: true,
  1269. },
  1270. {
  1271. label: "毛重",
  1272. prop: "grossWeight",
  1273. overHidden: true,
  1274. },
  1275. {
  1276. label: "净重",
  1277. prop: "netWeight",
  1278. overHidden: true,
  1279. },
  1280. {
  1281. label: "体积",
  1282. prop: "measurement",
  1283. overHidden: true,
  1284. },
  1285. {
  1286. label: "单据日期",
  1287. prop: "billDate",
  1288. width: "150",
  1289. overHidden: true,
  1290. },
  1291. ]
  1292. },
  1293. data: [],
  1294. // 弹窗数据
  1295. mawbData: [],
  1296. // 业务状态数据
  1297. billStatusData: [],
  1298. // 财务状态
  1299. accountStatusData: [],
  1300. saberUserInfo: {}, // 当前登录人个人信息
  1301. };
  1302. },
  1303. computed: {
  1304. ...mapGetters(["permission"]),
  1305. permissionList() {
  1306. return {
  1307. addBtn: this.vaildData(this.permission.bills_add, false),
  1308. viewBtn: this.vaildData(this.permission.bills_view, false),
  1309. delBtn: this.vaildData(this.permission.bills_delete, false),
  1310. editBtn: this.vaildData(this.permission.bills_edit, false)
  1311. };
  1312. },
  1313. ids() {
  1314. let ids = [];
  1315. this.selectionList.forEach(ele => {
  1316. ids.push(ele.id);
  1317. });
  1318. return ids.join(",");
  1319. }
  1320. },
  1321. async created() {
  1322. // 获取当前登录人个人信息
  1323. this.saberUserInfo = JSON.parse(localStorage.getItem('saber-userInfo')).content
  1324. // 首页快捷跳转进来的
  1325. if (this.$route.query.home) {
  1326. this.addbtnfun()
  1327. }
  1328. if (this.$route.query.id) {
  1329. this.rowCellfun(this.$route.query.id)
  1330. }
  1331. this.option = await this.getColumnData(this.getColumnName(309.12), this.optionBack);
  1332. this.mawbOption = await this.getColumnData(this.getColumnName(309.7), this.mawbOptionBack); // 主单列表
  1333. this.billStatusWorkDictsfun() // 获取业务状态字典数据
  1334. this.accountStatusWorkDictsfun() // 获取财务状态字典数据
  1335. this.corpBcorpslistByType() // 获取客户名数据
  1336. this.vesselBvesselsListfun() // 获取船名数据
  1337. this.carrierBcorpslistByTypefun() // 获取船公司数据
  1338. this.podBportsListfun() // 获取目的港数据
  1339. this.lineBlinesListfun() // 获取航线数据
  1340. this.cyBcorpslistByType() // 获取场站数据
  1341. this.hConsigneeBcorpslistByType() // 获取收货人数据
  1342. this.createDeptLzylistfun() // 获取创建部门数据
  1343. this.bookingAgentBcorpsListfun() // 获取订舱代理数据
  1344. this.getWorkDictsfun() // 获取签单方式字典数据
  1345. this.statusWorkDictsfun() // 业务审核类型
  1346. },
  1347. methods: {
  1348. // 展开和收起
  1349. shiftCollapsiable() {
  1350. this.fold = !this.fold
  1351. if (this.fold) {
  1352. this.option.searchMenuSpan = 24
  1353. } else {
  1354. this.option.searchMenuSpan = 6
  1355. }
  1356. },
  1357. // 下拉的回调
  1358. corpChange(value, name) {
  1359. this.query[name] = value
  1360. },
  1361. // 获取签单方式字典数据
  1362. getWorkDictsfun() {
  1363. getWorkDicts('issue_type_F').then(res => {
  1364. this.issueTypeData = res.data.data
  1365. this.findObject(this.option.column, "issueType").dicData = res.data.data
  1366. })
  1367. },
  1368. // tabs切换筛选
  1369. handleClick(tab, event) {
  1370. if (this.query.billStatus == 4) {
  1371. this.query.billStatus = null
  1372. }
  1373. this.onLoad(this.page, this.query);
  1374. },
  1375. // 获取委托人数据
  1376. corpBcorpslistByType(cnName) {
  1377. getBcorpslistByType(1, 10, { cnName }).then(res => {
  1378. this.corpData = res.data.data.records
  1379. this.findObject(this.option.column, "corpCnName").dicData = res.data.data.records
  1380. })
  1381. },
  1382. // 获取收货人数据
  1383. hConsigneeBcorpslistByType(cnName) {
  1384. getBcorpslistByType(1, 10, { cnName }).then(res => {
  1385. this.hConsigneeData = res.data.data.records
  1386. this.findObject(this.option.column, "hConsigneeCnName").dicData = res.data.data.records
  1387. })
  1388. },
  1389. // 获取船名
  1390. vesselBvesselsListfun(enName) {
  1391. getBvesselsList(1, 10, { enName }).then(res => {
  1392. this.vesselData = res.data.data.records
  1393. this.findObject(this.option.column, "vesselCnName").dicData = res.data.data.records
  1394. })
  1395. },
  1396. // 获取船公司数据
  1397. carrierBcorpslistByTypefun(cnName) {
  1398. let corpTypeName = '船公司'
  1399. getBcorpslistByType(1, 10, { cnName, corpTypeName }).then(res => {
  1400. this.carrierData = res.data.data.records
  1401. this.findObject(this.option.column, "carrierCnName").dicData = res.data.data.records
  1402. })
  1403. },
  1404. // 卸货港数据
  1405. podBportsListfun(enName) {
  1406. bportsList(1, 10, { enName }).then(res => {
  1407. this.podData = res.data.data.records
  1408. this.findObject(this.option.column, "podEnName").dicData = res.data.data.records
  1409. })
  1410. },
  1411. // 航线数据
  1412. lineBlinesListfun(cnName) {
  1413. blinesList(1, 10, { cnName }).then(res => {
  1414. this.lineData = res.data.data.records
  1415. this.findObject(this.option.column, "lineCnName").dicData = res.data.data.records
  1416. })
  1417. },
  1418. // 获取场站数据
  1419. cyBcorpslistByType(cnName) {
  1420. let corpTypeName = '场站'
  1421. getBcorpslistByType(1, 10, { cnName, corpTypeName }).then(res => {
  1422. this.cyData = res.data.data.records
  1423. this.findObject(this.option.column, "cyCnName").dicData = res.data.data.records
  1424. })
  1425. },
  1426. // 订舱代理
  1427. bookingAgentBcorpsListfun(cnName) {
  1428. let corpTypeName = '国内直接客户,国内同行及代理,国外直接客户,国外同行及代理'
  1429. getBcorpslistByType(1, 10, { cnName, corpTypeName }).then(res => {
  1430. this.bookingAgentData = res.data.data.records
  1431. this.findObject(this.option.column, "bookingAgentCnName").dicData = res.data.data.records
  1432. })
  1433. },
  1434. // 获取核算部分数据 // 机构管理接口
  1435. createDeptLzylistfun() {
  1436. getDeptTree().then(res => {
  1437. this.createDeptData = res.data.data
  1438. this.findObject(this.option.column, "createDeptName").dicData = res.data.data;
  1439. })
  1440. },
  1441. // 获取业务状态字典数据
  1442. billStatusWorkDictsfun() {
  1443. getWorkDicts('bill_status').then(res => {
  1444. this.findObject(this.option.column, "billStatus").dicData = res.data.data;
  1445. this.billStatusData = res.data.data
  1446. })
  1447. },
  1448. // 获取财务状态字典数据
  1449. accountStatusWorkDictsfun() {
  1450. getWorkDicts('account_status').then(res => {
  1451. this.findObject(this.option.column, "accountStatus").dicData = res.data.data;
  1452. this.accountStatusData = res.data.data
  1453. })
  1454. },
  1455. // 获取业务审核状态
  1456. statusWorkDictsfun() {
  1457. getWorkDicts('audit_status_los').then(res => {
  1458. this.findObject(this.option.column, "status").dicData = res.data.data;
  1459. this.auditStatusList = res.data.data;
  1460. })
  1461. },
  1462. // 添加到主单
  1463. increaseMawb() {
  1464. if (this.selectionList.length === 0) {
  1465. this.$message.warning("请选择至少一条数据");
  1466. return;
  1467. }
  1468. // 判断是否可以编辑别人业务 true 就没有权限
  1469. if (this.ModifyOthersfun()) return;
  1470. const obj = this.selectionList[0]
  1471. for (let item of this.selectionList) {
  1472. if (item.billType != 'MH') {
  1473. this.$message.warning("请选择分单");
  1474. return;
  1475. }
  1476. if (obj.placeReceiptId != item.placeReceiptId) {
  1477. // 收货地
  1478. this.$message.warning("请选择收货地相同的");
  1479. return
  1480. }
  1481. if (obj.polId != item.polId) {
  1482. // 装货港一样
  1483. this.$message.warning("请选择装货港相同的");
  1484. return
  1485. }
  1486. }
  1487. this.mawbQuery.placeReceiptName = obj.placeReceiptName
  1488. this.mawbQuery.polCnName = obj.polCnName
  1489. this.$nextTick(() => {
  1490. this.dialogVisible = true
  1491. this.mawbOnLoad(this.mawbPage)
  1492. })
  1493. },
  1494. // 退舱
  1495. Disembarkingfun() {
  1496. if (this.selectionList.length === 0) {
  1497. this.$message.warning("请选择至少一条数据");
  1498. return;
  1499. }
  1500. // 判断是否可以编辑别人业务 true 就没有权限
  1501. if (this.ModifyOthersfun()) return;
  1502. this.billsDisembarkingfun(this.ids)
  1503. },
  1504. // 退舱接口
  1505. billsDisembarkingfun(ids) {
  1506. aeabillsDisembarking(ids).then(res => {
  1507. this.$message({
  1508. type: "success",
  1509. message: "操作成功!"
  1510. });
  1511. this.onLoad(this.page)
  1512. })
  1513. },
  1514. // 撤销退仓
  1515. revokeWithdrawalfun() {
  1516. if (this.selectionList.length === 0) {
  1517. this.$message.warning("请选择至少一条数据");
  1518. return;
  1519. }
  1520. this.billsRevokeDisembarkingfun(this.ids)
  1521. },
  1522. // 撤销退舱接口
  1523. billsRevokeDisembarkingfun(ids) {
  1524. aeabillsRevokeDisembarking(ids).then(res => {
  1525. this.$message({
  1526. type: "success",
  1527. message: "操作成功!"
  1528. });
  1529. this.onLoad(this.page)
  1530. })
  1531. },
  1532. // 下拉显示数据
  1533. async expandChange(row) {
  1534. if (row.billType == 'MM') {
  1535. this.SplitLoading = true
  1536. const res = await aeabillsListAll({ masterId: row.id })
  1537. this.$set(row, 'billsListAllData', res.data.data)
  1538. this.SplitLoading = false
  1539. } else {
  1540. this.$refs.crud.toggleRowExpansion(row, false)
  1541. }
  1542. },
  1543. // 弹窗单选
  1544. radioInput(row) {
  1545. console.log(row, 2134)
  1546. console.log(this.dialogRadio, 2083)
  1547. },
  1548. // 弹窗确认
  1549. AddToMainOrder() {
  1550. if (!this.dialogRadio) {
  1551. this.$message.warning("请选择一条数据");
  1552. return
  1553. }
  1554. this.billsIncreaseReinsurancePolicyfun(this.ids, this.dialogRadio)
  1555. },
  1556. // 添加到主单接口
  1557. billsIncreaseReinsurancePolicyfun(ids, id) {
  1558. aeabillsIncreaseReinsurancePolicy(ids, id).then(res => {
  1559. this.dialogRadio = null
  1560. this.$message({
  1561. type: "success",
  1562. message: "操作成功!"
  1563. });
  1564. this.dialogVisible = false
  1565. this.onLoad(this.page)
  1566. })
  1567. },
  1568. // 弹窗关闭
  1569. handleClose(done) {
  1570. done()
  1571. },
  1572. toAddEdit() {
  1573. this.datekey = Date.now()
  1574. },
  1575. // 详情的返回列表
  1576. goBack() {
  1577. // 初始化数据
  1578. // this.detailData = this.$options.data().detailData;
  1579. if (JSON.stringify(this.$route.query) != "{}") {
  1580. this.$router.$avueRouter.closeTag();
  1581. this.$router.push({
  1582. path: "/iosBasicData/AirtransportExport/bills/index"
  1583. });
  1584. }
  1585. this.isShow = true;
  1586. this.onLoad(this.page, this.search);
  1587. },
  1588. // 新增弹窗开启
  1589. addbtnfun() {
  1590. this.detailData.seeDisabled = false
  1591. this.isShow = false
  1592. },
  1593. // 复制单据
  1594. CopyDocumentsfun() {
  1595. if (this.selectionList.length !== 1) {
  1596. this.$message.warning("请选择一条数据");
  1597. return;
  1598. }
  1599. this.detailData.seeDisabled = false
  1600. this.detailData.id = this.selectionList[0].id
  1601. this.isShow = false
  1602. this.$nextTick(() => {
  1603. this.$refs.billsDetails.pageLoading = true
  1604. this.$refs.billsDetails.billsCopyBillsfun(this.selectionList[0].id,'复制费用')
  1605. })
  1606. },
  1607. // 编辑详情打开
  1608. rowCellfun(id, row) {
  1609. this.detailData = {
  1610. id: id
  1611. };
  1612. if (row) {
  1613. if (this.saberUserInfo.role_name.indexOf('admin') == -1 ? this.saberUserInfo.role_name.indexOf('允许修改他人业务') == -1 ? this.saberUserInfo.user_id == row.createUser : true : true) {
  1614. this.detailData.seeDisabled = false
  1615. } else {
  1616. this.detailData.seeDisabled = true
  1617. }
  1618. } else {
  1619. this.detailData.seeDisabled = false
  1620. }
  1621. this.isShow = false
  1622. this.$nextTick(() => {
  1623. this.$refs.billsDetails.pageLoading = true
  1624. this.$refs.billsDetails.billsDetailfun(id)
  1625. })
  1626. },
  1627. rowSave(row, done, loading) {
  1628. aeabillsSubmit(row).then(() => {
  1629. this.onLoad(this.page);
  1630. this.$message({
  1631. type: "success",
  1632. message: "操作成功!"
  1633. });
  1634. done();
  1635. }, error => {
  1636. loading();
  1637. window.console.log(error);
  1638. });
  1639. },
  1640. rowUpdate(row, index, done, loading) {
  1641. aeabillsSubmit(row).then(() => {
  1642. this.onLoad(this.page);
  1643. this.$message({
  1644. type: "success",
  1645. message: "操作成功!"
  1646. });
  1647. done();
  1648. }, error => {
  1649. loading();
  1650. console.log(error);
  1651. });
  1652. },
  1653. rowDel(row) {
  1654. this.$confirm("确定将选择数据删除?", {
  1655. confirmButtonText: "确定",
  1656. cancelButtonText: "取消",
  1657. type: "warning"
  1658. })
  1659. .then(() => {
  1660. return aeabillsRemove(row.id);
  1661. })
  1662. .then(() => {
  1663. this.onLoad(this.page);
  1664. this.$message({
  1665. type: "success",
  1666. message: "操作成功!"
  1667. });
  1668. });
  1669. },
  1670. // 删除
  1671. handleDelete() {
  1672. if (this.selectionList.length === 0) {
  1673. this.$message.warning("请选择至少一条数据");
  1674. return;
  1675. }
  1676. // 判断是否可以编辑别人业务 true 就没有权限
  1677. if (this.ModifyOthersfun()) return;
  1678. // 已经提交请核的提示不让删除
  1679. let sumArr = []
  1680. const h = this.$createElement
  1681. for (let item of this.selectionList) {
  1682. if (item.status == 1) {
  1683. sumArr.push(h('p', `序号${item.$index + 1}的数据已经提交请核请勿删除`))
  1684. }
  1685. }
  1686. if (sumArr.length != 0) {
  1687. this.$confirm('提示', {
  1688. message: h('div', sumArr),
  1689. confirmButtonText: "确定",
  1690. cancelButtonText: "取消",
  1691. type: "warning"
  1692. })
  1693. return;
  1694. }
  1695. this.$confirm("确定将选择数据删除?", {
  1696. confirmButtonText: "确定",
  1697. cancelButtonText: "取消",
  1698. type: "warning"
  1699. })
  1700. .then(() => {
  1701. return aeabillsRemove(this.ids);
  1702. })
  1703. .then(() => {
  1704. this.onLoad(this.page);
  1705. this.$message({
  1706. type: "success",
  1707. message: "操作成功!"
  1708. });
  1709. this.$refs.crud.toggleSelection();
  1710. });
  1711. },
  1712. // 判断是否可以编辑别人业务
  1713. ModifyOthersfun() {
  1714. let sumArr = []
  1715. const h = this.$createElement
  1716. // 判断是否有权限
  1717. if (this.saberUserInfo.role_name.indexOf('admin') != -1 ? this.saberUserInfo.role_name.indexOf('允许修改他人业务') != -1 : false) return false
  1718. // 当前登录人和选择的创建人对比是不是一个人
  1719. for (let item of this.selectionList) {
  1720. if (this.saberUserInfo.user_id != item.createUser) {
  1721. sumArr.push(h('p', `你没有"允许修改他人业务"权限,请重新选择数据`))
  1722. }
  1723. }
  1724. if (sumArr.length != 0) {
  1725. this.$confirm('提示', {
  1726. message: h('div', sumArr),
  1727. confirmButtonText: "确定",
  1728. cancelButtonText: "取消",
  1729. type: "warning"
  1730. }).catch(err => { })
  1731. return true
  1732. }
  1733. },
  1734. beforeOpen(done, type) {
  1735. if (["edit", "view"].includes(type)) {
  1736. aeabillsDetail(this.form.id).then(res => {
  1737. this.form = res.data.data;
  1738. });
  1739. }
  1740. done();
  1741. },
  1742. searchReset() {
  1743. this.query = {};
  1744. this.onLoad(this.page);
  1745. },
  1746. // 搜索
  1747. searchChange(params, done) {
  1748. this.query = params;
  1749. this.page.currentPage = 1;
  1750. // // 判断检索条件是否可以使用
  1751. // if(this.etdDisabled) {
  1752. // this.query.etdList = this.etdList
  1753. // }else {
  1754. // delete params.etdList
  1755. // }
  1756. // if(this.etaDisabled) {
  1757. // this.query.etaList = this.etaList
  1758. // }else {
  1759. // delete params.etaList
  1760. // }
  1761. this.onLoad(this.page, params);
  1762. done();
  1763. },
  1764. selectionChange(list) {
  1765. this.selectionList = list;
  1766. },
  1767. selectionClear() {
  1768. this.selectionList = [];
  1769. this.$refs.crud.toggleSelection();
  1770. },
  1771. currentChange(currentPage) {
  1772. this.page.currentPage = currentPage;
  1773. },
  1774. sizeChange(pageSize) {
  1775. this.page.pageSize = pageSize;
  1776. },
  1777. refreshChange() {
  1778. this.onLoad(this.page, this.query);
  1779. },
  1780. // 列表获取数据
  1781. onLoad(page, params = {}) {
  1782. this.loading = true;
  1783. aeabillsList(page.currentPage, page.pageSize, {
  1784. ...Object.assign(params, this.query),
  1785. businessType: 'AE',
  1786. status: this.query.billStatus == 3 ? 3 : undefined,
  1787. }).then(res => {
  1788. const data = res.data.data;
  1789. this.page.total = data.total;
  1790. this.data = data.records.map(item => {
  1791. item.billsListAllData = []
  1792. item.billStatus = item.billStatus + ''
  1793. item.accountStatus = item.accountStatus + ''
  1794. item.status = item.status + ''
  1795. return item
  1796. })
  1797. this.loading = false;
  1798. this.selectionClear();
  1799. });
  1800. },
  1801. // 弹窗表格获取数据
  1802. mawbOnLoad(page, params = {}) {
  1803. this.mawbloading = true;
  1804. aeabillsList(page.currentPage, page.pageSize,
  1805. { ...Object.assign(params, this.mawbQuery), businessType: 'AE' }).then(res => {
  1806. const data = res.data.data;
  1807. this.mawbPage.total = data.total;
  1808. this.mawbData = data.records;
  1809. this.mawbloading = false;
  1810. })
  1811. },
  1812. // 弹窗列表的分页
  1813. mawbSizeChange(val) {
  1814. this.mawbPage.pageSize = val
  1815. this.mawbOnLoad(this.mawbPage, this.mawbQuery)
  1816. },
  1817. // 弹窗列表的分页
  1818. mawbCurrentChange(val) {
  1819. this.mawbPage.currentPage = val
  1820. this.mawbOnLoad(this.mawbPage, this.mawbQuery)
  1821. },
  1822. // 弹窗的搜索
  1823. mawbSearch(params, done) {
  1824. this.mawbQuery = params;
  1825. this.mawbPage.currentPage = 1;
  1826. this.mawbOnLoad(this.mawbPage, params)
  1827. done()
  1828. },
  1829. //自定义列保存
  1830. async saveColumnTwo(ref, option, optionBack, code) {
  1831. /**
  1832. * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
  1833. * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
  1834. * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
  1835. */
  1836. const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
  1837. if (inSave) {
  1838. this.$message.success("保存成功");
  1839. //关闭窗口
  1840. this.$refs[ref].$refs.dialogColumn.columnBox = false;
  1841. }
  1842. },
  1843. //自定义列重置
  1844. async resetColumnTwo(ref, option, optionBack, code) {
  1845. this[option] = this[optionBack];
  1846. const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
  1847. if (inSave) {
  1848. this.$message.success("重置成功");
  1849. this.$refs[ref].$refs.dialogColumn.columnBox = false;
  1850. }
  1851. },
  1852. // 更改表格颜色
  1853. headerClassName(tab) {
  1854. //颜色间隔
  1855. let back = ""
  1856. if (tab.columnIndex >= 0 && tab.column.level === 1) {
  1857. if (tab.columnIndex % 2 === 0) {
  1858. back = "back-one"
  1859. } else if (tab.columnIndex % 2 === 1) {
  1860. back = "back-two"
  1861. }
  1862. }
  1863. return back;
  1864. },
  1865. }
  1866. };
  1867. </script>
  1868. <style scoped>
  1869. ::v-deep#out-table .back-one {
  1870. background: #ecf5ff !important;
  1871. text-align: center;
  1872. }
  1873. ::v-deep#out-table .back-two {
  1874. background: #ecf5ff !important;
  1875. text-align: center;
  1876. }
  1877. /deep/ .el-col-md-8 {
  1878. width: 24.33333%;
  1879. }
  1880. ::v-deep.el-form-item {
  1881. margin-bottom: 0;
  1882. }
  1883. </style>