crm-团队成员：完善团队成员通用组件封装

src/views/crm/components/CrmPermissionForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -11,16 +11,16 @@
         <el-select v-model="formData.userId">
           <el-option
             v-for="item in userOptions"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.nickname"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="权限级别" prop="level">
         <el-radio-group v-model="formData.level">
-          <el-radio label="2">只读</el-radio>
-          <el-radio label="3">读写</el-radio>
+          <el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
+          <el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
@@ -32,6 +32,8 @@
 </template>
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
+import * as PermissionApi from '@/api/crm/permission'
+import { CrmPermissionLevelEnum } from './index'
 
 defineOptions({ name: 'CrmPermissionForm' })
 const { t } = useI18n() // 国际化
@@ -42,7 +44,7 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const formData = ref({
+const formData = ref<PermissionApi.PermissionVO & { ids?: number[] }>({
   userId: undefined, // 用户编号
   bizType: undefined, // Crm 类型
   bizId: undefined, // Crm 类型数据编号
@@ -55,17 +57,15 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (type: 'create' | 'update', bizType: number, bizId: number, id?: number) => {
+const open = async (type: 'create' | 'update', bizType: number, bizId: number, ids?: number[]) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type) + '团队成员'
   formType.value = type
   resetForm(bizType, bizId)
   // 修改时，设置数据
-  if (id) {
-    formData.value.id = id
+  if (ids) {
+    formData.value.ids = ids
   }
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -81,8 +81,10 @@ const submitForm = async () => {
   try {
     const data = formData.value
     if (formType.value === 'create') {
+      await PermissionApi.createPermission(unref(data))
       message.success(t('common.createSuccess'))
     } else {
+      await PermissionApi.updatePermission(unref(data))
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -95,12 +97,16 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = (bizType: number, bizId: number) => {
+  formRef.value?.resetFields()
   formData.value = {
     userId: undefined, // 用户编号
     bizType, // Crm 类型
     bizId, // Crm 类型数据编号
     level: undefined // 权限级别
   }
-  formRef.value?.resetFields()
 }
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+})
 </script>