tranManagementTransportAdd.vue 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387
  1. // 创建运输任务
  2. <template>
  3. <div class="container">
  4. <el-row>
  5. <el-col :span="12">
  6. <h2 class="bg-left title">创建运输任务</h2>
  7. </el-col>
  8. <el-col :span="12" class="bg-right">
  9. <el-button
  10. class="bg-bottom"
  11. type="primary"
  12. size="small"
  13. @click="returnsales()"
  14. >
  15. <img
  16. width="6"
  17. height="10"
  18. style="vertical-align: bottom; margin-right: 3px"
  19. src="../../../public/img/lujing.png"
  20. alt
  21. />返回
  22. </el-button>
  23. </el-col>
  24. </el-row>
  25. <el-form
  26. ref="deptBudgetList"
  27. :rules="mainReportAdd"
  28. :model="deptBudgetList"
  29. >
  30. <ws-info-table class="el-table">
  31. <el-form-item label="任务编号" span="1" prop="taskNo" class="forlist">
  32. <el-input
  33. v-model="deptBudgetList.taskNo"
  34. placeholder="请输入任务编号"
  35. maxlength="20"
  36. size="small"
  37. disabled
  38. ></el-input>
  39. </el-form-item>
  40. <el-form-item prop="taskType" label="任务类型" span="1">
  41. <el-select
  42. v-model="deptBudgetList.taskType"
  43. placeholder="请输入任务类型"
  44. @change="selecttaskType"
  45. >
  46. <el-option
  47. v-for="item in taskType"
  48. :key="item.constKey"
  49. :label="item.constValue"
  50. :value="item.constValue"
  51. ></el-option>
  52. </el-select>
  53. </el-form-item>
  54. <el-form-item prop="contractNo" label="合同编号/移库任务编号" span="1">
  55. <el-select
  56. v-model="deptBudgetList.contractNo"
  57. placeholder="请选择编号"
  58. @change=" (val) => {
  59. selectcontractNo(val)
  60. }"
  61. >
  62. <el-option
  63. v-for="item in contractNoList"
  64. :key="item.constKey"
  65. :label="item.contractNo"
  66. :value="item.contractNo"
  67. ></el-option>
  68. </el-select>
  69. </el-form-item>
  70. <el-form-item prop="goodsName" label="货名" span="1">
  71. <el-input
  72. disabled
  73. v-model="deptBudgetList.goodsName"
  74. placeholder="请输入货名"
  75. size="small"
  76. ></el-input>
  77. </el-form-item>
  78. <el-form-item label="重量(吨)" span="1" prop="weight">
  79. <el-input
  80. @input="weightchange"
  81. v-model="deptBudgetList.weight"
  82. placeholder="请输入重量"
  83. maxlength="20"
  84. size="small"
  85. ></el-input>
  86. </el-form-item>
  87. </ws-info-table>
  88. <ws-info-table class="el-table">
  89. <div class="start-address" style="width: 36%">
  90. <el-radio-group
  91. @change="warehouseTypechange"
  92. v-model="deptBudgetList.warehouseType"
  93. >
  94. <el-radio label="1">常用仓库发货</el-radio>
  95. <el-radio label="2">临时仓库发货</el-radio>
  96. </el-radio-group>
  97. <el-select
  98. @change="sendWarehousechange"
  99. v-model="deptBudgetList.sendWarehouse"
  100. placeholder="选择仓库"
  101. class="typeselect"
  102. >
  103. <el-option
  104. v-for="item in warehouseList"
  105. :key="item.constKey"
  106. :label="item.warehouseName"
  107. :value="item.warehouseName"
  108. ></el-option>
  109. </el-select>
  110. </div>
  111. <el-form-item label="始发地" span="1" class="start-address">
  112. <el-cascader
  113. :options="options_"
  114. v-model="selectedOptions"
  115. clearable
  116. size="large"
  117. placeholder="请选择始发地"
  118. @change="handleChange"
  119. />
  120. </el-form-item>
  121. <el-form-item
  122. label="始发地详细地址"
  123. span="1"
  124. prop="startDetailedAddress"
  125. style="width: 31.333%"
  126. >
  127. <el-input
  128. v-model="deptBudgetList.startDetailedAddress"
  129. placeholder="请输入始发地详细地址"
  130. maxlength="20"
  131. size="small"
  132. ></el-input>
  133. </el-form-item>
  134. <el-form-item
  135. label="收货库点"
  136. span="1"
  137. prop="contractNo"
  138. class="start-address"
  139. style="width: 36%"
  140. >
  141. <el-select
  142. @change="sendWarehousechange1"
  143. v-model="deptBudgetList.receiveWarehouse"
  144. :disabled="warehouse"
  145. placeholder="请输入收货库点"
  146. style="width: 100%"
  147. >
  148. <el-option
  149. v-for="item in warehouseList1"
  150. :key="item.constKey"
  151. :label="item.warehouseName"
  152. :value="item.warehouseName"
  153. ></el-option>
  154. </el-select>
  155. </el-form-item>
  156. <el-form-item
  157. label="终到地"
  158. span="1"
  159. prop="contractNo"
  160. class="start-address"
  161. >
  162. <el-cascader
  163. :options="options_"
  164. v-model="selectedOptions1"
  165. clearable
  166. size="large"
  167. placeholder="请选择终到地"
  168. @change="handleChange1"
  169. />
  170. </el-form-item>
  171. <el-form-item
  172. label="终到地详细地址"
  173. span="1"
  174. prop="endDetailedAddress"
  175. class="bg-right start-address"
  176. >
  177. <el-input
  178. v-model="deptBudgetList.endDetailedAddress"
  179. placeholder="请输入终到地详细地址"
  180. maxlength="20"
  181. size="small"
  182. ></el-input>
  183. </el-form-item>
  184. <div class="check-box">
  185. <span class="check-box">运输方式</span>
  186. <el-checkbox-group v-model="checkList" prop="tranType">
  187. <el-checkbox label="汽运" checked></el-checkbox>
  188. <el-checkbox label="火运"></el-checkbox>
  189. <el-checkbox label="船运"></el-checkbox>
  190. </el-checkbox-group>
  191. </div>
  192. </ws-info-table>
  193. <div
  194. style="width: 100%"
  195. class="position"
  196. v-for="(item, index) in deptBudgetList.tranProcessInfoList"
  197. :key="item.id"
  198. >
  199. <div class="driver">
  200. <span>运输阶段{{ item.key }} {{ item.processNo }}</span>
  201. <img
  202. width="22"
  203. height="22"
  204. class="add"
  205. @click="add(index)"
  206. src="../../../public/img/add.png"
  207. alt
  208. />
  209. <img
  210. width="22"
  211. height="22"
  212. class="del"
  213. @click="del(index)"
  214. src="../../../public/img/del.png"
  215. alt
  216. />
  217. <el-checkbox
  218. @change="(val) => {engflagchange(val, index)}"
  219. class="endflag"
  220. true-label="1"
  221. false-label="0"
  222. v-model="item.endFlag"
  223. :label="1"
  224. >粮款结算阶段</el-checkbox
  225. >
  226. </div>
  227. <ws-info-table>
  228. <el-form-item label="运输方式" span="1" prop="waterContent">
  229. <el-select
  230. v-model="item.tranType"
  231. placeholder="运输方式"
  232. @change="
  233. (val) => {
  234. selecttaskwayList(val, index)
  235. }
  236. "
  237. >
  238. <el-option
  239. v-for="item in taskwayList"
  240. :key="item.constKey"
  241. :label="item.constValue"
  242. :value="item.constValue"
  243. ></el-option>
  244. </el-select>
  245. </el-form-item>
  246. <el-form-item label="发货日期" span="1" prop="impurity">
  247. <ws-date-picker
  248. v-model="item.deliveryDateStart"
  249. type="date"
  250. placeholder="请选择发货日期"
  251. value-format="yyyy-MM-dd"
  252. />
  253. </el-form-item>
  254. <el-form-item label="最晚到货日期" span="1" prop="bulkDensity">
  255. <ws-date-picker
  256. v-model="item.deliveryDateEnd"
  257. type="date"
  258. placeholder="请选择最晚到货日期"
  259. value-format="yyyy-MM-dd"
  260. />
  261. </el-form-item>
  262. <!-- 本阶段重量 -->
  263. <el-form-item
  264. label="本阶段运输重量(吨)"
  265. span="1"
  266. prop="bulkDensity"
  267. >
  268. <el-input
  269. v-model="item.weight"
  270. placeholder="请输入本阶段运输重量"
  271. size="small"
  272. ></el-input>
  273. </el-form-item>
  274. </ws-info-table>
  275. <ws-info-table>
  276. <el-form-item label="发货地区" span="1" prop="waterContent">
  277. <el-cascader
  278. :options="options_"
  279. v-model="item.selectedOptions"
  280. clearable
  281. size="large"
  282. placeholder="请选择发货地区"
  283. style="width: 200%"
  284. @change="
  285. (val) => {
  286. handleChange3(val, index)
  287. }
  288. "
  289. />
  290. </el-form-item>
  291. <el-form-item label="发货地详细地址" span="1" prop="impurity">
  292. <el-input
  293. v-model="item.sendDetailedAddress"
  294. placeholder="请输入发货地详细地址"
  295. maxlength="20"
  296. size="small"
  297. ></el-input>
  298. </el-form-item>
  299. <el-form-item label="发货人" span="1" prop="sender">
  300. <el-select
  301. v-model="item.sender"
  302. placeholder="请选择发货人"
  303. filterable
  304. :filter-method="dataFilter"
  305. @change=" (val) => {
  306. selectstaff(val, index)
  307. }"
  308. >
  309. <el-option
  310. v-for="item in options"
  311. :key="item.value"
  312. :label="item.staffName"
  313. :value="item.staffName"
  314. />
  315. </el-select>
  316. </el-form-item>
  317. <el-form-item label="发货人电话" span="1" prop="bulkDensity">
  318. <el-input
  319. v-model="item.senderPhone"
  320. placeholder="请输入发货人电话"
  321. maxlength="20"
  322. size="small"
  323. disabled
  324. ></el-input>
  325. </el-form-item>
  326. </ws-info-table>
  327. <ws-info-table>
  328. <el-form-item label="收货地区" span="1" prop="bulkDensity">
  329. <el-cascader
  330. :options="options_"
  331. v-model="item.selectedOptions1"
  332. clearable
  333. size="large"
  334. placeholder="请选择收货地区"
  335. style="width: 200%"
  336. @change="
  337. (val) => {
  338. handleChange4(val, index)
  339. }
  340. "
  341. />
  342. </el-form-item>
  343. <el-form-item label="收货地详细地址" span="1" prop="impurity">
  344. <el-input
  345. v-model="item.receiveDetailedAddress"
  346. placeholder="请输入收货地详细地址"
  347. maxlength="20"
  348. size="small"
  349. ></el-input>
  350. </el-form-item>
  351. <el-form-item label="收货人" span="1" prop="bulkDensity">
  352. <el-select
  353. v-model="item.receiver"
  354. placeholder="请选择收货人"
  355. filterable
  356. :filter-method="dataFilter"
  357. @change="(val) => {
  358. selectstaff1(val, index)
  359. }"
  360. >
  361. <el-option
  362. v-for="item in options"
  363. :key="item.value"
  364. :label="item.staffName"
  365. :value="item.staffName"
  366. />
  367. </el-select>
  368. </el-form-item>
  369. <el-form-item label="收货人电话" span="1" prop="bulkDensity">
  370. <el-input
  371. v-model="item.receiverPhone"
  372. placeholder="请输入收货人电话"
  373. maxlength="20"
  374. size="small"
  375. disabled
  376. ></el-input>
  377. </el-form-item>
  378. </ws-info-table>
  379. </div>
  380. </el-form>
  381. <!-- 提交 -->
  382. <div style="text-align: right; padding: 10px" class="center">
  383. <el-button
  384. class="bg-bottom"
  385. type="primary"
  386. size="small"
  387. @click="submit(deptBudgetList)"
  388. >提交</el-button
  389. >
  390. </div>
  391. </div>
  392. </template>
  393. <script>
  394. import { packList } from '@/model/contarct/index'
  395. import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
  396. import { addtrantask, getwarehousename, xialaNo,getstaff} from '@/model/tasksport/index'
  397. import WsUpload from '@/components/WsUpload'
  398. import mapDrag from '@/components/mapdrag/mapdrag'
  399. export default {
  400. name: 'viewSpareMoney',
  401. components: {
  402. WsUpload,
  403. mapDrag,
  404. },
  405. watch: {
  406. vesselId(val) {
  407. this.getVesselData()
  408. },
  409. isShow(val) {
  410. this.showType = val
  411. },
  412. },
  413. data() {
  414. let self = this
  415. return {
  416. checkList: [],
  417. deptBudgetList: {
  418. taskNo: '',
  419. totalStorage: 0,
  420. // goodsName: '玉米',
  421. // goodsNameKey: 1,
  422. warehouseType: '1',
  423. tranProcessInfoList: [
  424. {
  425. sort: 0,
  426. processNo: '',
  427. tranType: '汽运',
  428. tranTypeKey: '1',
  429. deliveryDateStart: '',
  430. deliveryDateEnd: '',
  431. weight: '',
  432. selectedOptions: [],
  433. selectedOptions1: [],
  434. sendPrivate: '',
  435. sendCity: '',
  436. sendArea: '',
  437. receivePrivate: '',
  438. receiveCity: '',
  439. receiveArea: '',
  440. sendDetailedAddress: '',
  441. receiveDetailedAddress: '',
  442. sender: '',
  443. receiver: '',
  444. key: 1,
  445. senderPhone: '',
  446. receiverPhone: '',
  447. endFlag: '0',
  448. },
  449. ],
  450. },
  451. radio: '1',
  452. options_: regionData,
  453. heightData: '600px',
  454. zoom: 7,
  455. options: [],
  456. selectedOptions: [],
  457. selectedOptions1: [],
  458. window: '',
  459. district: null,
  460. goodnameList: [],
  461. listDate: { country: '中国', level: 'country', city: '' },
  462. citylist: [],
  463. taskType: [],
  464. taskwayList: [],
  465. contractNoList: [],
  466. compId: sessionStorage.getItem('ws-pf_compId'),
  467. mainReportAdd: {},
  468. appendixIdsAdd: '',
  469. warehouseList: [],
  470. warehouseList1: [],
  471. size: 10,
  472. value1: '',
  473. unitList: [],
  474. name: '',
  475. age: '',
  476. number: 2,
  477. }
  478. },
  479. activated() {
  480. this.loaddata()
  481. this.showType = this.isShow
  482. },
  483. computed: {
  484. warehouse: function () {
  485. if (
  486. this.deptBudgetList.taskType == '销售出库' ||
  487. this.deptBudgetList.taskType == '贸易服务出库' ||
  488. this.deptBudgetList.taskType == '暂存出库'
  489. ) {
  490. return true
  491. } else {
  492. return false
  493. }
  494. },
  495. },
  496. methods: {
  497. sendWarehousechange(e) {
  498. for (let i = 0; i < this.warehouseList.length; i++) {
  499. if (this.warehouseList[i].warehouseName == e) {
  500. var tmp = []
  501. tmp[0] = TextToCode[this.warehouseList[i].warehousePrivate].code
  502. tmp[1] =
  503. TextToCode[this.warehouseList[i].warehousePrivate][
  504. this.warehouseList[i].warehouseCity
  505. ].code
  506. tmp[2] =
  507. TextToCode[this.warehouseList[i].warehousePrivate][
  508. this.warehouseList[i].warehouseCity
  509. ][this.warehouseList[i].warehouseArea].code
  510. this.selectedOptions = tmp
  511. this.deptBudgetList.tranProcessInfoList[0].selectedOptions = tmp
  512. this.$set(
  513. this.deptBudgetList,
  514. 'startDetailedAddress',
  515. this.warehouseList[i].detailedAddress
  516. )
  517. this.$set(
  518. this.deptBudgetList.tranProcessInfoList[0],
  519. 'sendDetailedAddress',
  520. this.deptBudgetList.startDetailedAddress
  521. )
  522. }
  523. }
  524. },
  525. dataFilter(val) {
  526. this.deptBudgetList.personCharge = val
  527. if (val) {
  528. console.log(val)
  529. this.options = this.staffList.filter((item) => {
  530. if (
  531. !!~item.staffName.indexOf(val) ||
  532. !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
  533. ) {
  534. return true
  535. }
  536. })
  537. } else {
  538. this.options = this.staffList
  539. }
  540. },
  541. selectstaff(val, index) {
  542. for (var i = 0; i < this.staffList.length; i++) {
  543. if (this.staffList[i].staffName == val) {
  544. this.deptBudgetList.tranProcessInfoList[index].senderPhone = this.staffList[i].staffMobilePhone
  545. }
  546. }
  547. },
  548. selectstaff1(val, index) {
  549. for (var i = 0; i < this.staffList.length; i++) {
  550. if (this.staffList[i].staffName == val) {
  551. this.deptBudgetList.tranProcessInfoList[index].receiverPhone = this.staffList[i].staffMobilePhone
  552. }
  553. }
  554. },
  555. selectcontractNo(val) {
  556. for (var i = 0; i < this.contractNoList.length; i++) {
  557. if (this.contractNoList[i].contractNo == val) {
  558. this.deptBudgetList.goodsName = this.contractNoList[i].goodsName
  559. }
  560. }
  561. },
  562. sendWarehousechange1(e) {
  563. for (let i = 0; i < this.warehouseList1.length; i++) {
  564. if (this.warehouseList1[i].warehouseName == e) {
  565. var tmp = []
  566. tmp[0] = TextToCode[this.warehouseList1[i].warehousePrivate].code
  567. tmp[1] =
  568. TextToCode[this.warehouseList1[i].warehousePrivate][
  569. this.warehouseList1[i].warehouseCity
  570. ].code
  571. tmp[2] =
  572. TextToCode[this.warehouseList1[i].warehousePrivate][
  573. this.warehouseList1[i].warehouseCity
  574. ][this.warehouseList1[i].warehouseArea].code
  575. this.selectedOptions1 = tmp
  576. this.$set(
  577. this.deptBudgetList,
  578. 'endDetailedAddress',
  579. this.warehouseList1[i].detailedAddress
  580. )
  581. }
  582. }
  583. },
  584. warehouseTypechange() {
  585. getwarehousename({
  586. compId: this.compId,
  587. warehouseType: this.deptBudgetList.warehouseType,
  588. })
  589. .toPromise()
  590. .then((response) => {
  591. this.warehouseList = response
  592. })
  593. },
  594. weightchange(e) {
  595. this.deptBudgetList.tranProcessInfoList[0].weight = e
  596. },
  597. engflagchange(e, index) {
  598. for(var i=0;i<this.deptBudgetList.tranProcessInfoList.length;i++){
  599. this.deptBudgetList.tranProcessInfoList[i].endFlag='0'
  600. }
  601. this.deptBudgetList.tranProcessInfoList[index].endFlag = e
  602. // if (this.endflag) {
  603. // this.deptBudgetList.tranProcessInfoList[
  604. // this.deptBudgetList.tranProcessInfoList.length - 1
  605. // ].selectedOptions1 = this.selectedOptions1
  606. // this.deptBudgetList.tranProcessInfoList[
  607. // this.deptBudgetList.tranProcessInfoList.length - 1
  608. // ].receiveDetailedAddress = this.deptBudgetList.endDetailedAddress
  609. // } else {
  610. // this.deptBudgetList.tranProcessInfoList[
  611. // this.deptBudgetList.tranProcessInfoList.length - 1
  612. // ].selectedOptions1 = []
  613. // this.deptBudgetList.tranProcessInfoList[
  614. // this.deptBudgetList.tranProcessInfoList.length - 1
  615. // ].receiveDetailedAddress = ''
  616. // }
  617. },
  618. // 获取当前年月日
  619. getdate() {
  620. var date = new Date()
  621. var year = date.getFullYear() //获取完整的年份(4位)
  622. var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
  623. var datetime = date.getDate() //获取当前日(1-31)
  624. if (mouth < 10) {
  625. mouth = '0' + mouth
  626. }
  627. if (datetime < 10) {
  628. datetime = '0' + datetime
  629. }
  630. return year +'' + mouth + datetime
  631. },
  632. MathRand() {
  633. var Num = ''
  634. for (var i = 0; i < 4; i++) {
  635. Num += Math.floor(Math.random() * 10)
  636. }
  637. return Num
  638. },
  639. // 随机验证码
  640. verifyinit() {
  641. var arr = []
  642. for (var i = 48; i < 123; i++) {
  643. if (i > 57 && i < 65) continue
  644. if (i > 90 ) continue
  645. arr.push(String.fromCharCode(i))
  646. }
  647. arr.sort(function () {
  648. return Math.random() - 0.5
  649. })
  650. arr.length = 4
  651. return arr.join('')
  652. },
  653. loaddata() {
  654. this.deptBudgetList.taskNo = 'YS' + this.getdate() + this.MathRand()
  655. this.deptBudgetList.tranProcessInfoList[0].processNo =
  656. this.deptBudgetList.taskNo + '-1'
  657. // 货名
  658. packList({ constId: 'CON2' })
  659. .toPromise()
  660. .then((response) => {
  661. this.goodnameList = response
  662. })
  663. // 任务类型
  664. packList({ constId: 'TRAN3' })
  665. .toPromise()
  666. .then((response) => {
  667. this.taskType = response
  668. })
  669. // 运输方式
  670. packList({ constId: 'TRAN6' })
  671. .toPromise()
  672. .then((response) => {
  673. this.taskwayList = response
  674. })
  675. getwarehousename({
  676. compId: this.compId,
  677. warehouseType: this.deptBudgetList.warehouseType,
  678. })
  679. .toPromise()
  680. .then((response) => {
  681. this.warehouseList = response
  682. })
  683. getwarehousename({
  684. compId: this.compId,
  685. warehouseType: 1,
  686. })
  687. .toPromise()
  688. .then((response) => {
  689. this.warehouseList1 = response
  690. })
  691. getstaff({ compId: sessionStorage.getItem('ws-pf_compId') })
  692. .toPromise()
  693. .then((response) => {
  694. // this.agent = response
  695. this.options = response
  696. this.staffList = response
  697. this.sender = response
  698. })
  699. xialaNo({
  700. compId: this.compId,
  701. flag: 8,
  702. })
  703. .toPromise()
  704. .then((response) => {
  705. this.contractNoList = response
  706. })
  707. },
  708. confirmPositioncity() {
  709. this.listDate.level = 'city'
  710. this.listDate.country = this.name
  711. },
  712. // 关闭 dialog时 处理文件url 初始化upload组件
  713. handleClose() {
  714. this.dialogViewSpareMoney = false
  715. },
  716. add(index) {
  717. this.deptBudgetList.tranProcessInfoList.push({
  718. processNo:
  719. this.deptBudgetList.taskNo +
  720. '-' +
  721. (this.deptBudgetList.tranProcessInfoList.length + 1),
  722. tranType: '汽运',
  723. tranTypeKey: '1',
  724. deliveryDateStart: '',
  725. deliveryDateEnd: '',
  726. weight:
  727. this.deptBudgetList.tranProcessInfoList[
  728. this.deptBudgetList.tranProcessInfoList.length - 1
  729. ].weight,
  730. selectedOptions: [],
  731. selectedOptions1: [],
  732. sendPrivate: '',
  733. sendCity: '',
  734. sendArea: '',
  735. receivePrivate: '',
  736. receiveCity: '',
  737. receiveArea: '',
  738. sendDetailedAddress: '',
  739. receiveDetailedAddress: '',
  740. sender: '',
  741. receiver: '',
  742. key: this.deptBudgetList.tranProcessInfoList.length + 1,
  743. senderPhone: '',
  744. receiverPhone: '',
  745. endFlag: '0',
  746. })
  747. },
  748. del(index) {
  749. if (this.deptBudgetList.tranProcessInfoList.length > 1) {
  750. this.deptBudgetList.tranProcessInfoList.splice(index, 1)
  751. }
  752. for (let i = 0; i < this.deptBudgetList.tranProcessInfoList.length; i++) {
  753. this.$set(this.deptBudgetList.tranProcessInfoList[i], 'key', i + 1)
  754. this.$set(
  755. this.deptBudgetList.tranProcessInfoList[i],
  756. 'processNo',
  757. this.deptBudgetList.taskNo + '-' + (i + 1)
  758. )
  759. }
  760. this.$forceUpdate()
  761. },
  762. handleChange(value) {
  763. this.selectedOptions = value
  764. this.deptBudgetList.startPrivate = CodeToText[value[0]]
  765. this.deptBudgetList.startCity = CodeToText[value[1]]
  766. this.deptBudgetList.startArea = CodeToText[value[2]]
  767. },
  768. handleChange1(value) {
  769. this.selectedOptions1 = value
  770. this.deptBudgetList.endPrivate = CodeToText[value[0]]
  771. this.deptBudgetList.endCity = CodeToText[value[1]]
  772. this.deptBudgetList.endArea = CodeToText[value[2]]
  773. },
  774. handleChange3(value, index) {
  775. this.deptBudgetList.tranProcessInfoList[index].sendPrivate =
  776. CodeToText[value[0]]
  777. this.deptBudgetList.tranProcessInfoList[index].sendCity =
  778. CodeToText[value[1]]
  779. this.deptBudgetList.tranProcessInfoList[index].sendArea =
  780. CodeToText[value[2]]
  781. },
  782. handleChange4(value, index) {
  783. this.deptBudgetList.tranProcessInfoList[index].receivePrivate =
  784. CodeToText[value[0]]
  785. this.deptBudgetList.tranProcessInfoList[index].receiveCity =
  786. CodeToText[value[1]]
  787. this.deptBudgetList.tranProcessInfoList[index].receiveArea =
  788. CodeToText[value[2]]
  789. },
  790. returnsales() {
  791. this.$router.push({ path: 'tranManagementTransport' })
  792. this.deptBudgetList = {
  793. taskNo: '',
  794. totalStorage: 0,
  795. goodsName: '玉米',
  796. goodsNameKey: 1,
  797. warehouseType: '1',
  798. tranProcessInfoList: [
  799. {
  800. processNo: '',
  801. tranType: '汽运',
  802. deliveryDateStart: '',
  803. deliveryDateEnd: '',
  804. weight: '',
  805. selectedOptions: [],
  806. selectedOptions1: [],
  807. sendPrivate: '',
  808. sendCity: '',
  809. sendArea: '',
  810. receivePrivate: '',
  811. receiveCity: '',
  812. receiveArea: '',
  813. sendDetailedAddress: '',
  814. receiveDetailedAddress: '',
  815. sender: '',
  816. receiver: '',
  817. senderPhone: '',
  818. receiverPhone: '',
  819. },
  820. ],
  821. }
  822. },
  823. selecttaskType(e) {
  824. for (var i = 0; i < this.taskType.length; i++) {
  825. if (this.taskType[i].constValue == e) {
  826. this.deptBudgetList.taskTypeKey = this.taskType[i].constKey
  827. }
  828. }
  829. },
  830. selecttaskwayList(e, index) {
  831. for (var i = 0; i < this.taskwayList.length; i++) {
  832. if (this.taskwayList[i].constValue == e) {
  833. this.deptBudgetList.tranProcessInfoList[index].tranTypeKey =
  834. this.taskwayList[i].constKey
  835. }
  836. }
  837. },
  838. selectgoodsname(e) {
  839. for (var i = 0; i < this.goodnameList.length; i++) {
  840. if (this.goodnameList[i].constValue == e) {
  841. this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
  842. }
  843. }
  844. },
  845. onChange(files) {
  846. this.fileNum = files
  847. this.$refs.upload.handleSaveBill().then((res) => {})
  848. },
  849. submit() {
  850. if (!this.deptBudgetList.taskNo) {
  851. this.$message({
  852. message: '任务编号不能为空!',
  853. type: 'warning',
  854. })
  855. return
  856. }
  857. if (!this.deptBudgetList.taskType) {
  858. this.$message({
  859. message: '任务类型不能为空!',
  860. type: 'warning',
  861. })
  862. return
  863. }
  864. if (!this.deptBudgetList.contractNo) {
  865. this.$message({
  866. message: '合同编号/移库任务编号不能为空!',
  867. type: 'warning',
  868. })
  869. return
  870. }
  871. if (!this.deptBudgetList.goodsName) {
  872. this.$message({
  873. message: '货名不能为空!',
  874. type: 'warning',
  875. })
  876. return
  877. }
  878. if (!this.deptBudgetList.weight) {
  879. this.$message({
  880. message: '重量(吨)不能为空!',
  881. type: 'warning',
  882. })
  883. return
  884. }
  885. if (!this.deptBudgetList.sendWarehouse) {
  886. this.$message({
  887. message: '发货仓库不能为空!',
  888. type: 'warning',
  889. })
  890. return
  891. }
  892. if (this.selectedOptions.length <= 0) {
  893. this.$message({
  894. message: '始发地不能为空!',
  895. type: 'warning',
  896. })
  897. return
  898. }
  899. if (!this.deptBudgetList.startDetailedAddress) {
  900. this.$message({
  901. message: '始发地详细地址不能为空!',
  902. type: 'warning',
  903. })
  904. return
  905. }
  906. if (this.selectedOptions1.length <= 0) {
  907. this.$message({
  908. message: '终到地不能为空!',
  909. type: 'warning',
  910. })
  911. return
  912. }
  913. if (!this.deptBudgetList.endDetailedAddress) {
  914. this.$message({
  915. message: '终到地详细地址不能为空!',
  916. type: 'warning',
  917. })
  918. return
  919. }
  920. if (this.checkList.length <= 0) {
  921. this.$message({
  922. message: '运输方式多选框不能为空!',
  923. type: 'warning',
  924. })
  925. return
  926. }
  927. for (var i = 0; i < this.deptBudgetList.tranProcessInfoList.length; i++) {
  928. this.deptBudgetList.tranProcessInfoList[i].processNo =
  929. this.deptBudgetList.taskNo + (i + 1)
  930. if (
  931. new Date(
  932. this.deptBudgetList.tranProcessInfoList[i].deliveryDateStart
  933. ).getTime() >
  934. new Date(
  935. this.deptBudgetList.tranProcessInfoList[i].deliveryDateEnd
  936. ).getTime()
  937. ) {
  938. this.$message({
  939. message: '发货日期不能大于最晚到货日期!',
  940. type: 'warning',
  941. })
  942. return
  943. }
  944. if (!this.deptBudgetList.tranProcessInfoList[i].deliveryDateStart) {
  945. this.$message({
  946. message: '发货日期不能为空!',
  947. type: 'warning',
  948. })
  949. return
  950. }
  951. if (!this.deptBudgetList.tranProcessInfoList[i].deliveryDateEnd) {
  952. this.$message({
  953. message: '最晚到货日期不能为空!',
  954. type: 'warning',
  955. })
  956. return
  957. }
  958. if (!this.deptBudgetList.tranProcessInfoList[i].weight) {
  959. this.$message({
  960. message: '重量不能为空!',
  961. type: 'warning',
  962. })
  963. return
  964. }
  965. if (!this.deptBudgetList.tranProcessInfoList[i].sender) {
  966. this.$message({
  967. message: '发货人不能为空!',
  968. type: 'warning',
  969. })
  970. return
  971. }
  972. if (!this.deptBudgetList.tranProcessInfoList[i].senderPhone) {
  973. this.$message({
  974. message: '发货人电话不能为空!',
  975. type: 'warning',
  976. })
  977. return
  978. }
  979. if (!this.deptBudgetList.tranProcessInfoList[i].receiver) {
  980. this.$message({
  981. message: '收货人不能为空!',
  982. type: 'warning',
  983. })
  984. return
  985. }
  986. if (!this.deptBudgetList.tranProcessInfoList[i].receiverPhone) {
  987. this.$message({
  988. message: '收货人电话不能为空!',
  989. type: 'warning',
  990. })
  991. return
  992. }
  993. if (
  994. !this.deptBudgetList.tranProcessInfoList[i].receiveDetailedAddress
  995. ) {
  996. this.$message({
  997. message: '收获详细地址不能为空!',
  998. type: 'warning',
  999. })
  1000. return
  1001. }
  1002. if (!this.deptBudgetList.tranProcessInfoList[i].sendDetailedAddress) {
  1003. this.$message({
  1004. message: '发货详细地址不能为空!',
  1005. type: 'warning',
  1006. })
  1007. return
  1008. }
  1009. }
  1010. // debugger
  1011. // if (this.deptBudgetList.endFlag=='1') {
  1012. this.$confirm(`运输任务提交成功后将派发到物流部门,是否确定提交?`, {
  1013. confirmButtonText: '确定',
  1014. cancelButtonText: '取消',
  1015. type: 'warning',
  1016. })
  1017. .then(() => {
  1018. this.$refs.deptBudgetList.validate((valid) => {
  1019. if (valid) {
  1020. this.deptBudgetList.compId =
  1021. sessionStorage.getItem('ws-pf_compId')
  1022. console.log()
  1023. this.deptBudgetList.tranType = this.checkList.toString()
  1024. this.deptBudgetList.startPrivate =
  1025. CodeToText[this.selectedOptions[0]]
  1026. this.deptBudgetList.startCity =
  1027. CodeToText[this.selectedOptions[1]]
  1028. this.deptBudgetList.startArea =
  1029. CodeToText[this.selectedOptions[2]]
  1030. this.deptBudgetList.tranProcessInfoList[0].sendPrivate =
  1031. CodeToText[this.selectedOptions[0]]
  1032. this.deptBudgetList.tranProcessInfoList[0].sendCity =
  1033. CodeToText[this.selectedOptions[1]]
  1034. this.deptBudgetList.tranProcessInfoList[0].sendArea =
  1035. CodeToText[this.selectedOptions[2]]
  1036. // if (this.endflag) {
  1037. // this.deptBudgetList.tranProcessInfoList[
  1038. // this.deptBudgetList.tranProcessInfoList.length - 1
  1039. // ].receivePrivate = CodeToText[this.selectedOptions1[0]]
  1040. // this.deptBudgetList.tranProcessInfoList[
  1041. // this.deptBudgetList.tranProcessInfoList.length - 1
  1042. // ].receiveCity = CodeToText[this.selectedOptions1[1]]
  1043. // this.deptBudgetList.tranProcessInfoList[
  1044. // this.deptBudgetList.tranProcessInfoList.length - 1
  1045. // ].receiveArea = CodeToText[this.selectedOptions1[2]]
  1046. // }
  1047. if (
  1048. this.deptBudgetList.taskType != '销售出库' ||
  1049. this.deptBudgetList.taskType != '贸易服务出库' ||
  1050. this.deptBudgetList.taskType != '暂存出库'
  1051. ){
  1052. this.deptBudgetList.endPrivate = CodeToText[this.selectedOptions1[0]]
  1053. this.deptBudgetList.endCity = CodeToText[this.selectedOptions1[1]]
  1054. this.deptBudgetList.endArea = CodeToText[this.selectedOptions1[2]]
  1055. }
  1056. for (
  1057. var i = 0;
  1058. i < this.deptBudgetList.tranProcessInfoList.length;
  1059. i++
  1060. ) {
  1061. this.deptBudgetList.tranProcessInfoList[i].sort = i
  1062. }
  1063. addtrantask(this.deptBudgetList)
  1064. .toPromise()
  1065. .then((response) => {
  1066. this.$message.success('添加成功')
  1067. this.deptBudgetList = {
  1068. taskNo: '',
  1069. totalStorage: 0,
  1070. goodsName: '玉米',
  1071. goodsNameKey: 1,
  1072. warehouseType: '1',
  1073. tranProcessInfoList: [
  1074. {
  1075. processNo: '',
  1076. tranType: '汽运',
  1077. deliveryDateStart: '',
  1078. deliveryDateEnd: '',
  1079. weight: '',
  1080. selectedOptions: [],
  1081. selectedOptions1: [],
  1082. sendPrivate: '',
  1083. sendCity: '',
  1084. sendArea: '',
  1085. receivePrivate: '',
  1086. receiveCity: '',
  1087. receiveArea: '',
  1088. sendDetailedAddress: '',
  1089. receiveDetailedAddress: '',
  1090. sender: '',
  1091. receiver: '',
  1092. senderPhone: '',
  1093. receiverPhone: '',
  1094. contractNo: '',
  1095. receiveWarehouse: '',
  1096. },
  1097. ],
  1098. }
  1099. this.$router.push({ path: 'tranManagementTransport' })
  1100. })
  1101. } else {
  1102. EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  1103. return false
  1104. }
  1105. })
  1106. })
  1107. .catch(() => {
  1108. return false
  1109. })
  1110. // } else {
  1111. // this.$confirm(`您还未选择粮款结算阶段,是否确定提交??`, {
  1112. // confirmButtonText: '确定',
  1113. // cancelButtonText: '取消',
  1114. // type: 'warning',
  1115. // })
  1116. // .then(() => {
  1117. // this.$refs.deptBudgetList.validate((valid) => {
  1118. // if (valid) {
  1119. // this.deptBudgetList.compId =
  1120. // sessionStorage.getItem('ws-pf_compId')
  1121. // console.log(this.checkList.toString())
  1122. // this.deptBudgetList.tranType = this.checkList.toString()
  1123. // this.deptBudgetList.startPrivate =
  1124. // CodeToText[this.selectedOptions[0]]
  1125. // this.deptBudgetList.startCity =
  1126. // CodeToText[this.selectedOptions[1]]
  1127. // this.deptBudgetList.startArea =
  1128. // CodeToText[this.selectedOptions[2]]
  1129. // this.deptBudgetList.tranProcessInfoList[0].sendPrivate =
  1130. // CodeToText[this.selectedOptions[0]]
  1131. // this.deptBudgetList.tranProcessInfoList[0].sendCity =
  1132. // CodeToText[this.selectedOptions[1]]
  1133. // this.deptBudgetList.tranProcessInfoList[0].sendArea =
  1134. // CodeToText[this.selectedOptions[2]]
  1135. // // if (this.endflag) {
  1136. // // this.deptBudgetList.tranProcessInfoList[
  1137. // // this.deptBudgetList.tranProcessInfoList.length - 1
  1138. // // ].receivePrivate = CodeToText[this.selectedOptions1[0]]
  1139. // // this.deptBudgetList.tranProcessInfoList[
  1140. // // this.deptBudgetList.tranProcessInfoList.length - 1
  1141. // // ].receiveCity = CodeToText[this.selectedOptions1[1]]
  1142. // // this.deptBudgetList.tranProcessInfoList[
  1143. // // this.deptBudgetList.tranProcessInfoList.length - 1
  1144. // // ].receiveArea = CodeToText[this.selectedOptions1[2]]
  1145. // // }
  1146. // if (
  1147. // this.deptBudgetList.taskType != '销售出库' ||
  1148. // this.deptBudgetList.taskType != '贸易服务出库' ||
  1149. // this.deptBudgetList.taskType != '暂存出库'
  1150. // ){
  1151. // this.deptBudgetList.endPrivate = CodeToText[this.selectedOptions1[0]]
  1152. // this.deptBudgetList.endCity = CodeToText[this.selectedOptions1[1]]
  1153. // this.deptBudgetList.endArea = CodeToText[this.selectedOptions1[2]]
  1154. // }
  1155. // for (
  1156. // var i = 0;
  1157. // i < this.deptBudgetList.tranProcessInfoList.length;
  1158. // i++
  1159. // ) {
  1160. // this.deptBudgetList.tranProcessInfoList[i].sort = i
  1161. // }
  1162. // addtrantask(this.deptBudgetList)
  1163. // .toPromise()
  1164. // .then((response) => {
  1165. // this.$message.success('添加成功')
  1166. // this.deptBudgetList = {
  1167. // taskNo: '',
  1168. // totalStorage: 0,
  1169. // goodsName: '玉米',
  1170. // goodsNameKey: 1,
  1171. // warehouseType: '1',
  1172. // tranProcessInfoList: [
  1173. // {
  1174. // processNo: '',
  1175. // tranType: '汽运',
  1176. // deliveryDateStart: '',
  1177. // deliveryDateEnd: '',
  1178. // weight: '',
  1179. // selectedOptions: [],
  1180. // selectedOptions1: [],
  1181. // sendPrivate: '',
  1182. // sendCity: '',
  1183. // sendArea: '',
  1184. // receivePrivate: '',
  1185. // receiveCity: '',
  1186. // receiveArea: '',
  1187. // sendDetailedAddress: '',
  1188. // receiveDetailedAddress: '',
  1189. // sender: '',
  1190. // receiver: '',
  1191. // senderPhone: '',
  1192. // receiverPhone: '',
  1193. // contractNo: '',
  1194. // receiveWarehouse: '',
  1195. // },
  1196. // ],
  1197. // }
  1198. // this.$router.push({ path: 'tranManagementTransport' })
  1199. // })
  1200. // } else {
  1201. // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  1202. // return false
  1203. // }
  1204. // })
  1205. // })
  1206. // .catch(() => {
  1207. // return false
  1208. // })
  1209. // }
  1210. },
  1211. resetForm(deptBudgetList) {
  1212. this.$refs[deptBudgetList].resetFields()
  1213. },
  1214. },
  1215. }
  1216. </script>
  1217. <style lang="scss" scoped>
  1218. .position {
  1219. position: relative;
  1220. border: 1px solid #5473e8;
  1221. border-radius: 4px;
  1222. margin-top: 20px;
  1223. background: #f6f7fc;
  1224. border-left: 5px solid #5473e8;
  1225. }
  1226. /deep/.position .ws-info-table .el-form-item {
  1227. width: 25%;
  1228. height: 50px;
  1229. }
  1230. /deep/.position .el-select,
  1231. /deep/.el-select {
  1232. width: 100%;
  1233. }
  1234. /deep/.position .ws-info-table .el-form-item .el-form-item__label,
  1235. /deep/.position .ws-info-table .el-form-item .el-form-item__content {
  1236. background: #f6f7fc;
  1237. font-size: 14px;
  1238. color: #8890b1;
  1239. }
  1240. .typeselect {
  1241. width: 42%;
  1242. margin-left: 32px;
  1243. }
  1244. .del,
  1245. .add {
  1246. cursor: pointer;
  1247. margin-left: 10px;
  1248. }
  1249. .el-checkbox-group {
  1250. font-size: 0;
  1251. float: right;
  1252. margin-left: 25px;
  1253. }
  1254. .check-box {
  1255. float: left;
  1256. font-size: 14px;
  1257. color: #8890b1;
  1258. }
  1259. .el-checkbox__label {
  1260. color: #8890b1;
  1261. }
  1262. .el-form {
  1263. padding: 0 10%;
  1264. }
  1265. .ws-info-table {
  1266. border: none;
  1267. }
  1268. /deep/.ws-info-table .el-form-item {
  1269. border-right: 1px solid #cdd2dc;
  1270. border-bottom: 1px solid #cdd2dc;
  1271. }
  1272. .readonly {
  1273. position: relative;
  1274. }
  1275. .title {
  1276. position: relative;
  1277. }
  1278. .title::before {
  1279. content: '';
  1280. display: inline-block;
  1281. width: 5px;
  1282. height: 30px;
  1283. background: #5473e8;
  1284. position: absolute;
  1285. left: 0;
  1286. }
  1287. //去边框
  1288. /deep/.el-form-item {
  1289. border-right: 0px;
  1290. border-bottom: 0px;
  1291. }
  1292. .el-form {
  1293. margin-top: 50px;
  1294. }
  1295. .endflag {
  1296. vertical-align: top;
  1297. }
  1298. .el-col {
  1299. background: #f6f7fc;
  1300. }
  1301. .bg-left {
  1302. padding-left: 30px;
  1303. }
  1304. .bg-right {
  1305. padding-right: 10px;
  1306. text-align: right;
  1307. }
  1308. .bg-bottom {
  1309. margin: 15px 0px;
  1310. }
  1311. .el-radio,
  1312. .el-radio__input {
  1313. margin-top: 11px;
  1314. margin-left: 11px;
  1315. width: 93px;
  1316. }
  1317. .driver {
  1318. margin-top: 10px;
  1319. font-weight: bold;
  1320. margin-left: 20px;
  1321. color: #5473e8;
  1322. font-size: 16px;
  1323. }
  1324. /deep/.nei {
  1325. .ws-info-table {
  1326. border: none;
  1327. }
  1328. .el-form-item {
  1329. width: 33.3333%;
  1330. border: none;
  1331. .el-form-item__label {
  1332. background: transparent;
  1333. border: none;
  1334. }
  1335. .el-form-item__content {
  1336. border: none;
  1337. }
  1338. }
  1339. }
  1340. /deep/.el-table--border:after,
  1341. /deep/.el-table--group:after,
  1342. /deep/.el-table:before {
  1343. background: transparent;
  1344. }
  1345. //输入框标题
  1346. /deep/.ws-info-table .el-form-item .el-form-item__label {
  1347. background: #ffffff;
  1348. width: min-content;
  1349. font-size: 14px;
  1350. color: #8890b1;
  1351. }
  1352. //表单子项
  1353. /deep/.ws-info-table .el-form-item {
  1354. width: 20%;
  1355. border: none;
  1356. height: 50px;
  1357. }
  1358. //输入框
  1359. /deep/.ws-info-table .el-form-item .el-form-item__content {
  1360. border: none;
  1361. font-size: 14px;
  1362. color: #8890b1;
  1363. }
  1364. /deep/ .el-input--small .el-input__inner {
  1365. font-size: 14px;
  1366. color: #8890b1;
  1367. }
  1368. .el-form-item.start-address.el-form-item--small {
  1369. width: 31.9%;
  1370. }
  1371. .el-cascader {
  1372. width: 100%;
  1373. }
  1374. .el-form {
  1375. height: 73vh;
  1376. overflow: scroll;
  1377. }
  1378. </style>