art-design/src/views/crmpc/customer/Edit.vue

<template>
  <div class="customer-form-page">
    <div class="form-header">
      <el-link  :underline="false" @click="goBack">
        <i class="iconfont-sys icon-reverse">&#xe772;</i>  返回
      </el-link>
      <span class="border"></span><span class="form-title">编辑客户资料</span>
    </div>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="customer-form"
      label-position="right"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="客户渠道" prop="channel_id">
            <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
              <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户商机" prop="magnitude">
            <el-select v-model="form.magnitude" placeholder="请选择客户商机">
              <el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称" prop="contacts">
            <el-input v-model="form.contacts" placeholder="请输入客户名称" />
          </el-form-item>
          <el-form-item label="客户性别" prop="sex" >
            <el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
              <el-radio :label="0">未知</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系方式" />
          </el-form-item>
          <el-form-item label="Email" prop="email">
            <el-input v-model="form.email" placeholder="请输入Email" />
          </el-form-item>
          <el-form-item label="WhatsApp" prop="WhatsApp">
            <el-input v-model="form.WhatsApp" placeholder="请输入WhatsApp" />
          </el-form-item>
          <!-- <el-form-item label="客户偏好" prop="car_type_id">
            <el-select v-model="form.car_type_id" placeholder="请选择客户偏好">
              <el-option v-for="item in intentionOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="客户分级" prop="grade">
            <el-select v-model="form.grade" placeholder="请选择客户分级">
              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="国家" prop="country_id">
            <el-select v-model="form.country_id" filterable placeholder="请选择国家">
              <el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="公司" prop="company">
            <el-input v-model="form.company" placeholder="请输入公司" />
          </el-form-item>
          <el-form-item label="备注" prop="describe">
            <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="submit-row">
        <el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
     </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { CrmService } from '@/api/crmApi'
const route = useRoute()
const customerId = route.query.id
const router = useRouter()
const formRef = ref()


const rules = {
  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
}

const channelOptions = ref<any>()
const opportunityOptions = ref<any>()
const intentionOptions = ref<any>()
const levelOptions = ref<any>()
const countryOptions = ref<any>()
onMounted(async () => {
  await getgetChannel()
  await getMagnitude()
  await getGrade()
  await getarea()
  await getdetilfn()
})
// 定义客户详情类型
interface CustomerInfo {
  contacts?: string
  // 可根据实际接口补充更多字段
  [key: string]: any
}
const form = ref<CustomerInfo>({})
const customerInfo = ref<CustomerInfo>({})
//获取详情
const getdetilfn = async() => {
  try {
    // 这里调用获取品牌列表的接口
    const res = await CrmService.getcustomerdetail({id:customerId})
    customerInfo.value = res
    form.value = res
  } catch (error) { }
}
//渠道
const getgetChannel = async () => {
  try {
    // 这里调用获取品牌列表的接口
    const res = await CrmService.getChannel()
    channelOptions.value = res||[]
  } catch (error) { channelOptions.value = [] }
}
//商机
const getMagnitude = async () => {
  try {
    // 这里调用获取品牌列表的接口
    const res = await CrmService.getMagnitude()
    opportunityOptions.value = res||[]
  } catch (error) { opportunityOptions.value = [] }
}
//客户等级 
const getGrade = async () => {
  try {
    // 这里调用获取品牌列表的接口
    const res = await CrmService.getGrade()
    levelOptions.value = res||[]
  } catch (error) { levelOptions.value = [] }
}
//国家
const getarea = async () => {
  try {
    // 这里调用获取品牌列表的接口
    const res = await CrmService.getCountry()
    countryOptions.value = res||[]
  } catch (error) { countryOptions.value = [] }
}
function goBack() {
  router.back()
}

function submitForm() {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        const res = await CrmService.customerAdd(form.value)
        ElMessage.success(res?.message || '提交成功！')
        router.push('/crmpc/customer')
      } catch (e: any) {
        ElMessage.error(e?.message || '提交失败')
      }
    }
  })
}
</script>

<style scoped>
.border{
  
  margin: 0px 10px 0px 40px;
}
.submit-row .el-form-item__content {
  display: flex;
  justify-content: center;
}
.icon-reverse {
  display: inline-block;
  transform: rotate(270deg); /* 旋转180度 */
}
.customer-form-page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
}
.form-header {
    width: 98%;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: flex-start; /* 新增，左对齐 */
}
.form-title{
  font-weight: bold;
  color: #222;
}

.customer-form {
  width: 600px;
  background: #fff;
  padding: 10px 24px 16px 24px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-form-item__label {
  color: #222;
  font-weight: 500;
}
</style>