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"
          />
        </div>
        <el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{$t('button.search')}}</el-button>
      </el-col>
      <el-col :span="6" style="display: flex; flex-direction: row-reverse">
        <el-button
          type="primary"
          class="manage-add-btn"
          size="mini"
          @click="addBlocHandle"
          icon="el-icon-circle-plus-outline"
        >{{$t('button.addGroup')}}</el-button>
        <el-upload
          :action="apiUrl + '/org/import?accountId=' + $cookie.get('accountId')"
          :headers="headers"
          :limit="1"
          :on-success="onSuccess"
          :on-error="onError"
          :show-file-list="false"
          style="margin-right: 10px;">
          <el-button size="small" type="primary" style="background: #3bb8ff">导入组织关系</el-button>
        </el-upload>
        <el-button
          type="primary"
          class="manage-add-btn"
          size="mini"
          @click="exportFn"
          style="margin-right: 10px"
        >导出组织关系</el-button>
      </el-col>

      <el-dialog
        :visible.sync="visable"
        :close-on-click-modal="false"
        :title="$t('pholder.select')"
        class="manage-dialog"
      >
        <div class="manage-select-box" style="height: 300px; padding: 20px 0; overflow: auto">
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-bottom: 10px">全选</el-checkbox>
           <el-checkbox-group v-model="mallValue" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(item, index) in mallListForTerm" :key="index" :label="item.id" style="width: 100%; margin-bottom: 10px">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
         <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            class="dialog-btn dialog-confirm-btn"
            @click="mallChange"
            :disabled="mallValue.length <= 0"
          >{{$t('dialog.confirm')}}</el-button>
        </div>
      </el-dialog>
    </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-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.picUrl, // floors/img/
      name_like: "",
      rowId: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dataMsg: '',
      fileList: [],
      apiUrl: window._vionConfig.apiUrl,
      headers: {
        authorization: this.$cookie.get('atoken')
      },
      visable: false,
      mallValue: [],
      allMallList: [],
      mallListForTerm: [],
      checkAll: false,
      isIndeterminate: true
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight
      return windowInnerHeight - windowInnerHeight * 0.24
    }
  },
  mounted() {
    this.getTableData();
    this.getMallListForTerm()
    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
      };
      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;
    },

    getMallListForTerm() {
      this.mallListForTerm = [];
      this.allMallList = [];
      let array = [];
      this.$api.base.mall({ accountId: this.$cookie.get("accountId"), status_arr: "1,3" }, null, true )
        .then(data => {
          let result = data.data;
          if (result && result.data) {
            result.data.forEach(item => {
              array.push(item.id)
            })
          }
          this.mallListForTerm = result.data;
          this.allMallList = array;
        })
        .catch(error => {});
    },

    handleCheckAllChange(val) {
      this.mallValue = val ? this.allMallList : [];
      this.isIndeterminate = false
    },

    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.allMallList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allMallList.length;
    },

    exportFn() {
      this.visable = true;      
    },

    mallChange() {
      let language = localStorage.getItem("lang");
      if (language) {
        var languageObj = {
          mall_CN: "zh_CN",
          zh_CN: "zh_CN",
          en_US: "en_US",
          zh_TW: "zh_TW"
        };
        language = "&localLanguage=" + languageObj[language];
      }
      let url = `${window._vionConfig.apiUrl}/org/export?accountId=${this.$cookie.get("accountId")}&mallIdList=${this.mallValue}&authorization=${this.$cookie.get("atoken")}`;
      this.visable = false;
      window.open(url);
    },

    onSuccess() {
      this.$message({
        message: '导入成功',
        type: 'success'
      })
    },

    onError() {
      this.$message({
        message: '导入失败',
        type: 'warning'
      });
    },

    handlePreview(file) {
      console.log(file);
    },

    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>