提交表单的数据中增加customer_id(客户归属)

This commit is contained in:
2026-02-28 17:44:57 +08:00
parent 9cd3fd3194
commit a4a54d3e38

View File

@@ -19,7 +19,7 @@
<div class="section-title column-full">权责分配</div>
<el-form-item label="客户单位 (外方)" prop="customer_id" class="client-item">
<el-select v-model="current_customer_id" placeholder="请选择单位" style="width: 100%" filterable
<el-select v-model="form.customer_id" placeholder="请选择单位" style="width: 100%" filterable
@change="handleCustomerChange">
<el-option v-for="item in customers" :key="item.customer_id" :label="item.company_name"
:value="item.customer_id" />
@@ -28,7 +28,7 @@
<el-form-item label="运营人员 (外方)" prop="operator" class="client-item">
<el-select v-model="form.operator" placeholder="请选择人员" style="width: 100%" filterable
:disabled="!current_customer_id">
:disabled="!form.customer_id">
<el-option v-for="item in filteredEmployees" :key="item.employee_id" :label="item.employee_name"
:value="item.employee_name" />
</el-select>
@@ -77,69 +77,71 @@ const emit = defineEmits(["update:modelValue", "submit"]);
const props = defineProps({
modelValue: Boolean,
formData: Object,
customers: Array, // 外部客户单位列表
customerEmployees: Array, // 外部客户员工列表
staffs: Array, // 我方员工列表
customers: Array,
customerEmployees: Array,
staffs: Array,
isEditing: Boolean,
});
// --- 响应式变量 ---
const dialogVisible = ref(false);
const formRef = ref();
const submitting = ref(false);
const current_customer_id = ref(null); // 级联用的中间变量
// 核心表单对象:customer_id 已包含在内
const form = reactive({
website: "",
operator: "",
customer_id: null,
staff_id: null,
is_complete: "未分配",
remark: "",
});
// 使用 computed 动态切换校验逻辑
// --- 校验规则 ---
const rules = computed(() => {
const baseRules = {
website: [{ required: true, message: "请输入网站地址", trigger: "blur" }],
customer_id: [{ required: true, message: "请选择客户单位", trigger: "change" }],
operator: [{ required: true, message: "请选择运营人员", trigger: "change" }],
};
// 仅在编辑模式下,将 staff_id 设为必填
if (props.isEditing) {
baseRules.staff_id = [{ required: true, message: "请选择负责人", trigger: "change" }];
}
return baseRules;
});
// 核心逻辑:级联过滤
// --- 逻辑:根据选择的单位过滤人员 ---
const filteredEmployees = computed(() => {
if (!current_customer_id.value) return [];
return props.customerEmployees.filter(
(emp) => emp.customer_id === current_customer_id.value
);
if (!form.customer_id) return [];
return props.customerEmployees.filter((emp) => emp.customer_id === form.customer_id);
});
// 单位切换时清空人员
// 单位切换时,重置运营人员选择
const handleCustomerChange = () => {
form.operator = "";
};
// 监听弹窗显隐与数据回显
// --- 监听弹窗与回显 ---
watch(
() => props.modelValue,
(val) => {
dialogVisible.value = val;
if (val) {
nextTick(() => {
resetForm();
resetForm(); // 先重置
if (props.isEditing && props.formData) {
// 深度合并数据
Object.assign(form, props.formData);
// 回显逻辑:根据 operator 姓名反查所属 customer_id
// 回显补充:如果传入的 formData 没有带 customer_id,通过 operator 反查补全
if (!form.customer_id && props.formData.operator) {
const employee = props.customerEmployees.find(
(e) => e.employee_name === props.formData.operator
);
if (employee) {
current_customer_id.value = employee.customer_id;
form.customer_id = employee.customer_id;
}
}
}
});
@@ -152,12 +154,13 @@ watch(
(val) => emit("update:modelValue", val)
);
// --- 表单重置与提交 ---
const resetForm = () => {
if (formRef.value) formRef.value.resetFields();
current_customer_id.value = null;
Object.assign(form, {
website: "",
operator: "",
customer_id: null,
staff_id: null,
is_complete: "未分配",
remark: "",
@@ -172,17 +175,15 @@ const handleSubmit = async () => {
await formRef.value.validate();
submitting.value = true;
// 复制一份表单数据进行处理
// 复制提交数据,如果是新增,确保 staff_id 为空
const submitData = { ...form };
// 如果是新增模式,强制将 staff_id 设为 null
if (!props.isEditing) {
submitData.staff_id = null;
}
emit("submit", submitData);
} catch (e) {
console.log("表单校验失败", e);
console.error("表单验证失败", e);
} finally {
submitting.value = false;
}
@@ -190,6 +191,7 @@ const handleSubmit = async () => {
</script>
<style scoped>
/* 保持你原本的样式不变 */
:deep(.modern-dialog) {
border-radius: 12px;
overflow: hidden;
@@ -227,36 +229,14 @@ const handleSubmit = async () => {
grid-column: span 2;
}
:deep(.client-item .el-form-item__label) {
color: #909399 !important;
}
:deep(.owner-item .el-form-item__label) {
color: #409eff !important;
}
.modern-radio-group {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
}
.dialog-footer {
padding-top: 10px;
}
.submit-btn {
padding-left: 24px;
padding-right: 24px;
padding: 0 24px;
font-weight: 600;
}
:deep(.el-form-item) {
margin-bottom: 18px;
}
:deep(.el-form-item__label) {
padding-bottom: 4px !important;
font-size: 13px;
}
</style>