Merge branch 'main' of https://git.cityme.com.cn/xiangshan/ggfwjsc

src/view/person/index.vue

@@ -77,16 +77,15 @@
         </div>
       </div>
       <div class="person-main">
-        <div class="main-tag-item" @click="onClickTag2('出生')">出生</div>
+        <div
-        <div class="main-tag-item" @click="onClickTag2('学习')">学习</div>
+          v-for="(item, index) in dataMyTag.myTag1"
-        <div class="main-tag-item" @click="onClickTag2('工作')">工作</div>
+          class="main-tag-item"
-        <div class="main-tag-item" @click="onClickTag2('婚育')">婚育</div>
+          :class="item.name == tableType.title ? 'main-tag-item_active' : ''"
-        <div class="main-tag-item" @click="onClickTag2('置业')">置业</div>
+          @click="onClickTag2(item.name)"
-        <div class="main-tag-item" @click="onClickTag2('退休养老')">
+        >
-          退休<br />养老
+          <span v-if="item.name == '退休养老'"> 退休<br />养老</span>
+          <span v-else>{{ item.name }}</span>
         </div>
-        <div class="main-tag-item" @click="onClickTag2('身后事')">身后事</div>
-        <div class="main-tag-item" @click="onClickTag2('综合')">综合</div>
         <div class="person-main-person"></div>
         <div class="back" @click="back()">
           <img src="@/assets/person/back.png" alt="" />
@@ -94,15 +93,16 @@
         </div>
       </div>
       <div class="person-side">
+        <div v-if="rightList.length < 1">
           <div class="my-label">
-          <div class="my-label-title">养老金发放情况</div>
+            <div class="my-label-title">{{ tableType.title }}</div>
           </div>
           <div class="my-table">
             <el-table
               :data="data"
               border
               style="width: 100%"
-            max-height="250"
+              max-height="500"
               :header-cell-style="{
                 border: 'none',
                 height: '60px',
@@ -117,24 +117,15 @@
                 color: '#fff',
               }"
             >
+              <template v-for="item in tableType.columns">
                 <el-table-column
-              prop="yljlx"
+                  :width="item.width"
-              label="养老金类型"
+                  :prop="item.property"
-              width="160"
+                  :label="item.label"
                   align="center"
-            />
+                >
-            <el-table-column
+                </el-table-column>
-              prop="yljffrq"
+              </template>
-              label="发放日期"
-              width="160"
-              align="center"
-            />
-            <el-table-column
-              prop="yljffje"
-              label="发放金额(元）"
-              width="160"
-              align="center"
-            />
             </el-table>
             <el-pagination
               background
@@ -147,10 +138,69 @@
               @current-change="handlePaginationYL"
             />
           </div>
-        <div class="my-label">
-          <div class="my-label-title">医疗金发放情况</div>
         </div>
