el-table 样式设置

17 篇文章 0 订阅

<template>

  <div class="custom-table">

    <template v-if="name === '环沪增援力量'">

      <!-- 环沪增援--指挥部信息 -->

      <div class="zhb-box">

        <el-table

          :data="tableData1"

          :header-row-class-name="'header-class'"

          :header-cell-class-name="'header-cell-class'"

          :row-class-name="'row-class'"

          :cell-class-name="'row-cell-class'"

        >

          <template v-for="(item, index) in column1">

            <el-table-column

              :key="index"

              :prop="item.prop"

              :label="item.label"

              :width="item.width"

              :align="item.align"

              header-align="left"

            >

              <template slot-scope="scope">

                <el-tooltip

                  effect="dark"

                  :open-delay="300"

                  :content="scope.row[item.prop] || ''"

                  placement="top"

                >

                  <span

                    style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"

                  >

                    {{ scope.row[item.prop] }}

                  </span>

                </el-tooltip>

              </template>

            </el-table-column>

          </template>

        </el-table>

      </div>

      <!-- 环沪增援--支队信息 -->

      <div class="zd-box box-scrollbar-bottom">

        <!-- 环沪--增援总队 -->

        <div class="zd-item-1">

          <el-table

            :data="tableData21"

            :header-row-class-name="'header-class'"

            :header-cell-class-name="'header-cell-class'"

            :row-class-name="'row-class'"

            :cell-class-name="'row-cell-class'"

          >

            <el-table-column prop="gw" label="岗位" width="120" align="left">

            </el-table-column>

            <el-table-column label="增援总队">

              <template v-for="(item, index) in column2[0]">

                <el-table-column

                  :key="index"

                  :prop="item.prop"

                  :label="item.label"

                  :width="item.width"

                  :align="item.align"

                  header-align="left"

                >

                  <template slot-scope="scope">

                    <el-tooltip

                      effect="dark"

                      :open-delay="300"

                      :content="scope.row[item.prop] || ''"

                      placement="top"

                    >

                      <span

                        style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"

                      >

                        {{ scope.row[item.prop] }}

                      </span>

                    </el-tooltip>

                  </template>

                </el-table-column>

              </template>

            </el-table-column>

          </el-table>

        </div>

        <!-- 环沪--上海总队 -->

        <div class="zd-item-2">

          <el-table

            :data="tableData22"

            :header-row-class-name="'header-class'"

            :header-cell-class-name="'header-cell-class'"

            :row-class-name="'row-class'"

            :cell-class-name="'row-cell-class'"

          >

            <el-table-column prop="gw" label="岗位" width="120" align="left">

            </el-table-column>

            <el-table-column label="上海总队">

              <template v-for="(item, index) in column2[1]">

                <el-table-column

                  :key="index"

                  :prop="item.prop"

                  :label="item.label"

                  :width="item.width"

                  :align="item.align"

                  header-align="left"

                >

                  <template slot-scope="scope">

                    <el-tooltip

                      effect="dark"

                      :open-delay="300"

                      :content="scope.row[item.prop] || ''"

                      placement="top"

                    >

                      <span

                        style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"

                      >

                        {{ scope.row[item.prop] }}

                      </span>

                    </el-tooltip>

                  </template>

                </el-table-column>

              </template>

            </el-table-column>

          </el-table>

        </div>

      </div>

      <!-- 环沪增援--附件信息 -->

      <div class="file-box">

        <div class="file-list">

          <template v-for="(item, index) in fileList">

            <div

              :key="index"

              class="file-item"

              @click="openFile(item.xh, item.dz)"

            >

              <span class="file-item-name">{{ item.fjmc }}</span>

            </div>

          </template>

        </div>

        <el-dialog

          title="环沪增援指挥架构图"

          :visible.sync="fileImgDialogVisible"

          :append-to-body="true"

          :modal="false"

          custom-class="custom-dialog custom-hhimg-dialog"

        >

          <div class="img-box">

            <img :src="fileImg" alt="" />

          </div>

        </el-dialog>

      </div>

    </template>

    <template v-else>

      <el-table

        :data="tableData"

        :header-row-class-name="'header-class'"

        :header-cell-class-name="'header-cell-class'"

        :row-class-name="'row-class'"

        :cell-class-name="'row-cell-class'"

        :height="pagination.size === 12 ? 662 : 714"

        @cell-click="handleCellClick"

      >

        <template v-if="name === '器械装备信息'">

          <el-table-column label="序号" type="index" align="left" width="180">

          </el-table-column>

        </template>

        <template v-for="(item, index) in column">

          <el-table-column

            :key="index"

            :prop="item.prop"

            :label="item.label"

            :width="item.width"

            :align="item.align"

            header-align="left"

          >

            <template slot-scope="scope">

              <el-tooltip

                effect="dark"

                :open-delay="300"

                :content="scope.row[item.prop] || ''"

                placement="top"

              >

                <span

                  style="width: 100%; display: inline-block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"

                >

                  {{ scope.row[item.prop] }}

                </span>

              </el-tooltip>

            </template>

          </el-table-column>

        </template>

        <!-- <template v-if="name === '微型消防站'">

          <el-table-column label="器材装备信息" width="180" align="left">

            <template slot-scope="scope">

              <div

                style="cursor: pointer;color: #73fbfd;"

                @click="showDeviceDialog(scope.$index, tableData)"

              >

                <span>查看明细</span>

              </div>

            </template>

          </el-table-column>

        </template> -->

      </el-table>

      <!-- 分页 -->

      <el-pagination

        v-show="pagination.total > pagination.size"

        background

        layout="total, prev, pager, next"

        :page-size.sync="pagination.size"

        :current-page="pagination.page"

        :total="pagination.total"

        :hide-on-single-page="false"

        @current-change="currentChange"

      >

      </el-pagination>

    </template>

  </div>

