lingfeng-admin/src/view/base/account-manage.vue

<template>
  <div class="account" v-loading="loading">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <div class="tip-father">
          <el-button
            type="primary"
            size="small"
            class="btn"
            @click.native="addAccount()"
            >添加成员</el-button
          >
          <span class="tip"
            >一号用户(即ID为1的用户)和所属组为“管理员”的组，不需要分配权限即拥有所有菜单权限！</span
          >
        </div>
        <div class="screen">
          <p>状态：</p>
          <el-select v-model="filter.status" placeholder="全部" size="mini">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
          <el-button type="primary" class="btn" size="mini" @click="search()"
            >筛选</el-button
          >
          <el-button
            type="primary"
            class="btn"
            size="mini"
            @click.native="clearFilter()"
            >重置</el-button
          >
        </div>
        <el-table
          :data="accountList"
          class="order-table table no-border-table"
          ref="orderTable"
          :header-cell-style="{
            border: 'none',
            color: '#333',
            background: '#f6f6f6',
            borderBottom: '1px solid #E8E8E8',
            height: '54px',
          }"
          :row-style="{
            height: '54px',
          }"
        >
          <!-- <el-table-column type="selection" width="40"> </el-table-column> -->
          <el-table-column prop="nickname" label="昵称"> </el-table-column>
          <el-table-column prop="username" label="账号"> </el-table-column>
          <el-table-column prop="uid" label="用户ID"> </el-table-column>
          <el-table-column prop="phone" label="手机号"> </el-table-column>
          <el-table-column
            prop="method"
            label="操作"
            width="350px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button size="mini" @click="editpassword(scope.row)"
                >修改密码
              </el-button>
              <el-button size="mini" @click="powerGroup(scope.row.uid)"
                >权限组
              </el-button>
              <el-button size="mini" @click="editAccount(scope.row)"
                >编辑
              </el-button>
              <el-button size="mini" @click="banAccount(scope.row)"
                >{{ scope.row.status | isBan }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <div></div>
          <el-pagination
            @current-change="PageChange"
            :current-page.sync="currentPage"
            layout="total, prev, pager, next, jumper"
            :page-size="size"
            :total="totalSize"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="管理员信息"
      width="400px"
      class="addAccount"
      :visible.sync="addShow"
    >
      <el-form :model="addForm" ref="addForm" size="mini" :rules="userRules">
        <el-form-item
          label="昵称"
          prop="nickname"
          :label-width="formLabelWidth"
        >
          <el-input v-model="addForm.nickname" />
        </el-form-item>
        <el-form-item
          label="账号"
          prop="username"
          :label-width="formLabelWidth"
        >
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="addForm.phone" type="number" />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :label-width="formLabelWidth"
          v-if="this.flag == 'add'"
        >
          <el-input v-model="addForm.password" type="password" />
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="addForm.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false" class="cancel-btn">取 消</el-button>
        <el-button type="primary" @click.native="submitManager()" class="confirm-btn"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="选择权限组" width="800px" :visible.sync="powerShow">
      <template>新增权限组：</template>
      <el-input placeholder="请输入权限组名称" v-model="addPower" size="mini" />
      <el-checkbox-group v-model="powerSelect">
        <el-checkbox
          v-for="(item, index) in powerList"
          :key="index"
          :label="item"
          >{{ item }}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="powerShow = false">取 消</el-button>
        <el-button class="confirm-btn" type="primary" @click="submitPower()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改密码" width="400px" :visible.sync="passwordShow">
      <el-form :model="addFather" :rules="rules" ref="addFather">
        <el-form-item
          label="新密码："
          prop="password"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addFather.password"
            placeholder="请输入新密码"
            type="password"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" @click="passwordShow = false">取 消</el-button>
        <el-button class="confirm-btn" type="primary" @click="submitPassword()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
export default {
  components: {
    Header
  },
  name: 'account',
  data: function () {
    return {
      title: {
        // 页面标题
        firstTitile: '基础设置',
        secondTitle: '账号管理'
      },
      accountList: [], // 管理员账号列表
      editId: '', // 编辑的哪个管理员账号
      addShow: false, // 添加成员弹窗显示
      powerShow: false, // 选择权限弹窗显示
      passwordShow: false, // 修改密码弹窗显示
      flag: '', // 编辑还是添加管理员
      addForm: {
        nickname: '',
        username: '',
        phone: '',
        password: '',
        description: ''
      }, // 添加成员
      addFather: {
        password: ''
      }, // 修改密码
      powerSelect: [], // 权限组选择项
      addPower: '', // 新增权限组的名称
      powerSelectCopy: [], // 权限组选择项(用于判断新增、删除数据)
      powerList: [], // 权限组列表
      loading: false, // 加载
      filter: {
        status: ''
      }, // 搜索筛选
      rules: {
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ]
      },
      userRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号长度错误', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
          // { min: 5, max: 20, message: '请输入5~20位字母数字组合', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 6, message: '昵称最少6位', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }, // 管理员信息校验
      currentPage: 1, // 当前页
      size: 20, // 一页多少数据
      totalSize: 0, // 共多少条数据
      formLabelWidth: '80px'
    };
  },
  filters: {
    isBan(val) {
      if (val === 1) {
        return '启用';
      } else {
        return '禁止';
      }
    }
  },
  mounted() {
    this.getManagerList();
  },
  methods: {
    // 筛选
    search() {
      this.currentPage = 1;
      this.getManagerList();
    },

    getManagerList() {
      let data = {
        page_size: this.size,
        page: this.currentPage,
        status: +this.filter.status
      };
      // status数据类型为num，为空的话传0 ，影响数据所以删掉
      if (this.filter.status === '') {
        delete data.status;
      }
      this.httpGet(this.$root.managerList, data).then(
        (res) => {
          this.accountList = res.list;
          this.totalSize = res.total;
          this.loading = false;
        },
        (res) => {
          this.$message.error(res);
          this.loading = false;
        }
      );
    },

    // 添加成员
    addAccount() {
      this.flag = 'add';
      this.addForm = {
        nickname: '',
        username: '',
        phone: '',
        password: '',
        description: ''
      };
      this.addShow = true;
      // 第二次之后点击清空弹窗校验信息
      // setTimeout(() => {
      //     this.$refs.addForm.clearValidate();
      // }, 10);
    },
    // 提交管理员信息
    submitManager() {
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          this.$message.error('请输入必填信息！');
          return false;
        } else {
          // 新增管理员信息
          if (this.flag === 'add') {
            let data = {
              ...this.addForm
            };
            this.httpPost(this.$root.addManager, data).then(
              (res) => {
                this.$message.success('添加成功！');
                this.addShow = false;
                this.getManagerList();
              },
              (res) => {
                this.$message.error(res);
                this.loading = false;
              }
            );
          } else {
            // 编辑管理员信息     flag == 'edit'
            let data = {
              uid: +this.editId,
              ...this.addForm
            };
            this.httpPost(this.$root.editManager, data).then(
              (res) => {
                this.$message.success('操作成功！');
                this.addShow = false;
                this.getManagerList();
              },
              (res) => {
                this.$message.error(res);
                this.loading = false;
              }
            );
          }
        }
      });
    },
    // 编辑密码弹窗
    editpassword(scope) {
      this.passwordShow = true;
      this.addFather.password = '';
      this.editId = scope.uid;
    },
    // 提交修改密码信息
    submitPassword() {
      this.$refs.addFather.validate((valid) => {
        if (!valid) {
          this.$message.error('请输入必填信息！');
          return false;
        } else {
          let data = {
            uid: +this.editId,
            password: this.addFather.password
          };
          this.httpPost(this.$root.editPassword, data).then(
            (res) => {
              this.$message.success('操作成功！');
              this.passwordShow = false;
            },
            (res) => {
              this.$message.error(res);
              this.loading = false;
            }
          );
        }
      });
    },
    // 编辑管理员信息弹窗
    editAccount(scope) {
      this.flag = 'edit';
      this.editId = scope.uid;
      this.addForm = {
        nickname: scope.nickname,
        username: scope.username,
        phone: scope.phone,
        description: scope.description
      };
      this.addShow = true;
    },
    // 编辑权限组信息弹窗
    powerGroup(scope) {
      this.powerShow = true;
      this.editId = scope;
      // 获取权限组列表
      this.httpGet(this.$root.powerGroupList).then(
        (res) => {
          this.powerList = res.list;
          console.log(123, this.powerSelect);
        },
        (res) => {
          this.$message.error(res);
          this.loading = false;
        }
      );
      // 获得已选权限组
      this.httpGet(this.$root.choiceManagerGroup, { uid: +scope }).then(
        (res) => {
          this.powerSelect = res.list;
          this.powerSelectCopy = res.list;
        },
        (res) => {
          this.$message.error(res);
          this.loading = false;
        }
      );
    },
    // 提交权限组信息
    submitPower(scope) {
      // 创建set对象
      let olderArr = new Set(this.powerSelectCopy);
      let newArr = new Set(this.powerSelect);
      // 合并老数组与新数组 并去重
      let countArr = [...new Set([...olderArr, ...newArr])];
      // 新数组与总数组差集=>删除的数组
      let deleteArr = countArr.filter((x) => !newArr.has(x));
      // 老数组与总数组差集=>新增的数组
      let addArr = countArr.filter((x) => !olderArr.has(x));

      let data = {
        uid: +this.editId,
        add: addArr,
        delete: deleteArr
      };
      // 新增权限组
      if (this.addPower !== '') {
        data.add.push(this.addPower);
      }
      this.httpPost(this.$root.editManagerGroup, data).then(
        (res) => {
          this.$message.success('操作成功！');
          this.powerShow = false;
          this.getManagerList();
        },
        (res) => {
          this.$message.error(res);
          this.loading = false;
        }
      );
    },
    // 禁用、启用管理员账号
    banAccount(scope) {
      console.log(scope);
      let data = {
        uid: +scope.uid,
        status: scope.status === 1 ? 0 : 1
      };
      this.httpPost(this.$root.editManagerStatus, data).then(
        (res) => {
          this.$message.success('操作成功！');
          this.getManagerList();
          // 处理先筛选状态，再修改账号状态列表与状态筛选框不一致的情况
          this.filter = {
            status: ''
          };
        },
        (res) => {
          this.$message.error(res);
        }
      );
    },
    // 清空筛选条件，重新拉list接口
    clearFilter() {
      this.filter = {
        status: ''
      }; // 筛选条件
      this.currentPage = 1;
      this.getManagerList();
    },
    // 分页
    PageChange(val) {
      // 获取当页数据
      this.currentPage = val;
      this.getManagerList();
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.el-dialog__wrapper .el-input {
  width: 240px !important;
}

// >>>.el-form-item__error{
// margin-left :75px;
// }
.account {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;
}

.container {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  flex-y(flex-start, flex-start);
  padding: 0 24px 24px;

  // content 表格
  .content {
    flex: 1;
    width: 100%;
    font-size: 14px;
    background: white;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 2px;

    .screen {
      width: calc(100% - 30px);
      background: bk;
      padding: margin10;
      flex-x(flex-start);
      margin-top: margin10;

      .el-select {
        margin-right: 10px;
        width: input100;
      }

      .el-input {
        width: input150;
        margin: 0 margin10;
      }

      p {
        word(14px, gray6);
      }
    }

    .el-table {
      width: calc(100% - 10px) !important;
      margin-top: 10px;
      font-size: 12px;
      border();

      p {
        float: left;
      }

      img {
        width: 60px;
        height: 60px;
      }

      .el-icon-star-on {
        color: yellow;
      }

      .highLight {
        color: blue;
        font-size: 14px;
        cursor: pointer;
      }
    }

    .footer {
      width: calc(100% - 30px);
      min-width: 600px;
      padding: 10px 0 0 15px;
      flex-x();

      .el-button {
        margin-left: 10px;
      }
    }
  }

  .btn {
    confirm-btn();
  }
}

.account >>>.addAccount .el-dialog .el-checkbox {
  width: 20px;
}

.tip {
  margin: 8px 0 0 20px;
  font-size: 12px;
  color: red;
}

.confirm-btn{
  confirm-btn();
  width: 65px;
  height: 32px;
  padding: 0;
}
.cancel-btn{
  cancel-btn();
  width: 65px;
  height: 32px;
  padding: 0;
}
</style>