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

src/api/PreventionResponsible/index.ts

@@ -1,8 +1,24 @@
 import { AxiosPromise } from 'axios';
-import { UserInfoVO } from '@/api/system/user/types';
+import { UserInfo } from '@/api/system/user/types';
 import request from '@/utils/request';
-import { parseStrEmpty } from '@/utils/ruoyi';
+import { data } from 'autoprefixer';
 
+export function getZoning(id): AxiosPromise<UserInfo> {
+  return request({
+    url: '/api/system/area/tree2/' + id,
+    method: 'get',
+    params: data
+  });
+}
+
+//获取责任人类别
+export function getPersonRespon(): AxiosPromise<any> {
+  return request({
+    url: '/api/ThreeProofingResponsible/type_data/treeData',
+    method: 'get',
+    params: data
+  });
+}
 // 首页列表查询
 export function getTableList(params) {
   return request({
@@ -20,8 +36,8 @@ export function responsibleDetail(id) {
   });
 }
 
-// 新建联系人
-export function crateData(data) {
+//提交新建责任人信息
+export function createNewPerson(data) {
   return request({
     url: '/api/ThreeProofingResponsible/person/create',
     method: 'post',

src/api/setting/PreventionResponsible/tree.ts

@@ -10,3 +10,21 @@ export function getZoning(id): AxiosPromise<UserInfo> {
     params: data
   });
 }
+
+//获取责任人类别
+export function getPersonRespon(): AxiosPromise<any> {
+  return request({
+    url: '/api/ThreeProofingResponsible/type_data/treeData',
+    method: 'get',
+    params: data
+  });
+}
+
+//提交新建责任人信息
+export function createNewPerson(data) {
+  return request({
+    url: '/api/ThreeProofingResponsible/person/create',
+    method: 'post',
+    data: data
+  });
+}

src/types/components.d.ts

@@ -27,8 +27,6 @@ declare module 'vue' {
     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']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -59,6 +57,8 @@ declare module 'vue' {
     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']
     ElText: typeof import('element-plus/es')['ElText']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']

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>

src/views/setting/PreventionResponsible/add.vue

@@ -3,9 +3,9 @@
     <div class="common-dialog-content">
       <div class="common-dialog-title-box">
         <i class="common-dialog-title-icon" />
-        <div>{{ props.id ? '修改三防责任人信息' : '新建三防责任人信息' }}</div>
+        <div>新建三防责任人信息</div>
       </div>
-      <div class="common-dialog-box">
+      <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" placeholder="请输入姓名" />
@@ -15,66 +15,104 @@
           </el-form-item>
           <el-form-item label="所属单位：" prop="unit_name">
             <el-input v-model="form.unit_name" placeholder="例如：XX市XX县人民政府" />
-            <span style="color: #999; font-size: 12px; margin-left: 5px;">请使用单位全称</span>
+            <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" placeholder="例如：县长/办公室主任/办事员等" />
           </el-form-item>
           <el-form-item label="行政区划：" prop="area_code">
-            <el-select v-model="data1" placeholder="请选择" style="width: 200px;margin-right: 5px" @change="getOptions2()" clearable>
-              <el-option
-                v-for="item in options1"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              />
+            <el-select v-model="data1" placeholder="请选择" 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" placeholder="请选择" style="width: 200px; margin-right: 5px" @change="getOptions3()" clearable>
-              <el-option
-                v-for="item in options2"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              />
+            <el-select v-model="data2" placeholder="请选择" 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" placeholder="请选择" style="width: 200px; margin-right: 5px" @change="getAreaContent()" clearable>
-              <el-option
-                v-for="item in options3"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              />
+            <el-select v-model="data3" placeholder="请选择" 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>
-<!--            <template>-->
-<!--              <el-cascader :props="props" />-->
-<!--            </template>-->
+          </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>
+              <span class="phone-input-separator">-</span>
+              <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">
             <el-input v-model="form.order_num" placeholder="例如：请输入排位序号1-999" />
-            <span style="color: #999; font-size: 12px; margin-left: 5px;">序号数值越小越靠前</span>
+            <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">
-                <el-checkbox-button v-for="type in category" :key="type" :value="type">
-                  {{ type }}
+              <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-card style="margin-top: 10px">
-                <template #header>
-                  <div class="card-header">
-                    <span>Card name</span>
+              <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" placeholder="如：茂名供电局" @change="memberUnits" />
+                  </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>请选择责任类别：</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>
-                </template>
-                <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
-                <template #footer>Footer content</template>
-              </el-card>
+                  <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="closeDialog">取消</el-button>
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm(formRef)">确定</el-button>
+          <el-button @click="goBack">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitNewPerson()">确定</el-button>
         </div>
       </div>
     </div>
@@ -83,16 +121,11 @@
 
 <script setup lang="ts">
 import { ref, toRefs } from 'vue';
-import { deptList } from '@/api/inspectionWork/inspector';
-import {
-  createMaterialWarehouse,
-  getMaterialWarehouseInfo,
-  updateMaterialWarehouse
-} from '@/api/comprehensiveGuarantee/materialReserveManagement/godownManagement';
+import type { TabsPaneContext } from 'element-plus';
+import { createNewPerson, getPersonRespon, getZoning, responsibleDetail } from '@/api/PreventionResponsible';
 
-import { crateData, updateData } from '@/api/PreventionResponsible';
-import { getZoning } from '@/api/setting/PreventionResponsible/tree';
-const category = ['党委政府', '三防指挥部', '应急部门', '成员单位', '重点部门', '行政村', '水利工程', '受威胁转移', '抢险队伍', '地质灾害', '其他']
+const category = ref([]);
+const checkboxGroup2 = ref([]);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const props = defineProps({
   id: String
@@ -101,6 +134,7 @@ const buttonLoading = ref(false);
 const data1 = ref();
 const data2 = ref();
 const data3 = ref();
+
 // 表单数据
 const data = reactive({
   form: {
@@ -117,104 +151,234 @@ const data = reactive({
     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: 'blur' }]
+    area_code: [{ required: true, message: '行政区划不能为空', trigger: 'change' }]
   }
 });
 const { form } = toRefs(data);
 const emits = defineEmits(['close']);
-const closeDialog = () => {
-  emits('close');
-};
-const options1 = ref("");
-const options2 = ref("");
-const options3 = ref("");
-const submitForm = async (formEl) => {
-  if (!formEl) return;
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      if (props.id) {
-        updateData(form.value).then(() => {
-          proxy.$modal.msgSuccess('修改成功');
-          emits('close', true);
-        });
-      } else {
-        crateData(form.value).then(() => {
-          proxy.$modal.msgSuccess('新增成功');
-          emits('close', true);
-        });
-      }
-    } else {
-      nextTick(() => {
-        let isError = document.getElementsByClassName('is-error');
-        isError[0].scrollIntoView({
-          // 滚动到指定节点
-          // 值有start,center,end，nearest，当前显示在视图区域中间
-          block: 'center',
-          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
-          behavior: 'smooth'
-        });
-      });
-      proxy.$modal.msgError('表单校验失败');
-      return false;
-    }
-  });
-};
+const formRef = ref<InstanceType<typeof ElForm> | null>(null);
+const options1 = ref('');
+const options2 = ref('');
+const options3 = ref('');
 const getOptions1 = (id) => {
-  getZoning(id).then(res => {
+  getZoning(id).then((res) => {
     options1.value = res.data;
-  })
-}
+  });
+};
 const getOptions2 = () => {
   if (!data1.value) {
-    data2.value = "";
-    data3.value = "";
+    data2.value = '';
+    data3.value = '';
     form.value.area_code = undefined;
     options2.value = undefined;
     return;
-  }else{
-    getZoning(data1.value).then(res => {
+  } else {
+    getZoning(data1.value).then((res) => {
       options2.value = res.data;
-    })
+    });
     form.value.area_code = data1.value;
   }
-}
+};
 const getOptions3 = () => {
   if (!data2.value) {
-    data3.value = "";
+    data3.value = '';
     form.value.area_code = data1.value;
     options3.value = undefined;
     return;
-  }else{
-    getZoning(data2.value).then(res => {
+  } 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 {
+    return;
+  } else {
     form.value.area_code = data3.value;
   }
-}
-watch(data1,(newdata2, olddata2) => {
-  data2.value = "";
-  data3.value = "";
+};
+watch(data1, () => {
+  data2.value = '';
+  data3.value = '';
   options2.value = undefined;
-})
-watch(data2, (newdata2, olddata2) => {
-  data3.value = "";
+});
+watch(data2, () => {
+  data3.value = '';
   options3.value = undefined;
-})
+});
+const getCategory = () => {
+  getPersonRespon().then((res) => {
+    category.value = res.rows;
+  });
+};
 
-onMounted(() => {
-  getMaterialWarehouseInfo(props.id).then((res) => {
-    form.value = res.data;
+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 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(() => {
+  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();
 });
+// 返回上一级
+const goBack = () => {
+  emits('close');
+};
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>

src/views/setting/PreventionResponsible/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="app-container">
-      <div v-show="!dialog.visible && !detailState.show && !addState.show">
+      <div v-show="!dialog.visible && !detailState.show && !addState.show && !EditState.show">
         <el-row :gutter="20">
           <el-col :lg="4" :xs="24" style="">
             <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
@@ -97,7 +97,8 @@
       <DataImport v-model="uploadShow" url="" file-name="责任人信息批量导入模板" steps-text="责任人信息" />
       <DataImportDetail v-model="showUploadDetails" />
       <detail v-if="detailState.show" :id="detailState.id" @close="handledetailClose"></detail>
-      <add v-if="addState.show" :id="addState.id" @close="handleAddClose"></add>
+      <add v-if="addState.show" @close="handleAddClose" @refresh="getList"></add>
+      <Edit v-if="EditState.show" :id="EditState.id" @close="handleEditClose" @refresh="getList"></Edit>
     </div>
   </div>
 </template>
@@ -115,6 +116,7 @@ import { to } from 'await-to-js';
 import { optionselect } from '@/api/system/post';
 import detail from '@/views/setting/PreventionResponsible/detail.vue';
 import add from '@/views/setting/PreventionResponsible/add.vue';
+import Edit from '@/views/setting/PreventionResponsible/Edit.vue';
 import { reactive, ref } from 'vue';
 import { deleteMaterialRoot } from '@/api/comprehensiveGuarantee/materialReserveManagement/warehouseManagement';
 
@@ -289,6 +291,9 @@ const handledetailClose = () => {
   detailState.show = false;
 };
 let addState = reactive({
+  show: false
+});
+let EditState = reactive({
   show: false,
   id: ''
 });
@@ -296,11 +301,17 @@ let addState = reactive({
 const handleAddClose = () => {
   addState.show = false;
 };
+const handleEditClose = () => {
+  EditState.show = false;
+};
 const handleAdd = (row: UserVO) => {
   addState.show = true;
   addState.id = row.id;
 };
-
+const handleUpdate = () => {
+  EditState.show = true;
+  EditState.id = row.id;
+};
 /** 选择条数  */
 const handleSelectionChange = (selection: UserVO[]) => {
   ids.value = selection.map((item) => item.userId);
@@ -351,21 +362,21 @@ const cancel = () => {
 //   // form.value.password = initPassword.value.toString();
 // };
 
-/** 修改按钮操作 */
-const handleUpdate = async (row?: UserForm) => {
-  reset();
-  const userId = row?.userId || ids.value[0];
-  const { data } = await api.getUser(userId);
-  dialog.visible = true;
-  dialog.title = '修改用户';
-  await initTreeData();
-  Object.assign(form.value, data.user);
-  postOptions.value = data.posts;
-  roleOptions.value = data.roles;
-  form.value.postIds = data.postIds;
-  form.value.roleIds = data.roleIds;
-  form.value.password = '';
-};
+// /** 修改按钮操作 */
+// const handleUpdate = async (row?: UserForm) => {
+//   reset();
+//   const userId = row?.userId || ids.value[0];
+//   const { data } = await api.getUser(userId);
+//   dialog.visible = true;
+//   dialog.title = '修改用户';
+//   await initTreeData();
+//   Object.assign(form.value, data.user);
+//   postOptions.value = data.posts;
+//   roleOptions.value = data.roles;
+//   form.value.postIds = data.postIds;
+//   form.value.roleIds = data.roleIds;
+//   form.value.password = '';
+// };
 
 // 导入
 let uploadShow = ref(false);
@@ -383,8 +394,10 @@ let onMounted1 = onMounted(() => {
     initPassword.value = response.data;
   });
 });
-
-
+// 监听查询参数变化并重新获取数据
+watch(queryParams, () => {
+  getList();
+});
 </script>
 
 <style scoped lang="scss"></style>