warehouseManagementPerfectput.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. // 完善入库信息
  2. <template>
  3. <div class="container">
  4. <el-row>
  5. <el-col :span="20">
  6. <h2 class="bg-left title">完善入库登记</h2>
  7. </el-col>
  8. <el-col :span="4" class="bg-right">
  9. <el-button
  10. class="bg-bottom"
  11. type="primary"
  12. size="small"
  13. @click="revert()"
  14. ><img
  15. width="6"
  16. height="10"
  17. style="vertical-align: bottom; margin-right: 3px"
  18. src="../../../public/img/lujing.png"
  19. alt=""
  20. />返回</el-button
  21. >
  22. </el-col>
  23. </el-row>
  24. <ws-form ref="deptBudgetList" :model="deptBudgetList" :rules="rules">
  25. <div class="basicInformation">
  26. <h2>
  27. {{ deptBudgetList1.warehouseName }}库
  28. <span class="position"> {{ deptBudgetList1.binNumber }}仓位 </span>
  29. </h2>
  30. <div class="small-title">基本信息</div>
  31. <ws-info-table>
  32. <!-- 货名 -->
  33. <ws-form-item label="货名" span="1">
  34. <ws-select
  35. v-model="deptBudgetList.goodsName"
  36. placeholder=""
  37. class="typeselect"
  38. @change="selectgoodsName"
  39. >
  40. <ws-option
  41. v-for="item in goodnameList"
  42. :key="item.constKey"
  43. :label="item.constValue"
  44. :value="item.constValue"
  45. />
  46. </ws-select>
  47. </ws-form-item>
  48. <!--毛重(吨)-->
  49. <ws-form-item label="毛重(吨)" span="1" prop="grossWeight">
  50. <ws-input
  51. @input="grossWeightchange"
  52. v-model="deptBudgetList.grossWeight"
  53. placeholder="请输入毛重"
  54. maxlength="20"
  55. size="small"
  56. />
  57. </ws-form-item>
  58. <!--皮重(吨)-->
  59. <ws-form-item
  60. label="皮重(吨)"
  61. span="1"
  62. prop="tare"
  63. class="readonly"
  64. >
  65. <ws-input
  66. @input="tarechange"
  67. v-model="deptBudgetList.tare"
  68. placeholder="请输入皮重"
  69. maxlength="100"
  70. size="small"
  71. />
  72. </ws-form-item>
  73. <!--净重(吨)-->
  74. <ws-form-item label="净重(吨)" span="1" prop="netWeight">
  75. <ws-input
  76. v-model.number="deptBudgetList.netWeight"
  77. placeholder="不可编辑,自动计算"
  78. type="number"
  79. maxlength="120"
  80. size="small"
  81. />
  82. </ws-form-item>
  83. <!-- 品级 -->
  84. <ws-form-item label="品级" span="1" class="readonly">
  85. <ws-select
  86. v-model="deptBudgetList.grade"
  87. placeholder=""
  88. class="typeselect"
  89. @change="selectpackingMethod"
  90. >
  91. <ws-option
  92. v-for="item in gradeList"
  93. :key="item.constKey"
  94. :label="item.constValue"
  95. :value="item.constValue"
  96. />
  97. </ws-select>
  98. </ws-form-item>
  99. <!--经办人-->
  100. <ws-form-item label="经办人" span="1" prop="agent">
  101. <ws-input
  102. v-model="deptBudgetList.agent"
  103. placeholder="请输入出库经办人姓名"
  104. maxlength="100"
  105. size="small"
  106. />
  107. </ws-form-item>
  108. <!--出库日期-->
  109. <ws-form-item
  110. label="出库日期"
  111. span="1"
  112. prop="inOutDate"
  113. class="deliverydate"
  114. >
  115. <ws-date-picker
  116. v-model="deptBudgetList.inOutDate"
  117. type="date"
  118. placeholder="请选择出库日期"
  119. value-format="yyyy-MM-dd"
  120. />
  121. </ws-form-item>
  122. <!-- 入库类型 -->
  123. <ws-form-item label="出库类型" span="1">
  124. <ws-select
  125. v-model="deptBudgetList.inOutType"
  126. placeholder=""
  127. class="typeselect"
  128. @change="selectstorageType"
  129. >
  130. <ws-option
  131. v-for="item in storageType"
  132. :key="item.constKey"
  133. :label="item.constValue"
  134. :value="item.constValue"
  135. />
  136. </ws-select>
  137. </ws-form-item>
  138. <!--车牌号-->
  139. <ws-form-item label="车牌号" span="1" prop="sourceGoods">
  140. <ws-input
  141. v-model="deptBudgetList.carNo"
  142. placeholder="请输入车牌号"
  143. maxlength="20"
  144. size="small"
  145. />
  146. </ws-form-item>
  147. <!--合同编号-->
  148. <ws-form-item label="合同编号" span="1" prop="contractNo">
  149. <ws-input
  150. v-model="deptBudgetList.contractNo"
  151. placeholder="请输入合同编号"
  152. maxlength="100"
  153. size="small"
  154. />
  155. </ws-form-item>
  156. </ws-info-table>
  157. </div>
  158. <div class="small-title">上传仓库照片</div>
  159. <ws-upload
  160. ref="upload"
  161. table-name="maintain_work_order"
  162. oss-key="mainPlan"
  163. :comp-id="compId"
  164. :appendix-ids="appendixIdsAdd"
  165. :vesselId="deptBudgetList.addressUrl"
  166. :size-limit="size"
  167. @uploadSuccess="uploadSuccess"
  168. @onChange="onChange"
  169. accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar"
  170. />
  171. <div class="small-title">化验数据(选填)</div>
  172. <div class="inspector">
  173. <!--自检员-->
  174. <ws-form-item label="质检员" span="1" prop="qualityInspector">
  175. <ws-input
  176. v-model="deptBudgetList.warehouseInOutDetail.qualityInspector"
  177. placeholder="请输入质检员姓名"
  178. maxlength="120"
  179. size="small"
  180. />
  181. </ws-form-item>
  182. </div>
  183. <div class="neifor">
  184. <ws-info-table>
  185. <!--水分(%)<=-->
  186. <ws-form-item label="水分(%)<=" span="1" prop="waterContent">
  187. <ws-input
  188. v-model="deptBudgetList.warehouseInOutDetail.waterContent"
  189. placeholder="请输入水分占比"
  190. maxlength="120"
  191. size="small"
  192. />
  193. </ws-form-item>
  194. <!--杂质(%)<=-->
  195. <ws-form-item label="杂质(%)<=" span="1" prop="impurity">
  196. <ws-input
  197. v-model="deptBudgetList.warehouseInOutDetail.impurity"
  198. placeholder="请输入杂质占比"
  199. maxlength="120"
  200. size="small"
  201. />
  202. </ws-form-item>
  203. <!--容重(克/升)>=-->
  204. <ws-form-item label="容重(克/升)>=" span="1" prop="bulkDensity">
  205. <ws-input
  206. v-model="deptBudgetList.warehouseInOutDetail.bulkDensity"
  207. placeholder="请输入容重"
  208. maxlength="120"
  209. size="small"
  210. />
  211. </ws-form-item>
  212. <!--霉变粒(%)<=-->
  213. <ws-form-item label="霉变粒(%)<=" span="1" prop="mildewGrain">
  214. <ws-input
  215. v-model="deptBudgetList.warehouseInOutDetail.mildewGrain"
  216. placeholder="请输入霉变粒占比"
  217. maxlength="120"
  218. size="small"
  219. />
  220. </ws-form-item>
  221. <!--热损伤(%)<=-->
  222. <ws-form-item label="热损伤(%)<=" span="1" prop="jiaorenli">
  223. <ws-input
  224. v-model="deptBudgetList.warehouseInOutDetail.jiaorenli"
  225. placeholder="请输入热损伤占比"
  226. maxlength="120"
  227. size="small"
  228. />
  229. </ws-form-item>
  230. <!--不完整粒(%)<=-->
  231. <ws-form-item label="不完整粒(%)<=" span="1" prop="imperfectGrain">
  232. <ws-input
  233. v-model="deptBudgetList.warehouseInOutDetail.imperfectGrain"
  234. placeholder="请输入不完整粒占比"
  235. maxlength="120"
  236. size="small"
  237. />
  238. </ws-form-item>
  239. </ws-info-table>
  240. </div>
  241. <div style="text-align: right; padding: 10px">
  242. <el-button
  243. class="bg-bottom-up"
  244. type="primary"
  245. size="small"
  246. @click="temporaryStorage()"
  247. >暂存</el-button
  248. >
  249. <el-button
  250. class="bg-bottom-up"
  251. type="primary"
  252. size="small"
  253. @click="submit()"
  254. >提交</el-button
  255. >
  256. </div>
  257. </ws-form>
  258. </div>
  259. </template>
  260. <script>
  261. import { pullDown, addstorageputList } from '@/model/warehouse/index'
  262. import { downloadFile } from '@/utils/batchDown'
  263. import Pagination from '@/components/Pagination'
  264. import WsUpload from '@/components/WsUpload'
  265. // import { dayjs, fmoney, EventBus } from 'base-core-lib'
  266. import { dayjs, EventBus } from 'base-core-lib'
  267. export default {
  268. name: 'viewSpareMoney',
  269. components: {
  270. WsUpload,
  271. Pagination,
  272. },
  273. watch: {
  274. // vesselId(val) {
  275. // this.getList()
  276. // },
  277. isShow(val) {
  278. this.showType = val
  279. },
  280. },
  281. data() {
  282. return {
  283. //弹出框
  284. dialogViewSpareMoney: false,
  285. dialogApproveFormVisible: false,
  286. // 船舶类型
  287. monetaryKey: null,
  288. // 表格显示数据
  289. tableDate: [],
  290. // 是否显示
  291. showType: true,
  292. // 年
  293. year: '',
  294. deptBudgetTotal: 0,
  295. currentPage: 1,
  296. pageSize: 10,
  297. searchType: 1,
  298. searchKeyWord: '',
  299. contractType: 2,
  300. startDate: null,
  301. endDate: null,
  302. goodnameList: {},
  303. // 提交类型
  304. submitType: true,
  305. storageType: [],
  306. appendixIdsAdd: '',
  307. uploadSuccess: {},
  308. onChange: {},
  309. deptBudgetList1: [],
  310. gradeList: [],
  311. rules: {
  312. netWeight: [
  313. {
  314. required: true,
  315. type: 'number',
  316. message: '请输入活动名称',
  317. trigger: 'blur',
  318. },
  319. ],
  320. },
  321. size: 10,
  322. compId: sessionStorage.getItem('ws-pf_compId'),
  323. deptCircularPage: {},
  324. packtypeList: {},
  325. date: {
  326. year: dayjs().format('YYYY'),
  327. month: dayjs().format('MM'),
  328. },
  329. contractList: [],
  330. deptBudgetList: {
  331. warehouseInOutDetail: {},
  332. },
  333. historyList: [],
  334. pickerBeginDateBefore: {
  335. disabledDate: (time) => {
  336. return time.getTime() > Date.now()
  337. },
  338. },
  339. accessoryTFs: false,
  340. }
  341. },
  342. mounted() {
  343. console.log(this.$route.query)
  344. this.deptBudgetList.baseId = this.$route.query.baseId
  345. this.deptBudgetList.positionId = this.$route.query.positionId
  346. this.deptBudgetList1.warehouseName = this.$route.query.warehouseName
  347. this.deptBudgetList1.binNumber = this.$route.query.binNumber
  348. this.getList()
  349. this.deptBudgetList.goodsName= this.$route.query.goodsName
  350. this.deptBudgetList.grossWeight = this.$route.query.grossWeight
  351. this.deptBudgetList.tare = this.$route.query.tare
  352. this.deptBudgetList.netWeight = this.$route.query.netWeight
  353. this.deptBudgetList.grade = this.$route.query.grade
  354. this.deptBudgetList.agent = this.$route.query.agent
  355. this.deptBudgetList.carNo = this.$route.query.carNo
  356. this.deptBudgetList.inOutDate = this.$route.query.inOutDate
  357. this.deptBudgetList.contractNo = this.$route.query.contractNo
  358. this.deptBudgetList.inOutType = this.$route.query.inOutType
  359. },
  360. methods: {
  361. //返回按钮
  362. revert() {
  363. this.$router.push({ path: 'warehouseManagementNoComplete' })
  364. },
  365. //暂存按钮
  366. temporaryStorage() {
  367. this.$confirm(`暂存后可在待完成页面查看,确定暂存`, {
  368. cancelButtonText: '取消',
  369. confirmButtonText: '确定',
  370. type: 'warning',
  371. })
  372. .then(() => {
  373. this.$refs.deptBudgetList.validate((valid) => {
  374. if (valid) {
  375. this.deptBudgetList.compId = sessionStorage.getItem(
  376. 'ws-pf_compId'
  377. )
  378. this.deptBudgetList.inOutFlag = 1
  379. this.deptBudgetList.statusFlag = 1
  380. addstorageputList(this.deptBudgetList)
  381. .toPromise()
  382. .then((response) => {
  383. this.$message.success('暂存成功')
  384. this.deptBudgetList=response
  385. this.$router.push({ path: 'warehouseManagementList' })
  386. })
  387. } else {
  388. EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  389. return false
  390. }
  391. })
  392. })
  393. .catch(() => {
  394. return false
  395. })
  396. },
  397. //提交按钮
  398. submit() {
  399. if (
  400. this.deptBudgetList.warehouseInOutDetail.qualityInspector.length < 2 ||
  401. deptBudgetList.warehouseInOutDetail.qualityInspector > 10
  402. ) {
  403. this.$message({
  404. message: '质检员姓名长度错误!',
  405. type: 'warning',
  406. })
  407. return
  408. }
  409. if (
  410. this.deptBudgetList.warehouseInOutDetail.qualityInspector.length < 2 ||
  411. deptBudgetList.warehouseInOutDetail.qualityInspector > 10
  412. ) {
  413. this.$message({
  414. message: '质检员姓名长度错误!',
  415. type: 'warning',
  416. })
  417. return
  418. }
  419. this.$refs.deptBudgetList.validate((valid) => {
  420. if (valid) {
  421. this.deptBudgetList.compId = sessionStorage.getItem('ws-pf_compId')
  422. this.deptBudgetList.inOutFlag = 1
  423. this.deptBudgetList.statusFlag = 3
  424. addstorageputList(this.deptBudgetList)
  425. .toPromise()
  426. .then((response) => {
  427. this.$message.success('添加成功')
  428. this.$router.push({ path: 'warehouseManagementList' })
  429. })
  430. } else {
  431. EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  432. return false
  433. }
  434. })
  435. },
  436. //暂存按钮
  437. returnWarehouse() {
  438. this.$refs.deptBudgetList.validate((valid) => {
  439. if (valid) {
  440. this.deptBudgetList.compId = sessionStorage.getItem('ws-pf_compId')
  441. this.deptBudgetList.statusFlag = 1
  442. addstorageputList(this.deptBudgetList)
  443. .toPromise()
  444. .then((response) => {
  445. this.$message.success('添加成功')
  446. this.$router.push({ path: 'warehouseManagementList' })
  447. })
  448. } else {
  449. EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
  450. return false
  451. }
  452. })
  453. },
  454. tarechange(e) {
  455. if (this.deptBudgetList.grossWeight && this.deptBudgetList.tare) {
  456. this.deptBudgetList.netWeight = Number(
  457. this.deptBudgetList.grossWeight - this.deptBudgetList.tare
  458. )
  459. }
  460. },
  461. grossWeightchange(e) {
  462. if (this.deptBudgetList.grossWeight && this.deptBudgetList.tare) {
  463. this.deptBudgetList.netWeight = Number(
  464. this.deptBudgetList.grossWeight - this.deptBudgetList.tare
  465. )
  466. }
  467. },
  468. selectgoodsName(e) {
  469. for (var i = 0; i < this.goodnameList.length; i++) {
  470. if (this.goodnameList[i].constValue == e) {
  471. this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
  472. }
  473. }
  474. },
  475. selectpackingMethod(e) {
  476. for (var i = 0; i < this.packtypeList.length; i++) {
  477. if (this.packtypeList[i].constValue == e) {
  478. this.deptBudgetList.packingMethodKey = this.packtypeList[i].constKey
  479. }
  480. }
  481. },
  482. selectstorageType(e) {
  483. for (var i = 0; i < this.storageType.length; i++) {
  484. if (this.storageType[i].constValue == e) {
  485. this.deptBudgetList.inOutTypeKey = this.storageType[i].constKey
  486. }
  487. }
  488. },
  489. handleClose() {
  490. this.accessoryTFs = false
  491. },
  492. handleSizeChange(val) {
  493. console.log(`每页 ${val} 条`)
  494. this.pageSize = val
  495. this.getList()
  496. },
  497. handleCurrentChange(val) {
  498. this.currentPage = val
  499. console.log(`当前页: ${val}`)
  500. this.getList()
  501. },
  502. getList() {
  503. // 货名
  504. pullDown({ constId: 'CON2' })
  505. .toPromise()
  506. .then((response) => {
  507. this.goodnameList = response
  508. })
  509. // 品级
  510. pullDown({ constId: 'CON3' })
  511. .toPromise()
  512. .then((response) => {
  513. this.gradeList = response
  514. })
  515. // 类型
  516. pullDown({ constId: 'CON5' })
  517. .toPromise()
  518. .then((response) => {
  519. this.storageType = response
  520. })
  521. },
  522. selecttaskType(e) {
  523. for (var i = 0; i < this.taskTypeList.length; i++) {
  524. if (this.taskTypeList[i].value == e) {
  525. this.searchType = this.taskTypeList[i].type
  526. }
  527. }
  528. },
  529. fujian(row) {
  530. if (
  531. row.receiveAttachmentPath === null ||
  532. row.receiveAttachmentPath === ''
  533. ) {
  534. EventBus.$emit(
  535. 'warning',
  536. this.$t('system.noticeCircular.NoInformation')
  537. )
  538. } else {
  539. this.accessoryTFs = true
  540. }
  541. this.appendixIdss = row.receiveAttachmentPath
  542. },
  543. handleExamine(row) {
  544. this.$router.push({
  545. name: 'salesContractExamine',
  546. query: { id: row.id },
  547. })
  548. },
  549. // 关闭 dialog时 处理文件url 初始化upload组件
  550. handleCloe() {
  551. this.dialogViewSpareMoney = false
  552. },
  553. history(row) {
  554. console.log(row)
  555. billoperatehis({ id: row.id })
  556. .toPromise()
  557. .then((response) => {
  558. this.historyList = response
  559. })
  560. },
  561. async exportlist() {
  562. const { data } = await export1(
  563. {
  564. compId: sessionStorage.getItem('ws-pf_compId'),
  565. contractType: this.contractType,
  566. currentPage: this.currentPage,
  567. pageSize: this.pageSize,
  568. searchType: this.searchType,
  569. searchKeyWord: this.searchKeyWord,
  570. startDate: this.startDate,
  571. endDate: this.endDate,
  572. },
  573. {},
  574. { responseType: 'blob' }
  575. ).toPromise()
  576. downloadFile({
  577. res: data,
  578. fileName: `${
  579. this.date.year + (this.date.month ? `-${this.date.month}` : '')
  580. }_采购合同`,
  581. type: 'xls',
  582. })
  583. },
  584. // deletecontract(){},
  585. //删除
  586. approve() {},
  587. listQuery() {},
  588. total() {},
  589. clearfiltQuery() {},
  590. selectCrtDuty() {},
  591. },
  592. }
  593. </script>
  594. <style lang="scss" scoped>
  595. /deep/.basicInformation {
  596. .ws-info-table {
  597. border: none;
  598. }
  599. .el-form-item {
  600. width: 33.3333%;
  601. border: none;
  602. .el-form-item__label {
  603. background: transparent;
  604. border: none;
  605. }
  606. .el-form-item__content {
  607. border: none;
  608. }
  609. }
  610. }
  611. .title {
  612. position: relative;
  613. padding-left: 10px;
  614. }
  615. .title::before {
  616. content: '';
  617. display: inline-block;
  618. width: 5px;
  619. height: 30px;
  620. background: #5473e8;
  621. position: absolute;
  622. left: 0;
  623. }
  624. .el-form {
  625. padding: 0 10%;
  626. }
  627. .el-button--primary {
  628. background-color: #5878e8;
  629. border-color: #5878e8;
  630. }
  631. .el-col {
  632. background: #f6f7fc;
  633. }
  634. .bg-right {
  635. text-align: right;
  636. padding: 16px 20px;
  637. }
  638. .center {
  639. position: relative;
  640. top: 50px;
  641. width: 40%;
  642. height: 2000px;
  643. margin: 0 auto;
  644. }
  645. /deep/.el-form-item__label {
  646. width: 160px;
  647. }
  648. //选填
  649. /deep/.el-form-item {
  650. width: 50%;
  651. }
  652. .container {
  653. overflow: scroll;
  654. height: 120vh;
  655. }
  656. /deep/.ws-info-table .el-form-item .el-form-item__label {
  657. text-align: center;
  658. }
  659. .deliverydate {
  660. display: inline-block;
  661. width: 10%;
  662. }
  663. .center {
  664. margin-top: -60px;
  665. width: 80%;
  666. }
  667. //仓位
  668. .position {
  669. width: 52px;
  670. height: 20px;
  671. background: #afb5cb;
  672. border-radius: 2px;
  673. font-size: 12px;
  674. font-family: PingFangSC-Medium, PingFang SC;
  675. color: #ffffff;
  676. line-height: 20px;
  677. }
  678. //表格文字
  679. /deep/.ws-info-table .el-form-item .el-form-item__label {
  680. text-align: left;
  681. font-size: 14px;
  682. font-family: PingFangSC-Regular, PingFang SC;
  683. font-weight: 400;
  684. color: #8890b1;
  685. line-height: 16px;
  686. }
  687. //质检员
  688. .inspector .el-form-item__content {
  689. text-align: left;
  690. margin-left: 0px;
  691. }
  692. .small-title {
  693. position: relative;
  694. padding: 10px;
  695. font-weight: 600;
  696. }
  697. .small-title::before {
  698. position: absolute;
  699. content: '';
  700. display: block;
  701. background: #5473e8;
  702. width: 4px;
  703. height: 14px;
  704. left: 0px;
  705. top: 13px;
  706. }
  707. //下面列表
  708. .neifor {
  709. width: 80%;
  710. background-color: #f6f7fc;
  711. }
  712. /deep/.neifor .ws-info-table .el-form-item .el-form-item__label {
  713. width: 35%;
  714. text-align: center;
  715. }
  716. /deep/.neifor .ws-info-table .el-form-item .el-form-item__content {
  717. width: 60%;
  718. background-color: #f6f7fc;
  719. }
  720. /deep/.neifor .el-input--small .el-input__inner {
  721. width: 120%;
  722. }
  723. .el-input__inner {
  724. width: 150px;
  725. }
  726. </style>