!76 用户管理代码二次重构

Merge pull request !76 from fessor/dev

!76 用户管理代码二次重构
Merge pull request !76 from fessor/dev
d28179d1 · 芋道源码 · Gitee · 84ab75b4 · 3c6d96d9 · d28179d1
Commit d28179d1 authored Mar 30, 2023 by 芋道源码 Committed by Gitee Mar 30, 2023
6 changed files
--- a/src/views/system/user/RoleForm.vue
+++ b/src/views/system/user/RoleForm.vue
 <template>
-  <el-dialog title="分配角色" :modelValue="show" width="500px" append-to-body @close="closeDialog">
+  <Dialog
-    <el-form :model="formData" label-width="80px" ref="formRef">
+    title="分配角色"
-      <el-form-item label="用户名称">
+    :modelValue="showDialog"
-        <el-input v-model="formData.username" :disabled="true" />
+    width="500px"
-      </el-form-item>
+    append-to-body
-      <el-form-item label="用户昵称">
+    @close="closeDialog"
-        <el-input v-model="formData.nickname" :disabled="true" />
+  >
-      </el-form-item>
+    <el-form :model="formData" label-width="80px" ref="formRef">
-      <el-form-item label="角色">
+      <el-form-item label="用户名称">
-        <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
+        <el-input v-model="formData.username" :disabled="true" />
-          <el-option
+      </el-form-item>
-            v-for="item in roleOptions"
+      <el-form-item label="用户昵称">
-            :key="item.id"
+        <el-input v-model="formData.nickname" :disabled="true" />
-            :label="item.name"
+      </el-form-item>
-            :value="item.id"
+      <el-form-item label="角色">
-          />
+        <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
-        </el-select>
+          <el-option
-      </el-form-item>
+            v-for="item in roleOptions"
-    </el-form>
+            :key="item.id"
-    <template #footer>
+            :label="item.name"
-      <div class="dialog-footer">
+            :value="item.id"
-        <el-button type="primary" @click="submit">确 定</el-button>
+          />
-        <el-button @click="cancel">取 消</el-button>
+        </el-select>
-      </div>
+      </el-form-item>
-    </template>
+    </el-form>
-  </el-dialog>
+    <template #footer>
-</template>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submit">确 定</el-button>
-<script setup lang="ts">
+        <el-button @click="cancel">取 消</el-button>
-// TODO el-dialog 用 Dialog 组件
+      </div>
-import { assignUserRoleApi, PermissionAssignUserRoleReqVO } from '@/api/system/permission'
+    </template>
+  </Dialog>
-interface Props {
+</template>
-  show: boolean
-  roleOptions: any[]
+<script setup lang="ts">
-  formInitValue?: Recordable & Partial<typeof initParams>
+import {
-}
+  assignUserRoleApi,
+  listUserRolesApi,
-const props = withDefaults(defineProps<Props>(), {
+  PermissionAssignUserRoleReqVO
-  show: false,
+} from '@/api/system/permission'
-  roleOptions: () => [],
+import { UserVO } from '@/api/system/user'
-  formInitValue: () => ({})
+import * as RoleApi from '@/api/system/role'
-})
-const emits = defineEmits(['update:show', 'success'])
+const emits = defineEmits(['success'])
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 表单初始化参数
 const initParams = {
  nickname: '',
  id: 0,
  username: '',
  roleIds: [] as number[]
 }
 const formData = ref<Recordable>({ ...initParams })
