supply-front/src/views/setting/account.vue

<template>
  <div class="app-container">
    <div class="tree-container">
      <div style="padding: 10px; display: flex;">
        <el-button icon="el-icon-refresh-right" size="small" @click="refreshDepartment()" style="padding: 9px 10px; margin-right: 6px"></el-button>
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          clearable
          v-model="filterText">
        </el-input>
      </div>
      <el-tree
        :data="departmentList"
        :props="defaultProps"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        node-key="id"
        ref="listTree">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <i :class="data.children && data.children.length > 0 ? 'el-icon-folder-opened':'el-icon-document-remove'"></i><span>{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
    <div class="mymain-container">
      <div class="screen-container">
        <!-- <div class="top clearfix">
          <div class="title fl">条件筛选</div>
        </div> -->
        <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="12">
              <el-form-item label="账号名称" prop="name">
                <el-input v-model="screenForm.name" placeholder="请输入账号名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="12" class="tr">
              <el-form-item label="">
                <el-button size="small" @click="resetScreenForm">清空</el-button>
                <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="btn-group clearfix" style="margin-top: 20px">
        <div class="fl">
          <el-button size="small" type="primary" @click="openAccountForm('add')">添加账号</el-button>

        </div>
        <div class="fr">
          <!-- <el-upload
            class="import-btn"
            style="height: 0; width: 0; overflow: hidden;"
            :action="baseURL + 'student/import'"
            :http-request="handleImport"
            :file-list="importFileList"
            v-if="checkBtnRole('import')"
          >
            <el-button size="small" type="primary" :loading="importLoading">{{ importLoading ? '导入中...' : '导入' }}</el-button>
          </el-upload>

          <el-button size="small" type="primary" @click="handleExport">导出</el-button>

          <el-button size="small" type="primary" :loading="importLoading" @click="clickImport">{{ importLoading ? '导入中...' : '导入' }}</el-button>
          
          <el-button size="small" @click="handleDownload" v-if="checkBtnRole('download')">下载导入模板</el-button> -->
        </div>
      </div>

      <div class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <!-- <el-table-column align="center" type="selection" width="55" fixed></el-table-column> -->
          <el-table-column align="center" label="账号" prop="userName" min-width="120"></el-table-column>
          <el-table-column align="center" label="用户名" prop="nickName" min-width="120"></el-table-column>
          <el-table-column align="center" label="角色" prop="roleName" min-width="100"></el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
          <el-table-column align="center" label="最后登录时间" prop="lastLoginTime" min-width="160"></el-table-column>
          <el-table-column align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '正常':'冻结' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="160">
            <template slot-scope="scope">
              <template v-if="checkBtnRole('status')">
                <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定冻结吗？" @onConfirm="changeStatus(scope.row.adminUserId, 0)" >
                  <el-button slot="reference" type="text">冻结</el-button>
                </el-popconfirm>
                <el-popconfirm v-else style="margin-right: 10px;" title="确定恢复吗？" @onConfirm="changeStatus(scope.row.adminUserId, 1)" >
                  <el-button slot="reference" type="text">恢复</el-button>
                </el-popconfirm>
              </template>

              <el-button type="text" @click="openAccountForm('edit', scope.row.adminUserId)" v-if="checkBtnRole('edit')">编辑</el-button>
              <el-button type="text" @click="handleReset(scope.row.adminUserId)" v-if="checkBtnRole('reset')">重置密码</el-button>

              <!-- <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="deleteAccount(scope.row.id)" v-if="checkBtnRole('del')">
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm> -->
            </template>
          </el-table-column>
          
        </el-table>
      </div>
      
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>
    
    <!-- 添加编辑账号 -->
    <el-dialog :title="AccountFormType == 'add' ? '添加账号':'编辑账号'" :visible.sync="AccountFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="AccountForm" :model="AccountForm" :rules="AccountFormRules" label-position="left" label-width="80px">
        <el-form-item label="账号" prop="account">
          <el-input v-model="AccountForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="nickName">
          <el-input v-model="AccountForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="角色组" prop="role">
          <el-select v-model="AccountForm.role" placeholder="请选择角色组" style="width: 100%;">
            <el-option :label="item.name" :value="item.adminRoleId" v-for="(item, index) in roleList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="department" v-show="accountType === 0">
          <el-tree
            :data="departmentList"
            show-checkbox
            node-key="adminWebsitId"
            ref="tree"
            highlight-current
            :props="props">
          </el-tree>
        </el-form-item>
        <el-form-item label="商户" prop="merchant" v-show="accountType === 1 || accountType === 2">
          <el-select v-model="AccountForm.merchant" placeholder="请选择商户" style="width: 100%;">
            <el-option :label="item.adminCompanyName" :value="item.adminCompanyId" v-for="(item, index) in merchantList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="newPassword">
          <el-input v-model="AccountForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入密码" :type="passwordType1"></el-input>
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="AccountForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码" :type="passwordType2"></el-input>
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAccountForm">取 消</el-button>
        <el-button type="primary" @click="submitAccountForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog title="重置密码" :visible.sync="resetFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
        <el-form-item label="输入新密码" prop="newPassword">
          <el-input v-model="resetForm.newPassword" ref="password1" autocomplete="off" placeholder="请输入新密码" :type="passwordType1"></el-input>
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="resetForm.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入新密码" :type="passwordType2"></el-input>
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelResetForm">取 消</el-button>
        <el-button type="primary" @click="submitResetForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getDepartmentList, getAccountList, addAccount, editAccount, deleteAccount, getAccountDetail, getRoleList, getMerchantList, changeAccountStatus, resetPassword } from '@/api/setting'
import { findElem, downloadFiles, handleImport } from '@/utils/util'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else if (value && value.length < 6) {
        callback(new Error('密码长度至少6位'));
      } else {
        if (this.resetForm.confirmPassword !== '') {
          this.$refs.resetForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetForm.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else if (value && value.length < 6) {
        callback(new Error('密码长度至少6位'));
      } else {
        if (this.AccountForm.confirmPassword !== '') {
          this.$refs.AccountForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass4 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.AccountForm.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: null, // 列表数据
      moduleList: null, // 模块列表
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        name: '', // 名称
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      selectDepartment: null, // 选中的部门

      AccountFormType: 'add',
      AccountFormVisible: false,
      AccountForm: {
        account: '', // 账号
        nickName: '', // 用户名
        merchant: '', // 商户
        role: '', // 角色组
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
      },
      AccountFormRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色组', trigger: 'change' }
        ],
        newPassword: [
          { required: true, validator: validatePass3, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass4, trigger: 'blur' }
        ],
      },
      editAccountId: null, 

      filterText: '',
      departmentList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      props: {
        multiple: true,
        value: 'adminWebsitId',
        label: 'name',
        children: 'children',
      },

      tableSelection: [],

      importLoading: false, // 导入加载loading
      importFileList: [], // 导入列表

      resetId:  null,
      resetFormVisible: false,
      resetForm: {
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
      },
      resetFormRules: {
        newPassword: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
      },

      accountType: '',
      roleList: [], // 角色列表
      merchantList: [],

      passwordType1: 'password',
      passwordType2: 'password',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.listTree.filter(val);
    },
    'AccountForm.role'() {
      if(this.AccountForm.role) {
        let index = findElem(this.roleList, 'adminRoleId', this.AccountForm.role);
        this.accountType = this.roleList[index].type;
      }
    }
  },
  async created() {
    this.getTree();
    this.getList();
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true;
    },

    // 获取角色列表
    async getRoleList() {
      const result = await new Promise((resolve, reject) => {
        getRoleList({pageNum: 1, pageSize: 1000}).then(res => {
          this.roleList = res.data.records;
          resolve(res.data);
        }).catch(res => {
          resolve([]);
        })
      })
      return result;
    },

    // 获取商户列表
    async getMerchantList() {
      const result = await new Promise((resolve, reject) => {
        getMerchantList({
          pageNum: 1,
          pageSize: 1000
        }).then(res => {
          this.merchantList = res.data.records;
          resolve(res.data.records);
        }).catch(res => {
          resolve([]);
        })
      })
      return result;
    },

    // 获取部门列表
    getTree() {
      getDepartmentList().then(res => {
        this.departmentList = res.data;
      })
    },

    // 获取账号列表
    getList() {
      this.listLoading = true;

      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        adminWebsitId: this.selectDepartment ? this.selectDepartment.adminWebsitId : '',
        keyword: this.screenForm.name
      };

      getAccountList(params).then(res => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1;
      this.getList();
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields();
      this.currentPage = 1;
      this.getList();
    },

    // 筛选部门
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // 选择部门
    handleNodeClick(data) {
      console.log(data);
      if(this.selectDepartment && data.adminWebsitId === this.selectDepartment.adminWebsitId) {
        this.$refs.listTree.setCurrentKey(null);
        this.selectDepartment = null;
      }else {
        this.selectDepartment = data;
      }
      this.getList();
    },

    // 刷新部门
    refreshDepartment() {
      this.$refs.listTree.setCurrentKey(null);
      this.selectDepartment = null;
      this.getTree();
      this.getList();
    },

    // 打开 新增编辑 账号表单
    async openAccountForm(type, id) {

      this.AccountFormType = type;
      this.AccountFormVisible = true;
      await this.getMerchantList();
      await this.getRoleList();
      if(type == 'add') {
        if(this.selectDepartment) {
          this.$refs.tree.setCheckedKeys([this.selectDepartment.adminWebsitId]);
        }
      }

      if(type == 'edit') {
        this.editAccountId = id;
        getAccountDetail({adminUserId: id}).then(res => {
          this.AccountForm.account = res.data.userName;
          this.AccountForm.role = res.data.roleId;
          this.AccountForm.nickName = res.data.nickName;
          this.AccountForm.merchant = res.data.companyWechatId;
          this.$refs.tree.setCheckedKeys(res.data.adminWebsitIds || []);
        })
      }
    },

    // 取消 新增编辑 账号表单
    cancelAccountForm(){
      this.AccountFormVisible = false;
      this.$refs.AccountForm.resetFields();
      this.passwordType1 = 'password';
      this.passwordType2 = 'password';
    },

    // 提交 账号表单
    submitAccountForm() {
      this.$refs.AccountForm.validate((valid) => {
        if (valid) {
          let params = {
            userName: this.AccountForm.account,
            nickName: this.AccountForm.nickName,
            roleId: this.AccountForm.role,
            password: this.AccountForm.newPassword,
          }
          if(this.accountType === 0) {
            params.adminWebsitIds = this.$refs.tree.getCheckedKeys();
          }else {
            params.adminCompanyId = this.AccountForm.merchant;
          }
          if(this.AccountFormType == 'edit') {
            params.adminUserId = this.editAccountId;
            editAccount(params).then(res => {
              this.cancelAccountForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          }else {
            addAccount(params).then(res => {
              this.cancelAccountForm();
              this.getList();
              this.$successMsg('添加成功');
            })
          }
        }
      })
    },

    // 表格选择列
    handleTableSelection(val) {
      this.tableSelection = val;
    },

    // 批量删除账号
    batchDeleteAccount() {
      if(this.tableSelection.length < 1) {
        return this.$errorMsg('至少选择一名账号');
      }
      this.$confirm(`确定删除选中的账号吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let AccountIds = [];
        this.tableSelection.forEach(item => {
          AccountIds.push(item.id);
        });
        deleteAccount({id: AccountIds.join(',')}).then(res => {
          this.$successMsg();
          this.getTree();
          this.getList();
        })
      }).catch(() => {});
    },

    // 删除账号
    deleteAccount(id) {
      deleteAccount({id: id}).then(res => {
        this.$successMsg();
        this.getTree();
        this.getList();
      })
    },

    // 操作 - 更改状态(type: 禁用0，启用1)
    changeStatus(id, type) {
      type = type ? true : false
      changeAccountStatus({adminUserId: id, status: type}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 显示隐藏密码
    showPwd(num) {
      if(num == 1) {
        if (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if(num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
    },

    // 重置密码
    handleReset(id) {
      this.resetId = id;
      this.resetFormVisible = true;
    },

    // 取消重置密码
    cancelResetForm(){
      this.resetFormVisible = false;
      this.passwordType1 = 'password';
      this.passwordType2 = 'password';
      this.$refs.resetForm.resetFields();
    },

    // 提交重置密码
    submitResetForm() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          let params = {
            password: this.resetForm.newPassword,
            adminUserId: this.resetId
          }
          resetPassword(params).then(res => {
            this.cancelResetForm();
            this.getList();
            this.$successMsg();
          })
        }
      })
    },


    // 导出
    handleExport() {
      let screenData = {
        adminWebsitId: this.selectDepartment ? this.selectDepartment.websitId : '',
        keyword: this.screenForm.name
      };
      downloadFiles('wechat/enterprise/export', screenData);
    },

    // 下载导入模版
    handleDownload() {
      downloadFiles('wechat/enterprise/download');
    },

    clickImport() {
      if(!this.selectDepartment) {
        return this.$errorMsg('请选择部门');
      }else {
        document.querySelector('.import-btn input').click();
      }
    },

    // 导入
    async handleImport(param) {
      this.importLoading = true;
      const file = param.file;
      const formData = new FormData();
      formData.append("file", file);
      formData.append("mainDepartmentId", this.selectDepartment.websitId);
      let result = await handleImport('wechat/enterprise/import', formData);
      this.importLoading = false;
      this.importFileList = [];
      if(result.code == 200) {
        this.$alert(result.message, '导入成功', {
          confirmButtonText: '确定'
        });
        this.getList();
      }else {
        this.$alert(result.message, '导入失败', {
          confirmButtonText: '确定'
        });
      }
    },

  }
}
</script>

<style scoped lang="scss">
  .app-container {
    display: flex;
    .tree-container {
      width: 18%;
      height: calc(100vh - 110px);
      flex-shrink: 0;
      background: #f5f5f5;
      margin-right: 2%;
      display: flex;
      flex-direction: column;
      overflow-y: hidden;
      .el-tree {
        height: 100%;
        background: none;
        width: 100%;
        overflow: scroll;
        // ::v-deep .el-tree-node:focus > .el-tree-node__content {
        //   color: #ffffff;
        //   background-color: #409EFF;
        // }
        ::v-deep >.el-tree-node {
          display: inline-block;
          min-width: 100%;
        }
        ::v-deep .el-tree-node>.el-tree-node__content {
          padding-right: 10px;
          align-self: baseline;
        }
        ::v-deep .el-tree-node.is-current>.el-tree-node__content {
          background-color: #409EFF;
          .custom-tree-node {
            i {
              color: #fff;
            }
            span {
              color: #fff;
            }
          }
        }
        ::v-deep .el-tree-node>.el-tree-node__children {
          overflow: unset;
        }
        .custom-tree-node {
          i {
            font-size: 14px;
            color: #999;
          }
          span {
            font-size: 14px;
            margin-left: 6px;
            color: #666;
          }
        }
      }
    }
    .mymain-container {
      width: 80%;
      margin-top: 0;
    }
  }
  ::v-deep .el-divider--vertical {
    margin: 0 15px;
  }
  .show-pwd {
    position: absolute;
    right: 15px;
    top: 0;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
</style>