tranManagementVehicleDispatching.vue 45 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282
  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, item.tranCarIndex)
  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, item.tranCarIndex)
  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. this.deptBudgetList.tranCarInfoList[i].tranCarIndex=i
  352. arr.push(this.deptBudgetList.tranCarInfoList[i])
  353. }
  354. }
  355. return arr
  356. }
  357. },
  358. driverlist: function() {
  359. if (this.deptBudgetList.tranCarInfoList.length > 0) {
  360. var arr = []
  361. for (var i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  362. if(this.deptBudgetList.tranCarInfoList[i].fleetFlag==0){
  363. this.deptBudgetList.tranCarInfoList[i].tranCarIndex=i
  364. arr.push(this.deptBudgetList.tranCarInfoList[i])
  365. }
  366. }
  367. return arr
  368. }
  369. },
  370. },
  371. methods: {
  372. pricetypechange(e){
  373. console.log(e)
  374. this.deptBudgetList.billingMethod=e
  375. if (this.deptBudgetList.tranCarInfoList.length > 0) {
  376. for (var i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  377. if(!this.deptBudgetList.tranCarInfoList[i].id){
  378. this.deptBudgetList.tranCarInfoList[i].billingMethod=e
  379. if(e==1){
  380. this.deptBudgetList.tranCarInfoList[i].tranPrice=this.deptBudgetList.tranPrice
  381. }else{
  382. this.deptBudgetList.tranCarInfoList[i].tranPrice=this.deptBudgetList.tranPriceCar
  383. }
  384. }
  385. }
  386. }
  387. },
  388. clearBlur(e) {
  389. let k = this.$refs.driverSelect
  390. if (!e) {
  391. for (let i = 0; i < k.length; i++) {
  392. k[i].blur()
  393. }
  394. }
  395. },
  396. //返回按钮
  397. revert() {
  398. this.$router.go(-1)
  399. },
  400. del(index, row,status) {
  401. if (row.status == null) {
  402. if(status==1){
  403. if (this.deptBudgetList.tranCarInfoList.length > 1) {
  404. for (let i = 0; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  405. console.log(this.deptBudgetList.tranCarInfoList[i])
  406. if(this.deptBudgetList.tranCarInfoList[i].index){
  407. if(this.deptBudgetList.tranCarInfoList[i].index==row.index){
  408. this.deptBudgetList.tranCarInfoList.splice(i, 1)
  409. }
  410. }
  411. }
  412. }
  413. }else{
  414. if (this.deptBudgetList.tranCarInfoList.length > 1) {
  415. this.deptBudgetList.tranCarInfoList.splice(index, 1)
  416. for (let i = index; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  417. let number = Number(this.deptBudgetList.tranCarInfoList[i].tranCarNo.split('C')[1]) - 1
  418. if (number < 10) {
  419. this.deptBudgetList.tranCarInfoList[i].tranCarNo = 'C00' + number
  420. } else if (number < 100) {
  421. this.deptBudgetList.tranCarInfoList[i].tranCarNo = 'C0' + number
  422. } else {
  423. this.deptBudgetList.tranCarInfoList[i].tranCarNo = 'C' + number
  424. }
  425. }
  426. }
  427. }
  428. } else {
  429. this.$confirm('派车信息删除后不可恢复,是否确定删除?', '提示', {
  430. confirmButtonText: '确定',
  431. cancelButtonText: '取消',
  432. type: 'warning',
  433. }).then(() => {
  434. delhaulagestage({
  435. id: row.id
  436. })
  437. .toPromise()
  438. .then((response) => {
  439. this.$message.success('删除成功')
  440. if (this.deptBudgetList.tranCarInfoList.length > 1) {
  441. this.deptBudgetList.tranCarInfoList.splice(index, 1)
  442. }
  443. this.getList()
  444. })
  445. })
  446. }
  447. },
  448. addteam(){
  449. if(this.pricetype==1){
  450. if (!this.deptBudgetList.tranPrice) {
  451. this.$message({
  452. message: '请设置运输单价(元/吨)!',
  453. type: 'warning',
  454. })
  455. } else {
  456. this.deptBudgetList.tranCarInfoList.push({
  457. fleetName:'',
  458. fleetFlag:1,
  459. index:this.deptBudgetList.tranCarInfoList.length,
  460. billingMethod:this.pricetype,
  461. tranPrice:this.deptBudgetList.tranPrice,
  462. tranType: '1',
  463. })
  464. }
  465. }else{
  466. if (!this.deptBudgetList.tranPriceCar) {
  467. this.$message({
  468. message: '请设置运输单价(元/车)!',
  469. type: 'warning',
  470. })
  471. } else {
  472. this.deptBudgetList.tranCarInfoList.push({
  473. fleetName:'',
  474. fleetFlag:1,
  475. index:this.deptBudgetList.tranCarInfoList.length,
  476. billingMethod:this.pricetype,
  477. tranPrice:this.deptBudgetList.tranPriceCar,
  478. tranType: '1',
  479. })
  480. }
  481. }
  482. },
  483. add() {
  484. if(this.pricetype==1){
  485. if (!this.deptBudgetList.tranPrice) {
  486. this.$message({
  487. message: '请设置运输单价(元/吨)!',
  488. type: 'warning',
  489. })
  490. } else {
  491. var tmp1 = 'C00'
  492. this.deptBudgetList.count++
  493. if (this.deptBudgetList.tranCarInfoList.length < 10) {
  494. this.deptBudgetList.tranCarInfoList.push({
  495. driverName: '',
  496. driverPhone: '',
  497. carLength: 0,
  498. carLengthKey: '',
  499. loadWeight: null,
  500. carModel: '',
  501. carModelKey: '',
  502. carNumber: '',
  503. disabled: false,
  504. tranType: '1',
  505. fleetFlag:0,
  506. tranPriceCar:this.deptBudgetList.tranPriceCar,
  507. billingMethod:this.pricetype,
  508. // tranCarNo: tmp1+(this.deptBudgetList.count),
  509. tranCarNo: 'C00' + (this.deptBudgetList.tranCarInfoList.length + 1),
  510. tranPrice: this.deptBudgetList.tranPrice
  511. })
  512. } else if (this.deptBudgetList.tranCarInfoList.length < 100 && this.deptBudgetList.tranCarInfoList.length >=
  513. 10) {
  514. tmp1 = 'C0'
  515. this.deptBudgetList.count++
  516. this.deptBudgetList.tranCarInfoList.push({
  517. driverName: '',
  518. driverPhone: '',
  519. carLength: 0,
  520. carLengthKey: '',
  521. loadWeight: null,
  522. carModel: '',
  523. carModelKey: '',
  524. carNumber: '',
  525. disabled: false,
  526. fleetFlag:0,
  527. tranType: '1',
  528. tranPriceCar:this.deptBudgetList.tranPriceCar,
  529. billingMethod:this.pricetype,
  530. // tranCarNo: tmp1+(this.deptBudgetList.count),
  531. tranCarNo: 'C0' + (this.deptBudgetList.tranCarInfoList.length + 1),
  532. tranPrice: this.deptBudgetList.tranPrice
  533. })
  534. } else if (this.deptBudgetList.tranCarInfoList.length < 1000 && this.deptBudgetList.tranCarInfoList.length >=
  535. 100) {
  536. tmp1 = 'C'
  537. this.deptBudgetList.count++
  538. this.deptBudgetList.tranCarInfoList.push({
  539. driverName: '',
  540. driverPhone: '',
  541. carLength: 0,
  542. carLengthKey: '',
  543. loadWeight: null,
  544. carModel: '',
  545. carModelKey: '',
  546. carNumber: '',
  547. disabled: false,
  548. fleetFlag:0,
  549. tranType: '1',
  550. billingMethod:this.pricetype,
  551. tranPriceCar:this.deptBudgetList.tranPriceCar,
  552. // tranCarNo: tmp1+(this.deptBudgetList.count),
  553. tranCarNo: 'C' + (this.deptBudgetList.tranCarInfoList.length + 1),
  554. tranPrice: this.deptBudgetList.tranPrice
  555. })
  556. }
  557. }
  558. }else{
  559. if (!this.deptBudgetList.tranPriceCar) {
  560. this.$message({
  561. message: '请设置运输单价(元/车)!',
  562. type: 'warning',
  563. })
  564. } else {
  565. var tmp1 = 'C00'
  566. this.deptBudgetList.count++
  567. if (this.deptBudgetList.tranCarInfoList.length < 10) {
  568. this.deptBudgetList.tranCarInfoList.push({
  569. driverName: '',
  570. driverPhone: '',
  571. carLength: 0,
  572. carLengthKey: '',
  573. loadWeight: null,
  574. carModel: '',
  575. carModelKey: '',
  576. carNumber: '',
  577. disabled: false,
  578. tranType: '1',
  579. fleetFlag:0,
  580. tranPriceCar:this.deptBudgetList.tranPriceCar,
  581. billingMethod:this.pricetype,
  582. // tranCarNo: tmp1+(this.deptBudgetList.count),
  583. tranCarNo: 'C00' + (this.deptBudgetList.tranCarInfoList.length + 1),
  584. tranPrice: this.deptBudgetList.tranPrice
  585. })
  586. } else if (this.deptBudgetList.tranCarInfoList.length < 100 && this.deptBudgetList.tranCarInfoList.length >=
  587. 10) {
  588. tmp1 = 'C0'
  589. this.deptBudgetList.count++
  590. this.deptBudgetList.tranCarInfoList.push({
  591. driverName: '',
  592. driverPhone: '',
  593. carLength: 0,
  594. carLengthKey: '',
  595. loadWeight: null,
  596. carModel: '',
  597. carModelKey: '',
  598. carNumber: '',
  599. disabled: false,
  600. fleetFlag:0,
  601. tranType: '1',
  602. tranPriceCar:this.deptBudgetList.tranPriceCar,
  603. billingMethod:this.pricetype,
  604. // tranCarNo: tmp1+(this.deptBudgetList.count),
  605. tranCarNo: 'C0' + (this.deptBudgetList.tranCarInfoList.length + 1),
  606. tranPrice: this.deptBudgetList.tranPrice
  607. })
  608. } else if (this.deptBudgetList.tranCarInfoList.length < 1000 && this.deptBudgetList.tranCarInfoList.length >=
  609. 100) {
  610. tmp1 = 'C'
  611. this.deptBudgetList.count++
  612. this.deptBudgetList.tranCarInfoList.push({
  613. driverName: '',
  614. driverPhone: '',
  615. carLength: 0,
  616. carLengthKey: '',
  617. loadWeight: null,
  618. carModel: '',
  619. carModelKey: '',
  620. carNumber: '',
  621. disabled: false,
  622. fleetFlag:0,
  623. tranType: '1',
  624. billingMethod:this.pricetype,
  625. tranPriceCar:this.deptBudgetList.tranPriceCar,
  626. // tranCarNo: tmp1+(this.deptBudgetList.count),
  627. tranCarNo: 'C' + (this.deptBudgetList.tranCarInfoList.length + 1),
  628. tranPrice: this.deptBudgetList.tranPrice
  629. })
  630. }
  631. }
  632. }
  633. },
  634. //审核
  635. examine(status) {
  636. this.$prompt('运输单价审核', {
  637. cancelButtonText: '取消',
  638. confirmButtonText: '确定',
  639. inputValue: status==1?this.deptBudgetList.tranPriceIng:this.deptBudgetList.tranPriceIngCar
  640. }).then(({
  641. value
  642. }) => {
  643. var tranProcessInfo = {}
  644. tranProcessInfo.reviewer = localStorage.getItem('ws-pf_roleName') +
  645. localStorage.getItem('ws-pf_staffName')
  646. tranProcessInfo.id = this.deptBudgetList.id
  647. tranProcessInfo.flag = '2'
  648. tranProcessInfo.tranTypeKey = 1
  649. tranProcessInfo.billingMethod= this.deptBudgetList.billingMethod
  650. if(this.deptBudgetList.billingMethod==2){
  651. tranProcessInfo.tranPriceIngCar=value
  652. setUpTranPriceCar(tranProcessInfo)
  653. .toPromise()
  654. .then((response) => {
  655. this.$message.success('提交成功')
  656. this.getList()
  657. })
  658. }else{
  659. tranProcessInfo.tranPriceIng = value
  660. setUpTranPrice(tranProcessInfo)
  661. .toPromise()
  662. .then((response) => {
  663. this.$message.success('审核成功')
  664. this.getList()
  665. });
  666. }
  667. }).catch(() => {
  668. this.$message.warning(
  669. '取消审核'
  670. );
  671. });
  672. },
  673. priceSubmit(status) {
  674. console.log(status,this.deptBudgetList.tranPriceIng,this.deptBudgetList.tranPriceIngCar)
  675. if(status==1&&!this.deptBudgetList.tranPriceIng){
  676. this.$message({
  677. message: '请输入运输单价元/吨!',
  678. type: 'warning',
  679. })
  680. return
  681. }
  682. if(status==2&&!this.deptBudgetList.tranPriceIngCar){
  683. this.$message({
  684. message: '请输入运输单价元/车!',
  685. type: 'warning',
  686. })
  687. return
  688. }
  689. this.$confirm(`运输单价将发送给决策人审核,确定提交?`, {
  690. cancelButtonText: '取消',
  691. confirmButtonText: '确定',
  692. type: 'warning',
  693. })
  694. .then(() => {
  695. var tranProcessInfo = {}
  696. tranProcessInfo.id = this.deptBudgetList.id
  697. tranProcessInfo.flag = '1'
  698. tranProcessInfo.tranTypeKey = 1
  699. tranProcessInfo.tranPriceIng = this.deptBudgetList.tranPriceIng
  700. if(!this.deptBudgetList.billingMethod) this.deptBudgetList.billingMethod=1
  701. tranProcessInfo.billingMethod= this.deptBudgetList.billingMethod
  702. tranProcessInfo.tranPriceIngCar = this.deptBudgetList.tranPriceIngCar
  703. if(status==2){
  704. setUpTranPriceCar(tranProcessInfo)
  705. .toPromise()
  706. .then((response) => {
  707. this.$message.success('提交成功')
  708. this.getList()
  709. })
  710. }else{
  711. setUpTranPrice(tranProcessInfo)
  712. .toPromise()
  713. .then((response) => {
  714. this.$message.success('提交成功')
  715. this.getList()
  716. })
  717. }
  718. })
  719. .catch(() => {
  720. return false
  721. })
  722. },
  723. //提交按钮
  724. submit() {
  725. if (!this.deptBudgetList.tranPrice) {
  726. this.$message({
  727. message: '请设置运输单价!',
  728. type: 'warning',
  729. })
  730. } else {
  731. for (var i = this.index; i < this.deptBudgetList.tranCarInfoList.length; i++) {
  732. if (!this.deptBudgetList.tranCarInfoList[i].driver&&this.deptBudgetList.tranCarInfoList[i].fleetFlag==0) {
  733. this.$message({
  734. message: '姓名不能为空!',
  735. type: 'warning',
  736. })
  737. return
  738. }
  739. if (!this.deptBudgetList.tranCarInfoList[i].fleetName&&this.deptBudgetList.tranCarInfoList[i].fleetFlag==1) {
  740. this.$message({
  741. message: '车队名称不能为空!',
  742. type: 'warning',
  743. })
  744. return
  745. }
  746. 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) {
  747. this.$message({
  748. message: '车队名称1-10个字!',
  749. type: 'warning',
  750. })
  751. return
  752. }
  753. for (var j = 0; j < this.carList.length; j++) {
  754. if (this.carList[j].driverName == this.deptBudgetList.tranCarInfoList[i].driver && this.carList[j]
  755. .disableStatusFlag == 1) {
  756. this.$message({
  757. message: this.deptBudgetList.tranCarInfoList[i].driver + '该司机已被禁用!',
  758. type: 'warning',
  759. })
  760. return
  761. }
  762. }
  763. }
  764. this.$confirm(`确定提交派车信息?`, {
  765. cancelButtonText: '取消',
  766. confirmButtonText: '确定',
  767. type: 'warning',
  768. })
  769. .then(() => {
  770. this.$refs.deptBudgetList.validate((valid) => {
  771. if (valid) {
  772. var tranCarInfo = {}
  773. tranCarInfo.id = this.deptBudgetList.id
  774. tranCarInfo.processNo = this.deptBudgetList.processNo
  775. tranCarInfo.tranPrice = this.deptBudgetList.tranPrice
  776. tranCarInfo.infoId = this.deptBudgetList.infoId
  777. tranCarInfo.billingMethod=this.pricetype
  778. tranCarInfo.tranCarInfoList = this.deptBudgetList.tranCarInfoList
  779. dispatchCat(tranCarInfo)
  780. .toPromise()
  781. .then((response) => {
  782. this.$message.success('提交成功')
  783. this.$router.go(-1)
  784. })
  785. } else {
  786. EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  787. return false
  788. }
  789. })
  790. })
  791. .catch(() => {
  792. return false
  793. })
  794. }
  795. },
  796. handleClose() {
  797. this.accessoryTFs = false
  798. },
  799. getList() {
  800. seeCat({
  801. id: this.$route.query.id
  802. })
  803. .toPromise()
  804. .then((response) => {
  805. if (response.tranCarInfoList.length > 0) {
  806. this.index = response.tranCarInfoList.length
  807. for (var i = 0; i < response.tranCarInfoList.length; i++) {
  808. if (response.tranCarInfoList[i].id) {
  809. response.tranCarInfoList[i].disabled = true
  810. }
  811. }
  812. }
  813. if(response.billingMethod){
  814. this.pricetype=response.billingMethod
  815. }
  816. this.deptBudgetList = response
  817. this.fhaddress = response.sendPrivate + response.sendCity + response.sendArea + response
  818. .sendDetailedAddress
  819. this.shaddress = response.receivePrivate + response.receiveCity + response.receiveArea + response
  820. .receiveDetailedAddress
  821. if (this.deptBudgetList.tranPriceIng == 0) {
  822. this.deptBudgetList.tranPriceIng = ''
  823. }
  824. if (this.deptBudgetList.tranCarInfoList.length == 0) {
  825. this.deptBudgetList.tranCarInfoList = [{
  826. driverName: '',
  827. driverPhone: '',
  828. carLength: 0,
  829. carLengthKey: '',
  830. loadWeight: null,
  831. carModel: '',
  832. carModelKey: '',
  833. carNumber: '',
  834. disabled: false,
  835. fleetFlag:0,
  836. tranType: '1',
  837. tranCarNo: 'C001',
  838. billingMethod:1,
  839. tranPrice: this.deptBudgetList.tranPrice
  840. }, ]
  841. }
  842. })
  843. nameXiala({
  844. compId: this.compId
  845. })
  846. .toPromise()
  847. .then((response) => {
  848. this.carList = response
  849. })
  850. },
  851. carchange(val, index) {
  852. for (var i = 0; i < this.carList.length; i++) {
  853. if (this.carList[i].driverName == val) {
  854. this.deptBudgetList.tranCarInfoList[index].driverPhone =
  855. this.carList[i].driverPhone
  856. arrange({
  857. id: this.carList[i].id
  858. })
  859. .toPromise()
  860. .then((response) => {
  861. console.log(index,this.deptBudgetList.tranCarInfoList)
  862. this.deptBudgetList.tranCarInfoList[index].carNo =
  863. response.carNumber
  864. if (response.carLoad != null) {
  865. this.deptBudgetList.tranCarInfoList[index].loadWeight =
  866. response.carLoad
  867. } else {
  868. this.deptBudgetList.tranCarInfoList[index].loadWeight = 0
  869. }
  870. this.deptBudgetList.tranCarInfoList[index].carModel =
  871. response.carModel
  872. this.deptBudgetList.tranCarInfoList[index].carLength =
  873. response.carLength
  874. this.deptBudgetList.tranCarInfoList[index].carLengthKey =
  875. response.carLengthKey
  876. this.deptBudgetList.tranCarInfoList[index].carModelKey =
  877. response.carModelKey
  878. this.$forceUpdate()
  879. })
  880. }
  881. }
  882. },
  883. phonechange(val, index) {
  884. for (var i = 0; i < this.carList.length; i++) {
  885. if (this.carList[i].driverPhone == val) {
  886. this.deptBudgetList.tranCarInfoList[index].driver =
  887. this.carList[i].driverName
  888. arrange({
  889. id: this.carList[i].id
  890. })
  891. .toPromise()
  892. .then((response) => {
  893. console.log(this, response)
  894. this.deptBudgetList.tranCarInfoList[index].carNo =
  895. response.carNumber
  896. if (response.carLoad != null) {
  897. this.deptBudgetList.tranCarInfoList[index].loadWeight =
  898. response.carLoad
  899. } else {
  900. this.deptBudgetList.tranCarInfoList[index].loadWeight = 0
  901. }
  902. this.deptBudgetList.tranCarInfoList[index].carModel =
  903. response.carModel
  904. this.deptBudgetList.tranCarInfoList[index].carLength =
  905. response.carLength
  906. this.deptBudgetList.tranCarInfoList[index].carLengthKey =
  907. response.carLengthKey
  908. this.deptBudgetList.tranCarInfoList[index].carModelKey =
  909. response.carModelKey
  910. })
  911. }
  912. }
  913. },
  914. },
  915. }
  916. </script>
  917. <style lang="scss" scoped>
  918. // /deep/.basicInformation {
  919. // .ws-info-table {
  920. // border: none;
  921. // }
  922. // .myTest {
  923. // width: 800px;
  924. // display: flex;
  925. // height: 40px;
  926. // }
  927. // .el-form-item {
  928. // width: 33.3333%;
  929. // border: none;
  930. // height: 50px;
  931. // .el-form-item__label {
  932. // background: transparent;
  933. // border: none;
  934. // }
  935. // .el-form-item__content {
  936. // border: none;
  937. // }
  938. // }
  939. // }
  940. // .title {
  941. // position: relative;
  942. // padding-left: 10px;
  943. // }
  944. // .title::before {
  945. // content: '';
  946. // display: inline-block;
  947. // width: 5px;
  948. // height: 30px;
  949. // background: #5473e8;
  950. // position: absolute;
  951. // left: 0;
  952. // }
  953. // .el-form {
  954. // padding: 0 10%;
  955. // }
  956. // .el-button--primary {
  957. // background-color: #5878e8;
  958. // border-color: #5878e8;
  959. // }
  960. // .el-col {
  961. // background: #f6f7fc;
  962. // }
  963. // .bg-right {
  964. // text-align: right;
  965. // padding: 16px 20px;
  966. // }
  967. // .center {
  968. // margin: 0 auto;
  969. // width: 70%;
  970. // }
  971. //表格文字
  972. // /deep/.ws-info-table .el-form-item .el-form-item__label {
  973. // text-align: center;
  974. // font-size: 14px;
  975. // font-weight: 400;
  976. // color: #8890b1;
  977. // line-height: 16px;
  978. // }
  979. // //蓝标
  980. // .small-title {
  981. // position: relative;
  982. // padding: 10px;
  983. // font-weight: 600;
  984. // }
  985. // .small-title::before {
  986. // position: absolute;
  987. // content: '';
  988. // display: block;
  989. // background: #5473e8;
  990. // width: 4px;
  991. // height: 14px;
  992. // left: 0px;
  993. // top: 13px;
  994. // padding: 4px 2px;
  995. // }
  996. // .position {
  997. // position: relative;
  998. // }
  999. // .position .zaizhong {
  1000. // width: 16%;
  1001. // }
  1002. // //减号
  1003. // .del {
  1004. // position: absolute;
  1005. // // right: -38px;
  1006. // top: 9px;
  1007. // cursor: pointer;
  1008. // right: 0;
  1009. // display: inline-block;
  1010. // font-size: 20px;
  1011. // width: 20px;
  1012. // height: 10px;
  1013. // line-height: 0px;
  1014. // }
  1015. // .driver .el-form-item {
  1016. // width: 16.63%;
  1017. // }
  1018. // /deep/.ws-info-table .el-form-item .el-form-item__content {
  1019. // background: #f5f7fa;
  1020. // border-radius: 4px;
  1021. // color: #8890b1;
  1022. // font-size: 14px;
  1023. // padding: 0 25px;
  1024. // }
  1025. // /deep/.driver .ws-info-table .el-form-item .el-form-item__label {
  1026. // width: 72px;
  1027. // }
  1028. // /deep/.liaison .ws-info-table .el-form-item {
  1029. // width: 220px;
  1030. // color: #8890b1;
  1031. // font-size: 14px;
  1032. // }
  1033. // /deep/.ws-info-table .el-form-item {
  1034. // border: none;
  1035. // height: 50px;
  1036. // }
  1037. // /deep/.liaison .ws-info-table .el-form-item .el-form-item__label {
  1038. // width: 50%;
  1039. // border: 0px solid #d8dce6;
  1040. // background: #f5f7fa;
  1041. // text-align: center;
  1042. // }
  1043. // /deep/.liaison {
  1044. // background: #f5f7fa;
  1045. // border-radius: 4px;
  1046. // border: 0px solid #d8dce6;
  1047. // }
  1048. // /deep/.liaison .ws-info-table .el-form-item .el-form-item__content {
  1049. // border: none;
  1050. // background: #f5f7fa;
  1051. // padding: 0px;
  1052. // }
  1053. // .catNos {
  1054. // width: 100%;
  1055. // height: 30px;
  1056. // margin-top: 10px;
  1057. // margin-left: 20px;
  1058. // font-size: 14px;
  1059. // }
  1060. // /deep/.liaison .ws-info-table .el-form-item .el-form-item__content {
  1061. // border-radius: 0px;
  1062. // border-left: none;
  1063. // border-bottom: none;
  1064. // border-top: none;
  1065. // }
  1066. // /deep/.liaison .ws-info-table {
  1067. // background: #f6f7fc;
  1068. // border-radius: 4px;
  1069. // border: 1px solid #d8dce6;
  1070. // margin-top: 20px;
  1071. // }
  1072. //送达/未送达
  1073. // .noservice,
  1074. // .service {
  1075. // display: inline-block;
  1076. // border-radius: 4px;
  1077. // border: 1px solid #d8dce6;
  1078. // padding: 2px;
  1079. // font-size: 12px;
  1080. // }
  1081. // .noservice {
  1082. // background: #c4cada;
  1083. // color: #ffffff;
  1084. // }
  1085. // .service {
  1086. // background: #e5f1f7;
  1087. // color: #50cad4;
  1088. // }
  1089. // .serviced {
  1090. // display: inline-block;
  1091. // border-radius: 4px;
  1092. // border: 1px solid #d8dce6;
  1093. // padding: 2px;
  1094. // font-size: 12px;
  1095. // background: #e5f1f7;
  1096. // color: #2c81cf;
  1097. // }
  1098. // //添加司机
  1099. // .add {
  1100. // width: 100px;
  1101. // height: 34px;
  1102. // background: #f6f7fb;
  1103. // border-radius: 17px;
  1104. // color: #5473e8;
  1105. // font-size: 14px;
  1106. // border: none;
  1107. // }
  1108. // .add img {
  1109. // display: inline-block;
  1110. // margin-top: 3px;
  1111. // margin-left: -12px;
  1112. // }
  1113. // .add .spans {
  1114. // display: table-caption;
  1115. // width: 56px;
  1116. // height: 20px;
  1117. // line-height: 18px;
  1118. // }
  1119. /deep/.el-form-item--small.el-form-item {
  1120. margin-bottom: 0px
  1121. }
  1122. .input-item-margin {
  1123. margin-right: 20px;
  1124. }
  1125. .row-item {
  1126. width: 100%;
  1127. }
  1128. .bg-right {
  1129. text-align: right;
  1130. padding: 16px 20px;
  1131. }
  1132. .center {
  1133. margin: 0 auto;
  1134. width: 70%;
  1135. }
  1136. //蓝标
  1137. .small-title {
  1138. position: relative;
  1139. padding: 10px;
  1140. font-weight: 600;
  1141. }
  1142. //小标题文字
  1143. .small-title::before {
  1144. position: absolute;
  1145. content: '';
  1146. display: block;
  1147. background: #5473e8;
  1148. width: 4px;
  1149. height: 14px;
  1150. left: 0px;
  1151. top: 16px;
  1152. padding: 4px 2px;
  1153. }
  1154. .bg-left {
  1155. padding-left: 30px;
  1156. }
  1157. .title::before {
  1158. content: '';
  1159. display: inline-block;
  1160. width: 5px;
  1161. height: 30px;
  1162. background: #5473e8;
  1163. position: absolute;
  1164. left: 0;
  1165. }
  1166. .myTest {
  1167. display: flex;
  1168. margin-bottom: 20px;
  1169. // background: green;
  1170. padding-left: 20px;
  1171. align-items: center;
  1172. width: 800px;
  1173. }
  1174. .myTest .el-form-item {
  1175. width: 33.333%;
  1176. }
  1177. .content3 ,.contentitem{
  1178. width: calc(100% + 20px);
  1179. .content3-item1 {
  1180. position: relative;
  1181. background: #F5F7FA;
  1182. border: 1px solid #E4E7ED;
  1183. border-radius: 5px;
  1184. height: 200px;
  1185. width: 100%;
  1186. padding: 10px 20px 0 0;
  1187. margin-top: 20px;
  1188. }
  1189. }
  1190. .contentitem{
  1191. .content3-item1 {
  1192. height: 90px;
  1193. }
  1194. }
  1195. .content4 {
  1196. background: #F5F7FA;
  1197. display: flex;
  1198. margin: 10px 0;
  1199. border: 1px solid #E4E7ED;
  1200. border-radius: 5px;
  1201. position: relative;
  1202. }
  1203. .del {
  1204. position: absolute;
  1205. right: 4px;
  1206. top: 0px;
  1207. cursor: pointer;
  1208. font-size: 20px;
  1209. width: 16px;
  1210. height: 10px;
  1211. }
  1212. </style>