jsm-mall-front/src/views/setting/account/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: activeKey == 'list' ? 'auto' : 'hidden'
        }"
      >
        <div class="app-container">
          <div class="setting_title">账户管理</div>
          <el-divider></el-divider>
          <div class="mymain-container">
            <div class="btn-group clearfix">
              <div class="fl">
                <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')"
                  >新增账户</el-button
                >
              </div>
              <div class="fr">
                <el-select
                  v-model="screenForm.role"
                  placeholder="全部"
                  size="small"
                  style="width: 120px; margin-right: 10px"
                  @change="getListByScreen"
                >
                  <el-option label="全部角色" value=""></el-option>
                  <el-option
                    :label="item.name"
                    :value="item.adminRoleId"
                    v-for="(item, index) in roleList"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="screenForm.status"
                  placeholder="全部"
                  size="small"
                  style="width: 120px; margin-right: 10px"
                  @change="getListByScreen"
                >
                  <el-option label="全部状态" value=""></el-option>
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in select_status"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-input
                  placeholder="商户名称"
                  v-model="screenForm.companyWechatName"
                  size="small"
                  style="width: 180px"
                ></el-input>
                <el-input placeholder="用户名" v-model="screenForm.keyword" size="small" style="width: 180px">
                  <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
                </el-input>
                <el-button
                  size="small"
                  @click="
                    screenForm.companyWechatName = ''
                    screenForm.keyword = ''
                    screenForm.role = ''
                    screenForm.status = ''
                    getListByScreen()
                  "
                  >清空</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" label="序号" type="index" width="50"></el-table-column>
                <el-table-column align="center" label="商户" prop="companyName" min-width="160"></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="160"></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">
                    <el-popconfirm
                      v-if="scope.row.status"
                      style="margin-right: 10px"
                      title="确定冻结吗？"
                      @confirm="changeStatus(scope.row.adminUserId, 0)"
                    >
                      <el-button slot="reference" type="text">冻结</el-button>
                    </el-popconfirm>
                    <el-popconfirm
                      v-else
                      style="margin-right: 10px"
                      title="确定恢复吗？"
                      @confirm="changeStatus(scope.row.adminUserId, 1)"
                    >
                      <el-button slot="reference" type="text">恢复</el-button>
                    </el-popconfirm>
                    <el-button type="text" @click="addOrEdit('edit', scope.row.adminUserId)">编辑</el-button>
                    <el-button type="text" @click="handleReset(scope.row.adminUserId)">重置密码</el-button>
                    <el-button v-if="userName == 'admin'" type="text" @click="dengluLogin(scope.row)">登入</el-button>
                  </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>
        </div>
      </div>
      <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
          <el-row :gutter="20">
            <el-col :md="6">
              <el-form-item label="账号" prop="account">
                <el-input v-model="addForm.account" autocomplete="off" placeholder="请输入账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="用户名" prop="nickName">
                <el-input v-model="addForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="手机号" prop="linkPhone">
                <el-input v-model="addForm.linkPhone" autocomplete="off" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="角色组" prop="role">
                <el-select v-model="addForm.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-col>
            <el-col :md="6">
              <el-form-item label="部门/网点" prop="rwaide">
                <el-cascader
                  style="width: 100%"
                  :options="departmentList"
                  :props="{ checkStrictly: true, value: 'adminDeptId', label: 'deptName' }"
                  v-model="addForm.rwaide"
                  clearable
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ data.isWebsit ? '网点' : '部门' }}-{{ data.deptName }}</span>
                  </template>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item label="密码" prop="newPassword">
                <el-input
                  v-model="addForm.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-col>
            <el-col :md="6">
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="addForm.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-col>
            <el-col :md="6">
              <el-form-item label="是否公众号通知" prop="pubNotice" label-width="120px">
                <el-switch v-model="addForm.pubNotice" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="data.removeTab()">取 消</el-button>
          <el-button type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
        </div>
      </div>
      <div v-if="~['resetpassword'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <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="data.removeTab()">取 消</el-button>
          <el-button type="primary" @click="submitResetForm(data.removeTab)">确 定</el-button>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import {
  getAccountList,
  getRoleList,
  changeAccountStatus,
  resetPassword,
  addAccount,
  editAccount,
  getUserInfo,
  getDepartmentList,
  getMerchantList
} from '@/api/setting'
import { adminDeptTreeWebsit } from '@/api/departmentManagement.js'
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.addForm.confirmPassword !== '') {
          this.$refs.addForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var validatePass4 = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.addForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      userName: JSON.parse(localStorage.getItem('greemall_user')).userName,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        role: '', // 角色
        status: '', // 状态
        keyword: '', // 关键词
        companyWechatName: '' //商户名
      },
      select_status: [
        // 筛选字段 - 状态
        { label: '正常', value: true },
        { label: '冻结', value: false }
      ],
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      roleList: [], // 角色列表
      departmentList: [], // 部门列表
      merchantList: [], // 商户列表
      resetId: null,
      resetForm: {
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码
      },
      resetFormRules: {
        newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      },
      editId: null,
      addFormType: 'add',
      addForm: {
        account: '', // 账号
        nickName: '', // 用户名
        role: '', // 角色组
        adminWebsitId: '',
        adminDeptId: '',
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
        pubNotice: true,
        linkPhone: '',
        rwaide: ''
      },
      addFormRules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        nickName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        linkPhone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色组', trigger: 'blur' }],
        rwaide: [{ required: true, message: '请选择网点', trigger: 'blur' }],
        newPassword: [{ validator: validatePass3, trigger: 'blur' }],
        confirmPassword: [{ validator: validatePass4, trigger: 'blur' }]
      },
      passwordType1: 'password',
      passwordType2: 'password'
    }
  },
  async created() {
    await this.getRoleList()
    if (this.$route.query.type) {
      let index = this.$findElem(this.roleList, 'name', '企业负责人')
      this.screenForm.role = this.roleList[index].adminRoleId
    }
    this.getList()
  },
  watch: {
    'addForm.role'() {
      if (this.addForm.role) {
        let index = this.$findElem(this.roleList, 'adminRoleId', this.addForm.role)
      }
    }
  },
  methods: {
    getList() {
      this.listLoading = true

      let params = {
        roleId: this.screenForm.role,
        status: this.screenForm.status,
        userName: this.screenForm.keyword,
        companyWechatName: this.screenForm.companyWechatName,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...(() => {
          if (this.$route.query.companyWechatId) {
            return {
              companyWechatId: this.$route.query.companyWechatId
            }
          }
          return {}
        })()
      }

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

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1
      this.getList()
    },

    // 获取角色列表
    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 getDepartmentList() {
      const result = await new Promise((resolve, reject) => {
        adminDeptTreeWebsit()
          .then(res => {
            resolve(res.data)
          })
          .catch(res => {
            resolve([])
          })
      })
      return result
    },

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

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      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.$refs.tabPage.addTab({
        activeKey: 'resetpassword',
        key: 'resetpassword',
        label: '重置密码',
        triggerEvent: () => {
          this.cancelResetForm()
          this.$nextTick(() => {
            this.resetId = id
          })
        },
        closeEvent: () => {
          this.cancelResetForm()
        }
      })
    },

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

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

    // 新增编辑 账户
    async addOrEdit(type, id) {
      this.$refs.tabPage.addTab({
        activeKey: type,
        key: type,
        label: { add: '新增', edit: '编辑' }[type],
        triggerEvent: async () => {
          this.cancelAddForm()
          this.addFormType = type
          this.departmentList = await this.getDepartmentList()
          if (type == 'edit') {
            this.editId = id
            getUserInfo({ adminUserId: id }).then(res => {
              this.addForm = {
                account: res.data.userName,
                role: res.data.roleId,
                nickName: res.data.nickName,
                pubNotice: res.data.pubNotice,
                adminWebsitId: res.data.adminWebsitId,
                adminDeptId: res.data.adminDeptId,
                linkPhone: res.data.linkPhone,
                rwaide: res.data.adminWebsitId || res.data.adminDeptId
              }
            })
          }
        },
        closeEvent: () => {}
      })
    },

    // 取消 新增编辑账户
    cancelAddForm() {
      this.passwordType1 = 'password'
      this.passwordType2 = 'password'
      this.$refs?.addForm?.resetFields()
      this.$data.addForm = this.$options.data().addForm
    },

    // 提交 新增编辑账户
    submitAddForm(removeTab) {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          let rwaide = null
          if (this.addForm.rwaide instanceof Array) {
            rwaide = this.addForm.rwaide[this.addForm.rwaide.length - 1]
          } else {
            rwaide = this.addForm.rwaide
          }
          let params = {
            userName: this.addForm.account,
            nickName: this.addForm.nickName,
            roleId: this.addForm.role,
            password: this.addForm.newPassword,
            pubNotice: this.addForm.pubNotice,
            linkPhone: this.addForm.linkPhone,
            ...(() => {
              var aaa = list => {
                for (var item of list) {
                  if (item.adminDeptId == rwaide) {
                    return item.isWebsit
                  } else if (item?.children && item?.children?.length) {
                    var data = aaa(item?.children)
                    if (data !== undefined) {
                      return data
                    }
                  }
                }
                return undefined
              }
              if (aaa(this.departmentList)) {
                return {
                  adminWebsitId: rwaide
                }
              } else {
                return {
                  adminDeptId: rwaide
                }
              }
            })()
          }
          if (this.addFormType == 'edit') {
            params.adminUserId = this.editId
            editAccount(params).then(res => {
              removeTab('list')
              this.getList()
              this.$successMsg('编辑成功')
            })
          } else {
            addAccount(params).then(res => {
              removeTab('list')
              this.getList()
              this.$successMsg('新增成功')
            })
          }
        }
      })
    },

    async dengluLogin(row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$store
        .dispatch('user/login', { username: row.userName })
        .then(() => {
          setTimeout(() => {
            loading.close()
            window.location.href = process.env.NODE_ENV === 'staging' ? '/jsm-manager' : '/'
          }, 1000)
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
</style>