tranManagementVehicleDispatching.vue 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263
  1. // 汽车调度派车
  2. <template>
  3. <div class="container">
  4. <el-row>
  5. <el-col :span="20">
  6. <h2 class="bg-left title">汽车调度</h2>
  7. </el-col>
  8. <el-col :span="4" class="bg-right">
  9. <el-button class="bg-bottom" type="primary" size="small" @click="revert()"><img width="6" height="10"
  10. style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
  11. </el-button>
  12. </el-col>
  13. </el-row>
  14. <div class="center">
  15. <el-form ref="deptBudgetList" :model="deptBudgetList" label-width="110px">
  16. <div class="basicInformation">
  17. <div class="small-title" style="font-size: 16px">任务详情</div>
  18. <el-row>
  19. <el-col :span="8">
  20. <el-form-item label="任务编号" span="1" prop="processNo">
  21. <el-input type="text" class="row-item" v-model="deptBudgetList.processNo" disabled></el-input>
  22. </el-form-item>
  23. </el-col>
  24. <el-col :span="8">
  25. <el-form-item label="货名" span="1">
  26. <el-input type="text" class="row-item" v-model="deptBudgetList.goodsName" disabled></el-input>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="8">
  30. <el-form-item label="重量(吨)" span="1" prop="tare" class="readonly">
  31. <el-input type="text" class="row-item" v-model="deptBudgetList.weight" disabled></el-input>
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="8">
  35. <el-form-item label="发货地址" span="1" prop="netWeight">
  36. <el-input type="text" class="row-item" v-model="fhaddress" disabled></el-input>
  37. <!-- {{ deptBudgetList.sendPrivate }}{{ deptBudgetList.sendCity
  38. }}{{ deptBudgetList.sendArea
  39. }}{{ deptBudgetList.sendDetailedAddress }} -->
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="8">
  43. <el-form-item label="发货人" span="1" prop="agent">
  44. <el-input type="text" class="row-item" v-model="deptBudgetList.sender" disabled></el-input>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="8">
  48. <el-form-item label="发货人电话" span="1" prop="agent">
  49. <el-input type="text" class="row-item" v-model="deptBudgetList.senderPhone" disabled></el-input>
  50. </el-form-item>
  51. </el-col>
  52. <el-col :span="8">
  53. <el-form-item label="收货地址" span="1" prop="netWeight">
  54. <el-input type="text" class="row-item" v-model="shaddress" disabled></el-input>
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="8">
  58. <el-form-item label="收货人电话" span="1" prop="receiverPhone">
  59. <el-input type="text" class="row-item" v-model="deptBudgetList.receiverPhone" disabled></el-input>
  60. </el-form-item>
  61. </el-col>
  62. <el-col :span="8">
  63. <el-form-item label="发货日期" span="1" prop="inOutDate" class="deliverydate">
  64. <el-input type="text" class="row-item" v-model="deptBudgetList.deliveryDateStart" disabled></el-input>
  65. </el-form-item>
  66. </el-col>
  67. <el-col :span="8">
  68. <el-form-item label="最晚到货日期" span="1" prop="inOutDate" class="deliverydate">
  69. <el-input type="text" class="row-item" v-model="deptBudgetList.deliveryDateEnd" disabled></el-input>
  70. </el-form-item>
  71. </el-col>
  72. <el-col :span="8">
  73. <el-form-item v-if="deptBudgetList.taskType=='移库'" label="移库编号" span="1" prop="contractNo">
  74. <el-input type="text" class="row-item" v-model="deptBudgetList.contractNo" disabled></el-input>
  75. </el-form-item>
  76. <el-form-item v-else label="合同编号" span="1" prop="contractNo">
  77. <el-input type="text" class="row-item" v-model="deptBudgetList.contractNo" disabled></el-input>
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="8">
  81. <el-form-item label="关联合同" v-if="deptBudgetList.relatedContract" span="1" prop="inOutDate"
  82. class="relatedContract">
  83. <el-input type="text" class="row-item" v-model="deptBudgetList.relatedContract" disabled></el-input>
  84. </el-form-item>
  85. </el-col>
  86. </el-row>
  87. <div class="small-title" style="font-size: 16px">派车
  88. <el-radio-group @change='pricetypechange' v-model="pricetype">
  89. <el-radio label="1">元/吨计费</el-radio>
  90. <el-radio label="2">元/车计费</el-radio>
  91. </el-radio-group>
  92. </div>
  93. <div class="myTest">
  94. <el-form-item v-if='pricetype==1' label="当前运输单价(元/吨):" prop="tranPrice" label-width="150px" class="input-item-margin">
  95. <el-input v-model="deptBudgetList.tranPrice" maxlength="70" disabled />
  96. </el-form-item>
  97. <el-form-item v-else label="当前运输单价(元/车):" prop="tranPrice" label-width="150px" class="input-item-margin">
  98. <el-input v-model="deptBudgetList.tranPriceCar" maxlength="70" disabled />
  99. </el-form-item>
  100. <el-form-item v-if='pricetype==1' label="审核中的运输总价(元/吨):" prop="tranPriceIng" label-width="180px" class="input-item-margin">
  101. <el-input v-if="deptBudgetList.priceStatus=='审核中'" :disabled="readonly"
  102. v-model="deptBudgetList.tranPriceIng" maxlength="70" />
  103. <el-input v-else v-model="deptBudgetList.tranPriceIng" maxlength="70" />
  104. </el-form-item>
  105. <el-form-item v-else label="审核中的运输总价(元/车):" prop="tranPriceIng" label-width="180px" class="input-item-margin">
  106. <el-input v-if="deptBudgetList.priceStatusCar=='审核中'" :disabled="readonly"
  107. v-model="deptBudgetList.tranPriceIngCar" maxlength="70" />
  108. <el-input v-else v-model="deptBudgetList.tranPriceIngCar" maxlength="70" />
  109. </el-form-item>
  110. <div class="input-item-margin">
  111. <div v-if="deptBudgetList.priceStatus=='审核中'&&pricetype==1">
  112. <el-button type="primary" v-hasPermission="`tranManager.vehicleDispatching.reprice`" size="small"
  113. @click="examine(1)">审核中
  114. </el-button>
  115. </div>
  116. <el-button v-if="deptBudgetList.priceStatus!='审核中'&&pricetype==1" type="primary" @click="priceSubmit(1)">提交</el-button>
  117. <div v-if="deptBudgetList.priceStatusCar=='审核中'&&pricetype==2">
  118. <el-button type="primary" v-hasPermission="`tranManager.vehicleDispatching.reprice`" size="small"
  119. @click="examine(2)">审核中
  120. </el-button>
  121. </div>
  122. <el-button v-if="deptBudgetList.priceStatusCar!='审核中'&&pricetype==2" type="primary" @click="priceSubmit(2)">提交</el-button>
  123. </div>
  124. </div>
  125. <div class="content3" v-for="(item, index) in driverlist" :key="index">
  126. <div class="content3-item1">
  127. <div class="">
  128. <span style="margin-left: 30px;font-weight: 600;">司机-{{ index + 1 }}</span>
  129. <span class="noservice" v-show="item.status == '未装车'">{{
  130. item.status
  131. }}</span>
  132. <span class="service" v-show="item.status == '已装车'">{{
  133. item.status
  134. }}</span>
  135. <span class="serviced" v-show="item.status == '已送达'">{{
  136. item.status
  137. }}</span>
  138. </div>
  139. <el-col :span="8">
  140. <el-form-item label="姓名:" span="1" prop="driverName" label-width="125px">
  141. <el-select ref="driverSelect" v-show="!item.temporaryDriverFlag" @visible-change="clearBlur"
  142. v-model="item.driver" filterable clearable placeholder="请选择司机" class="row-item" @change="
  143. (val) => {
  144. carchange(val, index)
  145. }
  146. ">
  147. <el-option v-for="(items, index) in carList" :key="index" :label="items.driverName"
  148. :value="items.driverName" />
  149. </el-select>
  150. <span v-show="
  151. item.temporaryDriverFlag == 0 ||
  152. item.temporaryDriverFlag == 1
  153. ">{{ item.driver }}</span>
  154. </el-form-item>
  155. </el-col>
  156. <el-col :span="8">
  157. <el-form-item label="司机电话:" span="1" prop="impurity" label-width="125px">
  158. <el-select v-show="!item.temporaryDriverFlag" v-model="item.driverPhone" placeholder="请选择司机电话"
  159. filterable clearable class="row-item" @change="
  160. (val) => {
  161. phonechange(val, index)
  162. }
  163. ">
  164. <el-option v-for="(items, index) in carList" :key="index" :label="items.driverPhone"
  165. :value="items.driverPhone" />
  166. </el-select>
  167. <span v-show="
  168. item.temporaryDriverFlag == 0 ||
  169. item.temporaryDriverFlag == 1
  170. ">{{ item.driverPhone }}</span>
  171. </el-form-item>
  172. </el-col>
  173. <el-col :span="8">
  174. <el-form-item label="车牌号:" span="1" prop="carNo" label-width="125px">
  175. <el-input :disabled="readonly" v-model="item.carNo" placeholder="" maxlength="120" size="small" />
  176. </el-form-item>
  177. </el-col>
  178. <el-col :span="8">
  179. <el-form-item label="派车编号:" span="1" prop="carModel" label-width="125px">
  180. <el-input :disabled="readonly" v-model="item.tranCarNo" maxlength="120" size="small" />
  181. </el-form-item>
  182. </el-col>
  183. <el-col :span="8">
  184. <el-form-item label="箱号:" span="1" prop="carModel" label-width="125px">
  185. <el-input v-if="item.status == '已装车'||item.status == '已送达'" :disabled="readonly" v-model="item.caseNo"
  186. maxlength="120" size="small" />
  187. <el-input v-else v-model="item.caseNo" placeholder="请输入箱号" maxlength="120" size="small" />
  188. </el-form-item>
  189. </el-col>
  190. <el-col :span="8">
  191. <el-form-item label="封号:" span="1" prop="carModel" label-width="125px">
  192. <el-input v-if="item.status == '已装车'||item.status == '已送达'" v-model="item.titleNo" placeholder=""
  193. :disabled="readonly" maxlength="120" size="small" />
  194. <el-input v-model="item.titleNo" placeholder="请输入封号" v-else maxlength="120" size="small" />
  195. </el-form-item>
  196. </el-col>
  197. <el-col :span="8">
  198. <el-form-item label="车型:" span="1" prop="carModel" label-width="125px">
  199. <el-input :disabled="readonly" v-model="item.carModel" placeholder="" maxlength="120" size="small" />
  200. </el-form-item>
  201. </el-col>
  202. <el-col :span="8">
  203. <el-form-item label="车长:" span="1" prop="carLength" label-width="125px">
  204. <el-input :disabled="readonly" v-model="item.carLength" placeholder="" maxlength="120" size="small" />
  205. </el-form-item>
  206. </el-col>
  207. <el-col :span="8">
  208. <el-form-item label="载重(吨):" span="1" prop="loadWeight" label-width="125px">
  209. <el-input :disabled="readonly" v-model="item.loadWeight" placeholder="" maxlength="120"
  210. size="small" />
  211. </el-form-item>
  212. </el-col>
  213. <el-col :span="8">
  214. <el-form-item v-if='item.billingMethod==1' label="运输单价(元/吨):" span="1" prop="carModel" label-width="125px">
  215. <el-input :disabled="readonly" v-model="item.tranPrice" size="small" />
  216. </el-form-item>
  217. <el-form-item v-else label="运输单价(元/车):" span="1" prop="carModel" label-width="125px">
  218. <el-input :disabled="readonly" v-model="item.tranPrice" size="small" />
  219. </el-form-item>
  220. </el-col>
  221. <span v-if="item.status == '未装车'||item.temporaryDriverFlag!=0" width="22" height="22" class="del"
  222. @click="del(index, item,0)" src="../../../public/img/del.png" alt="">×</span>
  223. </div>
  224. </div>
  225. <div class="contentitem" v-for="(item, index) in teamlist" :key="'team'+index">
  226. <div class="content3-item1">
  227. <el-col :span="8">
  228. <!-- <span style="margin-left: 30px;font-weight: 600;">车队-{{ index + 1 }}</span> -->
  229. <el-form-item :label="'车队-'+(index + 1 )" span="1" prop="carModel" label-width="125px">
  230. <el-input :disabled="item.id?true:false" v-model="item.fleetName" size="small" />
  231. </el-form-item>
  232. </el-col>
  233. <el-col :span="8">
  234. <el-form-item v-if='item.billingMethod==1' label="运输单价(元/吨):" span="1" prop="carModel" label-width="125px">
  235. <el-input :disabled="readonly" v-model="item.tranPrice" size="small" />
  236. </el-form-item>
  237. <el-form-item v-else label="运输单价(元/车):" span="1" prop="carModel" label-width="125px">
  238. <el-input :disabled="readonly" v-model="item.tranPrice" size="small" />
  239. </el-form-item>
  240. </el-col>
  241. <span v-if="!item.id" width="22" height="22" class="del"
  242. @click="del(index, item,1)" src="../../../public/img/del.png" alt="">×</span>
  243. </div>
  244. </div>
  245. <div style="text-align: right; color: #8890b1; font-size: 16px">
  246. 共{{ total }}/{{ deptBudgetList.weight }}
  247. </div>
  248. <el-button class="add" type="primary" size="small" @click="add()">
  249. <!-- <img width="22" height="22" src="../../../public/img/add.png" alt="" /> -->
  250. <div class="spans">添加司机</div>
  251. </el-button>
  252. <el-button class="add" type="primary" size="small" @click="addteam()">
  253. <div class="spans">添加车队</div>
  254. </el-button>
  255. <div style="text-align: right; padding: 10px">
  256. <el-button class="bg-bottom-up" type="primary" size="small" @click="submit()">提交</el-button>
  257. </div>
  258. </div>
  259. </el-form>
  260. </div>
  261. </div>
  262. </template>
  263. <script>
  264. import Pagination from '@/components/Pagination'
  265. import WsUpload from '@/components/WsUpload'
  266. import {
  267. seeCat,
  268. nameXiala,
  269. arrange,
  270. dispatchCat,
  271. delhaulagestage,
  272. setUpTranPrice,
  273. setUpTranPriceCar
  274. } from '@/model/transport/index'
  275. // import { dayjs, fmoney, EventBus } from 'base-core-lib'
  276. import {
  277. dayjs,
  278. EventBus
  279. } from 'base-core-lib'
  280. export default {
  281. name: 'viewSpareMoney',
  282. components: {
  283. WsUpload,
  284. Pagination,
  285. },
  286. watch: {
  287. // vesselId(val) {
  288. // this.getList()
  289. // },
  290. isShow(val) {
  291. this.showType = val
  292. },
  293. },
  294. data() {
  295. return {
  296. fhaddress: '',
  297. shaddress: '',
  298. // 是否显示
  299. showType: true,
  300. deptBudgetTotal: 0,
  301. currentPage: 1,
  302. pageSize: 10,
  303. pricetype:'1',
  304. searchType: 1,
  305. startDate: null,
  306. endDate: null,
  307. carList: [],
  308. // 提交类型
  309. readonly: true,
  310. tranPriceApprove: {},
  311. size: 10,
  312. compId: localStorage.getItem('ws-pf_compId'),
  313. date: {
  314. year: dayjs().format('YYYY'),
  315. month: dayjs().format('MM'),
  316. },
  317. deptBudgetList: {
  318. tranCarInfoList: [],
  319. },
  320. pickerBeginDateBefore: {
  321. disabledDate: (time) => {
  322. return time.getTime() > Date.now()
  323. },
  324. },
  325. accessoryTFs: false,
  326. index: 0,
  327. }
  328. },
  329. activated() {
  330. this.getList()
  331. },
  332. computed: {
  333. total: function() {
  334. if (this.deptBudgetList.tranCarInfoList.length > 0) {
  335. var maxStorage = 0
  336. for (var i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  337. if(this.deptBudgetList.tranCarInfoList[i].loadWeight){
  338. maxStorage += Number(
  339. this.deptBudgetList.tranCarInfoList[i].loadWeight
  340. )
  341. }
  342. }
  343. return maxStorage
  344. }
  345. },
  346. teamlist: function() {
  347. if (this.deptBudgetList.tranCarInfoList.length > 0) {
  348. var arr = []
  349. for (var i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  350. if(this.deptBudgetList.tranCarInfoList[i].fleetFlag==1){
  351. arr.push(this.deptBudgetList.tranCarInfoList[i])
  352. }
  353. }
  354. return arr
  355. }
  356. },
  357. driverlist: function() {
  358. if (this.deptBudgetList.tranCarInfoList.length > 0) {
  359. var arr = []
  360. for (var i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  361. if(this.deptBudgetList.tranCarInfoList[i].fleetFlag==0){
  362. arr.push(this.deptBudgetList.tranCarInfoList[i])
  363. }
  364. }
  365. return arr
  366. }
  367. },
  368. },
  369. methods: {
  370. pricetypechange(e){
  371. console.log(e)
  372. this.deptBudgetList.billingMethod=e
  373. if (this.deptBudgetList.tranCarInfoList.length > 0) {
  374. for (var i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  375. if(!this.deptBudgetList.tranCarInfoList[i].id){
  376. this.deptBudgetList.tranCarInfoList[i].billingMethod=e
  377. if(e==1){
  378. this.deptBudgetList.tranCarInfoList[i].tranPrice=this.deptBudgetList.tranPrice
  379. }else{
  380. this.deptBudgetList.tranCarInfoList[i].tranPrice=this.deptBudgetList.tranPriceCar
  381. }
  382. }
  383. }
  384. }
  385. },
  386. clearBlur(e) {
  387. let k = this.$refs.driverSelect
  388. if (!e) {
  389. for (let i = 0; i < k.length; i++) {
  390. k[i].blur()
  391. }
  392. }
  393. },
  394. //返回按钮
  395. revert() {
  396. this.$router.go(-1)
  397. },
  398. del(index, row,status) {
  399. if (row.status == null) {
  400. if(status==1){
  401. if (this.deptBudgetList.tranCarInfoList.length > 1) {
  402. for (let i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  403. console.log(this.deptBudgetList.tranCarInfoList[i])
  404. if(this.deptBudgetList.tranCarInfoList[i].index){
  405. if(this.deptBudgetList.tranCarInfoList[i].index==row.index){
  406. this.deptBudgetList.tranCarInfoList.splice(i, 1)
  407. }
  408. }
  409. }
  410. }
  411. }else{
  412. if (this.deptBudgetList.tranCarInfoList.length > 1) {
  413. this.deptBudgetList.tranCarInfoList.splice(index, 1)
  414. for (let i = index; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  415. let number = Number(this.deptBudgetList.tranCarInfoList[i].tranCarNo.split('C')[1]) - 1
  416. if (number < 10) {
  417. this.deptBudgetList.tranCarInfoList[i].tranCarNo = 'C00' + number
  418. } else if (number < 100) {
  419. this.deptBudgetList.tranCarInfoList[i].tranCarNo = 'C0' + number
  420. } else {
  421. this.deptBudgetList.tranCarInfoList[i].tranCarNo = 'C' + number
  422. }
  423. }
  424. }
  425. }
  426. } else {
  427. this.$confirm('派车信息删除后不可恢复,是否确定删除?', '提示', {
  428. confirmButtonText: '确定',
  429. cancelButtonText: '取消',
  430. type: 'warning',
  431. }).then(() => {
  432. delhaulagestage({
  433. id: row.id
  434. })
  435. .toPromise()
  436. .then((response) => {
  437. this.$message.success('删除成功')
  438. if (this.deptBudgetList.tranCarInfoList.length > 1) {
  439. this.deptBudgetList.tranCarInfoList.splice(index, 1)
  440. }
  441. this.getList()
  442. })
  443. })
  444. }
  445. },
  446. addteam(){
  447. if(this.pricetype==1){
  448. if (!this.deptBudgetList.tranPrice) {
  449. this.$message({
  450. message: '请设置运输单价(元/吨)!',
  451. type: 'warning',
  452. })
  453. } else {
  454. this.deptBudgetList.tranCarInfoList.push({
  455. fleetName:'',
  456. fleetFlag:1,
  457. index:this.deptBudgetList.tranCarInfoList.length,
  458. billingMethod:this.pricetype,
  459. tranPrice:this.deptBudgetList.tranPrice,
  460. tranType: '1',
  461. })
  462. }
  463. }else{
  464. if (!this.deptBudgetList.tranPriceCar) {
  465. this.$message({
  466. message: '请设置运输单价(元/车)!',
  467. type: 'warning',
  468. })
  469. } else {
  470. this.deptBudgetList.tranCarInfoList.push({
  471. fleetName:'',
  472. fleetFlag:1,
  473. index:this.deptBudgetList.tranCarInfoList.length,
  474. billingMethod:this.pricetype,
  475. tranPrice:this.deptBudgetList.tranPriceCar,
  476. tranType: '1',
  477. })
  478. }
  479. }
  480. },
  481. add() {
  482. if(this.pricetype==1){
  483. if (!this.deptBudgetList.tranPrice) {
  484. this.$message({
  485. message: '请设置运输单价(元/吨)!',
  486. type: 'warning',
  487. })
  488. } else {
  489. var tmp1 = 'C00'
  490. this.deptBudgetList.count++
  491. if (this.deptBudgetList.tranCarInfoList.length < 10) {
  492. this.deptBudgetList.tranCarInfoList.push({
  493. driverName: '',
  494. driverPhone: '',
  495. carLength: 0,
  496. carLengthKey: '',
  497. loadWeight: null,
  498. carModel: '',
  499. carModelKey: '',
  500. carNumber: '',
  501. disabled: false,
  502. tranType: '1',
  503. fleetFlag:0,
  504. tranPriceCar:this.deptBudgetList.tranPriceCar,
  505. billingMethod:this.pricetype,
  506. // tranCarNo: tmp1+(this.deptBudgetList.count),
  507. tranCarNo: 'C00' + (this.deptBudgetList.tranCarInfoList.length + 1),
  508. tranPrice: this.deptBudgetList.tranPrice
  509. })
  510. } else if (this.deptBudgetList.tranCarInfoList.length < 100 && this.deptBudgetList.tranCarInfoList.length >=
  511. 10) {
  512. tmp1 = 'C0'
  513. this.deptBudgetList.count++
  514. this.deptBudgetList.tranCarInfoList.push({
  515. driverName: '',
  516. driverPhone: '',
  517. carLength: 0,
  518. carLengthKey: '',
  519. loadWeight: null,
  520. carModel: '',
  521. carModelKey: '',
  522. carNumber: '',
  523. disabled: false,
  524. fleetFlag:0,
  525. tranType: '1',
  526. tranPriceCar:this.deptBudgetList.tranPriceCar,
  527. billingMethod:this.pricetype,
  528. // tranCarNo: tmp1+(this.deptBudgetList.count),
  529. tranCarNo: 'C0' + (this.deptBudgetList.tranCarInfoList.length + 1),
  530. tranPrice: this.deptBudgetList.tranPrice
  531. })
  532. } else if (this.deptBudgetList.tranCarInfoList.length < 1000 && this.deptBudgetList.tranCarInfoList.length >=
  533. 100) {
  534. tmp1 = 'C'
  535. this.deptBudgetList.count++
  536. this.deptBudgetList.tranCarInfoList.push({
  537. driverName: '',
  538. driverPhone: '',
  539. carLength: 0,
  540. carLengthKey: '',
  541. loadWeight: null,
  542. carModel: '',
  543. carModelKey: '',
  544. carNumber: '',
  545. disabled: false,
  546. fleetFlag:0,
  547. tranType: '1',
  548. billingMethod:this.pricetype,
  549. tranPriceCar:this.deptBudgetList.tranPriceCar,
  550. // tranCarNo: tmp1+(this.deptBudgetList.count),
  551. tranCarNo: 'C' + (this.deptBudgetList.tranCarInfoList.length + 1),
  552. tranPrice: this.deptBudgetList.tranPrice
  553. })
  554. }
  555. }
  556. }else{
  557. if (!this.deptBudgetList.tranPriceCar) {
  558. this.$message({
  559. message: '请设置运输单价(元/车)!',
  560. type: 'warning',
  561. })
  562. } else {
  563. var tmp1 = 'C00'
  564. this.deptBudgetList.count++
  565. if (this.deptBudgetList.tranCarInfoList.length < 10) {
  566. this.deptBudgetList.tranCarInfoList.push({
  567. driverName: '',
  568. driverPhone: '',
  569. carLength: 0,
  570. carLengthKey: '',
  571. loadWeight: null,
  572. carModel: '',
  573. carModelKey: '',
  574. carNumber: '',
  575. disabled: false,
  576. tranType: '1',
  577. fleetFlag:0,
  578. tranPriceCar:this.deptBudgetList.tranPriceCar,
  579. billingMethod:this.pricetype,
  580. // tranCarNo: tmp1+(this.deptBudgetList.count),
  581. tranCarNo: 'C00' + (this.deptBudgetList.tranCarInfoList.length + 1),
  582. tranPrice: this.deptBudgetList.tranPrice
  583. })
  584. } else if (this.deptBudgetList.tranCarInfoList.length < 100 && this.deptBudgetList.tranCarInfoList.length >=
  585. 10) {
  586. tmp1 = 'C0'
  587. this.deptBudgetList.count++
  588. this.deptBudgetList.tranCarInfoList.push({
  589. driverName: '',
  590. driverPhone: '',
  591. carLength: 0,
  592. carLengthKey: '',
  593. loadWeight: null,
  594. carModel: '',
  595. carModelKey: '',
  596. carNumber: '',
  597. disabled: false,
  598. fleetFlag:0,
  599. tranType: '1',
  600. tranPriceCar:this.deptBudgetList.tranPriceCar,
  601. billingMethod:this.pricetype,
  602. // tranCarNo: tmp1+(this.deptBudgetList.count),
  603. tranCarNo: 'C0' + (this.deptBudgetList.tranCarInfoList.length + 1),
  604. tranPrice: this.deptBudgetList.tranPrice
  605. })
  606. } else if (this.deptBudgetList.tranCarInfoList.length < 1000 && this.deptBudgetList.tranCarInfoList.length >=
  607. 100) {
  608. tmp1 = 'C'
  609. this.deptBudgetList.count++
  610. this.deptBudgetList.tranCarInfoList.push({
  611. driverName: '',
  612. driverPhone: '',
  613. carLength: 0,
  614. carLengthKey: '',
  615. loadWeight: null,
  616. carModel: '',
  617. carModelKey: '',
  618. carNumber: '',
  619. disabled: false,
  620. fleetFlag:0,
  621. tranType: '1',
  622. billingMethod:this.pricetype,
  623. tranPriceCar:this.deptBudgetList.tranPriceCar,
  624. // tranCarNo: tmp1+(this.deptBudgetList.count),
  625. tranCarNo: 'C' + (this.deptBudgetList.tranCarInfoList.length + 1),
  626. tranPrice: this.deptBudgetList.tranPrice
  627. })
  628. }
  629. }
  630. }
  631. },
  632. //审核
  633. examine(status) {
  634. this.$prompt('运输单价审核', {
  635. cancelButtonText: '取消',
  636. confirmButtonText: '确定',
  637. inputValue: status==1?this.deptBudgetList.tranPriceIng:this.deptBudgetList.tranPriceIngCar
  638. }).then(({
  639. value
  640. }) => {
  641. var tranProcessInfo = {}
  642. tranProcessInfo.reviewer = localStorage.getItem('ws-pf_roleName') +
  643. localStorage.getItem('ws-pf_staffName')
  644. tranProcessInfo.id = this.deptBudgetList.id
  645. tranProcessInfo.flag = '2'
  646. tranProcessInfo.tranTypeKey = 1
  647. tranProcessInfo.billingMethod= this.deptBudgetList.billingMethod
  648. if(this.deptBudgetList.billingMethod==2){
  649. tranProcessInfo.tranPriceIngCar=value
  650. setUpTranPriceCar(tranProcessInfo)
  651. .toPromise()
  652. .then((response) => {
  653. this.$message.success('提交成功')
  654. this.getList()
  655. })
  656. }else{
  657. tranProcessInfo.tranPriceIng = value
  658. setUpTranPrice(tranProcessInfo)
  659. .toPromise()
  660. .then((response) => {
  661. this.$message.success('审核成功')
  662. this.getList()
  663. });
  664. }
  665. }).catch(() => {
  666. this.$message.warning(
  667. '取消审核'
  668. );
  669. });
  670. },
  671. priceSubmit(status) {
  672. this.$confirm(`运输单价将发送给决策人审核,确定提交?`, {
  673. cancelButtonText: '取消',
  674. confirmButtonText: '确定',
  675. type: 'warning',
  676. })
  677. .then(() => {
  678. var tranProcessInfo = {}
  679. tranProcessInfo.id = this.deptBudgetList.id
  680. tranProcessInfo.flag = '1'
  681. tranProcessInfo.tranTypeKey = 1
  682. tranProcessInfo.tranPriceIng = this.deptBudgetList.tranPriceIng
  683. if(!this.deptBudgetList.billingMethod) this.deptBudgetList.billingMethod=1
  684. tranProcessInfo.billingMethod= this.deptBudgetList.billingMethod
  685. tranProcessInfo.tranPriceIngCar = this.deptBudgetList.tranPriceIngCar
  686. if(status==2){
  687. setUpTranPriceCar(tranProcessInfo)
  688. .toPromise()
  689. .then((response) => {
  690. this.$message.success('提交成功')
  691. this.getList()
  692. })
  693. }else{
  694. setUpTranPrice(tranProcessInfo)
  695. .toPromise()
  696. .then((response) => {
  697. this.$message.success('提交成功')
  698. this.getList()
  699. })
  700. }
  701. })
  702. .catch(() => {
  703. return false
  704. })
  705. },
  706. //提交按钮
  707. submit() {
  708. if (!this.deptBudgetList.tranPrice) {
  709. this.$message({
  710. message: '请设置运输单价!',
  711. type: 'warning',
  712. })
  713. } else {
  714. for (var i = this.index; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  715. if (!this.deptBudgetList.tranCarInfoList[i].driver&&this.deptBudgetList.tranCarInfoList[i].fleetFlag==0) {
  716. this.$message({
  717. message: '姓名不能为空!',
  718. type: 'warning',
  719. })
  720. return
  721. }
  722. if (!this.deptBudgetList.tranCarInfoList[i].fleetName&&this.deptBudgetList.tranCarInfoList[i].fleetFlag==1) {
  723. this.$message({
  724. message: '车队名称不能为空!',
  725. type: 'warning',
  726. })
  727. return
  728. }
  729. if (this.deptBudgetList.tranCarInfoList[i].fleetName&&this.deptBudgetList.tranCarInfoList[i].fleetName.length<1&&this.deptBudgetList.tranCarInfoList[i].fleetFlag==1||this.deptBudgetList.tranCarInfoList[i].fleetName&&this.deptBudgetList.tranCarInfoList[i].fleetName.length>10&&this.deptBudgetList.tranCarInfoList[i].fleetFlag==1) {
  730. this.$message({
  731. message: '车队名称1-10个字!',
  732. type: 'warning',
  733. })
  734. return
  735. }
  736. for (var j = 0; j < this.carList.length; j++) {
  737. if (this.carList[j].driverName == this.deptBudgetList.tranCarInfoList[i].driver && this.carList[j]
  738. .disableStatusFlag == 1) {
  739. this.$message({
  740. message: this.deptBudgetList.tranCarInfoList[i].driver + '该司机已被禁用!',
  741. type: 'warning',
  742. })
  743. return
  744. }
  745. }
  746. }
  747. this.$confirm(`确定提交派车信息?`, {
  748. cancelButtonText: '取消',
  749. confirmButtonText: '确定',
  750. type: 'warning',
  751. })
  752. .then(() => {
  753. this.$refs.deptBudgetList.validate((valid) => {
  754. if (valid) {
  755. var tranCarInfo = {}
  756. tranCarInfo.id = this.deptBudgetList.id
  757. tranCarInfo.processNo = this.deptBudgetList.processNo
  758. tranCarInfo.tranPrice = this.deptBudgetList.tranPrice
  759. tranCarInfo.infoId = this.deptBudgetList.infoId
  760. tranCarInfo.billingMethod=this.pricetype
  761. tranCarInfo.tranCarInfoList = this.deptBudgetList.tranCarInfoList
  762. dispatchCat(tranCarInfo)
  763. .toPromise()
  764. .then((response) => {
  765. this.$message.success('提交成功')
  766. this.$router.go(-1)
  767. })
  768. } else {
  769. EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  770. return false
  771. }
  772. })
  773. })
  774. .catch(() => {
  775. return false
  776. })
  777. }
  778. },
  779. handleClose() {
  780. this.accessoryTFs = false
  781. },
  782. getList() {
  783. seeCat({
  784. id: this.$route.query.id
  785. })
  786. .toPromise()
  787. .then((response) => {
  788. if (response.tranCarInfoList.length > 0) {
  789. this.index = response.tranCarInfoList.length
  790. for (var i = 0; i < response.tranCarInfoList.length; i++) {
  791. if (response.tranCarInfoList[i].id) {
  792. response.tranCarInfoList[i].disabled = true
  793. }
  794. }
  795. }
  796. if(response.billingMethod){
  797. this.pricetype=response.billingMethod
  798. }
  799. this.deptBudgetList = response
  800. this.fhaddress = response.sendPrivate + response.sendCity + response.sendArea + response
  801. .sendDetailedAddress
  802. this.shaddress = response.receivePrivate + response.receiveCity + response.receiveArea + response
  803. .receiveDetailedAddress
  804. if (this.deptBudgetList.tranPriceIng == 0) {
  805. this.deptBudgetList.tranPriceIng = ''
  806. }
  807. if (this.deptBudgetList.tranCarInfoList.length == 0) {
  808. this.deptBudgetList.tranCarInfoList = [{
  809. driverName: '',
  810. driverPhone: '',
  811. carLength: 0,
  812. carLengthKey: '',
  813. loadWeight: null,
  814. carModel: '',
  815. carModelKey: '',
  816. carNumber: '',
  817. disabled: false,
  818. fleetFlag:0,
  819. tranType: '1',
  820. tranCarNo: 'C001',
  821. billingMethod:1,
  822. tranPrice: this.deptBudgetList.tranPrice
  823. }, ]
  824. }
  825. })
  826. nameXiala({
  827. compId: this.compId
  828. })
  829. .toPromise()
  830. .then((response) => {
  831. this.carList = response
  832. })
  833. },
  834. carchange(val, index) {
  835. for (var i = 0; i < this.carList.length; i++) {
  836. if (this.carList[i].driverName == val) {
  837. this.deptBudgetList.tranCarInfoList[index].driverPhone =
  838. this.carList[i].driverPhone
  839. arrange({
  840. id: this.carList[i].id
  841. })
  842. .toPromise()
  843. .then((response) => {
  844. console.log(index,this.deptBudgetList.tranCarInfoList)
  845. this.deptBudgetList.tranCarInfoList[index].carNo =
  846. response.carNumber
  847. if (response.carLoad != null) {
  848. this.deptBudgetList.tranCarInfoList[index].loadWeight =
  849. response.carLoad
  850. } else {
  851. this.deptBudgetList.tranCarInfoList[index].loadWeight = 0
  852. }
  853. this.deptBudgetList.tranCarInfoList[index].carModel =
  854. response.carModel
  855. this.deptBudgetList.tranCarInfoList[index].carLength =
  856. response.carLength
  857. this.deptBudgetList.tranCarInfoList[index].carLengthKey =
  858. response.carLengthKey
  859. this.deptBudgetList.tranCarInfoList[index].carModelKey =
  860. response.carModelKey
  861. this.$forceUpdate()
  862. })
  863. }
  864. }
  865. },
  866. phonechange(val, index) {
  867. for (var i = 0; i < this.carList.length; i++) {
  868. if (this.carList[i].driverPhone == val) {
  869. this.deptBudgetList.tranCarInfoList[index].driver =
  870. this.carList[i].driverName
  871. arrange({
  872. id: this.carList[i].id
  873. })
  874. .toPromise()
  875. .then((response) => {
  876. console.log(this, response)
  877. this.deptBudgetList.tranCarInfoList[index].carNo =
  878. response.carNumber
  879. if (response.carLoad != null) {
  880. this.deptBudgetList.tranCarInfoList[index].loadWeight =
  881. response.carLoad
  882. } else {
  883. this.deptBudgetList.tranCarInfoList[index].loadWeight = 0
  884. }
  885. this.deptBudgetList.tranCarInfoList[index].carModel =
  886. response.carModel
  887. this.deptBudgetList.tranCarInfoList[index].carLength =
  888. response.carLength
  889. this.deptBudgetList.tranCarInfoList[index].carLengthKey =
  890. response.carLengthKey
  891. this.deptBudgetList.tranCarInfoList[index].carModelKey =
  892. response.carModelKey
  893. })
  894. }
  895. }
  896. },
  897. },
  898. }
  899. </script>
  900. <style lang="scss" scoped>
  901. // /deep/.basicInformation {
  902. // .ws-info-table {
  903. // border: none;
  904. // }
  905. // .myTest {
  906. // width: 800px;
  907. // display: flex;
  908. // height: 40px;
  909. // }
  910. // .el-form-item {
  911. // width: 33.3333%;
  912. // border: none;
  913. // height: 50px;
  914. // .el-form-item__label {
  915. // background: transparent;
  916. // border: none;
  917. // }
  918. // .el-form-item__content {
  919. // border: none;
  920. // }
  921. // }
  922. // }
  923. // .title {
  924. // position: relative;
  925. // padding-left: 10px;
  926. // }
  927. // .title::before {
  928. // content: '';
  929. // display: inline-block;
  930. // width: 5px;
  931. // height: 30px;
  932. // background: #5473e8;
  933. // position: absolute;
  934. // left: 0;
  935. // }
  936. // .el-form {
  937. // padding: 0 10%;
  938. // }
  939. // .el-button--primary {
  940. // background-color: #5878e8;
  941. // border-color: #5878e8;
  942. // }
  943. // .el-col {
  944. // background: #f6f7fc;
  945. // }
  946. // .bg-right {
  947. // text-align: right;
  948. // padding: 16px 20px;
  949. // }
  950. // .center {
  951. // margin: 0 auto;
  952. // width: 70%;
  953. // }
  954. //表格文字
  955. // /deep/.ws-info-table .el-form-item .el-form-item__label {
  956. // text-align: center;
  957. // font-size: 14px;
  958. // font-weight: 400;
  959. // color: #8890b1;
  960. // line-height: 16px;
  961. // }
  962. // //蓝标
  963. // .small-title {
  964. // position: relative;
  965. // padding: 10px;
  966. // font-weight: 600;
  967. // }
  968. // .small-title::before {
  969. // position: absolute;
  970. // content: '';
  971. // display: block;
  972. // background: #5473e8;
  973. // width: 4px;
  974. // height: 14px;
  975. // left: 0px;
  976. // top: 13px;
  977. // padding: 4px 2px;
  978. // }
  979. // .position {
  980. // position: relative;
  981. // }
  982. // .position .zaizhong {
  983. // width: 16%;
  984. // }
  985. // //减号
  986. // .del {
  987. // position: absolute;
  988. // // right: -38px;
  989. // top: 9px;
  990. // cursor: pointer;
  991. // right: 0;
  992. // display: inline-block;
  993. // font-size: 20px;
  994. // width: 20px;
  995. // height: 10px;
  996. // line-height: 0px;
  997. // }
  998. // .driver .el-form-item {
  999. // width: 16.63%;
  1000. // }
  1001. // /deep/.ws-info-table .el-form-item .el-form-item__content {
  1002. // background: #f5f7fa;
  1003. // border-radius: 4px;
  1004. // color: #8890b1;
  1005. // font-size: 14px;
  1006. // padding: 0 25px;
  1007. // }
  1008. // /deep/.driver .ws-info-table .el-form-item .el-form-item__label {
  1009. // width: 72px;
  1010. // }
  1011. // /deep/.liaison .ws-info-table .el-form-item {
  1012. // width: 220px;
  1013. // color: #8890b1;
  1014. // font-size: 14px;
  1015. // }
  1016. // /deep/.ws-info-table .el-form-item {
  1017. // border: none;
  1018. // height: 50px;
  1019. // }
  1020. // /deep/.liaison .ws-info-table .el-form-item .el-form-item__label {
  1021. // width: 50%;
  1022. // border: 0px solid #d8dce6;
  1023. // background: #f5f7fa;
  1024. // text-align: center;
  1025. // }
  1026. // /deep/.liaison {
  1027. // background: #f5f7fa;
  1028. // border-radius: 4px;
  1029. // border: 0px solid #d8dce6;
  1030. // }
  1031. // /deep/.liaison .ws-info-table .el-form-item .el-form-item__content {
  1032. // border: none;
  1033. // background: #f5f7fa;
  1034. // padding: 0px;
  1035. // }
  1036. // .catNos {
  1037. // width: 100%;
  1038. // height: 30px;
  1039. // margin-top: 10px;
  1040. // margin-left: 20px;
  1041. // font-size: 14px;
  1042. // }
  1043. // /deep/.liaison .ws-info-table .el-form-item .el-form-item__content {
  1044. // border-radius: 0px;
  1045. // border-left: none;
  1046. // border-bottom: none;
  1047. // border-top: none;
  1048. // }
  1049. // /deep/.liaison .ws-info-table {
  1050. // background: #f6f7fc;
  1051. // border-radius: 4px;
  1052. // border: 1px solid #d8dce6;
  1053. // margin-top: 20px;
  1054. // }
  1055. //送达/未送达
  1056. // .noservice,
  1057. // .service {
  1058. // display: inline-block;
  1059. // border-radius: 4px;
  1060. // border: 1px solid #d8dce6;
  1061. // padding: 2px;
  1062. // font-size: 12px;
  1063. // }
  1064. // .noservice {
  1065. // background: #c4cada;
  1066. // color: #ffffff;
  1067. // }
  1068. // .service {
  1069. // background: #e5f1f7;
  1070. // color: #50cad4;
  1071. // }
  1072. // .serviced {
  1073. // display: inline-block;
  1074. // border-radius: 4px;
  1075. // border: 1px solid #d8dce6;
  1076. // padding: 2px;
  1077. // font-size: 12px;
  1078. // background: #e5f1f7;
  1079. // color: #2c81cf;
  1080. // }
  1081. // //添加司机
  1082. // .add {
  1083. // width: 100px;
  1084. // height: 34px;
  1085. // background: #f6f7fb;
  1086. // border-radius: 17px;
  1087. // color: #5473e8;
  1088. // font-size: 14px;
  1089. // border: none;
  1090. // }
  1091. // .add img {
  1092. // display: inline-block;
  1093. // margin-top: 3px;
  1094. // margin-left: -12px;
  1095. // }
  1096. // .add .spans {
  1097. // display: table-caption;
  1098. // width: 56px;
  1099. // height: 20px;
  1100. // line-height: 18px;
  1101. // }
  1102. /deep/.el-form-item--small.el-form-item {
  1103. margin-bottom: 0px
  1104. }
  1105. .input-item-margin {
  1106. margin-right: 20px;
  1107. }
  1108. .row-item {
  1109. width: 100%;
  1110. }
  1111. .bg-right {
  1112. text-align: right;
  1113. padding: 16px 20px;
  1114. }
  1115. .center {
  1116. margin: 0 auto;
  1117. width: 70%;
  1118. }
  1119. //蓝标
  1120. .small-title {
  1121. position: relative;
  1122. padding: 10px;
  1123. font-weight: 600;
  1124. }
  1125. //小标题文字
  1126. .small-title::before {
  1127. position: absolute;
  1128. content: '';
  1129. display: block;
  1130. background: #5473e8;
  1131. width: 4px;
  1132. height: 14px;
  1133. left: 0px;
  1134. top: 16px;
  1135. padding: 4px 2px;
  1136. }
  1137. .bg-left {
  1138. padding-left: 30px;
  1139. }
  1140. .title::before {
  1141. content: '';
  1142. display: inline-block;
  1143. width: 5px;
  1144. height: 30px;
  1145. background: #5473e8;
  1146. position: absolute;
  1147. left: 0;
  1148. }
  1149. .myTest {
  1150. display: flex;
  1151. margin-bottom: 20px;
  1152. // background: green;
  1153. padding-left: 20px;
  1154. align-items: center;
  1155. width: 800px;
  1156. }
  1157. .myTest .el-form-item {
  1158. width: 33.333%;
  1159. }
  1160. .content3 ,.contentitem{
  1161. width: calc(100% + 20px);
  1162. .content3-item1 {
  1163. position: relative;
  1164. background: #F5F7FA;
  1165. border: 1px solid #E4E7ED;
  1166. border-radius: 5px;
  1167. height: 200px;
  1168. width: 100%;
  1169. padding: 10px 20px 0 0;
  1170. margin-top: 20px;
  1171. }
  1172. }
  1173. .contentitem{
  1174. .content3-item1 {
  1175. height: 90px;
  1176. }
  1177. }
  1178. .content4 {
  1179. background: #F5F7FA;
  1180. display: flex;
  1181. margin: 10px 0;
  1182. border: 1px solid #E4E7ED;
  1183. border-radius: 5px;
  1184. position: relative;
  1185. }
  1186. .del {
  1187. position: absolute;
  1188. right: 4px;
  1189. top: 0px;
  1190. cursor: pointer;
  1191. font-size: 20px;
  1192. width: 16px;
  1193. height: 10px;
  1194. }
  1195. </style>