erqi-web/src/views/system/user/index.vue

<template>
  <FilterComponent :filter-items="items" :filter-model="model" theme="light" @handle="handle" />
  <TableComponent style="height: calc(100% - 92px);" :data="data" :columns="columns" :config="config" :operate="operate"
    theme="light" size="large" @handle="handle" />
  <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size" :total="pagination.total"
    :page-sizes="[10, 15, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="initData"
    @current-change="initData" style="margin-top: 10px; justify-content: center;" />
  <DialogComponent v-if="detail.visible" :title="detail.title[detail.type]" :modal="true" width="500"
    @close="closeDetail">
    <DetailComponent :data="detail.data" :type="detail.type" :tree="detail.deptOptions" @close="closeDetail" />
  </DialogComponent>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserPage, delUser, deptTreeSelect, resetUserPwd } from '@/api/system'
import FilterComponent from '@/components/Filter/index2.vue'
import TableComponent from '@/components/Table/index.vue'
import DialogComponent from '@/components/Dialog/index.vue'
import DetailComponent from './detail.vue'
import { it } from 'element-plus/es/locale/index.mjs'

const items = [
  {
    label: '用户账号',
    prop: 'userName',
    type: 'input'
  },
  {
    label: '所属部门',
    prop: 'deptName',
    type: 'input'
  },
  {
    name: '查询',
    prop: 'query',
    theme: 'primary',
    type: 'button',
    permission: [ 'system:user:query' ]
  },
  {
    name: '新增',
    prop: 'add',
    theme: 'success',
    type: 'button',
    permission: [ 'system:user:add' ]
  }
]

let model = {
  userName: '',
  deptName: ''
}

const data = ref([])

const columns = [
  {
    label: '用户账号',
    prop: 'userName'
  },
  {
    label: '用户名称',
    prop: 'nickName'
  },
  {
    label: '所属部门',
    prop: 'deptName'
  },
  {
    label: '手机号码',
    prop: 'phonenumber'
  }
]

const config = {
  type: 'index',
  width: 200
}

const operate = [
  {
    label: '重置密码',
    prop: 'reset',
    theme: 'success',
    permission: [ 'system:user:resetPwd' ]
  },
  {
    label: '编辑',
    prop: 'edit',
    theme: 'primary',
    permission: [ 'system:user:edit' ]
  },
  {
    label: '删除',
    prop: 'delete',
    theme: 'danger',
    permission: [ 'system:user:remove' ]
  }
]

const pagination = reactive({
  current: 1,
  size: 15,
  total: 0
})

const detail = reactive({
  visible: false,
  title: {
    add: '用户信息新增',
    check: '用户信息查看',
    edit: '用户信息编辑'
  },
  type: 'add',
  data: {},
  deptOptions: []
})

/**
 * 获取数据
 */
const initData = () => {
  const params = {
    ...model,
    pageNum: pagination.current,
    pageSize: pagination.size
  }
  getUserPage(params).then(res => {
    if (res.code === 200) {
      data.value = res.rows.map(item => {
        return{
          ...item,
          deptName: item.dept ? item.dept.deptName : ''
        }
    })
      pagination.total = res.total
    } else {
      ElMessage.error(res.msg || '查询失败！')
    }
  })
}

/**
 * 删除用户
 * @param id 用户ID
 */
const deleteUser = (id) => {
  delUser(id).then(() => {
    ElMessage.success('删除成功！')
    initData()
  })
}

/**
* 按钮操作
* @param type 操作类型
* @param data 数据
*/
const handle = (type, data) => {

  switch (type) {
    case 'query':
      model = { ...data }
      pagination.current = 1
      initData()
      break
    case 'add':
      detail.visible = true
      detail.type = 'add'
      detail.data = {}
      break
    case 'check':
    case 'edit':
      detail.type = type
      detail.data = { ...data }
      detail.visible = true
      break
    case 'delete': {
      ElMessageBox.confirm(
        '是否删除该条数据?',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteUser(data.userId)
      })
      break
    }
    case 'reset': {
      ElMessageBox.prompt('请输入"' + data.userName + '"的新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: '用户密码长度必须介于 5 和 20 之间'
      })
      .then(({ value }) => {
        const params = {
          password: value,
          userId: data.userId
        }
        resetUserPwd(params).then(response => {
          ElMessage.success('修改成功，新密码是：' + value)
        })
      })
      .catch(() => {})
      break
    }
    default:
      break
  }
}

/**
 * 关闭详情弹窗
 * @param refresh 是否刷新数据
 */
const closeDetail = (refresh) => {
  detail.visible = false
  if (refresh) {
    initData()
  }
}

/** 查询部门下拉树结构 */
const getDeptTree = () => {
  deptTreeSelect().then(res => {
    detail.deptOptions = res.data
  })
}

initData()
getDeptTree()
</script>

<style lang="scss" scoped></style>