elizebeth/src/xt_pages/stock/stockDamaged.vue

<template>
  <div>
    <div  style="margin-bottom:10px;">
        <el-input
        size="small"
        style="width: 200px;"
        class="filter-item"
        v-model.trim="searchKey"
        placeholder="请输入耗材名称"
        />
        <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search">搜索</el-button>
    </div>
  
    <el-table :data="tableList" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }" @selection-change="changePrice">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="date" label="耗材名称"  align="center">
          <template  slot-scope="scope">
            {{scope.row.good_name}}
            </template>    
        </el-table-column>
        <el-table-column prop="date" label="耗材规格"  align="center">
          <template  slot-scope="scope">
            {{scope.row.specification_name}}
            </template>    
        </el-table-column>
          <el-table-column prop="date" label="总耗损数量"  align="center">
          <template  slot-scope="scope">
            {{getDamageCount(scope.row.good_id)}}
            </template>    
        </el-table-column>
        <el-table-column prop="date" label="总报损金额"  align="center">
          <template  slot-scope="scope">
            {{scope.row.count}}
            </template>    
        </el-table-column>
        <el-table-column prop="name" label="操作"  align="center">
          <template  slot-scope="scope">
            <el-button type="primary" @click="toDamagedDetail(scope.row.good_id)">查看详情</el-button>
            </template>     
        </el-table-column>
        <!-- <el-table-column prop="name" label="审核日期"  align="center">
          <template  slot-scope="scope">
            {{getTime(scope.row.checker_time)}}
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="name" label="核对人"  align="center">
          <template slot-scope="scope">
            {{getChecker(scope.row.checker)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="状态"  align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.checker_status == 1">已核对</span>
            <span v-if="scope.row.checker_status == 2">未核对</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作"  align="center"  width="200" >
            <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editStockDamage(scope.row.id,scope.row.checker_status)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteStockDamage(scope.row.id,scope.row.checker_status,scope.$index)">删除</el-button>
            </template>
        </el-table-column> -->
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 40, 100]"
        :page-size="10"
        background
        style="margin-top:20px;text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
    <el-dialog
        title="耗材报损"
        :visible.sync="dialogVisible"
        width="1200px"
        >
        <el-form :model="form" class="modifyDialog" label-width="120px">
          
            <el-form-item label="耗材ID">
                <el-input v-model="form.good_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="耗材名称">
                  <el-autocomplete
                    class="checkSearch"
                    popper-class="my-autocomplete"
                    v-model="form.good_name"
                    :fetch-suggestions="querySearchAsync"
                    :trigger-on-focus="true"
                    placeholder="请输入耗材名称"
                    @select="handleSelect"
                    @input="changeGoodName(scope.$index)"
                    style="width:160px;"
                  >
                    <i class="el-icon-search el-input__icon" slot="suffix"></i>
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.good_name +"  " +item.specification_name + "  "+item.manufacturer }}</div>
                  </template>
                 </el-autocomplete>
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="form.specification_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="批号">
                 <el-select v-model="form.number" filterable placeholder="请选择"  @change="chageNumberlist">
                  <el-option
                    v-for="(item,index) in numberList"
                    :key="index"
                    :label="item.number"
                    :value="item.number">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单位">
                <el-input v-model="form.warehousing_unit" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="进货价">
                <el-input v-model="form.buy_price" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="零售价">
                <el-input v-model="form.packing_price" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="报损数量">
                <el-input v-model="form.count"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="form.total" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="产地">
                <el-input v-model="form.good_origin_place"></el-input>
            </el-form-item>
            <el-form-item label="批准文号">
                <el-input v-model="form.license_number" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商">
                <el-input v-model="form.manufacturer" :disabled="true"></el-input>
            </el-form-item>
           <el-form-item label="供应商">
                <el-input v-model="form.dealer" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <div style="display:flex;">
                    <el-input v-model="form.remark"></el-input>
                    <el-button style="margin-left:5px;" type="primary" @click="addStock">添加</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }">
            <el-table-column prop="date" label="耗材ID" width="100" align="center">
               <template  slot-scope="scope">
                 {{scope.row.good_id}}
               </template>
            </el-table-column>
            <el-table-column prop="date" label="耗材名称" width="100" align="center">
               <template  slot-scope="scope">
                {{scope.row.good_name}}
               </template>
            </el-table-column>
            <el-table-column  prop="name" label="规格" width="100" align="center">
              <template  slot-scope="scope">
                {{scope.row.specification_name}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="单位" width="100" align="center">
              <template  slot-scope="scope">
                {{scope.row.warehousing_unit}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="报损数量" width="100" align="center">
              <template  slot-scope="scope">
                {{scope.row.count}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="原进货价" width="100" align="center">
               <template  slot-scope="scope">
                {{scope.row.buy_price}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="原零售价" width="100" align="center">
               <template  slot-scope="scope">
                {{scope.row.packing_price}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="生产厂商" width="100" align="center">
              <template  slot-scope="scope">
                {{scope.row.manufacturer}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="产地" width="100" align="center">
               <template  slot-scope="scope">
                {{scope.row.good_origin_place}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="批准文号" width="100" align="center">
              <template  slot-scope="scope">
                {{scope.row.license_number}}
               </template>
            </el-table-column>
            <el-table-column  prop="name" label="备注" width="100" align="center">
              <template  slot-scope="scope">
                {{scope.row.remark}}
               </template>
            </el-table-column>
            <el-table-column fixed="right" width="100" label="操作">
                <template  slot-scope="scope">
                    <el-button type="text" size="small" @click="toDelete(scope.row.$index)">删除</el-button>
                    <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveReportStock">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="耗材报损核对"
        :visible.sync="checkDialogVisible"
        width="30%"
        >
        <span>
          <el-form :model="form">
            <el-row>
              <el-col>
                <el-form-item label="核对时间">
                 <el-date-picker
                    size="small"
                    v-model="check_time"
                    type="date"
                    style="margin-left:5px;width:140px;"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>  
              </el-col>
            </el-row>  
             <el-row>
              <el-col>
                <el-form-item label="核对人">
                  <el-select v-model="checker" placeholder="请选择">
                    <el-option
                    v-for="item in doctorList"
                    :key="item.admin_user_id"
                    :label="item.user_name"
                    :value="item.admin_user_id">
                    </el-option>
                 </el-select>
                </el-form-item>  
              </el-col>
            </el-row>  
          </el-form>  
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="checkDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="SaveCheckedDamage">保 存</el-button>
        </span>
    </el-dialog>


     <el-dialog
      title="盘点批次详情"
      :visible.sync="modifyDialogVisible"
      width="80%">
        <el-form>
          <el-row>
            <el-col :span="8">
              <el-form-item label="入库单号:">
                 <el-input v-model ="form.warehouseing_order" style="width:200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="原因:">
                  <el-select v-model="form.type" placeholder="请选择">
                      <el-option
                        v-for="item in reasonList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="toQuery">查询</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-bottom:10px;">
            <div>总损耗数量:{{getDamageCount(good_id)}}     &nbsp;&nbsp;总报损金额:{{ (getDamageCount(good_id) * price).toFixed(2) }}</div>
          </el-row>
          <el-row>
            <el-table
              :data="goodList"
              border
              style="width: 100%">
              <el-table-column prop="date" label="序号" width="180" align="center">
               <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="入库单号" width="180" align="center">
                <template slot-scope="scope">
                   {{scope.row.warehousing_order}}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="损耗数量" align="center">
                <template slot-scope="scope">
                  {{scope.row.count}}
                </template>
              </el-table-column>
              <el-table-column prop="address" label="药损比" align="center">
                  <template slot-scope="scope">
                    {{(scope.row.count / getDamageCount(scope.row.good_id)).toFixed(2)*100}}%
                  </template>
              </el-table-column>
              <el-table-column prop="address" label="报损金额" align="center">
                <template slot-scope="scope">
                  {{scope.row.buy_price}}
                </template>
              </el-table-column>

              <el-table-column prop="address" label="盘点原因" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.inventory_type == 0">默认</span> 
                  <span v-if="scope.row.inventory_type == 1">到期退货</span> 
                  <span v-if="scope.row.inventory_type == 2">异常退货</span> 
                  <span v-if="scope.row.inventory_type == 3">退货</span> 
                  <span v-if="scope.row.inventory_type == 4">人为损坏</span> 
                  <span v-if="scope.row.inventory_type == 5">不计入报损分析</span> 
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import { uParseTime } from '@/utils/tools'
import { postSearchGoodWarehouseList,saveReportStock,getReportStockList,getStockBatchNumber,getGoodWarehouseList,getWarehouseTotal,getDamageDetailByGoodId} from "@/api/stock"
export default {
    name: "stockModifyPrice",
    components:{
        BreadCrumb
    },
    data() {
        return{
            crumbs: [
                { path: false, name: "库存管理" },
                { path: false, name: "耗材管理" },
                { path: false, name: "耗材报损" }
            ],
            searchKey:'',
            value1:'',
            value2:'',
            tableData: [],
            dialogVisible:false,
            form: {
                id:"",
                good_name: '',
                packing_price:'',
                new_price:"",
                count:"",
                remark:"",
                warehousing_order:"",
                manufacturer:"",
                dealer:"",
                license_number:"",
                warehousing_unit:"",
                specification_name:"",
                buy_price:"",
                good_id:"",
                packing_unit:"",
                good_origin_place:"",
                report_count:"",
                total:"",
                number:"",
                expiry_date:"",
                product_date:"",
            },
            currentIndex: 0,
            manufacturerList:[],
            dealerList:[],
            goodList:[],
            start_time:"",
            end_time:"",
            checkDialogVisible:false,
            ids:"",
            limit:10,
            page:1,
            total:0,
            doctorList:[],
            checker:this.$store.getters.xt_user.user.id,
            check_time:new Date(),
            tableList:[],
            editPriceDialogVisible:false,
            modifyPriceDialogVisible:false,
            id:0,
            numberList:[],
            damageList:[],
            modifyDialogVisible:false,
            reasonList:[
              {id:0,name:"默认"},
              {id:1,name:"到期退货"},
              {id:2,name:"异常退货"},
              {id:3,name:"退货"},
              {id:4,name:"人为损坏"},
              {id:5,name:"不计入报损分析"},
            ],
            goodList:[],
            good_name:"",
            price:0,
            good_id:0,
        }
    },
    methods:{
        search(){
           this.getlist()
        },
        print(){
          if(this.ids == ""){
            this.$message.error("请勾选打印数据")
            return false
          }else{
            this.$router.push({path:'/stock/stockDamagePrint?ids='+this.ids})
          }
         
        },
        handleSizeChange(val){
          this.limit = val
          this.getlist()
        },
        handleCurrentChange(val){
          this.page = val
          this.getlist()
        },
         changeGoodName(val){
         this.currentIndex = val
        },
      querySearchAsync(keyword, cb) {
        let key = '';
        if (keyword != undefined) {
            key = keyword
        }
        postSearchGoodWarehouseList(key).then(response => {
        if (response.data.state == 1) {
        
            var list = response.data.data.list
            console.log("列表数据",list)
            this.goodList = list
            var manufacturerList = response.data.data.manufacturerList
            this.manufacturerList = manufacturerList
            var dealer =  response.data.data.dealerList
            this.dealerList = dealer
            for(let i=0;i<this.goodList.length;i++){
                for(let j=0;j<this.manufacturerList.length;j++){
                if(this.goodList[i].manufacturer == this.manufacturerList[j].id){
                    this.goodList[i].manufacturer = this.manufacturerList[j].manufacturer_name
                 }
                }
            }

            for(let i=0;i<this.goodList.length;i++){
                for(let j=0;j<this.dealerList.length;j++){
                    if(this.goodList[i].dealer == this.dealerList[j].id){
                    this.goodList[i].dealer = this.dealerList[j].dealer_name
                    }
                }
            }
        
            cb(this.goodList)
         } else {
            cb([])
          }
         })
        },
        handleSelect(val){
          //获取当前耗材的批号
          this.getStockBatchNumber(val.good_id)
          this.form.id = val.id
          this.form.good_id = val.good_id,
          this.form.good_name = val.good_name
          this.form.packing_price = val.packing_price
          this.form.warehousing_order = val.warehousing_order
          this.form.license_number = val.license_number
          if(this.form.dealer == 0){
            this.form.dealer = ""
          }else{
            this.form.dealer = val.dealer
          }
          this.form.manufacturer = val.manufacturer
          this.form.specification_name = val.specification_name
          this.form.remark = val.remark
          this.form.buy_price = val.buy_price
          this.form.warehousing_unit = val.packing_unit  
          this.form.new_price = val.new_price
          this.form.expiry_date = val.expiry_date
          this.form.product_date = val.product_date
      },
      addStock(){

        if(this.form.count == ""){
          this.$message.error("请输入报损数量")
          return 
        }
        var obj = {
          good_id:this.form.good_id,
          good_name:this.form.good_name,
          specification_name:this.form.specification_name,
          warehousing_unit:this.form.warehousing_unit,
          count:this.form.count,
          buy_price:this.form.buy_price.toString(),
          packing_price:this.form.packing_price.toString(),
          manufacturer:this.form.manufacturer,
          good_origin_place:this.form.good_origin_place,
          license_number:this.form.license_number,
          remark:this.form.remark,
          warehousing_order:this.form.warehousing_order,
          dealer:this.form.dealer,
          start_time:this.getTime(new Date()),
          number:this.form.number,
          warehousing_info_id:0,
          product_date:this.form.product_date,
          expiry_date:this.form.expiry_date,
          total:this.form.total,
        } 
        this.tableData.push(obj)
        this.form.good_id = 0
        this.form.good_name = ""
        this.form.specification_name = ""
        this.form.warehousing_unit = ""
        this.form.count = ""
        this.form.buy_price = ""
        this.form.packing_price = ""
        this.form.manufacturer = ""
        this.form.good_origin_place = ""
        this.form.license_number = ""
        this.form.remark  = ""
        this.form.warehousing_order = ""
        this.form.dealer = ""
        this.form.number = ""
        this.form.good_id = ""
        this.form.total= ""
      },
      saveReportStock(){
         for(let i = 0;i<this.tableData.length;i++){
           if(this.tableData[i].manufacturer == 0){
              this.tableData[i].manufacturer = ""   
           }
           if(this.tableData[i].dealer == 0){
              this.tableData[i].dealer = ""   
           }
         }
         console.log("比阿哥",this.tableData)
         console.log("numberlist",this.numberList)
         for(let i=0;i<this.tableData.length;i++){
           this.tableData[i].count =  parseInt(this.tableData[i].count)
           this.tableData[i].expiry_date = parseInt(this.tableData[i].expiry_date)
           this.tableData[i].product_date = parseInt(this.tableData[i].product_date)
           this.tableData[i].total = parseInt(this.tableData[i].total)
           for(let j=0;j<this.numberList.length;j++){
              if(this.tableData[i].number == this.numberList[j].number){
                this.tableData[i].warehousing_info_id = this.numberList[j].id
              }
           }
          
         }
          var params = {
            tableData:this.tableData,
          }
          console.log("params",params)
       
        saveReportStock(params).then(response=>{
           if(response.data.state == 1){
             var msg = response.data.data.msg
             this.$message.success("保存成功")
             this.dialogVisible = false
             this.getlist()
            this.tableData = []
            this.form.good_name = ""
            this.form.packing_price = ""
            this.form.warehousing_order = ""
            this.form.license_number = ""
            this.form.dealer = ""
            this.form.manufacturer = ""
            this.form.specification_name = ""
            this.form.remark =""
            this.form.buy_price = ""
            this.form.warehousing_unit = ""
            this.form.total = ""
            this.form.number = ""
           
           }
        })
      },
      getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },
      getlist(){
         var params = {
          start_time:this.start_time,
          end_time:this.end_time,
          keyword:this.searchKey,
          limit:this.limit,
          page:this.page,
         }
         console.log("param23223232322323",params)
       getReportStockList(params).then(response=>{
          if(response.data.state == 1){
            var list = response.data.data.list
            console.log("list",list)
            this.total = response.data.data.total
            this.tableList = list
           var doctorlist = response.data.data.doctorlist
           this.doctorList = doctorlist
           var damageList =  response.data.data.damageList
           console.log("datamagelist",damageList)
          this.damageList = damageList
          }
       })   
      },
   
     exportList(){
       
         import('@/vendor/Export2Excel').then(excel => {
         const tHeader = ['报损编码', '报损日期', '报损数量','操作人','审核日期','核对人','状态']
         const filterVal = ['warehousing_order', 'start_time', 'count','user_name','check_time','checker','checker_status']
       
          for(let i=0;i<this.tableList.length;i++){
           this.tableList[i].start_time = this.getTime(this.tableList[i].start_time)
           this.tableList[i].check_time =  this.getTime(this.tableList[i].check_time)
           this.tableList[i].checker = this.getChecker(this.tableList[i].checker)
           if(this.tableList[i].checker_status == 1){
             this.tableList[i].checker_status = "已核对"
           }
          if(this.tableList[i].checker_status == 2){
             this.tableList[i].checker_status = "未核对"
           }
         }
         const data = this.formatJson(filterVal, this.tableList)
      
         excel.export_json_to_excel({
           header: tHeader,
           data,
           filename: '耗材报损'
         })
          this.downloadLoading = false
        })
       },
       formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
     getStockBatchNumber(id){
       var params = {
         id:id
       }
      getStockBatchNumber(params).then(response=>{
        if(response.data.state == 1){
          var list = response.data.data.list
          console.log("批号列表",list)
          this.numberList = list
        }
      })
     },
     getGoodWarehouseList(id){
       var params = {
          id:id,
       }
      getGoodWarehouseList(params).then(response=>{
         if(response.data.state == 1){
           var list = response.data.data.list
           this.form.total =  list.stock_count
           console.log("list23232",list)
         }
      })
     },
     changeStartTime(val){
        this.start_time = this.getTime(val)
        this.getlist()
     },
     changeEndTime(val){
       this.end_time = this.getTime(val)
       this.getlist()
     },
     chageNumberlist(val){
       console.log("val2323322",val)
       
       for(let i=0;i<this.numberList.length;i++){
         if(this.numberList[i].number == val){
            this.form.warehousing_info_id = this.numberList[i].id
         }
       }
       this.getWarehouseTotal(this.form.warehousing_info_id)
     },
      getWarehouseTotal(id){
          var params = {
            id:id,
          }
        getWarehouseTotal(params).then(response=>{
          if(response.data.state == 1){
            var list =  response.data.data.list
            console.log("档期批次库促",list)
            this.form.total = list.stock_count
          }
        })
      },
      getDamageCount(good_id){
        var count = 0
        for(let i=0;i<this.damageList.length;i++){
          if(good_id == this.damageList[i].good_id){
             count = this.damageList[i].count
          }
        }
        return count
      },
      toDamagedDetail(good_id){
          var params = {
            good_id:good_id,
            warehousing_order:this.form.warehousing_order,
            type:this.form.type,
          }
         getDamageDetailByGoodId(params).then(response=>{
            if(response.data.state == 1){
              var list = response.data.data.list
              console.log("list233232",list)
              this.modifyDialogVisible = true
              this.good_name = list[0].good_name
              this.price = list[0].buy_price
              this.good_id = list[0].good_id
              this.goodList = []
              this.goodList = list
              this.damageList = []
              this.damageList = response.data.data.damageList
            }
         })
      },
      toQuery(){
        this.toDamagedDetail(this.good_id)
      }
    },
    created(){
        // var nowDate = new Date();
        // var nowYear = nowDate.getFullYear();
        // var nowMonth = nowDate.getMonth() + 1;
        // var nowDay = nowDate.getDate();
        // this.end_time =
        // nowYear +
        // "-" +
        // (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
        // "-" +
        // (nowDay < 10 ? "0" + nowDay : nowDay);
        // nowDate.setMonth(nowDate.getMonth() - 1);
        // nowYear = nowDate.getFullYear();
        // nowMonth = nowDate.getMonth() + 1;
        // nowDay = nowDate.getDate();
        // this.start_time =
        // nowYear +
        // "-" +
        // (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
        // "-" +
        // (nowDay < 10 ? "0" + nowDay : nowDay);
         this.getlist()
    },
  
    mounted() {
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.app-container {
  // margin: 20px;
  font-size: 15px;
}
.modifyDialog{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .el-form-item{
        width: 33%;
    }
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
::-webkit-scrollbar{
    height: 20px !important;
}
</style>