userManage.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="loginName_like"
            class="search-inp"
            size="mini"
            :placeholder="$t('table.username') + '/' + $t('table.name')"
            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="addUserHandle"
          icon="el-icon-circle-plus-outline"
        >{{$t('button.addUser')}}</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="100"
            :formatter="indexFormatter"
          ></el-table-column>
          <el-table-column prop="loginName" align="center" :label="$t('table.username')"></el-table-column>
          <el-table-column prop="realName" align="center" :label="$t('table.name')"></el-table-column>
          <el-table-column
            prop="accountId"
            :formatter="accnameFormat"
            align="center"
            :label="$t('table.merchant')"
          ></el-table-column>
          <!-- <el-table-column prop="mall.name" align="center" label="所属广场">
          </el-table-column>-->
          <el-table-column prop="createTime" align="center" :label="$t('table.CreatTime')"></el-table-column>
          <el-table-column
            prop="status"
            align="center"
            :label="$t('table.Userstate')"
            :formatter="statusFormatter"
          >
            <!-- <template slot-scope="scope">
	                        <el-switch
							    active-text="禁用"
								inactive-text="开启"
	                            active-color="#ff4949"
	                            inactive-color="#13ce66"
	                            v-model="scope.row.status"
								active-value="0"
								inactive-value="1"
	                            @change="switchChange(scope.$index,scope.row)">
	                        </el-switch>
            </template>-->
          </el-table-column>
          <el-table-column :label="$t('table.operate')" align="center">
            <template slot-scope="scope">
              <el-button
                @click="editRow(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{$t('button.edit')}}</el-button>
              <el-button
                v-if="isSupOrAdmin"
                @click="resetPW(scope.row)"
                type="text"
                size="small"
                class="tab-btn"
              >{{$t('button.resetPW')}}</el-button>
              <el-button
                v-if="isSup"
                @click="deleteRow(scope.row)"
                type="text"
                size="small"
              >{{$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="currentChange"
          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-user-dialog ref="addUserRef"></add-user-dialog>
    <edit-user-dialog ref="editUserRef"></edit-user-dialog>
  </div>
</template>

<script>
import addUser from "./addUser";
import editUser from "./editUser";
export default {
  components: {
    "add-user-dialog": addUser,
    "edit-user-dialog": editUser
  },
  data() {
    return {
      pagesizeArr: [10, 20, 50, 100],
      loginName_like: "",
      allData: [],
      filterList: [],
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dataMsg: ""
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - windowInnerHeight * 0.24;
    },
    isSup() {
      const userType = this.$cookie.get("user_type");
      return userType === "super" ? true : false;
    },
    isSupOrAdmin() {
      const userType = this.$cookie.get("user_type");
      return userType === "super" || userType === "admin" ? true : false;
    }
  },
  mounted() {
    this.dataMsg = this.$t("echartsTitle.loading");
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.dataMsg = this.$t("echartsTitle.loading");
      this.currentPage = 1;
      this.total = 0;
      this.tableData = [];
      let tabelParams = {
        // loginName_like: "%" + this.loginName_like + "%",
        accountId: this.$cookie.get("accountId")
        // page: this.currentPage,
        // pageSize: this.pageSize,
        // sortName: 'createTime',
        // sortOrder: 'DESC',
        // _t: Date.parse(new Date()) / 1000
      };
      // if (!this.loginName_like) {
      // 	tabelParams.loginName_like = null
      // }
      this.$api.management
        .userList(tabelParams)
        .then(data => {
          var result = data.data;
          this.allData = result.data.map((item, index) => {
            return {
              tabOrder: ++index,
              status: item.status || 0,
              ...item
            };
          });

          let query = {
            loginName: this.loginName_like,
            realName: this.loginName_like
          };
          this.multiFilters(query, res => {
            this.localFilterList = res;
          });
          this.total = this.localFilterList.length;
          this.tableData = this.pagination();
          this.tableData.length === 0 &&
            (this.dataMsg = this.$t("echartsTitle.noData"));
          // result.data.list.forEach((item, index) => {
          // 	item.status = item.status ? item.status : 0;
          // 	item.tabOrder = (this.currentPage - 1) * this.pageSize + index + 1
          // })
          // this.tableData = result.data.list;
          // this.total = result.data.total
        })
        .catch(error => {});
    },
    accnameFormat(row, column, cellValue) {
      let localAcc = this.getSessionLocal("account", cellValue);
      if (localAcc) {
        return localAcc;
      } else {
        return "--";
      }
    },
    statusFormatter(row, column, cellValue, index) {
      let statusStr = "";
      statusStr = cellValue
        ? cellValue == 0
          ? this.$t("dialog.close")
          : this.$t("dialog.open")
        : this.$t("dialog.close");
      return statusStr;
    },
    indexFormatter(row, column, cellValue, index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    multiFilters: function(filters, cb) {
      let localList = this.allData;
      let filterKeys = Object.keys(filters);
      let filterList = [];
      try {
        localList.forEach(item => {
          filterKeys.forEach(key => {
            if (!filters[key]) {
              filterList.push(item);
              return true;
            }
            if (
              item[key] &&
              !!~item[key]
                .toLocaleLowerCase()
                .indexOf(filters[key].toLocaleLowerCase())
            ) {
              filterList.push(item);
            }
          });
        });
        filterList = this.uniqueArrayObj(filterList);
        cb && cb(filterList);
      } catch (error) {
        console.log(error);
      }
    },
    uniqueArrayObj(arr, item) {
      let hash = {};
      arr = arr.reduce((prev, curr) => {
        hash[curr.id] ? "" : (hash[curr.id] = true && prev.push(curr));
        return prev;
      }, []);
      return arr;
    },
    pagination() {
      let { currentPage, pageSize, localFilterList } = this,
        offset = (currentPage - 1) * pageSize;
      return offset + pageSize >= localFilterList.length
        ? this.localFilterList.slice(offset, localFilterList.length)
        : this.localFilterList.slice(offset, offset + pageSize);
    },
    currentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.tableData = this.pagination();
      }
    },
    sizeChange(val) {
      this.pageSize = val;
      this.tableData = this.pagination();
    },
    // sizeChange(val) {
    // 	this.pageSize = val;
    // 	this.getTableData();
    // },
    // cerrentChange(val) {
    // 	if (this.currentPage != val) {
    // 		this.currentPage = val;
    // 		this.getTableData();
    // 	}
    // },
    addUserHandle() {
      this.$refs.addUserRef.dialogInit(this.isSup);
    },
    //点击编辑弹框
    editRow(row) {
      let str = JSON.parse(JSON.stringify(row));
      this.$refs.editUserRef.dialogInit(str);
    },
    resetPW(row) {
      this.$confirm(
        this.$t("message.confrimResetPW"),
        this.$t("button.resetPW"),
        {
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel"),
          type: "warning"
        }
      )
        .then(() => {
          this.$api.management
            .resetUser({
              loginName: row.loginName
            })
            .then(res => {
              this.$message({
                showClose: true,
                type: "success",
                message: this.$t("message.resetPWSuccess")
              });
            })
            .catch(err => {
              this.$message({
                showClose: true,
                type: "error",
                message: this.$t("message.resetPWFailed")
              });
            });
        })
        .catch(action => {});
    },
    deleteRow(row) {
      this.$confirm(this.$t("message.confirDelete"), this.$t("button.delete"), {
        confirmButtonText: this.$t("message.confirm"),
        cancelButtonText: this.$t("message.cancel"),
        type: "warning"
      })
        .then(() => {
          this.$api.management
            .deleteUser(row.id)
            .then(res => {
              this.$message({
                showClose: true,
                type: "success",
                message: this.$t("message.deleteSuccess")
              });
              this.getTableData();
            })
            .catch(err => {
              this.$message({
                showClose: true,
                type: "error",
                message: this.$t("message.deleteFailed")
              });
            });
        })
        .catch(action => {});
    },
    // 搜索
    searchFun() {
      this.currentPage = 1;
      const { loginName_like, multiFilters, pagination, getTableData } = this;
      let query = {
        loginName: loginName_like,
        realName: loginName_like
      };
      if (!loginName_like) {
        this.getTableData();
      } else {
        multiFilters(query, res => {
          this.localFilterList = res;
        });
        !this.localFilterList.length && (this.dataMsg = this.$t("echartsTitle.noData"))
        this.total = this.localFilterList.length;
        this.tableData = pagination();
      }
    }
  }
};
</script>

<style scoped>
/* @import url(../public/css/common.css); */
.bloc-wrapper {
  width: 100%;
  font-size: 13px;
}

.all-permission {
  line-height: 28px;
}
</style>