更新出多选功能

src/views/company/edit.vue

@@ -32,7 +32,7 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="7">
             <el-form-item label="公司类型" prop="company_type">
               <el-select
                 :disabled="isDisabled"
@@ -175,6 +175,21 @@
               ></el-input>
             </el-form-item>
           </el-col>
+          <el-col :span="23">
+            <el-form-item label="负责区域" prop="region">
+              <el-checkbox-group
+                v-model="regionList"
+                @change="handleCheckedCitiesChange"
+              >
+                <el-checkbox
+                  v-for="city in datas[regionType + 'Options']"
+                  :key="city[regionType + '_name']"
+                  :label="city[regionType + '_code']"
+                  >{{ city[regionType + "_name"] }}</el-checkbox
+                >
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-col>
       <el-col :span="24" class="el-card pt-6">
@@ -777,6 +792,22 @@ function openCompany() {
   isCompany.value = true;
 }
 
+// 当前选择的负责区域列表
+const regionList = ref([]);
+// 当前应当显示的区域
+const regionType = ref("");
+watch(
+  () => formData[regionType.value],
+  (newValue, oldValue) => {
+    regionList.value = [];
+    regionList.value.push(newValue);
+  }
+);
+// 多选区域
+const handleCheckedCitiesChange = (value: string[]) => {
+  console.log(value);
+};
+
 // 获取详情
 const setFormData = async (data: Record<any, any>) => {
   console.log(formData);
@@ -883,6 +914,7 @@ function company_type_change(type: any) {
     formData.street = "";
     formData.village = "";
     formData.brigade = "";
+    regionType.value = "area";
     return true;
   }
   //镇
@@ -895,6 +927,7 @@ function company_type_change(type: any) {
     formData.brigade = "";
     partyDisabled.value = true;
     indexType.value = 30;
+    regionType.value = "street";
     return true;
   }
   if (type != 16) {
@@ -907,6 +940,7 @@ function company_type_change(type: any) {
     isVillage.value = true;
     isBrigade.value = false;
     formData.brigade = "";
+    regionType.value = "village";
     return true;
   }
 
@@ -916,6 +950,7 @@ function company_type_change(type: any) {
     isStreet.value = true;
     isVillage.value = true;
     isBrigade.value = true;
+    regionType.value = "brigade";
     return true;
   }
 }
@@ -1030,7 +1065,6 @@ const getDetails = async () => {
   //     fileList.value[0].url = data.contract?.file
   //     fileList.value[0].name = '合同文件'
   // }
-  console.log(formData);
   company_type_change(formData.company_type);
 };
 const clickdelete = (index) => {
@@ -1058,6 +1092,7 @@ const create = async () => {
   data.qualification.other_qualifications = JSON.stringify(
     data.qualification.other_qualifications
   );
+  data[regionType.value] = regionList.value;
   if (route.query.id) {
     await apiCompanyEdit(data);
   } else {