Skip to content

Commit d88fda7

Browse files
XinDong-MoXinDong-Mo
committed
Vue3 重构：系统管理->租户管理:租户列表
1 parent 812300c commit d88fda7

File tree

2 files changed

+434
-172
lines changed

2 files changed

+434
-172
lines changed

‎src/views/system/tenant/form.vue

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible" width="50%">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-row>
11+
<el-col :span="10">
12+
<el-form-item label="租户名" prop="name">
13+
<el-input v-model="formData.name" placeholder="请输入租户名" />
14+
</el-form-item>
15+
</el-col>
16+
<el-col :span="10" :offset="2">
17+
<el-form-item label="租户套餐" prop="packageId">
18+
<el-select v-model="formData.packageId" placeholder="请选择租户套餐" clearable>
19+
<el-option
20+
v-for="item in packageList"
21+
:key="item.id"
22+
:label="item.name"
23+
:value="item.id"
24+
/>
25+
</el-select>
26+
</el-form-item>
27+
</el-col>
28+
</el-row>
29+
<el-row>
30+
<el-col :span="10">
31+
<el-form-item label="联系人" prop="contactName">
32+
<el-input v-model="formData.contactName" placeholder="请输入联系人" />
33+
</el-form-item>
34+
</el-col>
35+
<el-col :span="10" :offset="2">
36+
<el-form-item label="联系手机" prop="contactMobile">
37+
<el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
38+
</el-form-item>
39+
</el-col>
40+
</el-row>
41+
<el-row>
42+
<el-col :span="10">
43+
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
44+
<el-input v-model="formData.username" placeholder="请输入用户名称" />
45+
</el-form-item>
46+
</el-col>
47+
<el-col :span="10" :offset="2">
48+
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
49+
<el-input
50+
v-model="formData.password"
51+
placeholder="请输入用户密码"
52+
type="password"
53+
show-password
54+
/>
55+
</el-form-item>
56+
</el-col>
57+
</el-row>
58+
<el-row>
59+
<el-col :span="10">
60+
<el-form-item label="账号额度" prop="accountCount">
61+
<el-input-number
62+
v-model="formData.accountCount"
63+
placeholder="请输入账号额度"
64+
controls-position="right"
65+
:min="0"
66+
/>
67+
</el-form-item>
68+
</el-col>
69+
<el-col :span="10" :offset="2">
70+
<el-form-item label="过期时间" prop="expireTime">
71+
<el-date-picker
72+
clearable
73+
v-model="formData.expireTime"
74+
type="date"
75+
value-format="x"
76+
placeholder="请选择过期时间"
77+
/>
78+
</el-form-item>
79+
</el-col>
80+
</el-row>
81+
<el-row>
82+
<el-col :span="10">
83+
<el-form-item label="绑定域名" prop="domain">
84+
<el-input v-model="formData.domain" placeholder="请输入绑定域名" />
85+
</el-form-item>
86+
</el-col>
87+
<el-col :span="10" :offset="2">
88+
<el-form-item label="租户状态" prop="status">
89+
<el-radio-group v-model="formData.status">
90+
<el-radio
91+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
92+
:key="dict.value"
93+
:label="dict.value"
94+
>{{ dict.label }}
95+
</el-radio>
96+
</el-radio-group>
97+
</el-form-item>
98+
</el-col>
99+
</el-row>
100+
</el-form>
101+
<template #footer>
102+
<div class="dialog-footer">
103+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
104+
<el-button @click="modelVisible = false">取 消</el-button>
105+
</div>
106+
</template>
107+
</Dialog>
108+
</template>
109+
<script setup lang="ts">
110+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
111+
import * as TenantApi from '@/api/system/tenant'
112+
import { CommonStatusEnum } from '@/utils/constants'
113+
import { getTenantPackageList as getTenantPackageListApi } from '@/api/system/tenantPackage'
114+
115+
const { t } = useI18n() // 国际化
116+
const message = useMessage() // 消息弹窗
117+
const modelVisible = ref(false) // 弹窗的是否展示
118+
const modelTitle = ref('') // 弹窗的标题
119+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
120+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
121+
const formData = ref({
122+
id: undefined,
123+
name: undefined,
124+
packageId: undefined,
125+
contactName: undefined,
126+
contactMobile: undefined,
127+
accountCount: undefined,
128+
expireTime: undefined,
129+
domain: undefined,
130+
status: CommonStatusEnum.ENABLE
131+
})
132+
const formRules = reactive({
133+
name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
134+
packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
135+
contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
136+
status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
137+
accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
138+
expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
139+
domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }]
140+
})
141+
const formRef = ref() // 表单 Ref
142+
const packageList = ref([]) // 租户套餐
143+
144+
/** 打开弹窗 */
145+
const openModal = async (type: string, id?: number) => {
146+
modelVisible.value = true
147+
modelTitle.value = t('action.' + type)
148+
formType.value = type
149+
resetForm()
150+
// 修改时，设置数据
151+
if (id) {
152+
formLoading.value = true
153+
try {
154+
formData.value = await TenantApi.getTenantApi(id)
155+
} finally {
156+
formLoading.value = false
157+
}
158+
}
159+
packageList.value = await getTenantPackageListApi()
160+
}
161+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
162+
163+
/** 提交表单 */
164+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
165+
const submitForm = async () => {
166+
// 校验表单
167+
if (!formRef) return
168+
const valid = await formRef.value.validate()
169+
if (!valid) return
170+
// 提交请求
171+
formLoading.value = true
172+
try {
173+
const data = formData.value as unknown as TenantApi.TenantVO
174+
if (formType.value === 'create') {
175+
await TenantApi.createTenantApi(data)
176+
message.success(t('common.createSuccess'))
177+
} else {
178+
await TenantApi.updateTenantApi(data)
179+
message.success(t('common.updateSuccess'))
180+
}
181+
modelVisible.value = false
182+
// 发送操作成功的事件
183+
emit('success')
184+
} finally {
185+
formLoading.value = false
186+
}
187+
}
188+
189+
/** 重置表单 */
190+
const resetForm = () => {
191+
formData.value = {
192+
id: undefined,
193+
name: undefined,
194+
packageId: undefined,
195+
contactName: undefined,
196+
contactMobile: undefined,
197+
accountCount: undefined,
198+
expireTime: undefined,
199+
domain: undefined,
200+
status: CommonStatusEnum.ENABLE
201+
}
202+
formRef.value?.resetFields()
203+
}
204+
</script>

0 commit comments

Comments
 (0)