ProductForm.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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-row>
  11. <el-col :span="12">
  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="12">
  17. <el-form-item label="负责人" prop="ownerUserId">
  18. <el-select
  19. v-model="formData.ownerUserId"
  20. placeholder="请选择负责人"
  21. :disabled="formData.id"
  22. class="w-1/1"
  23. >
  24. <el-option
  25. v-for="user in userList"
  26. :key="user.id"
  27. :label="user.nickname"
  28. :value="user.id"
  29. />
  30. </el-select>
  31. </el-form-item>
  32. </el-col>
  33. <el-col :span="12">
  34. <el-form-item label="产品类型" prop="categoryId">
  35. <el-cascader
  36. v-model="formData.categoryId"
  37. :options="productCategoryList"
  38. :props="defaultProps"
  39. class="w-1/1"
  40. clearable
  41. placeholder="请选择产品类型"
  42. filterable
  43. />
  44. </el-form-item>
  45. </el-col>
  46. <el-col :span="12">
  47. <el-form-item label="产品单位" prop="unit">
  48. <el-select v-model="formData.unit" class="w-1/1" placeholder="请选择单位">
  49. <el-option
  50. v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PRODUCT_UNIT)"
  51. :key="dict.value"
  52. :label="dict.label"
  53. :value="dict.value"
  54. />
  55. </el-select>
  56. </el-form-item>
  57. </el-col>
  58. <el-col :span="12">
  59. <el-form-item label="产品编码" prop="no">
  60. <el-input v-model="formData.no" placeholder="请输入产品编码" />
  61. </el-form-item>
  62. </el-col>
  63. <el-col :span="12">
  64. <el-form-item label="价格" prop="price">
  65. <el-input-number
  66. v-model="formData.price"
  67. placeholder="请输入价格"
  68. :min="0"
  69. :precision="2"
  70. :step="0.1"
  71. class="w-full!"
  72. />
  73. </el-form-item>
  74. </el-col>
  75. <el-col :span="12">
  76. <el-form-item label="产品描述" prop="description">
  77. <el-input v-model="formData.description" placeholder="请输入产品描述" />
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="12">
  81. <el-form-item label="上架状态" prop="status">
  82. <el-select v-model="formData.status" placeholder="请选择状态" class="w-1/1">
  83. <el-option
  84. v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS)"
  85. :key="dict.value"
  86. :label="dict.label"
  87. :value="dict.value"
  88. />
  89. </el-select>
  90. </el-form-item>
  91. </el-col>
  92. </el-row>
  93. </el-form>
  94. <template #footer>
  95. <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
  96. <el-button @click="dialogVisible = false">取 消</el-button>
  97. </template>
  98. </Dialog>
  99. </template>
  100. <script setup lang="ts">
  101. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  102. import * as ProductApi from '@/api/crm/product'
  103. import * as ProductCategoryApi from '@/api/crm/product/productCategory'
  104. import { defaultProps, handleTree } from '@/utils/tree'
  105. import { getSimpleUserList, UserVO } from '@/api/system/user'
  106. import { useUserStore } from '@/store/modules/user'
  107. import { fenToYuan, yuanToFen } from '@/utils'
  108. defineOptions({ name: 'CrmProductForm' })
  109. const { t } = useI18n() // 国际化
  110. const message = useMessage() // 消息弹窗
  111. const dialogVisible = ref(false) // 弹窗的是否展示
  112. const dialogTitle = ref('') // 弹窗的标题
  113. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  114. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  115. const userId = useUserStore().getUser.id // 当前登录的编号
  116. const formData = ref({
  117. id: undefined,
  118. name: undefined,
  119. no: undefined,
  120. unit: undefined,
  121. price: Number(undefined),
  122. status: undefined,
  123. categoryId: undefined,
  124. description: undefined,
  125. ownerUserId: -1
  126. })
  127. const formRules = reactive({
  128. name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  129. no: [{ required: true, message: '产品编码不能为空', trigger: 'blur' }],
  130. status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
  131. categoryId: [{ required: true, message: '产品分类ID不能为空', trigger: 'blur' }],
  132. ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
  133. price: [{ required: true, message: '价格不能为空', trigger: 'blur' }]
  134. })
  135. const formRef = ref() // 表单 Ref
  136. /** 打开弹窗 */
  137. const open = async (type: string, id?: number) => {
  138. dialogVisible.value = true
  139. dialogTitle.value = t('action.' + type)
  140. formType.value = type
  141. resetForm()
  142. // 修改时,设置数据
  143. if (id) {
  144. formLoading.value = true
  145. try {
  146. formData.value = await ProductApi.getProduct(id)
  147. formData.value.price = Number(fenToYuan(formData.value.price))
  148. } finally {
  149. formLoading.value = false
  150. }
  151. } else {
  152. formData.value.ownerUserId = userId
  153. }
  154. }
  155. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  156. /** 提交表单 */
  157. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  158. const submitForm = async () => {
  159. // 校验表单
  160. if (!formRef) return
  161. const valid = await formRef.value.validate()
  162. if (!valid) return
  163. // 提交请求
  164. formLoading.value = true
  165. try {
  166. const data = {
  167. ...formData.value,
  168. price: yuanToFen(formData.value.price)
  169. } as unknown as ProductApi.ProductVO
  170. if (formType.value === 'create') {
  171. await ProductApi.createProduct(data)
  172. message.success(t('common.createSuccess'))
  173. } else {
  174. await ProductApi.updateProduct(data)
  175. message.success(t('common.updateSuccess'))
  176. }
  177. dialogVisible.value = false
  178. // 发送操作成功的事件
  179. emit('success')
  180. } finally {
  181. formLoading.value = false
  182. }
  183. }
  184. /** 重置表单 */
  185. const resetForm = () => {
  186. formData.value = {
  187. id: undefined,
  188. name: undefined,
  189. no: undefined,
  190. unit: undefined,
  191. price: Number(undefined),
  192. status: undefined,
  193. categoryId: undefined,
  194. description: undefined,
  195. ownerUserId: -1
  196. }
  197. formRef.value?.resetFields()
  198. }
  199. /** 初始化 */
  200. const productCategoryList = ref<any[]>([]) // 产品分类树
  201. const userList = ref<UserVO[]>([]) // 系统用户
  202. onMounted(async () => {
  203. // 产品分类树
  204. const data = await ProductCategoryApi.getProductCategoryList({})
  205. productCategoryList.value = handleTree(data, 'id', 'parentId')
  206. // 系统用户列表
  207. userList.value = await getSimpleUserList() // TODO 非繁人:替换成用户组件
  208. })
  209. </script>