fix(shop-information): 修复运营信息显示和编辑问题

-将 operatorName 改为 operatorOption，优化变量命名
- 修复编辑页面运营信息回显问题- 更新运营信息获取和传递方式
- 优化运营信息选择组件

src/views/shop-information/components/EditDrawer.vue

@@ -18,18 +18,18 @@ const props = defineProps<{
   platformNumber: string;
   formSelect: { country: string[], line: string[] };
   companySelect: any;
-  operatorName: { id: number, name: string }[]
+  operatorOption: { id: number, name: string }[]
 }>();
-const { gridOptions, platformNumber, formSelect, companySelect, operatorName } = props;
+const { gridOptions, platformNumber, formSelect, companySelect, operatorOption } = props;
 
 const emit = defineEmits([ 'refresh' ]);
 
 onBeforeMount(() => {
   replaceCol();
-  console.log('operatorName=> ', operatorName);
 });
 
 interface RuleForm {
+  operator: string[];
   operatorName: string[];
   platformNumber: string;
   platformName: string;
@@ -59,6 +59,7 @@ interface RuleForm {
 
 const ruleFormRef = ref<FormInstance>();
 const ruleForm = reactive<RuleForm>({
+  operator: [],
   operatorName: [],
   platformNumber: '',
   platformName: '',
@@ -160,6 +161,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
     if (valid) {
+      ruleForm.operator = ruleForm.operatorName;
       await useResponse({ id: gridOptions.data[0].id, partial: 1, formData: ruleForm }, api.updateShopDetail, loading);
       isOpen.value = false;
       ElMessage.success('编辑成功');
@@ -178,7 +180,19 @@ const resetForm = (formEl: FormInstance | undefined) => {
 function replaceCol() {
   const result = Object.keys(ruleForm).reduce((acc, key) => {
     if (key in gridOptions.data[0]) {
-      acc[key] = gridOptions.data[0][key];
+      // 特殊处理 operatorName 字段
+      if (key === 'operatorName') {
+        const names = gridOptions.data[0][key].split(','); // 以逗号分隔
+        const ids = names
+            .map((name: any) => {
+              const operator = operatorOption.find(opt => opt.name === name.trim()); // 去除多余空格并查找
+              return operator ? operator.id : null;
+            })
+            .filter((id: any) => id !== null); // 过滤掉未找到的id
+        acc[key] = ids; // 将找到的所有id赋值给operatorName
+      } else {
+        acc[key] = gridOptions.data[0][key];
+      }
     }
     return acc;
   }, {} as { [key: string]: any });
@@ -200,8 +214,8 @@ function xx() {
         label-width="auto"
         status-icon>
       <el-form-item label="运营" prop="operatorName">
-        <el-select multiple collapse-tags collapse-tags-tooltip v-model="ruleForm.operatorName" @change="xx">
-          <el-option v-for="item in operatorName" :key="item.id" :label="item.name" :value="item.id">
+        <el-select v-model="ruleForm.operatorName" collapse-tags collapse-tags-tooltip multiple @change="xx">
+          <el-option v-for="item in operatorOption" :key="item.id" :label="item.name" :value="item.id">
           </el-option>
         </el-select>
       </el-form-item>

src/views/shop-information/components/ShopDetail.vue

@@ -69,7 +69,7 @@ const formSelect = ref<{ country: string[], line: string[] }>({
   line: []
 });
 
-const operatorName = ref<{ id: number; name: string }[]>([]);
+const operatorOption = ref<{ id: number; name: string }[]>([]);
 
 // const companySelect = ref<{ id: string, company: string }>({
 //   id: '',
@@ -129,7 +129,7 @@ function handleRefresh() {
 
 async function fetchOperator() {
   const res = await useResponse({}, api.getOperator);
-  operatorName.value = res.data;
+  operatorOption.value = res.data;
 }
 
 </script>
@@ -270,7 +270,7 @@ async function fetchOperator() {
         :companySelect
         :formSelect
         :gridOptions="gridOptions"
-        :operatorName
+        :operatorOption
         :platformNumber
         @refresh="handleRefresh"
     />