add copy.vue 47 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421
  1. <template>
  2. <div class="ele-body">
  3. <el-card shadow="never">
  4. <header-title title="基本信息"></header-title>
  5. <!-- <basic-information
  6. ref="basicInformation"
  7. @onFormChange="formDataChange"
  8. @onClearMaterialList="clearMaterialList"
  9. :myFormData="formData"
  10. :warehousingMaterialList="warehousingMaterialList"
  11. :rules="rules"
  12. ></basic-information> -->
  13. <el-form
  14. :model="formData"
  15. ref="formName"
  16. label-width="110px"
  17. :rules="rules"
  18. >
  19. <el-row :gutter="20">
  20. <el-col :span="8">
  21. <el-form-item label="出库场景" prop="bizType">
  22. <el-select
  23. filterable
  24. placeholder="请选择"
  25. v-model="formData.bizType"
  26. clearable
  27. @change="handleBizSceneChange"
  28. :disabled="
  29. !!(warehousingMaterialList && warehousingMaterialList.length)
  30. "
  31. >
  32. <el-option
  33. v-for="item in outputSceneState"
  34. :key="item.code"
  35. :value="item.code + ''"
  36. :label="item.label"
  37. ></el-option>
  38. </el-select> </el-form-item
  39. ></el-col>
  40. <el-col :span="8">
  41. <el-form-item
  42. :label="
  43. formData.bizType == 3
  44. ? '销售发货单'
  45. : formData.bizType == 4
  46. ? '领料单'
  47. : formData.bizType == 1
  48. ? '采购退货单'
  49. : '来源单据'
  50. "
  51. prop="sourceBizNo"
  52. v-if="formData.extInfo.assetType == 7 && formData.bizType == 4"
  53. >
  54. <el-select
  55. filterable
  56. v-model="formData.sourceBizNo"
  57. :disabled="
  58. !!(formData.sourceBizNo && warehousingMaterialList.length)
  59. "
  60. clearable
  61. placeholder="请输入"
  62. @change="handleDocumentSourceChange"
  63. >
  64. <el-option
  65. v-for="item in options"
  66. :key="item"
  67. :label="item"
  68. :value="item"
  69. >
  70. </el-option> </el-select
  71. ></el-form-item>
  72. <el-form-item
  73. :label="
  74. formData.bizType == 3
  75. ? '销售发货单'
  76. : formData.bizType == 4
  77. ? '领料单'
  78. : formData.bizType == 1
  79. ? '采购退货单'
  80. : '来源单据'
  81. "
  82. v-else
  83. prop="sourceBizNo"
  84. >
  85. <el-input
  86. @input="$forceUpdate()"
  87. placeholder="请输入"
  88. @change="handleDocumentSourceChange"
  89. v-model="formData.sourceBizNo"
  90. @click.native="
  91. formData.bizType == 4
  92. ? handlePickorder()
  93. : formData.bizType == 3
  94. ? handleEom()
  95. : null
  96. "
  97. >
  98. <el-button
  99. v-if="formData.bizType == 4 || formData.bizType == 3"
  100. slot="append"
  101. icon="el-icon-circle-close"
  102. @click.stop="onClear"
  103. ></el-button>
  104. </el-input>
  105. </el-form-item>
  106. </el-col>
  107. <el-col :span="8">
  108. <el-form-item label="出库物品类型" prop="extInfo.assetType">
  109. <selectTree
  110. ref="trees"
  111. class="form-ipt"
  112. :isBindPlan="
  113. !!(warehousingMaterialList && warehousingMaterialList.length)
  114. "
  115. size="medium"
  116. style="width: 100%"
  117. clearable
  118. :options="codeList"
  119. :props="{
  120. value: 'id',
  121. label: 'name',
  122. children: 'children'
  123. }"
  124. @getValue="codeListValue"
  125. :isAll="false"
  126. />
  127. </el-form-item>
  128. </el-col>
  129. <el-col :span="8" v-if="formData.bizType == 3">
  130. <el-form-item label="客户名称">
  131. <el-input
  132. placeholder="客户名称"
  133. disabled
  134. v-model="formData.clientName"
  135. clearable /></el-form-item
  136. ></el-col>
  137. <el-col :span="8" v-if="formData.bizType == 3">
  138. <el-form-item label="客户联系人">
  139. <el-input
  140. placeholder="客户联系人"
  141. disabled
  142. v-model="formData.clientUser"
  143. clearable /></el-form-item
  144. ></el-col>
  145. <el-col :span="8" v-if="formData.bizType == 3">
  146. <el-form-item label="客户电话">
  147. <el-input
  148. placeholder="客户电话"
  149. disabled
  150. v-model="formData.clientPhone"
  151. clearable /></el-form-item
  152. ></el-col>
  153. <el-col :span="8">
  154. <el-form-item label="权属部门" prop="deptName">
  155. <el-input
  156. placeholder="权属部门"
  157. disabled
  158. v-model="formData.extInfo.deptName"
  159. clearable
  160. />
  161. </el-form-item>
  162. </el-col>
  163. <el-col :span="8">
  164. <el-form-item label="出库登记人">
  165. <el-input
  166. placeholder="登记人"
  167. disabled
  168. v-model="formData.extInfo.createUserName"
  169. clearable /></el-form-item
  170. ></el-col>
  171. <el-col :span="8">
  172. <el-form-item label="领料人部门" prop="verifyDeptName">
  173. <selectTree
  174. ref="tree"
  175. class="form-ipt"
  176. size="medium"
  177. style="width: 100%"
  178. clearable
  179. :options="treeList"
  180. :props="{
  181. value: 'code',
  182. label: 'name',
  183. children: 'children'
  184. }"
  185. @getValue="auditorDeptClick"
  186. />
  187. </el-form-item>
  188. </el-col>
  189. <el-col :span="8">
  190. <el-form-item label="领料人" prop="fromUser">
  191. <el-select
  192. v-model="formData.fromUser"
  193. filterable
  194. placeholder="请选择领料人"
  195. >
  196. <el-option
  197. v-for="item in llrLsit"
  198. :key="item.id"
  199. :label="item.name"
  200. :value="item.id"
  201. @click.native="
  202. () => (formData.extInfo.fromUserPhone = item.phone)
  203. "
  204. >
  205. </el-option>
  206. </el-select> </el-form-item
  207. ></el-col>
  208. <el-col :span="8">
  209. <el-form-item label="领料人联系方式" prop="fromUserPhone">
  210. <el-input
  211. placeholder="请输入"
  212. disabled
  213. v-model="formData.extInfo.fromUserPhone"
  214. clearable /></el-form-item
  215. ></el-col>
  216. <el-col :span="24">
  217. <el-form-item label="备注" prop="remark">
  218. <el-input
  219. v-model="formData.remark"
  220. clearable
  221. type="textarea"
  222. placeholder="请详细说明"
  223. :rows="4"
  224. ></el-input>
  225. </el-form-item>
  226. </el-col>
  227. </el-row>
  228. </el-form>
  229. <div>
  230. <el-button
  231. style="margin-bottom: 20px; float: right; margin-right: 20px"
  232. type="primary"
  233. @click="addStock"
  234. >添加</el-button
  235. >
  236. </div>
  237. <div class="material">
  238. <div v-if="dimension != 4">
  239. <header-title title="物品清单"></header-title>
  240. <div class="mt10 form-table">
  241. <el-form
  242. ref="warehousingMaterialListRef"
  243. :model="{ warehousingMaterialList: warehousingMaterialList }"
  244. :show-message="false"
  245. >
  246. <el-table
  247. ref="warehousingMaterialListTable"
  248. :data="warehousingMaterialList"
  249. tooltip-effect="dark"
  250. style="width: 100%"
  251. :max-height="300"
  252. stripe
  253. :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
  254. >
  255. <el-table-column label="序号" type="index" width="50">
  256. </el-table-column>
  257. <el-table-column
  258. label="编码"
  259. prop="assetCode"
  260. width="150"
  261. :show-overflow-tooltip="true"
  262. ></el-table-column>
  263. <el-table-column
  264. label="名称"
  265. width="200"
  266. prop="assetName"
  267. :show-overflow-tooltip="true"
  268. ></el-table-column>
  269. <el-table-column
  270. v-for="(item, index) in tableHeader"
  271. :key="index"
  272. align="center"
  273. :label="item.label"
  274. :width="item.width"
  275. :prop="item.prop"
  276. :show-overflow-tooltip="true"
  277. >
  278. <template slot-scope="{ row }">
  279. <template v-if="item.formatter">{{
  280. item.formatter(row)
  281. }}</template>
  282. <template v-else>{{ row[item.prop] }}</template>
  283. </template>
  284. </el-table-column>
  285. <el-table-column
  286. label="批号"
  287. prop="manualBatchNo"
  288. ></el-table-column>
  289. <el-table-column
  290. v-if="clientEnvironmentId != 2"
  291. label="批次号"
  292. prop="batchNo"
  293. ></el-table-column>
  294. <el-table-column label="最小包装单元" width="120">
  295. <template slot-scope="{ row }">
  296. {{ row.minPackingCount }}{{ row.measuringUnit }}/{{
  297. row.minUnit
  298. }}
  299. </template>
  300. </el-table-column>
  301. <el-table-column label="包装数量" prop="availableCountBase">
  302. <template slot-scope="{ row }">
  303. {{ row.packingCountBase }}{{ row.minUnit }}
  304. </template>
  305. </el-table-column>
  306. <el-table-column
  307. label="计量数量"
  308. prop="availableCountBase"
  309. ></el-table-column>
  310. <el-table-column
  311. label="计量单位"
  312. prop="measuringUnit"
  313. ></el-table-column>
  314. <el-table-column label="重量" prop="weight"></el-table-column>
  315. <el-table-column
  316. label="重量单位"
  317. prop="weightUnit"
  318. ></el-table-column>
  319. <el-table-column
  320. v-if="clientEnvironmentId == 4"
  321. label="级别"
  322. prop="level"
  323. ></el-table-column>
  324. <el-table-column
  325. v-if="clientEnvironmentId == 4"
  326. label="用途"
  327. prop="purpose"
  328. width="200"
  329. >
  330. <template slot-scope="{ row }">
  331. <el-input placeholder="请输入" v-model="row.purpose" />
  332. </template>
  333. </el-table-column>
  334. <el-table-column
  335. label="仓库"
  336. width="300"
  337. prop="pathName"
  338. :show-overflow-tooltip="true"
  339. ></el-table-column>
  340. <el-table-column fixed="right" label="操作" width="200">
  341. <template slot-scope="{ row, $index }">
  342. <el-button type="text" @click="listDel(row, $index)"
  343. >删除</el-button
  344. >
  345. </template>
  346. </el-table-column>
  347. </el-table>
  348. </el-form>
  349. </div>
  350. <header-title class="mt20" title="包装清单"></header-title>
  351. <div class="mt10 form-table">
  352. <BatchDetail
  353. :assetType="formData.extInfo.assetType"
  354. :data="batchDetailsVOList"
  355. />
  356. </div>
  357. </div>
  358. <div class="mt20">
  359. <header-title class="mt20" title="物料明细"></header-title>
  360. <el-tabs v-model="activeName" type="card">
  361. <el-tab-pane :label="`${title}明细`" name="a">
  362. <el-table
  363. ref="multipleTable"
  364. :data="materialCodeReqList"
  365. tooltip-effect="dark"
  366. style="width: 100%"
  367. :max-height="300"
  368. stripe
  369. :header-cell-style="rowClass"
  370. >
  371. <el-table-column label="序号" type="index" width="50">
  372. </el-table-column>
  373. <el-table-column
  374. :label="`编码`"
  375. min-width="100"
  376. prop="assetCode"
  377. :show-overflow-tooltip="true"
  378. ></el-table-column>
  379. <el-table-column
  380. label="名称"
  381. prop="name"
  382. width="200"
  383. :show-overflow-tooltip="true"
  384. >
  385. </el-table-column>
  386. <el-table-column label="批号" prop="manualBatchNo">
  387. </el-table-column>
  388. <el-table-column
  389. v-if="clientEnvironmentId != 2"
  390. label="批次号"
  391. prop="batchNo"
  392. >
  393. </el-table-column>
  394. <el-table-column
  395. v-if="dimension == 4"
  396. label="包装编码"
  397. min-width="100"
  398. prop="onlyCode"
  399. :show-overflow-tooltip="true"
  400. ></el-table-column>
  401. <el-table-column
  402. v-for="(item, index) in tableHeader"
  403. :key="index"
  404. align="center"
  405. :label="item.label"
  406. :width="item.width"
  407. :prop="item.prop"
  408. :show-overflow-tooltip="true"
  409. >
  410. <template slot-scope="{ row }">
  411. <template v-if="item.formatter">{{
  412. item.formatter(row)
  413. }}</template>
  414. <template v-else>{{ row[item.prop] }}</template>
  415. </template>
  416. </el-table-column>
  417. <el-table-column
  418. label="物料编码"
  419. width="250"
  420. prop="no"
  421. :show-overflow-tooltip="true"
  422. ></el-table-column>
  423. <el-table-column
  424. label="发货条码"
  425. prop="barcodes"
  426. width="80"
  427. :show-overflow-tooltip="true"
  428. ></el-table-column>
  429. <!-- <el-table-column label="生产日期" width="200">
  430. <template slot-scope="{ row }">
  431. <span v-if="row.dateType === 2">
  432. {{ row.produceTime }}
  433. </span>
  434. </template>
  435. </el-table-column>
  436. <el-table-column label="采购日期" width="200">
  437. <template slot-scope="{ row }">
  438. <span v-if="row.dateType === 1">
  439. {{ row.procureTime }}
  440. </span>
  441. </template>
  442. </el-table-column> -->
  443. <el-table-column label="计量数量" prop="">
  444. <template slot-scope="{ row }">1</template>
  445. </el-table-column>
  446. <el-table-column
  447. label="计量单位"
  448. prop="measuringUnit"
  449. ></el-table-column>
  450. <el-table-column
  451. label="物料代号"
  452. prop="materielCode"
  453. width="130"
  454. >
  455. </el-table-column>
  456. <el-table-column
  457. label="客户代号"
  458. prop="clientCode"
  459. ></el-table-column>
  460. <el-table-column label="刻码" prop="engrave"></el-table-column>
  461. <el-table-column label="重量" prop="weight"></el-table-column>
  462. <el-table-column
  463. label="重量单位"
  464. prop="weightUnit"
  465. ></el-table-column>
  466. <!-- <el-table-column
  467. label="货位"
  468. prop="pathName"
  469. show-overflow-tooltip
  470. >
  471. </el-table-column>
  472. <el-table-column label="转消耗" prop="">
  473. <template slot-scope="{ row }">
  474. <el-checkbox v-model="row.isTransferAsset"></el-checkbox>
  475. </template>
  476. </el-table-column> -->
  477. </el-table>
  478. </el-tab-pane>
  479. </el-tabs>
  480. </div>
  481. </div>
  482. <div class="center mt20">
  483. <el-button type="primary" @click="handleNewSave" :loading="saveLoading"
  484. >保存</el-button
  485. >
  486. <el-button @click="$router.go(-1)">返回</el-button>
  487. </div>
  488. </el-card>
  489. <AssetsDialog
  490. ref="assetsDialogRef"
  491. :title="title"
  492. :warehousingMaterialList="selectionList"
  493. :assetType="formData.extInfo.assetType"
  494. @detailData="detailData"
  495. />
  496. <!-- @selectTableData="onSelectTableData" -->
  497. <!-- 选桶号 -->
  498. <detailSelect
  499. ref="detailSelectRef"
  500. :title="title"
  501. :tableHeader="tableHeader"
  502. />
  503. <!-- 转资产 -->
  504. <!-- <TurnToAsset ref="turnToAssetRef" /> -->
  505. <!-- 选择仓库 -->
  506. <WareHouseDailog ref="wareHouseDailogRef"></WareHouseDailog>
  507. <!-- 选领料单 -->
  508. <pickOrder ref="pickOrderRef" @success="pickOrderRow" />
  509. <!-- 销售订单 -->
  510. <eom ref="eomRef" @success="eomSuccess" />
  511. </div>
  512. </template>
  513. <script>
  514. import outin from '@/api/warehouseManagement/outin';
  515. import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  516. import {
  517. getTreeByPid,
  518. getTreeByGroup,
  519. getProductList
  520. } from '@/api/classifyManage';
  521. import selectUpload from '@/components/selectUpload';
  522. import upload from '@/components/uploadImg';
  523. import pickOrder from './components/pickOrder.vue';
  524. import {
  525. warehousingType,
  526. outputSceneState,
  527. emergencyState,
  528. materialType
  529. } from '@/utils/dict/index';
  530. import selectTree from '@/components/selectTree';
  531. import AssetsDialog from '../components/AssetsDialog.vue';
  532. import outputType from '../components/outputType.vue';
  533. // import TurnToAsset from '../components/TurnToAsset/index.vue'
  534. import WareHouseDailog from '../components/WareHouseDailog.vue';
  535. // import supplier from '@/api/main/supplier';
  536. // import org from '@/api/main/org';
  537. // import user from '@/api/main/user';
  538. import { tableHeader } from '../common';
  539. import detailSelect from './components/detailSelect';
  540. import eom from './components/eom.vue';
  541. import BatchDetail from './components/batchDetail.vue';
  542. import { watch } from 'ele-admin/lib/ele-pro-table';
  543. export default {
  544. components: {
  545. BatchDetail,
  546. pickOrder,
  547. selectUpload,
  548. selectTree,
  549. AssetsDialog,
  550. WareHouseDailog,
  551. upload,
  552. detailSelect,
  553. // TurnToAsset,
  554. outputType,
  555. eom
  556. },
  557. data() {
  558. return {
  559. dimension: '3',
  560. llList: [],
  561. codeList: [],
  562. materialType,
  563. warehousingType,
  564. outputSceneState,
  565. emergencyState,
  566. saveLoading: false,
  567. title: '',
  568. tableData2: [],
  569. uploadList: [],
  570. fromUserList: [], //人员数组
  571. warehousingMaterialList: [], // 物品列表
  572. activeName: 'a',
  573. treeList: [],
  574. staffList: [],
  575. formData: {
  576. extInfo: {
  577. assetType: '', //物品类型id
  578. assetTypeName: '', //物品类型名称
  579. deptCode: '', //部门code
  580. deptName: '', //部门名称
  581. verifyDeptCode: '', //审核部门编码
  582. verifyDeptName: '', //审核部门名称
  583. deliveryName: '', //送货人名称
  584. fromUserPhone: '', //送货人电话
  585. sourceBizNo: '', //销售订单
  586. urgent: '', //紧急状态
  587. supplierId: '', //供应商ID
  588. supplierName: '', //供应商名称
  589. createUserName: '', //创建人名字
  590. contentImage: [] //图片数组
  591. },
  592. fromUser: '', //送货人
  593. bizType: '', //物品类型
  594. verifyId: '', //审核人Id
  595. verifyName: '', //审核人名称
  596. createUserId: '',
  597. remark: ''
  598. },
  599. rules: {
  600. bizType: {
  601. required: true,
  602. message: '请选择出库场景',
  603. trigger: 'change'
  604. },
  605. fromUser: {
  606. required: true,
  607. message: '请选择领料人',
  608. trigger: 'change'
  609. }
  610. },
  611. llrLsit: [],
  612. options: [],
  613. loading: false,
  614. onSelectTableDataVal: [],
  615. batchDetailsVOList: [],
  616. materialCodeReqList: [],
  617. selectionList: [],
  618. // shouldTriggerPickorder: true,
  619. materialObj: {},
  620. wlParams: {}
  621. };
  622. },
  623. computed: {
  624. tableHeader() {
  625. return tableHeader(this.formData.extInfo.assetType);
  626. },
  627. clientEnvironmentId() {
  628. return this.$store.state.user.info.clientEnvironmentId;
  629. }
  630. // 条码信息
  631. // materialCodeReqList() {
  632. // return this.warehousingMaterialList
  633. // .map((i) => i.warehouseLedgerDetails || [])
  634. // .flat();
  635. // }
  636. },
  637. created() {
  638. this.initData();
  639. },
  640. methods: {
  641. // 接收表单数据动态数据
  642. formDataChange(val) {
  643. this.formData = val;
  644. },
  645. // 清空物品列表
  646. clearMaterialList() {
  647. this.warehousingMaterialList = [];
  648. },
  649. detailData(data, dimension) {
  650. this.dimension = dimension;
  651. console.log('总数居', data);
  652. this.onSelectTableDataVal = data.realTimeInventoryVOList;
  653. this.warehousingMaterialList = data.realTimeInventoryVOList.map(
  654. (next) => {
  655. delete next.updateTime;
  656. delete next.createTime;
  657. return {
  658. ...next,
  659. realInventoryAmount: 0,
  660. assetType: this.formData.extInfo.assetType,
  661. outInNum: '',
  662. assetCode: next.code,
  663. assetName: next.name,
  664. bizStatus: 2,
  665. contactCode: next.contactCode
  666. };
  667. }
  668. );
  669. // this.batchDetailsVOList = data.batchDetailsVOList;
  670. if (dimension == 4) {
  671. this.materialCodeReqList = data.wlList;
  672. this.selectionList = data.wlList;
  673. let params = {
  674. realTimeInventoryNewPOList: data.realTimeInventoryVOList
  675. };
  676. for (const item of params.realTimeInventoryNewPOList) {
  677. item.inventoryDetailsNewPOList = item.inventoryDetailsVOList;
  678. for (const detail of item.inventoryDetailsNewPOList) {
  679. detail.outInMaterialDetailsAddPOList = [];
  680. for (const wlItem of data.wlList) {
  681. if (detail.id === wlItem.recordId) {
  682. detail.outInMaterialDetailsAddPOList.push({
  683. ...wlItem
  684. });
  685. }
  686. }
  687. }
  688. }
  689. this.wlParams = params;
  690. this.materialObj = data;
  691. } else if (dimension == 3) {
  692. //包装维度出库
  693. const list = data.realTimeInventoryVOList;
  694. //获取包装维度
  695. let packArr = [];
  696. for (const item of list) {
  697. if (item.inventoryDetailsVOList.length != 0) {
  698. for (const iterator of item.inventoryDetailsVOList) {
  699. packArr.push({ ...iterator, batchNo: iterator.batchNum });
  700. }
  701. }
  702. }
  703. this.batchDetailsVOList = packArr.map((item) => {
  704. return {
  705. ...item,
  706. packingCountBase:
  707. dimension == 4 || dimension == 3 ? 1 : item.packingCountBase
  708. // weight: 0
  709. };
  710. });
  711. //物料维度数据
  712. let meteArr = [];
  713. for (const item of packArr) {
  714. if (item.materialDetailsVOList.length != 0) {
  715. for (const iterator of item.materialDetailsVOList) {
  716. meteArr.push({
  717. ...iterator
  718. });
  719. }
  720. }
  721. }
  722. this.materialCodeReqList = meteArr;
  723. //再次打开选择上
  724. this.selectionList = list;
  725. //send数据
  726. this.wlParams = { realTimeInventoryNewPOList: list };
  727. this.wlParams.realTimeInventoryNewPOList.forEach((item) => {
  728. item.inventoryDetailsNewPOList = item.inventoryDetailsVOList;
  729. item.inventoryDetailsNewPOList.forEach((ite) => {
  730. // ite.weight = 0;
  731. ite.outInMaterialDetailsAddPOList = ite.materialDetailsVOList;
  732. });
  733. });
  734. } else {
  735. // else if (dimension == 2) {
  736. // this.batchDetailsVOList = data.wlList;
  737. // this.selectionList = data.wlList;
  738. // }
  739. //物品维度出库
  740. console.log(data);
  741. const list = data.realTimeInventoryVOList;
  742. //获取包装维度
  743. let packArr = [];
  744. for (const item of list) {
  745. if (item.inventoryDetailsVOList.length != 0) {
  746. for (const iterator of item.inventoryDetailsVOList) {
  747. packArr.push({ ...iterator, batchNo: iterator.batchNum });
  748. }
  749. }
  750. }
  751. this.batchDetailsVOList = packArr.map((item) => {
  752. return {
  753. ...item,
  754. packingCountBase: dimension == 3 ? 1 : item.packingCountBase
  755. // weight: 0
  756. };
  757. });
  758. //物料维度数据
  759. let meteArr = [];
  760. for (const item of packArr) {
  761. if (item.materialDetailsVOList.length != 0) {
  762. for (const iterator of item.materialDetailsVOList) {
  763. meteArr.push({
  764. ...iterator
  765. });
  766. }
  767. }
  768. }
  769. this.materialCodeReqList = meteArr;
  770. //再次打开选择上
  771. this.selectionList = list;
  772. //send数据
  773. this.wlParams = { realTimeInventoryNewPOList: list };
  774. this.wlParams.realTimeInventoryNewPOList.forEach((item) => {
  775. item.inventoryDetailsNewPOList = item.inventoryDetailsVOList;
  776. item.inventoryDetailsNewPOList.forEach((ite) => {
  777. // ite.weight = 0;
  778. ite.outInMaterialDetailsAddPOList = ite.materialDetailsVOList;
  779. });
  780. });
  781. }
  782. },
  783. handleNewSave() {
  784. this.$refs.formName.validate(async (valid) => {
  785. if (valid) {
  786. if (!this.warehousingMaterialList?.length) {
  787. return this.$message.error('请添加出库明细!');
  788. }
  789. let obj = { ...this.formData, type: 2 };
  790. obj.extInfo.sourceBizNo = obj.sourceBizNo;
  791. // obj.fromId=
  792. obj.fromType = obj.type;
  793. this.saveLoading = true;
  794. let purposeList = {};
  795. this.warehousingMaterialList.map((item) => {
  796. purposeList[item.id] = item.purpose;
  797. });
  798. this.wlParams.realTimeInventoryNewPOList.forEach((item) => {
  799. item.purpose = purposeList[item.id];
  800. });
  801. obj = { ...obj, ...this.wlParams };
  802. if (this.dimension == 4) {
  803. obj.num = this.materialObj.wlList.length;
  804. } else {
  805. obj.num = this.materialCodeReqList.length;
  806. }
  807. console.log('2222', obj);
  808. try {
  809. const res = await outin.saveNew(obj);
  810. if (res.code == 0) {
  811. await await outin.outApprovesInside({ outInIds: res.data });
  812. this.$message.success('保存成功!');
  813. }
  814. this.$router.push('/warehouseManagement/outgoingManagement');
  815. if (res?.success) {
  816. this.$message.success('保存成功!');
  817. this.$router.go(-1);
  818. }
  819. this.saveLoading = false;
  820. } catch (error) {
  821. this.saveLoading = false;
  822. }
  823. }
  824. });
  825. },
  826. onClear() {
  827. this.formData.sourceBizNo = '';
  828. this.warehousingMaterialList = [];
  829. this.$refs.trees.valueTitle = '';
  830. this.formData.clientName = '';
  831. this.formData.clientUser = '';
  832. this.formData.clientPhone = '';
  833. this.title = '';
  834. this.$forceUpdate();
  835. },
  836. async eomSuccess(row) {
  837. console.log(row);
  838. this.formData.extInfo.assetType = 9;
  839. this.$refs.trees.valueTitle = '产品';
  840. this.title = '产品';
  841. this.formData.sourceBizNo = row.orderNo;
  842. this.formData.sid = row.id;
  843. this.formData.fromId = row.id;
  844. this.formData.clientName = row.contactName;
  845. this.formData.clientUser = row.linkName;
  846. this.formData.clientPhone = row.linkPhone;
  847. console.log('==sasa', row.tableData);
  848. this.onSelectTableData(await this.serachMainCode(row.tableData), 1);
  849. this.$forceUpdate();
  850. },
  851. async serachMainCode(arr) {
  852. let newArr = [];
  853. // 使用 Promise.all 来等待所有异步操作完成
  854. await Promise.all(
  855. arr.map(async (item) => {
  856. const data = await getProductList({
  857. pageNum: 1,
  858. size: 10,
  859. categoryLevelId: item.productCategoryId,
  860. code: item.code
  861. });
  862. newArr.push(data.list); // 将结果存储到 newArr 中
  863. })
  864. );
  865. let re = [];
  866. for (const item of newArr) {
  867. for (const it of item) {
  868. re.push(it);
  869. }
  870. }
  871. return re.map((item) => {
  872. return {
  873. ...item,
  874. minUnit: item.packingUnit,
  875. assetCode: item.code,
  876. assetName: item.name
  877. };
  878. });
  879. },
  880. async pickOrderRow(row) {
  881. this.formData.sid = row.id;
  882. row.tableData = [];
  883. this.formData.sourceBizNo = row.code;
  884. for (const key in row.orderInfoList) {
  885. if (row.orderInfoList[key].bomDetailDTOS.length != 0) {
  886. for (const i in row.orderInfoList[key].bomDetailDTOS) {
  887. row.tableData.push({
  888. ...row.orderInfoList[key].bomDetailDTOS[i],
  889. code: row.orderInfoList[key].bomDetailDTOS[i].categoryCode,
  890. name: row.orderInfoList[key].bomDetailDTOS[i].categoryName,
  891. modelType: row.orderInfoList[key].bomDetailDTOS[i].model,
  892. id: row.orderInfoList[key].bomDetailDTOS[i].categoryId
  893. });
  894. }
  895. }
  896. if (row.orderInfoList[key].instanceList.length != 0) {
  897. for (const j in row.orderInfoList[key].instanceList) {
  898. row.tableData.push({
  899. ...row.orderInfoList[key].instanceList[j],
  900. code: row.orderInfoList[key].instanceList[j].categoryCode,
  901. name: row.orderInfoList[key].instanceList[j].categoryName,
  902. modelType: row.orderInfoList[key].instanceList[j].model,
  903. id: row.orderInfoList[key].instanceList[j].instanceId
  904. });
  905. }
  906. }
  907. }
  908. const uniqueItems = [];
  909. const uniqueIds = new Set();
  910. row.tableData.forEach((item) => {
  911. if (!uniqueIds.has(item.code)) {
  912. uniqueIds.add(item.code);
  913. uniqueItems.push(item);
  914. }
  915. });
  916. row.tableData = uniqueItems;
  917. console.log(row);
  918. this.onSelectTableData(await this.serachMainCode(row.tableData), 1);
  919. this.selectTop(row);
  920. this.$forceUpdate();
  921. },
  922. async selectTop(row) {
  923. let list = row.tableData;
  924. let arr = [];
  925. for (const it of list) {
  926. arr.push({
  927. categoryLevelId: it.rootCategoryLevelId,
  928. code: it.code,
  929. count: it.demandQuantity
  930. });
  931. }
  932. const data = await outin.getDetailByCode(arr);
  933. console.log('===', data);
  934. },
  935. handleEom() {
  936. this.$refs.eomRef.open();
  937. },
  938. handlePickorder() {
  939. this.$refs.pickOrderRef.open();
  940. },
  941. async handleDocumentSourceChange() {
  942. // this.formData.sourceBizNo = '';
  943. if (!this.formData.sourceBizNo) {
  944. if (this.formData.bizType == 4) {
  945. this.warehousingMaterialList = [];
  946. }
  947. return;
  948. }
  949. if (
  950. !(this.formData.extInfo.assetType == 7 && this.formData.bizType == 4)
  951. ) {
  952. return;
  953. }
  954. const loading = this.$loading({ fullscreen: true });
  955. const res = await getSparePartsInfo({
  956. code: this.formData.sourceBizNo
  957. });
  958. if (res?.success && res.data.length) {
  959. const curMap = {
  960. assetId: 'classificationId',
  961. assetCode: 'informationCode', //编码
  962. assetName: 'informationName', //名称
  963. materialId: 'classificationId',
  964. materialName: 'informationName',
  965. manualBatchNo: '', // 批号
  966. batchNo: '', //批次号
  967. unit: 'measuringUnit', //单位
  968. minPackUnit: 'packingUnit' //最小包装单位
  969. };
  970. res.data.forEach((item) => {
  971. let obj = {};
  972. for (const key in curMap) {
  973. obj[key] = curMap[key] ? item[curMap[key]] : '';
  974. }
  975. obj.curId =
  976. obj.assetCode +
  977. (obj.measurementUnit || '') +
  978. (obj.minPackUnit || '') +
  979. (obj.unit || '');
  980. console.log(obj.curId);
  981. const index = this.warehousingMaterialList.findIndex(
  982. (i) => i.curId === obj.curId
  983. );
  984. if (index === -1) {
  985. Object.assign(obj, item);
  986. obj.sparePartsNum = item.num;
  987. this.warehousingMaterialList.push(obj);
  988. } else {
  989. this.warehousingMaterialList[index].sparePartsNum = item.num;
  990. }
  991. });
  992. }
  993. loading.close();
  994. },
  995. // 备品备件来源单号
  996. async remoteMethod(code) {
  997. // if (code !== '') {
  998. // this.loading = true
  999. const res = await getDocumentSource({ code });
  1000. if (res?.success) {
  1001. this.options = res.data;
  1002. }
  1003. // this.loading = false
  1004. // } else {
  1005. // this.options = []
  1006. // }
  1007. },
  1008. rowClass({ row, column, rowIndex, columnIndex }) {
  1009. if (rowIndex === 1) {
  1010. return {
  1011. display: 'none',
  1012. background: '#EEEEEE',
  1013. border: 'none'
  1014. };
  1015. }
  1016. return { background: '#EEEEEE', border: 'none' };
  1017. },
  1018. // 部门点击事件
  1019. async auditorDeptClick(data) {
  1020. console.log(data);
  1021. this.formData.extInfo.verifyDeptCode = data?.id;
  1022. this.formData.extInfo.verifyDeptName = data?.name;
  1023. this.formData.verifyId = '';
  1024. this.formData.verifyName = '';
  1025. this.$refs.formName.validateField('verifyDeptName');
  1026. if (data) {
  1027. this.getStaffList(data);
  1028. }
  1029. },
  1030. async getStaffList(data) {
  1031. let res = await warehouseDefinition.getUserPage({
  1032. groupId: data.id,
  1033. size: 9999,
  1034. page: 1
  1035. });
  1036. this.llrLsit = res.list;
  1037. },
  1038. handleSetting(row) {
  1039. row.bizTypes = this.formData.bizType;
  1040. row.type = this.formData.bizType == 3 ? 1 : 0;
  1041. this.$refs.detailSelectRef
  1042. .open(row, row.warehouseLedgerDetails || [])
  1043. .then((res) => {
  1044. console.log(res);
  1045. console.log(row);
  1046. this.$set(
  1047. row,
  1048. 'warehouseLedgerDetails',
  1049. (res || []).map((item) => {
  1050. delete item.updateTime;
  1051. delete item.createTime;
  1052. this.$set(item, 'isTransferAsset', false);
  1053. item.isUnpack = row.isUnpack;
  1054. return item;
  1055. })
  1056. );
  1057. this.$set(row, 'outInNum', res.length);
  1058. this.$set(row, 'minPackUnit', res[0].minPackUnit);
  1059. this.$set(
  1060. row,
  1061. 'selfSum',
  1062. row.warehouseLedgerDetails.reduce((sum, pre) => {
  1063. if (row.isUnpack) {
  1064. return ++sum;
  1065. }
  1066. return sum + pre.measurementUnit;
  1067. }, 0)
  1068. );
  1069. });
  1070. },
  1071. // 仓库编辑
  1072. handleWareHouse(row) {
  1073. this.$refs.wareHouseDailogRef.open(row);
  1074. },
  1075. // 出库操作
  1076. listEdit(row) {
  1077. this.$set(row, 'isSave', false);
  1078. },
  1079. //出库明细删除
  1080. listDel(row, index) {
  1081. this.warehousingMaterialList.splice(index, 1);
  1082. console.log(this.warehousingMaterialList);
  1083. if (this.warehousingMaterialList.length == 0) {
  1084. this.formData.sourceBizNo = '';
  1085. this.formData.extInfo.clientName = '';
  1086. this.formData.extInfo.clientUser = '';
  1087. this.formData.extInfo.clientUserPhone = '';
  1088. }
  1089. // 从 this.batchDetailsVOList 中删除满足条件的对象
  1090. this.removeItemsFromArray(this.batchDetailsVOList, (item) => {
  1091. return item.code.substr(0, 12) === row.code;
  1092. });
  1093. // 从 this.materialCodeReqList 中删除满足条件的对象
  1094. this.removeItemsFromArray(
  1095. this.materialCodeReqList,
  1096. (item) => item.assetCode === row.code
  1097. );
  1098. },
  1099. // 删除数组中满足条件的对象
  1100. removeItemsFromArray(arr, condition) {
  1101. for (let i = arr.length - 1; i >= 0; i--) {
  1102. if (condition(arr[i])) {
  1103. arr.splice(i, 1);
  1104. }
  1105. }
  1106. },
  1107. // 出库明细生成条码信息
  1108. async createMaterialCode(row) {
  1109. let arr = [];
  1110. const res = await getAssetNum({
  1111. assetCode: row.assetCode,
  1112. num: row.outInNum || 1
  1113. });
  1114. if (res?.success) {
  1115. delete row.createTime;
  1116. arr = Array.from(new Array(res.data.length), (val, idx) => ({
  1117. ...row,
  1118. num: res.data[idx],
  1119. bizStatus: 2,
  1120. isTransferAsset: false
  1121. }));
  1122. }
  1123. return arr;
  1124. },
  1125. handleSave() {
  1126. this.$refs.formName.validate(async (valid) => {
  1127. if (valid) {
  1128. if (!this.warehousingMaterialList?.length) {
  1129. return this.$message.error('请添加出库明细!');
  1130. } else if (
  1131. this.warehousingMaterialList.some(
  1132. (item) => !item.warehouseLedgerDetails?.length
  1133. )
  1134. ) {
  1135. return this.$message.error('请完善出库明细数据!');
  1136. }
  1137. console.log('qqqq===>', this.warehousingMaterialList);
  1138. let arr = this.warehousingMaterialList.map((item) => {
  1139. return {
  1140. batchNo: item.batchNo,
  1141. categoryId: item.id,
  1142. count: item.outInNum,
  1143. num: item.outInNum,
  1144. minPackingCount: item.selfSum,
  1145. packingCount: item.outInNum,
  1146. outInDetailRecordAddPOList: item.warehouseLedgerDetails,
  1147. ...item
  1148. };
  1149. });
  1150. arr.forEach((item) => {
  1151. item.warehouseId =
  1152. item.warehouseLedgerDetails[0].pathIds.split(',')[0];
  1153. delete item.id;
  1154. delete item.warehouseLedgerDetails;
  1155. if (item.outInDetailRecordAddPOList.length > 0) {
  1156. let list = item.outInDetailRecordAddPOList.map((it) => {
  1157. return {
  1158. positionId: it.positionId,
  1159. code: it.sourceBizNo,
  1160. dateType: it.dateType,
  1161. dateValue: it.dateValue,
  1162. minUnit: it.minUnit,
  1163. batchNo: it.sourceBatchNo,
  1164. position: it.pathName,
  1165. // minPositionId: it.cargoSpaceId,
  1166. minPositionId: it.minPositionId,
  1167. name: it.name,
  1168. pathIds: it.pathIds,
  1169. unit: it.unit,
  1170. packageNo: it.packageNo,
  1171. minPackingCount: it.minPackingCount,
  1172. procureTime: it.procureTime,
  1173. produceTime: it.produceTime
  1174. // num: it.minPackingCount
  1175. };
  1176. });
  1177. item.outInDetailRecordAddPOList = list;
  1178. }
  1179. });
  1180. let obj = { ...this.formData, type: 2 };
  1181. for (const key in arr) {
  1182. arr[key].count = arr[key].outInNum;
  1183. }
  1184. obj.outInDetailAddPOList = arr;
  1185. obj.extInfo.sourceBizNo = obj.sourceBizNo;
  1186. obj.fromType = obj.type;
  1187. this.saveLoading = true;
  1188. console.log('2222', obj);
  1189. const res = await outin.save(obj);
  1190. if (res.code == 0) {
  1191. this.$message.success('保存成功!');
  1192. }
  1193. this.saveLoading = false;
  1194. this.$router.push('/warehouseManagement/outgoingManagement');
  1195. if (res?.success) {
  1196. this.$message.success('保存成功!');
  1197. this.$router.go(-1);
  1198. }
  1199. }
  1200. });
  1201. },
  1202. handelArr(arr, id) {
  1203. for (const key in arr) {
  1204. arr[key].inLedgerId = arr[key].id;
  1205. arr[key].categoryLevelId = id;
  1206. for (const k in arr[key].warehouseLedgerDetails) {
  1207. arr[key].warehouseLedgerDetails[k].ledgerDetailId =
  1208. arr[key].warehouseLedgerDetails[k].id;
  1209. arr[key].warehouseLedgerDetails[k].inDetailId = arr[key].inLedgerId;
  1210. arr[key].warehouseLedgerDetails[k].isTransferAsset = arr[key]
  1211. .warehouseLedgerDetails[k].isTransferAsset
  1212. ? 1
  1213. : 0;
  1214. arr[key].warehouseLedgerDetails[k].bizStatus = 2;
  1215. }
  1216. }
  1217. return arr;
  1218. },
  1219. //添加明细
  1220. onSelectTableData(val, e) {
  1221. this.onSelectTableDataVal = val;
  1222. this.warehousingMaterialList = val.map((next) => {
  1223. delete next.updateTime;
  1224. delete next.createTime;
  1225. return {
  1226. ...next,
  1227. realInventoryAmount: 0,
  1228. assetType: this.formData.extInfo.assetType,
  1229. outInNum: '',
  1230. assetCode: next.code,
  1231. assetName: next.name,
  1232. bizStatus: 2,
  1233. contactCode: next.contactCode
  1234. };
  1235. });
  1236. console.log('sasasasa===>>>', this.warehousingMaterialList);
  1237. },
  1238. codeListValue(val) {
  1239. console.log(val);
  1240. this.formData.extInfo.assetType = val.id;
  1241. this.$forceUpdate();
  1242. this.title = val?.name;
  1243. this.selectEquiType = val?.id;
  1244. console.log(this.title);
  1245. },
  1246. async initData() {
  1247. const { data } = await getTreeByGroup({ type: 2 });
  1248. this.codeList = data;
  1249. const res = await warehouseDefinition.tree();
  1250. this.treeList = this.$util.toTreeData({
  1251. data: res,
  1252. idField: 'id',
  1253. parentIdField: 'parentId'
  1254. });
  1255. let res22 = await warehouseDefinition.getUserPage({
  1256. size: -1,
  1257. page: 1
  1258. });
  1259. this.fromUserList = res22.list;
  1260. console.log('res=====', res);
  1261. const info = JSON.parse(localStorage.getItem('info'));
  1262. console.log('info=====', info);
  1263. if (info && info.deptId?.length > 0) {
  1264. let obj = res.find(
  1265. (item) => item.id === info.deptId[info.deptId.length - 1]
  1266. );
  1267. console.log('obj=====', obj);
  1268. this.formData.extInfo.deptName = obj?.name;
  1269. this.formData.extInfo.deptCode = obj?.id;
  1270. this.formData.extInfo.createUserName = info.name;
  1271. this.formData.createUserId = info.userId;
  1272. }
  1273. },
  1274. addStock() {
  1275. // this.title = this.formData.extInfo.assetTypeName;
  1276. if (!this.title) return this.$message.error('请选择出库产品类型');
  1277. if (!this.formData.bizType && this.formData.bizType !== 0)
  1278. return this.$message.error('请选择出库场景');
  1279. this.$refs.assetsDialogRef.open();
  1280. },
  1281. handleChange(data) {
  1282. this.title = data?.dictValue;
  1283. if (this.formData.bizType == 4) {
  1284. this.formData.sourceBizNo = '';
  1285. }
  1286. },
  1287. handleChanges(code) {
  1288. const data = this.codeList.find((item) => item.dictCode == code);
  1289. this.title = data?.dictValue;
  1290. this.selectEquiType = data?.dictCode;
  1291. if (this.formData.bizType == 4) {
  1292. this.formData.sourceBizNo = '';
  1293. }
  1294. },
  1295. handleBizSceneChange() {
  1296. if (this.formData.extInfo.assetType == 7) {
  1297. this.formData.extInfo.sourceBizNo = '';
  1298. }
  1299. this.formData.sourceBizNo = '';
  1300. },
  1301. getSupplier() {
  1302. return new Promise((resolve, reject) => {
  1303. supplier.list({ page: 1, size: 999 }).then((res) => {
  1304. if (res.success) {
  1305. resolve(res);
  1306. }
  1307. });
  1308. });
  1309. },
  1310. upload(data) {
  1311. this.formData.contentImage = data;
  1312. this.$refs.formName.validateField('contentImage');
  1313. },
  1314. deptClick(data) {
  1315. this.formData.deptName = data?.name;
  1316. this.formData.deptCode = data?.code;
  1317. }
  1318. },
  1319. watch: {
  1320. // 解决右侧悬浮操作栏不对称问题
  1321. warehousingMaterialList: {
  1322. handler() {
  1323. this.$nextTick(() => {
  1324. this.$refs.warehousingMaterialListTable.doLayout();
  1325. });
  1326. },
  1327. deep: true
  1328. }
  1329. }
  1330. };
  1331. </script>
  1332. <style lang="scss" scoped>
  1333. ::v-deep .el-row {
  1334. display: flex;
  1335. flex-wrap: wrap;
  1336. }
  1337. ::v-deep.form-table {
  1338. .el-form-item {
  1339. margin-bottom: 0;
  1340. }
  1341. .el-input__inner {
  1342. padding: 0 10px;
  1343. }
  1344. }
  1345. .p20 {
  1346. padding: 20px;
  1347. }
  1348. .el-select,
  1349. .el-date-editor {
  1350. width: 100%;
  1351. }
  1352. .el-form-item {
  1353. margin-bottom: 22px;
  1354. }
  1355. .material {
  1356. margin-top: 20px;
  1357. .flex {
  1358. display: flex;
  1359. justify-content: space-between;
  1360. font-size: 14px;
  1361. align-items: center;
  1362. .red {
  1363. color: #ff4949;
  1364. }
  1365. }
  1366. }
  1367. .mt10 {
  1368. margin-top: 10px;
  1369. }
  1370. .mt20 {
  1371. margin-top: 20px;
  1372. }
  1373. .center {
  1374. text-align: center;
  1375. }
  1376. </style>