index.vue 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466
  1. <template>
  2. <div class="app-container">
  3. <div v-if="MainTable == false">
  4. <MainForm
  5. ref="MainForm"
  6. :searchdata="formOption"
  7. :display="display"
  8. :form="queryParms"
  9. :show="show"
  10. :inDex="inDex"
  11. />
  12. <listComponent
  13. style="clear:both"
  14. v-if="waitFor"
  15. :tableData="tableData"
  16. @selectionbox="selectionbox"
  17. @see="viewMethod"
  18. @modify="modification"
  19. @deletion="deletion"
  20. @buttonList="buttonList"
  21. @showSearch="showSearch"
  22. @getList="getList"
  23. @feedback="feedback"
  24. :customButton="customButton"
  25. :arrow="arrow"
  26. :hasPermi="hasPermi"
  27. :tatolLabel="mainTatol"
  28. :seachButton="seachButton"
  29. :setRowList="listStyle"
  30. :listStyle="listStyle"
  31. :isItHidden="isItHidden"
  32. :queryList="queryList"/>
  33. <pagination
  34. v-show="total > 0"
  35. :total="total"
  36. :page.sync="queryParms.pageNum"
  37. :limit.sync="queryParms.pageSize"
  38. @pagination="getList"
  39. />
  40. </div>
  41. <div v-if="MainTable == true">
  42. <MainForm
  43. ref="detailForm"
  44. :searchdata="detailOption"
  45. :display="display"
  46. :form="detailForm"
  47. :show="show = true"
  48. :inDex="inDex"
  49. @backRules="backRules"
  50. @backSave="backSave"
  51. @verificationRules="verificationRules"
  52. @changeWarehouse="changeWarehouse"
  53. />
  54. <list-component
  55. v-if="waitFor"
  56. :tableData="detailData"
  57. @selectionbox="selectionbox"
  58. @see="viewMethod"
  59. @modify="modification"
  60. @deletion="deletion"
  61. @buttonList="buttonList"
  62. @showSearch="showSearch"
  63. @getList="getList"
  64. @deletRows="deletRows"
  65. @feedback="feedback"
  66. @totalAmount="totalAmount"
  67. @change="change"
  68. :seachButton="confirmButton"
  69. :customButton="detailButton"
  70. :listStyle="detailStyle"
  71. :hasPermi="hasPermi"
  72. :setRowList="detailStyle"
  73. :tatolLabel="tatolLabel"
  74. :listData="listData"
  75. :queryList="detailList"/>
  76. </div>
  77. <el-dialog
  78. title="打印入库"
  79. :visible.sync="dialogVisible"
  80. :fullscreen="true"
  81. style="padding: 0;margin:0"
  82. width="70%">
  83. <div ref="print">
  84. <table class="table table-striped table-bordered" align="center" valign="center" style="font-size: 12px;border-collapse: collapse; border: none;margin-top: 10px;" >
  85. <tr>
  86. <td style="font-size: 24px;font-weight:bold" class="column" colspan="15" align="center">入库明细</td>
  87. </tr>
  88. <tr>
  89. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">入库时间</td>
  90. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">产品名称</td>
  91. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">规格</td>
  92. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">数量</td>
  93. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">供货商</td>
  94. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">供货人</td>
  95. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">联系电话</td>
  96. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">生产日期或批号</td>
  97. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">保质期限</td>
  98. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">保存条件</td>
  99. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">索证索票情况</td>
  100. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">采购人</td>
  101. <td class="column" style="border: 1px solid #000; padding:10px" align="center" colspan="2">检验结果</td>
  102. <td class="column" style="border: 1px solid #000; padding:10px" align="center" rowspan="2">验收人</td>
  103. </tr>
  104. <tr>
  105. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >感官</td>
  106. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >数量</td>
  107. </tr>
  108. <tr v-for="(item,index) in this.detailData" :key="index">
  109. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{detailForm.fBsdate}}</td>
  110. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.feeName}}</td>
  111. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fFeeunitid}}</td>
  112. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fQty}}</td>
  113. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{detailForm.corpName}}</td>
  114. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fAmount}}</td>
  115. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fStltypeid}}</td>
  116. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.tProductdate}}/{{item.fLotno}}</td>
  117. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fValidName}}</td>
  118. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fStoreEnvName}}</td>
  119. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{item.fIsfillesName}}</td>
  120. <td class="column" style="border: 1px solid #000; padding:10px" align="center" >{{detailForm.fpurchaseName}}</td>
  121. <td class="column" style="border: 1px solid #000; padding:10px" align="center" ></td>
  122. <td class="column" style="border: 1px solid #000; padding:10px" align="center" ></td>
  123. <td class="column" style="border: 1px solid #000; padding:10px" align="center" ></td>
  124. </tr>
  125. </table>
  126. </div>
  127. <span slot="footer" class="dialog-footer">
  128. <el-button @click="dialogVisible = false">取 消</el-button>
  129. <el-button type="primary" @click="Printing">打印</el-button>
  130. </span>
  131. </el-dialog>
  132. </div>
  133. </template>
  134. <script>
  135. import { select } from '@/api/system/set'
  136. import MainForm from '@/combination/MainForm'
  137. import { listInStock, addSave, getSave, getArea,
  138. getustomer,getEntry, getwarehouse, getGoodName,
  139. canBedelet, delRows, getWarehousekeeper, addWarehous,
  140. deletMain, delFee, copyNew, listQuery} from '@/api/warehouse/inStock'
  141. import Cookies from 'js-cookie'
  142. import { getliable } from '@/api/project'
  143. export default {
  144. name: 'inStock',
  145. data(){
  146. return{
  147. hasPermi:{
  148. lookup:['anpin:stockControl:query'],
  149. disappear:['anpin:stockControl:remove']
  150. },
  151. formList:{},
  152. dialogVisible: false,
  153. mainTatol:['金额'],
  154. ids:[],
  155. listData:{
  156. fFeeid:[],
  157. fFeeunitid:[],
  158. fStltypeid:[],
  159. fWarehouseid:[],
  160. fUnits:[],
  161. fStoreEnv:[],
  162. fIsfilles:[],
  163. },
  164. selection:[],
  165. isItHidden:true,
  166. // 非单个禁用
  167. single: true,
  168. // 总条数
  169. total: 0,
  170. inDex:4,
  171. tatolLabel:['单价','数量','金额'],
  172. MainTable:false,
  173. show: false,
  174. arrow:'el-icon-arrow-up',
  175. queryList:{
  176. tableName:'入库主表',
  177. columnList:[]
  178. },
  179. detailList:{
  180. tableName:'仓库入库详情',
  181. columnList:[]
  182. },
  183. //判断自定义列是否有值再渲染组件
  184. waitFor:false,
  185. display:3,
  186. queryParms:{
  187. pageNum: 1,
  188. pageSize: 10,
  189. fBilltype:'RK'
  190. },
  191. detailForm:{
  192. },
  193. //主页面默认显示4个表单数据
  194. formOption:[
  195. {
  196. span:6,
  197. label: 'fBillno',
  198. name:"系统编号",
  199. form:2,
  200. width:200,
  201. labelSize:'80',
  202. rules: { required:false }
  203. },
  204. {
  205. span:6,
  206. label: 'fWarehouseid',
  207. name:"仓库",
  208. form:1,
  209. width:200,
  210. labelSize:'80',
  211. rules: { required:false },
  212. data:[]
  213. },
  214. {
  215. span:6,
  216. label: 'fCorpid',
  217. name:"供应商",
  218. form:1,
  219. width:200,
  220. labelSize:'80',
  221. rules: { required:false },
  222. data:[]
  223. },
  224. {
  225. span:6,
  226. label: 'timeInterval',
  227. name:"入库日期",
  228. form:6,
  229. width:250,
  230. labelSize:'80',
  231. rules: { required:false },
  232. },
  233. {
  234. span:6,
  235. label: 'cLoadDate',
  236. name:"申请日期",
  237. form:6,
  238. width:200,
  239. labelSize:'80',
  240. rules: { required:false }
  241. },
  242. {
  243. span:6,
  244. label: 'moneys',
  245. name:"金额范围",
  246. form:5,
  247. width:200,
  248. labelSize:'80',
  249. rules: { required:false }
  250. },
  251. {
  252. span:6,
  253. label: 'createBy',
  254. name:"申请人",
  255. form:2,
  256. width:200,
  257. labelSize:'80',
  258. rules: { required:false }
  259. },
  260. {
  261. span:6,
  262. label: 'fGoodsid',
  263. name:"项目名称",
  264. form:1,
  265. width:200,
  266. labelSize:'80',
  267. rules: { required:false },
  268. data:[]
  269. },
  270. {
  271. span:6,
  272. label: 'remark',
  273. name:"备注",
  274. form:2,
  275. width:200,
  276. labelSize:'80',
  277. rules: { required:false }
  278. },
  279. ],
  280. //表名称
  281. tableData:[],
  282. //从表表名
  283. detailData:[],
  284. //传输表
  285. mainStyle:[],
  286. //表数据
  287. listStyle: [
  288. {
  289. surface: "1",
  290. label: "serialNumber",
  291. name: "序号",
  292. checked: 0,
  293. width: 100,
  294. onabort:''
  295. },{
  296. surface: "2",
  297. label: "fBillno",
  298. name: "申请编号",
  299. checked: 0,
  300. width: 100,
  301. }, {
  302. surface: "3",
  303. label: "fWarehouseName",
  304. name: "仓库",
  305. checked: 0,
  306. width: 200,
  307. operation:1
  308. },
  309. {
  310. surface: "4",
  311. label: "corpName",
  312. name: "供应商",
  313. checked: 0,
  314. width: 200,
  315. operation:1
  316. },{
  317. surface: "5",
  318. label: "fMoney",
  319. name: "金额",
  320. checked: 0,
  321. width: 200,
  322. operation:1
  323. },{
  324. surface: "6",
  325. label: "createTime",
  326. name: "申请日期",
  327. checked: 0,
  328. width: 200,
  329. operation:1
  330. },{
  331. surface: "7",
  332. label: "fBsdate",
  333. name: "入库日期",
  334. checked: 0,
  335. width: 200,
  336. operation:1
  337. },
  338. {
  339. surface: "8",
  340. label: "createBy",
  341. name: "申请人",
  342. checked: 0,
  343. width: 200,
  344. operation:1
  345. },{
  346. surface: "9",
  347. label: "fBillstatusName",
  348. name: "状态",
  349. checked: 0,
  350. width: 200,
  351. operation:1
  352. },{
  353. surface: "10",
  354. label: "fReviewDate",
  355. name: "审核日期",
  356. checked: 0,
  357. width: 200,
  358. operation:1,
  359. },
  360. {
  361. surface: "11",
  362. label: "projectName",
  363. name: "项目名称",
  364. checked: 0,
  365. width: 200,
  366. operation:1
  367. },{
  368. surface: "12",
  369. label: "remark",
  370. name: "备注",
  371. checked: 0,
  372. width: 200,
  373. operation:1
  374. },{
  375. surface: "13",
  376. label: "fMaterial2",
  377. name: "操作",
  378. checked: 0,
  379. width: 200,
  380. operation:1
  381. }
  382. ],
  383. //从表数据
  384. detailStyle: [
  385. {
  386. surface: "1",
  387. label: "serialNumber",
  388. name: "序号",
  389. checked: 0,
  390. width: 100,
  391. onabort:''
  392. },{
  393. surface: "2",
  394. label: "fFeeid",
  395. name: "品名",
  396. checked: 0,
  397. width: 200,
  398. changeable:1,
  399. data:[],
  400. },
  401. {
  402. surface: "3",
  403. label: "fCurrencyName",
  404. name: "规格",
  405. checked: 0,
  406. width: 200,
  407. changeable:1,
  408. data:[],
  409. },
  410. {
  411. surface: "4",
  412. label: "fUnitprice",
  413. name: "单价",
  414. checked: 0,
  415. width: 100,
  416. operation:2,
  417. changeable:2,
  418. disabled:false,
  419. onabort:'this.value=this.value.replace(/[^\\d^\\.]+/g,\'\')'
  420. },{
  421. surface: "5",
  422. label: "fQty",
  423. name: "数量",
  424. checked: 0,
  425. width: 100,
  426. operation:2,
  427. changeable:2,
  428. disabled:false,
  429. onabort:'this.value=this.value.replace(/[^\\d^\\.]+/g,\'\')'
  430. },{
  431. surface: "6",
  432. label: "fFeeunitid",
  433. name: "计量单位",
  434. checked: 0,
  435. width: 100,
  436. changeable:1,
  437. operation:2,
  438. data:[],
  439. disabled:false
  440. },{
  441. surface: "7",
  442. label: "fWarehouseid",
  443. name: "库区",
  444. checked: 0,
  445. width: 100,
  446. operation:2,
  447. changeable:1,
  448. data:[],
  449. disabled:false
  450. },{
  451. surface: "8",
  452. label: "fAmount",
  453. name: "金额",
  454. checked: 0,
  455. width: 100,
  456. operation:2,
  457. changeable: 2,
  458. disabled: true,
  459. doNot:'1'
  460. },{
  461. surface: "9",
  462. label: "fStltypeid",
  463. name: "付费方式",
  464. checked: 0,
  465. width: 100,
  466. operation:2,
  467. changeable: 1,
  468. data:[],
  469. disabled:false
  470. },
  471. {
  472. surface: "10",
  473. label: "tProductdate",
  474. name: "生产日期",
  475. checked: 0,
  476. width: 100,
  477. operation:2,
  478. changeable: 3,
  479. data:[],
  480. disabled:false
  481. },{
  482. surface: "11",
  483. label: "fLotno",
  484. name: "批号",
  485. checked: 0,
  486. width: 100,
  487. operation:2,
  488. changeable: 2,
  489. data:[],
  490. disabled:false
  491. },
  492. {
  493. surface: "12",
  494. label: "fValid",
  495. name: "保质期限",
  496. checked: 0,
  497. width: 100,
  498. operation:2,
  499. changeable: 2,
  500. data:[],
  501. disabled:false,
  502. onabort:'this.value=this.value.replace(/[^\\d^\\.]+/g,\'\')'
  503. },
  504. {
  505. surface: "13",
  506. label: "fUnits",
  507. name: "单位",
  508. checked: 0,
  509. width: 100,
  510. operation:2,
  511. changeable: 1,
  512. data:[],
  513. disabled:false
  514. },
  515. {
  516. surface: "14",
  517. label: "fStoreEnv",
  518. name: "存储环境",
  519. checked: 0,
  520. width: 100,
  521. operation:2,
  522. changeable: 1,
  523. data:[],
  524. disabled:false
  525. },
  526. {
  527. surface: "15",
  528. label: "fIsfilles",
  529. name: "索证索票",
  530. checked: 0,
  531. width: 100,
  532. operation:2,
  533. changeable: 1,
  534. disabled:false
  535. },
  536. {
  537. surface: "16",
  538. label: "remark",
  539. name: "备注",
  540. checked: 0,
  541. width: 100,
  542. operation:2,
  543. changeable: 2,
  544. disabled:false
  545. },{
  546. surface: "17",
  547. label: "fReviewDate",
  548. name: "审核日期",
  549. checked: 0,
  550. width: 100,
  551. operation:2,
  552. changeable: 3,
  553. disabled:true,
  554. doNot:'1'
  555. },
  556. {
  557. surface: "18",
  558. label: "createBy",
  559. name: "申请人",
  560. checked: 0,
  561. width: 100,
  562. operation:2,
  563. changeable: 2,
  564. disabled:true,
  565. doNot:'1'
  566. },{
  567. surface: "19",
  568. label: "fMaterial10",
  569. name: "操作",
  570. checked: 0,
  571. width: 100,
  572. operation:2,
  573. disabled:false
  574. }
  575. ],
  576. //详情主表
  577. detailOption:[
  578. {
  579. index:'1',
  580. span:6,
  581. label: 'fBillno',
  582. name:"系统编号",
  583. form:2,
  584. width:200,
  585. labelSize:'80',
  586. rules:'',
  587. disabled:true,
  588. doNot:'1'
  589. },
  590. {
  591. index:'2',
  592. span:6,
  593. label: 'fCorpid',
  594. name:"供应商",
  595. form:1,
  596. width:200,
  597. labelSize:'80',
  598. rules:{ required: true, message: ' ', trigger: 'blur' },
  599. data:[],
  600. disabled:false
  601. },
  602. {
  603. index:'3',
  604. span:6,
  605. label: 'fStorekeeper',
  606. name:"库管员",
  607. form:1,
  608. width:200,
  609. labelSize:'80',
  610. rules:{ required: true, message: ' ', trigger: 'blur' },
  611. data:[],
  612. disabled:false
  613. },
  614. {
  615. index:'4',
  616. span:6,
  617. label: 'fPurchase',
  618. name:"采购人",
  619. form:1,
  620. width:200,
  621. labelSize:'80',
  622. rules:{ required: true, message: ' ', trigger: 'blur' },
  623. data:[],
  624. disabled:false
  625. },
  626. {
  627. index:'5',
  628. span:6,
  629. label: 'fWarehouseid',
  630. name:"仓库",
  631. form:1,
  632. width:200,
  633. labelSize:'80',
  634. rules:{ required: true, message: ' ', trigger: 'blur' },
  635. data:[],
  636. disabled:false
  637. }, {
  638. index:'6',
  639. span:6,
  640. label: 'fSbu',
  641. name:"开票公司",
  642. form:1,
  643. width:200,
  644. labelSize:'80',
  645. rules:{ required: true, message: ' ', trigger: 'blur' },
  646. data:[],
  647. disabled:false
  648. },
  649. {
  650. index:'7',
  651. span:6,
  652. label: 'fBsdate',
  653. name:"入库日期",
  654. form:3,
  655. width:200,
  656. labelSize:'80',
  657. rules:{ required: true, message: ' ', trigger: 'blur' },
  658. disabled:false
  659. },
  660. {
  661. index:'8',
  662. span:6,
  663. label: 'remark',
  664. name:"备注",
  665. form:4,
  666. width:200,
  667. labelSize:'80',
  668. rules:'',
  669. disabled:false
  670. },
  671. ],
  672. //按钮
  673. customButton:[
  674. {
  675. type:'primary',
  676. size:'mini',
  677. icon:'el-icon-plus',
  678. name:'新增',
  679. disabled:false,
  680. hasPermi:['anpin:stockControl:anPingApply']
  681. },{
  682. type:'success',
  683. size:'mini',
  684. icon:'el-icon-edit',
  685. name:'修改',
  686. res:0,
  687. disabled:true,
  688. hasPermi:['anpin:stockControl:anPingApply']
  689. },{
  690. type:'info',
  691. size:'mini',
  692. icon:'el-icon-plus',
  693. name:'复制新增',
  694. disabled:true,
  695. hasPermi:['anpin:stockControl:generateReceipts']
  696. },
  697. ],
  698. seachButton:[
  699. {
  700. type:'',
  701. size:'mini',
  702. icon:'el-icon-search',
  703. name:'搜索',
  704. disabled:false,
  705. },{
  706. type:'',
  707. size:'mini',
  708. icon:'el-icon-refresh',
  709. name:'重置',
  710. disabled:false,
  711. },{
  712. type:'',
  713. size:'mini',
  714. icon:'el-icon-arrow-up',
  715. name:'展开',
  716. disabled:false
  717. }
  718. ],
  719. detailButton:[
  720. {
  721. type:'danger',
  722. size:'mini',
  723. icon:'el-icon-refresh-left',
  724. name:'返回列表',
  725. disabled:false,
  726. },{
  727. type:'primary',
  728. size:'mini',
  729. icon:'el-icon-edit',
  730. name:'录入',
  731. disabled:false,
  732. },{
  733. type:'success',
  734. size:'mini',
  735. icon:'el-icon-check',
  736. name:'保存',
  737. disabled:false
  738. },{
  739. type:'info',
  740. size:'mini',
  741. icon:'el-icon-edit',
  742. name:'修改',
  743. disabled:false,
  744. res:1
  745. },{
  746. type:'info',
  747. size:'mini',
  748. icon:'el-icon-edit',
  749. name:'打印',
  750. disabled:false,
  751. res:1
  752. },{
  753. type:'info',
  754. size:'mini',
  755. icon:'el-icon-edit',
  756. name:'入库确认',
  757. disabled:false,
  758. res:1
  759. },
  760. {
  761. type:'warning',
  762. size:'mini',
  763. icon:'el-icon-refresh',
  764. name:'刷新',
  765. disabled:false,
  766. res:1
  767. }
  768. ],
  769. confirmButton:[
  770. {
  771. type:'cyan',
  772. size:'mini',
  773. icon:'',
  774. name:'打印',
  775. disabled:false,
  776. },{
  777. type:'info',
  778. size:'mini',
  779. icon:'',
  780. name:'入库确认',
  781. disabled:false
  782. }
  783. ]
  784. }
  785. },
  786. created() {
  787. let data = {
  788. tableName: this.queryList.tableName,
  789. userId: Cookies.get("userName"),
  790. };
  791. this.getRow(data)
  792. let list = {
  793. fBilltype:'RK'
  794. }
  795. this.query(list)
  796. this.getRow()
  797. this.getList()
  798. this.selectMethods()
  799. },
  800. methods:{
  801. change(scope){
  802. for(let item in this.detailData){
  803. for(let li in this.listData.fFeeid){
  804. if(this.detailData[item].fFeeid == this.listData.fFeeid[li].value){
  805. this.$set(this.detailData[item],'fFeeunitid',JSON.stringify(this.listData.fFeeid[li].fFeeunitid))
  806. this.$set(this.detailData[item],'fCurrencyName',this.listData.fFeeid[li].fCurrency)
  807. console.log(this.detailData)
  808. }
  809. }
  810. }
  811. },
  812. //确认打印
  813. Printing(){
  814. this.$print(this.$refs.print)
  815. },
  816. //查询主页列数据
  817. query(data){
  818. listQuery(data).then(res =>{
  819. this.tableData = res.rows
  820. })
  821. },
  822. //更换仓库
  823. changeWarehouse(){
  824. if(this.detailData.length != 0){
  825. for(let li in this.detailData){
  826. this.detailData[li].fWarehouseid = ''
  827. }
  828. }
  829. getArea(this.detailForm.fWarehouseid).then(res=>{
  830. this.listData.fWarehouseid = []
  831. for(let item in res.data){
  832. this.listData.fWarehouseid.push({
  833. label:res.data[item].fWarehouseInformation,
  834. value:res.data[item].id
  835. })
  836. }
  837. })
  838. },
  839. //自动合计金额
  840. totalAmount(){
  841. for(let li in this.detailData){
  842. if(this.detailData[li].fUnitprice && this.detailData[li].fQty){
  843. this.detailData[li].fAmount = (this.detailData[li].fUnitprice * this.detailData[li].fQty).toFixed(2)
  844. }
  845. }
  846. },
  847. //搜索、重置、展开
  848. feedback(res){
  849. if (res == '展开'){
  850. if (this.inDex == 4){
  851. this.inDex = this.formOption.length
  852. }else {
  853. this.inDex = 4
  854. }
  855. }else if (res == '搜索'){
  856. this.handleQuery()
  857. }else if (res == '重置'){
  858. this.resetQuery()
  859. }
  860. },
  861. selectMethods(){
  862. this.mainMethods()
  863. this.detailMethods()
  864. },
  865. //主页面下拉获取名称
  866. mainMethods(){
  867. for(let li in this.formOption){
  868. if(this.formOption[li].name == '仓库'){
  869. let queryParams = { pageNum: 1,}
  870. getwarehouse(queryParams).then(res=>{
  871. for(let item in res.rows){
  872. this.formOption[li].data.push({
  873. label:res.rows[item].fName,
  874. value:res.rows[item].fId
  875. })
  876. }
  877. })
  878. }
  879. else
  880. if(this.formOption[li].name == '供应商'){
  881. let queryParams = { pageNum: 1, fTypeid: 1}
  882. getustomer(queryParams).then(res => {
  883. for(let item in res.data){
  884. this.formOption[li].data.push({
  885. label:res.data[item].fName,
  886. value:res.data[item].fId
  887. })
  888. }
  889. })
  890. }
  891. }
  892. },
  893. //弹窗页获取下拉名称
  894. detailMethods(){
  895. for(let li in this.detailOption){
  896. if(this.detailOption[li].name == '仓库'){
  897. //获取仓库
  898. let queryParams = { pageNum: 1 }
  899. getwarehouse(queryParams).then(res=>{
  900. for(let item in res.rows){
  901. this.detailOption[li].data.push({
  902. label:res.rows[item].fName,
  903. value:res.rows[item].fId
  904. })
  905. }
  906. })
  907. }
  908. if(this.detailOption[li].name == '供应商'){
  909. //获取供应商
  910. let queryParams = { pageNum: 1, fTypeid: 1}
  911. getustomer(queryParams).then(res => {
  912. for(let item in res.data){
  913. this.detailOption[li].data.push({
  914. label:res.data[item].fName,
  915. value:res.data[item].fId
  916. })
  917. }
  918. })
  919. }
  920. if(this.detailOption[li].name == '开票公司'){
  921. //获取付款单位
  922. let queryParams = { pageNum: 1, fTypeid: 2}
  923. getustomer(queryParams).then(res => {
  924. console.log(res)
  925. for(let item in res.data){
  926. this.detailOption[li].data.push({
  927. label:res.data[item].fName,
  928. value:res.data[item].fId
  929. })
  930. }
  931. })
  932. }
  933. if(this.detailOption[li].name == '库管员'){
  934. let queryParams = { pageNum: 1,roleName:'库管'}
  935. getWarehousekeeper(queryParams).then(res=>{
  936. for(let item in res.rows){
  937. this.detailOption[li].data.push({
  938. label:res.rows[item].userName,
  939. value:res.rows[item].userId
  940. })
  941. }
  942. })
  943. }
  944. if(this.detailOption[li].name == '采购人'){
  945. getliable().then((res) => {
  946. console.log(res)
  947. for(let item in res.rows){
  948. this.detailOption[li].data.push({
  949. label:res.rows[item].userName,
  950. value:res.rows[item].userId
  951. })
  952. }
  953. })
  954. }
  955. }
  956. //获取计量单位字典表
  957. this.getDicts('data_unitfees').then((response) => {
  958. if (response.data) {
  959. for (let item in response.data) {
  960. this.listData.fFeeunitid.push({
  961. label: response.data[item].dictLabel,
  962. value: response.data[item].dictValue
  963. })
  964. }
  965. }
  966. })
  967. //获取浮点单位字典表
  968. this.getDicts('f_floatunit').then((response) => {
  969. if (response.data) {
  970. for (let item in response.data) {
  971. this.listData.fUnits.push({
  972. label: response.data[item].dictLabel,
  973. value: JSON.parse(response.data[item].dictValue)
  974. })
  975. }
  976. }
  977. })
  978. //获取存储环境字典表
  979. this.getDicts('f_StorageEnvironment').then((response) => {
  980. if (response.data) {
  981. for (let item in response.data) {
  982. this.listData.fStoreEnv.push({
  983. label: response.data[item].dictLabel,
  984. value: JSON.parse(response.data[item].dictValue)
  985. })
  986. }
  987. }
  988. })
  989. this.getDicts('f_evidence').then((response) => {
  990. if (response.data) {
  991. for (let item in response.data) {
  992. this.listData.fIsfilles.push({
  993. label: response.data[item].dictLabel,
  994. value: JSON.parse(response.data[item].dictValue)
  995. })
  996. }
  997. }
  998. })
  999. //获取品名
  1000. let queryParams = { pageNum: 1 }
  1001. getGoodName(queryParams).then(res=>{
  1002. for(let item in res.rows){
  1003. this.listData.fFeeid.push({
  1004. label:res.rows[item].fName,
  1005. value:res.rows[item].fId,
  1006. fFeeunitid: res.rows[item].fFeeunitid,
  1007. fCurrency: res.rows[item].fCurrency
  1008. })
  1009. }
  1010. })
  1011. //付费方式
  1012. this.getDicts('f_paymode').then((response) => {
  1013. if (response.data) {
  1014. for (let item in response.data) {
  1015. this.listData.fStltypeid.push({
  1016. label: response.data[item].dictLabel,
  1017. value: response.data[item].dictValue
  1018. })
  1019. }
  1020. }
  1021. })
  1022. },
  1023. handleQuery(){
  1024. this.$refs.MainForm.hide()
  1025. this.getList();
  1026. },
  1027. resetQuery(){
  1028. this.queryParms = {}
  1029. this.getList();
  1030. },
  1031. //查询列数据
  1032. getRow() {
  1033. let data = {
  1034. tableName: this.queryList.tableName,
  1035. userId: Cookies.get("userName"),
  1036. };
  1037. select(data).then((res) => {
  1038. if (data.tableName === '仓库入库详情') {
  1039. if (res.data.length != 0) {
  1040. this.detailList.columnList = res.data.filter((e) => e.checked == 0);
  1041. this.detailList.columnList = res.data;
  1042. this.setRowList = res.data
  1043. this.detailList.columnList = this.detailList.columnList.filter((e) => e.checked == 0);
  1044. // this.waitFor = true
  1045. }else {
  1046. // this.waitFor = true
  1047. this.detailList.columnList = this.detailStyle
  1048. this.setRowList = this.detailStyle
  1049. }
  1050. // this.pageDisplay = false
  1051. this.isItHidden = false
  1052. this.inDex = this.detailOption.length
  1053. }else {
  1054. if (res.data.length != 0) {
  1055. this.queryList.columnList = res.data.filter((e) => e.checked == 0);
  1056. this.queryList.columnList = res.data;
  1057. this.setRowList = res.data
  1058. this.queryList.columnList = this.queryList.columnList.filter((e) => e.checked == 0);
  1059. this.waitFor = true
  1060. }else {
  1061. this.waitFor = true
  1062. this.queryList.columnList = this.listStyle
  1063. this.setRowList = this.listStyle
  1064. }
  1065. // this.pageDisplay = true
  1066. this.isItHidden = true
  1067. this.inDex = 4
  1068. }
  1069. });
  1070. },
  1071. //选择框
  1072. selectionbox(selection){
  1073. this.selection = selection
  1074. this.ids = selection.map((item) => item.fId)
  1075. this.single = selection.length !== 1
  1076. for(let li in this.customButton){
  1077. if(this.customButton[li].name == '修改' || this.customButton[li].name == '复制新增'){
  1078. this.customButton[li].disabled = this.single
  1079. }
  1080. }
  1081. },
  1082. //查看
  1083. viewMethod(scope){
  1084. this.detailList.columnList = this.detailStyle
  1085. let fId = ''
  1086. if(scope){
  1087. fId = scope.row.fId
  1088. }else{
  1089. fId = this.ids
  1090. }
  1091. getSave(fId).then(res=>{
  1092. if(res.code == 200){
  1093. if(res.data.warehouseBills){
  1094. this.detailForm = res.data.warehouseBills
  1095. this.$set(this.detailForm,'fStorekeeper',JSON.parse(this.detailForm.fStorekeeper))
  1096. }
  1097. if(res.data.tWarehousebillsfees){
  1098. this.detailData = res.data.tWarehousebillsfees
  1099. for(let li in this.detailData){
  1100. this.$set(this.detailData[li],'fFeeunitid',JSON.stringify(this.detailData[li].fFeeunitid))
  1101. this.$set(this.detailData[li],'fStltypeid',JSON.stringify(this.detailData[li].fStltypeid))
  1102. }
  1103. }
  1104. }
  1105. for(let li in this.detailStyle){
  1106. this.detailStyle[li].disabled = true
  1107. }
  1108. for(let item in this.detailOption){
  1109. this.detailOption[item].disabled = true
  1110. }
  1111. for(let li in this.detailButton){
  1112. if(this.detailForm.fBillstatus == '6'){
  1113. if(this.detailButton[li].name == '返回列表'){
  1114. this.detailButton[li].disabled = false
  1115. }else {
  1116. this.detailButton[li].disabled = true
  1117. }
  1118. } else {
  1119. if(this.detailButton[li].name == '返回列表' || this.detailButton[li].name == '修改'){
  1120. this.detailButton[li].disabled = false
  1121. }else{
  1122. this.detailButton[li].disabled = true
  1123. }
  1124. }
  1125. }
  1126. getArea(this.detailForm.fWarehouseid).then(res=>{
  1127. if(res.code == 200){
  1128. this.listData.fWarehouseid = []
  1129. for(let item in res.data){
  1130. this.listData.fWarehouseid.push({
  1131. label:res.data[item].fWarehouseInformation,
  1132. value:res.data[item].id
  1133. })
  1134. }
  1135. }
  1136. })
  1137. this.MainTable = true
  1138. this.inDex = this.detailOption.length
  1139. })
  1140. },
  1141. //修改
  1142. modification(scope){
  1143. },
  1144. //删除
  1145. deletion(scope){
  1146. const fIds = scope.row.fId || this.ids;
  1147. let tips = "";
  1148. deletMain(fIds).then(res=>{
  1149. switch (res.msg) {
  1150. case "0": {
  1151. this.$message.error("当前数据已被其他操作员操作,请刷新页面");
  1152. break;
  1153. }
  1154. case "1": {
  1155. tips = "当前主表有数据,确认是否删除?";
  1156. this.delete_s(fIds, tips);
  1157. break;
  1158. }
  1159. case "2": {
  1160. tips = "当前主表有数据,从表有数据,确认是否删除?";
  1161. this.delete_s(fIds, tips);
  1162. break;
  1163. }
  1164. default: {
  1165. return this.$message.error("未知错误,无状态");
  1166. }
  1167. }
  1168. })
  1169. },
  1170. delete_s(fIds, tips) {
  1171. this.$confirm(tips, "警告", {
  1172. confirmButtonText: "确定",
  1173. cancelButtonText: "取消",
  1174. type: "warning",
  1175. })
  1176. .then(function () {
  1177. return delFee(fIds);
  1178. })
  1179. .then(() => {
  1180. this.getList();
  1181. this.msgSuccess("删除成功");
  1182. });
  1183. },
  1184. //删除从表行
  1185. deletRows(index,rows){
  1186. if(rows[index].fId){
  1187. let formData = {
  1188. fId:this.detailForm.fId,
  1189. fDateChanged:this.detailForm.fDateChanged
  1190. }
  1191. canBedelet(formData).then(res=>{
  1192. return delRows(rows[index].fId)
  1193. })
  1194. .then(()=>{
  1195. getSave(this.detailForm.fId).then(res=>{
  1196. if(res.code == 200){
  1197. if(res.data.warehouseBills){
  1198. this.detailForm = res.data.warehouseBills
  1199. this.$set(this.detailForm,'fStorekeeper',JSON.parse(this.detailForm.fStorekeeper))
  1200. }
  1201. if(res.data.tWarehousebillsfees){
  1202. this.detailData = res.data.tWarehousebillsfees
  1203. for(let li in this.detailData){
  1204. this.$set(this.detailData[li],'fFeeunitid',JSON.stringify(this.detailData[li].fFeeunitid))
  1205. this.$set(this.detailData[li],'fStltypeid',JSON.stringify(this.detailData[li].fStltypeid))
  1206. }
  1207. }
  1208. this.msgSuccess("删除成功");
  1209. }
  1210. })
  1211. })
  1212. .catch(res=>{
  1213. this.$message.error(res)
  1214. })
  1215. }else {
  1216. rows.splice(index, 1)
  1217. }
  1218. },
  1219. //必填项新行
  1220. verificationRules(valid){
  1221. if(valid){
  1222. this.detailData.push({
  1223. serialNumber:null,
  1224. fFeeid:null,
  1225. fUnitprice:null,
  1226. fQty:null,
  1227. fFeeunitid:null,
  1228. fWarehouseid:null,
  1229. fAmount:null,
  1230. fStltypeid:'1',
  1231. tProductdate:null,
  1232. fLotno:null,
  1233. fValid:null,
  1234. fUnits:null,
  1235. fStoreEnv:null,
  1236. fIsfilles:0,
  1237. remark:null,
  1238. fReviewDate:null,
  1239. createBy:null,
  1240. })
  1241. }
  1242. },
  1243. //返回列表是否保存
  1244. backRules(){
  1245. for(let li in this.detailOption) {
  1246. if(this.detailOption[li].name == '供应商'){
  1247. if(this.detailOption[li].disabled == true){
  1248. this.getList();
  1249. this.MainTable = false
  1250. } else {
  1251. this.$confirm("返回列表,是否保存?", "提示", {
  1252. confirmButtonText: "保存",
  1253. cancelButtonText: "取消",
  1254. type: "warning",
  1255. }).then(() => {
  1256. this.$refs.detailForm.saveRules('1')
  1257. }).catch(() => {
  1258. this.inDex = 4
  1259. this.MainTable = false
  1260. this.getList();
  1261. });
  1262. }
  1263. }
  1264. }
  1265. },
  1266. backSave(valid,i){
  1267. if(valid){
  1268. this.detailForm.fMoney = 0
  1269. for(let li in this.detailData){
  1270. if(this.detailData[li]){
  1271. this.detailForm.fMoney += Number(this.detailData[li].fAmount)
  1272. }
  1273. }
  1274. let formData = new window.FormData();
  1275. formData.append('tWarehousebills', JSON.stringify(this.detailForm))
  1276. formData.append('tWarehousebillsfees', JSON.stringify(this.detailData))
  1277. formData.append('fBilltype', 'RK')
  1278. addSave(formData).then(res=>{
  1279. if(res.code == 200){
  1280. this.detailForm = res.data.warehouseBills
  1281. this.$set(this.detailForm,'fStorekeeper',JSON.parse(this.detailForm.fStorekeeper))
  1282. this.detailData = res.data.tWarehousebillsCntrs
  1283. for(let li in this.detailData){
  1284. this.$set(this.detailData[li],'fFeeunitid',JSON.stringify(this.detailData[li].fFeeunitid))
  1285. this.$set(this.detailData[li],'fStltypeid',JSON.stringify(this.detailData[li].fStltypeid))
  1286. }
  1287. this.$message.success("操作成功")
  1288. this.getList();
  1289. if(i == 1){
  1290. this.MainTable = false
  1291. this.inDex = 4
  1292. }
  1293. }
  1294. })
  1295. }
  1296. },
  1297. //所以按钮
  1298. buttonList(row){
  1299. switch (row.name) {
  1300. case '新增':
  1301. this.detailList.columnList = this.detailStyle
  1302. this.detailForm = {}
  1303. this.detailData = []
  1304. this.inDex = this.detailOption.length
  1305. //从表修改按钮
  1306. for(let li in this.detailStyle){
  1307. if(!this.detailStyle[li].doNot){
  1308. this.detailStyle[li].disabled = false
  1309. }
  1310. }
  1311. for(let item in this.detailOption){
  1312. if(!this.detailOption[item].doNot){
  1313. this.detailOption[item].disabled = false
  1314. }
  1315. }
  1316. for(let li in this.detailButton){
  1317. this.detailButton[li].disabled = false
  1318. }
  1319. this.MainTable = true
  1320. break
  1321. case '录入':
  1322. this.$refs.detailForm.rules()
  1323. break
  1324. case '返回列表':
  1325. this.backRules()
  1326. break
  1327. case '保存':
  1328. this.$refs.detailForm.saveRules()
  1329. break
  1330. case '入库确认':
  1331. console.log(this.detailData)
  1332. if(this.detailData.length == 0){
  1333. this.$message.error("请维护明细")
  1334. }else{
  1335. for(let item in this.detailData) {
  1336. let num = Number(item) + 1
  1337. if(!this.detailData[item].fQty){
  1338. this.$message.error("请维护第" + num + "数量")
  1339. return false
  1340. }
  1341. if (!this.detailData[item].fWarehouseid) {
  1342. this.$message.error("请维护第" + num + "行库区")
  1343. return false
  1344. }
  1345. }
  1346. this.detailForm.fMoney = 0
  1347. for(let li in this.detailData){
  1348. if(this.detailData[li]){
  1349. this.detailForm.fMoney += Number(this.detailData[li].fAmount)
  1350. }
  1351. }
  1352. let formData = new window.FormData();
  1353. formData.append('tWarehousebills', JSON.stringify(this.detailForm))
  1354. formData.append('tWarehousebillsfees', JSON.stringify(this.detailData))
  1355. formData.append('fBilltype', 'RK')
  1356. addWarehous(formData).then(res=>{
  1357. if(res.data.warehouseBills){
  1358. this.detailForm = res.data.warehouseBills
  1359. this.$set(this.detailForm,'fStorekeeper',JSON.parse(this.detailForm.fStorekeeper))
  1360. }
  1361. if(res.data.tWarehousebillsCntrs){
  1362. this.detailData = res.data.tWarehousebillsCntrs
  1363. for(let li in this.detailData){
  1364. this.$set(this.detailData[li],'fFeeunitid',JSON.stringify(this.detailData[li].fFeeunitid))
  1365. this.$set(this.detailData[li],'fStltypeid',JSON.stringify(this.detailData[li].fStltypeid))
  1366. }
  1367. }
  1368. this.$message.success("操作成功")
  1369. for(let li in this.detailStyle){
  1370. this.detailStyle[li].disabled = true
  1371. }
  1372. for(let item in this.detailOption){
  1373. this.detailOption[item].disabled = true
  1374. }
  1375. for(let li in this.detailButton) {
  1376. if (this.detailButton[li].name == '返回列表') {
  1377. this.detailButton[li].disabled = false
  1378. }else{
  1379. this.detailButton[li].disabled = true
  1380. }
  1381. }
  1382. })
  1383. }
  1384. break
  1385. case '刷新':
  1386. if(this.detailForm.fId){
  1387. getSave(this.detailForm.fId).then(res=>{
  1388. if(res.data.warehouseBills){
  1389. this.detailForm = res.data.warehouseBills
  1390. this.$set(this.detailForm,'fStorekeeper',JSON.parse(this.detailForm.fStorekeeper))
  1391. }
  1392. if(res.data.tWarehousebillsfees){
  1393. this.detailData = res.data.tWarehousebillsfees
  1394. for(let li in this.detailData){
  1395. this.$set(this.detailData[li],'fFeeunitid',JSON.stringify(this.detailData[li].fFeeunitid))
  1396. this.$set(this.detailData[li],'fStltypeid',JSON.stringify(this.detailData[li].fStltypeid))
  1397. }
  1398. }
  1399. })
  1400. }
  1401. break
  1402. case '复制新增':
  1403. let formDate = {
  1404. fBilltype:'RK',
  1405. fId:this.selection[0].fId
  1406. }
  1407. copyNew(formDate).then(res=>{
  1408. this.$message.success("操作成功")
  1409. this.getList()
  1410. })
  1411. break
  1412. case '打印':
  1413. this.formList = this.detailForm
  1414. this.dialogVisible = true
  1415. break
  1416. }
  1417. if(row.name == '修改' && row.res == '0'){
  1418. this.viewMethod()
  1419. }
  1420. if(row.res === 1){
  1421. //从表修改按钮
  1422. for(let li in this.detailStyle){
  1423. if(!this.detailStyle[li].doNot){
  1424. this.detailStyle[li].disabled = false
  1425. }
  1426. }
  1427. for(let item in this.detailOption){
  1428. if(!this.detailOption[item].doNot){
  1429. this.detailOption[item].disabled = false
  1430. }
  1431. }
  1432. for(let li in this.detailButton){
  1433. this.detailButton[li].disabled = false
  1434. }
  1435. }
  1436. },
  1437. // 显示搜索条件、点击后会调用此方法
  1438. showSearch(){
  1439. this.getList()
  1440. },
  1441. //点击刷新会调用此方法
  1442. getList(){
  1443. this.queryParms.fBilltype = 'RK'
  1444. listInStock(this.queryParms).then(res=>{
  1445. this.tableData = res.rows
  1446. this.total = res.total
  1447. })
  1448. },
  1449. }
  1450. }
  1451. </script>
  1452. <style scoped lang="scss">
  1453. .app-container ::v-deep .el-form-item {
  1454. margin-bottom: 4px;
  1455. }
  1456. </style>