orbit-ch-web/src/pages/1-main/06-XQJY/xqjyTaskList.vue

<template>
  <div class="top-table-style">
    <el-input v-model="search" placeholder="输入筛选目标点" size="mini"></el-input>
    <el-table
        height="480"
        ref="xqtasklist"
        :data="tableDatas.filter(data=> !search || data.targetName.toLowerCase().includes(search.toLowerCase()))"
        tooltip-effect="light"
        :header-row-style="{background:'rgba(160, 160, 160, 0.3)'}"
        :header-cell-style="{padding:'0px',fontFamily: 'SourceHanSansCN-Regular',color: '#fff',backgroundColor:'transparent'}"
        :cell-style="{'padding':'0px'}"
        :row-style="selectRowStyle"
        @row-click="selectRow"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column v-for="(col, i) in cols" :prop="col.prop" :label="col.name"
                       :key="i"
                       align="center"
                       :width="col.width"
                       show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>


<script>

import {getClickedTagetListDataForxqlbTB} from '@/api/api.js'

export default {
  name: "xqjyTaskList",
  props: [],
  data() {
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      tableDatas: [],
      cols: [
        {
          name: "目标",
          prop: "targetName",
          width: 80
        }, {
          name: "目的",
          prop: "observationPurposeChinese",
          width: 80
        }, {
          name: "状态",
          prop: "statusChinese",
          width: 80
        }, {
          name: "类型",
          prop: "typeChinese",
          width: 80
        }, {
          name: "编号",
          prop: "parentId",
          width: 140
        }],
      search: "",
      selections: [],
      selectId: null
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selections = val;
    },
    selectRow(row) {
      const old = this.selectId
      this.selectId = row.id
      if (old == this.selectId) {
        return
      }
      this.$events.emit("xqjywindowlist", row.parentId)
      this.$emit("select", row)
    },
    selectRowStyle({row}) {
      // console.log(row, index)
      let style = {background: 'rgba(160, 160, 160, 0.3)', height: '30px'};
      this.selections.some(select => {
        if (select.id == row.id) {
          style.background = 'rgba(0, 149, 255, 0.6)'
          return true;
        }
      })
      if (this.selectId == row.id) {
        style.background = '#0095ff';
      }
      return style;
    },
    updateDatas() {
      let parentId = sessionStorage.getItem("parentId");
      parentId = "241022_XQCH_10018"

      getClickedTagetListDataForxqlbTB({
        status: 1,
        parentId,
      }).then(response => {
        let data = []
        if (response.code == 200) {
          data = response.resp
          data.forEach(item => {
            if (item.observationPurpose != null) {
              item.observationPurposeChinese = this.dictionary.observationPurpose[item.observationPurpose]
            }
            if (item.status != null) {
              item.statusChinese = this.dictionary.taskStatus[item.status]
            }
            if (item.type != null) {
              item.typeChinese = this.dictionary.targetType[item.type]
            }
          })
        }
        this.tableDatas = data;
      })
    }
  },
  mounted() {
    let self = this;
    self.updateDatas();
  },
  watch: {
    $route(to) {
      if (to.name === 'xqjyPage') {
        this.updateDatas();
      }
    }
  },
  destroyed() {
    this.$events.$off("xqglXQTBData")
  }
};
</script>

<style lang="scss" scoped>
.top-table-style {
  padding: 70px 20px 0 42px;

  .el-input {
    width: 142px;
    margin: 5px 10px;
    float: right;
    text-align: center;

    ::v-deep(.el-input__inner) {
      border: 1px solid #fff;
      border-radius: 16px;
      background-color: rgba(160, 160, 160, 0.5);
      color: #fff;
    }
  }


  .el-table {
    margin-top: 20px;
    padding: 0 10px;

    ::v-deep .el-table__row:hover {
      cursor: pointer;
      background: #0095ff !important;
    }

  }

  /deep/ .operate-bnt {
    color: #fff;
    background-color: #016dba;
    border: none;
    padding: 6px 6px;
  }
}


//设置表格内容区域+表头背景色为透明色
// /deep/.el-table th,
// /deep/.el-table tr,
// /deep/.el-table tr {
//   background-color: transparent !important;
// }
//设置表格内容区域背景色为透明色
/deep/ .el-table, .el-table__expanded-ceel {
  background-color: transparent !important
}

//表格行与行之间存在8px的间距
::v-deep .el-table__body {
  -webkit-border-vertical-spacing: 8px; //垂直间距
  // -webkit-border-horizontal-spacing:8px //水平间距
}

//设置表格区域内容背景色为透明时，出现表格底部的横线(表格外层的下边框)，以下代码可去掉该横线
/deep/ .el-table:before {
  height: 0
}

//去掉表格内容的下边框--没有成功
/deep/ .el-table td, .el-table th.is-leaf {
  // border-bottom:none !important //去掉表格内容的所有边框
  // border-bottom:1px solid rgba(255,255,255,0.3);
  // border-top:1px solid rgba(255,255,255,0.3)
  // border:1px solid rgba(255,255,255,0.3)
  border: none
}

/deep/ .el-table::after {
  right: -1px
}

//修改表格滚动条样式
//滚动条宽度，width 竖向；height 横向
// /deep/ .el-table__body-wrapper::-webkit-scrollbar{
/deep/ ::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

//滚动条滑块样式
// /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb{
/deep/ ::-webkit-scrollbar-thumb {
  background-color: rgba(160, 160, 160, 0.3) !important;
  border-radius: 2px !important;
}

/deep/ .el-table {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular;
  color: #fff;
  background-color: rgba(160, 160, 160, 0.3);
}

/deep/ .el-table .el-table__cell {
  text-align: center;
}

//取消鼠标滑过某行时，更改背景色
/deep/ .el-table tbody tr:hover > td {
  background-color: transparent !important;
}

</style>