Bläddra i källkod

Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/types/components.d.ts
yangyuxuan 5 månader sedan
förälder
incheckning
0c8caa5a4d

+ 4 - 4
src/hooks/AMap/useAMap.ts

@@ -310,12 +310,12 @@ export function useAMap(options) {
           const polygonPath = feature.geometry.coordinates[0].map((coord) => {
             return [coord[0], coord[1]];
           });
-          const polygon = new AMap.Polygon({
+          const polygon = new AMap.Polyline({
             path: polygonPath,
             strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
             strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
             strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-            fillOpacity: 0
+            clickable: false
           });
           maskPolygon2.push(polygon);
           map.add(polygon);
@@ -328,13 +328,13 @@ export function useAMap(options) {
             });
             const outerPath = polygonPath[0];
             const innerPaths = polygonPath.slice(1);
-            const polygon = new AMap.Polygon({
+            const polygon = new AMap.Polyline({
               path: outerPath,
               holes: innerPaths,
               strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
               strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
               strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-              fillOpacity: 0
+              clickable: false
             });
             maskPolygon2.push(polygon);
             map.add(polygon);

+ 29 - 0
src/types/components.d.ts

@@ -24,14 +24,24 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -41,28 +51,44 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -74,6 +100,9 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

+ 2 - 1
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

+ 143 - 142
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" placeholder="如:北江大堰" @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 { createNewPerson, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
+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;
 }>();
@@ -145,7 +145,9 @@ const data = reactive({
     position: '',
     phone: '',
     order_num: '',
-    type_list: []
+    type_list: [],
+    office_phone_prefix: '',
+    office_phone_number: ''
   },
   rules: {
     name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
@@ -172,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) => {
@@ -201,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;
@@ -222,145 +216,152 @@ 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;
+    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);
+    });
   } else {
     ElMessage.error('未找到相关数据');
   }
 };
