租户创建优化

src/api/tenant.js

@@ -4,6 +4,10 @@ export function getTenantList(params) {
   return request({ url: '/proxy/tenants', method: 'get', params })
 }
 
+export function getTenant(id) {
+  return request({ url: `/proxy/tenants/${id}`, method: 'get' })
+}
+
 export function addTenant(data) {
   return request({ url: '/proxy/tenants', method: 'post', data })
 }

src/views/tenant/index.vue

@@ -1,29 +1,40 @@
 <template>
   <div class="tenant-container">
     <div class="search-bar">
-      <el-input v-model="searchForm.keyword" placeholder="租户名称/联系电话" class="search-input" />
-      <el-select v-model="searchForm.status" placeholder="状态">
-        <el-option label="全部" :value="''" />
+      <el-input v-model="searchForm.tenantName" placeholder="租户名称/编码" class="search-input" clearable @keyup.enter.native="handleSearch" />
+      <el-select v-model="searchForm.status" placeholder="状态" clearable>
         <el-option label="启用" :value="1" />
         <el-option label="禁用" :value="0" />
       </el-select>
       <el-button type="primary" @click="handleSearch">搜索</el-button>
       <el-button type="success" @click="handleAdd">新增租户</el-button>
     </div>
+
     <el-table :data="tenantList" border v-loading="loading">
