提交表单的数据中增加customer_id（客户归属）

src/components/ticket/TicketForm.vue

@@ -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, // 外部客户单位列表
+  customers: Array,
-  customerEmployees: Array, // 外部客户员工列表
+  customerEmployees: Array,
-  staffs: 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 [];
+  if (!form.customer_id) return [];
-  return props.customerEmployees.filter(
+  return props.customerEmployees.filter((emp) => emp.customer_id === form.customer_id);
-    (emp) => emp.customer_id === current_customer_id.value
-  );
 });
 
-// 单位切换时清空人员
+// 单位切换时，重置运营人员选择
 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
+
-          const employee = props.customerEmployees.find(
+          // 回显补充：如果传入的 formData 没有带 customer_id，通过 operator 反查补全
-            (e) => e.employee_name === props.formData.operator
+          if (!form.customer_id && props.formData.operator) {
-          );
+            const employee = props.customerEmployees.find(
-          if (employee) {
+              (e) => e.employee_name === props.formData.operator
-            current_customer_id.value = employee.customer_id;
+            );
+            if (employee) {
+              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: 0 24px;
-  padding-right: 24px;
   font-weight: 600;
 }
-
-:deep(.el-form-item) {
-  margin-bottom: 18px;
-}
-
-:deep(.el-form-item__label) {
-  padding-bottom: 4px !important;
-  font-size: 13px;
-}
 </style>