三防责任人编辑

src/utils/olMap/olMap.ts

@@ -266,7 +266,8 @@ export class olMap {
       // 定义样式
       const style = new Style({
         image: new Icon({
-          anchor: [0.5, point.size[1]],
+          anchor: [0.5, 0.5],
+          scale: 0.146,
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           src: point.icon

src/views/setting/PreventionResponsible/Edit.vue

@@ -45,27 +45,27 @@
           <el-form-item label="选择类别：" prop="category">
             <div>
               <el-checkbox-group v-model="checkboxGroup2" @change="changeChildType">
-                <el-checkbox-button v-for="type in category" :key="type" :value="type" @click="deleteOne(type)">
+                <el-checkbox-button v-for="type in category" :key="type" :value="type" @change="deleteOne(type)">
                   {{ type.label }}
                 </el-checkbox-button>
               </el-checkbox-group>
-              <el-tabs v-model="childType" class="demo-tabs" @tab-click="handleClick">
+              <el-tabs v-model="childType" class="demo-tabs">
                 <el-tab-pane v-for="item in checkboxGroup2" :label="item.label" :name="item.label">
-                  <el-checkbox-group v-model="item.checked" @change="getSubOption()">
+                  <el-checkbox-group v-model="item.checked" @change="handleFormFormat">
                     <el-checkbox-button v-for="item2 in item.children" :key="item2.id" :value="item2.id">
                       {{ item2.label }}
                     </el-checkbox-button>
                   </el-checkbox-group>
                   <div v-if="item.label === '成员单位'">
                     <span>请填写单位名称：</span>
-                    <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
+                    <el-input v-model="item.dept_name" style="width: 240px" @change="handleFormFormat" />
                   </div>
                   <div v-if="item.label === '重点部门'">
                     <span>请填写单位名称：</span>
-                    <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
+                    <el-input v-model="item.dept_name" style="width: 240px" @change="handleFormFormat" />
                     <div style="display: flex">
                       <span>请选择责任类别：</span>
-                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                      <el-checkbox-group v-model="item.other_type_id" @change="handleFormFormat">
                         <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '5'" :key="item2" :value="item2.id">
                           {{ item2.label }}
                         </el-checkbox-button>
@@ -74,10 +74,10 @@
                   </div>
                   <div v-if="item.label === '水利工程'">
                     <span>请填写单位名称：</span>
-                    <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
+                    <el-input v-model="item.dept_name" style="width: 240px" @change="handleFormFormat" />
                     <div style="display: flex">
                       <span v-if="item.label === '水利工程'">请选择责任类别：</span>
-                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                      <el-checkbox-group v-model="item.other_type_id" @change="handleFormFormat">
                         <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '7'" :key="item2" :value="item2.id">
                           {{ item2.label }}
                         </el-checkbox-button>
@@ -86,7 +86,7 @@
                   </div>
                   <div v-if="item.label === '抢险队伍'" style="display: flex">
                     <span>请选择责任类别：</span>
-                    <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                    <el-checkbox-group v-model="item.other_type_id" @change="handleFormFormat">
                       <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '9'" :key="item2" :value="item2.id">
                         {{ item2.label }}
                       </el-checkbox-button>
@@ -94,7 +94,7 @@
                   </div>
                   <div v-if="item.label === '地质灾害'">
                     <span>请填写隐患点名称：</span>
-                    <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="memberUnits" />
+                    <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="handleFormFormat" />
                   </div>
                   <div v-if="item.label === '其他'">
                     <span>请填写具体类型：</span>
@@ -102,7 +102,7 @@
                       v-model="item.other_type_2_name"
                       style="width: 240px"
                       placeholder="请填写责任类型，如：重点单位等"
-                      @change="memberUnits"
+                      @change="handleFormFormat"
                     />
                   </div>
                 </el-tab-pane>
@@ -120,13 +120,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, toRefs, watch } from 'vue';
-import { ElMessage, TabsPaneContext } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import { updateData, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
+import { deepClone } from '@/utils';
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const category = ref([]);
 const checkboxGroup2 = ref([]);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps<{
   id: string | number;
 }>();
@@ -157,27 +157,6 @@ const data = reactive({
     area_code: [{ required: true, message: '行政区划不能为空', trigger: 'change' }]
   }
 });
-const prepareUpdatePayload = () => {
-  const payload = {
-    id: form.value.id,
-    unit_name: form.value.unit_name,
-    name: form.value.name,
-    area_code: form.value.area_code,
-    position: form.value.position,
-    phone: form.value.phone,
-    telephone: `${form.value.office_phone_prefix}-${form.value.office_phone_number}`,
-    order_num: form.value.order_num,
-    type_list: form.value.type_list.map(item => ({
-      type_parent_id: item.type_parent_id,
-      children: item.children,
-      dept_name: item.dept_name || null,
-      children2: item.children2 || [],
-      other_type_2_name: item.other_type_2_name || null,
-      denger_point_name: item.denger_point_name || null
-    }))
-  };
-  return payload;
-};
 const { form } = toRefs(data);
 const emits = defineEmits(['close']);
 const formRef = ref<InstanceType<typeof ElForm> | null>(null);
@@ -195,6 +174,7 @@ const getOptions2 = () => {
     data3.value = '';
     form.value.area_code = undefined;
     options2.value = undefined;
+    options3.value = undefined;
     return;
   } else {
     getZoning(data1.value).then((res) => {
@@ -224,15 +204,6 @@ const getAreaContent = () => {
     form.value.area_code = data3.value;
   }
 };
-watch(data1, () => {
-  data2.value = '';
-  data3.value = '';
-  options2.value = undefined;
-});
-watch(data2, () => {
-  data3.value = '';
-  options3.value = undefined;
-});
 const getCategory = () => {
   getPersonRespon().then((res) => {
     category.value = res.rows;
@@ -245,148 +216,151 @@ const changeChildType = () => {
     let index = checkboxGroup2.value.findIndex((item2) => item2.id === item.id);
     if (index === -1) {
       delete item.checked;
+      delete item.other_type_id;
+      handleDeleteAttribute(item);
     }
   });
-  childType.value = checkboxGroup2.value[checkboxGroup2.value.length - 1].label;
+  childType.value = checkboxGroup2.value.length ? checkboxGroup2.value[checkboxGroup2.value.length - 1].label : '';
 };
 
-const getSubOption = () => {
-  const obj = {
-    type_parent_id: '',
-    children: ''
-  };
-  for (let i = 0; i < checkboxGroup2.value.length; i++) {
-    obj.type_parent_id = checkboxGroup2.value[i].id;
-    obj.children = checkboxGroup2.value[i].checked;
-    form.value.type_list[i] = obj;
+const deleteOne = (type) => {
+  const index = form.value.type_list.findIndex((item) => item.id === type.id);
+  if (index !== -1) {
+    form.value.type_list.splice(index, 1);
+    if (!!type.dept_name) {
+      delete type.dept_name;
+    }
+    if (!!type.denger_point_name) {
+      delete type.denger_point_name;
+    }
+    if (!!type.other_type_2_name) {
+      delete type.other_type_2_name;
+    }
   }
 };
-const memberUnits = () => {
-  let datatemp = [];
+
+const handleFormFormat = () => {
+  const data = [];
   for (let i = 0; i < checkboxGroup2.value.length; i++) {
-    if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].children.length > 0) {
-      const obj = {
-        type_parent_id: checkboxGroup2.value[i].id,
-        children: checkboxGroup2.value[i].checked
-      };
-      if (['4', '5', '7'].includes(checkboxGroup2.value[i].id) && checkboxGroup2.value[i].dept_name) {
-        //成员单位
-        obj.dept_name = checkboxGroup2.value[i].dept_name;
-      } else if (checkboxGroup2.value[i].id === '10' && checkboxGroup2.value[i].denger_point_name) {
-        //地质灾害
-        obj.denger_point_name = checkboxGroup2.value[i].denger_point_name;
-      } else if (checkboxGroup2.value[i].id === '11' && checkboxGroup2.value[i].other_type_2_name) {
-        //其他
-        obj.other_type_2_name = checkboxGroup2.value[i].other_type_2_name;
-      }
-      datatemp.push(obj);
+    if (!checkboxGroup2.value[i].checked || checkboxGroup2.value[i].checked.length === 0) {
+      continue;
+    }
+    let obj = deepClone(checkboxGroup2.value[i]);
+    obj.type_parent_id = obj.id;
+    delete obj.id;
+    if (obj.checked && obj.checked.length > 0) {
+      obj.children = obj.checked;
+      delete obj.checked;
+    } else {
+      delete obj.children;
     }
+    if (obj.other_type_id && obj.other_type_id.length > 0) {
+      obj.children2 = obj.other_type_id;
+      delete obj.other_type_id;
+    } else {
+      delete obj.children2;
+    }
+    data.push(obj);
   }
-  form.value.type_list = datatemp;
+  form.value.type_list = data;
 };
 
-const deleteOne = (type) => {
-  const index = form.value.type_list.findIndex((item) => item.type_parent_id === type.id);
-  if (index !== -1) {
-    form.value.type_list.splice(index, 1);
+const handleDeleteAttribute = (obj) => {
+  if (!['4', '5', '7'].includes(obj.id)) {
+    delete obj.dept_name;
   }
-};
-const getChOption = () => {
-  debugger;
-  let datatemp = [];
-  for (let i = 0; i < checkboxGroup2.value.length; i++) {
-    if (!!checkboxGroup2.value[i] && checkboxGroup2.value[i].other_type_id.length > 0) {
-      const obj = {
-        type_parent_id: checkboxGroup2.value[i].id,
-        other_type_id: checkboxGroup2.value[i].other_type_id
-      };
-      datatemp.push(obj);
-    }
+  if (obj.id !== '10') {
+    delete obj.denger_point_name;
+  }
+  if (obj.id !== '11') {
+    delete obj.other_type_2_name;
   }
-  form.value.type_list = datatemp;
 };
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
+const handleAddAttribute = (obj, item) => {
+  if (['4', '5', '7'].includes(obj.id)) {
+    item.dept_name = obj.dept_name;
+  }
+  if (obj.id === '10') {
+    item.denger_point_name = obj.denger_point_name;
+  }
+  if (obj.id === '11') {
+    item.other_type_2_name = obj.other_type_2_name;
+  }
 };
-const personType = ref([]);
-for (const i in category.value) {
-  personType.value.push(category.value[i].label);
-}
-
 const fetchData = async () => {
   const response = await responsibleDetail(props.id);
   if (response.code === 200) {
-    form.value = { ...response.data };
-
-    // 分割办公电话为区号和电话号码
-    if (response.data.telephone) {
-      const [prefix, number] = response.data.telephone.split('-');
-      form.value.office_phone_prefix = prefix;
-      form.value.office_phone_number = number;
-    }
+    const data = response.data;
+    data.type_list.forEach((item) => {
+      item.checked = item.children;
+    });
+    form.value = data;
+    getPersonRespon().then((res2) => {
+      data.type_list.forEach((item) => {
+        delete item.labelData;
+        item.id = item.type_parent_id;
+        item.id = item.type_parent_id;
+        item.label = item.type_parent;
+        handleDeleteAttribute(item);
+        delete item.type_parent_id;
+        delete item.type_parent;
+        delete item.other_type_label;
+      });
+      res2.rows.forEach((item) => {
+        let index = data.type_list.findIndex((item2) => item2.id === item.id);
+        delete item.css_class;
+        if (index > -1) {
+          let obj = data.type_list[index];
+          item.checked = obj.checked;
+          obj.children = item.children;
+          if (!!obj.children2) {
+            obj.other_type_id = deepClone(obj.children2);
+            item.other_type_id = deepClone(obj.children2);
+            obj.children2 = item.children2;
+            item.children2 = item.children2;
+          }
+          handleAddAttribute(obj, item);
+        }
+      });
+      category.value = res2.rows;
+      checkboxGroup2.value = data.type_list;
+      changeChildType();
+      handleFormFormat();
+      // 分割办公电话为区号和电话号码
+      if (response.data.telephone) {
+        const [prefix, number] = response.data.telephone.split('-');
+        form.value.office_phone_prefix = prefix;
+        form.value.office_phone_number = number;
+      }
 
-    // 设置行政区划的默认值
-    setDefaultAreaSelection(response.data.area_list, response.data.area_code);
+      // 设置行政区划的默认值
+      setDefaultAreaSelection(response.data.area_list, response.data.area_code);
+    });
   } else {
     ElMessage.error('未找到相关数据');
   }
 };
 const setDefaultAreaSelection = (areaList, areaCode) => {
-  let selectedAreas = [];
-
-  // 逆向遍历 area_list 找到 area_code 对应的所有上级区域
-  for (let i = areaList.length - 1; i >= 0; i--) {
-    const area = areaList[i];
-    if (area.id === areaCode) {
-      selectedAreas.push({ id: area.id, label: area.label });
-      break;
-    }
-  }
-
-  // 如果找到了目标区域，则依次查找其上级区域
-  while (selectedAreas.length < 3 && areaList.length > 0) {
-    const lastSelected = selectedAreas[selectedAreas.length - 1];
-    const parent = areaList.find(area => area.id !== lastSelected.id && areaList.some(child => child.id === lastSelected.id));
-    if (parent) {
-      selectedAreas.push({ id: parent.id, label: parent.label });
-    } else {
-      break;
-    }
-  }
-
-  // 将找到的区域信息反向排序，以确保按照省市区的顺序填充到表单中
-  selectedAreas.reverse();
-
-  // 更新下拉框的选择状态
-  [data1.value, data2.value, data3.value] = selectedAreas.map(area => area.id);
+  data1.value = areaList[1] ? areaList[1].id : '';
+  data2.value = areaList[2] ? areaList[2].id : '';
+  data3.value = areaList[3] ? areaList[3].id : '';
   form.value.area_code = areaCode;
-
-  // 确保下拉框选项也被正确加载
-  getOptions2();
-  getOptions3();
+  getZoning(data1.value).then((res) => {
+    options2.value = res.data;
+  });
+  getZoning(data2.value).then((res) => {
+    options3.value = res.data;
+  });
 };
 const submitNewPerson = async () => {
-  try {
-    // 表单验证
-    await formRef.value.validate();
-
-    // 准备更新请求的负载
-    const payload = prepareUpdatePayload();
-
-    // 发送更新请求
-    const response = await updateData(payload);
-
-    if (response.code === 200) {
-      ElMessage.success('更新成功');
-      goBack();
-      emits('refresh');
-    } else {
-      ElMessage.error('更新失败，请重试');
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      updateData(form.value).then((res) => {
+        proxy.$modal.msgSuccess('更新成功');
+        goBack();
+      });
     }
-  } catch (error) {
-    console.error(error);
-    ElMessage.error('验证未通过或请求失败');
-  }
+  });
 };
 onMounted(() => {
   getOptions1(2);