优化bug

src/views/threePreventionResponsiblePerson/editPersonInformation.vue

@@ -2,10 +2,22 @@
   <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 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'" :form="form" @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">
@@ -17,10 +29,10 @@
                 <div>姓名:</div>
               </div>
               <van-field
-                  v-model="form.name"
-                  class="common-field"
-                  placeholder="请输入姓名"
-                  :rules="rules.name"
+                v-model="form.name"
+                class="common-field"
+                placeholder="请输入姓名"
+                :rules="rules.name"
               />
             </div>
             <div class="item">
@@ -29,10 +41,10 @@
                 <div>手机号码:</div>
               </div>
               <van-field
-                  v-model="form.phone"
-                  class="common-field"
-                  placeholder="请输入手机号码"
-                  :rules="rules.phone"
+                v-model="form.phone"
+                class="common-field"
+                placeholder="请输入手机号码"
+                :rules="rules.phone"
               />
             </div>
             <div class="item">
@@ -41,15 +53,19 @@
                 <div>行政区划:</div>
               </div>
               <van-field
-                  v-model="form.area_name"
-                  class="common-field"
-                  placeholder="请选择行政区划"
-                  :rules="rules.area_code"
-                  :right-icon="selectIcon"
-                  readonly
-                  @click="showPicker = true"
+                v-model="form.area_name"
+                class="common-field"
+                placeholder="请选择行政区划"
+                :rules="rules.area_code"
+                :right-icon="selectIcon"
+                readonly
+                @click="showPicker = true"
+              />
+              <RegionSelect
+                v-model="showPicker"
+                :data="form.area_list"
+                @confirm="handleSelect"
               />
-              <RegionSelect v-model="showPicker" :data="form.area_list" @confirm="handleSelect" />
             </div>
             <div class="item">
               <div class="label-box">
@@ -57,10 +73,10 @@
                 <div>所属单位:</div>
               </div>
               <van-field
-                  v-model="form.unit_name"
-                  class="common-field"
-                  placeholder="请输入所属单位"
-                  :rules="rules.unit_name"
+                v-model="form.unit_name"
+                class="common-field"
+                placeholder="请输入所属单位"
+                :rules="rules.unit_name"
               />
             </div>
             <div class="item">
@@ -69,10 +85,10 @@
                 <div>职务:</div>
               </div>
               <van-field
-                  v-model="form.position"
-                  class="common-field"
-                  placeholder="请输入职务"
-                  :rules="rules.position"
+                v-model="form.position"
+                class="common-field"
+                placeholder="请输入职务"
+                :rules="rules.position"
               />
             </div>
             <div class="item">
@@ -81,10 +97,10 @@
                 <div>办公电话:</div>
               </div>
               <van-field
-                  v-model="form.telephone"
-                  class="common-field"
-                  placeholder="请输入办公电话"
-                  :rules="rules.telephone"
+                v-model="form.telephone"
+                class="common-field"
+                placeholder="请输入办公电话"
+                :rules="rules.telephone"
               />
             </div>
             <div class="item">
@@ -93,32 +109,52 @@
                 <div>责任类别:</div>
               </div>
               <van-field
-                  v-show="!responsibilityTypeText"
-                  v-model="responsibilityTypeText"
-                  class="common-field"
-                  :right-icon="selectIcon"
-                  readonly
-                  placeholder="请选择责任类别"
-                  :rules="rules.type_list"
-                  @click="showPicker2 = true"
+                v-show="!responsibilityTypeText"
+                v-model="responsibilityTypeText"
+                class="common-field"
+                :right-icon="selectIcon"
+                readonly
+                placeholder="请选择责任类别"
+                :rules="rules.type_list"
+                @click="showPicker2 = true"
               />
-              <div v-show="responsibilityTypeText" class="common-input" @click="showPicker2 = true">
-                <div v-for="(item, index) in form.type_list" :key="index" class="text-box">
+              <div
+                v-show="responsibilityTypeText"
+                class="common-input"
+                @click="showPicker2 = true"
+              >
+                <div
+                  v-for="(item, index) in form.type_list"
+                  :key="index"
+                  class="text-box"
+                >
                   <div class="text1">{{ item.type_parent }}</div>
                   <div class="text2">{{ getTypeLabel(item) }}</div>
                 </div>
               </div>
