el-descriptions 描述列表 label 背景色失效问题

<template>
  <div class="execution">
    <basic-container>
      <el-row type="flex" class="row-bg">
        <el-col :span="8">
          <div class="block">
            <el-col :span="4" class="myTypeface">交接日期</el-col>
            <el-col :span="1"></el-col>
            <el-col :span="16">
              <el-date-picker
                style="width:100% ;hight:100%"
                v-model="joinDateValue"
                size="mini"
                type="daterange"
                @change="changeDate"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="1"></el-col>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="6" class="myTypeface">分公司名称</el-col>
              <el-col :span="10">
                <el-select v-model="companyIdValue" clearable v-bind:disabled="companyDisabled" filterable
                           placeholder="请选择" @change="officeData">
                  <el-option
                    v-for="item in companyNameList"
                    :key="item.companyId"
                    :label="item.companyName"
                    :value="item.companyId">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-row>
              <el-col :span="6" class="myTypeface">票胆间/充值点</el-col>
              <el-col :span="1"></el-col>
              <el-col :span="10">
                <el-select v-model="roomNameValue" v-bind:disabled="roomDisabled" size="medium" clearable filterable
                           placeholder="请选择">
                  <el-option
                    v-for="item in roomNameList"
                    :key="item.officeId"
                    :label="item.officeName"
                    :value="item.officeName">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-row>
              <el-col :span="6" class="myTypeface">交接单类型</el-col>
              <el-col :span="10">
                <el-select v-model="joinTypeValue" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in joinTypeList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="6" class="myTypeface">状态</el-col>
              <el-col :span="10">
                <el-select v-model="stsValue" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in stsList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-row>
              <el-button type="primary" @click.stop="selectJoin" icon="el-icon-search">查询</el-button>
              <el-button type="info" icon="el-icon-delete" plain @click="clearAll">清空</el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-table
        :default-sort="{prop: 'joinDate', order: 'descending'}"
        :data="options"
        border
        style="width: 100%">
        <el-table-column
          sortable
          prop="joinDate"
          label="交接日期"
          width="180">
        </el-table-column>
        <el-table-column
          sortable
          prop="id"
          label="流水号"
          width="180">
        </el-table-column>
        <el-table-column
          sortable
          prop="joinType"
          label="交接单类型">
        </el-table-column>
        <el-table-column
          sortable
          prop="sts"
          label="状态">
        </el-table-column>
        <el-table-column
          sortable
          prop="companyName"
          label="分公司名称">
        </el-table-column>
        <el-table-column
          sortable
          prop="roomName"
          label="票胆间/充值点">
        </el-table-column>
        <el-table-column
          sortable
          prop="total"
          label="合计">
        </el-table-column>
        <el-table-column
          label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="setJoin(scope.row)">详情查看</el-button>
          </template>
          <el-dialog
            :title='detailTitle'
            :visible.sync="centerDialogVisible"
            width="60%"
            :append-to-body="true"
            center>
            <template>
              <el-row :gutter="24">
                <el-col :span="8">
                  <div class="grid-content bg-purple">票胆间/充值点:{{ joinDta.roomName }}</div>
                </el-col>
                <el-col :span="11">
                  <div class="grid-content bg-purple"></div>
                </el-col>
                <el-col :span="5">
                  <div class="grid-content bg-purple">交接日期: {{ joinDta.joinDate }}</div>
                </el-col>
              </el-row>
              <div v-if="joinDta.joinType==='实胆交接单' ||joinDta.joinType==='空胆交接单' ">
                <el-descriptions v-if="Object.keys(joinDetails).length>0" class="margin-top" :column="4" size="medium"
                                 border
                                 direction="horizontal"
                                 :key="index" v-for="(item,index) in joinDetails">
                  <el-descriptions-item label-class-name="labelColorOne" content-class-name="my-contentOne" label="线路"
                                        :span="2">{{ index }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="labelColorOne" content-class-name="my-contentOne" :label='title'
                                        :span="2">{{ item.boxAllNum }}个
                  </el-descriptions-item>
                  <template v-for="itemOne in item.packDataList">
                    <el-descriptions-item label-class-name="labelColor" content-class-name="my-content"
                                          :label="itemOne.packId" :span="2">{{ itemOne.boxNum }}个
                    </el-descriptions-item>
                    <el-descriptions-item label="封签号" label-class-name="labelColor" content-class-name="my-content"
                                          :span="2">{{ itemOne.sealNum }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="labelColor" content-class-name="my-content" label="胆包号"
                                          :span="2">车辆号
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="labelColor" content-class-name="my-content" label="胆包号"
                                          :span="2">车辆号
                    </el-descriptions-item>
                    <template v-for="itemTwo in itemOne.packData">
                      <el-descriptions-item
                        :label="itemTwo.boxId" :span="2">{{ itemTwo.vehicleId }}
                      </el-descriptions-item>
                    </template>
                    <el-descriptions-item v-if="itemOne.packData.length%2!==0" disabled="true"
                                          label='- - - - - - -' :span="2">- - - - - - -
                    </el-descriptions-item>
                  </template>
                </el-descriptions>
              </div>
              <div v-else>
                <el-descriptions v-if="Object.keys(joinDetails).length>0" class="margin-top" :column="4" size="medium"
                                 border
                                 direction="horizontal"
                                 :key="index" v-for="(item,index) in joinDetails">
                  <el-descriptions-item label-class-name="labelColorOne" content-class-name="my-contentOne" label="线路"
                                        :span="2">{{ index }}
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="labelColorOne" content-class-name="my-contentOne" :label='title'
                                        :span="2">{{ item.boxAllNum }}个
                  </el-descriptions-item>
                  <template v-for="itemOne in item.packDataList">
                    <el-descriptions-item label-class-name="labelColor" content-class-name="my-content" label="款包号"
                                          :span="2">封签号
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="labelColor" content-class-name="my-content" label="款包号"
                                          :span="2">封签号
                    </el-descriptions-item>
                    <template v-for="itemTwo in itemOne.packData">
                      <el-descriptions-item
                        :label="itemTwo.boxId" :span="2">{{ itemTwo.sealNum }}
                      </el-descriptions-item>
                    </template>
                    <el-descriptions-item v-if="itemOne.packData.length%2!==0 " disabled="true"
                                          label='- - - - - - -' :span="2">- - - - - - -
                    </el-descriptions-item>
                  </template>
                </el-descriptions>
              </div>
              <el-descriptions direction="horizontal" :column="4" colon>
                <el-descriptions-item label="当日合计" :span="4">{{ joinDta.total }} 个</el-descriptions-item>
                <el-descriptions-item label="车队交接人员" :span="4">
                  <el-image
                    v-if="loseImage1"
                    style="width: 100px; height: 20px"
                    :src="joinDta.signTeam" @error="loseImage(1)">
                  </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="运输团队押款员" :span="4">
                  <el-image
                    v-if="loseImage2"
                    style="width: 100px; height: 20px"
                    :src="joinDta.signEscortOne" @error="loseImage(2)">
                  </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="运输团队押款员" :span="4">
                  <el-image
                    v-if="loseImage3"
                    style="width: 100px; height: 20px"
                    :src="joinDta.signEscortTwo" @error="loseImage(3)">
                  </el-image>
                </el-descriptions-item>
                <el-descriptions-item :label='signCenter' :span="4">
                  <el-image
                    v-if="loseImage4"
                    style="width: 100px; height: 20px"
                    :src="joinDta.signCenter" @error="loseImage(4)">
                  </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="公交集团监交人" :span="4">
                  <el-image
                    v-if="loseImage5"
                    style="width: 100px; height: 20px"
                    :src="joinDta.signCompany" @error="loseImage(5)">
                  </el-image>
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-dialog>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <span style="aheight: 34px; line-height: 34px;font-size: 14px">共{{ total }} 条 </span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-pagination
          @size-change="changeSize"
          @current-change="changeCurrent"
          :page-sizes="[10, 20, 30, 50]"
          :page-size='size'
          layout="sizes, prev, pager, next"
          :total='total'>
        </el-pagination>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import {selectJoinManage, byJoinId, companyList} from '@/api/basic/clearingaccountingreportexcel'
import {parseTime} from "@/util/date";
import {officeList} from "@/api/admin/office";
import {getObj} from "@/api/admin/company";
import {getByRoleIds} from "@/api/admin/role";

export default {
  data: function () {
    return {
      options: [],
      joinDateValue: [],
      stsValue: '',
      companyIdValue: '',
      joinTypeValue: '',
      roomNameValue: '',
      centerDialogVisible: false,
      joinDetails: {},
      joinDta: {},
      pageSize: 10,
      total: 0,
      detailTitle: '',
      loseImage1: true,
      loseImage2: true,
      loseImage3: true,
      loseImage4: true,
      loseImage5: true,
      signCenter: '',
      size: 10,
      current: 1,
      stsList: ['交接完成', '交接中'],
      joinTypeList: ['实胆交接单', '空胆交接单', '实款包交接单', '空款包交接单'],
      companyNameList: [],
      roomNameList: [],
      roomDisabled: false,
      companyDisabled: false,
      title: '',
      isCenter: false
    }
  },
  methods: {
    clearAll() {
      this.joinDateValue = []
      this.stsValue = ''
      if (this.roomDisabled || this.companyDisabled) {
        this.companyIdValue = this.companyNameList[0].companyId
      } else {
        this.companyIdValue = ''
      }
      this.joinTypeValue = ''
      if (this.roomDisabled) {
        this.roomNameValue = this.roomNameList[0].officeName
      } else if (this.isCenter) {
        this.roomNameValue = ''
        this.roomNameList = []
      }else {
        this.roomNameValue =''
      }
      this.selectJoin()
    },
    setJoin(row) {
      this.joinDta = row
      this.selectJoinDetail()
      const title = this.joinDta.joinType.slice(0, 2)
      this.title = title + '数'
      this.detailTitle = '公交集团' + title + '交接单(' + title + ')'
      if (title.includes('空')) {
        this.signCenter = '清分中心交出人'
      } else {
        this.signCenter = '清分中心接收人'
      }
    },
    selectJoin() {
      selectJoinManage({
        joinDate: this.joinDateValue,
        sts: this.stsValue,
        companyId: this.companyIdValue,
        joinType: this.joinTypeValue,
        roomName: this.roomNameValue,
        current: this.current,
        size: this.size
      }).then(data => {
        const pageData = data.data.data;
        if (pageData != null) {
          this.options = pageData.records
          this.total = pageData.total
          this.current = pageData.current
        } else {
          this.options = []
          this.total = 0
          if (this.current > 0) {
            this.current = 0
            this.selectJoin()
          }
        }
      }).catch(() => {
        this.options.data = {}
      })
    },
    selectJoinDetail() {
      byJoinId({joinId: this.joinDta.id}).then(data => {
        this.joinDetails = data.data.data
        if (data.data.data != null)
          this.centerDialogVisible = true
      })
    },
    changeSize(size) {
      this.size = size
      this.selectJoin()
    },
    changeCurrent(current) {
      this.current = current
      this.selectJoin()
    },
    loseImage(id) {
      debugger
      switch (id) {
        case 1:
          if (this.joinDta.signTeam == null || this.joinDta.signTeam.length == 0) {
            this.loseImage1 = false
          }
          break;
        case 2:
          if (this.joinDta.signEscortOne == null || this.joinDta.signEscortOne.length == 0) {
            this.loseImage2 = false
          }
          break;
        case 3:
          if (this.joinDta.signEscortTwo == null || this.joinDta.signEscortTwo.length == 0) {
            this.loseImage3 = false
          }
          break;
        case 4:
          if (this.joinDta.signCenter == null || this.joinDta.signCenter.length == 0) {
            this.loseImage4 = false
          }
          break;
        default:
          if (this.joinDta.signCompany == null || this.joinDta.signCompany.length == 0) {
            this.loseImage5 = false
          }
      }
    },
    changeDate: function () {
      if (this.joinDateValue.length > 0) {
        const joinDateAny = [];
        this.joinDateValue.forEach(item => {
          joinDateAny.push(parseTime(item, '{y}-{m}-{d}'));
        })
        this.joinDateValue = joinDateAny;
      }
    },
    companyData: function () {
      companyList().then(data => {
        this.companyNameList = data.data.data
      })
    },
    officeData: function () {
      if (this.companyIdValue != null && this.companyIdValue.length > 0) {
        officeList({companyId: this.companyIdValue}).then(data => {
          this.roomNameList = data.data.data
        })
      } else {
        this.roomNameValue = ''
        this.roomNameList = [];
      }
    }
  },
  created() {
    const user = this.$store.getters.userInfo
    const roles = this.$store.getters.roles
    let sysRoles = [];
    getByRoleIds({roleIds: roles}).then(data => {
      const sysRolesData = data.data.data
      sysRolesData.forEach(item => {
        sysRoles.push(item.roleCode)
      })
    })
    if (user.centerId != null && user.centerId.length > 0) {
      this.companyData()
      this.selectJoin();
      this.isCenter = true
    } else {
      if (roles.includes(2) && !roles.includes(8)) {
        officeList({officeId: user.officeId}).then(data => {
          const officeData = data.data.data
          this.roomNameValue = officeData[0].officeName;
          this.roomDisabled = true
          this.companyDisabled = true
          getObj(officeData[0].companyId).then(data => {
            const office = data.data.data;
            this.companyNameList.push(office)
            this.companyIdValue = office.companyId;
            this.selectJoin();
          })
        })
      } else if (roles.includes(8)) {
        getObj(user.companyId).then(data => {
          const company = data.data.data;
          this.companyNameList.push(company)
          this.companyIdValue = company.companyId
          this.companyDisabled = true
          this.officeData()
          this.selectJoin();
        })
      }
    }

  }
}
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}

.el-descriptions-item__label.is-bordered-label.labelColor {
  color: #141415;
  background: #b6b6bb;
}

.my-content {
  color: #141415;
  background: #b6b6bb;
}

.my-contentOne {
  color: #141415;
  font-size: 16px;
  background: #8c8c94;
}
.el-descriptions-item__label.is-bordered-label.labelColorOne{
  color: #141415;
  font-size: 16px;
  background: #8c8c94;
}
.labelColorOne{
  color: #141415;
  font-size: 16px;
  background: #8c8c94;
}
.myTypeface {
  aheight: 30px;
  line-height: 30px;
  font-size: 15px
}
</style>