qimall/addons/CloudStock/backend/views/default/stock-log.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-08
 * Time: 16:11
 */
use common\helpers\ComponentHelper;
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('stock-goods-edit', $diyPath);
ComponentHelper::loadComponentView('com-export-dialog', '@backend/views/components/common');
?>

<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" style="min-width: 1300px;">
        <div slot="header" class="title">
            <span>库存明细</span>
            <!-- <div style="float: right; margin: -5px 0">
                <el-button type="primary" @click="editClick" size="small">添加库存商品</el-button>
            </div> -->
            <com-export-dialog :field_list='exportList' :action_url="export_url" :params="searchData" ></com-export-dialog>
        </div>
        <div class="table-body">

            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="扣减库存明细列表" name="first">

                    <div class="head" style="display: flex;margin-bottom: 20px;">
                        <el-input clearable style="width: 130px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.order_id" placeholder="请输入订单id"></el-input>
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.order_no" placeholder="请输入订单编号"></el-input>
                        <el-input clearable style="width: 170px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.keyword" placeholder="请输入代理商id"></el-input>
                        <el-input clearable style="width: 170px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.mobile" placeholder="手机号"></el-input>
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.goods_name" placeholder="请输入商品名称"></el-input>

                        <el-select clearable size="small" v-model="search1.changes_type" @change="searchFun1" class="select" placeholder="请选择库存扣减类型" style="margin-right: 20px;"><!-- @change='toSearch' -->
                            <!-- <el-option key="all" label="全部等级" value=""></el-option> -->
                            <el-option :key="index" :label="item.desc" :value="item.value" v-for="(item, index) in deductionList"></el-option>
                        </el-select>
                        <el-date-picker
                            style="margin-right: 20px;"
                            size="small"
                            v-model="selectData"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" style="padding: 0 10px !important;" @click="searchFun1">搜索</el-button>
                    </div>

                    <el-table
                        size="small"
                        :data="list"
                        style="width: 100%"
                        v-loading="listLoading">

                        <el-table-column
                            label="代理商"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="default-avatar" :src="scope.row.agent_user_avatar_url" style="width: 50px;height: 50px;">
                                        <div slot="error" class="image-slot">
                                            <com-image src="resources/img/mall/default_avatar_url.png" style="width: 50px;height: 50px;"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text" style="width: 150px;">
                                        <div style="color:#000;">ID:{{scope.row.agent_user_id}}</div>
                                        <div style="color:#000;">昵称：{{scope.row.agent_user_nickname}}</div>
                                        <div style="color:#000;">{{scope.row.agent_user_mobile}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="goods_id"
                                align="center"
                                label="商品id">
                        </el-table-column>
                        <el-table-column
                            label="商品名称"
                            min-width="150"
                        >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <img v-if="scope.row.goods.cover_pic" :src="scope.row.goods.cover_pic" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
                                    <div style="text-align: left;line-height: 16px;">{{scope.row.goods.goods_name}}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="num"
                            label="扣减库存数"
                            align="center"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                -{{scope.row.num}}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="user_nickname"
                          label="对方用户"
                          min-width="150"
                          align="center"
                          >
                          <template slot-scope="scope">
                              <div style="display: flex;align-items: center;justify-content: center;">
                                  <img v-if="scope.row.user_avatar_url" :src="scope.row.user_avatar_url" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
                                  <div>{{scope.row.user_nickname}}</div>
                              </div>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                            prop="id"
                            align="center"
                            label="扣减库存类型"
                            min-width="100">
                            <template slot-scope="scope">
                                <el-tag>{{changeTypeMap[scope.row.changes_type]}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="补货下级"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <div class="table-info-img-text" v-if="scope.row.from_user && scope.row.from_user.length > 0" v-for="item in scope.row.from_user">
                                    <el-image class="default-avatar" :src="item.avatar_url" style="width: 50px;height: 50px;">
                                        <div slot="error" class="image-slot">
                                            <com-image src="resources/img/mall/default_avatar_url.png" style="width: 50px;height: 50px;"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text" style="width: 100px;">
                                        <div style="color:#000;">ID：{{item.id}}</div>
                                        <div style="color:#000;">昵称：{{item.nickname}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="order_id"
                            align="center"
                            label="订单id"
                            min-width="80">
                        </el-table-column>
                        <el-table-column
                            prop="order_no"
                            align="center"
                            label="订单编号"
                            min-width="180">
                        </el-table-column>
                        <el-table-column
                            prop="created_at"
                            align="center"
                            label="时间"
                            min-width="150">

                            <template slot-scope="scope">
                                {{formatTime(scope.row.created_at)}}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            align="center"
                          label="操作"
                          min-width="200">
                          <template slot-scope="scope">
                              <el-button type="primary" size="mini" @click="seeDetail">查看详情</el-button>
                          </template>
                        </el-table-column> -->
                    </el-table>
                    <!-- 代理库存页面 end -->

                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination
                            @current-change="pagination"
                            background
                            layout="prev, pager, next"
                            :page-count="pageCount">
                        </el-pagination>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="增加库存明细列表" name="second">

                    <div class="head" style="display: flex;margin-bottom: 20px;">
                        <el-input clearable style="width: 130px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun2" v-model="search2.order_id" placeholder="请输入订单id"></el-input>
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun2" v-model="search2.order_no" placeholder="请输入订单编号"></el-input>
                        <el-input clearable style="width: 170px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun2" v-model="search2.keyword" placeholder="请输入代理商id"></el-input>
                        <el-input clearable style="width: 170px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search2.mobile" placeholder="手机号"></el-input>
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun2" v-model="search2.goods_name" placeholder="请输入商品名称"></el-input>

                        <el-select clearable size="small" v-model="search2.changes_type" @change="searchFun2"  class="select" placeholder="请选择库存增加类型" style="margin-right: 20px;"><!-- @change='toSearch' -->
                            <el-option :key="index" :label="item.desc" :value="item.value" v-for="(item, index) in increaseList"></el-option>
                        </el-select>
                        <el-date-picker
                            style="margin-right: 20px;"
                            size="small"
                            v-model="selectData2"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" style="padding: 0 10px !important;" @click="searchFun2">搜索</el-button>
                    </div>

                    <el-table
                        size="small"
                        :data="list"
                        style="width: 100%"
                        v-loading="listLoading">

                        <el-table-column
                                label="代理商"
                                min-width="200"
                        >
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="default-avatar" :src="scope.row.agent_user_avatar_url" style="width: 50px;height: 50px;">
                                        <div slot="error" class="image-slot">
                                            <com-image src="resources/img/mall/default_avatar_url.png" style="width: 50px;height: 50px;"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text" style="width: 100px;">
                                        <div style="color:#000;">ID:{{scope.row.agent_user_id}}</div>
                                        <div style="color:#000;">昵称：{{scope.row.agent_user_nickname}}</div>
                                        <div style="color:#000;">{{scope.row.agent_user_mobile}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="goods_id"
                                align="center"
                                label="商品id">
                        </el-table-column>
                        <el-table-column
                                label="商品名称"
                                min-width="150"
                        >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <img v-if="scope.row.goods.cover_pic" :src="scope.row.goods.cover_pic" style="width: 50px;height: 50px;display: block;margin-right: 5px;" />
                                    <div style="text-align: left;line-height: 16px;">{{scope.row.goods.goods_name}}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="num"
                            label="增加库存数量"
                            align="center"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                +{{scope.row.num}}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                          prop="user_nickname"
                          label="对方用户"
                          min-width="150"
                          align="center"
                          >
                          <template slot-scope="scope">
                              <div style="display: flex;align-items: center;justify-content: center;">
                                  <img v-if="scope.row.user_avatar_url" :src="scope.row.user_avatar_url" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
                                  <div>{{scope.row.user_nickname}}</div>
                              </div>
                          </template>
                        </el-table-column> -->
                        <el-table-column
                            prop="id"
                            align="center"
                            label="增加库存类型"
                            min-width="150">
                            <template slot-scope="scope">
                                <el-tag>{{changeTypeMap[scope.row.changes_type]}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="补货上级"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <div class="table-info-img-text" v-if="scope.row.from_user && scope.row.from_user.length > 0" v-for="item in scope.row.from_user">
                                    <el-image class="default-avatar" :src="item.avatar_url" style="width: 50px;height: 50px;">
                                        <div slot="error" class="image-slot">
                                            <com-image src="resources/img/mall/default_avatar_url.png" style="width: 50px;height: 50px;"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text" style="width: 100px;">
                                        <div style="color:#000;">ID：{{item.id}}</div>
                                        <div style="color:#000;">昵称：{{item.nickname}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="order_id"
                            align="center"
                            label="订单id"
                            min-width="80">
                        </el-table-column>
                        <el-table-column
                            prop="order_no"
                            align="center"
                            label="订单编号"
                            min-width="180">
                        </el-table-column>
                        <el-table-column
                            prop="created_at"
                            align="center"
                            label="时间"
                            min-width="150">

                            <template slot-scope="scope">
                                {{formatTime(scope.row.created_at)}}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            align="center"
                          label="操作"
                          min-width="200">
                          <template slot-scope="scope">
                              <el-button type="primary" size="mini" @click="seeDetail">查看详情</el-button>
                          </template>
                        </el-table-column> -->
                    </el-table>
                    <!-- 代理库存页面 end -->

                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination
                            @current-change="pagination"
                            background
                            layout="prev, pager, next"
                            :page-count="pageCount">
                        </el-pagination>
                    </div>

                </el-tab-pane>

            </el-tabs>

        </div>
    </el-card>
    <stock-goods-edit v-model="edit.show" :edit_row="edit"></stock-goods-edit>


    <el-dialog
        center
        title="库存详情"
        :visible.sync="dialogVisible"
        width="50%"
    >
        <el-table
            size="small"
            :data="tableData2"
            style="width: 100%;padding-bottom: 30px;">
            <el-table-column
                label="商品名称"
            >
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <img :src="scope.row.huiyuan.img" style="width: 35px;height: 35px;display: block;margin-right: 5px;" />
                        <div>{{scope.row.huiyuan.name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="拿货价"
            >
                <template slot-scope="scope">
                    ￥{{scope.row.id}}
                </template>
            </el-table-column>
            <el-table-column
                prop="id"
                align="center"
                label="库存">
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                edit:{
                    show:false,
                    id:0,
                },
                list: [],
                keyword: '',
                listLoading: false,
                page: 1,
                level:1,
                pageCount: 0,
                condition_type_list: {
                    1: '下线用户数',
                    2: '累计佣金',
                    3: '已提现佣金'
                },
                price_type_list: {
                    1: '%',
                    2: '元'
                },
                dialogVisible:false,
                activeName: 'first',
                selectData:'',
                selectData2:'',
                increaseList:[],
                deductionList:[],
                jiaJianKuncun:[
                    {
                        name:'减库存',
                        level:1
                    },{
                        name:'加库存',
                        level:2
                    }],
                jiaJianKuncunValue:'',
                search1:{
                    order_id:'',
                    goods_name:'',
                    start:'',
                    end:'',
                    changes_type:'',
                    keyword:'',
                    order_no:'',
                    mobile:'',
                },
                search2:{
                    order_id:'',
                    goods_name:'',
                    start:'',
                    end:'',
                    changes_type:'',
                    keyword:'',
                    order_no:'',
                    mobile:'',
                },
                tableData2: [{
                    id:1,
                    huiyuan:{
                        img:'http://zhenai.ruinuomei.com/product/5a0bb3d1-cffe-49c7-99d7-b1481c31dc5c',
                        name:'张三'
                    },
                    phone:15219398480,
                    dengji:"等级1",
                    pro:[
                        {
                            name:'红酒红酒红酒红酒红酒红酒红酒',
                            price:199.99,
                            kucun:99
                        },
                        {
                            name:'红酒2',
                            price:199.99,
                            kucun:99
                        },
                        {
                            name:'红酒3',
                            price:199.99,
                            kucun:99
                        }
                    ]
                },
                    {
                        id:1,
                        huiyuan:{
                            img:'http://zhenai.ruinuomei.com/product/5a0bb3d1-cffe-49c7-99d7-b1481c31dc5c',
                            name:'张三'
                        },
                        phone:15219398480,
                        dengji:"等级1",
                        pro:[
                            {
                                name:'红酒1',
                                price:199.99,
                                kucun:99
                            },
                            {
                                name:'红酒2',
                                price:199.99,
                                kucun:99
                            },
                            {
                                name:'红酒3',
                                price:199.99,
                                kucun:99
                            }
                        ]
                    }],
                agentLevelList:[],
                exportList: {},
                export_url: 'cloud-stock/default/stock-log',
                searchData:{},
                changeTypeMap:{},

            };
        },
        mounted: function () {
            this.getList();
            this.getChangesType();
        },
        methods: {
            searchFun1(){
                if(this.selectData && this.selectData[0]){
                    this.search1.start = this.selectData[0];
                    this.search1.end = this.selectData[1];
                }else{
                    this.search1.start = '';
                    this.search1.end = '';
                }
                this.page = 1;
                this.getList();
            },
            searchFun2(){
                if(this.selectData2 && this.selectData2[0]){
                    this.search2.start = this.selectData2[0];
                    this.search2.end = this.selectData2[1];
                }else{
                    this.search2.start = '';
                    this.search2.end = '';
                }
                this.page = 1;
                this.getList2();

            },
            handleClick(tab, event) {
                if(this.activeName == "first"){
                    this.page = 1;
                    this.pageCount = 0;
                    this.getList();
                }else if(this.activeName == "second"){
                    this.page = 1;
                    this.pageCount = 0;
                    this.getList2();
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                //let self = this;
                this.page = currentPage;
                if(this.activeName == "first"){
                    this.getList();
                }else if(this.activeName == "second"){
                    this.getList2();
                }
            },
            getList() {
                let self = this;
                self.listLoading = true;
                //console.log('请求扣减库存明细列表page='+self.page)
                //console.log('请求扣减库存明细列表search1='+JSON.stringify(this.search1))
                this.searchData = {
                    log_type: 'sub',
                    order_id:this.search1.order_id,
                    goods_name:this.search1.goods_name,
                    start:this.search1.start,
                    end:this.search1.end,
                    changes_type:this.search1.changes_type,
                    keyword:this.search1.keyword,
                    order_no:this.search1.order_no,
                    mobile:this.search1.mobile,
                }
                request({
                    params: {
                        r: 'cloud-stock/default/stock-log',//plugin/cloud_stock/mall/stock-log/get-deduction-list扣减库存明细列表
                        page:self.page,
                        limit: 10,
                        ...this.searchData
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('扣减库存明细列表='+JSON.stringify(e))
                    self.listLoading = false;
                    if(e.data.code == 0){
                        self.list = e.data.data.list;
                        self.changeTypeMap = e.data.data.changeTypeMap;
                        self.pageCount = e.data.data.page_count;
                        self.exportList = e.data.data.export_list;
                    }
                }).catch(e => {
                    console.log(e);
                });
            },formatTime(timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d +' '+ h + ':' + minute + ':' + second;

            },
            getList2(){
                let self = this;
                self.listLoading = true;
                //console.log('增加库存明细列表page='+self.page)
                //console.log('增加库存明细列表search2='+JSON.stringify(this.search2))
                this.searchData = {
                    log_type: 'add',
                    order_id:this.search2.order_id,
                    goods_name:this.search2.goods_name,
                    start:this.search2.start,
                    end:this.search2.end,
                    changes_type:this.search2.changes_type,
                    keyword:this.search2.keyword,
                    order_no:this.search2.order_no,
                    mobile:this.search2.mobile,
                }
                request({
                    params: {
                        r: 'cloud-stock/default/stock-log',//增加库存明细列表 plugin/cloud_stock/mall/stock-log/get-increase-list
                        page:self.page,
                        limit: 10,
                        ...this.searchData
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('增加库存明细列表='+JSON.stringify(e))
                    self.listLoading = false;
                    if(e.data.code == 0){
                        self.list = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                        self.exportList = e.data.data.export_list;
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getChangesType(){
                request({
                    params: {
                        r: 'cloud-stock/default/get-changes-type-list',//库存变动类型列表 plugin/cloud_stock/mall/stock-log/get-changes-type-list
                        page:self.page,
                        limit: 10
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('库存变动类型列表='+JSON.stringify(e))
                    if(e.data.code == 0){
                        this.increaseList = e.data.data[0].increase;
                        this.deductionList = e.data.data[0].deduction;
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            switchStatus(row) {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'plugin/stock/mall/level/switch-status',
                    },
                    method: 'post',
                    data: {
                        id: row.id,
                    }
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    self.getList();
                }).catch(e => {
                    console.log(e);
                });
            },
            editClick(id){
                if (id){
                    this.edit.id=id;
                    this.edit.show=true;
                    this.edit.title="编辑商品"
                }else {
                    this.edit.show=true;
                    this.edit.title="添加商品"
                }

            },
            levelDelete(row, index) {
                let self = this;
                self.$confirm('删除该库存商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'plugin/stock/mall/goods/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.list.splice(index, 1);
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            seeDetail(){
                this.dialogVisible = true
            }
        }
    });
</script>

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    /* .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    } */


    .el-table thead{
        font-size: 14px;
        color: #333;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }

    .el-date-editor .el-range-separator{/* 设置选择日期框的中间的 ‘至’ 的宽度 */
        width: 8%;
    }
    .title{
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 40px;
        display: flex;
        justify-content: space-between;
    }

</style>