完善用户管理

src/api/sys-user.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 分页查询用户列表
+export function getUserList(params) {
+  return request({
+    url: '/sys/user/list',
+    method: 'get',
+    params: {
+      current: params.current || 1,
+      size: params.size || 10,
+      userName: params.userName,
+      email: params.email,
+      phone: params.phone,
+      scenario: params.scenario,
+      scenarioItem: params.scenarioItem
+    }
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: '/sys/user/add',
+    method: 'post',
+    data
+  })
+}
+
+// 更新用户
+export function updateUser(data) {
+  return request({
+    url: '/sys/user/update',
+    method: 'put',
+    data
+  })
+}
+
+// 删除用户
+export function deleteUser(id) {
+  return request({
+    url: `/sys/user/delete/${id}`,
+    method: 'delete'
+  })
+}

src/router/index.js

@@ -375,6 +375,12 @@ export const constantRoutes = [
     name: 'SystemRoot',
     meta: { title: '系统设置', icon: 'el-icon-setting', alwaysShow: true },
     children: [
+      {
+        path: 'user',
+        name: 'SystemUser',
+        component: () => import('@/views/system/user/index'),
+        meta: { title: '用户管理', icon: 'el-icon-user' }
+      },
       {
         path: 'device',
         name: 'Device',
@@ -387,6 +393,7 @@ export const constantRoutes = [
         component: () => import('@/views/tenant/index'),
         meta: { title: '租户管理', icon: 'el-icon-office-building' }
       }
+      
     ]
   },
 

src/views/system/user/index.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="app-container">
+    <el-card class="filter-container" shadow="never">
+      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="90px">
+        <el-form-item label="用户名">
+          <el-input
+            v-model="queryParams.userName"
+            placeholder="请输入用户名"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="邮箱">
+          <el-input
+            v-model="queryParams.email"
+            placeholder="请输入邮箱"
+            clearable
+            style="width: 220px"
+          />
+        </el-form-item>
+        <el-form-item label="手机号">
+          <el-input
+            v-model="queryParams.phone"
+            placeholder="请输入手机号"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="场景">
+          <el-input
+            v-model="queryParams.scenario"
+            placeholder="请输入场景"
+            clearable
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="场景项">
+          <el-input
+            v-model="queryParams.scenarioItem"
+            placeholder="请输入场景项"
+            clearable
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="action-container" shadow="never">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加用户</el-button>
+    </el-card>
+
+    <el-card class="table-container" shadow="never">
+      <el-table v-loading="loading" :data="userList" style="width: 100%">
+        <el-table-column label="ID" prop="userId" width="80" />
+        <el-table-column label="用户名" prop="userName" min-width="140" />
+        <el-table-column label="邮箱" prop="email" min-width="180" />
+        <el-table-column label="手机号" prop="phone" min-width="140" />
+        <el-table-column label="场景" prop="scenario" min-width="120" />
+        <el-table-column label="场景项" prop="scenarioItem" min-width="140" />
+        <el-table-column label="租户ID" prop="tenantId" min-width="120" />
+        <el-table-column label="角色" prop="roleName" min-width="120" />
+        <el-table-column label="创建时间" prop="createTime" min-width="180">
+          <template slot-scope="scope">
+            {{ formatDateTime(scope.row.createTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
+            <el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        :current-page="queryParams.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.size"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @close="resetForm">
+      <el-form ref="userForm" :model="userForm" :rules="formRules" label-width="100px">
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="userForm.userName" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="userForm.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="userForm.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="租户ID" prop="tenantId">
+          <el-select
+            v-model="userForm.tenantId"
+            placeholder="请选择租户"
+            style="width: 100%"
+            filterable
+            clearable
+            :loading="tenantLoading"
+          >
+            <el-option
+              v-for="item in tenantOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色" prop="roleName">
+          <el-input v-model="userForm.roleName" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="场景" prop="scenario">
+          <el-input v-model="userForm.scenario" placeholder="请输入场景" />
+        </el-form-item>
+        <el-form-item label="场景项" prop="scenarioItem">
+          <el-input v-model="userForm.scenarioItem" placeholder="请输入场景项" />
+        </el-form-item>
+        <el-form-item :label="isEdit ? '新密码' : '密码'" prop="password">
+          <el-input v-model="userForm.password" type="password" show-password :placeholder="isEdit ? '不修改可留空' : '请输入密码'" />
+        </el-form-item>
+        <el-form-item v-if="isEdit" label="原始密码" prop="originalPassword">
+          <el-input v-model="userForm.originalPassword" type="password" show-password placeholder="请输入原始密码用于校验" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addUser, deleteUser, getUserList, updateUser } from '@/api/sys-user'
+import { getAllTenantList } from '@/api/tenant'
+
+export default {
+  name: 'SystemUser',
+  data() {
+    return {
+      loading: false,
+      userList: [],
+      total: 0,
+      dialogVisible: false,
+      dialogTitle: '',
+      isEdit: false,
+      tenantOptions: [],
+      tenantLoading: false,
+      queryParams: {
+        current: 1,
+        size: 10,
+        userName: '',
+        email: '',
+        phone: '',
+        scenario: '',
+        scenarioItem: ''
+      },
+      userForm: {
+        userId: null,
+        tenantId: '',
+        userName: '',
+        email: '',
+        phone: '',
+        scenario: '',
+        scenarioItem: '',
+        password: '',
+        originalPassword: '',
+        roleName: ''
+      }
+    }
+  },
+  computed: {
+    formRules() {
+      return {
+        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
+        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+        password: this.isEdit ? [] : [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        originalPassword: this.isEdit ? [{ required: true, message: '请输入原始密码', trigger: 'blur' }] : []
+      }
+    }
+  },
+  created() {
+    this.getTenantOptions()
+    this.fetchUserList()
+  },
+  methods: {
+    getTenantOptions() {
+      this.tenantLoading = true
+      getAllTenantList().then(response => {
+        if (response && (response.code === 20000 || response.code === 200)) {
+          const tenantList = Array.isArray(response.data) ? response.data : (response.data?.data || [])
+          this.tenantOptions = tenantList.map(item => ({
+            value: item.id,
+            label: item.tenantName ? `${item.tenantName} (${item.tenantCode || '-'})` : (item.tenantCode || item.id)
+          }))
+        } else {
+          this.tenantOptions = []
+        }
+      }).catch(() => {
+        this.tenantOptions = []
+      }).finally(() => {
+        this.tenantLoading = false
+      })
+    },
+    fetchUserList() {
+      this.loading = true
+      const params = {
+        current: this.queryParams.current,
+        size: this.queryParams.size,
+        userName: this.queryParams.userName || undefined,
+        email: this.queryParams.email || undefined,
+        phone: this.queryParams.phone || undefined,
+        scenario: this.queryParams.scenario || undefined,
+        scenarioItem: this.queryParams.scenarioItem || undefined
+      }
+
+      getUserList(params).then(response => {
+        if (response && (response.code === 20000 || response.code === 200)) {
+          this.userList = Array.isArray(response.data) ? response.data : []
+          this.total = response.total || 0
+        } else {
+          this.userList = []
+          this.total = 0
+        }
+      }).catch(() => {
+        this.userList = []
+        this.total = 0
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleQuery() {
+      this.queryParams.current = 1
+      this.fetchUserList()
+    },
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        userName: '',
+        email: '',
+        phone: '',
+        scenario: '',
+        scenarioItem: ''
+      }
+      this.fetchUserList()
+    },
+    handleSizeChange(size) {
+      this.queryParams.size = size
+      this.fetchUserList()
+    },
+    handleCurrentChange(current) {
+      this.queryParams.current = current
+      this.fetchUserList()
+    },
+    handleAdd() {
+      this.dialogTitle = '添加用户'
+      this.isEdit = false
+      this.resetForm()
+      this.dialogVisible = true
+    },
+    handleEdit(row) {
+      this.dialogTitle = '修改用户'
+      this.isEdit = true
+      this.userForm = {
+        userId: row.userId,
+        tenantId: row.tenantId || '',
+        userName: row.userName || '',
+        email: row.email || '',
+        phone: row.phone || '',
+        scenario: row.scenario || '',
+        scenarioItem: row.scenarioItem || '',
+        password: '',
+        originalPassword: '',
+        roleName: row.roleName || row.role || ''
+      }
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.userForm) {
+          this.$refs.userForm.clearValidate()
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('确定删除该用户吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteUser(row.userId).then(() => {
+          this.$message.success('删除成功')
+          this.fetchUserList()
+        })
+      }).catch(() => {})
+    },
+    handleSubmit() {
+      this.$refs.userForm.validate(valid => {
+        if (!valid) return
+
+        const payload = {
+          userId: this.userForm.userId || undefined,
+          tenantId: this.userForm.tenantId || undefined,
+          userName: this.userForm.userName,
+          email: this.userForm.email,
+          phone: this.userForm.phone,
+          roleName: this.userForm.roleName || undefined,
+          scenario: this.userForm.scenario || undefined,
+          scenarioItem: this.userForm.scenarioItem || undefined
+        }
+
+        if (this.userForm.password) {
+          payload.password = this.userForm.password
+        }
+        if (this.isEdit) {
+          payload.originalPassword = this.userForm.originalPassword
+        }
+
+        const requestFn = this.isEdit ? updateUser : addUser
+        requestFn(payload).then(() => {
+          this.$message.success(this.isEdit ? '修改成功' : '添加成功')
+          this.dialogVisible = false
+          this.fetchUserList()
+        })
+      })
+    },
+    resetForm() {
+      if (this.$refs.userForm) {
+        this.$refs.userForm.resetFields()
+      }
+      this.userForm = {
+        userId: null,
+        tenantId: '',
+        userName: '',
+        email: '',
+        phone: '',
+        scenario: '',
+        scenarioItem: '',
+        password: '',
+        originalPassword: '',
+        roleName: ''
+      }
+    },
+    formatDateTime(dateTime) {
+      if (!dateTime) return '-'
+      const date = new Date(dateTime)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .filter-container {
+    margin-bottom: 20px;
+  }
+
+  .action-container {
+    margin-bottom: 20px;
+  }
+
+  .table-container {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>