tranManagementWarehouseInOutTaskAdd.vue 62 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100
  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.$router.push({ path: 'tranManagementWarehouseInOuttask' })
  1010. }, 2000)
  1011. })
  1012. },
  1013. //提交按钮
  1014. submit() {
  1015. if (this.dataList.taskTypeKey == 1) {
  1016. if (!this.dataList.warehouseName) {
  1017. this.$message({
  1018. message: '仓库名不能为空!',
  1019. type: 'warning'
  1020. })
  1021. return
  1022. }
  1023. if (!this.dataList.contractNo) {
  1024. this.$message({
  1025. message: '合同编号不能为空!',
  1026. type: 'warning'
  1027. })
  1028. return
  1029. }
  1030. if (!this.dataList.weight) {
  1031. this.$message({
  1032. message: '重量(吨)不能为空!',
  1033. type: 'warning'
  1034. })
  1035. return
  1036. }
  1037. if (
  1038. isNaN(this.dataList.weight) ||
  1039. (String(this.dataList.weight).indexOf('.') != -1 &&
  1040. String(this.dataList.weight).length -
  1041. (String(this.dataList.weight).indexOf('.') + 1) >
  1042. 2) ||
  1043. this.dataList.weight < 0 ||
  1044. this.dataList.weight > 200000
  1045. ) {
  1046. this.$message({
  1047. message: '重量输入有误!',
  1048. type: 'warning'
  1049. })
  1050. return
  1051. }
  1052. if (!this.dataList.bulkDensity) {
  1053. this.$message({
  1054. message: '容重不能为空!',
  1055. type: 'warning'
  1056. })
  1057. return
  1058. }
  1059. if (
  1060. this.dataList.bulkDensity < 500 ||
  1061. this.dataList.bulkDensity > 1000
  1062. ) {
  1063. this.$message({
  1064. message: '容重输入错误',
  1065. type: 'warning'
  1066. })
  1067. return
  1068. }
  1069. if (
  1070. String(this.dataList.bulkDensity).indexOf('.') != -1 &&
  1071. String(this.dataList.bulkDensity).length -
  1072. (String(this.dataList.bulkDensity).indexOf('.') + 1) >
  1073. 0
  1074. ) {
  1075. this.$message({
  1076. message: '容重需输入整数',
  1077. type: 'warning'
  1078. })
  1079. return
  1080. }
  1081. if (!this.dataList.waterContent) {
  1082. this.$message({
  1083. message: '水分不能为空!',
  1084. type: 'warning'
  1085. })
  1086. return
  1087. }
  1088. if (this.dataList.waterContent < 0 || this.dataList.waterContent > 40) {
  1089. this.$message({
  1090. message: '水分输入错误',
  1091. type: 'warning'
  1092. })
  1093. return
  1094. }
  1095. if (
  1096. String(this.dataList.waterContent).indexOf('.') != -1 &&
  1097. String(this.dataList.waterContent).length -
  1098. (String(this.dataList.waterContent).indexOf('.') + 1) >
  1099. 1
  1100. ) {
  1101. this.$message({
  1102. message: '水分输入错误',
  1103. type: 'warning'
  1104. })
  1105. return
  1106. }
  1107. if (!this.dataList.unitPrice) {
  1108. this.$message({
  1109. message: '单价不能为空!',
  1110. type: 'warning'
  1111. })
  1112. return
  1113. }
  1114. if (
  1115. (this.dataList.unitPrice &&
  1116. String(this.dataList.unitPrice).indexOf('.') != -1 &&
  1117. String(this.dataList.unitPrice).length -
  1118. (String(this.dataList.unitPrice).indexOf('.') + 1) >
  1119. 2) ||
  1120. this.dataList.unitPrice > 100000 ||
  1121. this.dataList.unitPrice < 1
  1122. ) {
  1123. this.$message({
  1124. message: '单价输入错误',
  1125. type: 'warning'
  1126. })
  1127. return
  1128. }
  1129. if (!this.dataList.predictDate) {
  1130. this.$message({
  1131. message: '预计出库日期不能为空!',
  1132. type: 'warning'
  1133. })
  1134. return
  1135. }
  1136. if (!this.dataList.agent) {
  1137. this.$message({
  1138. message: '出库经办人不能为空!',
  1139. type: 'warning'
  1140. })
  1141. return
  1142. }
  1143. if (!this.dataList.businessDescribe) {
  1144. this.$message({
  1145. message: '业务描述不能为空!',
  1146. type: 'warning'
  1147. })
  1148. return
  1149. }
  1150. }
  1151. if (this.dataList.taskTypeKey == 2) {
  1152. if (!this.dataList1.warehouseName) {
  1153. this.$message({
  1154. message: '仓库名不能为空!',
  1155. type: 'warning'
  1156. })
  1157. return
  1158. }
  1159. if (!this.dataList1.contractNo) {
  1160. this.$message({
  1161. message: '合同编号不能为空!',
  1162. type: 'warning'
  1163. })
  1164. return
  1165. }
  1166. if (!this.dataList1.weight) {
  1167. this.$message({
  1168. message: '重量(吨)不能为空!',
  1169. type: 'warning'
  1170. })
  1171. return
  1172. }
  1173. if (
  1174. isNaN(this.dataList1.weight) ||
  1175. (String(this.dataList1.weight).indexOf('.') != -1 &&
  1176. String(this.dataList1.weight).length -
  1177. (String(this.dataList1.weight).indexOf('.') + 1) >
  1178. 2) ||
  1179. this.dataList1.weight < 0 ||
  1180. this.dataList1.weight > 200000
  1181. ) {
  1182. this.$message({
  1183. message: '重量输入有误!',
  1184. type: 'warning'
  1185. })
  1186. return
  1187. }
  1188. if (!this.dataList1.bulkDensity) {
  1189. this.$message({
  1190. message: '容重不能为空!',
  1191. type: 'warning'
  1192. })
  1193. return
  1194. }
  1195. if (
  1196. this.dataList1.bulkDensity < 500 ||
  1197. this.dataList1.bulkDensity > 1000
  1198. ) {
  1199. this.$message({
  1200. message: '容重输入错误',
  1201. type: 'warning'
  1202. })
  1203. return
  1204. }
  1205. if (
  1206. String(this.dataList1.bulkDensity).indexOf('.') != -1 &&
  1207. String(this.dataList1.bulkDensity).length -
  1208. (String(this.dataList1.bulkDensity).indexOf('.') + 1) >
  1209. 0
  1210. ) {
  1211. this.$message({
  1212. message: '容重需输入整数',
  1213. type: 'warning'
  1214. })
  1215. return
  1216. }
  1217. if (!this.dataList1.waterContent) {
  1218. this.$message({
  1219. message: '水分不能为空!',
  1220. type: 'warning'
  1221. })
  1222. return
  1223. }
  1224. if (
  1225. this.dataList1.waterContent < 0 ||
  1226. this.dataList1.waterContent > 40
  1227. ) {
  1228. this.$message({
  1229. message: '水分输入错误',
  1230. type: 'warning'
  1231. })
  1232. return
  1233. }
  1234. if (
  1235. String(this.dataList1.waterContent).indexOf('.') != -1 &&
  1236. String(this.dataList1.waterContent).length -
  1237. (String(this.dataList1.waterContent).indexOf('.') + 1) >
  1238. 1
  1239. ) {
  1240. this.$message({
  1241. message: '水分输入错误',
  1242. type: 'warning'
  1243. })
  1244. return
  1245. }
  1246. if (!this.dataList1.unitPrice) {
  1247. this.$message({
  1248. message: '单价不能为空!',
  1249. type: 'warning'
  1250. })
  1251. return
  1252. }
  1253. if (
  1254. (this.dataList1.unitPrice &&
  1255. String(this.dataList1.unitPrice).indexOf('.') != -1 &&
  1256. String(this.dataList1.unitPrice).length -
  1257. (String(this.dataList1.unitPrice).indexOf('.') + 1) >
  1258. 2) ||
  1259. this.dataList1.unitPrice > 100000 ||
  1260. this.dataList1.unitPrice < 1
  1261. ) {
  1262. this.$message({
  1263. message: '单价输入错误',
  1264. type: 'warning'
  1265. })
  1266. return
  1267. }
  1268. if (!this.dataList1.predictDate) {
  1269. this.$message({
  1270. message: '预计入库日期不能为空!',
  1271. type: 'warning'
  1272. })
  1273. return
  1274. }
  1275. if (!this.dataList1.agent) {
  1276. this.$message({
  1277. message: '入库经办人不能为空!',
  1278. type: 'warning'
  1279. })
  1280. return
  1281. }
  1282. if (!this.dataList1.businessDescribe) {
  1283. this.$message({
  1284. message: '业务描述不能为空!',
  1285. type: 'warning'
  1286. })
  1287. return
  1288. }
  1289. }
  1290. if (this.dataList.taskTypeKey == 3) {
  1291. if (!this.dataList.warehouseName) {
  1292. this.$message({
  1293. message: '出库仓库名不能为空!',
  1294. type: 'warning'
  1295. })
  1296. return
  1297. }
  1298. if (!this.dataList1.warehouseName) {
  1299. this.$message({
  1300. message: '入库仓库名不能为空!',
  1301. type: 'warning'
  1302. })
  1303. return
  1304. }
  1305. if (!this.dataList1.moveTaskNo) {
  1306. this.$message({
  1307. message: '移库任务编号不能为空!',
  1308. type: 'warning'
  1309. })
  1310. return
  1311. }
  1312. if (!this.dataList1.weight) {
  1313. this.$message({
  1314. message: '重量(吨)不能为空!',
  1315. type: 'warning'
  1316. })
  1317. return
  1318. }
  1319. if (
  1320. isNaN(this.dataList1.weight) ||
  1321. (String(this.dataList1.weight).indexOf('.') != -1 &&
  1322. String(this.dataList1.weight).length -
  1323. (String(this.dataList1.weight).indexOf('.') + 1) >
  1324. 2) ||
  1325. this.dataList1.weight < 0 ||
  1326. this.dataList1.weight > 200000
  1327. ) {
  1328. this.$message({
  1329. message: '重量输入有误!',
  1330. type: 'warning'
  1331. })
  1332. return
  1333. }
  1334. if (!this.dataList1.bulkDensity) {
  1335. this.$message({
  1336. message: '容重不能为空!',
  1337. type: 'warning'
  1338. })
  1339. return
  1340. }
  1341. if (
  1342. this.dataList1.bulkDensity < 500 ||
  1343. this.dataList1.bulkDensity > 1000
  1344. ) {
  1345. this.$message({
  1346. message: '容重输入错误',
  1347. type: 'warning'
  1348. })
  1349. return
  1350. }
  1351. if (
  1352. String(this.dataList1.bulkDensity).indexOf('.') != -1 &&
  1353. String(this.dataList1.bulkDensity).length -
  1354. (String(this.dataList1.bulkDensity).indexOf('.') + 1) >
  1355. 0
  1356. ) {
  1357. this.$message({
  1358. message: '容重需输入整数',
  1359. type: 'warning'
  1360. })
  1361. return
  1362. }
  1363. if (!this.dataList1.waterContent) {
  1364. this.$message({
  1365. message: '水分不能为空!',
  1366. type: 'warning'
  1367. })
  1368. return
  1369. }
  1370. if (
  1371. this.dataList1.waterContent < 0 ||
  1372. this.dataList1.waterContent > 40
  1373. ) {
  1374. this.$message({
  1375. message: '水分输入错误',
  1376. type: 'warning'
  1377. })
  1378. return
  1379. }
  1380. if (
  1381. String(this.dataList1.waterContent).indexOf('.') != -1 &&
  1382. String(this.dataList1.waterContent).length -
  1383. (String(this.dataList1.waterContent).indexOf('.') + 1) >
  1384. 1
  1385. ) {
  1386. this.$message({
  1387. message: '水分输入错误',
  1388. type: 'warning'
  1389. })
  1390. return
  1391. }
  1392. if (!this.dataList1.unitPrice) {
  1393. this.$message({
  1394. message: '单价不能为空!',
  1395. type: 'warning'
  1396. })
  1397. return
  1398. }
  1399. if (
  1400. (this.dataList1.unitPrice &&
  1401. String(this.dataList1.unitPrice).indexOf('.') != -1 &&
  1402. String(this.dataList1.unitPrice).length -
  1403. (String(this.dataList1.unitPrice).indexOf('.') + 1) >
  1404. 2) ||
  1405. this.dataList1.unitPrice > 100000 ||
  1406. this.dataList1.unitPrice < 1
  1407. ) {
  1408. this.$message({
  1409. message: '单价输入错误',
  1410. type: 'warning'
  1411. })
  1412. return
  1413. }
  1414. if (!this.dataList.predictDate) {
  1415. this.$message({
  1416. message: '预计出库日期不能为空!',
  1417. type: 'warning'
  1418. })
  1419. return
  1420. }
  1421. if (!this.dataList1.predictDate) {
  1422. this.$message({
  1423. message: '预计入库日期不能为空!',
  1424. type: 'warning'
  1425. })
  1426. return
  1427. }
  1428. if (!this.dataList.agent) {
  1429. this.$message({
  1430. message: '出库经办人不能为空!',
  1431. type: 'warning'
  1432. })
  1433. return
  1434. }
  1435. if (!this.dataList1.agent) {
  1436. this.$message({
  1437. message: '入库经办人不能为空!',
  1438. type: 'warning'
  1439. })
  1440. return
  1441. }
  1442. if (!this.dataList1.businessDescribe) {
  1443. this.$message({
  1444. message: '业务描述不能为空!',
  1445. type: 'warning'
  1446. })
  1447. return
  1448. }
  1449. }
  1450. if (this.dataList1.taskTypeKey == 4) {
  1451. if (!this.dataList.warehouseName) {
  1452. this.$message({
  1453. message: '出库仓库名不能为空!',
  1454. type: 'warning'
  1455. })
  1456. return
  1457. }
  1458. if (!this.dataList1.warehouseName) {
  1459. this.$message({
  1460. message: '入库仓库名不能为空!',
  1461. type: 'warning'
  1462. })
  1463. return
  1464. }
  1465. if (!this.dataList1.contractNo) {
  1466. this.$message({
  1467. message: '合同编号不能为空!',
  1468. type: 'warning'
  1469. })
  1470. return
  1471. }
  1472. if (!this.dataList.contractNo) {
  1473. this.$message({
  1474. message: '合同编号不能为空!',
  1475. type: 'warning'
  1476. })
  1477. return
  1478. }
  1479. if (!this.dataList1.weight) {
  1480. this.$message({
  1481. message: '重量(吨)不能为空!',
  1482. type: 'warning'
  1483. })
  1484. return
  1485. }
  1486. if (
  1487. isNaN(this.dataList1.weight) ||
  1488. (String(this.dataList1.weight).indexOf('.') != -1 &&
  1489. String(this.dataList1.weight).length -
  1490. (String(this.dataList1.weight).indexOf('.') + 1) >
  1491. 2) ||
  1492. this.dataList1.weight < 0 ||
  1493. this.dataList1.weight > 200000
  1494. ) {
  1495. this.$message({
  1496. message: '重量输入有误!',
  1497. type: 'warning'
  1498. })
  1499. return
  1500. }
  1501. if (!this.dataList1.bulkDensity) {
  1502. this.$message({
  1503. message: '容重不能为空!',
  1504. type: 'warning'
  1505. })
  1506. return
  1507. }
  1508. if (
  1509. this.dataList1.bulkDensity < 500 ||
  1510. this.dataList1.bulkDensity > 1000
  1511. ) {
  1512. this.$message({
  1513. message: '容重输入错误',
  1514. type: 'warning'
  1515. })
  1516. return
  1517. }
  1518. if (
  1519. String(this.dataList1.bulkDensity).indexOf('.') != -1 &&
  1520. String(this.dataList1.bulkDensity).length -
  1521. (String(this.dataList1.bulkDensity).indexOf('.') + 1) >
  1522. 0
  1523. ) {
  1524. this.$message({
  1525. message: '容重需输入整数',
  1526. type: 'warning'
  1527. })
  1528. return
  1529. }
  1530. if (!this.dataList1.waterContent) {
  1531. this.$message({
  1532. message: '水分不能为空!',
  1533. type: 'warning'
  1534. })
  1535. return
  1536. }
  1537. if (
  1538. this.dataList1.waterContent < 0 ||
  1539. this.dataList1.waterContent > 40
  1540. ) {
  1541. this.$message({
  1542. message: '水分输入错误',
  1543. type: 'warning'
  1544. })
  1545. return
  1546. }
  1547. if (
  1548. String(this.dataList1.waterContent).indexOf('.') != -1 &&
  1549. String(this.dataList1.waterContent).length -
  1550. (String(this.dataList1.waterContent).indexOf('.') + 1) >
  1551. 1
  1552. ) {
  1553. this.$message({
  1554. message: '水分输入错误',
  1555. type: 'warning'
  1556. })
  1557. return
  1558. }
  1559. if (!this.dataList1.unitPrice) {
  1560. this.$message({
  1561. message: '单价不能为空!',
  1562. type: 'warning'
  1563. })
  1564. return
  1565. }
  1566. if (
  1567. (this.dataList1.unitPrice &&
  1568. String(this.dataList1.unitPrice).indexOf('.') != -1 &&
  1569. String(this.dataList1.unitPrice).length -
  1570. (String(this.dataList1.unitPrice).indexOf('.') + 1) >
  1571. 2) ||
  1572. this.dataList1.unitPrice > 100000 ||
  1573. this.dataList1.unitPrice < 1
  1574. ) {
  1575. this.$message({
  1576. message: '单价输入错误',
  1577. type: 'warning'
  1578. })
  1579. return
  1580. }
  1581. if (!this.dataList.predictDate) {
  1582. this.$message({
  1583. message: '预计出库日期不能为空!',
  1584. type: 'warning'
  1585. })
  1586. return
  1587. }
  1588. if (!this.dataList1.predictDate) {
  1589. this.$message({
  1590. message: '预计入库日期不能为空!',
  1591. type: 'warning'
  1592. })
  1593. return
  1594. }
  1595. if (!this.dataList.agent) {
  1596. this.$message({
  1597. message: '出库经办人不能为空!',
  1598. type: 'warning'
  1599. })
  1600. return
  1601. }
  1602. if (!this.dataList1.agent) {
  1603. this.$message({
  1604. message: '入库经办人不能为空!',
  1605. type: 'warning'
  1606. })
  1607. return
  1608. }
  1609. if (!this.dataList.businessDescribe) {
  1610. this.$message({
  1611. message: '业务描述不能为空!',
  1612. type: 'warning'
  1613. })
  1614. return
  1615. }
  1616. }
  1617. // this.dataList.goodsNameKey =
  1618. // this.dataList.positionId =
  1619. // this.dataList.baseId =
  1620. this.dataList.inOutFlag = 1
  1621. this.dataList1.inOutFlag = 2
  1622. if (this.dataList.taskTypeKey == 1) {
  1623. this.dataList.inOutTaskNo = this.inOutTaskNo
  1624. this.requestadd(this.dataList)
  1625. } else if (this.dataList1.taskTypeKey == 2) {
  1626. this.dataList1.inOutTaskNo = this.inOutTaskNo1
  1627. this.requestadd(this.dataList1)
  1628. } else if (
  1629. this.dataList.taskTypeKey == 3 ||
  1630. this.dataList.taskTypeKey == 4
  1631. ) {
  1632. this.dataList.inOutTaskNo = this.inOutTaskNo
  1633. this.dataList.relevanceId = this.GetRandomNum(100000, 999999)
  1634. if (this.dataList.taskTypeKey == 3) {
  1635. this.dataList.businessDescribe = this.dataList1.businessDescribe
  1636. } else {
  1637. this.dataList1.businessDescribe = this.dataList.businessDescribe
  1638. }
  1639. this.requestadd(this.dataList, 'repetition')
  1640. this.dataList1.inOutTaskNo = this.inOutTaskNo1
  1641. this.dataList1.relevanceId = this.dataList.relevanceId
  1642. this.dataList1.goodsName = this.dataList.goodsName
  1643. this.requestadd(this.dataList1, 'repetition')
  1644. }
  1645. },
  1646. tarechange(e) {
  1647. if (this.dataList.grossWeight && this.dataList.tare) {
  1648. this.dataList.netWeight = Number(
  1649. this.dataList.grossWeight - this.dataList.tare
  1650. )
  1651. }
  1652. },
  1653. grossWeightchange(e) {
  1654. if (this.dataList.grossWeight && this.dataList.tare) {
  1655. this.dataList.netWeight = Number(
  1656. this.dataList.grossWeight - this.dataList.tare
  1657. )
  1658. }
  1659. },
  1660. selectgoodsName(e) {
  1661. for (var i = 0; i < this.goodnameList.length; i++) {
  1662. if (this.goodnameList[i].constValue == e) {
  1663. this.dataList.goodsNameKey = this.goodnameList[i].constKey
  1664. }
  1665. }
  1666. },
  1667. selectgoodsName1(e) {
  1668. for (var i = 0; i < this.goodnameList.length; i++) {
  1669. if (this.goodnameList[i].constValue == e) {
  1670. this.dataList1.goodsNameKey = this.goodnameList[i].constKey
  1671. }
  1672. }
  1673. },
  1674. selectpackingMethod(e) {
  1675. for (var i = 0; i < this.gradeList.length; i++) {
  1676. if (this.gradeList[i].constValue == e) {
  1677. this.dataList.gradeKey = this.gradeList[i].constKey
  1678. if (this.dataList.taskTypeKey == 3) {
  1679. this.$set(this.dataList1, 'grade', e)
  1680. this.$set(this.dataList1, 'gradeKey', this.gradeList[i].constKey)
  1681. }
  1682. }
  1683. }
  1684. },
  1685. selectpackingMethod1(e) {
  1686. for (var i = 0; i < this.gradeList.length; i++) {
  1687. if (this.gradeList[i].constValue == e) {
  1688. this.dataList1.packingMethodKey = this.gradeList[i].constKey
  1689. if (this.dataList1.taskTypeKey == 4) {
  1690. this.$set(this.dataList, 'grade', e)
  1691. this.$set(this.dataList, 'gradeKey', this.gradeList[i].constKey)
  1692. }
  1693. }
  1694. }
  1695. },
  1696. selectstorageType(e) {
  1697. switch (e) {
  1698. case '采购出库':
  1699. this.flag = 0
  1700. break
  1701. case '销售出库':
  1702. this.flag = 1
  1703. break
  1704. }
  1705. for (var i = 0; i < this.storageType.length; i++) {
  1706. if (this.storageType[i].constValue == e) {
  1707. this.dataList.inOutTypeKey = this.storageType[i].constKey
  1708. }
  1709. }
  1710. },
  1711. selectstorageType1(e) {
  1712. switch (e) {
  1713. case '采购入库':
  1714. this.flag = 0
  1715. break
  1716. case '退库':
  1717. this.flag = 2
  1718. break
  1719. }
  1720. for (var i = 0; i < this.storageType1.length; i++) {
  1721. if (this.storageType1[i].constValue == e) {
  1722. this.dataList1.inOutTypeKey = this.storageType1[i].constKey
  1723. }
  1724. }
  1725. },
  1726. handleClose() {
  1727. this.accessoryTFs = false
  1728. },
  1729. handleSizeChange(val) {
  1730. console.log(`每页 ${val} 条`)
  1731. this.pageSize = val
  1732. this.getList()
  1733. },
  1734. businessDescriptionchange(e) {
  1735. console.log(e)
  1736. },
  1737. handleCurrentChange(val) {
  1738. this.currentPage = val
  1739. console.log(`当前页: ${val}`)
  1740. this.getList()
  1741. },
  1742. tasknumber() {
  1743. if (this.dataList.taskTypeKey == 1) {
  1744. this.inOutTaskNo = 'CK' + this.getdate() + this.MathRand()
  1745. } else if (this.dataList.taskTypeKey == 2) {
  1746. this.inOutTaskNo1 = 'RK' + this.getdate() + this.MathRand()
  1747. } else if (this.dataList.taskTypeKey == 3) {
  1748. var random = this.getdate() + this.MathRand()
  1749. this.inOutTaskNo = 'YKC' + random
  1750. this.inOutTaskNo1 = 'YKR' + random
  1751. } else if (this.dataList.taskTypeKey == 4) {
  1752. var random = this.getdate() + this.MathRand()
  1753. this.inOutTaskNo = 'TCC' + random
  1754. this.inOutTaskNo1 = 'TCR' + random
  1755. }
  1756. },
  1757. tasktypechange(e) {
  1758. if (!this.$route.query.relevanceId) {
  1759. this.tasknumber()
  1760. }
  1761. this.dataList1.taskTypeKey = e
  1762. if (this.dataList.taskTypeKey == 1) {
  1763. this.dataList.inOutType = '销售出库'
  1764. this.dataList.inOutTypeKey = '1'
  1765. this.flag = 1
  1766. }
  1767. if (this.dataList1.taskTypeKey == 2) {
  1768. this.dataList1.inOutType = '采购入库'
  1769. this.dataList1.inOutTypeKey = '1'
  1770. this.flag = 0
  1771. } else if (this.dataList1.taskTypeKey == 3) {
  1772. this.disabled = true
  1773. this.dataList1.inOutType = '移库入库'
  1774. this.dataList1.inOutTypeKey = '3'
  1775. this.dataList.inOutType = '移库出库'
  1776. this.dataList.inOutTypeKey = '3'
  1777. } else if (this.dataList1.taskTypeKey == 4) {
  1778. this.disabled = true
  1779. this.dataList1.inOutType = '退库'
  1780. this.dataList1.inOutTypeKey = '6'
  1781. this.dataList.inOutType = '销售出库'
  1782. this.flag = 2
  1783. this.dataList.inOutTypeKey = '1'
  1784. }
  1785. },
  1786. GetRandomNum(Min, Max) {
  1787. var Range = Max - Min
  1788. var Rand = Math.random()
  1789. return Min + Math.round(Rand * Range)
  1790. },
  1791. getList() {
  1792. this.tasknumber()
  1793. this.$set(this.dataList, 'inOutType', '销售出库')
  1794. this.$set(this.dataList, 'inOutTypeKey', '1')
  1795. this.$set(this.dataList, 'goodsName', '玉米')
  1796. this.$set(this.dataList, 'goodsNameKey', '1')
  1797. this.$set(this.dataList, 'grade', '一等品')
  1798. this.$set(this.dataList, 'gradeKey', '1')
  1799. this.$set(this.dataList1, 'goodsName', '玉米')
  1800. this.$set(this.dataList1, 'goodsNameKey', '1')
  1801. this.$set(this.dataList1, 'grade', '一等品')
  1802. this.$set(this.dataList1, 'gradeKey', '1')
  1803. // 货名
  1804. pullDown({ constId: 'CON2' })
  1805. .toPromise()
  1806. .then(response => {
  1807. this.goodnameList = response
  1808. })
  1809. // 品级
  1810. pullDown({ constId: 'CON3' })
  1811. .toPromise()
  1812. .then(response => {
  1813. this.gradeList = response
  1814. })
  1815. pullDown({ constId: 'CON6' })
  1816. .toPromise()
  1817. .then(response => {
  1818. this.storageType = response
  1819. })
  1820. pullDown({ constId: 'CON5' })
  1821. .toPromise()
  1822. .then(response => {
  1823. this.storageType1 = response
  1824. })
  1825. xialaNo({
  1826. compId: this.compId,
  1827. flag: this.flag
  1828. })
  1829. .toPromise()
  1830. .then(response => {
  1831. this.contractNoList = response
  1832. // this.contractNoList1 = response
  1833. })
  1834. // //临时仓库入库类型
  1835. // pullDown({ constId: 'WARE1' })
  1836. // .toPromise()
  1837. // .then((response) => {
  1838. // this.storageType = respons
  1839. // })
  1840. // //临时仓库出库类型
  1841. // pullDown({ constId: 'WARE2' })
  1842. // .toPromise()
  1843. // .then((response) => {
  1844. // this.deliveryType = response
  1845. // })
  1846. //仓库名
  1847. getwarehousename({
  1848. compId: this.compId,
  1849. warehouseType: 1
  1850. })
  1851. .toPromise()
  1852. .then(response => {
  1853. this.warehouseNameList = response
  1854. getwarehousename({
  1855. compId: this.compId,
  1856. warehouseType: 2
  1857. })
  1858. .toPromise()
  1859. .then(response => {
  1860. for (var i = 0; i < response.length; i++) {
  1861. this.warehouseNameList.push(response[i])
  1862. }
  1863. })
  1864. })
  1865. },
  1866. selecttaskType(e) {
  1867. for (var i = 0; i < this.taskTypeList.length; i++) {
  1868. if (this.taskTypeList[i].value == e) {
  1869. this.searchType = this.taskTypeList[i].type
  1870. }
  1871. }
  1872. },
  1873. fujian(row) {
  1874. if (
  1875. row.receiveAttachmentPath === null ||
  1876. row.receiveAttachmentPath === ''
  1877. ) {
  1878. EventBus.$emit(
  1879. 'warning',
  1880. this.$t('system.noticeCircular.NoInformation')
  1881. )
  1882. } else {
  1883. this.accessoryTFs = true
  1884. }
  1885. this.appendixIdss = row.receiveAttachmentPath
  1886. },
  1887. handleExamine(row) {
  1888. this.$router.push({
  1889. name: 'salesContractExamine',
  1890. query: { id: row.id }
  1891. })
  1892. },
  1893. // 关闭 dialog时 处理文件url 初始化upload组件
  1894. handleCloe() {
  1895. this.dialogViewSpareMoney = false
  1896. },
  1897. history(row) {
  1898. console.log(row)
  1899. billoperatehis({ id: row.id })
  1900. .toPromise()
  1901. .then(response => {
  1902. this.historyList = response
  1903. })
  1904. }
  1905. }
  1906. }
  1907. </script>
  1908. <style lang="scss" scoped>
  1909. /deep/.basicInformation {
  1910. .el-info-table {
  1911. border: none;
  1912. position: relative;
  1913. }
  1914. .el-form-item {
  1915. width: 33.3333%;
  1916. border: none;
  1917. margin: 0;
  1918. .el-form-item__label {
  1919. text-align: left;
  1920. font-size: 14px;
  1921. font-family: PingFangSC-Regular, PingFang SC;
  1922. font-weight: 400;
  1923. color: #8890b1;
  1924. }
  1925. .el-form-item__content {
  1926. padding-left: 0px;
  1927. padding-right: 10px;
  1928. // background: #fff;
  1929. white-space: nowrap;
  1930. height: 40px;
  1931. display: flex;
  1932. -webkit-box-align: center;
  1933. align-items: center;
  1934. text-align: left;
  1935. overflow: hidden;
  1936. }
  1937. }
  1938. }
  1939. /deep/.el-radio {
  1940. color: #606266;
  1941. font-weight: 500;
  1942. line-height: 1;
  1943. cursor: pointer;
  1944. white-space: nowrap;
  1945. outline: 0;
  1946. margin-right: 30px;
  1947. margin-top: 15px;
  1948. }
  1949. /deep/.el-radio__inner {
  1950. border: 1px solid #dcdfe6;
  1951. border-radius: 100%;
  1952. width: 14px;
  1953. height: 14px;
  1954. background-color: #fff;
  1955. cursor: pointer;
  1956. -webkit-box-sizing: border-box;
  1957. box-sizing: border-box;
  1958. margin-left: 100px;
  1959. }
  1960. /deep/.el-radio__input {
  1961. white-space: nowrap;
  1962. cursor: pointer;
  1963. outline: 0;
  1964. line-height: 1;
  1965. vertical-align: middle;
  1966. margin-top: -1px;
  1967. }
  1968. .title {
  1969. position: relative;
  1970. padding-left: 10px;
  1971. }
  1972. .title::before {
  1973. content: '';
  1974. display: inline-block;
  1975. width: 5px;
  1976. height: 30px;
  1977. background: #5473e8;
  1978. position: absolute;
  1979. left: 0;
  1980. }
  1981. .el-form {
  1982. padding: 0 15%;
  1983. display: flex;
  1984. flex-wrap: wrap;
  1985. margin-left: -50px;
  1986. margin-top: 15px;
  1987. width: 110%;
  1988. }
  1989. .el-button--primary {
  1990. background-color: #5878e8;
  1991. border-color: #5878e8;
  1992. }
  1993. .el-col {
  1994. background: #f6f7fc;
  1995. }
  1996. .bg-right {
  1997. text-align: right;
  1998. padding: 16px 20px;
  1999. }
  2000. .center {
  2001. position: relative;
  2002. top: 50px;
  2003. width: 40%;
  2004. height: 2000px;
  2005. margin: 0 auto;
  2006. margin-right: 180px;
  2007. }
  2008. /deep/.el-form-item__label {
  2009. width: 160px;
  2010. }
  2011. .inspector {
  2012. width: 50%;
  2013. }
  2014. /deep/.el-form-item--small .el-form-item__label,
  2015. .el-form-item--small .el-form-item__content {
  2016. text-align: left;
  2017. }
  2018. /deep/.el-input--small {
  2019. font-size: 13px;
  2020. position: relative;
  2021. display: inline-block;
  2022. }
  2023. .center1 .small-title {
  2024. margin-left: 323px;
  2025. }
  2026. .center1 {
  2027. width: 90%;
  2028. margin: 0 auto;
  2029. margin-left: 10px;
  2030. margin-top: 25px;
  2031. }
  2032. /deep/.el-input--small .el-input__inner {
  2033. height: 32px;
  2034. line-height: 32px;
  2035. }
  2036. /deep/.el-select {
  2037. display: inline-block;
  2038. position: relative;
  2039. width: 100%;
  2040. }
  2041. .annu {
  2042. height: 81px;
  2043. background: #ffffff;
  2044. border-radius: 4px;
  2045. }
  2046. .basicInformation .el-form-item {
  2047. width: 50.3333%;
  2048. border: none;
  2049. margin: 0;
  2050. }
  2051. .huom {
  2052. width: 100px;
  2053. }
  2054. .el-form {
  2055. font-size: 14px;
  2056. font-family: PingFangSC-Regular, PingFang SC;
  2057. font-weight: 400;
  2058. color: #8890b1;
  2059. line-height: 16px;
  2060. }
  2061. .a {
  2062. margin-left: -32px;
  2063. }
  2064. .el-radio-group {
  2065. margin-left: 251px;
  2066. }
  2067. .ding {
  2068. height: 23px;
  2069. background: #e8ecf6;
  2070. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  2071. }
  2072. .winseaview-view {
  2073. padding: 0 0 20px;
  2074. }
  2075. .container {
  2076. overflow: scroll;
  2077. height: 93vh;
  2078. }
  2079. .el-radio-group {
  2080. font-size: 0;
  2081. margin-top: 20px;
  2082. }
  2083. /deep/.el-form {
  2084. padding: 0 15%;
  2085. display: -webkit-box;
  2086. display: -ms-flexbox;
  2087. display: flex;
  2088. -ms-flex-wrap: wrap;
  2089. flex-wrap: wrap;
  2090. margin-left: 130px;
  2091. margin-top: 15px;
  2092. width: 110%;
  2093. }
  2094. </style>