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