chenlu
2024-04-18 c3e3920e4e7fcda3dd986c00bb80188381e93015
north-glass-erp/northglass-erp/src/views/sd/customer/CreateCustomer.vue
New file
@@ -0,0 +1,166 @@
<script lang="ts" setup>
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"
import { useI18n } from 'vue-i18n'
//语言获取
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
let produceList = ref([])
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/getSelectCustomer/1/100`,ruleForm.value).then((res) => {
      if(res.code==200){
        ruleForm.value=deepClone(res.data.data[0])
      }else{
        ElMessage.warning(res.msg)
        router.push("/login")
      }
    })
  }
})
//保存提交
const submitForm = () => {
  //表头数据校验
  const customerName = ruleForm.value.customerName
  if(customerName === null || customerName === undefined || customerName === ''){
    ElMessage.error(t('customer.pleaseEnterTheCustomerName'))
    return
  }
  const grade = ruleForm.value.grade
  if(grade === null || grade === undefined || grade === ''){
    ElMessage.error(t('customer.pleaseEnterCustomerLevel'))
    return
  }
  const moneyLimit = ruleForm.value.moneyLimit
  if(moneyLimit === null || moneyLimit === undefined || moneyLimit === ''){
    ElMessage.error(t('customer.pleaseEnterTheAmountOfFunds'))
    return
  }
  const address = ruleForm.value.address
  if(address === null || address === undefined || address === ''){
    ElMessage.error(t('customer.pleaseEnterTheContactAddress'))
    return
  }
  const contact = ruleForm.value.contact
  if(contact === null || contact === undefined || contact === ''){
    ElMessage.error(t('customer.pleaseEnterTheContactPerson'))
    return
  }
  const phone = ruleForm.value.phone
  if(phone === null || phone === undefined || phone === ''){
    ElMessage.error(t('customer.pleaseEnterTheContactPhoneNumber'))
    return
  }
  let flowData = ref({
    customer: ruleForm
  })
  request.post("/customer/insertCustomer", flowData.value).then((res) => {
    if(res.code==200){
      resetForm()
      ElMessage.success(t('basicData.msg.saveSuccess'))
    }else{
      ElMessage.warning(res.msg)
      router.push("/login")
    }
  })
}
//重置输入框
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="order-primary" >
      <el-row>
        <el-col  :span="2"><el-text>{{ $t('customer.customerName') }}:</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="2"><el-text>{{ $t('customer.customerGrade') }}:</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="2"><el-text>{{ $t('customer.moneyLimit') }}:</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="2"><el-text>{{ $t('customer.address') }}:</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="2"><el-text>{{ $t('customer.contacts') }}:</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="2"><el-text>{{ $t('customer.telephone') }}:</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="2"><el-button type="primary" @click="submitForm()">{{ $t('basicData.save') }}</el-button></el-col>
        <el-col  :span="2"><el-button @click="resetForm()">{{ $t('customer.resetting') }}</el-button></el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.main-div{
  width: 100%;
  height: 100%;
}
.div-form{
  height:70%;
  width: 40%;
}
.el-row{
  margin-bottom: 0.5rem;
}
</style>