-              <responsibility-type v-model="showPicker2" :data="form.type_list" @confirm="onConfirm2" />
+              <responsibility-type
+                v-model="showPicker2"
+                :data="form.type_list"
+                @confirm="onConfirm2"
+              />
             </div>
           </div>
         </div>
       </div>
       <div v-if="pageStatus === '1'" class="common-form-footer">
-        <van-button class="btn primary-btn" type="primary" @click="handleEdit">编辑</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>
-        <van-button class="btn primary-btn" :loading="submitting" type="primary" native-type="submit">提交</van-button>
+        <van-button
+          class="btn primary-btn"
+          :loading="submitting"
+          type="primary"
+          native-type="submit"
+          >提交</van-button
+        >
       </div>
     </van-form>
   </div>
@@ -126,86 +162,91 @@
 
 <script lang="ts" setup name="EditPersonInformation">
 import selectIcon from "@/assets/images/selectIcon.png";
-import {showSuccessToast} from "vant";
+import { showSuccessToast } from "vant";
 import ResponsibilityType from "./responsibilityType.vue";
 import PersonInformation2 from "./personInformation2.vue";
-import {createPersonal, getPersonalSelfInfo, updatePersonal} from "@/api/persons";
-import {deepClone} from "@/utils";
+import {
+  createPersonal,
+  getPersonalSelfInfo,
+  updatePersonal
+} from "@/api/persons";
+import { deepClone } from "@/utils";
 
 // 页面状态 0缺省页 1详情 2新建、编辑
