clerkmanage.vue

<template>
  <div class="manage-container clerk-wrapper">
    <el-row class="manage-head-wrapper">
      <el-col :span="20">
        <!-- 广场 -->
        <div class="manage-select-box">
          <el-select
            v-model="mallVal"
            class="mall-opt"
            filterable
            :placeholder="$t('pholder.shopSelect')"
            @change="chooseMall(mallVal)"
          >
            <el-option
              v-for="item in mallOpt"
              :label="item.name"
              :value="item.id"
              :key="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="manage-select-box">
          <el-select
            v-model="createTypeVal"
            class="mall-opt"
            :placeholder="$t('pholder.type')"
            @change="onCreateTypeChange"
          >
            <el-option :label="$t('pholder.all')" value />
            <el-option
              v-for="item in createTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- 监控点 -->
        <div class="manage-select-box">
          <el-input
            v-model="clerkName"
            class="search-inp"
            :placeholder="$t('pholder.clerkName')"
            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="4">
        <div class="btn-box">
          <el-button
            type="primary"
            size="mini"
            class="manage-add-btn fl-btn"
            @click="addClerk"
            icon="el-icon-circle-plus-outline"
          >{{$t('dialog.addClerk')}}</el-button>
          <el-button
            type="primary"
            size="mini"
            class="manage-add-btn fl-btn"
            @click="onMarkClerkClick"
          >{{$t('dialog.markClerk')}}</el-button>
        </div>
      </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%;"
          @expand-change="expandHandle"
          ref="row_table"
          v-loading="loading"
          class="clerk-manage-table"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column type="expand" prop="children">
            <template slot-scope="scope">
              <!-- <el-table :data="scope.row.children" :empty-text="noDataText" :show-header="childrenHeader" class="expand-table">
                                <el-table-column label="" align="center" v-for="item in scope.row.children" :key="item.id">
                                    <img :src="dealImg(scope.row)" width="50" height="50" alt="" class="face-img">
                                </el-table-column>
              </el-table>-->
              <ul class="img-column" v-if="scope.row.children.faceList.length > 0">
                <li
                  v-for="(imgItem, imgIndex) in scope.row.children.faceList"
                  :key="imgItem.id"
                  class="img-column-item"
                >
                  <div class="img-box">
                    <el-popover placement="left" title trigger="hover">
                      <img
                        :src="dealImg(imgItem.facePic)"
                        :onerror="defaultImg"
                        width="50"
                        height="50"
                        alt
                        class="face-img"
                        slot="reference"
                      />
                      <img
                        :src="dealImg(imgItem.facePic)"
                        :alt="dealImg(imgItem.facePic)"
                        width="200"
                        height="200"
                        class="zoomout-img"
                        :onerror="defaultImg"
                      />
                    </el-popover>
                    <i
                      class="el-icon-circle-close delimg-icon"
                      :title="imgItem.id"
                      @click="delMarkImg(scope.row, scope.$index, imgIndex, 'face')"
                    ></i>
                  </div>
                </li>
              </ul>
              <ul class="img-column body-column" v-if="scope.row.children.bodyList.length > 0">
                <li
                  v-for="(imgItem, imgBodyIndex) in scope.row.children.bodyList"
                  :key="imgItem.id"
                  class="img-column-item"
                >
                  <div class="img-box body-img-box">
                    <el-popover placement="left" title trigger="hover">
                      <img
                        :src="dealImg(imgItem.bodyPic)"
                        :onerror="defaultImg"
                        width="50"
                        height="50"
                        alt
                        class="face-img body-img"
                        slot="reference"
                      />
                      <img
                        :src="dealImg(imgItem.bodyPic)"
                        :alt="dealImg(imgItem.bodyPic)"
                        width="200"
                        height="200"
                        class="zoomout-img zoomout-body-img"
                        :onerror="defaultImg"
                      />
                    </el-popover>
                    <i
                      class="el-icon-circle-close delimg-icon"
                      :title="imgItem.id"
                      @click="delMarkImg(scope.row, scope.$index, imgBodyIndex, 'body')"
                    ></i>
                  </div>
                </li>
              </ul>
              <div
                class="empty-text"
                v-if=" JSON.stringify(scope.row.children) == '{}'"
              >{{ noDataText }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.order')" align="center" prop="seriesNum" width="100"></el-table-column>
          <!-- <el-table-column label="UUID" align="center" prop="personUnid"></el-table-column> -->
          <el-table-column :label="$t('table.name')" align="center" prop="name"></el-table-column>
          <el-table-column
            :label="$t('table.gender')"
            align="center"
            prop="gender"
            :formatter="genderFormatter"
          ></el-table-column>
          <el-table-column :label="$t('table.age')" align="center" prop="age"></el-table-column>
          <el-table-column
            :label="$t('table.CreatTime')"
            align="center"
            prop="createTime"
            :formatter="createTimeFormatter"
          ></el-table-column>
          <el-table-column
            :label="$t('table.createType')"
            align="center"
            prop="auto"
            :formatter="typeFormatter"
          />
          <el-table-column :label="$t('table.position')" align="center" prop="position"></el-table-column>
          <el-table-column :label="$t('table.square')" align="center" prop="mall.name"></el-table-column>
          <el-table-column :label="$t('table.idPhoto')" align="center">
            <template slot-scope="scope">
              <el-popover placement="left" trigger="hover">
                <div class="face-img-box" slot="reference">
                  <img
                    :src="dealCardImg(scope.row)"
                    width="50"
                    height="50"
                    alt
                    class="face-img"
                    :onerror="defaultImg"
                  />
                </div>
                <img
                  :src="dealCardImg(scope.row)"
                  :alt="dealCardImg(scope.row)"
                  width="200"
                  height="200"
                  class="zoomout-img"
                  :onerror="defaultImg"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.featurePhoto')" align="center">
            <template slot-scope="scope">
              <!-- <el-popover
                                v-if="scope.row.employeePic"
                                placement="left"
                                title=""
                                trigger="hover">
                                <div class="face-img-box" slot="reference">
                                    <img :src="dealImg(scope.row)" width="50" height="50" alt="" class="face-img">
                                </div>
                                <img :src="dealImg(scope.row)" :alt="dealImg(scope.row)" width="200" height="200" class="zoomout-img" />
              </el-popover>-->
              <el-button
                type="text"
                size="small"
                class="tab-btn"
                @click="addImgHandle(scope.row)"
              >{{$t('button.addPhoto')}}</el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column label="证件照片" align="center">
                        <template slot-scope="scope">
                            <el-popover
                                v-if="scope.row.employeePic"
                                placement="left"
                                title=""
                                trigger="hover">
                                <div class="face-img-box" slot="reference">
                                    <img :src="dealImg(scope.row)" width="50" height="50" alt="" class="face-img">
                                </div>
                                <img :src="dealImg(scope.row)" :alt="dealImg(scope.row)" width="200" height="200" class="zoomout-img" />
          </el-popover>-->
          <!-- <el-button v-else type="text" size="small" class="tab-btn" @click="addImgHandle(scope.row)">新增图片</el-button> -->
          <!-- </template>
          </el-table-column>-->
          <!-- <el-table-column label="人脸图" align="center">
                        <template slot-scope="scope">
                            <el-popover
                                placement="left"
                                title=""
                                trigger="hover">
                                <div class="face-img-box" slot="reference">
                                    <img :src="dealImg(scope.row)" width="50" height="50" alt="" class="face-img">
                                </div>
                                <img :src="dealImg(scope.row)" :alt="dealImg(scope.row)" width="200" height="200" class="zoomout-img" />
                            </el-popover>
                        </template>
          </el-table-column>-->
          <el-table-column :label="$t('table.operate')" align="center">
            <template slot-scope="scope">
              <!-- <el-button @click="markHandle(scope.row)" type="text" size="small" class="tab-btn">{{ scope.row.personType == 0 ? '标注店员' : '取消标注' }}</el-button> -->
              <el-button
                type="text"
                size="small"
                class="tab-btn"
                @click="editHandle(scope.row)"
              >{{$t('button.edit')}}</el-button>
              <el-button
                type="text"
                size="small"
                class="tab-btn"
                @click="delHandle(scope.row)"
              >{{$t('button.delete')}}</el-button>
              <!-- <el-button @click="cancelMark(scope.row)" 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"
          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-dialog ref="addModel" :mall-list="mallOpt"></add-dialog>
    <edit-dialog ref="editModel" :mall-list="mallOpt"></edit-dialog>
    <add-image ref="imageModel" :mall-list="mallOpt"></add-image>
  </div>
</template>

<script>
import defaultImg from "@/assets/img/behavior/default.png";
import femaleImg from "@/assets/img/behavior/female.png";
import maleImg from "@/assets/img/behavior/male.png";
import addDialog from "./addClerk";
import editDialog from "./editClerk";
import addImage from "./addImage";
export default {
  components: {
    "add-dialog": addDialog,
    "edit-dialog": editDialog,
    "add-image": addImage
  },
  data() {
    return {
      pickerOptions1: {
        // disabledDate(time) {
        //     return time.getTime() > Date.now();
        // },
      },
      createTypeList: [
        { label: this.$t("dialog.addClerk"), value: 0 },
        { label: this.$t("table.autoTag"), value: 1 }
      ],
      createTypeVal: "",
      clerkName: "",
      mallName: "",
      mallVal: null,
      mallOpt: [],
      monitoryVal: "",
      monitoryName: "",
      monitoryOpt: [],
      cameraVal: "",
      cameraOpt: [],
      typeVal: "",
      picApiUrl: window.profileOssUrl + "/faceRecognitions/face/",
      defaultImg: 'this.src="' + defaultImg + '"',
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      pagesizeArr: [10, 20, 50, 100],
      loading: true,
      isEffect: true,
      addDialogVisible: false,
      noDataText: "",
      privacyVal: "",
      dataMsg: ""
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - windowInnerHeight * 0.24;
    }
  },
  mounted() {
    this.getMallList();
    this.dataMsg = this.$t("echartsTitle.loading");
  },
  methods: {
    getTableData() {
      this.loading = true;
      this.dataMsg = this.$t("echartsTitle.loading");
      this.tableData = [];
      let tabelParams = {
        // date: typeof (this.timeVal) == 'object' ? dateUnit.dateFormat(this.timeVal, 'yyyy-MM-dd') : this.timeVal,
        accountId: this.$cookie.get("accountId"),
        // counttime_gte: this.timeVal[0],
        // counttime_lte: this.timeVal[1],
        mallId: this.mallVal,
        name_like: "%" + this.clerkName + "%",
        auto: this.createTypeVal,
        // personType: this.typeVal,
        // channelId: this.cameraVal,
        // gateId: this.monitoryVal,
        // facePic_null: false,
        // age_gt: 0,
        // direction: 1,
        // sortName: 'createtime',
        // sortOrder: 'DESC',
        page: this.currentPage,
        pageSize: this.pageSize
        // _t: Date.parse(new Date()) / 1000
      };
      this.$api.management
        .staff(tabelParams)
        .then(res => {
          let result = res.data;
          result.data.list.forEach((item, index) => {
            item.children = [];
            item.seriesNum = (this.currentPage - 1) * this.pageSize + 1 + index;
          });
          this.tableData = result.data.list;
          this.total = result.data.total;
          this.tableData.length === 0 &&
            (this.dataMsg = this.$t("echartsTitle.noData"));
          setTimeout(() => {
            this.loading = false;
          }, 1000);
          this.getMallSetting();
        })
        .catch(error => {
          // console.log(error.message)
        });
    },
    getMallSetting() {
      var params = {
        // _t: Date.parse(new Date()) / 1000
      };
      this.$api.management
        .mallConfig(this.mallVal, params)
        .then(res => {
          let result = res.data;
          result.data.forEach((item, index) => {
            if (item.key && item.key == "privacyConfig") {
              this.privacyVal = item.value || "";
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    expandHandle(row, expandedRows) {
      this.$refs.row_table.store.states.expandRows = expandedRows.length
        ? [row]
        : [];
      let isExpand = false;
      if (this.$refs.row_table.store.states.expandRows.length > 0) {
        this.$refs.row_table.store.states.expandRows[0].id = row.id;
        isExpand = true;
      }
      this.noDataText = "load";
      row.children = {
        faceList: [],
        bodyList: []
      };
      // this.noDataText = this.$t('echartsTitle.noData');
      // let mockData = [];
      // for(let i = 0; i < 10; i++) {
      //     mockData.push({
      //         id: i + 1
      //     })
      // }
      // row.children = mockData;
      if (!isExpand) return;
      this.$api.management
        .staffFace({
          staffId: row.id
        })
        .then(res => {
          let result = res.data;
          if (result.data.length == 0)
            this.noDataText = this.$t("echartsTitle.noData");
          result.data.forEach(item => {
            // item.facePic = item.channelSerialnum + '|' + (item.facePic ? item.facePic : '0');
            item.facePic = item.facePic ? item.facePic : "0";
          });
          row.children.faceList = result.data;
        })
        .catch(err => {});
      this.$api.management
        .staffBody({
          staffId: row.id
        })
        .then(res => {
          let result = res.data;
          result.data.forEach(item => {
            item.bodyPic = item.bodyPic ? item.bodyPic : "0";
          });
          row.children.bodyList = result.data;
        })
        .catch(err => {});
    },
    genderFormatter(row, column, cellValue) {
      let cellStr = "";
      let localStr = this.getLocalDic("gender", cellValue);
      cellStr = localStr ? localStr : "--";
      return cellStr;
    },
    createTimeFormatter(row, column, cellValue) {
      return row.createTime.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, "$1-$2-$3");
    },
    typeFormatter(row, column, cellValue) {
      // 0: 新增店员 1: 自动标注 ##2: 手动标注##
      const filterRes = this.createTypeList.find(
        item => item.value === row.auto
      );
      return (filterRes && filterRes.label) || "--";
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    cerrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.getTableData();
      }
    },
    typeFormat(row, column, cellValue) {
      let cellVal = "";
      cellVal =
        cellValue || cellValue == 0
          ? this.getLocalDic("personType", cellValue)
          : "顾客";
      return cellVal;
    },
    getLocalDic(name, val) {
      let dicVal = window.sessionStorage.getItem(name + "-" + val);
      if (dicVal) {
        return this.$t("dictionary." + dicVal);
      } else {
        return val;
      }
    },
    getMallList() {
      this.mallOpt = [];
      this.mallVal = null;
      this.mallName = "";
      const storageMallVal = this.getSessionLocal("mallId")
      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) {
            // result.unshift({
            //     id: '',
            //     name: '全部商场'
            // });
            this.mallOpt = result;
            if (storageMallVal) {
              this.mallVal = storageMallVal - 0;
              const matchedMall = result.find(item => item.id === this.mallVal)
              this.mallName = matchedMall.name;
            } else {
              this.mallVal = result[0].id;
              this.setSessionLocal("mallId", this.mallVal);
              this.mallName = result[0].name;
            }
            // this.getGates(this.mallVal);
          }
          this.getTableData();
          // else {
          //     this.mallOpt = [];
          //     this.mallVal = '';
          // }
        })
        .catch(err => { console.log(err) });
    },
    chooseMall(mallId) {
      this.setSessionLocal("mallId", mallId);
      const matchedMall = this.mallOpt.find(item => item.id == mallId)
      this.mallName = matchedMall.name;
      // this.getGates(mallId);
    },
    onCreateTypeChange(typeVal) {
      //
    },
    getGates(mallId) {
      this.$api.base
        .gate({
          mallId: mallId,
          type: 1
          // _t: Date.parse(new Date()) / 1000
          // isMallGate: 1
        })
        .then(res => {
          let result = res.data.data;
          this.monitoryOpt = [];
          if (result.length) {
            // result.forEach((item, index, arr) => {
            //     this.monitoryOpt.push(item);
            // });
            result.unshift({
              id: "",
              name: "全部监控点"
            });
            this.monitoryOpt = result;
            this.monitoryVal = result[0].id;
            this.monitoryName = result[0].name;
            this.getChannels(this.monitoryVal);
          }
        })
        .catch(err => {});
    },
    chooseMonitory() {
      const matchedMonitory = this.monitoryOpt.find(item => item.id == this.monitoryVal)
      this.monitoryName = matchedMonitory.name;
      this.getChannels(this.monitoryVal);
    },
    getChannels(gateId) {
      this.$api.base
        .channel({
          gateId: gateId
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          this.cameraOpt = [];
          let result = res.data.data;
          result.unshift({
            id: "",
            name: "全部通道"
          });
          this.cameraOpt = result;
          if (this.cameraOpt.length > 0) {
            this.cameraVal = this.cameraOpt[0].id;
          } else {
            this.cameraVal = "";
          }
        })
        .catch(err => {});
    },
    delMarkImg(row, rowIndex, itemIndex, type) {
      let imgId = "",
        originalPersonUuid = "",
        recognitionId = "";
      imgId = this.tableData[rowIndex].children[type + "List"][itemIndex].id;
      // originalPersonUuid = this.tableData[rowIndex].children[itemIndex].originalPersonUuid;
      // recognitionId = this.tableData[rowIndex].children[itemIndex].recognitionId;
      this.$confirm(
        this.$t("message.confirDelete"),
        this.$t("message.prompt"),
        {
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel"),
          type: "warning"
        }
      ).then(() => {
        // params: {
        //     id: imgId,
        //     originalPersonUuid: originalPersonUuid,
        //     recognitionId: recognitionId
        // }
        this.$api.management[
          type == "body" ? "delStaffBodyImage" : "delStaffFaceImage"
        ](imgId).then(res => {
          let result = res.data;
          if (result.code == 200) {
            this.$message({
              showClose: true,
              type: "success",
              message: this.$t("message.deleteSuccess")
            });
            this.tableData[rowIndex].children[type + "List"].splice(
              itemIndex,
              1
            );
            if (this.tableData[rowIndex].children.length == 0) {
              this.noDataText = this.$t("echartsTitle.noData");
            }
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: this.$t("message.deleteFailed") + result.msg
            });
          }
        });
      });
    },
    delHandle(row) {
      this.$confirm(
        this.$t("message.confirDelete"),
        this.$t("message.prompt"),
        {
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel"),
          type: "warning"
        }
      ).then(() => {
        //     this.$api.management.staffFace({
        //         staffId: row.id,
        //         // _t: Date.parse(new Date()) / 1000
        //     })
        // .then(res => {
        // let result = res.data;
        // if (result.data.length == 0) {
        this.$api.management.delStaff(row.id).then(res => {
          let result = res.data;
          if (result.code == 200) {
            this.getTableData();
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: this.$t("message.deleteFailed") + result.msg
            });
          }
        });
        //             } else {
        //                 this.$message({
        //                     showClose: true,
        //                     type: 'warning',
        //                     message: this.$t('message.deleteFeature')
        //                 })
        //             }
        //         })
      });
    },
    dealImg(imgPic) {
      // let serialnum = '', picsrc = '', date = '', year = '', month = '', day = '', dateStr = '', img_path = '';
      // let serialnum = ''
      //     , picsrc = ''
      //     , date = ''
      //     , year = ''
      //     , month = ''
      //     , day = ''
      //     , dateStr = ''
      //     , img_path = '';
      // serialnum = current.facePic.split('|')[0];
      // picsrc = current.facePic.split('|')[1];
      // date = current.counttime.split(' ')[0];
      // year = date.split('-')[0];
      // month = date.split('-')[1];
      // day = date.split('-')[2];
      // dateStr = year + month + day;
      // img_path = picsrc === '0' ? this.defaultImg : window._vionConfig.picUrl+'/picture/face/'+dateStr+'/'+serialnum+'/'+picsrc;
      let imgMark = imgPic.split("/");
      let img_path = "";
      if (imgMark[0] == "staff") {
        img_path =
          imgPic === "0"
            ? this.defaultImg
            : window._vionConfig.picUrl + "/" + imgPic;
      } else {
        img_path =
          imgPic === "0"
            ? this.defaultImg
            : window._vionConfig.picUrl + "/picture/face/" + imgPic;
      }
      return img_path;
    },
    dealCardImg(row) {
      let img_path = "";
      if (!row.photo) {
        if (row.gender == "1") {
          img_path = maleImg;
        } else if (row.gender == "0") {
          img_path = femaleImg;
        } else {
          img_path = this.defaultImg;
        }
      } else {
        img_path = window._vionConfig.imagesUrl + "/images/" + row.photo;
      }
      return img_path;
    },
    dealPersontype(rowId, type) {
      this.tableData.forEach(item => {
        if (item.personUnid == rowId) {
          // item.personType = type == 9 ? 9 : 0;
          item.personType = type;
        }
      });
    },
    markHandle(row) {
      if (row.personType == 0) {
        this.markClerk(row);
      } else {
        this.cancelMark(row);
      }
    },
    markClerk(row) {
      let _type = 1;
      this.$api.management
        .StaffFaceImageType(row.id, {
          type: _type
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          if (res.data.code == 200) {
            this.dealPersontype(row.personUnid, _type);
            this.$message({
              showClose: true,
              type: "success",
              message: res.data.msg
            });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    cancelMark(row) {
      let _type = 0;
      this.$api.management
        .StaffFaceImageType(row.id, {
          type: _type
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          if (res.data.code == 200) {
            this.dealPersontype(row.personUnid, _type);
            this.$message({
              showClose: true,
              type: "success",
              message: res.data.msg
            });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    addClerk() {
      this.$refs.addModel.dialogInit(this.mallVal);
    },
    onMarkClerkClick() {
      this.setSessionLocal("isPersonMark", false)
      const { href } = this.$router.resolve({
        path: "/mark-staff",
        query: {
          mallId: this.mallVal
        }
      });
      window.open(href, "_blank");
      // this.$router.push({ path: '/mark-staff', query: { mallId: this.mallVal } })
    },
    addImgHandle(row) {
      this.$refs.imageModel.dialogInit(
        row,
        this.mallVal,
        this.privacyVal
      );
    },
    editHandle(row) {
      this.$refs.editModel.dialogInit(row);
    },
    searchFun() {
      this.currentPage = 1;
      this.getTableData();
    }
  }
};
</script>

<style scoped>
.manage-select-box .el-select {
  width: 150px;
}

.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;
}

.type-sel-box {
  width: 120px;
}

.manage-input-box {
  margin-right: 10px;
  width: 130px !important;
}

.time-input-box {
  width: 450px !important;
}

.face-img {
  width: 50px;
  height: 50px;
}

.zoomout-img {
  width: auto;
  height: 200px;
}

/* expand column */
.img-column:after,
.img-column:before {
  content: "";
  display: table;
}

.img-column:after {
  clear: both;
}

.img-column-item {
  float: left;
  text-align: center;
  width: 10%;
}

.img-column-item:nth-child(n + 11) {
  margin-top: 10px;
}

.img-box {
  border: 1px solid #dcdcdc;
  margin: 0px auto;
  position: relative;
  cursor: zoom-in;
}

.img-box {
  width: 50px;
  height: 50px;
}

.delimg-icon {
  position: absolute;
  right: -8px;
  top: -5px;
  cursor: pointer;
}

.empty-text {
  text-align: center;
}

.body-column {
  padding-top: 12px;
}
.body-img-box {
  width: 50px;
  height: 133.33px;
}
.body-img {
  width: 50px;
  height: 133.33px;
}
.zoomout-body-img {
  width: 200px;
  height: auto;
}
</style>