<template>
|
<div class="container">
|
<div class="title" v-if="!editId">
|
新建供应商 <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
<div class="title" v-else>
|
<span>修改供应商</span> <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
|
<div class="wrap">
|
<el-row>
|
<el-col :lg="16" :md="20" :sm="24" :xs="24">
|
<el-form :model="contact" status-icon ref="form" label-width="auto" @submit.prevent :rules="rules">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="contact.name" placeholder="请填写姓名"></el-input>
|
</el-form-item>
|
|
<el-form-item label="供应商" prop="company_id">
|
<el-select v-model="contact.company_id" placeholder="请选择供应商" clearable>
|
<el-option v-for="item in companyArr" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="参与项目" prop="project_list">
|
<el-select
|
v-model="contact.project_list"
|
placeholder="所属项目"
|
clearable
|
filterable
|
class="selectClass"
|
multiple
|
>
|
<el-option v-for="item in projectInfoArr" :key="item.id" :label="item.project_name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="擅长" prop="skill_list">
|
<el-select
|
v-model="contact.skill_list"
|
placeholder="所属项目"
|
clearable
|
filterable
|
class="selectClass"
|
multiple
|
>
|
<el-option v-for="item in skillTypeArr" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="职务/角色" prop="title">
|
<el-input v-model="contact.title" placeholder="请填写职务/角色"></el-input>
|
</el-form-item>
|
|
<el-form-item label="性别" prop="sex">
|
<el-select v-model="contact.sex" placeholder="请填写性别" clearable>
|
<el-option v-for="item in sexArr" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="电话" prop="phone">
|
<el-input v-model="contact.phone" placeholder="请填写电话"></el-input>
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email_address">
|
<el-input v-model="contact.email_address" placeholder="请填写邮箱"></el-input>
|
</el-form-item>
|
|
<el-form-item label="地址" prop="address">
|
<el-input v-model="contact.address" placeholder="请填写地址"></el-input>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
placeholder="请输入备注"
|
v-model="contact.remark"
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item class="submit">
|
<el-button type="primary" @click="submitForm">保 存</el-button>
|
<el-button @click="resetForm">重 置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, ref, onMounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
|
import ProjectInfo from '@/model/projectInfo'
|
import ContactInfo from '@/model/supplierContactInfo'
|
import CompanyInfo from '@/model/supplierCompanyInfo'
|
import sysDictItemModel from '@/model/sysDictItem'
|
|
export default {
|
props: {
|
editId: {
|
type: String,
|
default: null,
|
},
|
},
|
setup(props, context) {
|
const form = ref(null)
|
const loading = ref(false)
|
const contact = reactive({
|
id: props.editId,
|
name: '',
|
company_id: '',
|
title: '',
|
sex: '0',
|
phone: '',
|
email_address: '',
|
address: '',
|
remark: '',
|
project_list: '',
|
skill_list: '',
|
})
|
|
const companyArr = ref([])
|
const projectInfoArr = ref([])
|
const skillTypeArr = ref([])
|
const sexArr = ref([])
|
|
const listAssign = (a, b) => Object.keys(a).forEach(key => {
|
a[key] = b[key] || a[key]
|
})
|
|
/**
|
* 表单规则验证
|
*/
|
const { rules } = getRules()
|
|
onMounted(() => {
|
if (props.editId) {
|
getCompany()
|
}
|
loadDictDitems()
|
})
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
companyArr.value = await CompanyInfo.getCompanyInfoList(null)
|
sexArr.value = await sysDictItemModel.getSysDictItemListByType('sex')
|
projectInfoArr.value = await ProjectInfo.getProjectInfoList('')
|
skillTypeArr.value = await sysDictItemModel.getSysDictItemListByType('skill_type')
|
}
|
|
const getCompany = async () => {
|
loading.value = true
|
const res = await ContactInfo.getContactInfo(props.editId)
|
listAssign(contact, res)
|
contact.sex = String(res.sex)
|
loading.value = false
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
const submitForm = async formName => {
|
form.value.validate(async valid => {
|
if (valid) {
|
let res = {}
|
if (props.editId) {
|
res = await ContactInfo.editContactInfo(props.editId, contact)
|
context.emit('editClose')
|
} else {
|
res = await ContactInfo.createContactInfo(contact)
|
resetForm(formName)
|
}
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
ElMessage.success(`${res.message}`)
|
}
|
} else {
|
console.error('error submit!!')
|
ElMessage.error('请将信息填写完整')
|
}
|
})
|
}
|
|
const back = () => {
|
context.emit('editClose')
|
}
|
|
return {
|
// 字典项加载
|
sexArr,
|
companyArr,
|
projectInfoArr,
|
skillTypeArr,
|
|
back,
|
contact,
|
form,
|
rules,
|
resetForm,
|
submitForm,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
function getRules() {
|
/**
|
* 验证回调函数
|
*/
|
const checkInfo = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
callback()
|
}
|
const rules = {
|
name: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
company_id: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
// title: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
// sex: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
// phone: [
|
// { validator: checkInfo, trigger: 'blur', required: true },
|
// {
|
// validator: (rule, value, callback) => {
|
// const phonePattern = /^1[0-9]{10}$/; // 手机号码的正则表达式
|
// if (!phonePattern.test(value)) {
|
// callback(new Error('请输入有效的手机号码'));
|
// } else {
|
// callback();
|
// }
|
// },
|
// trigger: 'blur'
|
// }
|
// ],
|
// email_address:[
|
// { type: 'email', message: '请输入正确的邮箱地址或者不填', trigger: ['blur', 'change'] , required: true}
|
// ],
|
// address: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
}
|
return { rules }
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
.title {
|
height: 59px;
|
line-height: 59px;
|
color: $parent-title-color;
|
font-size: 16px;
|
font-weight: 500;
|
text-indent: 40px;
|
border-bottom: 1px solid #dae1ec;
|
|
.back {
|
float: right;
|
margin-right: 40px;
|
cursor: pointer;
|
}
|
}
|
|
.wrap {
|
padding: 20px;
|
}
|
|
.submit {
|
float: left;
|
}
|
}
|
</style>
|
