first commit

src/views/system/user/index.vue

@@ -0,0 +1,234 @@
+<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/index.vue'
+import TableComponent from '@/components/Table/index.vue'
+import DialogComponent from '@/components/Dialog/index.vue'
+import DetailComponent from './detail.vue'
+
+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.data
+      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>