roleManage.vue

<template>
  <div class="manage-container clerk-wrapper">
    <el-row class="manage-head-wrapper">
      <el-col :span="22">
        <div class="manage-select-box">
          <el-select v-model="statusVal" class="mall-opt" :placeholder="$t('table.state')">
            <el-option :label="$t('asisTab.all')" value></el-option>
            <el-option
              v-for="(item) in statusOpt"
              :label="i18n(item.name)"
              :value="item.value"
              :key="item.id"
            ></el-option>
          </el-select>
        </div>
        <!-- 监控点 -->
        <div class="manage-select-box">
          <el-input
            v-model="roleName"
            class="search-inp"
            :placeholder="$t('table.roleName')"
            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="2">
        <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.addRole')}}</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table
          :data="tableData"
          :max-height="tableHeight"
          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 :label="$t('table.order')" align="center" type="index" width="100"></el-table-column>
          <el-table-column :label="$t('table.roleName')" align="center" prop="name"></el-table-column>
          <el-table-column
            :label="$t('table.state')"
            align="center"
            prop="is_active"
            :formatter="activeFormatter"
          ></el-table-column>
          <el-table-column
            :label="$t('table.CreatTime')"
            align="center"
            prop="create_dt"
            min-width="150"
          ></el-table-column>
          <el-table-column
            :label="$t('table.describe')"
            align="center"
            prop="role_unid"
            min-width="200"
          ></el-table-column>
          <el-table-column :label="$t('table.operate')" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                class="tab-btn"
                @click="permissHandle(scope.row)"
              >{{$t('button.permiss')}}</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>
            </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"
          >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination>
      </el-col>
    </el-row>
    <add-dialog ref="addModel"></add-dialog>
    <edit-dialog ref="editModel"></edit-dialog>
    <add-image ref="imageModel"></add-image>
  </div>
</template>

<script>
import defaultImg from "@/assets/img/behavior/default.png";
import addRole from "./addRole";
import editRole from "./editRole";
import toAllocate from "./toAllocate";
export default {
  components: {
    "add-dialog": addRole,
    "edit-dialog": editRole,
    "add-image": toAllocate
  },
  data() {
    return {
      pickerOptions1: {},
      roleName: "",
      mallVal: "",
      mallOpt: [],
      monitoryVal: "",
      monitoryName: "",
      monitoryOpt: [],
      cameraVal: "",
      cameraOpt: [],
      typeVal: "",
      defaultImg: defaultImg,
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      pagesizeArr: [10, 20, 50, 100],
      loading: true,
      isEffect: true,
      addDialogVisible: false,
      noDataText: "",
      statusVal: "",
      statusOpt: [
        { name: "stateA", id: 1, value: true },
        { name: "stateB", id: 2, value: false }
      ],
      mark: 0
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - windowInnerHeight * 0.24;
    }
  },
  async mounted() {
    this.getTableData();
  },
  methods: {
    i18n(name) {
      let langaugeName = "table." + name;
      return this.$t(langaugeName);
    },
    activeFormatter(row, column, cellValue) {
      return cellValue ? this.$t("table.stateA") : this.$t("table.stateB");
    },
    getTableData() {
      this.loading = true;
      this.tableData = [];
      this.$api.management
        .role(this.$cookie.get("user_unid"), {
          order: "asc",
          sortby: "create_dt",
          is_active: this.statusVal,
          name__like: this.roleName ? this.roleName : null,
          offset: this.currentPage == 1 ? 0 : (this.currentPage - 1) * 10,
          limit: this.pageSize
        })
        .then(res => {
          let result = res.data;
          this.tableData = result.list_data;
          this.total = result.total_num;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        })
        .catch(error => {});
    },
    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 = [];
      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.facePic ? item.facePic : "0";
          });
          row.children = result.data;
        })
        .catch(err => {});
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    cerrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.getTableData();
      }
    },
    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.removeRole(row.role_unid);
      });
    },
    removeRole(roleUnid) {
      this.$api.management
        .delRole2(this.$cookie.get("user_unid"), roleUnid)
        .then(res => {
          this.$message({
            showClose: true,
            message: this.$t("message.deleteSuccess"),
            type: "success"
          });
          this.getTableData();
        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: this.$t("message.deleteFailed"),
            type: "error"
          });
        });
    },
    addClerk() {
      this.$refs.addModel.dialogInit();
    },
    permissHandle(row) {
      this.mark += 1;
      this.$refs.imageModel.dialogInit(row.role_unid, this.mark);
    },
    editHandle(row) {
      this.$refs.editModel.dialogInit(row);
    },
    searchFun() {
      this.currentPage = 1;
      this.getTableData();
    }
  }
};
</script>

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

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