clerkdata.vue

<template>
  <div class="manage-container clerk-wrapper">
    <el-row class="manage-head-wrapper">
      <el-col :span="24">
        <!-- 广场 @change="chooseMall(mallVal)" -->
        <div class="manage-select-box">
          <el-select
            v-model="mallVal"
            class="mall-opt"
            filterable
            :placeholder="$t('pholder.shopSelect')"
          >
            <el-option
              v-for="(item, index) in mallOpt"
              :label="item.name"
              :value="item.id"
              :key="item.value"
            ></el-option>
          </el-select>
        </div>
        <el-button
          type="primary"
          class="search-btn"
          plain
          size="mini"
          @click="searchFun"
        >{{$t('button.search')}}</el-button>
      </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table
          :data="tableData"
          :max-height="tableHeight"
          style="width: 100%;"
          v-loading="loading"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column prop="tabOrder" align="center" :label="$t('table.order')" width="200"></el-table-column>
          <el-table-column label="personId" align="center" prop="personUnid"></el-table-column>
          <el-table-column :label="$t('table.faceMap')" align="center">
            <template slot-scope="scope">
              <el-popover placement="left" title trigger="hover">
                <div class="face-img-box" slot="reference">
                  <!-- <img :src="scope.row.picture" width="50" height="50" @mouseover="picPopover($event, scope)" @mouseout="mouseOut" alt=""> -->
                  <img :src="scope.row.picture" :alt="scope.row.picture" width="50" height="50" />
                </div>
                <img
                  :src="scope.row.picture"
                  :alt="scope.row.picture"
                  width="200"
                  height="200"
                  class="zoomout-img"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.operate')" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                @click="delHandle(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{$t('button.delete')}}</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" 
					layout="sizes, prev, pager, next, slot" 
					:total="total">
					<span class="slot-ele-total">共 {{ total }} 条记录, 每页显示</span>
        </el-pagination>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import defaultImg from "@/assets/img/behavior/default.png";
export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      mallName: "",
      mallVal: "",
      mallOpt: [],
      typeVal: 1,
      picApiUrl: window._vionConfig.apiUrl + "/faceRecognitions/",
      defaultImg: defaultImg,
      tableData: [],
      loading: true
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - 200;
    }
  },
  created() {
    this.getMallList();
  },
  mounted() {
    this.timeVal = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
    setTimeout(() => {
      this.getTableData();
    }, 500);
  },
  methods: {
    getTableData() {
      this.loading = true;
      this.tableData = [];
      this.$api.management
        .staff({
          accountId: this.$cookie.get("accountId"),
          mallId: this.mallVal
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          let result = res.data.data;
          result.forEach((item, index) => {
            item.picture = item.picture
              ? this.picApiUrl + item.picture
              : defaultImg;
            item.tabOrder = ++index;
          });
          this.tableData = result;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        })
        .catch(error => {
          // console.log(error.message)
        });
    },
    getMallList() {
      this.$api.base
        .mall(
          {
            accountId: this.$cookie.get("accountId"),
            // status: 1,
            status_arr: "1,3"
            // _t: Date.parse(new Date()) / 1000
          },
          null,
          true
        )
        .then(res => {
          let result = res.data.data;
          if (result.length > 0) {
            this.mallOpt = result;
            this.mallVal = result[0].id;
            this.mallName = result[0].name;
            // this.getGates(this.mallVal);
          } else {
            this.mallOpt = [];
            this.mallVal = "";
          }
        })
        .catch(err => {});
    },
    dealPersontype(rowId, type) {
      this.tableData.forEach(item => {
        if (item.id == rowId) {
          // item.personType = type == 9 ? 9 : 0;
          item.personType = type;
        }
      });
    },
    delHandle(row) {
      this.$api.management.delStaff(row.id, {}).then(res => {
        if (res.data.code == 200) {
          this.getTableData();
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.msg
          });
        }
      });
    },
    searchFun() {
      this.currentPage = 1;
      this.getTableData();
    }
  }
};
</script>

<style scoped>
.face-img-box {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid #dcdcdc;
  margin: 0px auto;
  cursor: zoom-in;
}

.pic-popover {
  margin: 5px 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.zoomout-img {
  width: auto;
  height: 200px;
}
</style>