CRM: 跟进组件完善

src/views/crm/followup/FollowUpRecordForm.vue

@@ -31,7 +31,6 @@
             />
           </el-form-item>
         </el-col>
-        <!-- TODO @puhui999：不搞富文本哈；然后加个附件、图片两个 form-item 哈 -->
         <el-col :span="24">
           <el-form-item label="跟进内容" prop="content">
             <el-input v-model="formData.content" :rows="3" type="textarea" />
@@ -72,13 +71,13 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <ContactTableSelect ref="contactTableSelectRef" v-model="formData.contactIds" />
+  <BusinessTableSelect ref="businessTableSelectRef" v-model="formData.businessIds" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { FollowUpRecordApi, FollowUpRecordVO } from '@/api/crm/followup'
-import { BusinessList, ContactList } from './components'
+import { BusinessList, BusinessTableSelect, ContactList, ContactTableSelect } from './components'
-import * as ContactApi from '@/api/crm/contact'
-import * as BusinessApi from '@/api/crm/business'
 
 defineOptions({ name: 'FollowUpRecordForm' })
 
@@ -97,8 +96,6 @@ const formRules = reactive({
 })
 
 const formRef = ref() // 表单 Ref
-const allContactList = ref<ContactApi.ContactVO[]>([]) // 所有联系人列表
-const allBusinessList = ref<BusinessApi.BusinessVO[]>([]) // 所有商家列表
 
 /** 打开弹窗 */
 const open = async (bizType: number, bizId: number, type: string, id?: number) => {
@@ -108,8 +105,6 @@ const open = async (bizType: number, bizId: number, type: string, id?: number) =
   resetForm()
   formData.value.bizType = bizType
   formData.value.bizId = bizId
-  allContactList.value = await ContactApi.getSimpleContactList()
-  allBusinessList.value = await BusinessApi.getSimpleBusinessList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -146,8 +141,14 @@ const submitForm = async () => {
   }
 }
 
-const handleAddContact = () => {}
+const contactTableSelectRef = ref<InstanceType<typeof ContactTableSelect>>()
-const handleAddBusiness = () => {}
+const handleAddContact = () => {
+  contactTableSelectRef.value?.open()
+}
+const businessTableSelectRef = ref<InstanceType<typeof BusinessTableSelect>>()
+const handleAddBusiness = () => {
+  businessTableSelectRef.value?.open()
+}
 /** 重置表单 */
 const resetForm = () => {
   formRef.value?.resetFields()

src/views/crm/followup/components/BusinessList.vue

@@ -52,7 +52,7 @@ watch(
     if (!val || val.length === 0) {
       return
     }
-    list.value = BusinessApi.getBusinessListByIds(val) as unknown as BusinessApi.BusinessVO[]
+    list.value = BusinessApi.getBusinessListByIds(unref(val)) as unknown as BusinessApi.BusinessVO[]
   }
 )
 const emits = defineEmits<{

src/views/crm/followup/components/BusinessListSelectForm.vue

@@ -1,79 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="跟进类型" prop="type">
-          <el-select v-model="formData.type" placeholder="请选择跟进类型">
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="下次联系时间" prop="nextTime">
-          <el-date-picker
-            v-model="formData.nextTime"
-            placeholder="选择下次联系时间"
-            type="date"
-            value-format="x"
-          />
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-/** 跟进记录 表单 */
-defineOptions({ name: 'BusinessListSelectForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref([])
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await FollowUpRecordApi.getFollowUpRecord(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 提交请求
-  formLoading.value = true
-  try {
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formRef.value?.resetFields()
-}
-</script>

src/views/crm/followup/components/BusinessTableSelect.vue

@@ -0,0 +1,84 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择商机" width="700">
+    <el-table
+      ref="multipleTableRef"
+      v-loading="loading"
+      :data="list"
+      :show-overflow-tooltip="true"
+      :stripe="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column align="center" label="商机名称" prop="name" />
+      <el-table-column align="center" label="客户名称" prop="customerName" />
+      <el-table-column align="center" label="商机金额" prop="price" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="预计成交日期"
+        prop="dealTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="备注" prop="remark" />
+    </el-table>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import * as BusinessApi from '@/api/crm/business'
+import { dateFormatter } from '@/utils/formatTime'
+import { ElTable } from 'element-plus'
+
+defineOptions({ name: 'BusinessTableSelect' })
+withDefaults(defineProps<{ modelValue: number[] }>(), { modelValue: () => [] })
+const list = ref<BusinessApi.BusinessVO[]>([]) // 列表的数据
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false)
+// 确认选择时的触发事件
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: number[]): void
+}>()
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<BusinessApi.BusinessVO[]>([])
+const handleSelectionChange = (val: BusinessApi.BusinessVO[]) => {
+  multipleSelection.value = val
+}
+/** 触发 */
+const submitForm = () => {
+  formLoading.value = true
+  try {
+    emits(
+      'update:modelValue',
+      multipleSelection.value.map((item) => item.id)
+    )
+  } finally {
+    formLoading.value = false
+    // 关闭弹窗
+    dialogVisible.value = false
+  }
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await BusinessApi.getSimpleBusinessList()
+  } finally {
+    loading.value = false
+  }
+}
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  await nextTick()
+  if (multipleSelection.value.length > 0) {
+    multipleTableRef.value!.clearSelection()
+  }
+  await getList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

