三防责任人 个人信息详情

src/hooks/AMap/useAMap.ts

@@ -469,6 +469,7 @@ export function useAMap(options) {
     initMap(options);
   });
   return {
+    initMap,
     getAMap,
     getMap,
     switchMap,

src/views/threePreventionResponsiblePerson/editPersonInformation.vue

@@ -5,6 +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" />
   <div v-else class="common-form-container">
     <van-form @submit="onSubmit">
       <div class="form-item">
@@ -113,7 +114,7 @@
         </div>
       </div>
       <div v-if="pageStatus === '1'" class="common-form-footer">
-        <van-button class="btn primary-btn" type="primary" native-type="submit">编辑</van-button>
+        <van-button class="btn primary-btn" type="primary" @click="handleEdit">编辑</van-button>
       </div>
       <div v-if="pageStatus === '2'" class="common-form-footer">
         <van-button class="btn" @click="onCancel">取消</van-button>
@@ -126,12 +127,11 @@
 <script lang="ts" setup name="EditPersonInformation">
 import selectIcon from "@/assets/images/selectIcon.png";
 import {showSuccessToast} from "vant";
-import {useRouter} from "vue-router";
 import ResponsibilityType from "@/views/threePreventionResponsiblePerson/responsibilityType.vue";
+import PersonInformation2 from "@/views/threePreventionResponsiblePerson/personInformation2.vue";
 
 // 页面状态 0缺省页 1详情 2新建、编辑
-let pageStatus = ref('0');
-const router = useRouter();
+let pageStatus = ref('1');
 // 表单数据
 const form = ref({
   name: '',
@@ -184,12 +184,14 @@ const getTypeLabel = (item) => {
   };
   return str;
 };
+const handleEdit = () => {
+  pageStatus.value = '2'
+}
 // 是否在提交
 let submitting = ref(false);
 // 返回
-const emits = defineEmits(["toHomePage"]);
 const onCancel = () => {
-  emits("toHomePage");
+  pageStatus.value = '0'
 };
 
 // 提交表单

src/views/threePreventionResponsiblePerson/index.vue

@@ -12,11 +12,13 @@
         <div class="blue-rectangle" />
         <div class="block1" v-if="!!requestParameters.checkedId">
           <div>{{ upOneLevel }}</div>
-          <div style="color: #1d92ff">>{{ adressContent }}</div>
+          <div style="margin: 0 5px">{{ '>' }}</div>
+          <div style="color: #1d92ff">{{ adressContent }}</div>
         </div>
         <div class="block1" v-else>
           <div>广东省</div>
-          <div style="color: #1d92ff">>茂名市</div>
+          <div style="margin: 0 5px">{{ '>' }}</div>
+          <div style="color: #1d92ff">茂名市</div>
         </div>
       </div>
       <div>

src/views/threePreventionResponsiblePerson/personInformation2.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="common-form-container">
+    <van-form>
+      <div class="form-item">
+        <div class="common-form-content">
+          <div class="common-form-item">
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-name" />
+                <div>姓名:</div>
+              </div>
+              <van-field
+                  v-model="form.name"
+                  class="common-field"
+                  readonly
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-phone" />
+                <div>手机号码:</div>
+              </div>
+              <van-field
+                  v-model="form.phone"
+                  class="common-field"
+                  readonly
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-area" />
+                <div>行政区划:</div>
+              </div>
+              <van-field
+                  v-model="areaText"
+                  class="common-field"
+                  :right-icon="selectIcon"
+                  readonly
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-dept" />
+                <div>所属单位:</div>
+              </div>
+              <van-field
+                  v-model="form.dept"
+                  class="common-field"
+                  readonly
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-duty" />
+                <div>职务:</div>
+              </div>
+              <van-field
+                  v-model="form.duty"
+                  class="common-field"
+                  readonly
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-officePhone" />
+                <div>办公电话:</div>
+              </div>
+              <van-field
+                  v-model="form.officePhone"
+                  class="common-field"
+                  readonly
+              />
+            </div>
+            <div class="item">
+              <div class="label-box">
+                <i class="icon-responsibility" />
+                <div>责任类别:</div>
+              </div>
+              <div class="common-input">
+                <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>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div  class="common-form-footer">
+        <van-button class="btn primary-btn" type="primary" @click="handleEdit">编辑</van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import selectIcon from "@/assets/images/selectIcon.png";
+
+const emits = defineEmits(['confirm']);
+// 表单数据
+const form = ref({
+  name: '',
+  phone: '',
+  area: '',
+  dept: '',
+  duty: '',
+  officePhone: '',
+  responsibilityType: ''
+});
+let responsibilityType = ref([]);
+let areaText = ref('');
+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;
+};
+const handleEdit = () => {
+  emits('confirm');
+}
+</script>
+
+<style lang="scss" scoped>
+.common-form-footer {
+  bottom: 60px;
+}
+.common-form-container {
+  height: calc(100vh - 89px);
+  padding: 0;
+}
+.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;
+  }
+}
+</style>