change btn

src/components/common/pica-area.vue

@@ -19,15 +19,22 @@
             class="cancel-btn"
             @click="cancelSelect"
           >取消</span>
-          <h3>选择地区</h3>
+          <van-tabs
+            v-model="activetab"
+            color="#449284"
+            @change="tabchange"
+          >
+            <van-tab title="地区"></van-tab>
+            <van-tab title="层级"></van-tab>
+          </van-tabs>
           <button
             class="submit-btn"
             @click="confirm"
           >
             确定
           </button>
-          <!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
         </div>
+        <div v-show="activetab == 0">
           <div
             v-show="areaList.currentOrgList.length"
             class="my-org"
@@ -182,12 +189,34 @@
             </div>
           </div>
         </div>
+        <div v-show="activetab == 1">
+          <div
+            class="address-content"
+            @touchmove.stop
+          >
+            <ul
+            >
+              <li
+                v-for="(i, index) in hl"
+                :key="index"
+                :class="{ active: hlselected == i.hospitalId }"
+                @click="hlSelect(i, index)"
+              >
+                <span>{{ i.hospitalName }}</span>
+                <span v-show=" hlselected == i.hospitalId">
+                  <img src="../../assets/images/sort-select-icon.png">
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { getAreaOrOrgList } from '../../service';
+import { getAreaOrOrgList, getAreaOrOrgList2 } from '../../service';
 
 export default {
   name: 'PicaArea',
@@ -237,6 +266,9 @@ export default {
         regionId: '',
       },
       currentOrgList: [],
+      activetab: '1',
+      hl:[],
+      hlselected: ''
     };
   },
   computed: {
@@ -277,6 +309,7 @@ export default {
       this.queryParams.projectId = cQuery.projectId || '';
       if (this.queryParams.projectId) {
         this.getProvinceData(this.queryParams);
+        this.getOrgData2();
       }
     }
   },
@@ -383,6 +416,15 @@ export default {
       });
     },
 
+    async getOrgData2(params) {
+      await getAreaOrOrgList2(params).then((res) => {
+        if (res.code === '000000') {
+          console.log('-res', res);
+          this.hl = res.data || [];
+        }
+      });
+    },
+
     // 选择省份的操作
     provinceSelect(item, idx, isCurrent) {
       this.value.regionId = item.id;
@@ -591,17 +633,24 @@ export default {
       }
     },
     confirm() {
-      this.$emit('confirm', this.value);
+      console.log('-this.value', this.value);
+      const v = this.activetab == 0 ? this.value : this.hlselected;
+      this.$emit('confirm', v);
     },
     cancelSelect() {
       this.$emit('cancel', false);
     },
+    tabchange(e) {
+      console.log('e', e, this.activetab);
+    },
+    hlSelect(i) {
+      this.hlselected = i.hospitalId;
+    }
   },
 };
 </script>
 <style lang="scss" scoped>
 .select-wrapper {
-  font-family: PingFangSC-Regular;
   .mask {
     position: fixed;
     z-index: 1000000015;
@@ -611,7 +660,6 @@ export default {
     bottom: 0;
     background: rgba(55, 56, 57, 0.6);
   }
-
   .address-wrap {
     position: absolute;
     width: 100%;
@@ -656,7 +704,6 @@ export default {
         }
       }
     }
-
     .address-select {
       width: 100%;
       height: auto;
@@ -702,7 +749,6 @@ export default {
           text-overflow: ellipsis;
           white-space: nowrap;
           position: relative;
-          // flex: 1 0 auto;
           &:last-of-type {
             padding-right: 15px;
           }
@@ -729,15 +775,14 @@ export default {
           }
         }
       }
-
+    }
+  }
   .address-content {
     position: relative;
     width: 100%;
-        // height: 100%;
     height: 196px;
     overflow: hidden;
     box-sizing: border-box;
-
     ul {
       width: 100%;
       height: 196px;
@@ -779,8 +824,6 @@ export default {
       }
     }
   }
-    }
-  }
   .my-org {
     margin: 0 15px 15px;
     & > span {

src/service/index.js

@@ -19,7 +19,14 @@ export const getAreaOrOrgList = async (params) => {
     url: 'stats/region',
   });
 };
-
+export const getAreaOrOrgList2 = async (params) => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: 'hospital/hospitalStats/portal/hospital/deepLowers',
+  });
+};
 /**
  * 获取区域（一般是乡镇）下的机构列表
  */

src/views/index.vue

@@ -687,6 +687,10 @@ export default {
         return;
       }
       this.clearParams();
+      if(selData.hospitalId) {
+        console.log('--selData', selData);
+        this.queryGDParams.hospitalIdList = [selData.hospitalId];
+      }
       this.queryGDParams.regionId = selData.regionId;
       this.CNTParams.regionId = selData.regionId;
       this.getHospitalsCNT(this.CNTParams);