src/views/crm/followup/components/ContactList.vue

@@ -69,7 +69,7 @@ const props = withDefaults(defineProps<{ contactIds: number[] }>(), {
 const list = ref<ContactApi.ContactVO[]>([] as ContactApi.ContactVO[])
 const getContactList = async () => {
   list.value = (await ContactApi.getContactListByIds(
-    props.contactIds
+    unref(props.contactIds)
   )) as unknown as ContactApi.ContactVO[]
 }
 watch(

src/views/crm/followup/components/ContactTableSelect.vue

@@ -0,0 +1,83 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择联系人" width="700">
+    <el-table
+      ref="multipleTableRef"
+      v-loading="loading"
+      :data="list"
+      :show-overflow-tooltip="true"
+      :stripe="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column align="center" fixed="left" label="姓名" prop="name" width="140" />
+      <el-table-column
+        align="center"
+        fixed="left"
+        label="客户名称"
+        prop="customerName"
+        width="120"
+      />
+      <el-table-column align="center" label="手机" prop="mobile" width="120" />
+      <el-table-column align="center" label="电话" prop="telephone" width="120" />
+      <el-table-column align="center" label="邮箱" prop="email" width="120" />
+      <el-table-column align="center" label="职位" prop="post" width="120" />
+    </el-table>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import * as ContactApi from '@/api/crm/contact'
+import { ElTable } from 'element-plus'
+
+defineOptions({ name: 'ContactTableSelect' })
+withDefaults(defineProps<{ modelValue: number[] }>(), { modelValue: () => [] })
+const list = ref<ContactApi.ContactVO[]>([]) // 列表的数据
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false)
+// 确认选择时的触发事件
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: number[]): void
+}>()
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<ContactApi.ContactVO[]>([])
+const handleSelectionChange = (val: ContactApi.ContactVO[]) => {
+  multipleSelection.value = val
+}
+/** 触发 */
+const submitForm = () => {
+  formLoading.value = true
+  try {
+    emits(
+      'update:modelValue',
+      multipleSelection.value.map((item) => item.id)
+    )
+  } finally {
+    formLoading.value = false
+    // 关闭弹窗
+    dialogVisible.value = false
+  }
+}
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await ContactApi.getSimpleContactList()
+  } finally {
+    loading.value = false
+  }
+}
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  await nextTick()
+  if (multipleSelection.value.length > 0) {
+    multipleTableRef.value!.clearSelection()
+  }
+  await getList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

src/views/crm/followup/components/index.ts

@@ -1,4 +1,6 @@
 import BusinessList from './BusinessList.vue'
+import BusinessTableSelect from './BusinessTableSelect.vue'
 import ContactList from './ContactList.vue'
+import ContactTableSelect from './ContactTableSelect.vue'
 
-export { BusinessList, ContactList }
+export { BusinessList, BusinessTableSelect, ContactList, ContactTableSelect }