上传

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

@@ -153,7 +153,8 @@ const rules = {
   name: { required: true, message: '线索名称不可为空', trigger: 'blur' },
   phone: { required: true, message: '联系方式不可为空', trigger: 'blur' },
   source: { required: true, message: '线索来源不可为空', trigger: 'change' },
-  intentionState: { required: true, message: '意向状态不可为空', trigger: 'change' }
+  intentionState: { required: true, message: '意向状态不可为空', trigger: 'change' },
+  consultTime: { required: true, message: '咨询日期不可为空', trigger: 'change' }
 }
 
 const tabName = ref('info')
@@ -193,7 +194,7 @@ const open = async (type, id) => {
     }
   } else {
     followList.value = []
-    address.value = []
+    address.value = ''
     defaultLatLng.value = {
       lat: 31.86119,
       lng: 117.283042

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>
 

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

@@ -19,8 +19,8 @@
           <el-tag type="success">{{ info.intentionState }}</el-tag>
         </div>
         <div>
-          <el-button type="primary" plain>修改</el-button>
-          <el-button type="danger" plain>删除</el-button>
+          <el-button type="primary" plain @click="handleUpdate">修改</el-button>
+          <el-button type="danger" plain @click="handleRemove">删除</el-button>
         </div>
       </div>
     </el-skeleton>
@@ -102,11 +102,11 @@
       </el-tab-pane>
     </el-tabs>
     <!-- 新建编辑跟进信息 -->
-    <DialogFollow ref="followRef" />
+    <DialogFollow ref="followRef" @success="getFollowList" />
   </el-drawer>
 </template>
 
-<script setup>
+<script setup name="DrawerClue">
 import { useAppStore } from '@/store/modules/app'
 import * as ClueApi from '@/api/clue'
 import * as FollowApi from '@/api/clue/followRecord'
@@ -124,6 +124,8 @@ import FlagGreen from '@/assets/imgs/flag/flag_green.png'
 import FlagBlue from '@/assets/imgs/flag/flag_blue.png'
 import FlagBlack from '@/assets/imgs/flag/flag_black.png'
 
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 const appStore = useAppStore()
 
 const show = ref(false)
@@ -174,17 +176,21 @@ const operateRecordList = ref([])
 const dialogMap = ref(null)
 const aMap = ref(null)
 
+function getFollowList() {
+  FollowApi.getFollowList({ clueId: id }).then((data) => {
+    followRecordList.value = data.map((item) => ({
+      operateUserName: item.operateUserName,
+      centent: item.centent,
+      operateDate: formatDate(item.operateTime),
+      followTime: formatDate(item.operateTime, 'YYYY-MM-DD HH:mm'),
+      nextFollowTime: formatDate(item.nextFollowTime)
+    }))
+  })
+}
+
 async function open(id) {
   try {
-    FollowApi.getFollowList({ clueId: id }).then((data) => {
-      followRecordList.value = data.map((item) => ({
-        operateUserName: item.operateUserName,
-        centent: item.centent,
-        operateDate: formatDate(item.operateTime),
-        followTime: formatDate(item.operateTime, 'YYYY-MM-DD HH:mm'),
-        nextFollowTime: formatDate(item.nextFollowTime)
-      }))
-    })
+    getFollowList()
     ClueApi.getOpearateRecord({ clueId: id }).then((data) => {
       operateRecordList.value = data.map((item) => ({
         operateUserName: item.operateUserName,
@@ -300,13 +306,36 @@ defineExpose({
 
 const followRef = ref()
 function addFollow() {
-  followRef.value.open('create', null)
+  followRef.value.open(info.value.clueId)
 }
 
 function destroyMap() {
   dialogMap.value = null
   aMap.value = null
 }
+
+const emit = defineEmits(['update', 'getList'])
+// 修改
+function handleUpdate() {
+  emit('update', info.value)
+  show.value = false
+}
+
+// 删除
+async function handleRemove() {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ClueApi.deleteClue(info.value.clueId)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('getList')
+    show.value = false
+  } catch (err) {
+    console.log(err)
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/Clue/Pool/Comp/follow.data.js

@@ -1,59 +0,0 @@
-import { dateFormatter } from '@/utils/formatTime'
-
-// 表单校验
-export const rules = reactive({
-  username: [required],
-  password: [required]
-})
-
-// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
-const crudSchemas = reactive([
-  {
-    label: '本次跟进时间',
-    field: 'createTime',
-    formatter: dateFormatter,
-    form: {
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetime',
-        format: 'YYYY-MM-DD HH:mm',
-        valueFormat: 'YYYY-MM-DD HH:mm',
-        placeholder: '本次跟进时间'
-      }
-    }
-  },
-  {
-    label: '下次跟进时间',
-    field: 'nextTime',
-    isForm: true,
-    formatter: dateFormatter,
-    detail: {
-      dateFormat: 'YYYY-MM-DD HH:mm'
-    },
-    form: {
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetime',
-        format: 'YYYY-MM-DD HH:mm',
-        valueFormat: 'YYYY-MM-DD HH:mm',
-        placeholder: '下次跟进时间'
-      }
-    }
-  },
-  {
-    label: '跟进内容',
-    field: 'remark',
-    isTable: true,
-    form: {
-      component: 'Input',
-      componentProps: {
-        type: 'textarea',
-        autosize: { minRows: 5, maxRows: 10 }
-      },
-      colProps: {
-        span: 24
-      }
-    }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)