Smart_platform_ui/src/views/financialManagement/incomeInvoice/incomeInvoiceDetailsPage.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"
                     v-if="viewDisabled"
                     class="el-button--small-yh"
                     :loading="buttonLoading"
                     @click.stop="openEdit()">编辑
          </el-button>
          <el-button class="el-button--small-yh"
                     type="primary"
                     size="small"
                     :loading="buttonLoading"
                     :disabled="!form.id || viewDisabled"
                     @click.stop="makeInvoice"
          >{{cancelDisabled?'撤销开票':'确认开票'}}
          </el-button>
          <el-button class="el-button--small-yh"
                     type="primary"
                     size="small"
                     :loading="buttonLoading"
                     @click.stop="saveSettlement"
          >保存数据
          </el-button>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 3% 0 0 1%;background: #FFFFFF">
      <el-tab-pane label="费用明细" name="first" :key="'first'">
      </el-tab-pane>
      <el-tab-pane label="开票信息" name="second" :key="'second'">
      </el-tab-pane>
    </el-tabs>

    <div class="customer-main" style="margin-top: 1px" v-show="show">
      <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="cancelDisabled || viewDisabled"
              @getCorpData="returnBack"
              style="width: 100%"
            ></crop-select>
          </template>
          <template slot="accountNo">
            <el-select v-model="form.accountNo"
                       placeholder="请选择"
                       @change="accountNoChange"
                       :disabled="cancelDisabled || viewDisabled"
                       clearable
                       filterable>
              <el-option v-for="(item,index) in form.bankList"
                         :key="index"
                         :label="item.accountNo"
                         :value="item.accountNo"
              >
              </el-option>
            </el-select>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle title="明细列表"></containerTitle>
      <basic-container>
        <avue-crud :option="itemsOption"
                   :data="dataList"
                   ref="crud"
                   v-model="itemsForm"
                   :cell-style="cellStyle"
                   @search-reset="searchReset"
                   @row-update="rowUpdate"
                   @selection-change="selectionChange"
        >
          <template slot="menuLeft">
            <el-button type="primary"
                       size="small"
                       :loading="buttonLoading"
                       icon="el-icon-shopping-cart-2"
                       :disabled="cancelDisabled || viewDisabled"
                       @click="selectPurchase">选择采购合同
            </el-button>
            <el-button type="warning"
                       size="small"
                       :loading="buttonLoading"
                       :disabled="selectionList.length === 0 || cancelDisabled || viewDisabled"
                       @click="generate">生成开票
            </el-button>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              :disabled="cancelDisabled || viewDisabled"
              @click.stop="rowCell(scope.row,scope.index)"
            > {{ scope.row.$cellEdit ? '修改完成' : '修改' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              :disabled="cancelDisabled || viewDisabled"
              @click.stop="rowDel(scope.row,scope.index)"
            >删除
            </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="请输入"
              @change="amountChange"
              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>
        </avue-crud>
      </basic-container>
    </div>
    <div class="customer-main" style="margin-top: 1px" v-show="!show">
      <containerTitle title="开票信息"></containerTitle>
      <basic-container>
        <avue-form class="trading-form" ref="form" v-model="form" :option="options">
          <template slot="remark">
            <el-input type="textarea"
                      v-model="form.remark"
                      size="small"
                      :disabled="viewDisabled"
                      rows="2"
                      autocomplete="off"
                      placeholder="">
            </el-input>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle title="明细列表"></containerTitle>
      <basic-container>
        <avue-crud :option="itemsOptions"
                   :data="dataLists"
                   ref="cruds"
                   v-model="itemsForms"
                   :cell-style="cellStyle"
                   @search-reset="searchReset"
                   @row-update="rowUpdate"
                   @selection-change="selectionChange"
        >
          <template slot="menuLeft">
            <el-button type="primary"
                       size="small"
                       :loading="buttonLoading"
                       :disabled="viewDisabled"
                       icon="el-icon-plus"
                       @click="cellAdd">录入
            </el-button>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              :disabled="viewDisabled"
              @click.stop="rowCells(scope.row,scope.index)"
            > {{ scope.row.$cellEdit ? '修改完成' : '修改' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              :disabled="viewDisabled"
              @click.stop="rowDels(scope.row,scope.index)"
            >删除
            </el-button>
          </template>
          <template slot-scope="{row,index}" slot="serverName">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <breakdown-select
              v-if="row.$cellEdit"
              v-model="row.serverName"
              style="width: 90%"
              :configuration="configuration">
            </breakdown-select>
            <span v-else>{{ row.serverName }}</span>
          </template>
          <template slot="typeno" slot-scope="{ row, index }">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <el-select
              v-if="row.$cellEdit"
              v-model="row.typeno"
              size="small"
              style="width:90% !important;"
              filterable
              allow-create
              default-first-option
              clearable
            >
              <el-option
                v-for="(item,index) in typenoList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <span v-else>{{ row.itemType }}</span>
          </template>
          <template slot-scope="{row,index}" slot="unit">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <el-select  v-if="row.$cellEdit" v-model="row.unit" size="small" placeholder="请选择 单位" style="width: 90%" clearable filterable>
              <el-option v-for="(item,index) in unitDic" :key="index" :label="item.dictValue"  :value="item.dictValue"></el-option>
            </el-select>
            <span v-else>{{ row.unit }}</span>
          </template>
          <template slot="price" slot-scope="{row,index}">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <el-input
              v-if="row.$cellEdit"
              v-model="row.price"
              style="width: 90%"
              placeholder="请输入 单价"
              size="small"
              oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            ></el-input>
            <span v-else>{{ row.price }}</span>
          </template>
          <template slot="amount" slot-scope="{row,index}">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <el-input
              v-if="row.$cellEdit"
              v-model="row.amount"
              style="width: 90%"
              placeholder="请输入 金额"
              size="small"
              oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            ></el-input>
            <span v-else>{{ row.amount }}</span>
          </template>
          <template slot="amountRate" slot-scope="{row,index}">
            <span v-if="row.$cellEdit" class="required_fields">*</span>
            <el-input
              v-if="row.$cellEdit"
              v-model="row.amountRate"
              style="width: 90%"
              size="small"
              placeholder="请输入 税率"
              oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d\d\d\d\d).*$/, "$1.$2")'
              autocomplete="off"
            >
              <i slot="suffix" style="margin-top:3px;margin-right: 10px;display:inline-block">%</i>
            </el-input>
            <span v-else>{{ row.amountRate }}</span>
          </template>
        </avue-crud>
      </basic-container>
    </div>
    <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="2"
        @closeFun="closeBillDetail"
        @importProMent="importProMent"
      >
      </bill-detail>
    </el-dialog>
  </div>
</template>

<script>
  import option from "./configuration/detailsPage.json";
  import options from "./configuration/invoicepage.json";
  import { getDetail,editFinance } from "@/api/financialManagement/financialManagement"
  import { saveOrEdit,getDetails } from "@/api/financialManagement/paymentRequest";
  import { createInvoiceItem,putFund,cancelFund } from "@/api/financialManagement/invoice";
  import { contrastObj,contrastList } from "@/util/contrastData";
  import  billDetail from "@/components/bill/billDetailList";
  import { getlistBankBy } from "@/api/financialManagement/paymentRequest";
  import _ from "lodash";

  export default {
    name: "outputInvoiceDetailsPage",
    props: {
      detailData: {
        type: Object
      }
    },
    data() {
      return {
        show:true,
        cancelDisabled:false,
        viewDisabled:false,
        form: {},
        option: {
          menuBtn: false,
          labelWidth: 100,
          column: [
            {
              label: '系统号',
              prop: 'sysNo',
              span: 8,
              disabled: true
            },{
              label: '合同号',
              prop: 'srcOrderno',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '往来单位',
              prop: 'corpId',
              sort:true,
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              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: '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: 'settlementDate',
              format:"yyyy-MM-dd",
              valueFormat:"yyyy-MM-dd 00:00:00",
              span: 8,
              type:"date",
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }
          ],
        },
        itemsOption: option,
        itemsForm:{},
        dataList: [],

        options:{
          menuBtn: false,
          labelWidth: 100,
          column: [
            {
              label: '开票抬头',
              prop: 'invoiceTitle',
              sort:true,
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开票日期',
              prop: 'invoiceTime',
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              type:"date",
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '发票号',
              prop: 'invoiceNo',
              span: 8,
            },
            {
              label: '纳税人识别号',
              prop: 'taxpayerIdentificationNo',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开户行账号',
              prop: 'bankNo',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '地址电话',
              prop: 'addressPhone',
              span: 8,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '备注',
              prop: 'remark',
              span:24,
              minRows: 2,
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
          ],
        },
        itemsOptions: options,
        dataLists:[],
        itemsForms:{},

        typenoList:['*'],
        configuration: {
          multipleChoices: false,
          multiple: false,
          disabled: true,
          searchShow: true,
          collapseTags: false,
          placeholder: '请点击右边按钮选择',
          dicData: []
        },
        billDetailDialog:false,
        buttonLoading:false,
        billType:"申请",
        params:{},
        id:"",

        unitDic:[],
        currencyDic:[],
        selectionList:[],
        activeName:'first',
        //顶部from数据
        oldForm:{},
        oldDataList:[],
        oldDataLists:[],
      }
    },
    components:{
      billDetail
    },
    created() {
      //币别
      this.getWorkDicts("currency").then(res =>{
        this.currencyDic = res.data.data
      })
      //单位
      this.getWorkDicts("unit").then(res => {
        this.unitDic = res.data.data
      });

      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
        })
      }

      if(this.detailData.view){
        this.viewDisabled = true
        this.option.disabled = true
        this.options.disabled = true
      }

      if(this.detailData.params){
        this.buttonLoading = true
        getDetails(this.detailData.params).then(res =>{
          delete res.data.data.id;
          delete res.data.data.sysNo;
          delete res.data.data.billType;
          res.data.data.itemsList.map((items)=>{
            delete items.id ;
            items.thisAmount = items.amount
          })
          this.afterEcho(res.data.data)
        }).finally(()=>{
          this.buttonLoading = false
        })
      }

    },
    mounted() {

    },
    methods: {
      handleClick(tab){
        if(tab.name === "first"){
          this.show = true
        }else{
          this.show = false
        }
      },
      //选择客户
      returnBack(corpValue){
        this.corpId = corpValue.id
        getlistBankBy(corpValue.id).then(res =>{
          this.$set(this.form,"bankList",res.data)
        })
      },
      //选择卡号
      accountNoChange(value){
        this.form.bankList.forEach(item =>{
          if(item.accountNo == value){
            this.$set(this.form,"accountBank",item.accountBank)
            this.$set(this.form,"accountName",item.accountName)
          }
        })
      },
      amountChange(){
        let thisAmountList =  this.dataList.map(item => {
          if(item.thisAmount){
            return parseFloat(item.thisAmount);
          }else return 0
        });
        this.$set(this.form,"amount",thisAmountList.reduce((n,m) => n + m)) //数组内和
      },
      //本次金额验证
      thisAmountVerify(row){
        if(parseFloat(row.thisAmount) > parseFloat(row.amount)){
          this.$message.warning('本次开票金额不得大于金额!')
          this.$set(row,'thisAmount','')
        }
      },
      //生成开票
      generate(){
        let sum = 0
        this.selectionList.forEach(item =>{
          sum =_.add(sum, Number(item.thisAmount))
        })
        let params = {
          price:sum,
          amount:sum
        }
        this.$refs.cruds.rowCellAdd(params);
        this.activeName = 'second'
        this.show = false
      },
      selectPurchase(){
        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
          item.$cellEdit = true
          delete item.id;

          this.$refs.crud.rowCellAdd(item);
        })
        this.$set(this.form,'srcOrderno',Array.from(new Set(this.dataList.map(item =>{ if(item.srcOrderno){return item.srcOrderno}}))).join(','))
        this.billDetailDialog = false;
      },
      rowUpdate(row, index, done) {
        done(row);
      },
      cellAdd(){
        this.$refs.cruds.rowCellAdd({typeno : '*'});
      },
      rowCell(row,index){
        this.$refs.crud.rowCell(row, index)
      },
      rowDel(row,index){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.dataList.splice(index, 1);
        });
      },
      rowCells(row,index){
        this.$refs.cruds.rowCell(row, index)
      },
      rowDels(row,index){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.dataLists.splice(index, 1);
        });
      },
      searchReset() {
        console.log('1')
      },
      selectionChange(row) {
        this.selectionList = row
      },
      makeInvoice(){
        if(this.verificationData()){
          this.$confirm(this.cancelDisabled?"是否撤销开票":"是否确认开票", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }).then(()=>{
            for (let i = 0; i < this.dataList.length; i++) {
              if (this.dataList[i].thisAmount == (null || "")) {
                return this.$message.error(`第输入费用明细${i + 1}行的本次金额`);
              }
            }

            for (let i = 0; i < this.dataLists.length; i++) {
              if (this.dataLists[i].serverName == (null || "") ||
                this.dataLists[i].typeno == (null || "") ||
                this.dataLists[i].unit == (null || "") ||
                this.dataLists[i].price == (null || "") ||
                this.dataLists[i].amount == (null || "") ||
                this.dataLists[i].amountRate == (null || "") ||
                this.dataLists[i].amountTax == (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,
              invoiceItemList:this.dataLists,
              settlementType:2
            }

            if(!this.cancelDisabled){
              //确认开票
              putFund(params).then(res=>{
                if(res.data.success){
                  this.$message.success("操作成功!")
                  this.afterEcho(res.data.data)
                }
              }).finally(()=>{
                this.buttonLoading = false
              })
            }else{   //撤销开票
              cancelFund(params).then(res=>{
                if(res.data.success){
                  this.$message.success("操作成功!")
                  this.afterEcho(res.data.data)
                }
              }).finally(()=>{
                this.buttonLoading = false
              })
            }
          })
        }
      },
      saveSettlement(){
        this.$refs["form"].validate((valid,done) => {
          if(valid){
            for (let i = 0; i < this.dataList.length; i++) {
              if (this.dataList[i].thisAmount == (null || "")) {
                return this.$message.error(`第输入费用明细${i + 1}行的本次金额`);
              }
            }

            for (let i = 0; i < this.dataLists.length; i++) {
              if (this.dataLists[i].serverName == (null || "") ||
                this.dataLists[i].typeno == (null || "") ||
                this.dataLists[i].unit == (null || "") ||
                this.dataLists[i].price == (null || "") ||
                this.dataLists[i].amount == (null || "") ||
                this.dataLists[i].amountRate == (null || "") ||
                this.dataLists[i].amountTax == (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,
              invoiceItemList:this.dataLists,
              settlementType:2
            }

            saveOrEdit(params).then(res=>{
              this.$message.success("操作成功!")
              this.afterEcho(res.data.data)
            }).finally(()=>{
              done();
              this.buttonLoading = false
            })
          }
        })
      },
      afterEcho(data){
        this.form = data;
        this.oldForm = Object.assign({},data);

        this.cancelDisabled =  data.foundStatus === "核销完成"?true:false;

        this.option.column.forEach(item=>{
          this.$set(item,"disabled",this.cancelDisabled)
        })

        if(data.itemsList){
          this.dataList = data.itemsList
          this.oldDataList = this.deepClone(data.itemsList)
        }
        if(data.invoiceItemList){
          this.dataLists = data.invoiceItemList
          this.oldDataLists = this.deepClone(data.invoiceItemList)
        }
      },
      verificationData(){
        if(contrastObj(this.form,this.oldForm)
          || contrastList(this.dataList,this.oldDataList)
          || contrastList(this.dataLists,this.oldDataLists)
        ){
          this.$confirm("数据发生变化，请先提交保存!", "提示", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.saveSettlement()
          }).catch(()=>{
            return false
          })
        }else{
          return true
        }
      },
      async openEdit() {
        //标签页保存key
        this.inDetailsKey(this.$route.name,this.detailData.lockData);
        //单据是否锁定
        if(!await this.checkLocks(this.detailData.lockData)){
          this.onLock(this.detailData.lockData); //上锁
          this.viewDisabled = false
          this.option = this.$options.data().option;
          this.options = this.$options.data().options;
        }else{
          this.$message.warning('此单据已被锁定,请稍后再进行操作!')
        }
      },
      backToList() {
        //编辑按钮存在 或者为新单  新单是没有lockData的
        if(this.viewDisabled || !this.detailData.lockData){
          this.$emit("goBack");
          return
        }

        if(contrastObj(this.form,this.oldForm) || contrastList(this.dataList,this.oldDataList)
        ){
          this.$confirm("是否保存当前页面？", "提示", {
            confirmButtonText: "保存",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.saveSettlement()
          }).catch(()=>{
            this.$emit("goBack");
          }).finally(()=>{
            if(this.form.id){
              this.unLock(this.detailData.lockData);
              this.leaveDetailsKey(this.$route.name);
            }
          })
        }else{
          this.$emit("goBack");
          if(this.form.id){
            this.unLock(this.detailData.lockData);
            this.leaveDetailsKey(this.$route.name);
          }
        }
      },
      cellStyle() {
        return "padding:0;height:40px;";
      },
    }
  }
</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>