Smart_platform_ui/src/views/financialManagement/receiptSettle/receiptSettleDetailsPage.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </el-button>
        <div class="upper_right_button">
          <el-button
            type="primary"
            size="small"
            @click="editHandle"
            v-if="editDisable"
            :loading="buttonLoading"
          >编 辑</el-button>
          <el-button type="primary"
                     size="small"
                     :disabled="!form.id || editDisable"
                     @click="postMessage"
                     :loading="buttonLoading"
          >发送消息</el-button>
          <el-button type="warning"
                     size="small"
                     class="el-button--small-yh"
                     :loading="buttonLoading"
                     :disabled="!form.id || editDisable"
                     @click.stop="confirmSettlement"
          >{{financeDisabled?"收费":"撤销收费"}}
          </el-button>
          <el-button class="el-button--small-yh"
                     type="primary"
                     size="small"
                     :loading="buttonLoading"
                     :disabled="!financeDisabled || editDisable"
                     @click.stop="saveSettlement"
          >保存数据
          </el-button>
        </div>
      </div>
    </div>
    <div class="customer-main">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container>
        <avue-form class="trading-form" ref="form" v-model="form" :option="option">
          <template slot="corpId">
            <crop-select
              v-model="form.corpId"
              corpType="KG"
              :disabled="!financeDisabled || editDisable"
              @getCorpData="returnBack"
              style="width: 100%"
            ></crop-select>
          </template>
          <template slot="salesCompany">
            <crop-select
              v-model="form.salesCompany"
              corpType="GS"
              :disabled="!financeDisabled || editDisable"
              @getCorpData="getGSName"
              style="width: 100%"
            ></crop-select>
          </template>
          <template slot="accountNo">
            <el-select v-model="form.accountNo"
                       placeholder="请选择"
                       :disabled="!financeDisabled || editDisable"
                       @change="accountNoChange"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in form.bankList"
                         :key="index"
                         :label="item.accountNo"
                         :value="item.accountNo"
              >
              </el-option>
            </el-select>
          </template>
          <template slot="caseOverPayment">
            <el-input
              placeholder="请输入"
              clearable
              v-model="form.caseOverPayment"
              @change="caseOverPaymentChange"
              v-input-limit="2"
              :disabled="dataList.length == 0 || !financeDisabled || editDisable"
            ></el-input>
          </template>
          <template slot="remark">
            <el-input type="textarea"
                      v-model="form.remark"
                      size="small"
                      rows="2"
                      autocomplete="off"
                      placeholder="">
            </el-input>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle title="明细列表"></containerTitle>
      <basic-container>
        <avue-crud :option="itemsOption"
                   :data="dataList"
                   ref="crud"
                   v-model="itemsForm"
                   :page.sync="page"
                   :cell-style="cellStyle"
                   @search-reset="searchReset"
                   @row-update="rowUpdate"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange">
          <template slot="menuLeft">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-shopping-cart-2"
                       :disabled="!financeDisabled || editDisable"
                       :buttonLoading="buttonLoading"
                       @click="selectRecipt"
            >选择销售合同
            </el-button>
            <el-button
              v-if="false && form.id"
              type="info"
              size="small"
              icon="el-icon-printer"
              @click.stop="openReport"
            >报表打印</el-button>
          </template>
          <template slot-scope="{ row }" slot="currency">
            <el-select  v-if="row.$cellEdit" v-model="row.currency" size="small" placeholder="请选择 币别" clearable filterable>
              <el-option v-for="(item,index) in currencyDic" :key="index" :label="item.dictValue"  :value="item.dictValue"></el-option>
            </el-select>
            <span v-else>{{ row.currency }}</span>
          </template>
          <template slot="thisAmount" slot-scope="{ row }">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <el-input
              v-if="row.$cellEdit"
              v-model="row.thisAmount"
              style="width: 90%"
              placeholder="请输入"
              size="small"
              @input="thisAmountVerify(row)"
              oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            ></el-input>
            <span v-else>{{ row.thisAmount }}</span>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              :disabled="!financeDisabled || editDisable"
              @click.stop="rowCell(scope.row,scope.index)"
            > {{ scope.row.$cellEdit ? '修改完成' : '修改' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              :disabled="!financeDisabled || editDisable"
              @click.stop="rowDel(scope.row,scope.index)"
            >删除
            </el-button>
          </template>
          <template slot="srcOrderno" slot-scope="scope">
            <span style="color: #409EFF;cursor: pointer" @click="jumpPage(scope.row, scope.index)">{{scope.row.srcOrderno}}</span>
          </template>
        </avue-crud>
      </basic-container>
      <el-dialog
        title="导入销售"
        append-to-body
        class="el-dialogDeep"
        :visible.sync="billDetailDialog"
        width="60%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        top="10vh"
        v-dialog-drag>
        <bill-detail
          :params="params"
          :billType="billType"
          :flag="1"
          @closeFun="closeBillDetail"
          @importProMent="importProMent"
        >
        </bill-detail>
      </el-dialog>
    </div>
    <messagePost
      v-if="messageVisble"
      ref="messagePost"
      @closeDialog="closeDialog"
    ></messagePost>
    <report-dialog
      :reportId="form.id"
      :switchDialog="switchDialog"
      :searchValue="statementData"
      :reportName="'对账单'"
      @onClose="onClose()"
    />
  </div>
</template>

<script>
  import option from "./configuration/detailsPage.json";
  import { getDetail } from "@/api/financialManagement/financialManagement"
  import { getDetails,modify,cancelModify,saveOrEdit } from "@/api/financialManagement/paymentRequest";
  import  billDetail from "@/components/bill/billDetailList";
  import _ from "lodash";
  import { getlistBankBy,deleteDetail } from "@/api/financialManagement/paymentRequest";
  import { contrastObj,contrastList } from "@/util/contrastData";
  import {getUserInfo} from "@/api/system/user";
  import {getCorpDetail} from "@/api/maintenance/overpayment";
  import { getlistBankBy as GYSGetBank } from "@/api/basicData/configuration"
  import reportDialog from "@/components/report-dialog/main";

  export default {
    name: "receiptDetailsPage",
    props: {
      detailData: {
        type: Object
      }
    },
    components:{
      billDetail,
      reportDialog,
    },
    data() {
      return {
        category: '',
        form: {},
        itemsForm:{},
        params:{},
        buttonLoading:false,
        itemsOption: option,
        option: {
          menuBtn: false,
          labelWidth: 100,
          column: [
            {
              label: '所属公司',
              prop: 'salesCompany',
              sort:true,
              span: 8,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '合同号',
              prop: 'srcOrderno',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '系统号',
              prop: 'sysNo',
              span: 8,
              disabled: true
            },
            {
              label: '银行账号',
              prop: 'accountNo',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开户银行',
              prop: 'accountBank',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '银行户头',
              prop: 'accountName',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '往来单位',
              prop: 'corpId',
              sort:true,
              span: 8,
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '收款日期',
              prop: 'settlementDate',
              format:"yyyy-MM-dd",
              valueFormat:"yyyy-MM-dd 00:00:00",
              span: 8,
              type:"date",
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '制单人',
              prop: 'createUserName',
              span: 8,
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '人民币金额',
              prop: 'amount',
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                },
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '外币金额',
              prop: 'foreignAmount',
              display: true,
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '使用溢付款',
              prop: 'caseOverPayment',
              display: false,
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '溢付款余额',
              prop: 'overPayment',
              display: false,
              disabled: true,
              span: 8,
              rules: [
                {
                  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '制单日期',
              prop: 'createTime',
              span: 8,
              type:"date",
              disabled:true,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '备注',
              prop: 'remark',
              span:24,
              row:2,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
          ],
        },
        id:'',
        dataList: [],
        currencyDic:[],
        page: {
          pageSize: 10,
          pagerCount: 5,
          total: 0,
        },
        billDetailDialog:false,
        financeDisabled:true,
        billType:"收费",
        // 明细本次金额总计
        allAmount: 0,
        // 消息弹窗
        messageVisble: false,
        //新旧数据对比
        oldForm:{},
        oldDataList:[],
        financeStatusDic:[{
          value: '正常',
          label: '正常'
        },
          {
            value: '停用',
            label: '停用'
          }],
        editDisable: false, //编辑状态禁用
        switchDialog: false,
        statementData: {},
      }
    },
    created() {
      // 人民币金额默认为0
      this.$set(this.form,"amount", 0)
      getUserInfo().then(res=>{
        this.category = res.data.data.billType
        if (this.category == 2) {
          this.$set(this.form,"overPayment", 0)
          this.$set(this.form,"caseOverPayment", 0)
          this.option.column.forEach(item => {
            if (item.prop == 'caseOverPayment' || item.prop == 'overPayment') {
              item.display = true
            }
            if (item.prop == 'foreignAmount') {
              item.display = false
            }
          })
        }
      })
      //币别
      this.getWorkDicts("currency").then(res =>{
        this.currencyDic = res.data.data
      })
      this.detailData.disabled && (this.editDisable = true)
      if (this.detailData.id) {
        this.buttonLoading = true
        this.id = this.detailData.id;//字符串转数字  超长用BigInt
        getDetail(this.id).then(res => {
          this.afterEcho(res.data.data)
        }).finally(()=>{
          this.buttonLoading = false
        })
      }else{
        this.form.financeStatus = "待结算"
        this.oldForm.financeStatus = "待结算"
      }
    },
    mounted() {

    },
    methods: {
      //选择客户
      returnBack(corpValue){
        this.corpId = corpValue.id
        if (this.category != 2) {
          getlistBankBy(corpValue.id).then(res =>{
            this.$set(this.form,"bankList",res.data)
          })
        }

        // 溢付款余额获取
        if (this.category == 2) {
          getCorpDetail({corpId:corpValue.id}).then(res => {
            this.form.overPayment = res.data.data? res.data.data.balanceOverpaymen: 0
          })
        }
      },
      //选择卡号
      accountNoChange(value){
        let isTrue = false
        this.form.bankList.forEach(item =>{
          if(item.accountNo == value){
            this.$set(this.form,"accountBank",item.accountBank)
            this.$set(this.form,"accountName",item.accountName)
            isTrue = true
          }
        })
        this.$nextTick(() => {
          if (!isTrue) {
            this.$set(this.form, 'accountBank', null)
            this.$set(this.form, 'accountName', null)
          }
        })
      },
      //本次金额验证
      thisAmountVerify(row){
        if(parseFloat(row.thisAmount) > parseFloat(row.amount)){
          this.$message.warning('本次金额不得大于金额!')
          this.$set(row,'thisAmount','')
        }
      },
      selectRecipt(){
        if(!this.form.corpId){
          this.$message.warning("请先选择客户!")
          return
        }
        this.params = {
          corpId: this.form.corpId
        }
        this.billDetailDialog = true;
      },
      closeBillDetail(){
        this.billDetailDialog = false;
      },
      importProMent(list){
        list.forEach((item,index) =>{
          item.accId = item.id;
          item.srcOrderno  = item.accSysNo
          item.billNo  = item.srcBillNo
          item.thisAmount = item.amount
          delete item.id;
          this.$refs.crud.rowCellAdd(item);
        })
        //明细列表所有合同号 去重 加， 为主表合同号
        this.$set(this.form,'srcOrderno',Array.from(new Set(this.dataList.map(item =>{ return item.srcOrderno}))).join(','))

        this.billDetailDialog = false;
      },
      rowUpdate(row, index, done) {
        done(row);
      },
      rowCell(row,index){
        // row.$cellEdit = !row.$cellEdit
        this.$refs.crud.rowCell(row, index)
      },
      rowDel(row,index){
        if (row.id) {
          deleteDetail({ids: row.id}).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.dataList.splice(index, 1);
          })
        } else {
          this.dataList.splice(index, 1);
        }
      },
      searchReset() {
        console.log('1')
      },
      selectionChange() {
        console.log('1')
      },
      currentChange() {
        console.log('1')
      },
      sizeChange() {
        console.log('1')
      },
      refreshChange() {
        console.log('1')
      },
      confirmSettlement(status){
        if (!this.form.corpId) return this.$message.error('往来单位不能为空')
        this.$refs["form"].validate((valid,done) => {
          done();
          if(valid && this.verificationData('收费')){
            this.$confirm("是否确认" + (this.financeDisabled? '收费': '撤销收费'), "提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning",
            }).then(()=>{
              for (let i = 0; i < this.dataList.length; i++) {
                if (this.dataList[i].thisAmount == null || this.dataList[i].thisAmount == 0 ) {
                  return this.$message.error(`第${i + 1}行的本次金额不能为空`);
                }
              }

              this.form.billNo = this.dataList.map(item =>{return item.billNo}).join(",")

              if (this.category == 2 && this.financeDisabled) {
                this.allAmount = 0;
                this.form.amount = this.form.amount? this.form.amount: 0
                this.dataList.forEach(e => {
                  this.allAmount = Number(this.allAmount) + Number(e.thisAmount)
                })
                if (this.allAmount == 0 && this.form.amount == 0) {
                  return this.$message.error('人民币金额不能为空')
                } else if (Number(this.allAmount) > 0 && (Number(this.form.amount) > Number(this.allAmount))) {
                  this.form.caseOverPayment = 0;
                } else if (Number(this.allAmount) > 0 && (Number(this.form.amount) < Number(this.allAmount))) {
                  this.form.caseOverPayment = Number(this.allAmount) - Number(this.form.amount)
                  if (Number(this.form.caseOverPayment) > Number(this.form.overPayment)) {
                    return this.$message.error('溢付款余额不足，无法收费')
                  }
                }
              }
              const params = {
                ...this.form,
                billType:"收费",
                itemsList:this.dataList
              }
              this.buttonLoading = true
              if(this.financeDisabled){
                modify(params).then(res =>{
                  this.$message.success("操作成功!")
                  this.afterEcho(res.data.data)
                }).finally(()=>{
                  this.buttonLoading = false
                })
              }else{
                cancelModify(params).then(res =>{
                  this.$message.success("操作成功!")
                  this.afterEcho(res.data.data)
                }).finally(()=>{
                  this.buttonLoading = false
                })
              }
            })
            if(status === true){
              this.$emit("goBack");
              this.leaveDetailsKey(this.$route.name)
            }
          }
        })
      },
      saveSettlement(type){
        this.$refs["form"].validate((valid,done) => {
          done();
          if(valid){
            for (let i = 0; i < this.dataList.length; i++) {
              if (this.dataList[i].thisAmount === (null || "")) {
                return this.$message.error(`第${i + 1}行的本次金额不能为空`);
              }
            }

            this.buttonLoading = true
            this.form.billNo = this.dataList.map(item =>{return item.billNo}).join(",")

            const params = {
              ...this.form,
              billType:"收费",
              itemsList:this.dataList,
              settlementType:1
            }

            // 如果有id解锁，没有跳过
            // this.form.id && this.unLock({moduleName: 'sf',tableName: 'finance_settlement', billId: this.form.id})
            saveOrEdit(params).then(res=>{
              this.$message.success("操作成功!")
              // this.detailData.disabled = true
              // this.editDisable = true
              this.afterEcho(res.data.data, type)
            }).finally(()=>{
              this.buttonLoading = false
            })
          }})
      },
      async afterEcho(data, type){
        this.form = data;
        this.financeDisabled = this.form.financeStatus === "待结算"?true:false;
        // 溢付款余额获取
        if (this.category == 2) {
          await getCorpDetail({corpId: this.form.corpId}).then(res => {
            if (Number(this.form.overPayment) != (res.data.data? res.data.data.balanceOverpaymen: '0.00')) {
              this.form.overPayment = res.data.data? res.data.data.balanceOverpaymen: '0.00'
            }
          })
        }
        this.oldForm = Object.assign({},this.form);

        if(this.financeDisabled || !this.editDisable){
          this.option.column.forEach(item =>{
            if( item.prop === "remark"){
              this.$set(item,"disabled",false)
            }else if( item.prop === "createUserName" ||  item.prop === "createTime" ||  item.prop === "sysNo" || item.prop === "overPayment"){
              this.$set(item,"disabled",true)
            }else{
              this.$set(item,"disabled",false)
            }
          })
        }
        if(this.financeDisabled === false || this.editDisable){
          this.option.column.forEach(item =>{
            if( item.prop === "remark"){
              this.$set(item,"disabled",false)
            }else if( item.prop === "createUserName" ||  item.prop === "createTime" ||  item.prop === "sysNo"){
              this.$set(item,"disabled",true)
            }else{
              this.$set(item,"disabled",true)
            }
          })
        }

        if(data.itemsList){
          this.dataList = data.itemsList
          this.oldDataList = this.deepClone(data.itemsList)
        }
        if (type == '收费') {
          this.confirmSettlement()
        }
      },
      verificationData(type){
        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
        ){
          this.$confirm("数据发生变化，请先提交保存!", "提示", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.saveSettlement(type)
          }).catch(()=>{
            return false
          })
        }else{
          return true
        }
      },
      backToList(){
        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
        ){
          this.$confirm("是否保存当前页面？", "提示", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.saveSettlement()
          }).catch(()=>{
            !this.editDisable && this.form.id && this.unLock({moduleName: 'sf',tableName: 'finance_settlement', billId: this.form.id})
            this.$emit("goBack");
            this.leaveDetailsKey(this.$route.name)
          })
        }else{
          !this.editDisable && this.form.id && this.unLock({moduleName: 'sf',tableName: 'finance_settlement', billId: this.form.id})
          this.$emit("goBack");
          this.leaveDetailsKey(this.$route.name)
        }
      },
      // 溢付款更改时
      caseOverPaymentChange() {
        if (!this.form.caseOverPayment) this.form.caseOverPayment = 0;
        if (Number(this.form.caseOverPayment) > Number(this.form.overPayment)) {
          this.form.caseOverPayment = 0;
          return this.$message.error('本次使用的溢付款不能超过总溢付款')
        }
      },
      // 发送消息
      postMessage() {
        this.messageVisble = true
        this.$nextTick(() => {
          this.$refs.messagePost.init()
        })
      },
      closeDialog() {
        this.messageVisble = false
      },
      editHandle() {
        const data = {
          moduleName: 'sf',
          tableName: 'finance_settlement',
          billId: this.form.id,
          no: localStorage.getItem('browserID'),
          billNo: this.form.srcOrderno
        }
        this.checkLock(data).then(res => {
          if (res.data.code == 200) {
            this.onLock(data).then(response => {
            })
            this.inDetailsKey(this.$route.name, {
              moduleName: 'sf',
              tableName: 'finance_settlement',
              billId: this.form.id,
            })
            this.detailData.disabled = false;
            this.editDisable = false;
            this.buttonLoading = true
            getDetail(this.form.id).then(data => {
              this.afterEcho(data.data.data)
            }).finally(()=>{
              this.buttonLoading = false
            })
          }
        }).catch(error => {
        }).finally(() => {
          this.buttonLoading = false
        })
      },
      getGSName(row) {
        this.form.belongCompany = row.cname
        if (this.category == 2) {
          GYSGetBank(row.id).then(res =>{
            this.$set(this.form,"bankList",res.data)
            if (this.form.bankList.length > 0) {
              this.form.accountNo = this.form.bankList[0].accountNo
              this.form.accountName = this.form.bankList[0].accountName
              this.form.accountBank = this.form.bankList[0].accountBank
            }
          })
        }
      },
      cellStyle() {
        return "padding:0;height:40px;";
      },
      openReport() {
        this.statementData = {...this.search};
        this.switchDialog = !this.switchDialog;
      },
      onClose(val) {
        this.switchDialog = val;
      },
      // 跳转页面
      jumpPage(row, index) {
        if (this.category == 2) {
          this.$router.$avueRouter.closeTag("/businessManagement/salesOrder/index");
          this.$router.push({
            path: "/businessManagement/salesOrder/index",
            query: {
              params: row.srcParentId
            },
          });
        } else if (this.category == 3) {
          this.$router.$avueRouter.closeTag("/salesManagement/salesContract/index");
          this.$router.push({
            path: "/salesManagement/salesContract/index",
            query: {
              params: row.srcParentId
            },
          });
        } else if (this.category == 4) {
          this.$router.$avueRouter.closeTag("/exportTrade/salesContract/index");
          this.$router.push({
            path: "/exportTrade/salesContract/index",
            query: {
              params: row.srcParentId
            },
          });
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0;
}

.trading-form ::v-deep .el-form-item {
  margin-bottom: 8px !important;
}
.required_fields{
  color: #F56C6C;
  display:inline-block;
  width: 7%
}
.upper_right_button{
  display: flex;
  position: fixed;
  right: 12px;
  top: 47px;
}
</style>