客户界面新增

廖井涛

2024-02-27 ff379897439699e5133efa86e71a8531937e5d6e

 north-glass-erp/northglass-erp/src/views/sd/customer/CreateCustomer.vue

@@ -1,118 +1,149 @@
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router"
import request from "@/utils/request"
import {ElMessage} from "element-plus";
import deepClone from "@/utils/deepClone"
const router = useRouter()
const route = useRoute()
let produceList = ref([])

const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()


let ruleForm = ref({
  id:0,
  customerName: '',
  grade: '',
  moneyLimit: '',
  address: '',
  contact: '',
  phone: ''

})



onMounted(()=>{

  //获取传过来的数据进行判断
  const str = route.query.id
  if (typeof str != 'undefined' && str != null && str !== '' && str !== '\n' && str !== '\r'){
    ruleForm.value.id = Number(str)

    request.post(`/customer/getseletCustomer/1/100`,ruleForm.value).then((res) => {
      if(res.code==200){
        console.log(res.data.data)
        ruleForm.value=deepClone(res.data.data[0])

        console.log(ruleForm.value)

      }else{
        ElMessage.warning(res.msg)
        router.push("/login")
      }
    }
  }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
    })
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',

})

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
//保存提交
const submitForm = () => {
  //表头数据校验
  const customerName = ruleForm.value.customerName
  if(customerName === null || customerName === undefined || customerName === ''){
    ElMessage.error('输入客户名称！')
    return
  }
  const grade = ruleForm.value.grade
  if(grade === null || grade === undefined || grade === ''){
    ElMessage.error('输入客户等级！')
    return
  }
  const moneyLimit = ruleForm.value.moneyLimit
  if(moneyLimit === null || moneyLimit === undefined || moneyLimit === ''){
    ElMessage.error('输入金额额度！')
    return
  }
  const address = ruleForm.value.address
  if(address === null || address === undefined || address === ''){
    ElMessage.error('输入联系地址！')
    return
  }
  const contact = ruleForm.value.contact
  if(contact === null || contact === undefined || contact === ''){
    ElMessage.error('输入联系人！')
    return
  }
  const phone = ruleForm.value.phone
  if(phone === null || phone === undefined || phone === ''){
    ElMessage.error('输入类型电话！')
    return
  }

  let flowData = ref({
    customer: ruleForm
  })

  console.log(flowData)
  request.post("/customer/insertCustomer", flowData.value).then((res) => {
    if(res.code==200){
      resetForm()
      ElMessage.success("提交成功")
    }else{
      ElMessage.warning(res.msg)
      router.push("/login")
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//重置输入框
const resetForm = () => {
  ruleForm.value.customerName=""
  ruleForm.value.grade=""
  ruleForm.value.moneyLimit=""
  ruleForm.value.address=""
  ruleForm.value.contact=""
  ruleForm.value.phone=""
}
</script>

<template>
  <div class="main-div">
    <div class="div-form">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
      >
        <el-form-item label="客户名称" prop="pass">
          <el-input  v-model="ruleForm.pass" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="客户等级" prop="checkPass">
          <el-input
              v-model="ruleForm.checkPass"
              type="text"
              autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="信用额度" prop="age">
          <el-input v-model.number="ruleForm.age" />
        </el-form-item>
        <el-form-item label="地址" prop="age">
          <el-input v-model.number="ruleForm.age" />
        </el-form-item>
        <el-form-item label="联系人" prop="age">
          <el-input v-model.number="ruleForm.age" />
        </el-form-item>
        <el-form-item label="联系电话" prop="age">
          <el-input v-model.number="ruleForm.age" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
          >保存</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>

    <div class="order-primary" >
      <el-row>
        <el-col  :span="1"><el-text>客户名称:</el-text></el-col>
        <el-col  :span="5"><el-input style="font-size: large;color: #181818" v-model="ruleForm.customerName"  ></el-input></el-col>
      </el-row>
      <el-row>
        <el-col  :span="1"><el-text>客户等级:</el-text></el-col>
        <el-col  :span="5"><el-input style="font-size: large;color: #181818" v-model="ruleForm.grade"  ></el-input></el-col>
      </el-row>
      <el-row>
        <el-col  :span="1"><el-text>信用额度:</el-text></el-col>
        <el-col  :span="5"><el-input style="font-size: large;color: #181818" v-model="ruleForm.moneyLimit"  ></el-input></el-col>
      </el-row>
      <el-row>
        <el-col  :span="1"><el-text>地址:</el-text></el-col>
        <el-col  :span="5"><el-input style="font-size: large;color: #181818" v-model="ruleForm.address"  ></el-input></el-col>
      </el-row>
      <el-row>
        <el-col  :span="1"><el-text>联系人:</el-text></el-col>
        <el-col  :span="5"><el-input style="font-size: large;color: #181818" v-model="ruleForm.contact"  ></el-input></el-col>
      </el-row>
      <el-row>
        <el-col  :span="1"><el-text>联系电话:</el-text></el-col>
        <el-col  :span="5"><el-input style="font-size: large;color: #181818" v-model="ruleForm.phone"  ></el-input></el-col>
      </el-row>
      <el-row>
        <el-col  :span="1"><el-button type="primary" @click="submitForm()">保存</el-button></el-col>
        <el-col  :span="1"><el-button @click="resetForm()">重置</el-button></el-col>
      </el-row>
    </div>

  </div>


@@ -129,4 +160,7 @@
  height:70%;
  width: 40%;
}
.el-row{
  margin-bottom: 0.5rem;
}
</style>