提交表单的数据中增加customer_id(客户归属)
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user