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" :placeholder="$t('table.username') + '/' + $t('table.name')" clearable />
        </div>
        <el-button type="primary" class="search-btn" @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"
          style="width: 100%"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column
            prop="tabOrder"
            align="center"
            :label="$t('table.order')"
            width="100"
          ></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="type" align="center" :formatter="typeFormat" :label="$t('dialog.userType')"></el-table-column>
          <el-table-column
            prop="accountId"
            :formatter="accnameFormat"
            align="center"
            :label="$t('table.merchant')"
          ></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"
          >
          </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="isSupOrAdmin"
                @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-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 _ from 'underscore';
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: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      typeList: []
    };
  },
  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.getTableData();
    this.getTypes();
  },
  methods: {
    typeFormat(row, column, cellValue){
      let name = ''
      this.typeList.forEach(item=>{
        if(item.key==cellValue){
          name =  item.value
        }
      })
      return name
    },
    getTypes() {
      const [mallType,storeType] = [[0,4,5],[0,1]];
      const userrole_type =this.$cookie.get('userrole_type');
      const lang = localStorage.getItem('lang');
      this.$api.base.types({ type: 'userType',key_gte:userrole_type!='undefined'?userrole_type:-1})
        .then(data => {
          if (data && data.data && data.data.data) {
            //debugger
            this.typeList = _.map(data.data.data,item=>{
              if(lang=='en_US'){
                item.value = item.valueEn
              }
              return item;
            });
            // let mallList = [],sotreList = [];
            // result.map(ele=> {
            //   if(mallType.includes(ele.key)) {
            //     mallList.push(ele);
            //   } else {
            //     sotreList.push(ele)
            //   }
            // })
            // if(mallType.includes(ele.key)&&this.$Project == 'mall') {
            //   mallList.push(ele);
            // } else if(storeType.includes(ele.key)&&this.$Project == 'store'){
            //   sotreList.push(ele)
            // }
            // if(this.$Project == 'mall') {
            //    this.typeList = mallList;
            // } else {
            //   this.typeList = sotreList;
            // }
          } else {
            this.typeList = []
          }
        })
        .catch(error => {});
    },
    getTableData() {
      this.tableData = [];
      let tabelParams = {
        name: this.loginName_like === '' ? null : this.loginName_like,
        accountId: this.$cookie.get("accountId"),
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      this.$api.management.getUserList(tabelParams)
        .then(data => {
          const result = data.data;
          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;
    },
    // 切换每页
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1
      this.getTableData()
    },
    // 切换分页
    currentChange(val) {
      this.currentPage = val;
      this.getTableData()
    },
    // 新增用户
    addUserHandle() {
      this.$refs.addUserRef.dialogInit(this.isSup, this.typeList);
    },
    //点击编辑弹框
    editRow(row) {
      let str = JSON.parse(JSON.stringify(row));
      this.$refs.editUserRef.dialogInit(str, this.typeList);
    },
    // 重置密码
    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 => {
              if(res.data.code==200){
                this.$message({
                  showClose: true,
                  type: "success",
                  message: this.$t("message.deleteSuccess")
                });
                this.getTableData();
              }else{
                this.$message({
                  showClose: true,
                  type: "error",
                  message: res.data.msg
                });
              }

            })
            .catch(err => {
              this.$message({
                showClose: true,
                type: "error",
                message: this.$t("message.deleteFailed")
              });
            });
        })
        .catch(action => {});
    },
    // 搜索
    searchFun() {
      this.currentPage = 1;
      this.pageSize = 10;
      this.getTableData()
    }
  }
};
</script>

<style scoped>
.bloc-wrapper {
  width: 100%;
  height: 100%;
  font-size: 13px;
}

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