-let pageStatus = ref('1');
+let pageStatus = ref("1");
 // 表单数据
 const form = ref({
-  name: '',
-  phone: '',
-  area_code: '',
+  name: "",
+  phone: "",
+  area_code: "",
   area_list: [],
-  area_name: '',
-  unit_name: '',
-  position: '',
-  telephone: '',
+  area_name: "",
+  unit_name: "",
+  position: "",
+  telephone: "",
   type_list: []
 });
 // 表单校验规则
 const rules = reactive({
-  name: [{ required: true, message: '姓名不能为空' }],
-  phone: [{ 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: '请选择责任类别' }]
+  name: [{ required: true, message: "姓名不能为空" }],
+  phone: [{ 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);
-const handleSelect = (data) => {
-  form.value.area_name = data.length > 0 ? data[data.length - 1].label : '';
-  form.value.area_code = data && data.length > 0 ? data[data.length - 1].id : '';
-}
+const handleSelect = data => {
+  form.value.area_name = data.length > 0 ? data[data.length - 1].label : "";
+  form.value.area_code =
+    data && data.length > 0 ? data[data.length - 1].id : "";
+};
 let showPicker2 = ref(false);
-let responsibilityTypeText = ref('');
+let responsibilityTypeText = ref("");
 // 选择责任类型
-const onConfirm2 = (data) => {
+const onConfirm2 = data => {
   showPicker2.value = false;
   if (data && data.length > 0) {
     form.value.type_list = data;
-    responsibilityTypeText.value = '1';
+    responsibilityTypeText.value = "1";
   } else {
     form.value.type_list = [data];
-    responsibilityTypeText.value = '';
+    responsibilityTypeText.value = "";
   }
 };
-const getTypeLabel = (item) => {
-  let str = !!item.labelData ? item.labelData.toString() : '';
+const getTypeLabel = item => {
+  let str = !!item.labelData ? item.labelData.toString() : "";
   if (!!item.dept_name) {
-    str += `(${item.dept_name})`
+    str += `(${item.dept_name})`;
   }
   if (!!item.denger_point_name) {
-    str += `(${item.denger_point_name})`
+    str += `(${item.denger_point_name})`;
   }
   if (!!item.other_type_2_name) {
-    str += `(${item.other_type_2_name})`
+    str += `(${item.other_type_2_name})`;
   }
   if (!!item.other_type_label && item.other_type_label.length > 0) {
-    str += '('
+    str += "(";
     item.other_type_label.forEach((item2, index2) => {
       if (index2 > 0) {
-        str += '、';
+        str += "、";
       }
       str += item2;
-    })
-    str += ')'
-  };
+    });
+    str += ")";
+  }
   return str;
 };
 const handleEdit = () => {
-  pageStatus.value = '2'
-}
+  pageStatus.value = "2";
+};
 // 是否在提交
 let submitting = ref(false);
 // 返回
 const onCancel = () => {
-  pageStatus.value = '1'
+  pageStatus.value = "1";
 };
 
 // 提交表单
@@ -213,31 +254,33 @@ const onSubmit = () => {
   if (submitting.value) return;
   submitting.value = true;
   const method = !form.value.id ? createPersonal : updatePersonal;
-  method(form.value).then(() => {
-    showSuccessToast('提交成功');
-    getInfo();
-  }).finally(() => {
-    submitting.value = false;
-  })
-}
+  method(form.value)
+    .then(() => {
+      showSuccessToast("提交成功");
+      getInfo();
+    })
+    .finally(() => {
+      submitting.value = false;
+    });
+};
 
 const getInfo = () => {
-  getPersonalSelfInfo().then((res) => {
+  getPersonalSelfInfo().then(res => {
     if (!!res.data && !!res.data.id) {
       if (res.data.type_list && res.data.type_list.length > 0) {
-        responsibilityTypeText.value = '1'
+        responsibilityTypeText.value = "1";
       }
       form.value = res.data;
-      pageStatus.value = '1';
+      pageStatus.value = "1";
     } else {
-      responsibilityTypeText.value = ''
-      pageStatus.value = '0';
+      responsibilityTypeText.value = "";
+      pageStatus.value = "0";
     }
-  })
-}
+  });
+};
 onMounted(() => {
-  getInfo()
-})
+  getInfo();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -259,25 +302,32 @@ onMounted(() => {
       margin-right: 9px;
       flex-shrink: 0;
       .icon-name {
-        background: url('@/assets/images/threePreventionResponsiblePerson/name.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/name.png")
+          no-repeat;
       }
       .icon-phone {
-        background: url('@/assets/images/threePreventionResponsiblePerson/tel.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/tel.png")
+          no-repeat;
       }
       .icon-area {
-        background: url('@/assets/images/threePreventionResponsiblePerson/area.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/area.png")
+          no-repeat;
       }
       .icon-dept {
-        background: url('@/assets/images/threePreventionResponsiblePerson/dept.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/dept.png")
+          no-repeat;
       }
       .icon-duty {
-        background: url('@/assets/images/threePreventionResponsiblePerson/duty.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/duty.png")
+          no-repeat;
       }
       .icon-telephone {
-        background: url('@/assets/images/threePreventionResponsiblePerson/phone.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/phone.png")
+          no-repeat;
       }
       .icon-responsibility {
-        background: url('@/assets/images/threePreventionResponsiblePerson/responsibility.png') no-repeat;
+        background: url("@/assets/images/threePreventionResponsiblePerson/responsibility.png")
+          no-repeat;
       }
       .icon-name,
       .icon-phone,
@@ -311,7 +361,7 @@ onMounted(() => {
   }
 }
 .common-input {
-  border: 1px solid #DCE0EE;
+  border: 1px solid #dce0ee;
   border-radius: 2px;
   min-height: 30px;
   line-height: 30px;
@@ -319,7 +369,7 @@ onMounted(() => {
   padding: 0 18px 0 5px;
   position: relative;
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 50%;
     right: 0;
@@ -334,7 +384,7 @@ onMounted(() => {
   font-size: 16px;
   .text2 {
     font-size: 12px;
-    color: #A3A7AD;
+    color: #a3a7ad;
     letter-spacing: 0;
     line-height: 26px;
   }
@@ -347,7 +397,8 @@ onMounted(() => {
   .empty-bg {
     width: 220px;
     height: 190px;
-    background: url("@/assets/images/threePreventionResponsiblePerson/empty.png") no-repeat;
+    background: url("@/assets/images/threePreventionResponsiblePerson/empty.png")
+      no-repeat;
     background-size: 100% 100%;
   }
   .empty-text1 {
@@ -358,12 +409,12 @@ onMounted(() => {
   .empty-text2 {
     font-size: 14px;
     line-height: 26px;
-    color: #A3A7AD;
+    color: #a3a7ad;
     text-align: center;
     margin-bottom: 10px;
   }
   .primary-btn2 {
-     width: 320px;
+    width: 320px;
   }
 }
 </style>

src/views/threePreventionResponsiblePerson/index.vue

@@ -10,14 +10,14 @@
     <div class="select-box">
       <div class="adress-box" @click="showStructure">
         <div class="blue-rectangle" />
-        <div class="block1" v-if="!!requestParameters.checkedId">
+        <div v-if="!!requestParameters.checkedId" class="block1">
           <div>{{ upOneLevel }}</div>
-          <div style="margin: 0 5px">{{ '>' }}</div>
+          <div style="margin: 0 5px">{{ ">" }}</div>
           <div style="color: #1d92ff">{{ adressContent }}</div>
         </div>
-        <div class="block1" v-else>
+        <div v-else class="block1">
           <div>广东省</div>
-          <div style="margin: 0 5px">{{ '>' }}</div>
+          <div style="margin: 0 5px">{{ ">" }}</div>
           <div style="color: #1d92ff">茂名市</div>
         </div>
       </div>
@@ -55,7 +55,7 @@
       finished-text="没有更多了"
       @load="onLoad"
     >
-      <div v-for="(item,index) in persons" :key="item.id">
+      <div v-for="(item, index) in persons" :key="item.id">
         <div class="person-box" @click="showPersonalInformation(item)">
           <div class="circle">
             <img
@@ -71,10 +71,21 @@
               </div>
             </div>
             <div class="text-ellipsis">{{ item.position }}</div>
-            <div style="margin-top: 5px; margin-bottom: 10px;display: flex;flex-wrap: wrap">
-              <span v-for="i in item.type_parent_list" :key="i" class="type-name">
+            <div
+              style="
+                margin-top: 5px;
+                margin-bottom: 10px;
+                display: flex;
+                flex-wrap: wrap;
+              "
+            >
+              <span
+                v-for="i in item.type_parent_list"
+                :key="i"
+                class="type-name"
+              >
                 {{ i.type_parent }}
-                <span v-if="index === item.length - 1" class="force-newline"></span>
+                <span v-if="index === item.length - 1" class="force-newline" />
               </span>
             </div>
           </div>
@@ -83,7 +94,11 @@
       </div>
     </van-list>
   </div>
-  <organizationalStructure v-if="isShowStructure" v-model:isShowStructure="isShowStructure" @confirm="handleSelect" />
+  <organizationalStructure
+    v-if="isShowStructure"
+    v-model:isShowStructure="isShowStructure"
+    @confirm="handleSelect"
+  />
 </template>
 
 <script setup lang="ts">
@@ -177,7 +192,7 @@ const filterNode = (value, data) => {
   return data.label.indexOf(value) !== -1;
 };
 let selectedTreeId = ref([]);
-const handleSelect = (data) => {
+const handleSelect = data => {
   adressContent.value = data.label;
   upOneLevel.value = data.value;
   requestParameters.value.checkedId = data.id;

src/views/threePreventionResponsiblePerson/organizationalStructure.vue

@@ -54,7 +54,11 @@
         </div>
       </div>
     </div>
-    <editPersonInformation v-if="isShowInformation" :isShowStructure="isShowStructure" @toHomepage="closeContent"/>
+    <editPersonInformation
+      v-if="isShowInformation"
+      :isShowStructure="isShowStructure"
+      @toHomepage="closeContent"
+    />
     <div class="footer">
       <div class="footer-item1">
         <img v-if="!isShowInformation" :src="archSel" style="height: 24px" />
@@ -72,7 +76,13 @@
           style="height: 24px"
         />
         <img v-else :src="inform_checked" style="height: 24px" />
-        <div v-if="isShowInformation" style="color: #1d92ff" @click="handleToPersonInfo">个人信息</div>
+        <div
+          v-if="isShowInformation"
+          style="color: #1d92ff"
+          @click="handleToPersonInfo"
+        >
+          个人信息
+        </div>
         <div v-else @click="handleToPersonInfo">个人信息</div>
       </div>
     </div>