三防新增详情

src/api/persons.ts

@@ -23,3 +23,33 @@ export function getPersonalCard(id) {
     method: "get"
   });
 }
+
+export function getPersonalTypeTree() {
+  return request({
+    url: "/api/ThreeProofingResponsible/type_data/treeData",
+    method: "get"
+  });
+}
+
+export function createPersonal(data) {
+  return request({
+    url: "/api/ThreeProofingResponsible/person_self/create",
+    method: "post",
+    data: data
+  });
+}
+// 数据更新
+export function updatePersonal(data) {
+  return request({
+    url: "/api/ThreeProofingResponsible/person_self/update",
+    method: "put",
+    data: data
+  });
+}
+
+export function getPersonalSelfInfo() {
+  return request({
+    url: "/api/ThreeProofingResponsible/person_self/info",
+    method: "get",
+  });
+}

src/components/RegionSelect/index.vue

@@ -7,7 +7,7 @@
         <div class="btn-text2" @click="onConfirm">确定</div>
       </div>
       <van-steps class="steps" direction="vertical" :active="activeTab">
-        <van-step v-for="(item, index) in steps" :key="index" @click="handleClickStep(index + 1)">{{item}}</van-step>
+        <van-step v-for="(item, index) in steps" :key="index" @click="handleClickStep(index)">{{item}}</van-step>
       </van-steps>
       <div v-show="!!currentValue" class="sub-text">备注：如果您直属【{{ currentValue }}】,请直接点击右上角“确定”完成。</div>
       <div v-show="activeTab === 1" class="select-list">
@@ -29,9 +29,9 @@ import {getTree2} from "@/api/tree";
 
 
 const props = defineProps({
-  modelValue: Boolean
+  modelValue: Boolean,
+  data: Array
 });
