thoth-frontend-test/src/views/projectManage/components/demand.vue

<template>
  <!-- 表头 -->
  <div class="schedule-list">
    <el-table v-if="tableHeader === false" max-height="38px" :data="datas" class="tableHeader" border size="mini" :header-cell-style="{ background: 'rgba(247,247,247,1)', color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500'}" @selection-change="changeCheckout(1)">
      <el-table-column v-if="locking" type="selection" width="50" align="center" />
      <el-table-column prop="date" label="任务" width="300" />
      <el-table-column prop="taskStatus" label="任务状态" width="200" />
      <el-table-column prop="type" label="类型" min-width="70" />
      <el-table-column prop="desc" label="描述" min-width="150" />
      <el-table-column prop="seperateDaysNoHoliday" label="排期" min-width="160" />
      <el-table-column prop="dayLength" label="时长" min-width="50" />
      <el-table-column prop="peopleList" label="参与人员" min-width="150" />
      <el-table-column prop="dayLength" label="关联任务" min-width="100" />
      <el-table-column label="操作" width="120" />
    </el-table>
    <div v-if="tableHeader === true" class="Layout_space_between" style="height: 40px;;border: 1px solid #EBEEF5;">
      <div class="Layout_flex_start" style="width: 90%">
        <el-checkbox v-model="checkAlls" style="padding: 17.5px; line-height: 20px; border-right: 1px solid #EBEEF5" @change="changeCheckout(checkAlls)" />
        <div style="margin: 0 30px 0 10px" class="endCheck"> 已选择 <span style="color:rgba(64,158,255,1) ">{{ taskList.length }}</span> 个</div>
        <div class="endCheck cursorPo" @click="clickAddScheduling(1)"><i class="el-icon-document" /> 添加排期</div>
      </div>
      <div class="endCheck cursorPo" @click="Deselect">取消选择</div>
    </div>
    <!-- 表头 -->

    <!-- 任务表格 -->
    <el-table ref="taskList" :data="tableData" :cell-class-name="addClass" :header-cell-style="{ background: 'rgba(247,247,247,1)', color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500'}" border :show-header="false" @selection-change="handleSelectionChange">
      <el-table-column v-if="locking" type="selection" width="50" align="center" />
      <el-table-column label="任务" width="300" align="left">
        <template slot-scope="scope">
          <div v-if="!scope.row.vsInput" @mouseover="scope.row.vVisible = true" @mouseout="scope.row.vVisible = false">
            <div class="templatName">
              <div class="involveApp-top-bottom">
                <span class="el-involveApp">{{ scope.row.involveAppString || "" }}</span>
              </div>
              <el-tooltip class="item" effect="dark" :content="scope.row.moduleInfoName" placement="top">
                <span v-if="scope.row.moduleInfoName !== null" ref="Simulation">{{ scope.row.moduleInfoName.length >= 24 ? scope.row.moduleInfoName.substring(0,25) + '...' : scope.row.moduleInfoName }}</span>
              </el-tooltip>
            </div>

            <div class="templatTaskName cursorPo" @click="clickTemplatTaskName(scope.row.id)">{{ scope.row.name }}</div>

            <div class="templatCreator">
              <el-tooltip class="item" effect="dark" content="点击修改" placement="top">
                <el-popover placement="bottom" title="开发负责人" width="400" trigger="click">
                  <div class="blueStr" />
                  <el-input v-model="form_query.rdOwner" clearable size="small" style="width: 100%; margin-bottom: 10px;" placeholder="请输入姓名或邮箱前缀" @input="remoteMethod" />
                  <div style="height: 200px; overflow: hidden; overflow-y: auto;">
                    <div v-for="(item, index) in memberIDAP" :key="index" class="Layout_space_between involveApp-top-bottom cursorPo" @click="changeTaskName(scope.row, item, 1)">
                      <span class="item-detail">{{ item.deptName }}</span>
                      <span class="item-details" style="min-width:80px">{{ item.name }}</span>
                      <span class="item-detail">{{ item.idap }}</span>
                    </div>
                  </div>
                  <span slot="reference" class="cursorPo" @click="setRdOwner(scope.row.rdObject.name)">开发负责人:{{ scope.row.rdObject.name !== null? scope.row.rdObject.name: '无' }}</span>
                </el-popover>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="点击修改" placement="top">
                <el-popover placement="bottom" title="测试负责人" width="400" class="iconPadding" trigger="click">
                  <div class="blueStr" />
                  <el-input v-model="form_query.name" clearable size="small" style="width: 100%; margin-bottom: 10px;" placeholder="请输入姓名或邮箱前缀" @input="remoteMethod" />
                  <div style="height: 200px; overflow: hidden; overflow-y: auto;">
                    <div v-for="(item, index) in memberIDAP" :key="index" class="Layout_space_between involveApp-top-bottom cursorPo" @click="changeTaskName(scope.row, item, 2)">
                      <span class="item-detail">{{ item.deptName }}</span>
                      <span class="item-details" style="min-width:80px">{{ item.name }}</span>
                      <span class="item-detail">{{ item.idap }}</span>
                    </div>
                  </div>
                  <span slot="reference" class="cursorPo" @click="setRemoteMethod(scope.row.qaObject.name)">测试负责人: {{ scope.row.qaObject.name !== null ? scope.row.qaObject.name: '无' }}</span>
                </el-popover>
              </el-tooltip>
            </div>

            <div class="Layout_space_between" style="margin-bottom: 10px;">
              <span v-if="scope.row.isDirectlyFromDpm === 0 || scope.row.isDirectlyFromDpm === 1">
                <el-tooltip class="item" effect="dark" :content="scope.row.relatedDpmTaskInfo.taskId + scope.row.relatedDpmTaskInfo.name" placement="top">
                  <img class="cursorPo img-logo" src="@/assets/home_images/WX20200914-141851@2x.png" @click="jump(scope.row.dpmUrl)">
                </el-tooltip>
                <i v-if="scope.row.isDirectlyFromDpm === 0" class="el-icon-circle-close sty-icon cursorPo" @click="delete_dpl(scope.row.id)" />
              </span>
              <el-popover v-if="scope.row.isDirectlyFromDpm === -1" placement="bottom" title="关联望岳任务" width="400" trigger="click">
                <div class="blueStr" />
                <div v-for="(item, index) in dplOption" :key="index" class="Layout_space_between involveApp-top-bottom cursorPo" @click="setRelation(item, scope.row.id)">
                  <span class="item-detail">{{ item.moduleInfoName }}</span>
                  <span class="item-details">{{ item.name }}</span>
                  <span class="item-detail">{{ item.taskId }}</span>
                </div>
                <div v-if="scope.row.isDirectlyFromDpm === -1" slot="reference" class="btn-dpl" style=" cursor: pointer;" @click="getDplList(scope.row.id)"> 关联望岳 </div>
              </el-popover>

              <div v-if="locking" v-show="scope.row.vVisible" class="iconEdit">
                <el-tooltip class="item cursorPo lineHeight" effect="dark" :content="scope.row.isScheduleLocked === 1? '点击解锁排期' : '点击锁定排期'" placement="top">
                  <div :class="scope.row.isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" @click="changeSchedule(scope.row)" />
                </el-tooltip>
                <i class="el-icon-edit-outline cursorPo lineHeight" @click="editTask(scope.row)" />
                <i v-show="scope.row.isScheduleLocked === 0" class="el-icon-circle-plus-outline cursorPo lineHeight" @click="clickAddScheduling(2,scope.row)" />
                <el-popover v-if="scope.row.isDirectlyFromDpm === 0 || scope.row.isDirectlyFromDpm === 1" placement="bottom" title="同步排期至望岳" width="400" trigger="click">
                  <div class="blueStr" />
                  <div class="synchronization">是否需要同步当前任务的排期到望岳<span style="color: rgba(230,162,60,100%);"> {{ taskDpl }}</span> ?</div>
                  <div v-if="taskDataList.length > 0" class="synchronization">以下任务与该望岳任务也关联，排期将一并同步，请知悉！</div>
                  <div v-for="(item, index) in taskDataList" :key="index" class="Layout_space_between involveApp-top-bottom">
                    <span class="item-detail">{{ item.taskId }}</span>
                    <span class="item-details" style="min-width:200px">{{ item.name }}</span>
                    <span class="item-detail">{{ item.moduleInfoName }}</span>
                  </div>
                  <div align="right" style="margin-top:20px;">
                    <el-button size="mini" @click="$refs.Simulation.click()">取 消</el-button>
                    <el-button size="mini" type="primary" @click="taskSyncScheduleToDpm(scope.row.id, taskDataList)">确 定</el-button>
                  </div>
                  <i slot="reference" class="el-icon-sort cursorPo deg" @click="getTaskList(scope.row)" />
                </el-popover>
              </div>
            </div>
          </div>
          <el-input v-if="scope.row.vsInput" ref="taskName" v-model="taskName" type="textarea" rows="4" placeholder="请输入内容" maxlength="150" show-word-limit @blur="changeTaskName(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column width="200" align="center">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.status"
            :class="{
              'status0':scope.row.status===0,
              'status1':scope.row.status > 0 && scope.row.status <100,
              'status2':scope.row.status===100,
              'public_btn':scope.row.status!==10 || scope.row.status!==40 || scope.row.status!==20 || scope.row.status!==30,
              'public_btn1':scope.row.status===40,
              'public_btn2':scope.row.status===10,
              'public_btn3':scope.row.status===20 || scope.row.status===30
            }"
            size="mini"
            @change="changeStatus(scope.row)"
          >
            <el-option v-for="item in scope.row.availableStatusList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="任" style="padding: 20px;">
        <template slot-scope="scope">
          <schedule-list :id="scope.row.id" ref="taskSchedule" :locking="locking" :select-task-list="taskList" :required-list="taskScheduleLists(scope.row.id)" @listByTask="listByTask(requirementId)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 任务表格 -->

    <!-- 日期详情 -->
    <el-row><span class="demandLayout">交付日期：</span><span class="demandeta">{{ dataList.endTime }}</span></el-row>
    <el-row><span class="demandLayout">排期：</span><span class="demandeta">{{ dataList.startTime || '' }} ~ {{ dataList.endTime }}</span></el-row>
    <el-row :gutter="20">
      <el-col v-for="(item, index) in scheduleDetail" :key="index" :span="6"><span class="demandLayout">{{ index }}：</span><span class="demandeta">{{ item.startTime }} ~ {{ item.endTime }}</span></el-col>
    </el-row>
    <el-row><span class="demandLayout">预计上线版本：</span> <span v-for="item in preOnlineVersion" :key="item" class="demandeta">{{ item }}</span></el-row>
    <!-- 日期详情 -->

    <!-- 排期锁定弹窗 -->
    <schedule ref="ScheduleEvent" :visible.sync="scheduleVisble" :name="'任务'" :is-schedule-locked="isScheduleLocked" :require-id="Number(taskId)" @updataData="listByTask(requirementId)" />
    <!-- 排期锁定弹窗 -->

    <task-dialog v-if="showTaskDialog" :show.sync="showTaskDialog" :task-id="taskIdObject.id" :status-name="taskIdObject.statusString" @getList="listByTask(requirementId)" />
  </div>