</template>

<script>

import {

  getZzdzbqcv4,

  getHhzyllZhbxx,

  getHhzyllJtxx,

  getHhzyllSelFjxx,

} from "../../api/left";

import cityMap from "../../mixins/cityMap";

import { mapGetters, mapActions } from "vuex";

import unitMap from "../../mixins/rightUnitMap";

import { cloneObject } from "../../untils/util";

export default {

  name: "CustomTable",

  components: {},

  mixins: [cityMap, unitMap],

  props: {

    name: {

      type: String,

      default: "",

    },

    tableData: {

      type: Array,

      required: true,

      default: () => [],

    },

    column: {

      type: Array,

      required: true,

      default: () => [],

    },

    pagination: {

      type: Object,

      required: true,

      default: () => {

        return { page: 0, size: 0, total: 0 };

      },

    },

  },

  data() {

    return {

      devicceTitle: "",

      fileList: [], // 附件信息

      fileImg: "", // 附件图片

      fileImgDialogVisible: false,

      tableData1: [], // 环沪 -- 指挥部信息

      tableData21: [], // 环沪 -- 支队信息--增援总队

      tableData22: [], // 环沪 -- 支队信息--上海总队

      column1: [

        {

          prop: "zhbmc",

          label: "指挥部",

          width: 220,

          align: "left",

        },

        {

          prop: "llrxm",

          label: "联络员",

          width: 120,

          align: "left",

        },

        {

          prop: "zw",

          label: "部职别",

          width: 280,

          align: "left",

        },

        {

          prop: "hh",

          label: "呼号",

          width: 80,

          align: "left",

        },

        {

          prop: "sjhm",

          label: "手机号码",

          width: 180,

          align: "left",

        },

        {

          prop: "wxdh",

          label: "卫星电话",

          align: "left",

        },

      ], // 环沪 -- 指挥部信息

      column2: [

        [

          {

            prop: "zyll",

            label: "增援力量",

            width: 280,

            align: "left",

          },

          {

            prop: "lly",

            label: "联络员",

            width: 120,

            align: "left",

          },

          {

            prop: "zw",

            label: "部职别",

            width: 280,

            align: "left",

          },

          {

            prop: "hh",

            label: "呼号",

            align: "left",

          },

          {

            prop: "sjhm",

            label: "手机号码",

            width: 180,

            align: "left",

          },

          {

            prop: "wxdh",

            label: "卫星电话",

            width: 180,

            align: "left",

          },

        ],

        [

          {

            prop: "lly",

            label: "联络员",

            width: 120,

            align: "left",

          },

          {

            prop: "zw",

            label: "部职别",

            width: 280,

            align: "left",

          },

          {

            prop: "hh",

            label: "呼号",

            align: "left",

          },

          {

            prop: "sjhm",

            label: "手机号码",

            width: 180,

            align: "left",

          },

          {

            prop: "wxdh",

            label: "卫星电话",

            width: 180,

            align: "left",

          },

        ],

      ], // 环沪 -- 支队信息:0:增援总队;1:上海总队

    };

  },

  computed: {},

  watch: {

    name(val) {

      if (val === "环沪增援力量") {

        this.getHhTableData();

        this.getHhzyllSelFjxx();

      }

    },

  },

  created() {},

  mounted() {},

  destroyed() {},

  methods: {

    ...mapActions(["SetShowSa", "setIsTablePointDialog"]),

    /* 环沪增援--打开附件 */

    openFile(index, filePath) {

      if (index !== "7") {

        window.open(`http://10.107.31.196:14204/${filePath}`, "_blank");

      } else {

        this.fileImg = `http://10.107.31.196:14204/${filePath}`;

        this.fileImgDialogVisible = true;

      }

    },

    /* 环沪增援--附件信息 */

    getHhzyllSelFjxx() {

      getHhzyllSelFjxx({

        taskId: "1632992194707",

      })

        .then((result) => {

          this.fileList = result.data;

          this.fileList.sort((a, b) => {

            return a.xh - b.xh;

          });

        })

        .catch((err) => {});

    },

    /* 环沪增援力量表格 */

    getHhTableData() {

      let params = {

        taskId: "1632992194707",

      };

      Promise.all([getHhzyllZhbxx(params), getHhzyllJtxx(params)])

        .then((result) => {

          this.tableData1 = result[0].data;

          this.tableData21 = result[1].data.filter((el) => {

            return el.dw === "增援总队";

          });

          this.tableData22 = result[1].data.filter((el) => {

            return el.dw === "上海总队";

          });

          this.tableData21.sort((a, b) => {

            return a.gw - b.gw;

          });

          this.tableData22.sort((a, b) => {

            return a.gw - b.gw;

          });

        })

        .catch((err) => {});

    },

    /* 点击表单行 */

    handleCellClick(row, column, cell, event) {

      let data = cloneObject(row);

      if (this.name === "安保小组") {

        let activeIcon = require("../../assets/point/巡馆人员.png");

        // this.handlePoints([data], "add", activeIcon, "zy");

      }

      let delMapPointArr = ["专家库", "巡逻车", "周边停车场"];

      if (!delMapPointArr.includes(this.name) && row.jd && row.wd) {

        this.flyTo({

          x: row.wd,

          y: row.jd,

          z: 7,

        });

      }

      this.setIsTablePointDialog(false);

      if (this.name !== "安保小组") {

        this.SetShowSa("");

        this.deletePoints("abxzzy");

      }

      if (this.name !== "分指挥点") {

        this.SetShowSa("");

        this.deletePoints("fenzhihuisuo");

      }

      if (this.name !== "驻防车辆") {

        this.SetShowSa("");

        this.deletePoints("zfcl_");

      }

    },

    /* 翻页时返回当前页码 */

    currentChange(current) {

      this.$emit("currentChange", current);

    },

    /* 点击自定义显示装备表格 */

    showDeviceDialog(index, data) {

      this.devicceTitle = data[index].wzmc;

      this.getZzdzbqcv4(data[index].xh);

    },

    /* 获取器械设备信息 */

    getZzdzbqcv4(xh) {

      getZzdzbqcv4({

        tag: xh,

        taskId: "1632992194707",

      })

        .then((result) => {

          result.data.map((el) => {

            el.jldw = el.jldw === null ? "个" : el.jldw;

            el.trzqzbsl = el.trzqzbsl + el.jldw;

          });

          this.$emit("currentDevice", {

            data: result,

            title: this.devicceTitle,

          });

        })

        .catch((err) => {});

    },

  },

};

