ProductForm.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <Dialog :title="dialogTitle" v-model="dialogVisible">
  3. <el-form
  4. ref="formRef"
  5. :model="formData"
  6. :rules="formRules"
  7. label-width="100px"
  8. v-loading="formLoading"
  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="deviceType">
  14. <el-radio-group v-model="formData.deviceType">
  15. <el-radio
  16. v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
  17. :key="dict.value"
  18. :label="dict.value"
  19. >
  20. {{ dict.label }}
  21. </el-radio>
  22. </el-radio-group>
  23. </el-form-item>
  24. <el-form-item
  25. v-if="formData.deviceType === 0 || formData.deviceType === 2"
  26. label="联网方式"
  27. prop="netType"
  28. >
  29. <el-select v-model="formData.netType" placeholder="请选择联网方式">
  30. <el-option
  31. v-for="dict in getIntDictOptions(DICT_TYPE.IOT_NET_TYPE)"
  32. :key="dict.value"
  33. :label="dict.label"
  34. :value="dict.value"
  35. />
  36. </el-select>
  37. </el-form-item>
  38. <el-form-item v-if="formData.deviceType === 1" label="接入网关协议" prop="protocolType">
  39. <el-select v-model="formData.protocolType" placeholder="请选择接入网关协议">
  40. <el-option
  41. v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE)"
  42. :key="dict.value"
  43. :label="dict.label"
  44. :value="dict.value"
  45. />
  46. </el-select>
  47. </el-form-item>
  48. <el-form-item label="数据格式" prop="dataFormat">
  49. <el-select v-model="formData.dataFormat" placeholder="请选择接数据格式">
  50. <el-option
  51. v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
  52. :key="dict.value"
  53. :label="dict.label"
  54. :value="dict.value"
  55. />
  56. </el-select>
  57. </el-form-item>
  58. <el-form-item label="数据校验级别" prop="validateType">
  59. <el-radio-group v-model="formData.validateType">
  60. <el-radio
  61. v-for="dict in getIntDictOptions(DICT_TYPE.IOT_VALIDATE_TYPE)"
  62. :key="dict.value"
  63. :label="dict.value"
  64. >
  65. {{ dict.label }}
  66. </el-radio>
  67. </el-radio-group>
  68. </el-form-item>
  69. <el-form-item label="产品描述" prop="description">
  70. <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
  71. </el-form-item>
  72. </el-form>
  73. <template #footer>
  74. <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
  75. <el-button @click="dialogVisible = false">取 消</el-button>
  76. </template>
  77. </Dialog>
  78. </template>
  79. <script setup lang="ts">
  80. import { ProductApi, ProductVO } from '@/api/iot/product'
  81. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  82. /** iot 产品 表单 */
  83. defineOptions({ name: 'ProductForm' })
  84. const { t } = useI18n() // 国际化
  85. const message = useMessage() // 消息弹窗
  86. const dialogVisible = ref(false) // 弹窗的是否展示
  87. const dialogTitle = ref('') // 弹窗的标题
  88. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  89. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  90. const formData = ref({
  91. name: undefined,
  92. id: undefined,
  93. productKey: undefined,
  94. protocolId: undefined,
  95. categoryId: undefined,
  96. description: undefined,
  97. validateType: undefined,
  98. status: undefined,
  99. deviceType: undefined,
  100. netType: undefined,
  101. protocolType: undefined,
  102. dataFormat: undefined
  103. })
  104. const formRules = reactive({
  105. name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  106. deviceType: [
  107. {
  108. required: true,
  109. message: '设备类型不能为空',
  110. trigger: 'change'
  111. }
  112. ],
  113. netType: [
  114. {
  115. required: formData.deviceType === 0 || formData.deviceType === 2,
  116. message: '联网方式不能为空',
  117. trigger: 'change'
  118. }
  119. ],
  120. protocolType: [
  121. { required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
  122. ],
  123. dataFormat: [
  124. {
  125. required: true,
  126. message: '数据格式不能为空',
  127. trigger: 'change'
  128. }
  129. ],
  130. validateType: [
  131. {
  132. required: true,
  133. message: '数据校验级别不能为空',
  134. trigger: 'change'
  135. }
  136. ]
  137. })
  138. const formRef = ref() // 表单 Ref
  139. /** 打开弹窗 */
  140. const open = async (type: string, id?: number) => {
  141. dialogVisible.value = true
  142. dialogTitle.value = t('action.' + type)
  143. formType.value = type
  144. resetForm()
  145. // 修改时,设置数据
  146. if (id) {
  147. formLoading.value = true
  148. try {
  149. formData.value = await ProductApi.getProduct(id)
  150. } finally {
  151. formLoading.value = false
  152. }
  153. }
  154. }
  155. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  156. /** 提交表单 */
  157. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  158. const submitForm = async () => {
  159. // 校验表单
  160. await formRef.value.validate()
  161. // 提交请求
  162. formLoading.value = true
  163. try {
  164. const data = formData.value as unknown as ProductVO
  165. if (formType.value === 'create') {
  166. await ProductApi.createProduct(data)
  167. message.success(t('common.createSuccess'))
  168. } else {
  169. await ProductApi.updateProduct(data)
  170. message.success(t('common.updateSuccess'))
  171. }
  172. dialogVisible.value = false
  173. // 发送操作成功的事件
  174. emit('success')
  175. } finally {
  176. formLoading.value = false
  177. }
  178. }
  179. /** 重置表单 */
  180. const resetForm = () => {
  181. formData.value = {
  182. name: undefined,
  183. id: undefined,
  184. productKey: undefined,
  185. protocolId: undefined,
  186. categoryId: undefined,
  187. description: undefined,
  188. validateType: undefined,
  189. status: undefined,
  190. deviceType: undefined,
  191. netType: undefined,
  192. protocolType: undefined,
  193. dataFormat: undefined
  194. }
  195. formRef.value?.resetFields()
  196. }
  197. </script>