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