三防责任人 个人信息

src/api/tree.ts

@@ -7,3 +7,10 @@ export function getTree(id) {
     method: "get"
   });
 }
+// 获取单位地址2
+export function getTree2(id) {
+  return request({
+    url: "/api/system/area/tree2/" + id,
+    method: "get"
+  });
+}

src/components/RegionSelect/index.vue

@@ -1,28 +1,32 @@
 <template>
   <van-popup v-model:show="show" destroy-on-close round position="bottom" style="height:80%">
-    <div class="popup-header">
-      <div class="btn-text1" @click="onCancel">取消</div>
-      <div class="popup-title">请选择</div>
-      <div class="btn-text2" @click="onConfirm">确定</div>
-    </div>
-    <van-steps direction="vertical" :active="activeTab">
-      <van-step v-for="(item, index) in steps" :key="index" @click="handleClickStep(index + 1)">{{item}}</van-step>
-    </van-steps>
-    <div v-show="!!currentValue" class="sub-text">备注：如果您直属【{{ currentValue }}】,请直接点击右上角“确定”完成。</div>
-    <div v-show="activeTab === 1" class="select-list">
-      <div v-for="(item, index) in region" :key="index" class="select-item" @click="handleSelect1(item)">{{ item.label }}</div>
-    </div>
-    <div v-show="activeTab === 2" class="select-list">
-      <div v-for="(item, index) in townList" :key="index" class="select-item" @click="handleSelect2(item)">{{ item.text }}</div>
-    </div>
-    <div v-show="activeTab === 3" class="select-list">
-      <div v-for="(item, index) in villageList" :key="index" class="select-item" @click="handleSelect3(item)">{{ item.text }}</div>
+    <div class="flex-container">
+      <div class="popup-header">
+        <div class="btn-text1" @click="onCancel">取消</div>
+        <div class="popup-title">请选择</div>
+        <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-steps>
+      <div v-show="!!currentValue" class="sub-text">备注：如果您直属【{{ currentValue }}】,请直接点击右上角“确定”完成。</div>
+      <div v-show="activeTab === 1" class="select-list">
+        <div v-for="(item, index) in areaList" :key="index" class="select-item" @click="handleSelect1(item)">{{ item.label }}</div>
+      </div>
+      <div v-show="activeTab === 2" class="select-list">
+        <div v-for="(item, index) in townList" :key="index" class="select-item" @click="handleSelect2(item)">{{ item.label }}</div>
+      </div>
+      <div v-show="activeTab === 3" class="select-list">
+        <div v-for="(item, index) in villageList" :key="index" class="select-item" @click="handleSelect3(item)">{{ item.label }}</div>
+      </div>
     </div>