-watch(
-  () => props.formInitValue,
+/* 弹框按钮操作 */
-  (val) => {
+// 点击取消
-    formData.value = { ...val }
+const cancel = () => {
-  },
+  closeDialog()
-  { deep: true }
+}
-)
+// 关闭弹窗
-/* 弹框按钮操作 */
+const closeDialog = () => {
-// 点击取消
+  showDialog.value = false
-const cancel = () => {
+}
-  closeDialog()
+// 提交
-}
+const submit = async () => {
-// 关闭弹窗
+  const data = ref<PermissionAssignUserRoleReqVO>({
-const closeDialog = () => {
+    userId: formData.value.id,
-  emits('update:show', false)
+    roleIds: formData.value.roleIds
-}
+  })
-// 提交
+  try {
-const submit = async () => {
+    await assignUserRoleApi(data.value)
-  const data = ref<PermissionAssignUserRoleReqVO>({
+    message.success(t('common.updateSuccess'))
-    userId: formData.value.id,
+    emits('success', true)
-    roleIds: formData.value.roleIds
+    closeDialog()
-  })
+  } catch (error) {
-  try {
+    console.error(error)
-    await assignUserRoleApi(data.value)
+  }
-    message.success(t('common.updateSuccess'))
+}
-    emits('success', true)
-    closeDialog()
+const roleOptions = ref()
-  } catch (error) {
+const userRole = reactive(initParams)
-    console.error(error)
+const showDialog = ref(false)
-  }
+const formRef = ref()
-}
+const openForm = async (row: UserVO) => {
-</script>
+  formRef.value?.resetFields()
+  userRole.id = row.id
+  userRole.username = row.username
+  userRole.nickname = row.nickname
+  // 获得角色列表
+  const roleOpt = await RoleApi.getSimpleRoleList()
+  roleOptions.value = [...roleOpt]
+  // 获得角色拥有的菜单集合
+  const roles = await listUserRolesApi(row.id)
+  userRole.roleIds = roles
+  formData.value = { ...userRole }
+  showDialog.value = true
+}
+defineExpose({
+  openForm
+})
+</script>
--- a/src/views/system/user/components/UserDeptTree.vue
+++ b/src/views/system/user/components/UserDeptTree.vue
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" placeholder="请输入部门名称" clearable style="margin-bottom: 20px">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      :data="deptOptions"
+      :props="defaultProps"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      ref="treeRef"
+      node-key="id"
+      default-expand-all
+      highlight-current
+      @node-click="handleDeptNodeClick"
+    />
+  </div>
+</template>
+<script setup lang="ts" name="UserDeptTree">
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+const emits = defineEmits(['node-click'])
+const deptName = ref('')
+const deptOptions = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const getTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptOptions.value = []
+  deptOptions.value.push(...handleTree(res))
+}
+const filterNode = (value: string, data: Tree) => {
+  if (!value) return true
+  return data.name.includes(value)
+}
+const handleDeptNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+onMounted(async () => {
+  await getTree()
+})
+</script>
--- a/src/views/system/user/AddForm.vue
+++ b/src/views/system/user/AddForm.vue
--- a/src/views/system/user/ImportForm.vue
+++ b/src/views/system/user/ImportForm.vue
 <template>
-  <el-dialog
+  <Dialog
    :title="upload.title"
-    :modelValue="modelValue"
+    :modelValue="showDialog"
    width="400px"
    append-to-body
    @close="closeDialog"
  >
    <el-upload
      ref="uploadRef"
      accept=".xlsx, .xls"
      :limit="1"
      :headers="upload.headers"
      :action="upload.url + '?updateSupport=' + upload.updateSupport"
      :disabled="upload.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :on-exceed="handleExceed"
      :on-error="excelUploadError"
      :auto-upload="false"
      drag
    >
      <Icon icon="ep:upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip text-center">
          <div class="el-upload__tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
      </template>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
-  </el-dialog>
+  </Dialog>
 </template>
 <script lang="ts" setup>
 import { importUserTemplateApi } from '@/api/system/user'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 import download from '@/utils/download'