-        <div class="my-table">
+        <div v-else>
+          <div class="my-label">
+            <div class="my-label-title">基本信息</div>
+          </div>
+          <div class="my-info">
+            <div class="my-info-item">
+              <div class="my-info-label">姓&emsp;&emsp;名</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.nm || baseInfo.xm }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">证件类型</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.zjlx || "身份证" }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">证件号码</div>
+              <div class="my-info-content">
+                <p>******************</p>
+                <!-- <p>{{ baseInfo.identNo }}</p> -->
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">政治面貌</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.zzmm || "" }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">居住状态</div>
+              <div class="my-info-content">
+                <p v-if="baseInfo.jzzt == 1">居住</p>
+                <p v-else-if="baseInfo.jzzt == 0">未居住</p>
+                <p v-else></p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">民&emsp;&emsp;族</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.ethnic }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">性&emsp;&emsp;别</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.gender }}</p>
+              </div>
+            </div>
+            <div class="my-info-item">
+              <div class="my-info-label">户口登记地</div>
+              <div class="my-info-content">
+                <p>{{ baseInfo.domicAddr || baseInfo.dz }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="my-label">
+          <div class="my-label-title">医疗金发放情况</div>
+        </div> -->
+        <!-- <div class="my-table">
           <el-table
             :data="data1"
             border
@@ -205,7 +255,7 @@
             v-model:current-page="pagination1.currentPage"
             @current-change="handlePaginationYLJ"
           />
-        </div>
+        </div> -->
       </div>
     </div>
     <Dialog
@@ -318,6 +368,51 @@ const dataMyTag = reactive({
       show: 0,
     },
   ],
+  myTag1: [
+    {
+      name: "出生",
+    },
+    {
+      name: "学习",
+    },
+    {
+      name: "工作",
+    },
+    {
+      name: "婚育",
+    },
+    {
+      name: "置业",
+    },
+    {
+      name: "退休养老",
+    },
+    {
+      name: "身后事",
+    },
+    {
+      name: "综合",
+    },
+  ],
+  /**
+   * @type {Array}
+   * @description 表格配置
+   */
+  tableList: [
+    {
+      name: "yljlx",
+      label: "养老金类型",
+      width: "160",
+    },
+    {
+      name: "yljffrq",
+      label: "发放日期",
+    },
+    {
+      name: "yljffje",
+      label: "发放金额(元）",
+    },
+  ],
 });
 //存放养老金数据
 const data = ref([
@@ -342,6 +437,7 @@ const data = ref([
     sum: "1000",
   },
 ]);
+
 const pagination = reactive({
   current: 1,
   pageSize: 5,
@@ -388,7 +484,7 @@ const pagination1 = reactive({
 const dialogShow = ref(false);
 const tableType = reactive({
   url: "",
-  title: "",
+  title: "出生",
   columns: [],
   data: [],
 });
@@ -548,6 +644,27 @@ const columnsList = reactive({
       },
     ],
   },
+  综合: {
+    url: "/api/ggfwyth/ysyzt/getRyzhxx",
+    column: [
+      // {
+      //   label: "身份证号码",
+      //   property: "identNo",
+      // },
+      {
+        label: "医疗保险类型",
+        property: "ylbxlx",
+      },
+      {
+        label: "发放日期",
+        property: "jfrq",
+      },
+      {
+        label: "缴费金额",
+        property: "jfje",
+      },
+    ],
+  },
 });
 //特殊标签弹框
 const onClickTag = (item) => {
@@ -561,7 +678,6 @@ const onClickTag2 = (name) => {
   tableType.url = columnsList[name].url;
   tableType.columns = columnsList[name].column;
   getTable(tableType.url);
-  dialogShow.value = true;
 };
 const paginationDialog = reactive({
   current: 1,
@@ -569,6 +685,10 @@ const paginationDialog = reactive({
   total: 50,
   showTotal: 0,
 });
+//判断右侧显示的为表格还是列表，0为列表，1为表格
+const rightType = ref(0);
+//存放右侧单条数据
+const rightList = ref([]);
 //获取表格数据
 const getTable = (url) => {
   http
@@ -580,6 +700,17 @@ const getTable = (url) => {
     .then((res) => {
       if (res.code == 200) {
         tableType.data = res.data;
+        if (tableType.data?.length > 1) {
+          rightType.value = 1;
+        } else {
+          if (tableType.data == null) {
+            rightList.value = [];
+          } else {
+            rightList.value = tableType.data[0];
+          }
+          rightType.value = 0;
+        }
+        console.log(rightType.value);
       }
     });
 };
@@ -680,6 +811,7 @@ watch(
     identNo.value = props.message.identNo;
     getData(props.message.identNo);
     getYlj();
+    onClickTag2("出生");
     jump.value = "map";
   }
 );
@@ -692,6 +824,7 @@ onMounted(() => {
     // getData("3");
     // identNo.value="3"
     getYlj();
+    onClickTag2("出生");
   } else {
     jump.value = "map";
   }
@@ -810,16 +943,17 @@ onMounted(() => {
         right: 110px;
       }
 
-      &:hover {
+      // &:hover {
-        background: url("../../assets/person/tag-active.png") no-repeat;
+      //   background: url("../../assets/person/tag-active.png") no-repeat;
-        background-size: 100% 100%;
+      //   background-size: 100% 100%;
-        color: #00fffc;
+      //   color: #00fffc;
-      }
+      // }
     }
 
     .main-tag-item_active {
       background: url("../../assets/person/tag-active.png") no-repeat;
-      background-size: cover;
+      background-size: 100% 100%;
+      color: #00fffc;
     }
 
     .person-main-person {