租户列表使用element plus完成改写

src/views/system/tenant/form.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="modelTitle" v-model="modelVisible">
+  <Dialog :title="modelTitle" v-model="modelVisible" width="50%">
     <el-form
       ref="formRef"
       :model="formData"
@@ -7,32 +7,96 @@
       label-width="80px"
       v-loading="formLoading"
     >
-      <el-form-item label="参数分类" prop="category">
+      <el-row>
-        <el-input v-model="formData.category" placeholder="请输入参数分类" />
+        <el-col :span="10">
+          <el-form-item label="租户名" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入租户名" />
           </el-form-item>
-      <el-form-item label="参数名称" prop="name">
+        </el-col>
-        <el-input v-model="formData.name" placeholder="请输入参数名称" />
+        <el-col :span="10" :offset="2">
+          <el-form-item label="租户套餐" prop="packageId">
+            <el-select v-model="formData.packageId" placeholder="请选择租户套餐" clearable>
+              <el-option
+                v-for="item in props.packageList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
           </el-form-item>
-      <el-form-item label="参数键名" prop="key">
+        </el-col>
-        <el-input v-model="formData.key" placeholder="请输入参数键名" />
+      </el-row>
+      <el-row>
+        <el-col :span="10">
+          <el-form-item label="联系人" prop="contactName">
+            <el-input v-model="formData.contactName" placeholder="请输入联系人" />
           </el-form-item>
-      <el-form-item label="参数键值" prop="value">
+        </el-col>
-        <el-input v-model="formData.value" placeholder="请输入参数键值" />
+        <el-col :span="10" :offset="2">
+          <el-form-item label="联系手机" prop="contactMobile">
+            <el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
           </el-form-item>
-      <el-form-item label="是否可见" prop="visible">
+        </el-col>
-        <el-radio-group v-model="formData.visible">
+      </el-row>
+      <el-row>
+        <el-col :span="10">
+          <el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
+            <el-input v-model="formData.username" placeholder="请输入用户名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10" :offset="2">
+          <el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
+            <el-input
+              v-model="formData.password"
+              placeholder="请输入用户密码"
+              type="password"
+              show-password
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="10">
+          <el-form-item label="账号额度" prop="accountCount">
+            <el-input-number
+              v-model="formData.accountCount"
+              placeholder="请输入账号额度"
+              controls-position="right"
+              :min="0"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10" :offset="2">
+          <el-form-item label="过期时间" prop="expireTime">
+            <el-date-picker
+              clearable
+              v-model="formData.expireTime"
+              type="date"
+              value-format="x"
+              placeholder="请选择过期时间"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="10">
+          <el-form-item label="绑定域名" prop="domain">
+            <el-input v-model="formData.domain" placeholder="请输入绑定域名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10" :offset="2">
+          <el-form-item label="租户状态" prop="status">
+            <el-radio-group v-model="formData.status">
               <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                 :key="dict.value"
                 :label="dict.value"
-          >
+                >{{ dict.label }}
-            {{ dict.label }}
               </el-radio>
             </el-radio-group>
           </el-form-item>
-      <el-form-item label="备注" prop="remark">
+        </el-col>
-        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+      </el-row>
-      </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -43,34 +107,45 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as TenantApi from '@/api/system/tenant'
+import { CommonStatusEnum } from '@/utils/constants'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const props = defineProps({
+  packageList: {
+    type: Array,
+    // eslint-disable-next-line vue/require-valid-default-prop
+    default: []
+  }
+})
+// console.log(props.packageList)
 const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  category: '',
+  name: undefined,
-  name: '',
+  packageId: undefined,
-  key: '',
+  contactName: undefined,
-  value: '',
+  contactMobile: undefined,
-  visible: true,
+  accountCount: undefined,
-  remark: ''
+  expireTime: undefined,
+  domain: undefined,
+  status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+  packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+  contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
-  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+  accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
+  expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
+  domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-
 /** 打开弹窗 */
 const openModal = async (type: string, id?: number) => {
   modelVisible.value = true
@@ -119,12 +194,14 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    category: '',
+    name: undefined,
-    name: '',
+    packageId: undefined,
-    key: '',
+    contactName: undefined,
-    value: '',
+    contactMobile: undefined,
-    visible: true,
+    accountCount: undefined,
-    remark: ''
+    expireTime: undefined,
+    domain: undefined,
+    status: CommonStatusEnum.ENABLE
   }
   formRef.value?.resetFields()
 }

src/views/system/tenant/index.vue

@@ -2,7 +2,6 @@
   <!-- 搜索 -->
   <content-wrap>
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
-      <el-row>
       <el-form-item label="租户名" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -48,8 +47,7 @@
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
         />
       </el-form-item>
-      </el-row>
+
-      <el-row>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon icon="ep:search" class="mr-5px" />
@@ -78,7 +76,6 @@
           导出
         </el-button>
       </el-form-item>
-      </el-row>
     </el-form>
   </content-wrap>
 
@@ -120,7 +117,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="操作" align="center" min-width="110">
+      <el-table-column label="操作" align="center" min-width="110" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -151,7 +148,7 @@
   </content-wrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <tenant-form ref="modalRef" @success="getList" />
+  <tenant-form ref="modalRef" @success="getList" :packageList="packageList" />
 </template>
 <script setup lang="ts" name="Tenant">
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'