-interface Props {
+const emits = defineEmits(['success'])
-  modelValue: boolean
-}
+const message = useMessage() // 消息弹窗
-// const props =
+const showDialog = ref(false)
-withDefaults(defineProps<Props>(), {
+const uploadRef = ref()
-  modelValue: false
-})
+// 用户导入参数
+const upload = reactive({
-const emits = defineEmits(['update:modelValue', 'success'])
+  // // 是否显示弹出层（用户导入）
+  // open: false,
-const message = useMessage() // 消息弹窗
+  // 弹出层标题（用户导入）
+  title: '用户导入',
-const uploadRef = ref()
+  // 是否禁用上传
+  isUploading: false,
-// 用户导入参数
+  // 是否更新已经存在的用户数据
-const upload = reactive({
+  updateSupport: 0,
-  // // 是否显示弹出层（用户导入）
+  // 设置上传的请求头部
-  // open: false,
+  headers: {
-  // 弹出层标题（用户导入）
+    Authorization: 'Bearer ' + getAccessToken(),
-  title: '用户导入',
+    'tenant-id': getTenantId()
-  // 是否禁用上传
+  },
-  isUploading: false,
+  // 上传的地址
-  // 是否更新已经存在的用户数据
+  url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
-  updateSupport: 0,
+})
-  // 设置上传的请求头部
-  headers: {
+// 文件上传中处理
-    Authorization: 'Bearer ' + getAccessToken(),
+const handleFileUploadProgress = () => {
-    'tenant-id': getTenantId()
+  upload.isUploading = true
-  },
+}
-  // 上传的地址
+// 文件上传成功处理
-  url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
+const handleFileSuccess = (response: any) => {
-})
+  if (response.code !== 0) {
+    message.error(response.msg)
-// 文件上传中处理
+    return
-const handleFileUploadProgress = () => {
+  }
-  upload.isUploading = true
+  upload.isUploading = false
-}
+  uploadRef.value?.clearFiles()
-// 文件上传成功处理
+  // 拼接提示语
-const handleFileSuccess = (response: any) => {
+  const data = response.data
-  if (response.code !== 0) {
+  let text = '上传成功数量：' + data.createUsernames.length + ';'
-    message.error(response.msg)
+  for (let username of data.createUsernames) {
-    return
+    text += '< ' + username + ' >'
  }
-  upload.isUploading = false
+  text += '更新成功数量：' + data.updateUsernames.length + ';'
-  uploadRef.value?.clearFiles()
+  for (const username of data.updateUsernames) {
-  // 拼接提示语
+    text += '< ' + username + ' >'
-  const data = response.data
+  }
-  let text = '上传成功数量：' + data.createUsernames.length + ';'
+  text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
-  for (let username of data.createUsernames) {
+  for (const username in data.failureUsernames) {
-    text += '< ' + username + ' >'
+    text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
  }
-  text += '更新成功数量：' + data.updateUsernames.length + ';'
+  message.alert(text)
-  for (const username of data.updateUsernames) {
+  emits('success')
-    text += '< ' + username + ' >'
+  closeDialog()
-  }
+}
-  text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
-  for (const username in data.failureUsernames) {
+// 文件数超出提示
-    text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
+const handleExceed = (): void => {
-  }
+  message.error('最多只能上传一个文件！')
-  message.alert(text)
+}
-  emits('success')
+// 上传错误提示
-  closeDialog()
+const excelUploadError = (e): void => {
-}
+  console.log(e)
+  message.error('导入数据失败，请您重新上传！')
-// 文件数超出提示
+}
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
+/** 下载模板操作 */
-}
+const importTemplate = async () => {
-// 上传错误提示
+  try {
-const excelUploadError = (): void => {
+    const res = await importUserTemplateApi()
-  message.error('导入数据失败，请您重新上传！')
+    download.excel(res, '用户导入模版.xls')
-}
+  } catch (error) {
+    console.error(error)
-/** 下载模板操作 */
+  }
-const importTemplate = async () => {
+}
-  try {
-    const res = await importUserTemplateApi()
+/* 弹框按钮操作 */
-    download.excel(res, '用户导入模版.xls')
+// 点击取消
-  } catch (error) {
+const cancel = () => {
-    console.error(error)
+  closeDialog()
-  }
+}
-}
+// 关闭弹窗
+const closeDialog = () => {
-/* 弹框按钮操作 */
+  showDialog.value = false
-// 点击取消
+}
-const cancel = () => {
+// 提交上传文件
-  closeDialog()
+const submitFileForm = () => {
-}
+  uploadRef.value?.submit()
-// 关闭弹窗
+}
-const closeDialog = () => {
-  emits('update:modelValue', false)
+const openForm = () => {
-}
+  uploadRef.value?.clearFiles()
-// 提交上传文件
+  showDialog.value = true
-const submitFileForm = () => {
+}
-  uploadRef.value?.submit()
+defineExpose({
-}
+  openForm
-</script>
+})
+</script>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
--- a/src/views/system/user/utils.ts
+++ b/src/views/system/user/utils.ts
-export const parseTime = (time) => {
-  if (!time) {
-    return null
-  }
-  const format = '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
-      time = parseInt(time)
-    } else if (typeof time === 'string') {
-      time = time
-        .replace(new RegExp(/-/gm), '/')
-        .replace('T', ' ')
-        .replace(new RegExp(/\.[\d]{3}/gm), '')
-    }
-    if (typeof time === 'number' && time.toString().length === 10) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-    let value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') {
-      return ['日', '一', '二', '三', '四', '五', '六'][value]
-    }
-    if (result.length > 0 && value < 10) {
-      value = '0' + value
-    }
-    return value || 0
-  })
-  return time_str
-}