blocManage.vue

<template>
  <div class="bloc-wrapper manage-container">
    <el-row class="manage-head-wrapper">
      <el-col :span="18">
        <div class="manage-input-box">
          <el-input
            v-model="name_like"
            :placeholder="$t('table.blocName')"
            size="mini"
            class="search-inp"
            clearable
            @keyup.enter.native="searchFun"
          ></el-input>
        </div>
        <el-button
          type="primary"
          class="search-btn"
          plain
          size="mini"
          @click="searchFun"
        >{{$t('button.search')}}</el-button>
      </el-col>
      <el-col :span="6">
        <el-button
          type="primary"
          class="manage-add-btn"
          size="mini"
          @click="addBlocHandle"
          icon="el-icon-circle-plus-outline"
        >{{$t('button.addGroup')}}</el-button>
      </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table
          :data="tableData"
          :max-height="tableHeight"
          :empty-text="dataMsg"
          style="width: 100%"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column prop="tabOrder" align="center" :label="$t('table.order')" width="80"></el-table-column>
          <el-table-column prop="name" align="center" :label="$t('table.blocName')"></el-table-column>
          <el-table-column prop="manager" align="center" :label="$t('table.admin')" width="100"></el-table-column>
          <el-table-column prop="logoPath" align="center" label="logo" width="150">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover">
                <img
                  :src="logoPlanFormatter(scope.row.logoPath)"
                  width="150"
                  height="150"
                  class="zoomout-bloc-img"
                />
                <!--  style="max-width:50;max-height:50px" -->
                <img
                  slot="reference"
                  :src="logoPlanFormatter(scope.row.logoPath)"
                  :alt="logoPlanFormatter(scope.row.logoPath)"
                  width="50"
                  height="50"
                  class="bloc-img"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="createTime" align="center" :label="$t('table.CreatTime')"></el-table-column>
          <el-table-column prop="expireDate" align="center" :label="$t('table.ExpireTime')">
            <template slot-scope="scope">
              <span>{{ dateFormatter(scope.row.expireDate) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="mapCenter" align="center" :label="$t('dialog.mapVisibleCenter')"></el-table-column> -->
          <el-table-column prop="user.realName" align="center" :label="$t('table.founder')"></el-table-column>
          <el-table-column prop="intro" align="center" :label="$t('table.describe')"></el-table-column>
          <el-table-column align="center" :label="$t('table.operate')">
            <template slot-scope="scope">
              <el-button
                @click="editRow(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{$t('button.edit')}}</el-button>
              <!-- <el-button @click="deleteRow(scope.$index,tableData)" type="text" size="small">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="manage-pagination-box"
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          @size-change="sizeChange"
          @current-change="cerrentChange"
          popper-class="popper-class"
          layout="sizes, prev, pager, next, slot"
          :total="total"
        >
          <span
            class="slot-pagination-ele slot-ele-total"
          >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination>
      </el-col>
    </el-row>
    <add-bloc-manage ref="addblocModel"></add-bloc-manage>
    <edit-bloc-manage ref="editblocModel"></edit-bloc-manage>
  </div>
</template>

<script>
import defaultImg from "@/assets/img/manage/accountlogo.png";
import addBloc from "./addBloc";
import editBloc from "./editBloc";
export default {
  components: {
    "add-bloc-manage": addBloc,
    "edit-bloc-manage": editBloc
  },
  data() {
    return {
      logoPathUrl: window._vionConfig.imagesUrl + "/images/", // floors/img/
      name_like: "",
      rowId: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dataMsg: ''
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight
      return windowInnerHeight - windowInnerHeight * 0.24
    }
  },
  mounted() {
    this.getTableData();
    this.dataMsg = this.$t('echartsTitle.loading')
  },
  methods: {
    getTableData() {
      this.dataMsg = this.$t('echartsTitle.loading')
      const currentAccountId = this.$cookie.get("accountId")
      let tabelParams = {
        id: currentAccountId,
        name_like: "%" + this.name_like + "%",
        page: this.currentPage,
        pageSize: this.pageSize
        // _t: Date.parse(new Date()) / 1000
      };
      if (!this.name_like) {
        tabelParams.name_like = null;
      }
      this.$api.base
        .account(tabelParams)
        .then(data => {
          let result = data.data;
          let homeMapConf = {}
          result.data.list.forEach((item, index) => {
            item.tabOrder = (this.currentPage - 1) * this.pageSize + index + 1;
            homeMapConf[item.id] = {
              mapDisplay: item.mapDisplay,
              mapLatitude: item.mapLatitude,
              mapLongitude: item.mapLongitude,
              mapZoom: item.mapZoom
            }
          });
          // 缓存mapConf
          window.sessionStorage.setItem('mapConf', JSON.stringify(homeMapConf))
          this.tableData = result.data.list;
          this.total = result.data.total;
          this.tableData.length === 0 && (this.dataMsg = this.$t('echartsTitle.noData'))
          
        })
        .catch(error => {});
    },
    logoPlanFormatter(logoPlan) {
      return logoPlan ? this.logoPathUrl + logoPlan : defaultImg;
    },
    dateFormatter(date) {
      return date
        ? date.replace(/^(\d{4})-(\d{2})-(\d{2}).*/g, "$1-$2-$3")
        : "";
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    cerrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.getTableData();
      }
    },
    addBlocHandle() {
      this.$refs.addblocModel.dialogInit();
    },
    // 点击编辑弹框
    editRow(row) {
      this.rowId = row.id;
      let editRowData = JSON.parse(JSON.stringify(row));
      this.$refs.editblocModel.dialogInit(editRowData);
    },
    // 删除表格数据
    deleteRow(index, rows) {
      this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
        confirmButtonText: this.$t("message.confirm"),
        cancelButtonText: this.$t("message.cancel"),
        type: "warning"
      })
        .then(() => {
          var id = rows[index].id;
          this.$api.management
            .delAccount(id, {})
            .then(data => {
              rows.splice(index, 1);
            })
            .catch(error => {});
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: this.$t("message.cancelDelete")
          });
        });
    },
    // 搜索
    searchFun() {
      this.currentPage = 1;
      this.getTableData();
    }
  }
};
</script>

<style scoped>
.zoomout-bloc-img {
  width: 150px;
  height: 150px;
}

.bloc-img {
  width: 50px;
  height: 50px;
  cursor: zoom-in;
}
</style>