ss-crm-manage-web/src/views/Clue/Pool/Comp/DialogRemark.vue

<template>
  <Dialog title="邀约报备" v-model="show" width="600px">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
      <el-form-item prop="remarkContent">
        <el-input
          type="textarea"
          placeholder="请输入报备信息"
          v-model="form.remarkContent"
          :autosize="{ minRows: 10 }"
        />
      </el-form-item>
      <el-form-item prop="groupId">
        <el-select v-model="form.groupId" placeholder="选择群聊发送报备信息并@区域" filterable>
          <el-option
            v-for="item in groupOptions"
            :key="item.groupId"
            :label="item.groupName"
            :value="item.groupId"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="schoolPlace">
        <el-cascader
          v-model="form.schoolPlace"
          :options="placeOptions"
          placeholder="选择邀约驾校和场地"
          filterable
          show-all-levels
          style="width: 100%"
          :props="{ expandTrigger: 'hover', multiple: false, checkStrictly: true }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button :disabled="formLoading" type="primary" @click="handleSave">提 交</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup>
import { getWxGroupSimpleList, getClueRemarkByClueId, reportClue } from '@/api/clue/clueRemark'
import { getPlaceList } from '@/api/school/place'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const message = useMessage()

const form = ref({
  remarkContent: '',
  groupId: '',
  schoolPlace: []
})
const rules = {
  remarkContent: [{ required: true, message: '请输入报备信息', trigger: 'blur' }],
  groupId: [{ required: true, message: '请选择群聊', trigger: 'change' }]
}
const formLoading = ref(false)

const show = ref(false)
async function open(row) {
  show.value = true
  // 查询群聊
  getOptions()

  // 查询报备信息
  const data = await getClueRemarkByClueId({ clueId: row.clueId })
  if (data && data.remarkId) {
    form.value = { ...data }
    if (data.schoolId && data.placeId) {
      form.value.schoolPlace = [data.schoolId, data.placeId]
    } else if (data.schoolId) {
      form.value.schoolPlace = [data.schoolId]
    }
    return
  }

  form.value.clueId = row.clueId
  let remarkInfo = `学员姓名：${row.name}\n联系方式：${row.phone}\n意向驾校：\n意向班型：`
  if (row.diyParams?.licenseType) {
    remarkInfo += `${row.diyParams.licenseType}\n`
  } else {
    remarkInfo += `\n`
  }
  // const name = userStore.getUser.nickname.substring(0, 1)
  const name = userStore.getUser.nickname
  remarkInfo += `意向成交价：\n邀约时间：\n邀约人：${name}教练\n备注：`
  form.value.remarkContent = remarkInfo
}

defineExpose({ open })

const groupOptions = ref([])
const placeOptions = ref([])
function getOptions() {
  getWxGroupSimpleList().then((response) => {
    groupOptions.value = response
  })

  getPlaceList({
    placeStatus: 0,
    schoolStatus: 0,
    isSearchSchool: true
  }).then((data) => {
    placeOptions.value = data.schoolList.map((item) => ({
      value: item.schoolId,
      label: item.schoolName,
      children: data.placeList
        .filter((place) => item.schoolId == place.schoolId)
        .map((place) => ({
          value: place.placeId,
          label: place.name
        }))
    }))
  })
}

const formRef = ref(null)
function handleSave() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      formLoading.value = true
      try {
        const params = { ...form.value }
        if (params.schoolPlace && params.schoolPlace.length) {
          params.schoolId = params.schoolPlace[0]
          if (params.schoolPlace.length == 2) {
            params.placeId = params.schoolPlace[1]
          }
        }
        await reportClue(params)
        message.success('提交报备信息成功')
        show.value = false
      } catch (error) {
        console.error('提交报备信息失败', error)
      } finally {
        formLoading.value = false
      }
    } else {
      console.log('表单验证失败')
      return false
    }
  })
}
</script>

<style lang="scss" scoped></style>