web-base-pc/src/components/orderComments.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-03-04 09:57:47
-->
<template>
  <div class="contain orderCenter">
    <div class="kuang">
      <el-form ref="select"
               :model="select"
               label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item :label="'订单编号'">
              <el-input v-model="select.orderCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'会员编号'">
              <el-input v-model="select.memberCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'订单类型'">
              <el-select :placeholder="'请选择'"
                         v-model="select.orderType">
                <el-option :label="'全部'"
                           value=""></el-option>
                <el-option v-for="item in orderTypes"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'支付时间'">
              <el-date-picker v-model="creationTime"
                              @change="changeTime"
                              value-format="yyyy-MM-dd"
                              type="daterange"
                              :range-separator="'至'"
                              :start-placeholder="'开始日期'"
                              :end-placeholder="'结束日期'">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"
                  style="margin-left: 20px">
            <div class="searchbox">
              <el-button class="btn2"
                         @click="getDataList">{{ '搜索' }}</el-button>
              <el-button class="btn1"
                         @click="reset">{{ '重置' }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table">
      <div class="tabList">
        <div :class="['tab_i', isTab === '' ? 'tabAct' : '']"
             @click="isTab = ''">
          {{ '全部' }}
        </div>
        <div :class="['tab_i', isTab === item.value ? 'tabAct' : '']"
             v-for="item in orderStatusList"
             @click="isTab = item.value"
             :key="item.value">
          {{ item.label }}
          <div class="qiu"
               v-show="item.value == 0">{{ waitPayNum }}</div>
          <div class="qiu"
               v-show="item.value == 1">{{ payNum }}</div>
        </div>
      </div>
      <div class="table_tit">
        <div class="t_btm_l">
          <div class="tab_i1">{{ '订单详情' }}</div>
        </div>
        <div class="t_btm_r table_width">
          <div>{{ '订单类型' }}</div>
          <div>{{ '订单金额' }}</div>
          <!-- <div>订单业绩(PV)</div>
              <div>订单业绩(BV)</div> -->
          <div>{{ '支付编号' }}</div>
          <div>{{ '支付姓名' }}</div>
          <div>{{ '会员编号' }}</div>
          <div>{{ '会员姓名' }}</div>
          <div>{{ '订单状态' }}</div>
          <div>{{ '收货人' }}</div>
          <span class="sheng">{{ '联系方式' }}</span>
          <!-- <span class="sheng">省、市、区/县、详细地址</span> -->
          <div>{{ '省' }}</div>
          <div>{{ '市' }}</div>
          <div>{{ '区/县' }}</div>
          <div>{{ '详细地址' }}</div>
          <div>{{ '操作' }}</div>
        </div>
      </div>
      <div v-for="(item, index) in orderLists"
           class="order_i"
           :key="index">
        <div class="t_top">
          <span>{{ '订单编号' }}：{{ item.orderCode }}</span>
          <span>{{ '创建时间' }}：{{ item.creationTime }}</span>
          <span>{{ '支付时间' }}：{{ item.payTime }}</span>
          <span>{{ '订单业绩' }}(PV)：{{ item.orderAchieve |toThousandthAndKeepDecimal}}</span>
          <span>{{ '订单业绩' }}(BV)：{{ item.orderAssAchieve |toThousandthAndKeepDecimal}}</span>
        </div>
        <div class="t_btm_a">
          <div class="t_btm_l">
            <div v-for="(ctem, cndex) in item.itemList"
                 :key="cndex"
                 class="t_btm">
              <!-- 详情 -->
              <div class="tab_i1">
                <img :src="ctem.cover"
                     alt="" />
                <div class="tab_i1_1">
                  <div class="prot">{{ ctem.productName }}</div>
                  <div>{{ ctem.specsName }}</div>
                  <div class="prot_i">
                    <div>{{ ctem.price |toThousandthAndKeepDecimal}}</div>
                    <div>X{{ ctem.quantity }}</div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <div class="t_btm_r table_width">
            <!-- 类型 -->
            <div>{{ item.orderTypeVal }}</div>
            <!-- 金额 -->
            <div>
              {{ item.orderAmount |toThousandthAndKeepDecimal}}
            </div>
            <!-- pv -->
            <!-- <div>{{ item.orderAchieve }}</div> -->
            <!-- Bv -->
            <!-- <div>{{ item.orderAssAchieve }}</div> -->
            <!-- 支付编号 -->
            <div>
              {{ item.creatorCode }}
            </div>
            <!-- 支付姓名 -->
            <div>
              {{ item.creatorName }}
            </div>
            <!-- 会员编号 -->
            <div>{{ item.memberCode }}</div>
            <!-- 会员姓名 -->
            <div>{{ item.memberName }}</div>
            <!-- 状态 -->
            <div v-if="item.orderStatus == '4'"
                 style="color: #666">
              {{ item.orderStatusVal }}
            </div>
            <div v-if="item.orderStatus == '1'"
                 style="color: #009b58">
              {{ item.orderStatusVal }}
            </div>
            <div v-if="item.orderStatus == '0'"
                 style="color: #d61820">
              {{ item.orderStatusVal }}
            </div>
            <div v-if="item.orderStatus == '3'"
                 style="color: #ffad41">
              {{ item.orderStatusVal }}
            </div>
            <div v-if="item.orderStatus == '5'"
                 style="color: #ffad41">
              {{ item.orderStatusVal }}
            </div>

            <!-- 名 -->
            <div>{{ item.recName }}</div>
            <!-- 电话 -->
            <span class="sheng">{{ item.recPhone }}</span>
            <!-- 地址 -->
            <div>{{ item.recProvince }}</div>
            <div>{{ item.recCity }}</div>
            <div>{{ item.recCounty || "" }}</div>
            <div>{{ item.address }}</div>
            <!-- <span class="sheng">{{item.recProvince}}{{item.recCity}}{{item.recCounty || ''}}{{ item.address }}</span> -->
            <!-- 操作 -->
            <div v-if="item.orderStatus == 0"
                 class="del">
              <el-popover placement="top-start"
                          title=""
                          width="200"
                          trigger="hover"
                          :content="item.remark">
                <div slot="reference"
                     v-if="item.remark"
                     style="cursor: pointer">
                  {{ '备注' }}
                </div>
              </el-popover>
              <div class="del1"
                   @click="goPay(item)">{{ '支付' }}</div>
              <div class="del2"
                   @click="cancelPay(item)">
                {{ '取消支付' }}
              </div>
              <div class="del3"
                   @click="openpRint(item)"
                   v-if="userInfo.pkCountry != 1">{{'打印'}}</div>
            </div>
            <div v-if="item.orderStatus == 1||item.orderStatus == 4"
                 class="del">
              <el-popover placement="top-start"
                          title=""
                          width="200"
                          trigger="hover"
                          :content="item.remark">
                <div slot="reference"
                     v-if="item.remark"
                     style="cursor: pointer">
                  {{ '备注' }}
                </div>
              </el-popover>
              <div class="del3"
                   @click="openpRint(item)"
                   v-if="userInfo.pkCountry != 1">{{'打印'}}</div>
              <!-- <div class="del3">修改地址</div> -->
            </div>
            <div v-if="item.orderStatus == 3"
                 class="del">
              <el-popover placement="top-start"
                          title=""
                          width="200"
                          trigger="hover"
                          :content="item.remark">
                <div slot="reference"
                     v-if="item.remark"
                     style="cursor: pointer">
                  {{ '备注' }}
                </div>
              </el-popover>
              <div class="del4"
                   @click="openWl(item.orderCode)">
                {{ '查看物流' }}
              </div>
              <div class="del3"
                   @click="openpRint(item)"
                   v-if="userInfo.pkCountry != 1">{{'打印'}}</div>
            </div>
            <div v-if="item.orderStatus == 5"
                 class="del">
              <el-popover placement="top-start"
                          title=""
                          width="200"
                          trigger="hover"
                          :content="item.remark">
                <div slot="reference"
                     v-if="item.remark">
                  {{ '备注' }}
                </div>
              </el-popover>
              <div class="del4"
                   @click="openWl(item.orderCode)">
                {{ '查看物流' }}
              </div>
              <div class="del3"
                   @click="openpRint(item)"
                   v-if="userInfo.pkCountry != 1">{{'打印'}}</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDataList" />
    <Pay :isPay="isPay"
         @closePay="closePay"
    :onlinePay="onlinePay"
         :paramsPost="paramsPost"></Pay>
    <el-dialog :title="'查看物流'"
               :visible.sync="openDiag"
               :close-on-click-modal="false"
               width="40%"
               center>
      <div class="all_dig">
        <!-- {{ wlData }} -->
        <div @click="isClick = index"
             v-for="(item, index) in wlData"
             :key="item.expressCode"
             :class="isClick == index ? 'act' : 'tit'">
          {{ '快递包裹' }}
        </div>
      </div>
      <div class="head_t">
        <img :src="wlImg"
             alt="" />
        <div>
          <div>{{ '物流公司' }}：{{ wlData[isClick].expressName }}</div>
          <div>{{ '快递单号' }}：{{ wlData[isClick].expressCode }}</div>
        </div>
      </div>
      <div class="wl_tree"
           v-for="(ctem, cndex) in wlData[isClick].detailList"
           :key="cndex">
        <div class="tree_l">{{ ctem.time }}</div>
        <div class="zhong">
          <div class="qiu"></div>
          <div class="gun"
               v-show="cndex != wlData[isClick].detailList.length - 1"></div>
        </div>
        <div class="tree_r">{{ ctem.context }}</div>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="openDiag = false">{{ '取消' }}</el-button>
        <el-button type="primary"
                   @click="openDiag = false">{{ '确定' }}</el-button>
      </span>
    </el-dialog>
    <!-- {{'打印'}} -->
    <el-dialog :title="'打印'"
               :visible.sync="isPrint"
               width="50%">
      <div class="print"
           id="printDom">
        <div class="digTit">INVOICE</div>
        <div class="digCent">
          <div class="digCent_l">
            <div class="digCent_f">
              <div>{{ '会员姓名' }}</div>
              <div>{{ orderDetailList.memberName }}</div>
            </div>
            <div class="digCent_f">
              <div>{{ '会员编号' }}</div>
              <div>{{ orderDetailList.memberCode }}</div>
            </div>
            <div class="digCent_f">
              <div>{{ '会员电话' }}</div>
              <div>{{ orderDetailList.memberPhone }}</div>
            </div>
            <div class="digCent_f">
              <div>{{ '支付时间' }}</div>
              <div>{{ orderDetailList.payTime }}</div>
            </div>
            <div class="digCent_f">
              <div>{{ '订单编号' }}</div>
              <div>{{ orderDetailList.orderCode }}</div>
            </div>
          </div>
          <div class="digCent_r">
            <div>TO</div>
            <div>
              {{ orderDetailList.recName }}
              {{ orderDetailList.recPhone }}
            </div>
            <div style="width: 400px">
              {{ orderDetailList.recProvince }}{{ orderDetailList.recCity
              }}{{ orderDetailList.address }}
            </div>
          </div>
        </div>
        <!-- <div style="border-top:1px solid #000;margin-top:60px"></div> -->
        <el-table :data="orderDetailList.itemList"
                  style="width: 100%; margin-top: 60px"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="productName"
                           align="center"
                           :label="'商品名称'"></el-table-column>
          <el-table-column prop="quantity"
                           align="center"
                           :label="'数量'"></el-table-column>
          <el-table-column prop="jg"
                           align="center"
                           :label="'产品价格'">
            <template slot-scope="scope">
              <span>{{ scope.row.price | numberToCurrency }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="achievement"
                           align="center"
                           label="PV">
            <template slot-scope="scope">
              <span>{{ scope.row.achievement | numberToCurrency }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zj"
                           align="center"
                           :label="'总价格'">
            <template slot-scope="scope">
              <span>{{ scope.row.price*scope.row.quantity | numberToCurrency }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="zpv"
                           align="center"
                           :label="'总业绩'">
            <template slot-scope="scope">
              <span>{{ scope.row.achievement*scope.row.quantity | numberToCurrency }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button v-print="'#printDom'">{{ '打印' }}</el-button>
        <el-button type="primary"
                   @click="isPrint = false">{{
          '取消'
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/orderComment.js'
import { mapGetters } from 'vuex'
import Pay from '@/components/Pay.vue'
import * as reg from '@/api/register.js'

export default {
  components: {
    Pay,
  },
  data() {
    return {
      wlImg:
        'https://hzs-in.oss-cn-beijing.aliyuncs.com/test-new/20230701/0d96fb10-fc7d-4d2c-a7c0-af1a70bb6b22.png',
      openDiag: false,
      paramsPost: '',
      isPay: false,
      select: {
        orderType: '',
      },
      orderTypes: [],
      orderStatusList: [],
      creationTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      isTab: '',
      orderLists: [],
      waitPayNum: 0,
      payNum: 0,
      isPrint: false, //查看详情
      wlData: [
        {
          expressName: '',
        },
      ],
      isClick: 0,
      isPrint: false, //查看详情
      orderDetailList: {
        itemList: [],
      },
      onlinePay:true
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    isTab(n, o) {
      this.select.orderStatus = n
      this.getDataList()
    },
    $route(to, from) {
      if (to.query.orderCode != from.query.orderCode) {
        this.select.orderCode = to.query.orderCode // 把最新id赋值给定义在data中的id
        this.getDataList()
      }
    },
  },
  mounted() {
    this.getOrderType()
    this.getOrderStatus()
    this.orderNum()
    let allData = decodeURIComponent(window.location.href).split('?')
    if (allData[1].split('&')[1] != undefined) {
      this.select.orderCode = allData[1].split('&')[1].split('=')[1]
    }
    setTimeout(() => {
      this.getDataList()
    })
  },
  methods: {
    // 查看详情
    openpRint(item) {
      console.log(
        '%c [ item ]-503',
        'font-size:13px; background:#b4e874; color:#f8ffb8;',
        item
      )
      this.orderDetailList = item
      this.isPrint = true
    },
    openWl(id) {
      this.openDiag = true
      api.expressList(id).then((res) => {
        if (res.code == 200) {
          this.wlData = res.data
          if (this.wlData.length == 0) {
            this.wlData = [
              {
                expressName: '',
              },
            ]
          }
        }
      })
    },
    cancelPay(val) {
      this.$confirm('确认取消支付')
        .then((_) => {
          api.cancelOrder(val.orderCode).then((res) => {
            this.getDataList()
            this.$message({
              message: res.msg,
              type: 'success',
            })
          })
        })
        .catch((_) => {})
    },
    goPay(item) {
      let orderItemsParams = []
      item.itemList.forEach((ctem) => {
      if(ctem.waresCode){
        orderItemsParams.push({
          waresCode: ctem.waresCode,
        })
      }
      })
      let checkObj = {
        specialArea: item.orderType,
        orderItemsParams: orderItemsParams,
      }
      api.payCheck(item.orderCode).then((res) => {
        if (res.code == 200) {
          if (item.orderType == 3 || item.orderType == 22) {
            reg.checkPay(checkObj).then((response) => {
              if (res.code == 200) {
                this.isPay = true
                item.specialArea = item.orderType
                this.onlinePay = response.data
                this.paramsPost = item
              }
            })
          } else {
            this.isPay = true
            item.specialArea = item.orderType
            this.paramsPost = item
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    },
    closePay(val) {
      if (val) {
        this.isPay = false
        this.getDataList()
      } else {
        this.$confirm('确认取消支付')
          .then((_) => {
            this.isPay = false
            // this.$router.replace({
            //   path: "/order/myOrder",
            // });
          })
          .catch((_) => {})
      }
    },
    orderNum() {
      api.orderNum().then((res) => {
        this.waitPayNum = res.data.waitPayNum
        this.payNum = res.data.payNum
      })
    },
    getOrderStatus() {
      api.orderStatus().then((res) => {
        this.orderStatusList = res.data
      })
    },
    getOrderType() {
      api.orderType().then((res) => {
        this.orderTypes = res.data
      })
    },
    changeTime() {
      this.select.creationTimeStart = this.creationTime[0]
      this.select.creationTimeEnd = this.creationTime[1]
    },
    reset() {
      this.creationTime = []
      this.select = {
        orderType: '',
      }
      this.getDataList()
    },
    getDataList() {
      api
        .orderList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.orderLists = res.rows
          this.total = res.total
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.contain {
  padding-top: 20px;
  .kuang {
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
    border-radius: 8px 8px 8px 8px;
    padding: 20px 20px 20px 0;
  }
}

.table {
  background: #ffffff;
  box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
  border-radius: 10px 10px 10px 10px;
  margin-top: 40px;
  font-size: 14px;
  .tabList {
    display: flex;
    align-items: center;
    font-weight: 400;
    color: #666666;
    padding: 20px 20px 0 20px;
    .tab_i {
      margin-right: 70px;
      border-bottom: 5px solid #fff;
      padding-bottom: 10px;
      position: relative;
      cursor: pointer;
      .qiu {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #00417C;
        top: -10px;
        right: -10px;
        border-radius: 50%;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
      }
    }
    .tabAct {
      color: #00417C;
      border-bottom: 5px solid #00417C;
    }
  }
}
.searchbox {
  display: flex;
  align-items: center;
  .btn1 {
    background: #cccccc;
    border-radius: 5px 5px 5px 5px;
    color: #ffffff;
  }
  .btn2 {
    border-radius: 5px 5px 5px 5px;
    background: rgba(214, 24, 32, 1);
    color: #ffffff;
  }
}

.table_tit {
  background: #eeeeee;
  padding: 30px 0 30px 30px;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  align-items: center;
  position: sticky;
  top: 100px;
}

.table_tit2 {
  width: 8%;
  text-align: center;
}

.t_btm_a {
  display: flex;
  align-items: center;
  padding: 20px 0px 20px 30px;
}

.t_btm_l {
  width: 14%;
}

.t_btm_r {
  // width: 8%;
  text-align: center;
  display: flex;
  flex: 1;
  align-items: center;
}

.table_width {
  text-align: center;
  div {
    flex: 1;
    word-break: break-all;
  } // div:nth-child(11) {
  //   width: 8%;
  // }
}

.tab_i1 {
  // padding-left: 30px;
  display: flex;
  align-items: center;
  font-size: 11px;
}

.tab_i1_1 {
  // display: flex;
  text-align: left;
  flex: 1;
  padding-left: 10px;
  .prot {
    margin-bottom: 5px;
  }
  .prot_i {
    width: 50% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
  }
}

.t_top {
  display: flex;
  align-items: center;
  padding: 18px 0 15px 30px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  span {
    margin-right: 60px;
  }
}

.t_btm {
  display: flex;
  align-items: center; // padding: 20px 0px 20px 30px;
  margin-bottom: 10px;
  img {
    width: 64px;
    height: 64px;
    border-radius: 8px 8px 8px 8px;
  }
}

.order_i {
  background: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.5);
  border-radius: 10px 10px 10px 10px;
  margin-bottom: 20px;
}

.del {
  div:nth-child(2) {
    width: 100%;
  }
  div:nth-child(3) {
    width: 100%;
  }
  div:nth-child(1) {
    width: 100%;
    color: #3499ff;
  }
}

.del1 {
  color: #009b58;
  cursor: pointer;
}

.del2 {
  color: #d61820;
  cursor: pointer;
}

.del3 {
  color: #d61820;
  cursor: pointer;
}

.del4 {
  color: #d61820;
  cursor: pointer;
}

::v-deep .el-range-editor.el-input__inner {
  width: auto;
}

::v-deep .el-select {
  width: 100%;
}

.sheng {
  width: 8% !important;
}

.delBtn {
  background: #005BAC;
  color: #fff;
  border-color: #005BAC;
}

.all_dig {
  display: flex;
  align-items: center;
  .tit {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    display: inline-block;
    margin-bottom: 30px;
    cursor: pointer;
    margin-right: 20px;
  }
  .act {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    display: inline-block;
    border-bottom: 4px solid #00417C;
    margin-bottom: 30px;
    cursor: pointer;
    margin-right: 20px;
  }
}

.head_t {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  img {
    width: 44px;
    height: 44px;
    margin-right: 10px;
  }
}

.wl_tree {
  display: flex;
  margin-bottom: 10px;
  .tree_l {
    width: 30%;
    text-align: right;
  }
  .zhong {
    // flex: 1;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .qiu {
      width: 10px;
      height: 10px;
      background: #cccccc;
      border-radius: 50%; // margin: 10px 0;
      margin: 3px 0 10px 0;
    }
    .gun {
      background: #ccc;
      width: 1px;
      min-height: 70px;
    }
  }
  .tree_r {
    width: 60%;
  }
}

::v-deep .orderCenter .el-dialog__body {
  height: 700px;
  overflow-y: auto;
}
.digTit {
  color: #5392f0;
  font-size: 50px;
  text-align: right;
  font-weight: 700;
}
.digCent {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  color: #000;
}
.digCent_l {
  flex: 1;
}
.digCent_f {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  :first-child {
    margin-right: 30px;
    font-weight: 500;
  }
}
.digCent_r {
  flex: 1;
  text-align: right;
  margin-top: 50px;
  div {
    margin-bottom: 10px;
  }
  :nth-child(1) {
    font-weight: 500;
    font-size: 22px;
  }
  :nth-child(2) {
    font-weight: 500;
    font-size: 22px;
  }
}
</style>

<style lang='scss'>
.print {
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: #000;
  }

  .el-table--border,
  .el-table--group {
    border-color: #000;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-color: #000;
  }

  .el-table--border th,
  .el-table--border th.gutter:last-of-type {
    border-color: #000;
  }

  .el-table--border td,
  .el-table--border th {
    border-color: #000;
  }
  .el-table__row {
    color: #000;
  }
}
#printDom {
  table {
    table-layout: auto !important;
  }
  .el-table__header-wrapper .el-table__header {
    width: 100% !important;
  }
  .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
}
</style>