</script>

<style lang="less">

.custom-table {

  width: 100%;

  // 标题行

  .header-class {

    background: #0a4a59;

    border: 1px solid #075676;

    border-radius: 3px;

  }

  // 标题单元格

  .header-cell-class {

    font-size: 22px;

    font-family: Source Han Sans CN, Source Han Sans CN-Medium;

    font-weight: 500;

    color: #ffffff;

    background: #0a4a59 !important;

    letter-spacing: 1px;

    border: unset !important;

    .cell {

      line-height: unset;

    }

  }

  // 数据行

  .row-class {

    background: #06242d;

    border: 1px solid #075676;

    border-radius: 3px;

    cursor: pointer;

  }

  // 数据单元格

  .row-cell-class {

    font-size: 20px;

    font-family: Source Han Sans CN, Source Han Sans CN-Regular;

    font-weight: 400;

    color: #ffffff;

    border: unset !important;

    background: #06242d;

    letter-spacing: 1px;

  }

  // 表格

  .el-table {

    background-color: transparent;

    &::before {

      height: unset;

    }

    // 空状态

    .el-table__empty-block {

      font-size: 22px;

      background: #06242d;

      .el-table__empty-text {

        color: #ffffff;

      }

    }

    .cell.el-tooltip {

      pointer-events: none;

    }

    // 合并头背景

    thead.is-group th {

      background: #0a4a59;

    }

    // 边框

    .el-table--border th {

      border: 0 !important;

    }

    // 右侧滚动条占用宽度

    th.gutter {

      background: transparent !important;

    }

  }

  // 合并表格的边框

  .el-table--border,

  .el-table--group {

    border: unset !important;

  }

  // 滚动条

  .el-table__body-wrapper {

    &::-webkit-scrollbar {

      width: 6px;

      height: 6px;

      opacity: 0.35;

      border-radius: 6px;

      background: #0b193c;

      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);

    }

    &::-webkit-scrollbar-track {

      opacity: 0.35;

      border-radius: 6px;

      background: #0b193c;

    }

    &::-webkit-scrollbar-thumb {

      width: 6px;

      height: 6px;

      border-radius: 6px;

      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);

      opacity: 0.6;

      background: #2ffffe;

    }

  }

  // hover 行

  .el-table--enable-row-hover .el-table__body tr:hover > td {

    background: rgba(10, 74, 89, 0.8) !important;

  }

  // hover 时的tips

  .el-tooltip__popper {

    color: #76fafd;

    font-size: 20px !important;

  }

  // 分页

  .el-pagination {

    margin-top: 30px;

    display: flex;

    justify-content: flex-end;

    span:not([class*="suffix"]) {

      font-size: 20px !important;

      color: #73fbfd !important;

    }

  }

  // 页码

  .el-pagination.is-background .btn-next,

  .el-pagination.is-background .btn-prev,

  .el-pagination.is-background .el-pager li {

    font-size: 18px;

    color: #fff !important;

    border: 1px solid #0197ba;

    background-color: transparent;

  }

  // 页码选中

  .el-pagination.is-background .el-pager li:not(.disabled).active {

    background: #0a4a59 !important;

  }

}

.custom-hhimg-dialog {

  margin-top: 68px !important;

  width: 1500px !important;

  height: 950px;

  .img-box {

    width: 100%;

    img {

      width: 100%;

    }

  }

}

</style>

<style lang="less" scoped>

.custom-table {

  .zhb-box {

    margin-bottom: 88px;

  }

  .zd-box {

    display: flex;

    align-items: flex-start;

    margin-bottom: 88px;

  }

  .file-box {

    .file-list {

      .file-item {

        display: inline-block;

        vertical-align: top;

        margin-right: 30px;

        cursor: pointer;

        .file-item-name {

          display: inline-block;

          font-size: 22px;

          font-family: Source Han Sans CN, Source Han Sans CN-Regular;

          font-weight: 400;

          text-align: center;

          color: #01ffff;

          padding-bottom: 3px;

          border-bottom: 2px solid #01ffff;

          pointer-events: none;

        }

      }

    }

  }

}

</style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值