index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. <script>
  2. import useColumns from "./columns";
  3. import {
  4. addReq,
  5. getReqDetail,
  6. editReq,
  7. saveAndToOa,
  8. betchSubmit,
  9. } from "@/api/requisition/basic";
  10. import { REFER } from "@/components/popover-select/api/index";
  11. export default {
  12. name: "AddRequsition",
  13. props: {
  14. dict: {
  15. type: [Object, Array],
  16. },
  17. addType: {
  18. type: String,
  19. default: "add",
  20. },
  21. },
  22. components: {
  23. ElSuperForm: () => import("@/components/super-form/index.vue"),
  24. ElSuperTable: () => import("@/components/super-table/index.vue"),
  25. ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
  26. ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  27. ElPopoverTreeSelect: () =>
  28. import("@/components/popover-tree-select/index.vue"),
  29. },
  30. data() {
  31. const {
  32. MaterialColums,
  33. TabColumns,
  34. TabColumns: [
  35. {
  36. item: { key: tabName },
  37. },
  38. ],
  39. } = useColumns();
  40. let rules = TabColumns.reduce((pre, cur) => {
  41. pre = {
  42. ...pre,
  43. ...this.$init.rules([...cur.TableColumns]),
  44. };
  45. return pre;
  46. }, {});
  47. const sysMaterialApply = this.$init.params([
  48. ...TabColumns.find(({ item }) => item.key === "sysMaterialApply")
  49. .TableColumns,
  50. ]);
  51. const sysMaterialMedcineApply = this.$init.params([
  52. ...TabColumns.find(({ item }) => item.key === "sysMaterialMedcineApply")
  53. .TableColumns,
  54. ]);
  55. const applyBillInfo = this.$init.params([
  56. ...TabColumns.find(({ item }) => item.key === "applyBillInfo")
  57. .TableColumns,
  58. ]);
  59. const materialReference = this.$init.params([...MaterialColums]);
  60. return {
  61. width: "100%",
  62. visible: false,
  63. loading: false,
  64. rules,
  65. params: {
  66. sysMaterialApply: sysMaterialApply,
  67. sysMaterialMedcineApply: sysMaterialMedcineApply,
  68. sysMaterialMedcineItemApply: [],
  69. applyBillInfo: applyBillInfo,
  70. },
  71. // 维护物料类别
  72. maintenanceMaterialType: {
  73. drugName: "",
  74. drugCode: "",
  75. drugId: "",
  76. },
  77. // 物料参考
  78. materialReference: materialReference,
  79. materialColums: MaterialColums[0],
  80. tabName: tabName,
  81. TabColumns: TabColumns,
  82. count: 0,
  83. delDemandItemList: [],
  84. };
  85. },
  86. computed: {
  87. title: {
  88. get() {
  89. const { addType } = this;
  90. if (addType === "add") {
  91. return "新 增";
  92. }
  93. if (addType === "edit") {
  94. return "编 辑";
  95. }
  96. if (addType === "see") {
  97. return "查 看";
  98. }
  99. },
  100. set() {},
  101. },
  102. },
  103. watch: {
  104. "params.sysMaterialApply.isMedicine": {
  105. handler: async function (nVal, oVal) {
  106. this.params.sysMaterialMedcineApply.isDrug = nVal === "0" ? "2" : "";
  107. if (nVal === "2") {
  108. // 维护物料类别
  109. try {
  110. let { code, rows } = await REFER({
  111. type: "MEDICINE_DRUG",
  112. search: "其他非医疗器械",
  113. isPage: false,
  114. });
  115. if (code == 200) {
  116. console.log(rows, "rows");
  117. let { id, code, name } = rows[0];
  118. this.params.sysMaterialMedcineItemApply = [
  119. {
  120. drugName: name,
  121. drugCode: code,
  122. drugId: id,
  123. },
  124. ];
  125. }
  126. } catch (error) {}
  127. }
  128. },
  129. },
  130. "params.sysMaterialApply.expiryDateManagerment": {
  131. handler: function (nVal, oVal) {
  132. if (nVal === "0") {
  133. this.rules.expiryUnitId = [
  134. {
  135. required: true,
  136. message: "效期单位",
  137. trigger: "change",
  138. },
  139. ];
  140. this.rules.usefulLife = [
  141. {
  142. required: true,
  143. message: "有效期",
  144. trigger: "change",
  145. },
  146. ];
  147. this.rules.usefulLifeUnitId = [
  148. {
  149. required: true,
  150. message: "有效期至单位",
  151. trigger: "change",
  152. },
  153. ];
  154. this.rules.recentWarningPeriod = [
  155. {
  156. required:
  157. this.params.sysMaterialApply.nearOnsetManagerment === "0",
  158. message: "近效期预警天数",
  159. trigger: "change",
  160. },
  161. ];
  162. } else {
  163. this.rules.expiryUnitId = null;
  164. this.rules.usefulLife = null;
  165. this.rules.usefulLifeUnitId = null;
  166. this.rules.recentWarningPeriod = null;
  167. this.params.sysMaterialApply.nearOnsetManagerment = "2";
  168. }
  169. this.count++;
  170. },
  171. },
  172. "params.sysMaterialApply.nearOnsetManagerment": {
  173. handler: function (nVal, oVal) {
  174. if (nVal === "0") {
  175. this.rules.recentWarningPeriod = [
  176. {
  177. required:
  178. this.params.sysMaterialApply.expiryDateManagerment === "0",
  179. message: "近效期预警天数",
  180. trigger: "change",
  181. },
  182. ];
  183. } else {
  184. this.rules.recentWarningPeriod = null;
  185. }
  186. this.count++;
  187. },
  188. },
  189. },
  190. methods: {
  191. setVisible(prop) {
  192. this.visible = prop;
  193. },
  194. beforeOpen() {
  195. let { name, nickName, deptId, deptName, orgId, orgName } =
  196. this.$store.state.user;
  197. if (this.addType === "add") {
  198. this.params.sysMaterialApply.isMedicine = "0";
  199. this.params.sysMaterialApply.storageCondition = "MED2001";
  200. this.params.sysMaterialApply.isInventoryStatus = "0";
  201. this.params.sysMaterialApply.transportationCondition = "MED3003";
  202. this.params.sysMaterialApply.isEnable = "0";
  203. this.params.sysMaterialApply.materialRateName = "专票13%";
  204. this.params.sysMaterialApply.materialRate = "1001A11000000000TPTF";
  205. this.params.sysMaterialApply.proposerId = name;
  206. this.params.sysMaterialApply.proposerName = nickName;
  207. this.params.sysMaterialApply.orgId = "";
  208. this.params.sysMaterialApply.orgName = "德荣集团";
  209. this.params.sysMaterialApply.expiryDateManagerment = "0";
  210. this.params.sysMaterialApply.nearOnsetManagerment = "0";
  211. //
  212. this.params.sysMaterialMedcineApply.dosageFrom = "0001A11000000000BX7Z";
  213. this.params.sysMaterialMedcineApply.dosageFromName = "其他";
  214. }
  215. if (this.addType === "see") {
  216. this.TabColumns = this.TabColumns.map((tab) => {
  217. return {
  218. ...tab,
  219. TableColumns: tab.TableColumns.map(({ item, attr }) => {
  220. return {
  221. item: { ...item },
  222. attr: {
  223. ...attr,
  224. disabled: true,
  225. },
  226. };
  227. }),
  228. };
  229. });
  230. }
  231. },
  232. //
  233. async fetchItem(prop) {
  234. console.log(prop, "prop----------------");
  235. try {
  236. // try
  237. this.loading = true;
  238. let { code, data } = await getReqDetail(prop.id);
  239. if (code == 200) {
  240. this.params = data;
  241. // 复制
  242. if (this.addType === "add") {
  243. this.copyEmpty();
  244. }
  245. }
  246. } catch (err) {
  247. // catch
  248. console.error(err);
  249. } finally {
  250. // finally
  251. this.loading = false;
  252. }
  253. },
  254. // 复制清空值
  255. copyEmpty() {
  256. const { id, name, nickName } = this.$store.state.user;
  257. let {
  258. sysMaterialApply,
  259. sysMaterialMedcineApply,
  260. sysMaterialMedcineItemApply,
  261. } = this.params;
  262. // 基本信息
  263. sysMaterialApply["id"] = "";
  264. sysMaterialApply["code"] = "";
  265. sysMaterialApply["billCode"] = "";
  266. sysMaterialApply["diCode"] = "";
  267. sysMaterialApply["healthCode"] = "";
  268. sysMaterialApply["proposerName"] = nickName;
  269. sysMaterialApply["proposerId"] = name;
  270. // 医药属性
  271. sysMaterialMedcineApply["id"] = "";
  272. // 维护物料类别
  273. sysMaterialMedcineItemApply.length &&
  274. (this.params.sysMaterialMedcineItemApply =
  275. sysMaterialMedcineItemApply.map((item) => {
  276. return {
  277. ...item,
  278. id: "",
  279. };
  280. }));
  281. // 单据信息
  282. this.params.applyBillInfo = {
  283. ...this.$init.params([
  284. ...this.TabColumns.find(({ item }) => item.key === "applyBillInfo")
  285. .TableColumns,
  286. ]),
  287. auditTime: "",
  288. };
  289. },
  290. //
  291. async hide() {
  292. const {
  293. TabColumns,
  294. TabColumns: [
  295. {
  296. item: { key: tabName },
  297. },
  298. ],
  299. } = useColumns();
  300. this.visible = false;
  301. this.$emit("success");
  302. this.tabName = tabName;
  303. this.TabColumns = TabColumns;
  304. this.params = {
  305. sysMaterialApply: this.$init.params([
  306. ...TabColumns.find(({ item }) => item.key === "sysMaterialApply")
  307. .TableColumns,
  308. ]),
  309. sysMaterialMedcineApply: this.$init.params([
  310. ...TabColumns.find(
  311. ({ item }) => item.key === "sysMaterialMedcineApply"
  312. ).TableColumns,
  313. ]),
  314. sysMaterialMedcineItemApply: [],
  315. applyBillInfo: this.$init.params([
  316. ...TabColumns.find(({ item }) => item.key === "applyBillInfo")
  317. .TableColumns,
  318. ]),
  319. };
  320. },
  321. //
  322. async useRowAdd(prop) {
  323. let { open } = this.$refs.materialTypeTree[0];
  324. open();
  325. // const { TableColumns } = this.TabColumns.find(
  326. // ({ item: { key } }) => key === prop
  327. // );
  328. // this.params[prop].push({
  329. // delFlag: "0",
  330. // ...this.$init.params(TableColumns),
  331. // });
  332. },
  333. //
  334. async useRowRemove(prop, scope) {
  335. scope.row.delFlag = "2";
  336. let delList = [];
  337. delList = this.params[prop].filter((item) => {
  338. return item.delFlag == "2";
  339. });
  340. this.params[prop] = this.params[prop].filter((item) => {
  341. return item.delFlag == "0";
  342. });
  343. this.delDemandItemList.push(...delList);
  344. },
  345. // saveParams
  346. handleParams() {
  347. let list = [];
  348. let {
  349. sysMaterialApply: { isMedicine },
  350. sysMaterialMedcineItemApply,
  351. } = this.params;
  352. list.push(...sysMaterialMedcineItemApply, ...this.delDemandItemList);
  353. // 深拷贝一下参数对象
  354. let param = JSON.parse(JSON.stringify(this.params));
  355. param.sysMaterialMedcineItemApply = list;
  356. if (isMedicine === "0" && !sysMaterialMedcineItemApply.length) {
  357. return this.$modal.notifyWarning("医药物料需要维护物料类别!");
  358. }
  359. console.log(param, "param最终保存传输的值");
  360. return param;
  361. },
  362. // 保存
  363. async useSave() {
  364. try {
  365. this.loading = true;
  366. let params = await this.handleParams();
  367. if (params) {
  368. let { code, msg } =
  369. this.addType === "add"
  370. ? await addReq(params)
  371. : await editReq(params);
  372. code == 200 && this.hide();
  373. this.$notify({
  374. type: code == 200 ? "success" : "error",
  375. message: msg,
  376. });
  377. }
  378. } catch (error) {
  379. } finally {
  380. this.loading = false;
  381. }
  382. },
  383. // 提交
  384. async useSubmit() {
  385. try {
  386. this.loading = true;
  387. let params = await this.handleParams();
  388. if (params) {
  389. let { code, msg } = await betchSubmit({ ids: [Number(params.id)] });
  390. code == 200 && this.hide();
  391. this.$notify({
  392. type: code == 200 ? "success" : "error",
  393. message: msg,
  394. });
  395. }
  396. } catch (error) {
  397. } finally {
  398. this.loading = false;
  399. }
  400. },
  401. // 保存并提交
  402. async saveSubmit() {
  403. try {
  404. this.loading = true;
  405. let params = await this.handleParams();
  406. if (params) {
  407. let { code, msg } = await saveAndToOa(params);
  408. code == 200 && this.hide();
  409. this.$notify({
  410. type: code == 200 ? "success" : "error",
  411. message: msg,
  412. });
  413. }
  414. } catch (error) {
  415. } finally {
  416. this.loading = false;
  417. }
  418. },
  419. materialTypeChange(tabName) {
  420. let { drugId } = this.maintenanceMaterialType;
  421. let isExist = this.params[tabName].find((item) => item.drugId === drugId);
  422. if (isExist) {
  423. this.$message.warning({
  424. message: "请勿重复选择",
  425. });
  426. } else {
  427. this.params[tabName].push({
  428. ...this.maintenanceMaterialType,
  429. delFlag: "0",
  430. });
  431. }
  432. },
  433. // 物料参考
  434. openMaterialReference() {
  435. let { open } = this.$refs.materialPopoverSelect[0];
  436. open();
  437. },
  438. materialReferenceChange(prop, { source }) {
  439. console.log(prop, "prop");
  440. console.log(source, "source");
  441. this.params.sysMaterialApply = {
  442. ...this.params.sysMaterialApply,
  443. ...source,
  444. };
  445. },
  446. },
  447. created() {},
  448. mounted() {},
  449. destroyed() {},
  450. };
  451. </script>
  452. <template>
  453. <el-drawer
  454. class="detailsRequsition"
  455. v-bind="$attrs"
  456. v-on="$listeners"
  457. v-loading="loading"
  458. :visible.sync="visible"
  459. :size="width"
  460. :show-close="false"
  461. destroy-on-close
  462. @close="hide"
  463. @open="beforeOpen"
  464. >
  465. <div
  466. slot="title"
  467. style="display: flex; justify-content: space-between; align-items: center"
  468. >
  469. <h3>{{ title }}</h3>
  470. <div>
  471. <el-button
  472. v-if="addType !== 'see'"
  473. type="primary"
  474. :size="$attrs.size"
  475. :loading="loading"
  476. @click="useSave"
  477. >保 存</el-button
  478. >
  479. <el-button
  480. v-if="
  481. addType !== 'see' &&
  482. (params.sysMaterialApply.status == '0' ||
  483. params.sysMaterialApply.status == '3')
  484. "
  485. type="primary"
  486. :size="$attrs.size"
  487. :loading="loading"
  488. @click="saveSubmit"
  489. >保存并提交</el-button
  490. >
  491. <el-button
  492. v-if="
  493. addType === 'see' &&
  494. (params.sysMaterialApply.status == '0' ||
  495. params.sysMaterialApply.status == '3')
  496. "
  497. type="primary"
  498. :size="$attrs.size"
  499. :loading="loading"
  500. @click="useSubmit"
  501. >提交</el-button
  502. >
  503. <el-button :size="$attrs.size" :loading="loading" @click="hide"
  504. >取 消</el-button
  505. >
  506. </div>
  507. </div>
  508. <el-tabs
  509. v-model="tabName"
  510. style="margin: 0 16px"
  511. type="border-card"
  512. :key="count"
  513. >
  514. <el-tab-pane
  515. v-for="(
  516. { item, TableColumns: columns, attr: { is } }, index
  517. ) in TabColumns"
  518. :key="index"
  519. :label="item.title"
  520. :name="item.key"
  521. lazy
  522. >
  523. <!-- -->
  524. <component
  525. v-if="is === 'el-super-form' && visible"
  526. :is="is"
  527. v-model="params[item.key]"
  528. :dict="dict"
  529. :rules="rules"
  530. :size="$attrs.size"
  531. :columns="columns"
  532. :ref="tabName"
  533. label-width="166px"
  534. label-position="right"
  535. style="padding: 0px 18px"
  536. >
  537. <!-- 物料名称 -->
  538. <template slot="name" slot-scope="scope">
  539. <component
  540. v-bind="scope.attr"
  541. v-model="scope.row[scope.item.key]"
  542. :size="$attrs.size"
  543. :source.sync="scope.row"
  544. :disabled="addType === 'see'"
  545. style="width: 100%"
  546. >
  547. <el-button
  548. slot="append"
  549. icon="el-icon-search"
  550. @click="openMaterialReference"
  551. >
  552. <el-popover-select-v2
  553. ref="materialPopoverSelect"
  554. v-show="false"
  555. title="物料"
  556. v-model="materialReference.name"
  557. :source.sync="materialReference"
  558. v-bind="materialColums.attr"
  559. style="width: 100%"
  560. @change="materialReferenceChange"
  561. >
  562. </el-popover-select-v2>
  563. </el-button>
  564. </component>
  565. </template>
  566. <!-- 药品 -->
  567. <template slot="isDrug" slot-scope="scope">
  568. <component
  569. v-bind="scope.attr"
  570. v-model="scope.row[scope.item.key]"
  571. :size="$attrs.size"
  572. :source.sync="scope.row"
  573. :disabled="
  574. params.sysMaterialApply.isMedicine !== '0' || addType === 'see'
  575. "
  576. >
  577. <!-- @change="Change({ ...scope, selectData: $event })" -->
  578. <el-option
  579. v-for="item in dict.type[scope.attr.dictName]"
  580. :key="item.value"
  581. :label="item.label"
  582. :value="item.value"
  583. >
  584. </el-option>
  585. </component>
  586. </template>
  587. <!-- 效期管理:expiryDateManagerment
  588. 近效期管理:nearOnsetManagerment -->
  589. <!-- 有效期 -->
  590. <template slot="usefulLife" slot-scope="scope">
  591. <component
  592. v-bind="scope.attr"
  593. v-model="scope.row[scope.item.key]"
  594. :size="$attrs.size"
  595. :source.sync="scope.row"
  596. :disabled="
  597. params.sysMaterialApply.expiryDateManagerment !== '0' ||
  598. addType === 'see'
  599. "
  600. style="width: 100%"
  601. ></component>
  602. </template>
  603. <!-- 效期单位 -->
  604. <template slot="expiryUnitId" slot-scope="scope">
  605. <component
  606. v-bind="scope.attr"
  607. v-model="scope.row[scope.item.key]"
  608. :size="$attrs.size"
  609. :source.sync="scope.row"
  610. :disabled="
  611. params.sysMaterialApply.expiryDateManagerment !== '0' ||
  612. addType === 'see'
  613. "
  614. >
  615. <el-option
  616. v-for="item in dict.type[scope.attr.dictName]"
  617. :key="item.value"
  618. :label="item.label"
  619. :value="item.value"
  620. >
  621. </el-option>
  622. </component>
  623. </template>
  624. <!-- 有效期至单位 -->
  625. <template slot="usefulLifeUnitId" slot-scope="scope">
  626. <component
  627. v-bind="scope.attr"
  628. v-model="scope.row[scope.item.key]"
  629. :size="$attrs.size"
  630. :source.sync="scope.row"
  631. :disabled="
  632. params.sysMaterialApply.expiryDateManagerment !== '0' ||
  633. addType === 'see'
  634. "
  635. >
  636. <el-option
  637. v-for="item in dict.type[scope.attr.dictName]"
  638. :key="item.value"
  639. :label="item.label"
  640. :value="item.value"
  641. >
  642. </el-option>
  643. </component>
  644. </template>
  645. <!-- 近效期预警天数 -->
  646. <template slot="recentWarningPeriod" slot-scope="scope">
  647. <component
  648. v-bind="scope.attr"
  649. v-model="scope.row[scope.item.key]"
  650. :size="$attrs.size"
  651. :source.sync="scope.row"
  652. :disabled="
  653. params.sysMaterialApply.expiryDateManagerment !== '0' ||
  654. addType === 'see'
  655. "
  656. style="width: 100%"
  657. ></component>
  658. </template>
  659. <!-- 生产厂家/代理人 -->
  660. <template slot="manufacturerName" slot-scope="scope">
  661. <component
  662. v-bind="scope.attr"
  663. v-model="scope.row[scope.item.key]"
  664. copy
  665. readonly
  666. :size="$attrs.size"
  667. :source.sync="scope.row"
  668. :disabled="addType === 'see'"
  669. style="width: 100%"
  670. ></component>
  671. </template>
  672. </component>
  673. <!-- -->
  674. <component
  675. v-if="is === 'el-super-ux-table'"
  676. :is="is"
  677. v-model="params[item.key]"
  678. :dict="dict"
  679. :height="420"
  680. :ref="tabName"
  681. :columns="columns"
  682. :size="$attrs.size"
  683. >
  684. <ux-table-column
  685. fixed="right"
  686. title="操作"
  687. width="120"
  688. align="center"
  689. >
  690. <template slot="header" slot-scope="scope">
  691. <el-button
  692. v-if="tabName === 'sysMaterialMedcineItemApply'"
  693. type="text"
  694. :size="$attrs.size"
  695. :disabled="addType === 'see'"
  696. @click="useRowAdd(tabName)"
  697. >
  698. 增行
  699. <el-popover-tree-select
  700. ref="materialTypeTree"
  701. v-show="false"
  702. v-model="maintenanceMaterialType.drugName"
  703. :source.sync="maintenanceMaterialType"
  704. referName="MEDICINE_DRUG"
  705. valueKey="name"
  706. :dataMapping="{
  707. drugCode: 'code',
  708. drugId: 'id',
  709. }"
  710. :defaultProps="{
  711. label: function (data, node) {
  712. return data.code + '' + data.name;
  713. },
  714. children: 'children',
  715. }"
  716. @change="materialTypeChange(tabName)"
  717. ></el-popover-tree-select>
  718. </el-button>
  719. </template>
  720. <template slot-scope="scope">
  721. <el-button
  722. type="text"
  723. :size="$attrs.size"
  724. :disabled="addType === 'see'"
  725. @click.native.prevent="useRowRemove(tabName, scope)"
  726. >
  727. 删除
  728. </el-button>
  729. <!-- <AmendantRecord
  730. v-if="
  731. tabName === 'materialBasic' &&
  732. addType === 'edit' &&
  733. scope.row.id
  734. "
  735. v-model="scope.row"
  736. ></AmendantRecord> -->
  737. </template>
  738. </ux-table-column>
  739. </component>
  740. </el-tab-pane>
  741. </el-tabs>
  742. </el-drawer>
  743. </template>
  744. <style scoped lang="scss">
  745. ::v-deep.detailsRequsition .el-drawer__header {
  746. margin: 0;
  747. padding: 0 16px;
  748. }
  749. </style>