</template>
<script>
import { listByRequire, taskListAvailableDpmTask, taskSetTaskRelated, taskDeleteRelationship, taskShowRelatedDpmTask, taskSyncScheduleToDpm } from '@/api/requirement.js'
import scheduleList from '@/views/projectManage/components/scheduleList.vue'
import '@/styles/PublicStyle/index.scss' // 通用css
import { configShowTaskStatusEnum } from '@/api/taskIndex'
import { taskUpdate } from '@/api/taskIndex'
import { memberQueryMemberInfoByIDAPorName } from '@/api/projectIndex'
import schedule from '@/views/projectManage/schedule' // 排期锁定弹窗
import taskDialog from '@/views/projectManage/taskList/dialog/taskDialog' // 任务状态修改（已上线/已提测/已准出）
export default {
  components: {
    scheduleList,
    schedule,
    taskDialog
  },
  props: {
    requiredList: {
      type: [Object, Array],
      default: () => null,
      required: false
    }
  },
  data() {
    return {
      requirementId: Number(this.$route.query.id),
      allStatus: [], // task状态
      taskDataList: [], // 同步排期到望岳的任务
      memberIDAP: [],
      tableData: [],
      checkAlls: false,
      taskIdObject: {},
      showTaskDialog: false,
      taskScheduleList: [],
      scheduleList: [],
      datas: [{
        date: '',
        type: '',
        desc: '',
        seperateDaysNoHoliday: '',
        dayLength: '',
        peopleList: ''
      }],
      dplOption: [],
      taskDpl: '',
      form_query: {
        rdOwner: null
      },
      nowChangeTask: null, // 当前正在改变的任务对象
      isScheduleLocked: '', //  当前排期的状态
      taskId: '', // taskID
      scheduleVisble: false, // 排期锁定
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      taskList: [], // 全选list
      tableHeader: false, // 表头切换
      taskName: '', // taskname
      scheduleDetail: {}, // 用例/开发/提测/测试/准出/上线
      preOnlineVersion: [], // 预计上线版本
      dataList: {}, // 排期
      taskScheduleEvent: [], // 排期类型
      locking: true, // 查看历史记录锁定能
      isDelete: false // 删除排期操作
    }
  },
  watch: {
    requiredList: {
      handler(newV, old) {
        if (newV.length === 0) {
          console.log('没有数据')
        } else {
          this.tableData = newV.taskDetailList // 任务list
          this.dataList = newV // 排期
          this.scheduleList = newV.scheduleDetailRespons || []
          this.scheduleDetail = newV.timeInfos // 用例/开发/提测/测试/准出/上线
          this.preOnlineVersion = newV.preOnlineVersion // 预计上线版本
          this.taskScheduleEvent = newV.scheduleDetailRespons // 排期详情
          this.locking = false
          this.tableHeader = false
          if (this.tableData !== null) {
            this.tableData = this.tableData.map(item => ({
              ...item,
              vVisible: false,
              vsInput: false
            }))
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.configShowTaskStatusEnum()
  },
  methods: {
    async listByTask(id) { // 获取排期列表
      this.taskList = []
      this.scheduleVisble = false
      const res = await listByRequire(id)
      if (res.code === 200) {
        this.$nextTick(() => {
          this.tableData = res.data.taskDetailList // 任务list
          this.dataList = res.data // 排期
          this.scheduleList = res.data.scheduleDetailRespons || []
          this.scheduleDetail = res.data.timeInfos // 用例/开发/提测/测试/准出/上线
          this.preOnlineVersion = res.data.preOnlineVersion // 预计上线版本
          this.taskScheduleEvent = res.data.scheduleDetailRespons // 排期详情
          this.tableData = this.tableData.map(item => ({
            ...item,
            vVisible: false,
            vsInput: false
          }))
        })
      }
    },

    async configShowTaskStatusEnum() {
      const res = await configShowTaskStatusEnum(localStorage.getItem('bizId'))
      if (res.code === 200) {
        this.allStatus = res.data.taskStatus
      }
    },

    async taskSyncScheduleToDpm(id) {
      const res = await taskSyncScheduleToDpm(id)
      if (res.code === 200) {
        this.$refs.Simulation.click()
        this.$message({ message: '同步排期成功', type: 'success', offset: 150 })
      }
    },

    async getDplList(taskId) {
      const res = await taskListAvailableDpmTask(taskId)
      if (res.code === 200) {
        this.dplOption = res.data
      }
    },

    async getTaskList(item) {
      this.taskDpl = item.relatedDpmTaskInfo.taskId + item.relatedDpmTaskInfo.name
      const res = await taskShowRelatedDpmTask(item.id)
      if (res.code === 200) {
        this.taskDataList = res.data
      }
    },

    async changeStatus(e) { // 状态改变
      if (e.status === 70 || e.status === 90 || e.status === 100) {
        this.taskIdObject = e
        this.allStatus.map(item => {
          item.code === e.status ? this.taskIdObject.statusString = item.msg : ''
        })
        this.showTaskDialog = true
        this.nowChangeTask = e
        return
      } else {
        const user = {
          name: localStorage.getItem('username'),
          ename: localStorage.getItem('realname'),
          id: ''
        }
        const taskInfoDO = e
        const resTask = await taskUpdate({ taskInfoDO, user })
        if (resTask.code === 200) {
          this.listByTask(this.requirementId)
          this.$message({ message: '修改成功', type: 'success', offset: 150 })
        }
      }
    },

    addClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        return 'cell-grey'
      }
    },

    setRemoteMethod(val) {
      this.form_query.name = val
      this.remoteMethod(val)
    },
    async remoteMethod(query) {
      const res = await memberQueryMemberInfoByIDAPorName({ memberIDAP: query })
      this.memberIDAP = res.data
    },
    setRdOwner(e) {
      this.$set(this.form_query, 'rdOwner', e)
      this.remoteMethod(e)
    },
    jump(url) {
      window.open(url, '_blank')
    },
    async setRelation(item, taskId) { // 关联望月任务
      const res = await taskSetTaskRelated(taskId, item.id)
      if (res.code === 200) {
        this.listByTask(this.requirementId)
        this.$refs.Simulation.click()
        this.$message({ message: '关联成功', type: 'success', offset: 150 })
      }
    },
    async delete_dpl(val) { // task断开和望月的关联
      const res = await taskDeleteRelationship(val)
      if (res.code === 200) {
        this.listByTask(this.requirementId)
        this.$message({ message: '已取消关联', type: 'success', offset: 150 })
      }
    },
    lockingchange() {
      this.locking = true
    },
    changeSchedule(ele) { // 修改锁定状态
      if (this.dataList.isScheduleLocked === 1 && ele.isScheduleLocked === 1) {
        this.$message({ message: '无法解锁，请先变更归属需求的排期状态为未锁定状态！', type: 'error', duration: 3000, offset: 150 })
      } else {
        this.isScheduleLocked = ele.isScheduleLocked
        this.taskId = ele.id
        this.scheduleVisble = true
      }
    },
    async changeTaskName(val, value, key) { // 修改taskname
      if (value) {
        console.log(val, value)
        key === 1 ? val.rdOwner = value.idap : ''
        key === 2 ? val.qaOwner = value.idap : ''
      }
      val.vsInput = false
      val.vVisible = false
      val.name = this.taskName.split(' ').join('').length === 0 ? val.name : this.taskName
      const taskInfoDO = val
      const user = { name: this.userNames, ename: this.userInformation, id: '' }
      const res = await taskUpdate({ taskInfoDO, user })
      if (res.code === 200) {
        this.$refs.Simulation.click()
        this.listByTask(this.requirementId)
        this.$message({ message: '任务更新成功', type: 'success', duration: 1000, offset: 150 })
      }
    },
    clickAddScheduling(index, ele) { // 模拟调用自组件方法
      if (index === 2) {
        this.taskList = []
        this.taskList.push(ele)
      }
      const taskA = []
      this.taskList.map(item => {
        if (item.isScheduleLocked === 1) {
          taskA.push(item.taskIdSting)
        }
      })
      if (taskA.length !== 0) {
        this.$message({ message: '任务 ' + taskA + ' 的排期已锁定，请先解锁排期后再添加排期', type: 'warning', offset: 150 })
        return
      }
      this.$refs.taskSchedule.addSchedule()
    },
    clickTemplatTaskName(e) { // 任务名称店家跳转
      const { href } = this.$router.resolve({ name: '任务详情', query: { id: e }})
      window.open(href, '_blank')
    },
    editTask(val) { // 点击修改taskName
      val.vsInput = true
      this.taskName = val.name
      this.$nextTick(() => {
        this.$refs.taskName.focus()
      })
    },
    changeCheckout(rows) {
      if (rows) {
        this.tableData.forEach(row => {
          this.$refs.taskList.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.taskList.clearSelection()
      }
    },
    Deselect() { // 取消选择
      this.taskList.forEach(row => {
        this.$refs.taskList.clearSelection()// 调用这个方法
      })
      this.tableHeader = false
      this.taskList = []
    },
    handleSelectionChange(val) {
      this.taskList = val
      this.taskList.length === this.tableData.length ? this.checkAlls = true : this.checkAlls = false
      if (this.taskList.length > 0) {
        this.tableHeader = true
      } else {
        this.tableHeader = false
      }
    },
    taskScheduleLists(id) {
      for (var key in this.taskScheduleEvent) {
        if (id === Number(key)) {
          return this.taskScheduleEvent[key]
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.item-detail {
    min-width:110px;
    color: #999999;
    font-size: 12px;
    overflow:hidden
  }
  .item-details {
    color: #333333;
    font-size: 12px;
    overflow:hidden
  }
.templatName {
  font-size:12px;
  font-family:MicrosoftYaHei;
  line-height:14px;
  color:rgba(102,102,102,1);
  opacity:1;
  margin: 5px 0;
}
.templatTaskName {
  font-size:14px;
  font-family:MicrosoftYaHei;
  line-height:23px;
  color:rgba(51,51,51,1);
  margin-right: 5px;
  opacity:1;
}
.lineHeight {
  line-height: inherit;
}
.cursorPo:hover {
  color:#409EFF;
  cursor: pointer;
}
.templatCreator {
  font-size:12px;
  font-family:MicrosoftYaHei;
  line-height:14px;
  color:rgba(102,102,102,1);
  opacity:1;
  margin: 5px 0;
}
.demandLayout {
  display: inline-block;
  // width: 100px;
  margin: 10px 0;
  font-size:14px;
  line-height:14px;
  color:rgba(102,102,102,1);
  opacity:1;
}
.demandeta {
  font-size:12px;
  font-family:MicrosoftYaHei;
  line-height:14px;
  color:rgba(51,51,51,1);
  opacity:1;
}
.iconEdit {
  width:100px;
  background:rgba(245,245,245,1);
  opacity:1;
  padding: 2px 10px;
  border-radius:20px;
  display: flex;
  justify-content: space-between;
}
.tableHeader {
  >>> .el-table__empty-block{
    display: none;
  }
}

.involveApp-top-bottom {
 margin: 10px 0;
}

.iconPadding {
  margin-left: 5px;
}
.schedule-list {
 /deep/ .el-table td {
    padding: 0;
 }
}
.schedule-list {
  margin: 0 20px;
  padding: 0;
}
.img-logo {
    display: inline-block;
    width: 60px;
  }
>>>.el-table, .el-table__expanded-cell{
  background:rgba(248,248,248,0.6);
}
.sty-icon {
  position: absolute;
  left: 63px;
  bottom: 30px;
  background: #eee;
  border-radius: 50%;
}
.el-involveApp {
  font-size:10px;
  font-family:MicrosoftYaHei;
  line-height:12px;
  color:rgba(64,158,255,1);
  opacity:1;
}
.endCheck {
  font-size:14px;
  font-family:Microsoft Sans Serif;
  font-weight:400;
  line-height:16px;
  margin-right: 10px;
  color:rgba(102,102,102,1);
  opacity:1;
}
@mixin setStatus($color) {
  input {
    color:$color;
    border: 1px solid $color;
  }
  >>> .el-select__caret{
    color:$color;
  }
  >>> .el-input__inner{
    color:$color;
    border-color: $color;
  }
  >>> .el-input__inner:focus {
    border-color: $color;
  }
}
.status0 {
  @include setStatus(#409EFF)
}
.status1{
  @include setStatus(#FF8952)
}
.status2 {
  @include setStatus(#7ED321)
}
.deg {
  transform:rotate(90deg);
  -ms-transform:rotate(-90deg); /* Internet Explorer 9*/
  -moz-transform:rotate(-90deg); /* Firefox */
  -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
  -o-transform:rotate(-90deg); /* Opera */
}
.blueStr {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 22px;
  left: 15px;
}
.synchronization {
  font-size: 14px;
  font-family: Microsoft Sans Serif;
  font-weight: 400;
  line-height: 25px;
  color: #333333;
  opacity: 1;
}
.btn-dpl {
  color: #fff;
  font-size: 12px;
  background: #409EFF;
  opacity: 1;
  border-radius: 5px;
  padding: 0 6px;
}
</style>
<style>
 .el-popover__title {
    color: #333333;
    padding-left: 10px;
}
 .cell-grey .cell {
   padding: 0 !important;
 }
.el-tooltip__popper.is-dark {
  background:rgba(121,132,150,0.8);
  color: #FFF;
}
</style>