form.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. const { t } = useI18n() // 国际化
  115. const message = useMessage() // 消息弹窗
  116. const modelVisible = ref(false) // 弹窗的是否展示
  117. const modelTitle = ref('') // 弹窗的标题
  118. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  119. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  120. const formData = ref({
  121. id: undefined,
  122. name: undefined,
  123. packageId: undefined,
  124. contactName: undefined,
  125. contactMobile: undefined,
  126. accountCount: undefined,
  127. expireTime: undefined,
  128. domain: undefined,
  129. status: CommonStatusEnum.ENABLE
  130. })
  131. const formRules = reactive({
  132. name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
  133. packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
  134. contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  135. status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
  136. accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
  137. expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
  138. domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }]
  139. })
  140. const formRef = ref() // 表单 Ref
  141. const packageList = ref([]) // 租户套餐
  142. /** 打开弹窗 */
  143. const openModal = async (type: string, id?: number) => {
  144. modelVisible.value = true
  145. modelTitle.value = t('action.' + type)
  146. formType.value = type
  147. resetForm()
  148. // 修改时,设置数据
  149. if (id) {
  150. formLoading.value = true
  151. try {
  152. formData.value = await TenantApi.getTenantApi(id)
  153. } finally {
  154. formLoading.value = false
  155. }
  156. }
  157. packageList.value = await getTenantPackageListApi()
  158. }
  159. defineExpose({ openModal }) // 提供 openModal 方法,用于打开弹窗
  160. /** 提交表单 */
  161. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  162. const submitForm = async () => {
  163. // 校验表单
  164. if (!formRef) return
  165. const valid = await formRef.value.validate()
  166. if (!valid) return
  167. // 提交请求
  168. formLoading.value = true
  169. try {
  170. const data = formData.value as unknown as TenantApi.TenantVO
  171. if (formType.value === 'create') {
  172. await TenantApi.createTenantApi(data)
  173. message.success(t('common.createSuccess'))
  174. } else {
  175. await TenantApi.updateTenantApi(data)
  176. message.success(t('common.updateSuccess'))
  177. }
  178. modelVisible.value = false
  179. // 发送操作成功的事件
  180. emit('success')
  181. } finally {
  182. formLoading.value = false
  183. }
  184. }
  185. /** 重置表单 */
  186. const resetForm = () => {
  187. formData.value = {
  188. id: undefined,
  189. name: undefined,
  190. packageId: undefined,
  191. contactName: undefined,
  192. contactMobile: undefined,
  193. accountCount: undefined,
  194. expireTime: undefined,
  195. domain: undefined,
  196. status: CommonStatusEnum.ENABLE
  197. }
  198. formRef.value?.resetFields()
  199. }
  200. </script>