租户管理的代码框架

README-zh.md

@@ -52,7 +52,7 @@ cd vue-admin-template
 npm install
 
 # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
-npm install --registry=https://registry.npm.taobao.org
+npm install --registry=https://registry.npmmirror.com
 
 # 启动服务
 npm run dev

package.json

@@ -20,6 +20,7 @@
     "echarts": "^5.4.3",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
+    "lodash": "^4.17.21",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

src/router/index.js

@@ -140,19 +140,6 @@ export const constantRoutes = [
     ]
   },
 
-  {
-    path: '/device',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'Device',
-        component: () => import('@/views/device/index'),
-        meta: { title: '设备管理', icon: 'el-icon-mobile-phone' }
-      }
-    ]
-  },
-
   {
     path: '/customer',
     component: Layout,
@@ -359,6 +346,28 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/system',
+    component: Layout,
+    redirect: '/system/device',
+    name: 'SystemRoot',
+    meta: { title: '系统设置', icon: 'el-icon-setting', alwaysShow: true },
+    children: [
+      {
+        path: 'device',
+        name: 'Device',
+        component: () => import('@/views/device/index'),
+        meta: { title: '设备管理', icon: 'el-icon-mobile-phone' }
+      },
+      {
+        path: 'tenant',
+        name: 'Tenant',
+        component: () => import('@/views/tenant/index'),
+        meta: { title: '租户管理', icon: 'el-icon-office-building' }
+      }
+    ]
+  },
+
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/views/tenant/index.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件区域 -->
+    <el-card class="filter-container" shadow="never">
+      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
+        <el-form-item label="租户名称">
+          <el-input
+            v-model="queryParams.tenantName"
+            placeholder="请输入租户名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="租户代码">
+          <el-input
+            v-model="queryParams.tenantCode"
+            placeholder="请输入租户代码"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+            <el-option label="启用" :value="true" />
+            <el-option label="禁用" :value="false" />
+          </el-select>
+        </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-button type="danger" icon="el-icon-delete" :disabled="selectedIds.length === 0" @click="handleBatchDelete">批量删除</el-button>
+    </el-card>
+
+    <!-- 数据表格区域 -->
+    <el-card class="table-container" shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="tenantList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" type="index" width="50" />
+        <el-table-column label="租户名称" prop="tenantName" sortable min-width="150" />
+        <el-table-column label="租户代码" prop="tenantCode" sortable min-width="150" />
+        <el-table-column label="联系人" prop="contactPerson" min-width="120" />
+        <el-table-column label="联系电话" prop="contactPhone" min-width="150" />
+        <el-table-column label="邮箱" prop="email" min-width="200" show-overflow-tooltip />
+        <el-table-column label="状态" prop="status" sortable min-width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.status ? 'success' : 'danger'">
+              {{ scope.row.status ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="createTime" sortable min-width="150">
+          <template slot-scope="scope">
+            {{ formatDateTime(scope.row.createTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" 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="tenantForm"
+        :model="tenantForm"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="租户名称" prop="tenantName">
+          <el-input v-model="tenantForm.tenantName" placeholder="请输入租户名称" />
+        </el-form-item>
+        <el-form-item label="租户代码" prop="tenantCode">
+          <el-input v-model="tenantForm.tenantCode" placeholder="请输入租户代码" />
+        </el-form-item>
+        <el-form-item label="联系人" prop="contactPerson">
+          <el-input v-model="tenantForm.contactPerson" placeholder="请输入联系人" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="contactPhone">
+          <el-input v-model="tenantForm.contactPhone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="tenantForm.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-switch
+            v-model="tenantForm.status"
+            active-text="启用"
+            inactive-text="禁用"
+          />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-model="tenantForm.remark"
+            type="textarea"
+            :rows="3"
+            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>
+export default {
+  name: 'Tenant',
+  data() {
+    return {
+      loading: false,
+      tenantList: [],
+      total: 0,
+      selectedIds: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      isEdit: false,
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        tenantName: '',
+        tenantCode: '',
+        status: null
+      },
+      // 租户表单
+      tenantForm: {
+        id: null,
+        tenantName: '',
+        tenantCode: '',
+        contactPerson: '',
+        contactPhone: '',
+        email: '',
+        status: true,
+        remark: ''
+      },
+      // 表单验证规则
+      formRules: {
+        tenantName: [
+          { required: true, message: '请输入租户名称', trigger: 'blur' }
+        ],
+        tenantCode: [
+          { required: true, message: '请输入租户代码', trigger: 'blur' }
+        ],
+        contactPerson: [
+          { required: true, message: '请输入联系人', trigger: 'blur' }
+        ],
+        contactPhone: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+        ],
+        email: [
+          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getTenantList()
+  },
+  methods: {
+    // 获取租户列表
+    getTenantList() {
+      this.loading = true
+      // TODO: 调用实际的API接口
+      // getTenantList(this.queryParams).then(response => {
+      //   this.tenantList = response.data.records || []
+      //   this.total = response.data.total || 0
+      //   this.loading = false
+      // }).catch(() => {
+      //   this.loading = false
+      // })
+
+      // 临时模拟数据
+      setTimeout(() => {
+        this.tenantList = []
+        this.total = 0
+        this.loading = false
+      }, 500)
+    },
+    // 搜索
+    handleQuery() {
+      this.queryParams.current = 1
+      this.getTenantList()
+    },
+    // 清空搜索
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        tenantName: '',
+        tenantCode: '',
+        status: null
+      }
+      this.getTenantList()
+    },
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.queryParams.size = val
+      this.getTenantList()
+    },
+    // 当前页改变
+    handleCurrentChange(val) {
+      this.queryParams.current = val
+      this.getTenantList()
+    },
+    // 选择改变
+    handleSelectionChange(selection) {
+      this.selectedIds = selection.map(item => item.id)
+    },
+    // 添加
+    handleAdd() {
+      this.dialogTitle = '添加租户'
+      this.isEdit = false
+      this.dialogVisible = true
+    },
+    // 编辑
+    handleEdit(row) {
+      this.dialogTitle = '编辑租户'
+      this.isEdit = true
+      this.tenantForm = {
+        id: row.id,
+        tenantName: row.tenantName,
+        tenantCode: row.tenantCode,
+        contactPerson: row.contactPerson,
+        contactPhone: row.contactPhone,
+        email: row.email,
+        status: row.status,
+        remark: row.remark || ''
+      }
+      this.dialogVisible = true
+    },
+    // 删除
+    handleDelete(row) {
+      this.$confirm('确定要删除该租户吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // TODO: 调用删除API
+        // deleteTenant(row.id).then(() => {
+        //   this.$message.success('删除成功')
+        //   this.getTenantList()
+        // })
+        this.$message.success('删除成功')
+        this.getTenantList()
+      }).catch(() => {})
+    },
+    // 批量删除
+    handleBatchDelete() {
+      if (this.selectedIds.length === 0) {
+        this.$message.warning('请选择要删除的租户')
+        return
+      }
+      this.$confirm('确定要删除选中的租户吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // TODO: 调用批量删除API
+        // batchDeleteTenant(this.selectedIds).then(() => {
+        //   this.$message.success('删除成功')
+        //   this.getTenantList()
+        // })
+        this.$message.success('删除成功')
+        this.getTenantList()
+      }).catch(() => {})
+    },
+    // 提交表单
+    handleSubmit() {
+      this.$refs.tenantForm.validate((valid) => {
+        if (valid) {
+          // TODO: 调用添加/更新API
+          // const submitFunc = this.isEdit ? updateTenant : addTenant
+          // submitFunc(this.tenantForm).then(() => {
+          //   this.$message.success(this.isEdit ? '更新成功' : '添加成功')
+          //   this.dialogVisible = false
+          //   this.getTenantList()
+          // })
+          this.$message.success(this.isEdit ? '更新成功' : '添加成功')
+          this.dialogVisible = false
+          this.getTenantList()
+        }
+      })
+    },
+    // 重置表单
+    resetForm() {
+      this.$refs.tenantForm && this.$refs.tenantForm.resetFields()
+      this.tenantForm = {
+        id: null,
+        tenantName: '',
+        tenantCode: '',
+        contactPerson: '',
+        contactPhone: '',
+        email: '',
+        status: true,
+        remark: ''
+      }
+    },
+    // 格式化日期时间
+    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>
+

vue.config.js

@@ -56,7 +56,9 @@ module.exports = {
     },
     proxy: {
       '/api': {
-        target: 'http://localhost:9060', // 本地后端服务器地址
+        // 可以通过环境变量 VUE_APP_API_BASE_URL 来配置后端地址
+        // 例如: VUE_APP_API_BASE_URL=http://localhost:8090 npm run dev
+        target: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8090', // 本地后端服务器地址
         // target: 'https://api.huayang-star.com/', // 生产环境后端地址
         changeOrigin: true,
         pathRewrite: {