<template>
|
<el-dialog
|
v-model="dialogVisible"
|
:title="title"
|
width="800px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
label-width="120px"
|
class="supplier-form"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="供应商名称" prop="supplierName">
|
<el-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="纳税人识别号" prop="identifyNumber">
|
<el-input v-model="formData.identifyNumber" placeholder="请输入纳税人识别号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="经营地址" prop="address">
|
<el-cascader
|
v-model="formData.address"
|
:options="addressOptions"
|
placeholder="请选择经营地址"
|
clearable
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="详细地址" prop="addressDetail">
|
<el-input v-model="formData.addressDetail" placeholder="请输入详细地址" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="银行账户" prop="bankAccount">
|
<el-input v-model="formData.bankAccount" placeholder="请输入银行账户" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开户行" prop="bank">
|
<el-input v-model="formData.bank" placeholder="请输入开户行" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="联系人" prop="contacts">
|
<el-input v-model="formData.contacts" placeholder="请输入联系人" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系人电话" prop="contactsPhone">
|
<el-input v-model="formData.contactsPhone" placeholder="请输入联系人电话" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="电子邮箱" prop="email">
|
<el-input v-model="formData.email" placeholder="请输入电子邮箱" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button v-if="type === 'edit'" @click="handleReset">重 置</el-button>
|
<el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, defineProps, watch } from 'vue'
|
import { ElMessage } from 'element-plus'
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
type: {
|
type: String,
|
default: 'add' // 'add' 或 'edit'
|
},
|
title: {
|
type: String,
|
default: '新增供应商'
|
},
|
rowData: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const emit = defineEmits(['update:visible', 'success'])
|
|
const dialogVisible = ref(false)
|
const loading = ref(false)
|
const formRef = ref(null)
|
|
// 表单数据
|
const formData = reactive({
|
supplierName: '',
|
identifyNumber: '',
|
address: [],
|
addressDetail: '',
|
bankAccount: '',
|
bank: '',
|
contacts: '',
|
contactsPhone: '',
|
email: '',
|
remark: ''
|
})
|
|
// 地址选项（示例数据）
|
const addressOptions = [
|
{
|
value: 'shanghai',
|
label: '上海',
|
children: [
|
{
|
value: 'pudong',
|
label: '浦东新区'
|
},
|
{
|
value: 'xuhui',
|
label: '徐汇区'
|
}
|
]
|
},
|
{
|
value: 'beijing',
|
label: '北京',
|
children: [
|
{
|
value: 'chaoyang',
|
label: '朝阳区'
|
},
|
{
|
value: 'haidian',
|
label: '海淀区'
|
}
|
]
|
}
|
]
|
|
// 表单验证规则
|
const rules = {
|
supplierName: [
|
{ required: true, message: '请输入供应商名称', trigger: 'blur' }
|
],
|
identifyNumber: [
|
{ required: true, message: '请输入纳税人识别号', trigger: 'blur' },
|
{ min: 15, max: 20, message: '纳税人识别号长度在15到20个字符', trigger: 'blur' }
|
],
|
address: [
|
{ required: true, message: '请选择经营地址', trigger: 'change' }
|
],
|
bankAccount: [
|
{ required: true, message: '请输入银行账户', trigger: 'blur' }
|
],
|
bank: [
|
{ required: true, message: '请输入开户行', trigger: 'blur' }
|
],
|
contacts: [
|
{ required: true, message: '请输入联系人', trigger: 'blur' }
|
],
|
contactsPhone: [
|
{ required: true, message: '请输入联系人电话', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
],
|
email: [
|
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
]
|
}
|
|
// 监听visible变化
|
watch(() => props.visible, (val) => {
|
dialogVisible.value = val
|
if (val && props.type === 'edit') {
|
Object.assign(formData, props.rowData)
|
}
|
})
|
|
// 监听dialogVisible变化
|
watch(() => dialogVisible.value, (val) => {
|
emit('update:visible', val)
|
})
|
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
await formRef.value.validate((valid) => {
|
if (valid) {
|
loading.value = true
|
try {
|
// 触发成功事件，传递表单数据
|
emit('success', { ...formData })
|
handleClose()
|
} catch (error) {
|
ElMessage.error('提交失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
})
|
}
|
|
// 重置表单
|
const handleReset = () => {
|
formRef.value?.resetFields()
|
}
|
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false
|
formRef.value?.resetFields()
|
Object.assign(formData, {
|
supplierName: '',
|
identifyNumber: '',
|
address: [],
|
addressDetail: '',
|
bankAccount: '',
|
bank: '',
|
contacts: '',
|
contactsPhone: '',
|
email: '',
|
remark: ''
|
})
|
}
|
</script>
|
|
<style scoped>
|
.supplier-form {
|
padding: 20px;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
|
:deep(.el-form-item__label) {
|
font-weight: bold;
|
}
|
|
:deep(.el-input),
|
:deep(.el-cascader) {
|
width: 100%;
|
}
|
|
:deep(.el-textarea__inner) {
|
min-height: 80px;
|
}
|
</style>
|
