增加相关功能
This commit is contained in:
1 parent
44a03186da
commit
d8936d9730
30 files changed
+4503
-2412
No files matched your search
@@ -30,22 +30,34 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customer_name">
|
||||
<el-input v-model="form.customer_name" placeholder="请输入客户名称" />
|
||||
<el-input
|
||||
v-model="form.customer_name"
|
||||
placeholder="请输入客户名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户类型" prop="customer_type">
|
||||
<el-select v-model="form.customer_type" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.customer_type"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
<el-option label="教育机构" value="4" />
|
||||
<el-option label="个人" value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户等级" prop="customer_level">
|
||||
<el-select v-model="form.customer_level" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.customer_level"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
@@ -58,16 +70,6 @@
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
@@ -95,12 +97,19 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
<el-input
|
||||
v-model="form.administrative_division"
|
||||
placeholder="省/市/区"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.enterprise_type"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
@@ -114,13 +123,31 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.taxpayer_qualification"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
@@ -139,17 +166,26 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
<el-input
|
||||
v-model="form.contact_person"
|
||||
placeholder="请输入联系人姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
<el-input
|
||||
v-model="form.contact_phone"
|
||||
placeholder="请输入联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
<el-input
|
||||
v-model="form.contact_email"
|
||||
placeholder="请输入联系邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
@@ -166,22 +202,34 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
<el-input
|
||||
v-model="form.invoice_title"
|
||||
placeholder="请输入发票抬头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
<el-input
|
||||
v-model="form.tax_number"
|
||||
placeholder="请输入纳税人识别号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
<el-input
|
||||
v-model="form.registered_address"
|
||||
placeholder="请输入注册地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
<el-input
|
||||
v-model="form.registered_phone"
|
||||
placeholder="请输入注册电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -189,12 +237,18 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
<el-input
|
||||
v-model="form.bank_name"
|
||||
placeholder="请输入开户行名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
<el-input
|
||||
v-model="form.bank_account"
|
||||
placeholder="请输入开户行账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -221,16 +275,27 @@
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep"
|
||||
>下一步</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿:仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
<el-button
|
||||
v-if="!isEdit || form.is_draft === 1"
|
||||
:loading="submitting"
|
||||
@click="handleSaveDraft"
|
||||
>
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存:仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
<el-button
|
||||
v-if="activeStep === 3"
|
||||
type="primary"
|
||||
:loading="submitting"
|
||||
@click="handleSave(false)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -240,184 +305,192 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createCustomer, updateCustomer } from '@/api/customer'
|
||||
import { ref, reactive, computed, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { InfoFilled } from "@element-plus/icons-vue";
|
||||
import { createCustomer, updateCustomer } from "@/api/customer";
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
editData: { type: Object, default: null },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
const emit = defineEmits(["update:visible", "success"]);
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
const formRef = ref();
|
||||
const activeStep = ref(0);
|
||||
const submitting = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const internalId = ref(null);
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑客户(草稿)' : '编辑客户'
|
||||
return form.is_draft === 1 ? "编辑客户(草稿)" : "编辑客户";
|
||||
}
|
||||
return '新增客户'
|
||||
})
|
||||
return "新增客户";
|
||||
});
|
||||
|
||||
const defaultForm = () => ({
|
||||
customer_name: '',
|
||||
customer_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
customer_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
customer_name: "",
|
||||
customer_type: "1",
|
||||
contact_person: "",
|
||||
contact_phone: "",
|
||||
contact_email: "",
|
||||
customer_level: "3",
|
||||
industry: "",
|
||||
registered_capital: "",
|
||||
paid_capital: "",
|
||||
establish_date: "",
|
||||
administrative_division: "",
|
||||
enterprise_type: "有限责任公司",
|
||||
taxpayer_qualification: "一般纳税人",
|
||||
business_scope: "",
|
||||
address: "",
|
||||
status: "1",
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
remark: "",
|
||||
invoice_title: "",
|
||||
tax_number: "",
|
||||
bank_name: "",
|
||||
bank_account: "",
|
||||
registered_address: "",
|
||||
registered_phone: "",
|
||||
});
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
const form = reactive(defaultForm());
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1:基本信息
|
||||
{
|
||||
customer_name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
|
||||
customer_name: [
|
||||
{ required: true, message: "请输入客户名称", trigger: "blur" },
|
||||
],
|
||||
customer_type: [
|
||||
{ required: true, message: "请选择客户类型", trigger: "change" },
|
||||
],
|
||||
},
|
||||
// 步骤2:联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
contact_person: [
|
||||
{ required: true, message: "请输入联系人", trigger: "blur" },
|
||||
],
|
||||
contact_phone: [
|
||||
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
// 步骤3:开票信息(无必填)
|
||||
{},
|
||||
// 步骤4:备注信息(无必填)
|
||||
{}
|
||||
]
|
||||
{},
|
||||
];
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
const merged = {};
|
||||
stepRules.forEach((rules) => {
|
||||
Object.assign(merged, rules);
|
||||
});
|
||||
return merged;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
activeStep.value = 0;
|
||||
internalId.value = null;
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
isEdit.value = true;
|
||||
internalId.value = props.editData.id;
|
||||
Object.assign(form, props.editData);
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
isEdit.value = false;
|
||||
Object.assign(form, defaultForm());
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
formRef.value?.resetFields();
|
||||
activeStep.value = 0;
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
const currentRules = stepRules[activeStep.value];
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
await formRef.value.validateField(Object.keys(currentRules));
|
||||
} catch (e) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
activeStep.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
activeStep.value--;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (!formRef.value) return;
|
||||
if (isDraft) {
|
||||
if (!form.customer_name || form.customer_name.trim() === '') {
|
||||
ElMessage.warning('客户名称不能为空')
|
||||
return
|
||||
if (!form.customer_name || form.customer_name.trim() === "") {
|
||||
ElMessage.warning("客户名称不能为空");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
await formRef.value.validate();
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
const fields = Object.keys(stepRules[i]);
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
if (!form[field] || form[field] === "") {
|
||||
activeStep.value = i;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
submitting.value = true;
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 };
|
||||
if (internalId.value) {
|
||||
await updateCustomer(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
await updateCustomer(internalId.value, payload);
|
||||
ElMessage.success(isDraft ? "草稿已保存" : "更新成功");
|
||||
} else {
|
||||
const res = await createCustomer(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
const res = await createCustomer(payload);
|
||||
ElMessage.success(isDraft ? "草稿已保存" : "创建成功");
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
internalId.value = res.data.id;
|
||||
isEdit.value = true;
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
emit("success");
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
handleClose();
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
ElMessage.error(e.message || "操作失败");
|
||||
} finally {
|
||||
submitting.value = false
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
handleSave(true);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in new issue
Block a user