三防新增、修改、查看接口调试和样式优化

src/views/setting/PreventionResponsible/Edit.vue

@@ -74,7 +74,7 @@
                   </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="memberUnits" />
                     <div style="display: flex">
                       <span v-if="item.label === '水利工程'">请选择责任类别：</span>
                       <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
@@ -122,7 +122,7 @@
 <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 { updateData, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
 
 const category = ref([]);
 const checkboxGroup2 = ref([]);
@@ -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' }],
@@ -155,6 +157,27 @@ 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);
@@ -293,74 +316,78 @@ for (const i in category.value) {
 const fetchData = async () => {
   const response = await responsibleDetail(props.id);
   if (response.code === 200) {
-    form.value = response.data;
+    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;
+    }
+
+    // 设置行政区划的默认值
+    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);
+  form.value.area_code = areaCode;
+
+  // 确保下拉框选项也被正确加载
+  getOptions2();
+  getOptions3();
+};
+const submitNewPerson = async () => {
+  try {
+    // 表单验证
+    await formRef.value.validate();
+
+    // 准备更新请求的负载
+    const payload = prepareUpdatePayload();
 
-// 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 response = await updateData(payload);
 
+    if (response.code === 200) {
+      ElMessage.success('更新成功');
+      goBack();
+      emits('refresh');
+    } else {
+      ElMessage.error('更新失败，请重试');
+    }
+  } catch (error) {
+    console.error(error);
+    ElMessage.error('验证未通过或请求失败');
+  }
+};
 onMounted(() => {
   getOptions1(2);
   getCategory();

src/views/setting/PreventionResponsible/add.vue

@@ -144,7 +144,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' }],
@@ -324,6 +326,7 @@ const submitNewPerson = async () => {
     position: form.value.position,
     phone: form.value.phone,
     order_num: form.value.order_num,
+    telephone: `${form.value.office_phone_prefix}-${form.value.office_phone_number}`,
     type_list: checkboxGroup2.value
       .map((item) => ({
         type_parent_id: item.id,

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('请求出错，请稍后再试');
   }
 };
 

src/views/setting/PreventionResponsible/index.vue

@@ -308,7 +308,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;
 };