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

<template>
  <div class="p-10px">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
      <el-form-item label="学员姓名" prop="stuName">
        <el-input v-model="form.stuName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="手机号" prop="stuMobile">
        <el-input v-model="form.stuMobile" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="线索来源" prop="source">
        <el-cascader
          :options="sourceOptions"
          v-model="form.source"
          clearable
          filterable
          :props="defaultProps"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="咨询日期" prop="stuConsultTime">
        <el-date-picker
          v-model="form.stuConsultTime"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="咨询车型" prop="stuConsultCartype">
        <el-select v-model="form.stuConsultCartype" placeholder="请选择" clearable filterable>
          <el-option
            v-for="item in cartypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学员诉求" prop="requirement">
        <el-input
          v-model="form.requirement"
          type="textarea"
          :autosize="{ minRows: 3 }"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          :autosize="{ minRows: 3 }"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" @click="onSubmit" size="large" style="width: 100%"
          >提 交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { getStrDictOptions } from '@/utils/dict'
import { getSimpleSourceList } from '@/api/clue/source'
import { handleTree } from '@/utils/tree'
import { formatDate } from '@/utils/formatTime'
// import * as authUtil from '@/utils/auth'

import { clueInput } from '@/api/clue'

onMounted(() => {
  getOptions()
})

const form = ref({
  stuName: '测试',
  stuMobile: '189895456214',
  source: '',
  stuConsultTime: formatDate(new Date()),
  stuConsultCartype: 'C1',
  requirement: '123',
  remark: '321',
  instanceId: '1014'
})

const defaultProps = {
  expandTrigger: 'hover',
  checkStrictly: false,
  label: 'sourceName',
  value: 'sourceId'
}

const rules = {
  stuName: [{ required: true, message: '请输入学员姓名', trigger: 'blur' }],
  stuMobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  source: [{ required: true, message: '请选择线索来源', trigger: 'change' }],
  stuConsultTime: [{ required: true, message: '请选择咨询日期', trigger: 'change' }],
  stuConsultCartype: [{ required: true, message: '请选择咨询车型', trigger: 'change' }]
}

const sourceOptions = ref([])
const cartypeOptions = getStrDictOptions('license_type')

function getOptions() {
  getSimpleSourceList().then((data) => {
    sourceOptions.value = handleTree(data, 'sourceId')
  })
}

const formRef = ref(null)
function onSubmit() {
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单
      const params = {
        ...form.value,
        source: form.value.source ? form.value.source[form.value.source.length - 1] : null
      }
      clueInput(params).then(() => {
        message.success('线索录入成功')
        form.value = {
          stuName: '',
          stuMobile: '',
          source: '',
          stuConsultTime: formatDate(new Date()),
          stuConsultCartype: '',
          requirement: '',
          remark: ''
        }
      })
    } else {
      console.log('表单验证失败')
      return false
    }
  })
}
</script>

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