tranManagementWarehouseInOutTaskAdd.vue 62 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102
  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 class="bg-bottom" type="primary" size="small" @click="returnsales()">
  10. <img
  11. width="6"
  12. height="10"
  13. style="vertical-align: bottom; margin-right: 3px"
  14. src="../../../public/img/lujing.png"
  15. alt
  16. />返回
  17. </el-button>
  18. </el-col>
  19. </el-row>
  20. <div class="basicInformation">
  21. <div class="annu">
  22. <el-radio-group @change="tasktypechange" v-model="dataList.taskTypeKey">
  23. <el-radio label="1" class="a">出库</el-radio>
  24. <el-radio label="2" class="a">入库</el-radio>
  25. <el-radio label="3" class="a">移库</el-radio>
  26. <el-radio label="4" class="a">退库并出库</el-radio>
  27. </el-radio-group>
  28. </div>
  29. <div class="ding"></div>
  30. <div v-if="dataList.taskTypeKey != 2 && dataList.taskTypeKey != 4" class="center1">
  31. <img
  32. style="position: relative; top: 40px; left: 300px"
  33. width="19"
  34. height="19"
  35. src="../../../public/img/cangku.png"
  36. alt
  37. />
  38. <!--出库=-->
  39. <div class="small-title">
  40. <h3>出库任务({{ inOutTaskNo }})</h3>
  41. </div>
  42. <el-form ref="dataList" :model="dataList" label-width="140px" input-width="300px">
  43. <!-- 仓库名 -->
  44. <el-form-item label="仓库名">
  45. <el-select
  46. v-model="dataList.warehouseName"
  47. placeholder="请选择仓库名"
  48. class="typeselect"
  49. @change="selectwarehouseName"
  50. >
  51. <el-option
  52. v-for="item in warehouseNameList"
  53. :key="item.constKey"
  54. :label="item.warehouseName"
  55. :value="item.id"
  56. />
  57. </el-select>
  58. </el-form-item>
  59. <!-- 出库类型 -->
  60. <el-form-item label="出库类型">
  61. <el-select
  62. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  63. v-model="dataList.inOutType"
  64. placeholder="请选择出库类型"
  65. class="typeselect"
  66. @change="selectstorageType"
  67. >
  68. <el-option
  69. v-for="item in storageType"
  70. :key="item.constKey"
  71. v-if="
  72. (dataList.taskTypeKey == 1 &&
  73. item.constValue != '移库出库') ||
  74. (dataList.taskTypeKey == 3 &&
  75. item.constValue == '移库出库') ||
  76. (dataList.taskTypeKey == 4 && item.constValue == '销售出库')
  77. "
  78. :label="item.constValue"
  79. :value="item.constValue"
  80. />
  81. </el-select>
  82. </el-form-item>
  83. <!-- 合同编号 -->
  84. <el-form-item v-if="dataList.taskTypeKey != 3" label="合同编号">
  85. <el-select
  86. @change="changecontract"
  87. v-model="dataList.contractNo"
  88. placeholder="请输入合同编号"
  89. class="typeselect"
  90. >
  91. <el-option
  92. v-for="item in contractNoList"
  93. :key="item.constKey"
  94. :label="item.contractNo"
  95. :value="item.contractNo"
  96. ></el-option>
  97. </el-select>
  98. </el-form-item>
  99. <el-form-item v-if="dataList.taskTypeKey == 3" label="移库任务编号">
  100. <el-input
  101. @input="selectTaskNo"
  102. v-model="dataList.moveTaskNo"
  103. placeholder="请输入移库任务编号"
  104. class="typeselect"
  105. >
  106. <el-option
  107. v-for="item in contractNoList"
  108. :key="item.constKey"
  109. :label="item.contractNo"
  110. :value="item.contractNo"
  111. ></el-option>
  112. </el-input>
  113. </el-form-item>
  114. <!-- 货名 -->
  115. <el-form-item label="货名" class="huom">
  116. <el-select
  117. :disabled="dataList.taskTypeKey != 3"
  118. v-model="dataList.goodsName"
  119. placeholder="货名"
  120. class="huom"
  121. @change="selectgoodsName"
  122. >
  123. <el-option
  124. v-for="item in goodnameList"
  125. :key="item.constKey"
  126. :label="item.constValue"
  127. :value="item.constValue"
  128. ></el-option>
  129. </el-select>
  130. </el-form-item>
  131. <!--重量(吨)-->
  132. <el-form-item label="重量(吨)" span="1" style="margin-left: 350px; margin-top: -40px">
  133. <el-input
  134. @input="weightchange1"
  135. v-model="dataList.weight"
  136. placeholder="请输入重量"
  137. maxlength="120"
  138. size="small"
  139. class="huom"
  140. />
  141. </el-form-item>
  142. <!-- 品级 -->
  143. <el-form-item label="品级">
  144. <el-select
  145. v-model="dataList.grade"
  146. placeholder
  147. class="typeselect"
  148. @change="selectpackingMethod"
  149. >
  150. <el-option
  151. v-for="item in gradeList"
  152. :key="item.constKey"
  153. :label="item.constValue"
  154. :value="item.constValue"
  155. />
  156. </el-select>
  157. </el-form-item>
  158. <!--容重(克/升)>=-->
  159. <el-form-item label="容重(克/升)>=">
  160. <el-input
  161. @input="bulkDensitychange"
  162. v-model="dataList.bulkDensity"
  163. placeholder="请输入容重"
  164. maxlength="120"
  165. size="small"
  166. class="huom"
  167. />
  168. </el-form-item>
  169. <!--水分(%)<=-->
  170. <el-form-item label="水分(%)<=" span="1" style="margin-left: 350px; margin-top: -40px">
  171. <el-input
  172. @input="waterContentchange"
  173. v-model="dataList.waterContent"
  174. placeholder="请输入水分占比"
  175. maxlength="120"
  176. size="small"
  177. class="huom"
  178. />
  179. </el-form-item>
  180. <!--单价(元/吨)-->
  181. <el-form-item label="单价(元/吨)" span="1" style="margin-left: 650px; margin-top: -40px">
  182. <el-input
  183. @input="unitPricechange"
  184. v-model="dataList.unitPrice"
  185. placeholder="请输入单价"
  186. maxlength="120"
  187. size="small"
  188. class="huom"
  189. />
  190. </el-form-item>
  191. <!--预计出库日期-->
  192. <el-form-item label="预计出库日期" span="1" prop="predictDate" class="deliverydate">
  193. <el-date-picker
  194. v-model="dataList.predictDate"
  195. type="date"
  196. placeholder="请选择预计出库日期"
  197. value-format="yyyy-MM-dd"
  198. />
  199. </el-form-item>
  200. <!--经办人-->
  201. <el-form-item label="出库经办人">
  202. <el-select
  203. v-model="dataList.agent"
  204. placeholder="请选择经办人"
  205. filterable
  206. :filter-method="dataFilter"
  207. @change="selectstaff"
  208. >
  209. <el-option
  210. v-for="item in options"
  211. :key="item.value"
  212. :label="item.staffName"
  213. :value="item.staffName"
  214. />
  215. </el-select>
  216. </el-form-item>
  217. <!--业务描述=-->
  218. <el-form-item v-if="dataList.taskTypeKey != 3" label="业务描述" span="20">
  219. <el-input
  220. v-model="dataList.businessDescribe"
  221. placeholder="请输入业务描述,不超过150字"
  222. maxlength="150"
  223. size="large"
  224. />
  225. </el-form-item>
  226. </el-form>
  227. </div>
  228. <div v-show="dataList.taskTypeKey != 1" class="center1">
  229. <img
  230. style="position: relative; top: 40px; left: 300px"
  231. width="19"
  232. height="19"
  233. src="../../../public/img/cangku.png"
  234. alt
  235. />
  236. <div class="small-title">
  237. <h3>入库任务({{ inOutTaskNo1 }} )</h3>
  238. </div>
  239. <el-form v-if="!deletetask" ref="form" :model="form" label-width="140px">
  240. <!-- 仓库名 -->
  241. <el-form-item label="仓库名">
  242. <el-select
  243. v-model="dataList1.warehouseName"
  244. placeholder="请选择仓库名"
  245. class="typeselect"
  246. @change="selectwarehouseName1"
  247. >
  248. <el-option
  249. v-for="item in warehouseNameList"
  250. :key="item.constKey"
  251. :label="item.warehouseName"
  252. :value="item.id"
  253. />
  254. </el-select>
  255. </el-form-item>
  256. <!-- 入库类型 -->
  257. <el-form-item label="入库类型">
  258. <el-select
  259. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  260. v-model="dataList1.inOutType"
  261. placeholder="请选择入库类型"
  262. class="typeselect"
  263. @change="selectstorageType1"
  264. >
  265. <el-option
  266. v-for="item in storageType1"
  267. :key="item.constKey"
  268. v-if="
  269. (dataList1.taskTypeKey == 2 &&
  270. item.constValue != '移库入库') ||
  271. (dataList1.taskTypeKey == 3 &&
  272. item.constValue == '移库入库') ||
  273. (dataList1.taskTypeKey == 4 && item.constValue == '退库')
  274. "
  275. :label="item.constValue"
  276. :value="item.constValue"
  277. />
  278. </el-select>
  279. </el-form-item>
  280. <!-- 合同编号 -->
  281. <el-form-item v-if="dataList1.taskTypeKey != 3" label="合同编号">
  282. <el-select
  283. @change="changecontract1"
  284. v-model="dataList1.contractNo"
  285. placeholder="请输入合同编号"
  286. class="typeselect"
  287. >
  288. <el-option
  289. v-for="item in contractNoList1"
  290. :key="item.constKey"
  291. :label="item.contractNo"
  292. :value="item.contractNo"
  293. ></el-option>
  294. </el-select>
  295. </el-form-item>
  296. <el-form-item v-if="dataList1.taskTypeKey == 3" label="移库任务编号">
  297. <el-input
  298. disabled
  299. v-model="dataList1.moveTaskNo"
  300. placeholder="请输入移库任务编号"
  301. class="typeselect"
  302. >
  303. <el-option
  304. v-for="item in contractNoList"
  305. :key="item.constKey"
  306. :label="item.contractNo"
  307. :value="item.contractNo"
  308. ></el-option>
  309. </el-input>
  310. </el-form-item>
  311. <!-- 货名 -->
  312. <el-form-item label="货名" class="huom">
  313. <el-select
  314. :disabled="dataList.taskTypeKey != 3 || dataList.taskTypeKey == 3"
  315. v-model="dataList.goodsName"
  316. placeholder="货名"
  317. class="huom"
  318. @change="selectgoodsName1"
  319. >
  320. <el-option
  321. v-for="item in goodnameList"
  322. :key="item.constKey"
  323. :label="item.constValue"
  324. :value="item.constValue"
  325. ></el-option>
  326. </el-select>
  327. </el-form-item>
  328. <!--重量(吨)-->
  329. <el-form-item label="重量(吨)" span="1" style="margin-left: 350px; margin-top: -40px">
  330. <el-input
  331. @input="weightchange"
  332. v-model="dataList1.weight"
  333. placeholder="请输入重量"
  334. maxlength="120"
  335. size="small"
  336. class="huom"
  337. />
  338. </el-form-item>
  339. <!-- 品级 -->
  340. <el-form-item label="品级">
  341. <el-select
  342. :disabled="dataList.taskTypeKey == 3"
  343. v-model="dataList1.grade"
  344. placeholder
  345. class="typeselect"
  346. @change="selectpackingMethod1"
  347. >
  348. <el-option
  349. v-for="item in gradeList"
  350. :key="item.constKey"
  351. :label="item.constValue"
  352. :value="item.constValue"
  353. />
  354. </el-select>
  355. </el-form-item>
  356. <!--容重(克/升)>=-->
  357. <el-form-item label="容重(克/升)>=">
  358. <el-input
  359. @input="bulkDensitychange"
  360. :disabled="dataList.taskTypeKey == 3"
  361. v-model="dataList1.bulkDensity"
  362. placeholder="请输入容重"
  363. maxlength="120"
  364. size="small"
  365. class="huom"
  366. />
  367. </el-form-item>
  368. <!--水分(%)<=-->
  369. <el-form-item label="水分(%)<=" span="1" style="margin-left: 350px; margin-top: -40px">
  370. <el-input
  371. @input="waterContentchange"
  372. :disabled="dataList.taskTypeKey == 3"
  373. v-model="dataList1.waterContent"
  374. placeholder="请输入水分占比"
  375. maxlength="120"
  376. size="small"
  377. class="huom"
  378. />
  379. </el-form-item>
  380. <!--单价(元/吨)-->
  381. <el-form-item label="单价(元/吨)" span="1" style="margin-left: 650px; margin-top: -40px">
  382. <el-input
  383. @input="unitPricechange"
  384. :disabled="dataList.taskTypeKey == 3"
  385. v-model="dataList1.unitPrice"
  386. placeholder="请输入单价"
  387. maxlength="120"
  388. size="small"
  389. class="huom"
  390. />
  391. </el-form-item>
  392. <!--预计出库日期-->
  393. <el-form-item label="预计入库日期" span="1" prop="predictDate" class="deliverydate">
  394. <el-date-picker
  395. v-model="dataList1.predictDate"
  396. type="date"
  397. placeholder="请选择预计入库日期"
  398. value-format="yyyy-MM-dd"
  399. />
  400. </el-form-item>
  401. <!--经办人-->
  402. <el-form-item label="入库经办人">
  403. <el-select
  404. v-model="dataList1.agent"
  405. placeholder="请选择经办人"
  406. filterable
  407. :filter-method="dataFilter1"
  408. @change="selectstaff1"
  409. >
  410. <el-option
  411. v-for="item in options1"
  412. :key="item.value"
  413. :label="item.staffName"
  414. :value="item.staffName"
  415. />
  416. </el-select>
  417. </el-form-item>
  418. <!--业务描述=-->
  419. <el-form-item v-if="dataList.taskTypeKey != 4" label="业务描述">
  420. <el-input
  421. v-model="dataList1.businessDescribe"
  422. placeholder="请输入业务描述,不超过150字"
  423. maxlength="150"
  424. size="large"
  425. />
  426. </el-form-item>
  427. </el-form>
  428. </div>
  429. <div v-if="dataList.taskTypeKey == 4" class="center1">
  430. <!--出库=-->
  431. <div class="small-title">
  432. <img
  433. style="position: relative; top: 40px; left: -22px"
  434. width="19"
  435. height="19"
  436. src="../../../public/img/cangku.png"
  437. alt
  438. />
  439. <h3>出库任务({{ inOutTaskNo }})</h3>
  440. </div>
  441. <el-form ref="dataList" :model="dataList" label-width="140px">
  442. <!-- 仓库名 -->
  443. <el-form-item label="仓库名">
  444. <el-select
  445. v-model="dataList.warehouseName"
  446. placeholder="请选择仓库名"
  447. class="typeselect"
  448. @change="selectwarehouseName"
  449. >
  450. <el-option
  451. v-for="item in warehouseNameList"
  452. :key="item.constKey"
  453. :label="item.warehouseName"
  454. :value="item.id"
  455. />
  456. </el-select>
  457. </el-form-item>
  458. <!-- 出库类型 -->
  459. <el-form-item label="出库类型">
  460. <el-select
  461. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  462. v-model="dataList.inOutType"
  463. placeholder="请选择出库类型"
  464. class="typeselect"
  465. @change="selectstorageType"
  466. >
  467. <el-option
  468. v-for="item in storageType"
  469. :key="item.constKey"
  470. v-if="
  471. (dataList.taskTypeKey == 1 &&
  472. item.constValue != '移库出库') ||
  473. (dataList.taskTypeKey == 3 &&
  474. item.constValue == '移库出库') ||
  475. (dataList.taskTypeKey == 4 && item.constValue == '销售出库')
  476. "
  477. :label="item.constValue"
  478. :value="item.constValue"
  479. />
  480. </el-select>
  481. </el-form-item>
  482. <!-- 合同编号 -->
  483. <el-form-item v-if="dataList.taskTypeKey != 3" label="合同编号">
  484. <el-select
  485. @change="changecontract"
  486. v-model="dataList.contractNo"
  487. placeholder="请输入合同编号"
  488. class="typeselect"
  489. >
  490. <el-option
  491. v-for="item in contractNoList"
  492. :key="item.constKey"
  493. :label="item.contractNo"
  494. :value="item.contractNo"
  495. ></el-option>
  496. </el-select>
  497. </el-form-item>
  498. <el-form-item v-if="dataList.taskTypeKey == 3" label="移库任务编号">
  499. <el-select
  500. @change="selectTaskNo"
  501. v-model="dataList.moveTaskNo"
  502. placeholder="请输入移库任务编号"
  503. class="typeselect"
  504. >
  505. <el-option
  506. v-for="item in contractNoList"
  507. :key="item.constKey"
  508. :label="item.contractNo"
  509. :value="item.contractNo"
  510. ></el-option>
  511. </el-select>
  512. </el-form-item>
  513. <!-- 货名 -->
  514. <el-form-item label="货名" class="huom">
  515. <el-select
  516. :disabled="dataList.taskTypeKey != 3"
  517. v-model="dataList.goodsName"
  518. placeholder="货名"
  519. class="huom"
  520. @change="selectgoodsName"
  521. >
  522. <el-option
  523. v-for="item in goodnameList"
  524. :key="item.constKey"
  525. :label="item.constValue"
  526. :value="item.constValue"
  527. ></el-option>
  528. </el-select>
  529. </el-form-item>
  530. <!--重量(吨)-->
  531. <el-form-item label="重量(吨)" span="1" style="margin-left: 350px; margin-top: -40px">
  532. <el-input
  533. :disabled="dataList.taskTypeKey == 4"
  534. v-model="dataList.weight"
  535. placeholder="请输入重量"
  536. maxlength="120"
  537. size="small"
  538. class="huom"
  539. />
  540. </el-form-item>
  541. <!-- 品级 -->
  542. <el-form-item label="品级">
  543. <el-select
  544. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  545. v-model="dataList.grade"
  546. placeholder
  547. class="typeselect"
  548. @change="selectpackingMethod"
  549. >
  550. <el-option
  551. v-for="item in gradeList"
  552. :key="item.constKey"
  553. :label="item.constValue"
  554. :value="item.constValue"
  555. />
  556. </el-select>
  557. </el-form-item>
  558. <!--容重(克/升)>=-->
  559. <el-form-item label="容重(克/升)>=">
  560. <el-input
  561. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  562. v-model="dataList.bulkDensity"
  563. placeholder="请输入容重"
  564. maxlength="120"
  565. size="small"
  566. class="huom"
  567. />
  568. </el-form-item>
  569. <!--水分(%)<=-->
  570. <el-form-item label="水分(%)<=" span="1" style="margin-left: 350px; margin-top: -40px">
  571. <el-input
  572. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  573. v-model="dataList.waterContent"
  574. placeholder="请输入水分占比"
  575. maxlength="120"
  576. size="small"
  577. class="huom"
  578. />
  579. </el-form-item>
  580. <!--单价(元/吨)-->
  581. <el-form-item label="单价(元/吨)" span="1" style="margin-left: 650px; margin-top: -40px">
  582. <el-input
  583. :disabled="dataList.taskTypeKey == 3 || dataList.taskTypeKey == 4"
  584. v-model="dataList.unitPrice"
  585. placeholder="请输入单价"
  586. maxlength="120"
  587. size="small"
  588. class="huom"
  589. />
  590. </el-form-item>
  591. <!--预计出库日期-->
  592. <el-form-item label="预计出库日期" span="1" prop="predictDate" class="deliverydate">
  593. <el-date-picker
  594. v-model="dataList.predictDate"
  595. type="date"
  596. placeholder="请选择预计出库日期"
  597. value-format="yyyy-MM-dd"
  598. />
  599. </el-form-item>
  600. <!--经办人-->
  601. <el-form-item label="出库经办人">
  602. <el-select
  603. v-model="dataList.agent"
  604. placeholder="请选择经办人"
  605. filterable
  606. :filter-method="dataFilter"
  607. @change="selectstaff"
  608. >
  609. <el-option
  610. v-for="item in options"
  611. :key="item.value"
  612. :label="item.staffName"
  613. :value="item.staffName"
  614. />
  615. </el-select>
  616. </el-form-item>
  617. <!--业务描述=-->
  618. <el-form-item label="业务描述">
  619. <el-input
  620. v-model="dataList.businessDescribe"
  621. placeholder="请输入业务描述,不超过150字"
  622. maxlength="150"
  623. size="large"
  624. />
  625. </el-form-item>
  626. </el-form>
  627. </div>
  628. </div>
  629. <!-- 提交 -->
  630. <div style="text-align: right; padding: 10px" class="center">
  631. <el-button class="bg-bottom" type="primary" size="small" @click="submit()">提交</el-button>
  632. </div>
  633. </div>
  634. </template>
  635. <script>
  636. import {
  637. getwarehousename,
  638. xialaNo,
  639. addoreditoutput,
  640. getGoodsName
  641. } from '@/model/tasksport/index'
  642. import { mapGetters } from 'vuex'
  643. import { pullDown, getstaff } from '@/model/warehouse/index'
  644. import Pagination from '@/components/Pagination'
  645. import WsUpload from '@/components/WsUpload'
  646. // import { dayjs, fmoney, EventBus } from 'base-core-lib'
  647. import { dayjs, EventBus } from 'base-core-lib'
  648. export default {
  649. name: 'viewSpareMoney',
  650. components: {
  651. WsUpload,
  652. Pagination
  653. },
  654. watch: {
  655. // vesselId(val) {
  656. // this.getList()
  657. // },
  658. isShow(val) {
  659. this.showType = val
  660. },
  661. flag(val) {
  662. xialaNo({
  663. compId: this.compId,
  664. flag: val
  665. })
  666. .toPromise()
  667. .then(response => {
  668. if (
  669. this.dataList1.taskTypeKey == 2 ||
  670. this.dataList1.taskTypeKey == 4
  671. ) {
  672. this.contractNoList1 = response
  673. if (this.dataList1.taskTypeKey == 2) {
  674. this.contractNoList = response
  675. }
  676. } else {
  677. this.contractNoList = response
  678. }
  679. })
  680. }
  681. },
  682. computed: {
  683. ...mapGetters(['deptBudgetList'])
  684. },
  685. data() {
  686. return {
  687. flag: 1,
  688. //弹出框
  689. dialogViewSpareMoney: false,
  690. dialogApproveFormVisible: false,
  691. // 船舶类型
  692. monetaryKey: null,
  693. // 表格显示数据
  694. tableDate: [],
  695. // 是否显示
  696. showType: true,
  697. disabled: false,
  698. // 年
  699. year: '',
  700. contractNoList: [],
  701. contractNoList1: [],
  702. deptBudgetTotal: 0,
  703. readonly: true,
  704. currentPage: 1,
  705. pageSize: 10,
  706. searchType: 1,
  707. searchKeyWord: '',
  708. radio: '1',
  709. contractType: 2,
  710. startDate: null,
  711. endDate: null,
  712. goodnameList: [],
  713. checked: true,
  714. form: {},
  715. staffList: [],
  716. staffList1: [],
  717. options: [],
  718. options1: [],
  719. storageType: [],
  720. storageType1: [],
  721. outContractNo: [],
  722. // 提交类型
  723. submitType: true,
  724. status: [],
  725. warehouseNameList: [],
  726. warehouseNameList1: [],
  727. appendixIdsAdd: '',
  728. uploadSuccess: {},
  729. deletetask: false,
  730. warehouseInOutDetail: {},
  731. onChange: {},
  732. deptBudgetList1: [],
  733. gradeList: [],
  734. rules: {
  735. netWeight: [
  736. {
  737. required: true,
  738. type: 'number',
  739. message: '请输入活动名称',
  740. trigger: 'blur'
  741. }
  742. ]
  743. },
  744. size: 10,
  745. compId: sessionStorage.getItem('ws-pf_compId'),
  746. deptCircularPage: {},
  747. packtypeList: {},
  748. date: {
  749. year: dayjs().format('YYYY'),
  750. month: dayjs().format('MM')
  751. },
  752. contractList: [],
  753. inOutTaskNo: '',
  754. inOutTaskNo1: '',
  755. dataList: { taskTypeKey: '1' },
  756. dataList1: { taskTypeKey: '1' },
  757. historyList: [],
  758. pickerBeginDateBefore: {
  759. disabledDate: time => {
  760. return time.getTime() > Date.now()
  761. }
  762. },
  763. accessoryTFs: false
  764. }
  765. },
  766. activated() {
  767. this.getList()
  768. },
  769. methods: {
  770. //返回按钮
  771. revert() {
  772. this.$router.go(-1)
  773. },
  774. returnsales() {
  775. this.$router.push({ path: 'tranManagementWarehouseInOuttask' })
  776. },
  777. // 获取当前年月日
  778. getdate() {
  779. var date = new Date()
  780. var year = date.getFullYear() //获取完整的年份(4位)
  781. var mouth = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
  782. var datetime = date.getDate() //获取当前日(1-31)
  783. var hour = date.getHours()
  784. var minutes = date.getMinutes()
  785. var seconds = date.getSeconds()
  786. if (mouth < 10) {
  787. mouth = '0' + mouth
  788. }
  789. if (datetime < 10) {
  790. datetime = '0' + datetime
  791. }
  792. if (hour < 10) {
  793. hour = '0' + hour
  794. }
  795. if (minutes < 10) {
  796. minutes = '0' + minutes
  797. }
  798. if (seconds < 10) {
  799. seconds = '0' + seconds
  800. }
  801. return year + '' + mouth + datetime + hour + minutes + seconds
  802. },
  803. // 随机验证码
  804. verifyinit() {
  805. var arr = []
  806. for (var i = 48; i < 57; i++) {
  807. arr.push(String.fromCharCode(i))
  808. }
  809. arr.sort(function() {
  810. return Math.random() - 0.5
  811. })
  812. arr.length = 4
  813. return arr.join('')
  814. },
  815. MathRand() {
  816. var Num = ''
  817. for (var i = 0; i < 4; i++) {
  818. Num += Math.floor(Math.random() * 10)
  819. }
  820. return Num
  821. },
  822. selectTaskNo(e) {
  823. if (this.dataList.taskTypeKey == 3) {
  824. this.$set(this.dataList1, 'moveTaskNo', e)
  825. }
  826. },
  827. dataFilter(val) {
  828. // console.log(val,"名")
  829. this.deptBudgetList.staffList = val
  830. if (val) {
  831. //val存在
  832. this.options = this.staffList.filter(item => {
  833. if (
  834. !!~item.staffName.indexOf(val) ||
  835. !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
  836. ) {
  837. return true
  838. }
  839. })
  840. } else {
  841. //val为空时,还原数组
  842. this.options = this.staffList
  843. }
  844. },
  845. dataFilter1(val) {
  846. // console.log(val,"名")
  847. this.deptBudgetList.staffList1 = val
  848. if (val) {
  849. //val存在
  850. this.options = this.staffList1.filter(item => {
  851. if (
  852. !!~item.staffName.indexOf(val) ||
  853. !!~item.staffName.toUpperCase().indexOf(val.toUpperCase())
  854. ) {
  855. return true
  856. }
  857. })
  858. } else {
  859. //val为空时,还原数组
  860. this.options1 = this.staffList1
  861. }
  862. },
  863. weightchange(e) {
  864. if (this.dataList.taskTypeKey == 4) {
  865. this.$set(this.dataList, 'weight', e)
  866. }
  867. },
  868. weightchange1(e) {
  869. if (this.dataList.taskTypeKey == 3) {
  870. this.$set(this.dataList1, 'weight', e)
  871. }
  872. },
  873. bulkDensitychange(e) {
  874. if (this.dataList.taskTypeKey == 4) {
  875. this.$set(this.dataList, 'bulkDensity', e)
  876. } else if (this.dataList1.taskTypeKey == 3) {
  877. this.$set(this.dataList1, 'bulkDensity', e)
  878. }
  879. },
  880. waterContentchange(e) {
  881. if (this.dataList.taskTypeKey == 4) {
  882. this.$set(this.dataList, 'waterContent', e)
  883. } else if (this.dataList1.taskTypeKey == 3) {
  884. this.$set(this.dataList1, 'waterContent', e)
  885. }
  886. },
  887. unitPricechange(e) {
  888. if (this.dataList.taskTypeKey == 4) {
  889. this.$set(this.dataList, 'unitPrice', e)
  890. } else if (this.dataList1.taskTypeKey == 3) {
  891. this.$set(this.dataList1, 'unitPrice', e)
  892. }
  893. },
  894. changecontract(e) {
  895. if (this.dataList.taskTypeKey != 3) {
  896. for (let i = 0; i < this.contractNoList.length; i++) {
  897. if (this.contractNoList[i].contractNo == e) {
  898. getGoodsName({
  899. contractId: this.contractNoList[i].id,
  900. contractNo: this.contractNoList[i].contractNo
  901. })
  902. .toPromise()
  903. .then(response => {
  904. this.$set(this.dataList, 'goodsName', response.goodsName)
  905. this.$set(this.dataList, 'goodsNameKey', response.goodsNameKey)
  906. this.$set(this.dataList, 'grade', response.grade)
  907. this.$set(this.dataList, 'gradeKey', response.gradeKey)
  908. this.$set(this.dataList, 'waterContent', response.waterContent)
  909. this.$set(this.dataList, 'bulkDensity', response.bulkDensity)
  910. this.$set(this.dataList, 'weight', response.weight)
  911. this.$set(
  912. this.dataList,
  913. 'unitPrice',
  914. response.unitContractPrice
  915. )
  916. })
  917. }
  918. }
  919. }
  920. },
  921. selectwarehouseName(e) {
  922. for (var i = 0; i < this.warehouseNameList.length; i++) {
  923. if (this.warehouseNameList[i].id == e) {
  924. this.dataList.warehouseName = this.warehouseNameList[i].warehouseName
  925. //经办人
  926. getstaff({
  927. compId: sessionStorage.getItem('ws-pf_compId'),
  928. warehouseId: e
  929. })
  930. .toPromise()
  931. .then(response => {
  932. this.options = response
  933. this.staffList = response
  934. // this.agent = response
  935. })
  936. }
  937. }
  938. },
  939. selectwarehouseName1(e) {
  940. for (var i = 0; i < this.warehouseNameList.length; i++) {
  941. if (this.warehouseNameList[i].id == e) {
  942. this.dataList1.warehouseName = this.warehouseNameList[i].warehouseName
  943. //经办人
  944. getstaff({
  945. compId: sessionStorage.getItem('ws-pf_compId'),
  946. warehouseId: e
  947. })
  948. .toPromise()
  949. .then(response => {
  950. this.options1 = response
  951. this.staffList1 = response
  952. // this.agent = response
  953. })
  954. }
  955. }
  956. },
  957. changecontract1(e) {
  958. if (this.dataList1.taskTypeKey != 3) {
  959. for (let i = 0; i < this.contractNoList.length; i++) {
  960. if (this.contractNoList[i].contractNo == e) {
  961. getGoodsName({
  962. contractId: this.contractNoList[i].id,
  963. contractNo: this.contractNoList[i].contractNo
  964. })
  965. .toPromise()
  966. .then(response => {
  967. this.$set(this.dataList1, 'goodsName', response.goodsName)
  968. this.$set(this.dataList1, 'goodsNameKey', response.goodsNameKey)
  969. this.$set(this.dataList1, 'grade', response.grade)
  970. this.$set(this.dataList1, 'gradeKey', response.gradeKey)
  971. this.$set(this.dataList1, 'waterContent', response.waterContent)
  972. this.$set(this.dataList1, 'bulkDensity', response.bulkDensity)
  973. this.$set(this.dataList1, 'weight', response.weight)
  974. this.$set(
  975. this.dataList1,
  976. 'unitPrice',
  977. response.unitContractPrice
  978. )
  979. })
  980. }
  981. }
  982. }
  983. },
  984. selectstaff(e) {
  985. for (var i = 0; i < this.staffList.length; i++) {
  986. if (this.staffList[i].staffName == e) {
  987. this.dataList.agentKey = this.staffList[i].staffId
  988. }
  989. }
  990. },
  991. selectstaff1(e) {
  992. for (var i = 0; i < this.staffList.length; i++) {
  993. if (this.staffList[i].staffName == e) {
  994. this.dataList1.agentKey = this.staffList[i].staffId
  995. }
  996. }
  997. },
  998. requestadd(list, status) {
  999. list.compId = sessionStorage.getItem('ws-pf_compId')
  1000. list.publisher =
  1001. sessionStorage.getItem('ws-pf_roleName') +
  1002. sessionStorage.getItem('ws-pf_staffName')
  1003. addoreditoutput(list)
  1004. .toPromise()
  1005. .then(response => {
  1006. var that = this
  1007. this.$message.success('添加成功')
  1008. setTimeout(function() {
  1009. that.dataList={taskTypeKey:1}
  1010. that.dataList1={}
  1011. that.$router.push({ path: 'tranManagementWarehouseInOuttask' })
  1012. }, 2000)
  1013. })
  1014. },
  1015. //提交按钮
  1016. submit() {
  1017. if (this.dataList.taskTypeKey == 1) {
  1018. if (!this.dataList.warehouseName) {
  1019. this.$message({
  1020. message: '仓库名不能为空!',
  1021. type: 'warning'
  1022. })
  1023. return
  1024. }
  1025. if (!this.dataList.contractNo) {
  1026. this.$message({
  1027. message: '合同编号不能为空!',
  1028. type: 'warning'
  1029. })
  1030. return
  1031. }
  1032. if (!this.dataList.weight) {
  1033. this.$message({
  1034. message: '重量(吨)不能为空!',
  1035. type: 'warning'
  1036. })
  1037. return
  1038. }
  1039. if (
  1040. isNaN(this.dataList.weight) ||
  1041. (String(this.dataList.weight).indexOf('.') != -1 &&
  1042. String(this.dataList.weight).length -
  1043. (String(this.dataList.weight).indexOf('.') + 1) >
  1044. 2) ||
  1045. this.dataList.weight < 0 ||
  1046. this.dataList.weight > 200000
  1047. ) {
  1048. this.$message({
  1049. message: '重量输入有误!',
  1050. type: 'warning'
  1051. })
  1052. return
  1053. }
  1054. if (!this.dataList.bulkDensity) {
  1055. this.$message({
  1056. message: '容重不能为空!',
  1057. type: 'warning'
  1058. })
  1059. return
  1060. }
  1061. if (
  1062. this.dataList.bulkDensity < 500 ||
  1063. this.dataList.bulkDensity > 1000
  1064. ) {
  1065. this.$message({
  1066. message: '容重输入错误',
  1067. type: 'warning'
  1068. })
  1069. return
  1070. }
  1071. if (
  1072. String(this.dataList.bulkDensity).indexOf('.') != -1 &&
  1073. String(this.dataList.bulkDensity).length -
  1074. (String(this.dataList.bulkDensity).indexOf('.') + 1) >
  1075. 0
  1076. ) {
  1077. this.$message({
  1078. message: '容重需输入整数',
  1079. type: 'warning'
  1080. })
  1081. return
  1082. }
  1083. if (!this.dataList.waterContent) {
  1084. this.$message({
  1085. message: '水分不能为空!',
  1086. type: 'warning'
  1087. })
  1088. return
  1089. }
  1090. if (this.dataList.waterContent < 0 || this.dataList.waterContent > 40) {
  1091. this.$message({
  1092. message: '水分输入错误',
  1093. type: 'warning'
  1094. })
  1095. return
  1096. }
  1097. if (
  1098. String(this.dataList.waterContent).indexOf('.') != -1 &&
  1099. String(this.dataList.waterContent).length -
  1100. (String(this.dataList.waterContent).indexOf('.') + 1) >
  1101. 1
  1102. ) {
  1103. this.$message({
  1104. message: '水分输入错误',
  1105. type: 'warning'
  1106. })
  1107. return
  1108. }
  1109. if (!this.dataList.unitPrice) {
  1110. this.$message({
  1111. message: '单价不能为空!',
  1112. type: 'warning'
  1113. })
  1114. return
  1115. }
  1116. if (
  1117. (this.dataList.unitPrice &&
  1118. String(this.dataList.unitPrice).indexOf('.') != -1 &&
  1119. String(this.dataList.unitPrice).length -
  1120. (String(this.dataList.unitPrice).indexOf('.') + 1) >
  1121. 2) ||
  1122. this.dataList.unitPrice > 100000 ||
  1123. this.dataList.unitPrice < 1
  1124. ) {
  1125. this.$message({
  1126. message: '单价输入错误',
  1127. type: 'warning'
  1128. })
  1129. return
  1130. }
  1131. if (!this.dataList.predictDate) {
  1132. this.$message({
  1133. message: '预计出库日期不能为空!',
  1134. type: 'warning'
  1135. })
  1136. return
  1137. }
  1138. if (!this.dataList.agent) {
  1139. this.$message({
  1140. message: '出库经办人不能为空!',
  1141. type: 'warning'
  1142. })
  1143. return
  1144. }
  1145. if (!this.dataList.businessDescribe) {
  1146. this.$message({
  1147. message: '业务描述不能为空!',
  1148. type: 'warning'
  1149. })
  1150. return
  1151. }
  1152. }
  1153. if (this.dataList.taskTypeKey == 2) {
  1154. if (!this.dataList1.warehouseName) {
  1155. this.$message({
  1156. message: '仓库名不能为空!',
  1157. type: 'warning'
  1158. })
  1159. return
  1160. }
  1161. if (!this.dataList1.contractNo) {
  1162. this.$message({
  1163. message: '合同编号不能为空!',
  1164. type: 'warning'
  1165. })
  1166. return
  1167. }
  1168. if (!this.dataList1.weight) {
  1169. this.$message({
  1170. message: '重量(吨)不能为空!',
  1171. type: 'warning'
  1172. })
  1173. return
  1174. }
  1175. if (
  1176. isNaN(this.dataList1.weight) ||
  1177. (String(this.dataList1.weight).indexOf('.') != -1 &&
  1178. String(this.dataList1.weight).length -
  1179. (String(this.dataList1.weight).indexOf('.') + 1) >
  1180. 2) ||
  1181. this.dataList1.weight < 0 ||
  1182. this.dataList1.weight > 200000
  1183. ) {
  1184. this.$message({
  1185. message: '重量输入有误!',
  1186. type: 'warning'
  1187. })
  1188. return
  1189. }
  1190. if (!this.dataList1.bulkDensity) {
  1191. this.$message({
  1192. message: '容重不能为空!',
  1193. type: 'warning'
  1194. })
  1195. return
  1196. }
  1197. if (
  1198. this.dataList1.bulkDensity < 500 ||
  1199. this.dataList1.bulkDensity > 1000
  1200. ) {
  1201. this.$message({
  1202. message: '容重输入错误',
  1203. type: 'warning'
  1204. })
  1205. return
  1206. }
  1207. if (
  1208. String(this.dataList1.bulkDensity).indexOf('.') != -1 &&
  1209. String(this.dataList1.bulkDensity).length -
  1210. (String(this.dataList1.bulkDensity).indexOf('.') + 1) >
  1211. 0
  1212. ) {
  1213. this.$message({
  1214. message: '容重需输入整数',
  1215. type: 'warning'
  1216. })
  1217. return
  1218. }
  1219. if (!this.dataList1.waterContent) {
  1220. this.$message({
  1221. message: '水分不能为空!',
  1222. type: 'warning'
  1223. })
  1224. return
  1225. }
  1226. if (
  1227. this.dataList1.waterContent < 0 ||
  1228. this.dataList1.waterContent > 40
  1229. ) {
  1230. this.$message({
  1231. message: '水分输入错误',
  1232. type: 'warning'
  1233. })
  1234. return
  1235. }
  1236. if (
  1237. String(this.dataList1.waterContent).indexOf('.') != -1 &&
  1238. String(this.dataList1.waterContent).length -
  1239. (String(this.dataList1.waterContent).indexOf('.') + 1) >
  1240. 1
  1241. ) {
  1242. this.$message({
  1243. message: '水分输入错误',
  1244. type: 'warning'
  1245. })
  1246. return
  1247. }
  1248. if (!this.dataList1.unitPrice) {
  1249. this.$message({
  1250. message: '单价不能为空!',
  1251. type: 'warning'
  1252. })
  1253. return
  1254. }
  1255. if (
  1256. (this.dataList1.unitPrice &&
  1257. String(this.dataList1.unitPrice).indexOf('.') != -1 &&
  1258. String(this.dataList1.unitPrice).length -
  1259. (String(this.dataList1.unitPrice).indexOf('.') + 1) >
  1260. 2) ||
  1261. this.dataList1.unitPrice > 100000 ||
  1262. this.dataList1.unitPrice < 1
  1263. ) {
  1264. this.$message({
  1265. message: '单价输入错误',
  1266. type: 'warning'
  1267. })
  1268. return
  1269. }
  1270. if (!this.dataList1.predictDate) {
  1271. this.$message({
  1272. message: '预计入库日期不能为空!',
  1273. type: 'warning'
  1274. })
  1275. return
  1276. }
  1277. if (!this.dataList1.agent) {
  1278. this.$message({
  1279. message: '入库经办人不能为空!',
  1280. type: 'warning'
  1281. })
  1282. return
  1283. }
  1284. if (!this.dataList1.businessDescribe) {
  1285. this.$message({
  1286. message: '业务描述不能为空!',
  1287. type: 'warning'
  1288. })
  1289. return
  1290. }
  1291. }
  1292. if (this.dataList.taskTypeKey == 3) {
  1293. if (!this.dataList.warehouseName) {
  1294. this.$message({
  1295. message: '出库仓库名不能为空!',
  1296. type: 'warning'
  1297. })
  1298. return
  1299. }
  1300. if (!this.dataList1.warehouseName) {
  1301. this.$message({
  1302. message: '入库仓库名不能为空!',
  1303. type: 'warning'
  1304. })
  1305. return
  1306. }
  1307. if (!this.dataList1.moveTaskNo) {
  1308. this.$message({
  1309. message: '移库任务编号不能为空!',
  1310. type: 'warning'
  1311. })
  1312. return
  1313. }
  1314. if (!this.dataList1.weight) {
  1315. this.$message({
  1316. message: '重量(吨)不能为空!',
  1317. type: 'warning'
  1318. })
  1319. return
  1320. }
  1321. if (
  1322. isNaN(this.dataList1.weight) ||
  1323. (String(this.dataList1.weight).indexOf('.') != -1 &&
  1324. String(this.dataList1.weight).length -
  1325. (String(this.dataList1.weight).indexOf('.') + 1) >
  1326. 2) ||
  1327. this.dataList1.weight < 0 ||
  1328. this.dataList1.weight > 200000
  1329. ) {
  1330. this.$message({
  1331. message: '重量输入有误!',
  1332. type: 'warning'
  1333. })
  1334. return
  1335. }
  1336. if (!this.dataList1.bulkDensity) {
  1337. this.$message({
  1338. message: '容重不能为空!',
  1339. type: 'warning'
  1340. })
  1341. return
  1342. }
  1343. if (
  1344. this.dataList1.bulkDensity < 500 ||
  1345. this.dataList1.bulkDensity > 1000
  1346. ) {
  1347. this.$message({
  1348. message: '容重输入错误',
  1349. type: 'warning'
  1350. })
  1351. return
  1352. }
  1353. if (
  1354. String(this.dataList1.bulkDensity).indexOf('.') != -1 &&
  1355. String(this.dataList1.bulkDensity).length -
  1356. (String(this.dataList1.bulkDensity).indexOf('.') + 1) >
  1357. 0
  1358. ) {
  1359. this.$message({
  1360. message: '容重需输入整数',
  1361. type: 'warning'
  1362. })
  1363. return
  1364. }
  1365. if (!this.dataList1.waterContent) {
  1366. this.$message({
  1367. message: '水分不能为空!',
  1368. type: 'warning'
  1369. })
  1370. return
  1371. }
  1372. if (
  1373. this.dataList1.waterContent < 0 ||
  1374. this.dataList1.waterContent > 40
  1375. ) {
  1376. this.$message({
  1377. message: '水分输入错误',
  1378. type: 'warning'
  1379. })
  1380. return
  1381. }
  1382. if (
  1383. String(this.dataList1.waterContent).indexOf('.') != -1 &&
  1384. String(this.dataList1.waterContent).length -
  1385. (String(this.dataList1.waterContent).indexOf('.') + 1) >
  1386. 1
  1387. ) {
  1388. this.$message({
  1389. message: '水分输入错误',
  1390. type: 'warning'
  1391. })
  1392. return
  1393. }
  1394. if (!this.dataList1.unitPrice) {
  1395. this.$message({
  1396. message: '单价不能为空!',
  1397. type: 'warning'
  1398. })
  1399. return
  1400. }
  1401. if (
  1402. (this.dataList1.unitPrice &&
  1403. String(this.dataList1.unitPrice).indexOf('.') != -1 &&
  1404. String(this.dataList1.unitPrice).length -
  1405. (String(this.dataList1.unitPrice).indexOf('.') + 1) >
  1406. 2) ||
  1407. this.dataList1.unitPrice > 100000 ||
  1408. this.dataList1.unitPrice < 1
  1409. ) {
  1410. this.$message({
  1411. message: '单价输入错误',
  1412. type: 'warning'
  1413. })
  1414. return
  1415. }
  1416. if (!this.dataList.predictDate) {
  1417. this.$message({
  1418. message: '预计出库日期不能为空!',
  1419. type: 'warning'
  1420. })
  1421. return
  1422. }
  1423. if (!this.dataList1.predictDate) {
  1424. this.$message({
  1425. message: '预计入库日期不能为空!',
  1426. type: 'warning'
  1427. })
  1428. return
  1429. }
  1430. if (!this.dataList.agent) {
  1431. this.$message({
  1432. message: '出库经办人不能为空!',
  1433. type: 'warning'
  1434. })
  1435. return
  1436. }
  1437. if (!this.dataList1.agent) {
  1438. this.$message({
  1439. message: '入库经办人不能为空!',
  1440. type: 'warning'
  1441. })
  1442. return
  1443. }
  1444. if (!this.dataList1.businessDescribe) {
  1445. this.$message({
  1446. message: '业务描述不能为空!',
  1447. type: 'warning'
  1448. })
  1449. return
  1450. }
  1451. }
  1452. if (this.dataList1.taskTypeKey == 4) {
  1453. if (!this.dataList.warehouseName) {
  1454. this.$message({
  1455. message: '出库仓库名不能为空!',
  1456. type: 'warning'
  1457. })
  1458. return
  1459. }
  1460. if (!this.dataList1.warehouseName) {
  1461. this.$message({
  1462. message: '入库仓库名不能为空!',
  1463. type: 'warning'
  1464. })
  1465. return
  1466. }
  1467. if (!this.dataList1.contractNo) {
  1468. this.$message({
  1469. message: '合同编号不能为空!',
  1470. type: 'warning'
  1471. })
  1472. return
  1473. }
  1474. if (!this.dataList.contractNo) {
  1475. this.$message({
  1476. message: '合同编号不能为空!',
  1477. type: 'warning'
  1478. })
  1479. return
  1480. }
  1481. if (!this.dataList1.weight) {
  1482. this.$message({
  1483. message: '重量(吨)不能为空!',
  1484. type: 'warning'
  1485. })
  1486. return
  1487. }
  1488. if (
  1489. isNaN(this.dataList1.weight) ||
  1490. (String(this.dataList1.weight).indexOf('.') != -1 &&
  1491. String(this.dataList1.weight).length -
  1492. (String(this.dataList1.weight).indexOf('.') + 1) >
  1493. 2) ||
  1494. this.dataList1.weight < 0 ||
  1495. this.dataList1.weight > 200000
  1496. ) {
  1497. this.$message({
  1498. message: '重量输入有误!',
  1499. type: 'warning'
  1500. })
  1501. return
  1502. }
  1503. if (!this.dataList1.bulkDensity) {
  1504. this.$message({
  1505. message: '容重不能为空!',
  1506. type: 'warning'
  1507. })
  1508. return
  1509. }
  1510. if (
  1511. this.dataList1.bulkDensity < 500 ||
  1512. this.dataList1.bulkDensity > 1000
  1513. ) {
  1514. this.$message({
  1515. message: '容重输入错误',
  1516. type: 'warning'
  1517. })
  1518. return
  1519. }
  1520. if (
  1521. String(this.dataList1.bulkDensity).indexOf('.') != -1 &&
  1522. String(this.dataList1.bulkDensity).length -
  1523. (String(this.dataList1.bulkDensity).indexOf('.') + 1) >
  1524. 0
  1525. ) {
  1526. this.$message({
  1527. message: '容重需输入整数',
  1528. type: 'warning'
  1529. })
  1530. return
  1531. }
  1532. if (!this.dataList1.waterContent) {
  1533. this.$message({
  1534. message: '水分不能为空!',
  1535. type: 'warning'
  1536. })
  1537. return
  1538. }
  1539. if (
  1540. this.dataList1.waterContent < 0 ||
  1541. this.dataList1.waterContent > 40
  1542. ) {
  1543. this.$message({
  1544. message: '水分输入错误',
  1545. type: 'warning'
  1546. })
  1547. return
  1548. }
  1549. if (
  1550. String(this.dataList1.waterContent).indexOf('.') != -1 &&
  1551. String(this.dataList1.waterContent).length -
  1552. (String(this.dataList1.waterContent).indexOf('.') + 1) >
  1553. 1
  1554. ) {
  1555. this.$message({
  1556. message: '水分输入错误',
  1557. type: 'warning'
  1558. })
  1559. return
  1560. }
  1561. if (!this.dataList1.unitPrice) {
  1562. this.$message({
  1563. message: '单价不能为空!',
  1564. type: 'warning'
  1565. })
  1566. return
  1567. }
  1568. if (
  1569. (this.dataList1.unitPrice &&
  1570. String(this.dataList1.unitPrice).indexOf('.') != -1 &&
  1571. String(this.dataList1.unitPrice).length -
  1572. (String(this.dataList1.unitPrice).indexOf('.') + 1) >
  1573. 2) ||
  1574. this.dataList1.unitPrice > 100000 ||
  1575. this.dataList1.unitPrice < 1
  1576. ) {
  1577. this.$message({
  1578. message: '单价输入错误',
  1579. type: 'warning'
  1580. })
  1581. return
  1582. }
  1583. if (!this.dataList.predictDate) {
  1584. this.$message({
  1585. message: '预计出库日期不能为空!',
  1586. type: 'warning'
  1587. })
  1588. return
  1589. }
  1590. if (!this.dataList1.predictDate) {
  1591. this.$message({
  1592. message: '预计入库日期不能为空!',
  1593. type: 'warning'
  1594. })
  1595. return
  1596. }
  1597. if (!this.dataList.agent) {
  1598. this.$message({
  1599. message: '出库经办人不能为空!',
  1600. type: 'warning'
  1601. })
  1602. return
  1603. }
  1604. if (!this.dataList1.agent) {
  1605. this.$message({
  1606. message: '入库经办人不能为空!',
  1607. type: 'warning'
  1608. })
  1609. return
  1610. }
  1611. if (!this.dataList.businessDescribe) {
  1612. this.$message({
  1613. message: '业务描述不能为空!',
  1614. type: 'warning'
  1615. })
  1616. return
  1617. }
  1618. }
  1619. // this.dataList.goodsNameKey =
  1620. // this.dataList.positionId =
  1621. // this.dataList.baseId =
  1622. this.dataList.inOutFlag = 1
  1623. this.dataList1.inOutFlag = 2
  1624. if (this.dataList.taskTypeKey == 1) {
  1625. this.dataList.inOutTaskNo = this.inOutTaskNo
  1626. this.requestadd(this.dataList)
  1627. } else if (this.dataList1.taskTypeKey == 2) {
  1628. this.dataList1.inOutTaskNo = this.inOutTaskNo1
  1629. this.requestadd(this.dataList1)
  1630. } else if (
  1631. this.dataList.taskTypeKey == 3 ||
  1632. this.dataList.taskTypeKey == 4
  1633. ) {
  1634. this.dataList.inOutTaskNo = this.inOutTaskNo
  1635. this.dataList.relevanceId = this.GetRandomNum(100000, 999999)
  1636. if (this.dataList.taskTypeKey == 3) {
  1637. this.dataList.businessDescribe = this.dataList1.businessDescribe
  1638. } else {
  1639. this.dataList1.businessDescribe = this.dataList.businessDescribe
  1640. }
  1641. this.requestadd(this.dataList, 'repetition')
  1642. this.dataList1.inOutTaskNo = this.inOutTaskNo1
  1643. this.dataList1.relevanceId = this.dataList.relevanceId
  1644. this.dataList1.goodsName = this.dataList.goodsName
  1645. this.requestadd(this.dataList1, 'repetition')
  1646. }
  1647. },
  1648. tarechange(e) {
  1649. if (this.dataList.grossWeight && this.dataList.tare) {
  1650. this.dataList.netWeight = Number(
  1651. this.dataList.grossWeight - this.dataList.tare
  1652. )
  1653. }
  1654. },
  1655. grossWeightchange(e) {
  1656. if (this.dataList.grossWeight && this.dataList.tare) {
  1657. this.dataList.netWeight = Number(
  1658. this.dataList.grossWeight - this.dataList.tare
  1659. )
  1660. }
  1661. },
  1662. selectgoodsName(e) {
  1663. for (var i = 0; i < this.goodnameList.length; i++) {
  1664. if (this.goodnameList[i].constValue == e) {
  1665. this.dataList.goodsNameKey = this.goodnameList[i].constKey
  1666. }
  1667. }
  1668. },
  1669. selectgoodsName1(e) {
  1670. for (var i = 0; i < this.goodnameList.length; i++) {
  1671. if (this.goodnameList[i].constValue == e) {
  1672. this.dataList1.goodsNameKey = this.goodnameList[i].constKey
  1673. }
  1674. }
  1675. },
  1676. selectpackingMethod(e) {
  1677. for (var i = 0; i < this.gradeList.length; i++) {
  1678. if (this.gradeList[i].constValue == e) {
  1679. this.dataList.gradeKey = this.gradeList[i].constKey
  1680. if (this.dataList.taskTypeKey == 3) {
  1681. this.$set(this.dataList1, 'grade', e)
  1682. this.$set(this.dataList1, 'gradeKey', this.gradeList[i].constKey)
  1683. }
  1684. }
  1685. }
  1686. },
  1687. selectpackingMethod1(e) {
  1688. for (var i = 0; i < this.gradeList.length; i++) {
  1689. if (this.gradeList[i].constValue == e) {
  1690. this.dataList1.packingMethodKey = this.gradeList[i].constKey
  1691. if (this.dataList1.taskTypeKey == 4) {
  1692. this.$set(this.dataList, 'grade', e)
  1693. this.$set(this.dataList, 'gradeKey', this.gradeList[i].constKey)
  1694. }
  1695. }
  1696. }
  1697. },
  1698. selectstorageType(e) {
  1699. switch (e) {
  1700. case '采购出库':
  1701. this.flag = 0
  1702. break
  1703. case '销售出库':
  1704. this.flag = 1
  1705. break
  1706. }
  1707. for (var i = 0; i < this.storageType.length; i++) {
  1708. if (this.storageType[i].constValue == e) {
  1709. this.dataList.inOutTypeKey = this.storageType[i].constKey
  1710. }
  1711. }
  1712. },
  1713. selectstorageType1(e) {
  1714. switch (e) {
  1715. case '采购入库':
  1716. this.flag = 0
  1717. break
  1718. case '退库':
  1719. this.flag = 2
  1720. break
  1721. }
  1722. for (var i = 0; i < this.storageType1.length; i++) {
  1723. if (this.storageType1[i].constValue == e) {
  1724. this.dataList1.inOutTypeKey = this.storageType1[i].constKey
  1725. }
  1726. }
  1727. },
  1728. handleClose() {
  1729. this.accessoryTFs = false
  1730. },
  1731. handleSizeChange(val) {
  1732. console.log(`每页 ${val} 条`)
  1733. this.pageSize = val
  1734. this.getList()
  1735. },
  1736. businessDescriptionchange(e) {
  1737. console.log(e)
  1738. },
  1739. handleCurrentChange(val) {
  1740. this.currentPage = val
  1741. console.log(`当前页: ${val}`)
  1742. this.getList()
  1743. },
  1744. tasknumber() {
  1745. if (this.dataList.taskTypeKey == 1) {
  1746. this.inOutTaskNo = 'CK' + this.getdate() + this.MathRand()
  1747. } else if (this.dataList.taskTypeKey == 2) {
  1748. this.inOutTaskNo1 = 'RK' + this.getdate() + this.MathRand()
  1749. } else if (this.dataList.taskTypeKey == 3) {
  1750. var random = this.getdate() + this.MathRand()
  1751. this.inOutTaskNo = 'YKC' + random
  1752. this.inOutTaskNo1 = 'YKR' + random
  1753. } else if (this.dataList.taskTypeKey == 4) {
  1754. var random = this.getdate() + this.MathRand()
  1755. this.inOutTaskNo = 'TCC' + random
  1756. this.inOutTaskNo1 = 'TCR' + random
  1757. }
  1758. },
  1759. tasktypechange(e) {
  1760. if (!this.$route.query.relevanceId) {
  1761. this.tasknumber()
  1762. }
  1763. this.dataList1.taskTypeKey = e
  1764. if (this.dataList.taskTypeKey == 1) {
  1765. this.dataList.inOutType = '销售出库'
  1766. this.dataList.inOutTypeKey = '1'
  1767. this.flag = 1
  1768. }
  1769. if (this.dataList1.taskTypeKey == 2) {
  1770. this.dataList1.inOutType = '采购入库'
  1771. this.dataList1.inOutTypeKey = '1'
  1772. this.flag = 0
  1773. } else if (this.dataList1.taskTypeKey == 3) {
  1774. this.disabled = true
  1775. this.dataList1.inOutType = '移库入库'
  1776. this.dataList1.inOutTypeKey = '3'
  1777. this.dataList.inOutType = '移库出库'
  1778. this.dataList.inOutTypeKey = '3'
  1779. } else if (this.dataList1.taskTypeKey == 4) {
  1780. this.disabled = true
  1781. this.dataList1.inOutType = '退库'
  1782. this.dataList1.inOutTypeKey = '6'
  1783. this.dataList.inOutType = '销售出库'
  1784. this.flag = 2
  1785. this.dataList.inOutTypeKey = '1'
  1786. }
  1787. },
  1788. GetRandomNum(Min, Max) {
  1789. var Range = Max - Min
  1790. var Rand = Math.random()
  1791. return Min + Math.round(Rand * Range)
  1792. },
  1793. getList() {
  1794. this.tasknumber()
  1795. this.$set(this.dataList, 'inOutType', '销售出库')
  1796. this.$set(this.dataList, 'inOutTypeKey', '1')
  1797. this.$set(this.dataList, 'goodsName', '玉米')
  1798. this.$set(this.dataList, 'goodsNameKey', '1')
  1799. this.$set(this.dataList, 'grade', '一等品')
  1800. this.$set(this.dataList, 'gradeKey', '1')
  1801. this.$set(this.dataList1, 'goodsName', '玉米')
  1802. this.$set(this.dataList1, 'goodsNameKey', '1')
  1803. this.$set(this.dataList1, 'grade', '一等品')
  1804. this.$set(this.dataList1, 'gradeKey', '1')
  1805. // 货名
  1806. pullDown({ constId: 'CON2' })
  1807. .toPromise()
  1808. .then(response => {
  1809. this.goodnameList = response
  1810. })
  1811. // 品级
  1812. pullDown({ constId: 'CON3' })
  1813. .toPromise()
  1814. .then(response => {
  1815. this.gradeList = response
  1816. })
  1817. pullDown({ constId: 'CON6' })
  1818. .toPromise()
  1819. .then(response => {
  1820. this.storageType = response
  1821. })
  1822. pullDown({ constId: 'CON5' })
  1823. .toPromise()
  1824. .then(response => {
  1825. this.storageType1 = response
  1826. })
  1827. xialaNo({
  1828. compId: this.compId,
  1829. flag: this.flag
  1830. })
  1831. .toPromise()
  1832. .then(response => {
  1833. this.contractNoList = response
  1834. // this.contractNoList1 = response
  1835. })
  1836. // //临时仓库入库类型
  1837. // pullDown({ constId: 'WARE1' })
  1838. // .toPromise()
  1839. // .then((response) => {
  1840. // this.storageType = respons
  1841. // })
  1842. // //临时仓库出库类型
  1843. // pullDown({ constId: 'WARE2' })
  1844. // .toPromise()
  1845. // .then((response) => {
  1846. // this.deliveryType = response
  1847. // })
  1848. //仓库名
  1849. getwarehousename({
  1850. compId: this.compId,
  1851. warehouseType: 1
  1852. })
  1853. .toPromise()
  1854. .then(response => {
  1855. this.warehouseNameList = response
  1856. getwarehousename({
  1857. compId: this.compId,
  1858. warehouseType: 2
  1859. })
  1860. .toPromise()
  1861. .then(response => {
  1862. for (var i = 0; i < response.length; i++) {
  1863. this.warehouseNameList.push(response[i])
  1864. }
  1865. })
  1866. })
  1867. },
  1868. selecttaskType(e) {
  1869. for (var i = 0; i < this.taskTypeList.length; i++) {
  1870. if (this.taskTypeList[i].value == e) {
  1871. this.searchType = this.taskTypeList[i].type
  1872. }
  1873. }
  1874. },
  1875. fujian(row) {
  1876. if (
  1877. row.receiveAttachmentPath === null ||
  1878. row.receiveAttachmentPath === ''
  1879. ) {
  1880. EventBus.$emit(
  1881. 'warning',
  1882. this.$t('system.noticeCircular.NoInformation')
  1883. )
  1884. } else {
  1885. this.accessoryTFs = true
  1886. }
  1887. this.appendixIdss = row.receiveAttachmentPath
  1888. },
  1889. handleExamine(row) {
  1890. this.$router.push({
  1891. name: 'salesContractExamine',
  1892. query: { id: row.id }
  1893. })
  1894. },
  1895. // 关闭 dialog时 处理文件url 初始化upload组件
  1896. handleCloe() {
  1897. this.dialogViewSpareMoney = false
  1898. },
  1899. history(row) {
  1900. console.log(row)
  1901. billoperatehis({ id: row.id })
  1902. .toPromise()
  1903. .then(response => {
  1904. this.historyList = response
  1905. })
  1906. }
  1907. }
  1908. }
  1909. </script>
  1910. <style lang="scss" scoped>
  1911. /deep/.basicInformation {
  1912. .el-info-table {
  1913. border: none;
  1914. position: relative;
  1915. }
  1916. .el-form-item {
  1917. width: 33.3333%;
  1918. border: none;
  1919. margin: 0;
  1920. .el-form-item__label {
  1921. text-align: left;
  1922. font-size: 14px;
  1923. font-family: PingFangSC-Regular, PingFang SC;
  1924. font-weight: 400;
  1925. color: #8890b1;
  1926. }
  1927. .el-form-item__content {
  1928. padding-left: 0px;
  1929. padding-right: 10px;
  1930. // background: #fff;
  1931. white-space: nowrap;
  1932. height: 40px;
  1933. display: flex;
  1934. -webkit-box-align: center;
  1935. align-items: center;
  1936. text-align: left;
  1937. overflow: hidden;
  1938. }
  1939. }
  1940. }
  1941. /deep/.el-radio {
  1942. color: #606266;
  1943. font-weight: 500;
  1944. line-height: 1;
  1945. cursor: pointer;
  1946. white-space: nowrap;
  1947. outline: 0;
  1948. margin-right: 30px;
  1949. margin-top: 15px;
  1950. }
  1951. /deep/.el-radio__inner {
  1952. border: 1px solid #dcdfe6;
  1953. border-radius: 100%;
  1954. width: 14px;
  1955. height: 14px;
  1956. background-color: #fff;
  1957. cursor: pointer;
  1958. -webkit-box-sizing: border-box;
  1959. box-sizing: border-box;
  1960. margin-left: 100px;
  1961. }
  1962. /deep/.el-radio__input {
  1963. white-space: nowrap;
  1964. cursor: pointer;
  1965. outline: 0;
  1966. line-height: 1;
  1967. vertical-align: middle;
  1968. margin-top: -1px;
  1969. }
  1970. .title {
  1971. position: relative;
  1972. padding-left: 10px;
  1973. }
  1974. .title::before {
  1975. content: '';
  1976. display: inline-block;
  1977. width: 5px;
  1978. height: 30px;
  1979. background: #5473e8;
  1980. position: absolute;
  1981. left: 0;
  1982. }
  1983. .el-form {
  1984. padding: 0 15%;
  1985. display: flex;
  1986. flex-wrap: wrap;
  1987. margin-left: -50px;
  1988. margin-top: 15px;
  1989. width: 110%;
  1990. }
  1991. .el-button--primary {
  1992. background-color: #5878e8;
  1993. border-color: #5878e8;
  1994. }
  1995. .el-col {
  1996. background: #f6f7fc;
  1997. }
  1998. .bg-right {
  1999. text-align: right;
  2000. padding: 16px 20px;
  2001. }
  2002. .center {
  2003. position: relative;
  2004. top: 50px;
  2005. width: 40%;
  2006. height: 2000px;
  2007. margin: 0 auto;
  2008. margin-right: 180px;
  2009. }
  2010. /deep/.el-form-item__label {
  2011. width: 160px;
  2012. }
  2013. .inspector {
  2014. width: 50%;
  2015. }
  2016. /deep/.el-form-item--small .el-form-item__label,
  2017. .el-form-item--small .el-form-item__content {
  2018. text-align: left;
  2019. }
  2020. /deep/.el-input--small {
  2021. font-size: 13px;
  2022. position: relative;
  2023. display: inline-block;
  2024. }
  2025. .center1 .small-title {
  2026. margin-left: 323px;
  2027. }
  2028. .center1 {
  2029. width: 90%;
  2030. margin: 0 auto;
  2031. margin-left: 10px;
  2032. margin-top: 25px;
  2033. }
  2034. /deep/.el-input--small .el-input__inner {
  2035. height: 32px;
  2036. line-height: 32px;
  2037. }
  2038. /deep/.el-select {
  2039. display: inline-block;
  2040. position: relative;
  2041. width: 100%;
  2042. }
  2043. .annu {
  2044. height: 81px;
  2045. background: #ffffff;
  2046. border-radius: 4px;
  2047. }
  2048. .basicInformation .el-form-item {
  2049. width: 50.3333%;
  2050. border: none;
  2051. margin: 0;
  2052. }
  2053. .huom {
  2054. width: 100px;
  2055. }
  2056. .el-form {
  2057. font-size: 14px;
  2058. font-family: PingFangSC-Regular, PingFang SC;
  2059. font-weight: 400;
  2060. color: #8890b1;
  2061. line-height: 16px;
  2062. }
  2063. .a {
  2064. margin-left: -32px;
  2065. }
  2066. .el-radio-group {
  2067. margin-left: 251px;
  2068. }
  2069. .ding {
  2070. height: 23px;
  2071. background: #e8ecf6;
  2072. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  2073. }
  2074. .winseaview-view {
  2075. padding: 0 0 20px;
  2076. }
  2077. .container {
  2078. overflow: scroll;
  2079. height: 93vh;
  2080. }
  2081. .el-radio-group {
  2082. font-size: 0;
  2083. margin-top: 20px;
  2084. }
  2085. /deep/.el-form {
  2086. padding: 0 15%;
  2087. display: -webkit-box;
  2088. display: -ms-flexbox;
  2089. display: flex;
  2090. -ms-flex-wrap: wrap;
  2091. flex-wrap: wrap;
  2092. margin-left: 130px;
  2093. margin-top: 15px;
  2094. width: 110%;
  2095. }
  2096. </style>