上传

src/views/Clue/Pool/Comp/DialogFollow.vue

@@ -1,14 +1,46 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
     <div class="flex">
-      <Form
-        style="flex: 1"
-        ref="formRef"
-        v-loading="formLoading"
-        isCol
-        :rules="rules"
-        :schema="allSchemas.formSchema"
-      />
+      <el-form style="flex: 1" :model="form" ref="formRef" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="本次跟进时间" prop="operateTime">
+              <el-date-picker
+                v-model="form.operateTime"
+                type="datetime"
+                format="YYYY-MM-DD HH:mm"
+                valueFormat="YYYY-MM-DD HH:mm"
+                placeholder="本次跟进时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="下次跟进时间" prop="nextFollowTime">
+              <el-date-picker
+                v-model="form.nextFollowTime"
+                type="date"
+                format="YYYY-MM-DD"
+                valueFormat="YYYY-MM-DD"
+                placeholder="下次跟进时间"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24" :offset="0">
+            <el-form-item label="跟进内容" prop="content">
+              <el-input
+                v-model="form.content"
+                type="textarea"
+                :autosize="{ minRows: 4 }"
+                placeholder="请输入跟进内容"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
       <div class="ml-20px" style="width: 300px">
         <el-input
           v-model="keyword"
@@ -31,38 +63,46 @@
     <template #footer>
       <span>
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleSave">保 存</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="handleSave">保 存</el-button>
       </span>
     </template>
   </Dialog>
 </template>
 
-<script setup>
-import { allSchemas, rules } from './follow.data'
+<script setup name="DialogFollow">
+import { createFollow } from '@/api/clue/followRecord'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formRef = ref() // 表单 Ref
 
-const open = async (type, info) => {
+const form = ref({})
+
+const rules = {
+  operateTime: { required: true, message: '本次跟进时间不可为空', trigger: 'change' },
+  nextFollowTime: { required: true, message: '下次跟进时间不可为空', trigger: 'change' },
+  content: { required: true, message: '跟进内容不可为空', trigger: 'blur' }
+}
+
+const open = async (clueId) => {
   dialogVisible.value = true
-  dialogTitle.value = type == 'create' ? '新增跟进记录' : '修改跟进记录'
-  formType.value = type
-  // 修改时，设置数据
-  if (info) {
-    formLoading.value = true
-    try {
-      const data = { ...info }
-      formRef.value.setValues(data)
-    } finally {
-      formLoading.value = false
-    }
-  }
+  dialogTitle.value = '新增跟进记录'
+  resetForm(clueId)
 }
 
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+function resetForm(clueId) {
+  form.value = {
+    clueId,
+    operateTime: undefined,
+    nextFollowTime: undefined,
+    content: undefined
+  }
+}
 
 const resultList = [
   {
@@ -263,9 +303,22 @@ function filterList() {
   showList.value = resultList.filter((it) => it.question.includes(keyword.value))
 }
 
-function handleSave() {
-  console.log('保存成功')
-  dialogVisible.value = false
+async function handleSave() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await createFollow(form.value)
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
 }
 </script>