-
-// const submitNewPerson = async () => {
-//   // 打印当前表单值用于调试
-//   console.log('Form values before submit:', form.value);
-//
-//   // 验证表单
-//   try {
-//     if (!formRef.value) {
-//       throw new Error('Form reference is not set');
-//     }
-//
-//     const valid = await formRef.value.validate((valid, invalidFields) => {
-//       if (!valid) {
-//         console.error('Validation failed:', invalidFields); // 输出未通过验证的字段
-//       }
-//       return valid;
-//     });
-//
-//     if (!valid) {
-//       proxy.$modal.msgError('请检查输入信息');
-//       return;
-//     }
-//   } catch (error) {
-//     console.error('Validation error:', error);
-//     proxy.$modal.msgError('请检查输入信息');
-//     return;
-//   }
-//
-//   // 构建请求体
-//   const requestBody = {
-//     unit_name: form.value.unit_name,
-//     name: form.value.name,
-//     area_code: form.value.area_code,
-//     position: form.value.position,
-//     phone: form.value.phone,
-//     order_num: form.value.order_num,
-//     type_list: checkboxGroup2.value
-//       .map((item) => ({
-//         type_parent_id: item.id,
-//         children: item.checked || [],
-//         dept_name: item.dept_name || null,
-//         other_type_2_name: item.other_type_2_name || null,
-//         denger_point_name: item.denger_point_name || null
-//       }))
-//       .filter((item) => Object.values(item).some((val) => val !== null && val !== undefined))
-//   };
-//
-//   buttonLoading.value = true; // 开始加载状态
-//
-//   try {
-//     // 发送请求
-//     await createNewPerson(requestBody);
-//     proxy.$modal.msgSuccess('新增成功');
-//     emits('close', true); // 关闭对话框并通知父组件
-//     emits('refresh');
-//   } catch (error) {
-//     console.error('Error creating new person:', error);
-//     proxy.$modal.msgError('新增失败,请稍后再试或联系管理员');
-//   } finally {
-//     buttonLoading.value = false; // 结束加载状态
-//   }
-// };
-
+const setDefaultAreaSelection = (areaList, areaCode) => {
+  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;
+  getZoning(data1.value).then((res) => {
+    options2.value = res.data;
+  });
+  getZoning(data2.value).then((res) => {
+    options3.value = res.data;
+  });
+};
+const submitNewPerson = async () => {
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      updateData(form.value).then((res) => {
+        proxy.$modal.msgSuccess('更新成功');
+        goBack();
+      });
+    }
+  });
+};
 onMounted(() => {
   getOptions1(2);
   getCategory();

+ 79 - 144
src/views/setting/PreventionResponsible/add.vue

@@ -33,9 +33,9 @@
           </el-form-item>
           <el-form-item label="办公电话:" prop="office_phone">
             <div class="phone-input-container">
-              <el-input v-model="form.office_phone_prefix" placeholder="例如:0668" style="width: 120px;"></el-input>
+              <el-input v-model="form.office_phone_prefix" placeholder="例如:0668" style="width: 120px"></el-input>
               <span class="phone-input-separator">-</span>
-              <el-input v-model="form.office_phone_number" placeholder="例如:88888888" style="width: 200px;"></el-input>
+              <el-input v-model="form.office_phone_number" placeholder="例如:88888888" style="width: 200px"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="排位顺序:" prop="order_num">
@@ -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" placeholder="如:茂名供电局" @change="memberUnits" />
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:茂名供电局" @change="handleFormFormat" />
                   </div>
                   <div v-if="item.label === '重点部门'">
                     <span>请填写单位名称:</span>
-                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:茂名市中心小学" @change="memberUnits" />
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:茂名市中心小学" @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" placeholder="如:北江大堰" @change="memberUnits" />
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如:北江大堰" @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>
@@ -122,7 +122,8 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue';
 import type { TabsPaneContext } from 'element-plus';
-import { createNewPerson, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
+import { createNewPerson, getPersonRespon, getZoning, responsibleDetail, updateData } from '@/api/PreventionResponsible';
+import { deepClone } from '@/utils';
 
 const category = ref([]);
 const checkboxGroup2 = ref([]);
@@ -144,7 +145,9 @@ const data = reactive({
     position: '',
     phone: '',
     order_num: '',
-    type_list: []
+    type_list: [],
+    office_phone_prefix: '',
+    office_phone_number: ''
   },
   rules: {
     name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
@@ -171,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) => {
@@ -200,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;
@@ -221,150 +216,90 @@ 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;
-};
-
-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 memberUnits = () => {
-  let datatemp = [];
-  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);
-    }
-  }
-  form.value.type_list = datatemp;
+  childType.value = checkboxGroup2.value.length ? checkboxGroup2.value[checkboxGroup2.value.length - 1].label : '';
 };
 
 const deleteOne = (type) => {
-  const index = form.value.type_list.findIndex((item) => item.type_parent_id === type.id);
+  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 getChOption = () => {
-  debugger;
-  let datatemp = [];
+const handleFormFormat = () => {
+  const data = [];
   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 (!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;
-};
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
+  form.value.type_list = data;
 };
+
 const personType = ref([]);
 for (const i in category.value) {
   personType.value.push(category.value[i].label);
 }
 
-const submitNewPerson = async () => {
-  // 打印当前表单值用于调试
-  console.log('Form values before submit:', form.value);
-
-  // 验证表单
-  try {
-    if (!formRef.value) {
-      throw new Error('Form reference is not set');
-    }
+const handleDeleteAttribute = (obj) => {
+  if (!['4', '5', '7'].includes(obj.id)) {
+    delete obj.dept_name;
+  }
+  if (obj.id !== '10') {
+    delete obj.denger_point_name;
+  }
+  if (obj.id !== '11') {
+    delete obj.other_type_2_name;
+  }
+};
 
-    const valid = await formRef.value.validate((valid, invalidFields) => {
-      if (!valid) {
-        console.error('Validation failed:', invalidFields); // 输出未通过验证的字段
+const submitNewPerson = async () => {
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true; // 开始加载状态
+      const data = deepClone(form.value);
+      if (!data.order_num) {
+        data.order_num = -1;
       }
-      return valid;
-    });
-
-    if (!valid) {
-      proxy.$modal.msgError('请检查输入信息');
-      return;
+      createNewPerson(data).then((res) => {
+        proxy.$modal.msgSuccess('新增成功');
+        emits('close');
+      }).finally(() => {
+        buttonLoading.value = false; // 结束加载状态
+      });
     }
-  } catch (error) {
-    console.error('Validation error:', error);
-    proxy.$modal.msgError('请检查输入信息');
-    return;
-  }
-
-  // 构建请求体
-  const requestBody = {
-    unit_name: form.value.unit_name,
-    name: form.value.name,
-    area_code: form.value.area_code,
-    position: form.value.position,
-    phone: form.value.phone,
-    order_num: form.value.order_num,
-    type_list: checkboxGroup2.value
-      .map((item) => ({
-        type_parent_id: item.id,
-        children: item.checked || [],
-        dept_name: item.dept_name || null,
-        other_type_2_name: item.other_type_2_name || null,
-        denger_point_name: item.denger_point_name || null
-      }))
-      .filter((item) => Object.values(item).some((val) => val !== null && val !== undefined))
-  };
-
-  buttonLoading.value = true; // 开始加载状态
-
-  try {
-    // 发送请求
-    await createNewPerson(requestBody);
-    proxy.$modal.msgSuccess('新增成功');
-    emits('close', true); // 关闭对话框并通知父组件
-    emits('refresh');
-  } catch (error) {
-    console.error('Error creating new person:', error);
-    proxy.$modal.msgError('新增失败,请稍后再试或联系管理员');
-  } finally {
-    buttonLoading.value = false; // 结束加载状态
-  }
+  });
 };
 
 onMounted(() => {
-  if (props.id) {
-    responsibleDetail(props.id).then((res) => {
-      Object.assign(form.value, res.data);
-      // 如果有特殊情况处理,如将API返回的类型列表转换为checkboxGroup2的格式
-      checkboxGroup2.value = res.data.type_list.map((item) => ({
-        id: item.type_parent_id,
-        checked: item.children || [],
-        dept_name: item.dept_name,
-        other_type_2_name: item.other_type_2_name,
-        denger_point_name: item.denger_point_name
-      }));
-    });
-  }
   getOptions1(2);
   getCategory();
 });

+ 15 - 18
src/views/setting/PreventionResponsible/detail.vue

@@ -4,12 +4,6 @@
       <i class="common-back" />
       返回上一级
     </div>
-    <!--    <div class="common-header">-->
-    <!--      <div class="common-header-left">-->
-    <!--        <i class="common-title-icon" />-->
-    <!--        <div>{{ report.title }}</div>-->
-    <!--      </div>-->
-    <!--    </div>-->
     <div class="common-info-box">
       <div class="common-info-header">
         <i class="line-icon" />
@@ -20,11 +14,9 @@
         <div class="common-info-item">电话号码:{{ formData.phone }}</div>
         <div class="common-info-item">所属单位:{{ formData.unit_name }}</div>
         <div class="common-info-item">职务:{{ formData.position }}</div>
-
-        <div class="common-info-item">行政区划:{{ formData.area_code }}</div>
-        <!--        <div class="common-info-item">办公电话:{{ formData.OfficePhone }}</div>-->
+        <div class="common-info-item">行政区划:{{ formData.area_name }}</div>
+        <div class="common-info-item">办公电话:{{ formData.telephone }}</div>
         <div class="common-info-item">排位顺序:{{ formData.order_num }}</div>
-        <!--        <div class="common-info-item">录入人员:{{ formData.EntryPerson }}</div>-->
         <div class="common-info-item">录入时间:{{ formData.create_time }}</div>
       </div>
     </div>
@@ -36,7 +28,8 @@
       <div class="common-info-content">
         <div v-for="(item, index) in formData.type_list" :key="index" class="common-info-item">
           <div>{{ item.type_parent }}</div>
-          <div style="margin-left: 10px;">责任类别:{{ item.type_name }}</div>
+          <div style="margin-left: 10px">责任类别:{{ item.labelData.join(', ') }}</div>
+          <!-- 如果需要展示更详细的信息,可以继续添加 -->
         </div>
       </div>
     </div>
@@ -46,7 +39,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import { getPersonnel2 } from '@/api/comprehensiveGuarantee/reliefResourceManagement/reliefTalents';
 import { responsibleDetail } from '@/api/PreventionResponsible';
 
 const emits = defineEmits(['close']);
@@ -59,8 +51,10 @@ const formData = ref({
   unit_name: '',
   name: '',
   area_code: '',
+  area_name: '',
   position: '',
   phone: '',
+  telephone: '',
   order_num: '',
   create_time: '',
   type_list: []
@@ -72,16 +66,19 @@ const closeDialog = () => {
 
 // 返回上一级
 const goBack = () => {
-  // router.go(-1);
   emits('close');
 };
 
 const fetchData = async () => {
-  const response = await responsibleDetail(props.id);
-  if (response.code === 200) {
-    formData.value = response.data;
-  } else {
-    ElMessage.error('未找到相关数据');
+  try {
+    const response = await responsibleDetail(props.id);
+    if (response.code === 200) {
+      formData.value = response.data;
+    } else {
+      ElMessage.error(response.msg || '未找到相关数据');
+    }
+  } catch (error) {
+    ElMessage.error('请求出错,请稍后再试');
   }
 };
 

+ 4 - 3
src/views/setting/PreventionResponsible/index.vue

@@ -53,10 +53,10 @@
               />
               <el-table-column
                 v-if="columns[2].visible"
-                key="area_code"
+                key="area_name"
                 label="行政区划"
                 align="center"
-                prop="area_code"
+                prop="area_name"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
@@ -72,6 +72,7 @@
               <el-table-column v-if="columns[6].visible" label="责任类型" align="center" prop="type_parent_list" width="160">
                 <template #default="scope">
                   <span v-for="(typeParent, index) in scope.row.type_parent_list" :key="index">
+                    <span v-if="index > 0">、</span>
                     {{ typeParent.type_parent }}
                   </span>
                 </template>
@@ -308,7 +309,7 @@ const handleAdd = (row: UserVO) => {
   addState.show = true;
   addState.id = row.id;
 };
-const handleUpdate = () => {
+const handleUpdate = (row: UserVO) => {
   EditState.show = true;
   EditState.id = row.id;
 };