+
   </van-popup>
 </template>
 
 <script lang="ts" setup name="RegionSelect">
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import {getTree2} from "@/api/tree";
+
 
 const props = defineProps({
   modelValue: Boolean
@@ -40,36 +44,29 @@ let show = computed({
 
 let area = ref('');
 let areaText = ref('');
-const { region } = toRefs<any>(proxy?.useDict('region'));
+let areaList = ref([]);
 const handleSelect1 = (item) => {
-  area.value = item.value;
+  getList('townList', item.id);
+  area.value = item.id;
   areaText.value = item.label;
   activeTab.value = 2
 }
 
 let town = ref('');
 let townText = ref('');
-let townList = ref([
-  { text: '', value: '' },
-  { text: '鳌头镇', value: '1' },
-  { text: '羊角镇', value: '2' },
-  { text: '金塘镇', value: '3' }
-]);
+let townList = ref();
 const handleSelect2 = (item) => {
-  town.value = item.value;
-  townText.value = item.text;
+  getList('villageList', item.id);
+  town.value = item.id;
+  townText.value = item.label;
   activeTab.value = 3
 }
 let village = ref('');
 let villageText = ref('');
-let villageList = ref([
-  { text: '红花村', value: '1' },
-  { text: '低山村', value: '2' },
-  { text: '旦场居委会', value: '3' }
-]);
+let villageList = ref();
 const handleSelect3 = (item) => {
-  village.value = item.value;
-  villageText.value = item.text;
+  village.value = item.id;
+  villageText.value = item.label;
 }
 
 let activeTab = ref(1);
@@ -134,13 +131,30 @@ const onConfirm = () => {
     value: value
   })
 };
-const option1 = ref([
-
-]);
+const getList = (key, id?: string) => {
+  getTree2(!!id ? id : '2').then((res) => {
+    if (key === 'areaList') {
+      areaList.value = res.data;
+    } else if (key === 'townList') {
+      townList.value = res.data;
+    } else if (key === 'villageList') {
+      villageList.value = res.data;
+    }
+  })
+}
+onMounted(() => {
+  getList('areaList')
+})
 </script>
 
 <style lang="scss" scoped>
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .popup-header {
+  flex-shrink: 0;
   width: 100%;
   height: 44px;
   display: flex;
@@ -162,12 +176,18 @@ const option1 = ref([
     color: #1989fa;
   }
 }
+.steps {
+  flex-shrink: 0;
+}
 .sub-text {
   padding: 0 12px;
   font-size: 14px;
   color: #A3A7AD;
+  flex-shrink: 0;
 }
 .select-list {
+  flex: 1;
+  overflow: auto;
   padding: 0 18px;
   font-size: 14px;
   color: #414F64;

src/router/routes.ts

@@ -481,10 +481,7 @@ export const leaderRoute: Array<RouteRecordRaw> = [
       {
         path: "editPersonInformation",
         name: "EditPersonInformation",
-        component: () =>
-            import(
-                "@/views/threePreventionResponsiblePerson/editPersonInformation.vue"
-                ),
+        component: () => import("@/views/threePreventionResponsiblePerson/editPersonInformation.vue"),
         meta: {
           title: "责任信息",
           noCache: true

src/views/threePreventionResponsiblePerson/editPersonInformation.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="common-form-container">
+  <div v-if="pageStatus === '0'" class="empty-box">
+    <div class="empty-bg" />
+    <div class="empty-text1">应急（三防）责任人信息填写</div>
+    <div class="empty-text2">为确保您能第一时间收到三防预警信息，请您花2-3<br/>分钟配合完成相关资料的填写，谢谢</div>
+    <van-button class="btn primary-btn2" :loading="submitting" type="primary" @click="pageStatus = '2'">开始填写</van-button>
+  </div>
+  <div v-else class="common-form-container">
     <van-form @submit="onSubmit">
       <div class="form-item">
         <div class="common-form-content">
@@ -86,20 +92,30 @@
                 <div>责任类别:</div>
               </div>
               <van-field
+                  v-show="!responsibilityTypeText"
                   v-model="responsibilityTypeText"
                   class="common-field"
                   :right-icon="selectIcon"
                   readonly
-                  placeholder="请选择行政区划"
+                  placeholder="请选择责任类别"
                   :rules="rules.responsibilityType"
                   @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 class="text1">{{ item.parentName }}</div>
+                  <div class="text2">{{ getTypeLabel(item) }}</div>
+                </div>
+              </div>
               <responsibility-type v-model="showPicker2" @confirm="onConfirm2" />
             </div>
           </div>
         </div>
       </div>
-      <div class="common-form-footer">
+      <div v-if="pageStatus === '1'" class="common-form-footer">
+        <van-button class="btn primary-btn" type="primary" native-type="submit">编辑</van-button>
+      </div>
+      <div v-if="pageStatus === '2'" class="common-form-footer">
         <van-button class="btn" @click="onCancel">取消</van-button>
         <van-button class="btn primary-btn" :loading="submitting" type="primary" native-type="submit">提交</van-button>
       </div>
@@ -111,13 +127,11 @@
 import selectIcon from "@/assets/images/selectIcon.png";
 import {showSuccessToast} from "vant";
 import {useRouter} from "vue-router";
-import {Numeric} from "vant/es/utils";
 import ResponsibilityType from "@/views/threePreventionResponsiblePerson/responsibilityType.vue";
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { region } = toRefs<any>(proxy?.useDict('region'));
+// 页面状态 0缺省页 1详情 2新建、编辑
+let pageStatus = ref('1');
 const router = useRouter();
-let id = ref('');
 // 表单数据
 const form = ref({
   name: '',
@@ -146,14 +160,29 @@ const handleSelect = (data) => {
   form.value.area = data.value;
 }
 let showPicker2 = ref(false);
+let responsibilityType = ref([]);
 let responsibilityTypeText = ref('');
-const pickerValue2 = ref<Numeric[]>([]);
-// 选择任务完成情况
-const onConfirm2 = ({ selectedValues, selectedOptions }) => {
+// 选择责任类型
+const onConfirm2 = (data) => {
   showPicker2.value = false;
-  pickerValue2.value = selectedValues;
-  form.value.responsibilityType = selectedOptions[0].value;
-  responsibilityTypeText.value = selectedOptions[0].text;
+  responsibilityType.value = data;
+  responsibilityTypeText.value = '1';
+};
+const getTypeLabel = (item) => {
+  let str = item.labelData.toString();
+  if (!!item.name) {
+    str += `(${item.name})`
+  }
+  if (!!item.tagData && item.tagData.length > 0) {
+    str += '('
+    item.tagData.forEach((item2, index2) => {
+      if (index2 > 0) {
+        str += '、';
+      }
+      str += item2.label;
+    })
+  };
+  return str;
 };
 // 是否在提交
 let submitting = ref(false);
@@ -184,10 +213,11 @@ const onSubmit = () => {
     position: relative;
     margin-bottom: 24px;
     .label-box {
-      width: 122px;
+      width: 90px;
       display: flex;
       align-items: center;
       margin-right: 9px;
+      flex-shrink: 0;
       .icon-name {
         background: url('@/assets/images/threePreventionResponsiblePerson/name.png') no-repeat;
       }
@@ -224,6 +254,10 @@ const onSubmit = () => {
     }
     .common-field {
       overflow: unset;
+      :deep(.van-icon__image) {
+        width: 13px;
+        height: 16px;
+      }
     }
     :deep(.van-cell) {
       padding: 0;
@@ -236,4 +270,60 @@ const onSubmit = () => {
     }
   }
 }
+.common-input {
+  border: 1px solid #DCE0EE;
+  border-radius: 2px;
+  min-height: 30px;
+  line-height: 30px;
+  width: 100%;
+  padding: 0 18px 0 5px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    background: url("@/assets/images/selectIcon.png") no-repeat;
+    background-size: 100% 100%;
+    width: 13px;
+    height: 16px;
+  }
+}
+.text-box {
+  font-size: 16px;
+  .text2 {
+    font-size: 12px;
+    color: #A3A7AD;
+    letter-spacing: 0;
+    line-height: 26px;
+  }
+}
+.empty-box {
+  padding-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .empty-bg {
+    width: 220px;
+    height: 190px;
+    background: url("@/assets/images/threePreventionResponsiblePerson/empty.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .empty-text1 {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 20px 0 10px;
+  }
+  .empty-text2 {
+    font-size: 14px;
+    line-height: 26px;
+    color: #A3A7AD;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .primary-btn2 {
+     width: 320px;
+  }
+}
 </style>

src/views/threePreventionResponsiblePerson/responsibilityType.vue

@@ -37,9 +37,14 @@
             </div>
             <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
             <div class="tag-box">
-              <div :class="selectData.keyDepartment.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '1')">主要负责人</div>
-              <div :class="selectData.keyDepartment.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '2')">分管负责人</div>
-              <div :class="selectData.keyDepartment.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('keyDepartment', '3')">具体负责人</div>
+              <div
+                  v-for="item in typeList1"
+                  :key="item.value"
+                  :class="selectData.keyDepartment.tagData.includes(item) ? 'tag tag-active' : 'tag'"
+                  @click="handleClickTag('keyDepartment', item)"
+              >
+                {{ item.label }}
+              </div>
             </div>
           </div>
           <div v-if="item.label === '水利部门'" class="text-box">
@@ -49,20 +54,27 @@
             </div>
             <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
             <div class="tag-box">
-              <div :class="selectData.waterResourcesDepartment.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '1')">管理单位责任人</div>
-              <div :class="selectData.waterResourcesDepartment.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '2')">行政责任人</div>
-              <div :class="selectData.waterResourcesDepartment.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '3')">技术责任人</div>
-              <div :class="selectData.waterResourcesDepartment.tagData.includes('4') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '4')">巡查责任人</div>
-              <div :class="selectData.waterResourcesDepartment.tagData.includes('5') ? 'tag tag-active' : 'tag'" @click="handleClickTag('waterResourcesDepartment', '5')">其他</div>
+              <div
+                  v-for="item in typeList2"
+                  :key="item.value"
+                  :class="selectData.keyDepartment.tagData.includes(item) ? 'tag tag-active' : 'tag'"
+                  @click="handleClickTag('keyDepartment', item)"
+              >
+                {{ item.label }}
+              </div>
             </div>
           </div>
           <div v-if="item.label === '抢救队伍'" class="text-box">
             <div class="text1" style="padding-top: 8px;padding-bottom: 3px">请选择责任类别</div>
             <div class="tag-box">
-              <div :class="selectData.rescueTeam.tagData.includes('1') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '1')">主要负责人</div>
-              <div :class="selectData.rescueTeam.tagData.includes('2') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '2')">分管负责人</div>
-              <div :class="selectData.rescueTeam.tagData.includes('3') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '3')">具体联系人</div>
-              <div :class="selectData.rescueTeam.tagData.includes('4') ? 'tag tag-active' : 'tag'" @click="handleClickTag('rescueTeam', '4')">抢险队员</div>
+              <div
+                  v-for="item in typeList3"
+                  :key="item.value"
+                  :class="selectData.keyDepartment.tagData.includes(item) ? 'tag tag-active' : 'tag'"
+                  @click="handleClickTag('keyDepartment', item)"
+              >
+                {{ item.label }}
+              </div>
             </div>
           </div>
           <div v-if="item.label === '地质灾害'" class="text-box">
@@ -301,60 +313,99 @@ const selectOptions = ref([
 ]);
 const selectData = ref({
   government: {
-    data: []
+    data: [],
+    labelData: []
   },
   headquarters: {
-    data: []
+    data: [],
+    labelData: []
   },
   emergencyDepartment: {
-    data: []
+    data: [],
+    labelData: []
   },
   memberUnit: {
     name: '',
-    data: []
+    data: [],
+    labelData: []
   },
   keyDepartment: {
     name: '',
     tagData: [],
-    data: []
+    data: [],
+    labelData: []
   },
   administrativeVillage: {
-    data: []
+    data: [],
+    labelData: []
   },
   waterResourcesDepartment: {
     name: '',
     tagData: [],
-    data: []
+    data: [],
+    labelData: []
   },
   threatenedTransfer: {
-    data: []
+    data: [],
+    labelData: []
   },
   rescueTeam: {
     tagData: [],
-    data: []
+    data: [],
+    labelData: []
   },
   geologicalDisaster: {
     name: '',
-    data: []
+    data: [],
+    labelData: []
   },
   other: {
     name: '',
-    data: []
+    data: [],
+    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;
   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.key].labelData = labelData;
+  selectData.value[data.key].parentName = data.label;
 };
 
-const handleClickTag = (key, value) => {
-  let index = selectData.value[key].tagData.findIndex(item => item === value);
+const handleClickTag = (key, data) => {
+  let index = selectData.value[key].tagData.findIndex(item => item.value === data.value);
   if (index > -1) {
     selectData.value[key].tagData.splice(index, 1);
   } else {
-    selectData.value[key].tagData.push(value);
+    selectData.value[key].tagData.push(data);
   }
 }
 
@@ -362,8 +413,28 @@ const onCancel = () => {
   emits('update:modelValue', false)
 }
 const onConfirm = () => {
+  let data = [];
+  for(let key in selectData.value) {
+    if (selectData.value[key].data && selectData.value[key].data.length > 0) {
+      let obj = {
+        key: key,
+        parentName: selectData.value[key].parentName,
+        data: selectData.value[key].data,
+        labelData: selectData.value[key].labelData,
+        name: '',
+        tagData: []
+      }
+      if (['memberUnit', 'keyDepartment', 'waterResourcesDepartment', 'geologicalDisaster', 'other'].includes(key) && selectData.value[key].name) {
+        obj.name = selectData.value[key].name;
+      }
+      if (['keyDepartment', 'waterResourcesDepartment', 'rescueTeam'].includes(key) && selectData.value[key].tagData && selectData.value[key].tagData.length > 0) {
+        obj.tagData = selectData.value[key].tagData;
+      }
+      data.push(obj)
+    }
+  }
   onCancel();
-  emits('confirm')
+  emits('confirm', data)
 };
 </script>