-      <el-table-column prop="tenantName" label="租户名称" />
-      <el-table-column prop="contactMobile" label="联系电话" />
-      <el-table-column prop="bindTime" label="绑定时间" />
-      <el-table-column prop="profitShareRatio" label="分账比例(%)" />
-      <el-table-column prop="monthConsume" label="本月消费" />
-      <el-table-column prop="status" label="状态">
+      <el-table-column prop="tenantCode" label="租户编码" min-width="100" align="center" />
+      <el-table-column prop="tenantName" label="租户名称" min-width="140" />
+      <el-table-column prop="contactName" label="联系人" min-width="80" align="center" />
+      <el-table-column prop="contactPhone" label="联系电话" min-width="110" align="center" />
+      <el-table-column label="余额" align="center" min-width="100">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+          <span style="color:#1890ff;font-weight:bold">{{ scope.row.balance ? '¥' + Number(scope.row.balance).toFixed(2) : '¥0.00' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="已消费总额" align="center" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.totalConsumption ? '¥' + Number(scope.row.totalConsumption).toFixed(2) : '¥0.00' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="accountCount" label="开通账户数" min-width="90" align="center" />
+      <el-table-column prop="expireTime" label="到期时间" min-width="100" align="center" />
+      <el-table-column label="状态" align="center" min-width="70">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="mini">
             {{ scope.row.status === 1 ? '启用' : '禁用' }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作">
+      <el-table-column label="操作" align="center" min-width="160">
         <template slot-scope="scope">
           <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
           <el-button size="mini" @click="handleToggleStatus(scope.row)">
@@ -32,6 +43,7 @@
         </template>
       </el-table-column>
     </el-table>
+
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
@@ -41,35 +53,87 @@
       :total="pageInfo.total"
       layout="total, sizes, prev, pager, next, jumper"
     />
-    <el-dialog title="新增/编辑租户" :visible.sync="dialogVisible" width="500px">
-      <el-form ref="tenantForm" :model="tenantForm" label-width="100px">
-        <el-form-item label="租户名称" prop="tenantName">
-          <el-input v-model="tenantForm.tenantName" />
-        </el-form-item>
-        <el-form-item label="联系电话" prop="contactMobile">
-          <el-input v-model="tenantForm.contactMobile" />
-        </el-form-item>
-        <el-form-item label="分账比例(%)" prop="profitShareRatio">
-          <el-input v-model="tenantForm.profitShareRatio" type="number" />
-        </el-form-item>
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="680px" destroy-on-close>
+      <el-form ref="tenantForm" :model="tenantForm" :rules="rules" label-width="100px">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="企业名称" prop="tenantName">
+              <el-input v-model="tenantForm.tenantName" placeholder="请输入企业名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="contactPhone">
+              <el-input v-model="tenantForm.contactPhone" placeholder="请输入联系电话" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人" prop="contactName">
+              <el-input v-model="tenantForm.contactName" placeholder="请输入联系人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="商务负责人">
+              <el-input v-model="tenantForm.manager" placeholder="请输入商务负责人" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="!isEdit" :span="12">
+            <el-form-item label="管理员账号" prop="userName">
+              <el-input v-model="tenantForm.userName" placeholder="请输入管理员账号" autocomplete="off" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="!isEdit" :span="12">
+            <el-form-item label="密码" prop="password">
+              <el-input v-model="tenantForm.password" type="password" show-password placeholder="请输入密码" autocomplete="new-password" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="开始时间">
+              <el-date-picker v-model="tenantForm.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择开始时间" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="到期时间">
+              <el-date-picker v-model="tenantForm.expireTime" type="date" value-format="yyyy-MM-dd" placeholder="选择到期时间" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公司数量">
+              <el-input-number v-model="tenantForm.companyNum" :min="1" :precision="0" controls-position="right" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工账户数">
+              <el-input-number v-model="tenantForm.accountNum" :min="1" :precision="0" controls-position="right" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="tenantForm.status">
+                <el-radio :label="1">启用</el-radio>
+                <el-radio :label="0">禁用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer">
         <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTenantList, addTenant, updateTenant, toggleTenantStatus } from '@/api/tenant'
+import { getTenantList, getTenant, addTenant, updateTenant, toggleTenantStatus } from '@/api/tenant'
 
 export default {
   name: 'Tenant',
   data() {
     return {
       searchForm: {
-        keyword: '',
+        tenantName: '',
         status: ''
       },
       tenantList: [],
@@ -80,11 +144,28 @@ export default {
         total: 0
       },
       dialogVisible: false,
+      dialogTitle: '',
+      isEdit: false,
+      submitting: false,
       tenantForm: {
-        tenantId: '',
+        id: null,
         tenantName: '',
-        contactMobile: '',
-        profitShareRatio: ''
+        contactPhone: '',
+        contactName: '',
+        manager: '',
+        startTime: null,
+        expireTime: null,
+        companyNum: 1,
+        accountNum: 1,
+        status: 1,
+        userName: '',
+        password: ''
+      },
+      rules: {
+        tenantName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+        userName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
       }
     }
   },
@@ -96,13 +177,14 @@ export default {
       this.loading = true
       try {
         const params = {
-          ...this.searchForm,
+          tenantName: this.searchForm.tenantName || null,
+          status: this.searchForm.status || null,
           pageNum: this.pageInfo.pageNum,
           pageSize: this.pageInfo.pageSize
         }
         const response = await getTenantList(params)
-        this.tenantList = response.data.list
-        this.pageInfo.total = response.data.total
+        this.tenantList = response.rows || []
+        this.pageInfo.total = response.total || 0
       } finally {
         this.loading = false
       }
@@ -112,32 +194,78 @@ export default {
       this.loadTenantList()
     },
     handleAdd() {
+      this.dialogTitle = '新增租户'
+      this.isEdit = false
       this.tenantForm = {
-        tenantId: '',
+        id: null,
         tenantName: '',
-        contactMobile: '',
-        profitShareRatio: ''
+        contactPhone: '',
+        contactName: '',
+        manager: '',
+        startTime: null,
+        expireTime: null,
+        companyNum: 1,
+        accountNum: 1,
+        status: 1,
+        userName: '',
+        password: ''
       }
       this.dialogVisible = true
+      this.$nextTick(() => {
+        if (this.$refs.tenantForm) this.$refs.tenantForm.clearValidate()
+      })
     },
     handleEdit(row) {
-      this.tenantForm = { ...row }
-      this.dialogVisible = true
+      this.dialogTitle = '编辑租户'
+      this.isEdit = true
+      getTenant(row.id || row.companyId).then(response => {
+        const data = response.data
+        this.tenantForm = {
+          id: data.id,
+          tenantName: data.tenantName || '',
+          contactPhone: data.contactPhone || '',
+          contactName: data.contactName || '',
+          manager: data.manager || '',
+          startTime: data.startTime || null,
+          expireTime: data.expireTime || null,
+          companyNum: data.companyNum || 1,
+          accountNum: data.accountNum || 1,
+          status: data.status != null ? data.status : 1
+        }
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          if (this.$refs.tenantForm) this.$refs.tenantForm.clearValidate()
+        })
+      })
     },
     async handleSubmit() {
-      if (this.tenantForm.tenantId) {
-        await updateTenant(this.tenantForm)
-      } else {
-        await addTenant(this.tenantForm)
-      }
-      this.dialogVisible = false
-      this.loadTenantList()
-      this.$message.success('操作成功')
+      this.$refs.tenantForm.validate(async valid => {
+        if (!valid) return
+        this.submitting = true
+        try {
+          if (this.isEdit) {
+            await updateTenant(this.tenantForm)
+          } else {
+            await addTenant(this.tenantForm)
+          }
+          this.dialogVisible = false
+          this.loadTenantList()
+          this.$message.success('操作成功')
+        } finally {
+          this.submitting = false
+        }
+      })
     },
     async handleToggleStatus(row) {
-      await toggleTenantStatus(row.tenantId, row.status === 1 ? 0 : 1)
-      this.loadTenantList()
-      this.$message.success('状态已更新')
+      const tenantId = row.id || row.companyId
+      const newStatus = row.status === 1 ? 0 : 1
+      const label = newStatus === 0 ? '禁用' : '启用'
+      try {
+        await this.$confirm(`确认${label}租户 "${row.tenantName}"?`, '提示', { type: 'warning' })
+        await toggleTenantStatus(tenantId, newStatus)
+        this.loadTenantList()
+        this.$message.success('状态已更新')
+      } catch (e) {}
     },
     handleSizeChange(val) {
       this.pageInfo.pageSize = val
@@ -171,4 +299,4 @@ export default {
     margin-right: 10px;
   }
 }
-</style>
+</style>

vue.config.js

@@ -18,7 +18,7 @@ module.exports = {
     port: 82,
     proxy: {
       '/api': {
-        target: 'http://localhost:8004',
+        target: 'http://localhost:8005',
         changeOrigin: true,
         pathRewrite: { '^/api': '' }
       }
@@ -51,4 +51,4 @@ module.exports = {
       })
       .end()
   }
-}
+}