三防新增接口调试和样式优化

src/views/setting/PreventionResponsible/Edit.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>修改三防责任人信息</div>
+      </div>
+      <div class="common-dialog-box" style="width: 1000px">
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
+          <el-form-item label="姓名：" prop="name">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="电话号码：" prop="phone">
+            <el-input v-model="form.phone" />
+          </el-form-item>
+          <el-form-item label="所属单位：" prop="unit_name">
+            <el-input v-model="form.unit_name" />
+            <span style="color: #999; font-size: 12px; margin-left: 5px">请使用单位全称</span>
+          </el-form-item>
+          <el-form-item label="职务：" prop="position">
+            <el-input v-model="form.position" />
+          </el-form-item>
+          <el-form-item label="行政区划：" prop="area_code">
+            <el-select v-model="data1" style="width: 200px; margin-right: 5px" clearable @change="getOptions2()">
+              <el-option v-for="item in options1" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+            <el-select v-model="data2" style="width: 200px; margin-right: 5px" clearable @change="getOptions3()">
+              <el-option v-for="item in options2" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+            <el-select v-model="data3" style="width: 200px; margin-right: 5px" clearable @change="getAreaContent()">
+              <el-option v-for="item in options3" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="办公电话：" prop="office_phone">
+            <div class="phone-input-container">
+              <el-input v-model="form.office_phone_prefix" style="width: 120px"></el-input>
+              <span class="phone-input-separator">-</span>
+              <el-input v-model="form.office_phone_number" style="width: 200px"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="排位顺序：" prop="order_num">
+            <el-input v-model="form.order_num" />
+            <span style="color: #999; font-size: 12px; margin-left: 5px">序号数值越小越靠前</span>
+          </el-form-item>
+          <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)">
+                  {{ type.label }}
+                </el-checkbox-button>
+              </el-checkbox-group>
+              <el-tabs v-model="childType" class="demo-tabs" @tab-click="handleClick">
+                <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-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" />
+                  </div>
+                  <div v-if="item.label === '重点部门'">
+                    <span>请填写单位名称：</span>
+                    <el-input v-model="item.dept_name" style="width: 240px" @change="memberUnits" />
+                    <div style="display: flex">
+                      <span>请选择责任类别：</span>
+                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                        <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '5'" :key="item2" :value="item2.id">
+                          {{ item2.label }}
+                        </el-checkbox-button>
+                      </el-checkbox-group>
+                    </div>
+                  </div>
+                  <div v-if="item.label === '水利工程'">
+                    <span>请填写单位名称：</span>
+                    <el-input v-model="item.dept_name" style="width: 240px" placeholder="如：北江大堰" @change="memberUnits" />
+                    <div style="display: flex">
+                      <span v-if="item.label === '水利工程'">请选择责任类别：</span>
+                      <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                        <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '7'" :key="item2" :value="item2.id">
+                          {{ item2.label }}
+                        </el-checkbox-button>
+                      </el-checkbox-group>
+                    </div>
+                  </div>
+                  <div v-if="item.label === '抢险队伍'" style="display: flex">
+                    <span>请选择责任类别：</span>
+                    <el-checkbox-group v-model="item.other_type_id" @change="getChOption">
+                      <el-checkbox-button v-for="item2 in item.children2" v-if="item.id === '9'" :key="item2" :value="item2.id">
+                        {{ item2.label }}
+                      </el-checkbox-button>
+                    </el-checkbox-group>
+                  </div>
+                  <div v-if="item.label === '地质灾害'">
+                    <span>请填写隐患点名称：</span>
+                    <el-input v-model="item.denger_point_name" style="width: 240px" placeholder="" @change="memberUnits" />
+                  </div>
+                  <div v-if="item.label === '其他'">
+                    <span>请填写具体类型：</span>
+                    <el-input
+                      v-model="item.other_type_2_name"
+                      style="width: 240px"
+                      placeholder="请填写责任类型，如：重点单位等"
+                      @change="memberUnits"
+                    />
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="goBack">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitNewPerson()">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</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';
+
+const category = ref([]);
+const checkboxGroup2 = ref([]);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const props = defineProps<{
+  id: string | number;
+}>();
+const buttonLoading = ref(false);
+const data1 = ref();
+const data2 = ref();
+const data3 = ref();
+
+// 表单数据
+const data = reactive({
+  form: {
+    unit_id: '',
+    unit_name: '',
+    name: '',
+    area_code: '',
+    position: '',
+    phone: '',
+    order_num: '',
+    type_list: []
+  },
+  rules: {
+    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+    unit_name: [{ required: true, message: '所属单位不能为空', trigger: 'change' }],
+    phone: [{ required: true, message: '电话号码不能为空', trigger: 'change' }],
+    position: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
+    area_code: [{ required: true, message: '行政区划不能为空', trigger: 'change' }]
+  }
+});
+const { form } = toRefs(data);
+const emits = defineEmits(['close']);
+const formRef = ref<InstanceType<typeof ElForm> | null>(null);
+const options1 = ref('');
+const options2 = ref('');
+const options3 = ref('');
+const getOptions1 = (id) => {
+  getZoning(id).then((res) => {
+    options1.value = res.data;
+  });
+};
+const getOptions2 = () => {
+  if (!data1.value) {
+    data2.value = '';
+    data3.value = '';
+    form.value.area_code = undefined;
+    options2.value = undefined;
+    return;
+  } else {
+    getZoning(data1.value).then((res) => {
+      options2.value = res.data;
+    });
+    form.value.area_code = data1.value;
+  }
+};
+const getOptions3 = () => {
+  if (!data2.value) {
+    data3.value = '';
+    form.value.area_code = data1.value;
+    options3.value = undefined;
+    return;
+  } else {
+    getZoning(data2.value).then((res) => {
+      options3.value = res.data;
+    });
+    form.value.area_code = data2.value;
+  }
+};
+const getAreaContent = () => {
+  if (!data3.value) {
+    form.value.area_code = data2.value;
+    return;
+  } else {
+    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;
+  });
+};
+
+const childType = ref();
+const changeChildType = () => {
+  category.value.forEach((item) => {
+    let index = checkboxGroup2.value.findIndex((item2) => item2.id === item.id);
+    if (index === -1) {
+      delete item.checked;
+    }
+  });
+  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;
+};
+
+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 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);
+    }
+  }
+  form.value.type_list = datatemp;
+};
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event);
+};
+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;
+  } 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; // 结束加载状态
+//   }
+// };
+
+onMounted(() => {
+  getOptions1(2);
+  getCategory();
+  fetchData();
+});
+// 返回上一级
+const goBack = () => {
+  emits('close');
+};
+</script>
+
+<style scoped lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>