-
 const emits = defineEmits(['update:modelValue','confirm']);
 let show = computed({
   get() {
@@ -102,34 +102,30 @@ const handleClickStep = (index) => {
     if ([0, 1].includes(index)) {
       town.value = '';
       townText.value = '';
-      if (activeTab.value === 0) {
+      if (index === 0) {
         area.value = '';
         areaText.value = '';
       }
     }
   }
+  activeTab.value = index + 1;
 }
 const onCancel = () => {
   emits('update:modelValue', false)
 }
 const onConfirm = () => {
-  let label = '茂名市';
-  let value = '';
-  if (area.value && town.value && village.value) {
-    label = villageText.value;
-    value = village.value;
-  } else if (area.value && town.value) {
-    label = townText.value;
-    value = town.value;
-  } else if (area.value) {
-    label = areaText.value;
-    value = area.value;
+  const data = []
+  if (area.value) {
+    data.push({ label: areaText.value, id: area.value });
+  }
+  if (town.value) {
+    data.push({ label: townText.value, id: town.value });
+  }
+  if (village.value) {
+    data.push({ label: villageText.value, id: village.value });
   }
   onCancel();
-  emits('confirm',{
-    label: label,
-    value: value
-  })
+  emits('confirm',data)
 };
 const getList = (key, id?: string) => {
   getTree2(!!id ? id : '2').then((res) => {
@@ -142,6 +138,19 @@ const getList = (key, id?: string) => {
     }
   })
 }
+watch(() => props.data,() => {
+  if (props.data) {
+    if (props.data[0]) {
+      handleSelect1(props.data[0]);
+    }
+    if (props.data[1]) {
+      handleSelect2(props.data[1]);
+    }
+  }
+}, {
+  immediate: true,
+  deep: true
+})
 onMounted(() => {
   getList('areaList')
 })

src/utils/olMap/olMap.ts

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

src/views/threePreventionResponsiblePerson/editPersonInformation.vue

@@ -5,7 +5,7 @@
     <div class="empty-text2">为确保您能第一时间收到三防预警信息，请您花2-3<br/>分钟配合完成相关资料的填写，谢谢</div>
     <van-button class="btn primary-btn2" :loading="submitting" type="primary" @click="pageStatus = '2'">开始填写</van-button>
   </div>
-  <person-information2 v-else-if="pageStatus === '1'" @confirm="handleEdit" />
+  <person-information2 v-else-if="pageStatus === '1'" :form="form" @confirm="handleEdit" />
   <div v-else class="common-form-container">
     <van-form @submit="onSubmit">
       <div class="form-item">
@@ -41,15 +41,15 @@
                 <div>行政区划:</div>
               </div>
               <van-field
-                  v-model="areaText"
+                  v-model="form.area_name"
                   class="common-field"
                   placeholder="请选择行政区划"
-                  :rules="rules.area"
+                  :rules="rules.area_code"
                   :right-icon="selectIcon"
                   readonly
                   @click="showPicker = true"
               />
-              <RegionSelect v-model="showPicker" @confirm="handleSelect" />
+              <RegionSelect v-model="showPicker" :data="form.area_code" @confirm="handleSelect" />
             </div>
             <div class="item">
               <div class="label-box">
@@ -57,10 +57,10 @@
                 <div>所属单位:</div>
               </div>
               <van-field
-                  v-model="form.dept"
+                  v-model="form.unit_name"
                   class="common-field"
                   placeholder="请输入所属单位"
-                  :rules="rules.dept"
+                  :rules="rules.unit_name"
               />
             </div>
             <div class="item">
@@ -69,22 +69,22 @@
                 <div>职务:</div>
               </div>
               <van-field
-                  v-model="form.duty"
+                  v-model="form.position"
                   class="common-field"
                   placeholder="请输入职务"
-                  :rules="rules.duty"
+                  :rules="rules.position"
               />
             </div>
             <div class="item">
               <div class="label-box">
-                <i class="icon-officePhone" />
+                <i class="icon-telephone" />
                 <div>办公电话:</div>
               </div>
               <van-field
-                  v-model="form.officePhone"
+                  v-model="form.telephone"
                   class="common-field"
                   placeholder="请输入办公电话"
-                  :rules="rules.officePhone"
+                  :rules="rules.telephone"
               />
             </div>
             <div class="item">
@@ -99,11 +99,11 @@
                   :right-icon="selectIcon"
                   readonly
                   placeholder="请选择责任类别"
-                  :rules="rules.responsibilityType"
+                  :rules="rules.type_list"
                   @click="showPicker2 = true"
               />
               <div v-show="responsibilityTypeText" class="common-input" @click="showPicker2 = true">
-                <div v-for="(item, index) in responsibilityType" :key="index" class="text-box">
+                <div v-for="(item, index) in form.type_list" :key="index" class="text-box">
                   <div class="text1">{{ item.parentName }}</div>
                   <div class="text2">{{ getTypeLabel(item) }}</div>
                 </div>
@@ -127,60 +127,67 @@
 <script lang="ts" setup name="EditPersonInformation">
 import selectIcon from "@/assets/images/selectIcon.png";
 import {showSuccessToast} from "vant";
-import ResponsibilityType from "@/views/threePreventionResponsiblePerson/responsibilityType.vue";
-import PersonInformation2 from "@/views/threePreventionResponsiblePerson/personInformation2.vue";
+import ResponsibilityType from "./responsibilityType.vue";
+import PersonInformation2 from "./personInformation2.vue";
+import {createPersonal, getPersonalSelfInfo, updatePersonal} from "@/api/persons";
+import {deepClone} from "@/utils";
 
 // 页面状态 0缺省页 1详情 2新建、编辑
-let pageStatus = ref('0');
+let pageStatus = ref('1');
 // 表单数据
 const form = ref({
   name: '',
   phone: '',
-  area: '',
-  dept: '',
-  duty: '',
-  officePhone: '',
-  responsibilityType: ''
+  area_code: [],
+  area_name: '',
+  unit_name: '',
+  position: '',
+  telephone: '',
+  type_list: []
 });
 // 表单校验规则
 const rules = reactive({
   name: [{ required: true, message: '姓名不能为空' }],
   phone: [{ required: true, message: '手机号码不能为空' }],
-  area: [{ required: true, message: '请选择行政区划' }],
-  dept: [{ required: true, message: '所属单位不能为空' }],
-  duty: [{ required: true, message: '职务不能为空' }],
-  officePhone: [{ required: true, message: '办公电话不能为空' }],
-  responsibilityType: [{ required: true, message: '请选择责任类别' }]
+  area_code: [{ required: true, message: '请选择行政区划' }],
+  unit_name: [{ required: true, message: '所属单位不能为空' }],
+  position: [{ required: true, message: '职务不能为空' }],
+  telephone: [{ required: true, message: '办公电话不能为空' }],
+  type_list: [{ required: true, message: '请选择责任类别' }]
 });
 
 let showPicker = ref(false);
-let areaText = ref('');
 const handleSelect = (data) => {
-  areaText.value = data.label;
-  form.value.area = data.value;
+  form.value.area_name = data.length > 0 ? data[data.length - 1].label : '';
+  form.value.area_code = data;
 }
 let showPicker2 = ref(false);
-let responsibilityType = ref([]);
 let responsibilityTypeText = ref('');
 // 选择责任类型
 const onConfirm2 = (data) => {
   showPicker2.value = false;
-  responsibilityType.value = data;
-  responsibilityTypeText.value = '1';
+  if (data && data.length > 0) {
+    form.value.type_list = data;
+    responsibilityTypeText.value = '1';
+  } else {
+    form.value.type_list = [data];
+    responsibilityTypeText.value = '';
+  }
 };
 const getTypeLabel = (item) => {
-  let str = item.labelData.toString();
-  if (!!item.name) {
-    str += `(${item.name})`
+  let str = !!item.labelData ? item.labelData.toString() : '';
+  if (!!item.dept_name) {
+    str += `(${item.dept_name})`
   }
-  if (!!item.tagData && item.tagData.length > 0) {
+  if (!!item.other_type_label && item.other_type_label.length > 0) {
     str += '('
-    item.tagData.forEach((item2, index2) => {
+    item.other_type_label.forEach((item2, index2) => {
       if (index2 > 0) {
         str += '、';
       }
-      str += item2.label;
+      str += item2;
     })
+    str += ')'
   };
   return str;
 };
@@ -191,19 +198,38 @@ const handleEdit = () => {
 let submitting = ref(false);
 // 返回
 const onCancel = () => {
-  pageStatus.value = '0'
+  pageStatus.value = '1'
 };
 
 // 提交表单
 const onSubmit = () => {
   if (submitting.value) return;
   submitting.value = true;
-  setTimeout(() => {
-    submitting.value = false;
-    showSuccessToast('提交成功');
-    onCancel();
-  }, 1500);
+  const method = form.value.id ? createPersonal : updatePersonal;
+  const data = deepClone(form.value);
+  data.area_code = form.area_code && form.area_code.length > 0 ? form.area_code[form.area_code.length - 1].id : '';
+  console.log(data.area_code);
+  // method(form.value).then(() => {
+  //   showSuccessToast('提交成功');
+  //   getInfo();
+  // }).finally(() => {
+  //   submitting.value = false;
+  // })
+}
+
+const getInfo = () => {
+  getPersonalSelfInfo().then((res) => {
+    if (!!res.data && !!res.data.id) {
+      form.value = res.data;
+      pageStatus.value = '1';
+    } else {
+      pageStatus.value = '0';
+    }
+  })
 }
+onMounted(() => {
+  getInfo()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -211,7 +237,7 @@ const onSubmit = () => {
   bottom: 60px;
 }
 .common-form-container {
-  height: calc(100vh - 89px);
+  height: calc(100vh - 135px);
   padding: 0;
   .item {
     display: flex;
@@ -239,7 +265,7 @@ const onSubmit = () => {
       .icon-duty {
         background: url('@/assets/images/threePreventionResponsiblePerson/duty.png') no-repeat;
       }
-      .icon-officePhone {
+      .icon-telephone {
         background: url('@/assets/images/threePreventionResponsiblePerson/phone.png') no-repeat;
       }
       .icon-responsibility {
@@ -250,7 +276,7 @@ const onSubmit = () => {
       .icon-area,
       .icon-dept,
       .icon-duty,
-      .icon-officePhone,
+      .icon-telephone,
       .icon-responsibility {
         width: 16px;
         height: 16px;

src/views/threePreventionResponsiblePerson/index.vue

@@ -48,7 +48,7 @@
     </div>
     <hr style="color: #f9f9f9" />
   </div>
-  <div v-show="!isShowStructure" style="height: calc(100vh - 154px);overflow: scroll;">
+  <div v-show="!isShowStructure" class="scroll-list">
     <van-list
       v-model:loading="loading"
       :finished="finished"
@@ -346,4 +346,8 @@ const handleSelect = (data) => {
   flex-direction: row;
   margin-left: 5px;
 }
+.scroll-list {
+  height: calc(100vh - 154px);
+  overflow: scroll;
+}
 </style>

src/views/threePreventionResponsiblePerson/personInformation2.vue

@@ -32,9 +32,8 @@
                 <div>行政区划:</div>
               </div>
               <van-field
-                  v-model="areaText"
+                  v-model="form.area_name"
                   class="common-field"
-                  :right-icon="selectIcon"
                   readonly
               />
             </div>
@@ -44,7 +43,7 @@
                 <div>所属单位:</div>
               </div>
               <van-field
-                  v-model="form.dept"
+                  v-model="form.unit_name"
                   class="common-field"
                   readonly
               />
@@ -55,7 +54,7 @@
                 <div>职务:</div>
               </div>
               <van-field
-                  v-model="form.duty"
+                  v-model="form.position"
                   class="common-field"
                   readonly
               />
@@ -66,7 +65,7 @@
                 <div>办公电话:</div>
               </div>
               <van-field
-                  v-model="form.officePhone"
+                  v-model="form.phone"
                   class="common-field"
                   readonly
               />
@@ -77,7 +76,7 @@
                 <div>责任类别:</div>
               </div>
               <div class="common-input">
-                <div v-for="(item, index) in responsibilityType" :key="index" class="text-box">
+                <div v-for="(item, index) in form.type_list" :key="index" class="text-box">
                   <div class="text1">{{ item.parentName }}</div>
                   <div class="text2">{{ getTypeLabel(item) }}</div>
                 </div>
@@ -97,31 +96,26 @@
 import selectIcon from "@/assets/images/selectIcon.png";
 
 const emits = defineEmits(['confirm']);
-// 表单数据
-const form = ref({
-  name: '',
-  phone: '',
-  area: '',
-  dept: '',
-  duty: '',
-  officePhone: '',
-  responsibilityType: ''
+
+const props = defineProps({
+  form: Object
 });
 let responsibilityType = ref([]);
 let areaText = ref('');
 const getTypeLabel = (item) => {
-  let str = item.labelData.toString();
-  if (!!item.name) {
-    str += `(${item.name})`
+  let str = !!item.labelData ? item.labelData.toString() : '';
+  if (!!item.dept_name) {
+    str += `(${item.dept_name})`
   }
-  if (!!item.tagData && item.tagData.length > 0) {
+  if (!!item.other_type_label && item.other_type_label.length > 0) {
     str += '('
-    item.tagData.forEach((item2, index2) => {
+    item.other_type_label.forEach((item2, index2) => {
       if (index2 > 0) {
         str += '、';
       }
-      str += item2.label;
+      str += item2;
     })
+    str += ')'
   };
   return str;
 };

src/views/threePreventionResponsiblePerson/responsibilityType.vue

@@ -10,68 +10,68 @@
         <div class="item" @click="item.open = !item.open">
           <van-checkbox v-model="item.checked" :indeterminate="item.isIndeterminate" disabled class="custom-checkbox">
             <div class="label-box">
-              <i :class="'icon ' + item.icon" />
+              <i :class="'icon icon' + item.id" />
               <span>{{item.label}}</span>
             </div>
           </van-checkbox>
           <i :class="item.open ? 'icon-up' : 'icon-down'" />
         </div>
         <div v-show="item.open" class="item2-box">
-          <van-checkbox-group v-model="selectData[item.key].data" @change="checkBoxChange(item)">
-            <div v-for="(item2, index2) in item.list" :key="index2" class="item2">
+          <van-checkbox-group v-model="selectData[item.id].children" @change="checkBoxChange(item)">
+            <div v-for="(item2, index2) in item.children" :key="index2" class="item2">
               <div class="select-item">
-                <van-checkbox :name="item2.value">{{ item2.label }}</van-checkbox>
+                <van-checkbox :name="item2.id">{{ item2.label }}</van-checkbox>
               </div>
             </div>
           </van-checkbox-group>
           <div v-if="item.label === '成员单位'" class="text-box">
             <div class="text1">请填写单位名称</div>
             <div class="filed-box">
-              <van-field v-model="selectData.memberUnit.name" placeholder="如：茂名供电局" />
+              <van-field v-model="selectData[item.id].dept_name" placeholder="如：茂名供电局" />
             </div>
           </div>
           <div v-if="item.label === '重点部门'" class="text-box">
             <div class="text1">请填写单位名称</div>
             <div class="filed-box">
-              <van-field v-model="selectData.keyDepartment.name" placeholder="如：茂名市中心小学" />
+              <van-field v-model="selectData[item.id].dept_name" placeholder="如：茂名市中心小学" />
             </div>
             <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
             <div class="tag-box">
               <div
-                  v-for="item in typeList1"
-                  :key="item.value"
-                  :class="selectData.keyDepartment.tagData.includes(item) ? 'tag tag-active' : 'tag'"
-                  @click="handleClickTag('keyDepartment', item)"
+                  v-for="item2 in item.children2"
+                  :key="item2.value"
+                  :class="selectData[item.id].other_type_id.includes(item2.id) ? 'tag tag-active' : 'tag'"
+                  @click="handleClickTag(item.id, item2)"
               >
-                {{ item.label }}
+                {{ item2.label }}
               </div>
             </div>
           </div>
-          <div v-if="item.label === '水利部门'" class="text-box">
+          <div v-if="item.label === '水利工程'" class="text-box">
             <div class="text1">请填写单位名称</div>
             <div class="filed-box">
-              <van-field v-model="selectData.waterResourcesDepartment.name" placeholder="如：北江大堤" />
+              <van-field v-model="selectData[item.id].dept_name" placeholder="如：北江大堤" />
             </div>
             <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
             <div class="tag-box">
               <div
-                  v-for="item in typeList2"
-                  :key="item.value"
-                  :class="selectData.keyDepartment.tagData.includes(item) ? 'tag tag-active' : 'tag'"
-                  @click="handleClickTag('keyDepartment', item)"
+                  v-for="item2 in item.children2"
+                  :key="item2.value"
+                  :class="selectData[item.id].other_type_id.includes(item2.id) ? 'tag tag-active' : 'tag'"
+                  @click="handleClickTag(item.ud, item2)"
               >
                 {{ item.label }}
               </div>
             </div>
           </div>
-          <div v-if="item.label === '抢救队伍'" class="text-box">
+          <div v-if="item.label === '抢险队伍'" class="text-box">
             <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
             <div class="tag-box">
               <div
-                  v-for="item in typeList3"
-                  :key="item.value"
-                  :class="selectData.keyDepartment.tagData.includes(item) ? 'tag tag-active' : 'tag'"
-                  @click="handleClickTag('keyDepartment', item)"
+                  v-for="item2 in item.children2"
+                  :key="item2.value"
+                  :class="selectData[item.id].other_type_id.includes(item2) ? 'tag tag-active' : 'tag'"
+                  @click="handleClickTag(item.id, item2)"
               >
                 {{ item.label }}
               </div>
@@ -80,13 +80,13 @@
           <div v-if="item.label === '地质灾害'" class="text-box">
             <div class="text1">请填写隐患点名称</div>
             <div class="filed-box">
-              <van-field v-model="selectData.geologicalDisaster.name" />
+              <van-field v-model="selectData[item.id].denger_point_name" />
             </div>
           </div>
           <div v-if="item.label === '其他'" class="text-box">
             <div class="text1">请填写具体类型</div>
             <div class="filed-box">
-              <van-field v-model="selectData.other.name" placeholder="请填写责任类型、如：重点单位等" />
+              <van-field v-model="selectData[item.id].other_type_2_name" placeholder="请填写责任类型、如：重点单位等" />
             </div>
           </div>
         </div>
@@ -96,6 +96,8 @@
 </template>
 
 <script lang="ts" setup>
+import {getPersonalTypeTree} from "@/api/persons";
+
 const props = defineProps({
   modelValue: Boolean
 });
@@ -109,303 +111,90 @@ let show = computed({
     emits('update:modelValue', value);
   }
 })
-const selectOptions = ref([
-  {
-    label: '党委政府',
-    value: '党委政府',
-    key: 'government',
-    icon: 'icon1',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-        { label: '主要负责人', value: '主要负责人' },
-        { label: '分管负责人', value: '分管负责人' },
-        { label: '包片负责人', value: '包片负责人' }
-    ]
-  },
-  {
-    label: '三防指挥部',
-    value: '三防指挥部',
-    key: 'headquarters',
-    icon: 'icon2',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '总指挥', value: '总指挥' },
-      { label: '副总指挥', value: '副总指挥' },
-      { label: '秘书长', value: '秘书长' },
-      { label: '副秘书长', value: '副秘书长' },
-      { label: '成员', value: '成员' },
-      { label: '成员单位内设对口机构负责人', value: '成员单位内设对口机构负责人' },
-      { label: '成员单位的联络员', value: '成员单位的联络员' },
-      { label: '工作督导组成员', value: '工作督导组成员' },
-      { label: '三防专家组成员', value: '三防专家组成员' },
-      { label: '北江大堤前线抗洪指挥部总指挥', value: '北江大堤前线抗洪指挥部总指挥' },
-      { label: '北江大堤前线抗洪指挥部副总指挥', value: '北江大堤前线抗洪指挥部副总指挥' },
-      { label: '北江大堤前线抗洪指挥部成员', value: '北江大堤前线抗洪指挥部成员' }
-    ]
-  },
-  {
-    label: '应急部门',
-    value: '应急部门',
-    key: 'emergencyDepartment',
-    icon: 'icon3',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '领导', value: '领导' },
-      { label: '机关处室', value: '机关处室' },
-      { label: '直属单位', value: '直属单位' },
-      { label: '其他', value: '其他' }
-    ]
-  },
-  {
-    label: '成员单位',
-    value: '成员单位',
-    key: 'memberUnit',
-    icon: 'icon4',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '领导成员', value: '领导成员' },
-      { label: '对口处室主要负责人', value: '对口处室主要负责人' },
-      { label: '对口处室分管负责人', value: '对口处室分管负责人' },
-      { label: '联系人', value: '联系人' },
-      { label: '其他', value: '其他' }
-    ]
-  },
-  {
-    label: '重点部门',
-    value: '重点部门',
-    key: 'keyDepartment',
-    icon: 'icon5',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '学校', value: '学校' },
-      { label: '在建基建工程', value: '在建基建工程' },
-      { label: '养老院', value: '养老院' },
-      { label: '石油、化工、核电等高危行业', value: '石油、化工、核电等高危行业' },
-      { label: '企业', value: '企业' },
-      { label: '农场', value: '农场' },
-      { label: '林场', value: '林场' },
-      { label: '矿场', value: '矿场' },
-      { label: '养殖场', value: '养殖场' },
-      { label: '旅游景区', value: '旅游景区' },
-      { label: '其他', value: '其他' },
-    ]
-  },
-  {
-    label: '行政村',
-    value: '行政村',
-    key: 'administrativeVillage',
-    icon: 'icon6',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '党支部书记', value: '党支部书记' },
-      { label: '村居委主任', value: '村居委主任' },
-      { label: '村居委其他负责人', value: '村居委其他负责人' },
-      { label: '村民居委组长', value: '村民居委组长' },
-      { label: '简易雨量水位计观测人员', value: '简易雨量水位计观测人员' },
-      { label: '鸣锣和手摇报警器负责人', value: '鸣锣和手摇报警器负责人' },
-      { label: '小型水利设施管理人员', value: '小型水利设施管理人员' },
-      { label: '巡查抢险队员', value: '巡查抢险队员' },
-      { label: '灾害信息员', value: '灾害信息员' },
-      { label: '其他', value: '其他' },
-    ]
-  },
-  {
-    label: '水利部门',
-    value: '水利部门',
-    key: 'waterResourcesDepartment',
-    icon: 'icon7',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '省管水利工程', value: '省管水利工程' },
-      { label: '大型水库', value: '大型水库' },
-      { label: '中型水库', value: '中型水库' },
-      { label: '小一型水库', value: '小一型水库' },
-      { label: '广东省十大堤围', value: '广东省十大堤围' },
-      { label: '万亩以上提围', value: '万亩以上提围' },
-      { label: '其他', value: '其他' }
-    ]
-  },
-  {
-    label: '受威胁转移',
-    value: '受威胁转移',
-    key: 'threatenedTransfer',
-    icon: 'icon8',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '山洪地质灾害隐患点群众', value: '山洪地质灾害隐患点群众' },
-      { label: '独居老人', value: '独居老人' },
-      { label: '留守儿童', value: '留守儿童' },
-      { label: '低洼易涝区域群众', value: '低洼易涝区域群众' },
-      { label: '泥砖房、危房、工棚居住人员', value: '泥砖房、危房、工棚居住人员' },
-      { label: '海上养殖、作业人员', value: '海上养殖、作业人员' },
-      { label: '出海渔船', value: '出海渔船' },
-      { label: '外来务工人员', value: '外来务工人员' },
-      { label: '出租屋', value: '出租屋' },
-      { label: '其他', value: '其他' }
-    ]
-  },
-  {
-    label: '抢救队伍',
-    value: '抢救队伍',
-    key: 'rescueTeam',
-    icon: 'icon9',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '飞行队', value: '飞行队' },
-      { label: '工程抢险', value: '独居老人' },
-      { label: '海上救助单位', value: '海上救助单位' },
-      { label: '军队、武警', value: '军队、武警' },
-      { label: '消防', value: '消防' },
-      { label: '潜水队伍', value: '潜水队伍' },
-      { label: '轻舟队伍', value: '轻舟队伍' },
-      { label: '水文应急监测队伍', value: '水文应急监测队伍' },
-      { label: '物资仓库', value: '物资仓库' },
-      { label: '其他', value: '其他' }
-    ]
-  },
-  {
-    label: '地质灾害',
-    value: '地质灾害',
-    key: 'geologicalDisaster',
-    icon: 'icon10',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '主要负责人', value: '主要负责人' },
-      { label: '监测人', value: '监测人' },
-      { label: '其他', value: '其他' },
-    ]
-  },
-  {
-    label: '其他',
-    value: '其他',
-    key: 'other',
-    icon: 'icon11',
-    open: false,
-    checked: false,
-    isIndeterminate: false,
-    list: [
-      { label: '主要负责人', value: '主要负责人' },
-      { label: '分管负责人', value: '分管负责人' },
-      { label: '具体联系人', value: '具体联系人' },
-      { label: '其他', value: '其他' }
-    ]
-  }
-]);
+const selectOptions = ref([]);
 const selectData = ref({
-  government: {
-    data: [],
+  '1': {
+    children: [],
     labelData: []
   },
-  headquarters: {
-    data: [],
+  '2': {
+    children: [],
     labelData: []
   },
-  emergencyDepartment: {
-    data: [],
+  '3': {
+    children: [],
     labelData: []
   },
-  memberUnit: {
-    name: '',
-    data: [],
+  '4': {
+    dept_name: '',
+    children: [],
     labelData: []
   },
-  keyDepartment: {
-    name: '',
-    tagData: [],
-    data: [],
+  '5': {
+    dept_name: '',
+    other_type_id: [],
+    other_type_label: [],
+    children: [],
     labelData: []
   },
-  administrativeVillage: {
-    data: [],
+  '6': {
+    children: [],
     labelData: []
   },
-  waterResourcesDepartment: {
-    name: '',
-    tagData: [],
-    data: [],
+  '7': {
+    dept_name: '',
+    other_type_id: [],
+    other_type_label: [],
+    children: [],
     labelData: []
   },
-  threatenedTransfer: {
-    data: [],
+  '8': {
+    children: [],
     labelData: []
   },
-  rescueTeam: {
-    tagData: [],
-    data: [],
+  '9': {
+    other_type_id: [],
+    other_type_label: [],
+    children: [],
     labelData: []
   },
-  geologicalDisaster: {
-    name: '',
-    data: [],
+  '10': {
+    dept_name: '',
+    children: [],
     labelData: []
   },
-  other: {
-    name: '',
-    data: [],
+  '11': {
+    other_type_2_name: '',
+    children: [],
     labelData: []
   },
 });
-const typeList1 = ref([
-  { label: '主要负责人', value: '1' },
-  { label: '分管负责人', value: '2' },
-  { label: '具体负责人', value: '3' },
-]);
-const typeList2 = ref([
-  { label: '管理单位责任人', value: '1' },
-  { label: '行政责任人', value: '2' },
-  { label: '技术责任人', value: '3' },
-  { label: '巡查责任人', value: '4' },
-  { label: '其他', value: '5' }
-]);
-const typeList3 = ref([
-  { label: '主要负责人', value: '1' },
-  { label: '分管负责人', value: '2' },
-  { label: '具体联系人', value: '3' },
-  { label: '抢险队员', value: '4' }
-]);
 // 子项选中变化
 const checkBoxChange = (data) => {
-  let checked = selectData.value[data.key] && selectData.value[data.key].data && data.list.length === selectData.value[data.key].data.length;
-  data.isIndeterminate = !checked && selectData.value[data.key].data.length > 0;
+  let checked = selectData.value[data.id] && selectData.value[data.id].children && data.children.length === selectData.value[data.id].children.length;
+  data.isIndeterminate = !checked && selectData.value[data.id].children.length > 0;
   data.checked = checked;
   let labelData = [];
-  selectData.value[data.key].data.forEach(item => {
-    for(let i = 0; i < data.list.length; i++) {
-      if (item === data.list[i].value) {
-        labelData.push(data.list[i].label);
+  selectData.value[data.id].children.forEach(item => {
+    for(let i = 0; i < data.children.length; i++) {
+      if (item === data.children[i].id) {
+        labelData.push(data.children[i].label);
       }
     }
   })
-  selectData.value[data.key].labelData = labelData;
-  selectData.value[data.key].parentName = data.label;
+  selectData.value[data.id].labelData = labelData;
+  selectData.value[data.id].parentName = data.label;
+  selectData.value[data.id].type_parent_id = data.id;
 };
 
 const handleClickTag = (key, data) => {
-  let index = selectData.value[key].tagData.findIndex(item => item.value === data.value);
+  let index = selectData.value[key].other_type_id.findIndex(item => item === data.id);
   if (index > -1) {
-    selectData.value[key].tagData.splice(index, 1);
+    selectData.value[key].other_type_id.splice(index, 1);
+    selectData.value[key].other_type_label.splice(index, 1);
   } else {
-    selectData.value[key].tagData.push(data);
+    selectData.value[key].other_type_id.push(data.id);
+    selectData.value[key].other_type_label.push(data.label);
   }
 }
 
@@ -415,20 +204,28 @@ const onCancel = () => {
 const onConfirm = () => {
   let data = [];
   for(let key in selectData.value) {
-    if (selectData.value[key].data && selectData.value[key].data.length > 0) {
+    if (selectData.value[key].children && selectData.value[key].children.length > 0) {
       let obj = {
-        key: key,
+        // key: key,
+        type_parent_id: selectData.value[key].type_parent_id,
         parentName: selectData.value[key].parentName,
-        data: selectData.value[key].data,
+        children: selectData.value[key].children,
         labelData: selectData.value[key].labelData,
-        name: '',
-        tagData: []
+        // dept_name: '',
+        // other_type_id: []
       }
-      if (['memberUnit', 'keyDepartment', 'waterResourcesDepartment', 'geologicalDisaster', 'other'].includes(key) && selectData.value[key].name) {
-        obj.name = selectData.value[key].name;
+      if (['4', '5', '7'].includes(key) && selectData.value[key].dept_name) {
+        obj.dept_name = selectData.value[key].dept_name;
       }
-      if (['keyDepartment', 'waterResourcesDepartment', 'rescueTeam'].includes(key) && selectData.value[key].tagData && selectData.value[key].tagData.length > 0) {
-        obj.tagData = selectData.value[key].tagData;
+      if (key === '10' && selectData.value[key].denger_point_name) {
+        obj.denger_point_name = selectData.value[key].denger_point_name;
+      }
+      if (key === '11' && selectData.value[key].other_type_2_name) {
+        obj.other_type_2_name = selectData.value[key].other_type_2_name;
+      }
+      if (['5', '7', '9'].includes(key) && selectData.value[key].other_type_id && selectData.value[key].other_type_id.length > 0) {
+        obj.other_type_id = selectData.value[key].other_type_id;
+        obj.other_type_label = selectData.value[key].other_type_label;
       }
       data.push(obj)
     }
@@ -436,6 +233,18 @@ const onConfirm = () => {
   onCancel();
   emits('confirm', data)
 };
+
+onMounted(() => {
+  getPersonalTypeTree().then((res) => {
+    const data = res.rows;
+    data.forEach(item => {
+      item.open = false;
+      item.checked = false;
+      item.isIndeterminate = false;
+    })
+    selectOptions.value = res.rows;
+  });
+})
 </script>
 
 <style lang="scss" scoped>
@@ -468,7 +277,7 @@ const onConfirm = () => {
   background-color: #ffffff;
 }
 .select-container {
-  height: calc(100vh - 84px);
+  height: calc(100vh - 144px);
   overflow-y: auto;
 }
 .select-box {