feat：找医疗机构页面组件及子组件

src/components/input/BaseInput.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="search-input">
+    <el-input
+      :placeholder="placeholder"
+      :value="value"
+      @input="onInput($event)"
+      @blur="$emit('onBlur')"
+      @focus="$emit('onFocus')"
+      @clear="$emit('onClear', value)"
+      clearable>
+    </el-input>
+  </div>
+</template>
+
+<script>
+import { Input } from 'element-ui'
+
+export default {
+  name: 'Search-Input',
+  props: {
+    placeholder: String,
+    value: String
+  },
+  components: {
+    [Input.name]: Input
+  },
+  model: {
+    prop: 'value',
+    event: 'onInput'
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    onInput (e) {
+      this.$emit('onInput', e)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .search-input {
+    position: relative;
+    width: 640px;
+    @include diy-icon('search-white', 24);
+
+    ::v-deep .el-input__inner {
+      border-radius: 4px;
+      background: #FFFFFF;
+      border: 1px solid #E0E0E0;
+      padding: 0 16px;
+      color: #1D1D1D;
+      font-family: Microsoft YaHei;
+      font-size: 16px;
+      line-height: 24px;
+      height: 36px;
+    }
+
+    ::v-deep .el-input-group__append {
+      height: 42px;
+      box-sizing: border-box;
+      text-align: center;
+      border: none;
+      border-radius: 0px 22px 22px 0px;
+      background: #2CB7CA;
+
+      .el-button {
+        padding: 8px 19px;
+        margin-top: -4px;
+      }
+    }
+  }
+</style>

src/components/push-list/MedicalList.vue

@@ -0,0 +1,483 @@
+<template>
+  <el-card class="potential-list-card">
+    <div class="header-box flex-r-c sb">
+      <span class="card-title">{{title}}</span>
+      <div class="flex-r-c center" v-show="!showEmpty">
+        <div class="link-text" @click="changeSort(0)" :class="{active: listState.sort === 0}">数量倒序</div>
+        <div class="link-text" @click="changeSort(1)" :class="{active: listState.sort === 1}">金额倒序</div>
+      </div>
+    </div>
+    <div class="info-list" v-loading="listState.loading">
+      <div
+        v-for="(item, index) in getListData"
+        :key="index"
+        @click="$emit('goDetail', item)">
+        <div v-show="!item.remove" class="flex-r-c center sb card-list-item">
+          <div class="flex-c-c left">
+            <div class="flex-r-c center sb">
+              <div class="flex-r-c center">
+                <i class="el-icon-jy-icon-company"></i>
+                <span class="text--title">{{item.company_name}}</span>
+              </div>
+            </div>
+            <div class="flex-r-c card-bottom-info">
+              <span class="text--sm-name">项目数量：</span>
+              <span class="text--sm-value">{{ item.project_count || '--'}}</span>
+              <span class="text--sm-name">项目总金额：</span>
+              <span class="text--sm-value">{{ item.project_money || '--'}}</span>
+              <span class="text--sm-name">所在地：</span>
+              <span class="text--sm-value" v-if="item.area || item.city">{{item.area}}&nbsp;&nbsp;{{item.area.slice(0,2) !== item.city.slice(0,2) ? item.city : ''}}</span>
+              <span class="text--sm-value" v-else>-</span>
+            </div>
+          </div>
+          <div class="pcor-right-group flex-c-c right">
+            <div class="flex-r-c center" @click.stop="changeClaim(item)">
+              <i :class="'el-icon-jy-renling' + (item.isClaim ? '-active' : '')"></i>
+              <span>{{item.isClaim ? '已' : ''}}认领</span>
+            </div>
+          </div>
+          <!-- <div class="pcor-right-group flex-c-c right" v-else-if="filters.pcor === 'C'">
+            <div class="flex-r-c center" @click.stop="changeFollow(item)">
+              <i :class="'el-icon-jy-heart_' + (item.follow ? 'solid' : 'stroke')"></i>
+              <span>{{item.follow ? '已' : ''}}认领</span>
+            </div>
+          </div> -->
+        </div>
+      </div>
+      <empty v-if="showEmpty" :images="require('@/assets/images/empty/jy-smile.png')">
+        <div v-if="isAllFirst">
+          <span></span>
+        </div>
+        <div v-else>
+          <span>暂无匹配信息</span>
+        </div>
+      </empty>
+    </div>
+    <div class="el-pagination-container" v-if="getShowPagination">
+      <el-pagination
+        background
+        layout="prev, pager, next, slot, jumper"
+        :hide-on-single-page="true"
+        :current-page="listState.pageNum"
+        :page-size="listState.pageSize"
+        :total="listState.list.length"
+        @current-change="onPageChange"
+      >
+        <em class="page-size-border">{{ listState.pageSize }}条/页</em>
+      </el-pagination>
+    </div>
+    <el-dialog
+      custom-class="sub-cur-dialog"
+      :visible.sync="dialog.group"
+      :close-on-click-modal="false"
+      :show-close="false"
+      :destroy-on-close="true"
+      :lock-scroll="false"
+      center
+      width="460px"
+    >
+      <GroupCard
+        :initGroupInfo="this.cur.group"
+        @onCancel="dialog.group = false"
+        @onConfirm="saveGroupData"
+      >
+        <div slot="header">选择分组</div>
+      </GroupCard>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script>
+import { Pagination, Card, Button, Dialog } from 'element-ui'
+import Empty from '@/components/common/Empty.vue'
+import GroupCard from '@/components/selector/GroupSelector.vue'
+import { moneyUnit } from '@/utils/'
+import { getSearchMedicalList, distributorClaim } from '@/api/modules/'
+
+export default {
+  name: 'potential-list',
+  components: {
+    [Pagination.name]: Pagination,
+    [Card.name]: Card,
+    [Button.name]: Button,
+    [Dialog.name]: Dialog,
+    Empty,
+    GroupCard
+  },
+  filters: {
+    formatMoney (value) {
+      return moneyUnit(value)
+    }
+  },
+  props: {
+    title: {
+      type: String,
+      default: '医疗机构列表'
+    },
+    filters: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  computed: {
+    showEmpty () {
+      return this.listState.list.length === 0 && this.listState.loaded
+    },
+    getShowPagination () {
+      let show = true
+      if (this.listState.pageNum === 1 && this.listState.list.length < this.listState.pageSize) {
+        show = false
+      }
+      return show
+    },
+    getFilters () {
+      return this.filters
+    },
+    getListData () {
+      return this.listState.list.slice((this.listState.pageNum - 1) * 10, (this.listState.pageNum) * 10)
+    }
+  },
+  data () {
+    return {
+      isAllFirst: true,
+      listState: {
+        loaded: true, // 是否已经搜索过
+        loading: false,
+        pageNum: 1, // 当前页
+        pageSize: 10, // 每页多少条数据
+        total: 0, // 一共多少条数据
+        sort: 0,
+        list: [] // 查询请求返回的数据
+      },
+      dialog: {
+        group: false
+      },
+      cur: {
+        group: 'A', // 当前点击编辑的分组信息
+        fid: ''
+      },
+      selectItem: {}
+    }
+  },
+  created () {},
+  methods: {
+    async changeClaim (item) {
+      // this.selectItem = item
+      // this.cur.fid = item.entId
+      // if (this.filters.pcor === 'R') {
+      //   if (!item.follow) {
+      //     this.dialog.group = true
+      //   } else {
+      //     this.$emit(item.follow ? 'remove' : 'follow', item)
+      //     item.follow = !item.follow
+      //     this.$forceUpdate()
+      //   }
+      // } else if (this.filters.pcor === 'C') {
+      //   this.$emit(item.follow ? 'remove' : 'follow', item)
+      //   setTimeout(() => {
+      //     item.follow = !item.follow
+      //   }, 1000)
+      //   this.$forceUpdate()
+      // }
+      const { error_code: code, error_msg: msg } = await distributorClaim({
+        type: 1,
+        ent_id: item.company_id
+      })
+      if (code === 0) {
+        this.$forceUpdate()
+      } else {
+        this.$toast(msg, 2000)
+      }
+    },
+    changeDelete (item) {
+      item.remove = true
+      this.$forceUpdate()
+      this.$emit('delete', item)
+    },
+    changeSort (i) {
+      this.listState.sort = i
+      this.listState.pageNum = 1
+      this.listState.list = []
+      this.listState.total = 0
+      this.getList()
+    },
+    // 恢复数据至第一次请求的状态(页码等)
+    resetListState () {
+      const state = {
+        loaded: false,
+        loading: false,
+        pageNum: 1,
+        total: 0,
+        list: []
+      }
+      Object.assign(this.listState, state)
+    },
+    saveGroupData (data) {
+      console.log(data, '保存分组')
+      this.selectItem.group = data
+      this.$emit(this.selectItem.follow ? 'remove' : 'follow', this.selectItem)
+      this.selectItem.follow = !this.selectItem.follow
+      this.$forceUpdate()
+    },
+    doQuery (filters) {
+      this.resetListState()
+      this.getList(filters)
+    },
+    async getList () {
+      const query = {
+        sort: this.listState.sort,
+        company_name: this.getFilters.name,
+        area_code: JSON.stringify(this.getFilters.area),
+        level_code: this.getFilters.level,
+        mi_type_code: this.getFilters.type,
+        business_type_code: this.getFilters.nature
+        // sdequipment_code: this.getFilters.scope
+      }
+
+      if (query && Object.keys(query).length > 0) {
+        for (const key in query) {
+          if (!query[key]) {
+            delete query[key]
+          }
+        }
+      }
+      console.log(query, 'query')
+      this.listState.loading = true
+      this.listState.loaded = false
+      // 判断是否无筛选条件
+      this.isAllFirst = false
+      const res = await getSearchMedicalList(query)
+      this.listState.loading = false
+      this.listState.loaded = true
+      if (res.error_code === 0) {
+        this.listState.list = res.data || []
+      } else {
+        this.listState.list = []
+      }
+    },
+    onPageChange (p) {
+      this.listState.pageNum = p
+      // this.getList()
+    },
+    getMore () {
+      this.$emit('getMore')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @include diy-icon('edit', 20, 20);
+  @include diy-icon('icon-company', 24, 24);
+  @include diy-icon('heart_stroke', 18, 18);
+  @include diy-icon('heart_solid', 18, 18);
+   @include diy-icon('renling', 18, 18);
+    @include diy-icon('renling-01', 18, 18);
+  ::v-deep .el-icon-jy-icon-company {
+    margin-right: 8px;
+  }
+  // card样式重置
+  ::v-deep {
+    .el-card__header {
+      margin: 0 40px;
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .el-card__body {
+      padding: 0 0 20px;
+    }
+    .el-dialog__header {
+      padding: 0;
+    }
+    .el-dialog__body {
+      padding: 0;
+    }
+    .empty-container {
+      margin-top: 60px;
+    }
+    .get-more {
+      display: flex;
+      .el-icon-arrow-right {
+        margin-left: 4px;
+        order: 2;
+      }
+    }
+    .el-pagination__jump{
+      margin-left: 8px;
+    }
+  }
+  .sub-manager {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 24px;
+    color: #1d1d1d;
+    border-color: #E0E0E0;
+    &.el-button:focus,
+    &.el-button:hover {
+      color: inherit;
+      background-color: inherit;
+    }
+  }
+
+  .potential-list-card {
+    .header-box {
+      padding: 14px 40px;
+    }
+    .card-title {
+      position: relative;
+      line-height: 28px;
+      color: $color_main;
+      &::after{
+        position: absolute;
+        left: 0;
+        bottom: -12px;
+        content: '';
+        width: 100%;
+        height: 2px;
+        background: $color_main;
+      }
+    }
+
+    .pcor-right-group {
+      > span {
+        font-size: 12px;
+        line-height: 23px;
+        color: #AAAAAA;
+        margin-top: 17px;
+        &:hover {
+          color: #2CB7CA;
+        }
+      }
+      i + span {
+        margin-left: 4px;
+        font-size: 14px;
+        line-height: 22px;
+        color: #686868;
+      }
+    }
+
+    .link-text {
+      font-size: 14px;
+      line-height: 24px;
+      text-decoration-line: underline;
+      color: #1D1D1D;
+      cursor: pointer;
+      & + .link-text {
+        margin-left: 20px;
+      }
+      &:hover,&.active {
+        color: #2CB7CA;
+      }
+    }
+    .text--{
+      &sm-value {
+        color: #1D1D1D;
+      }
+      &title {
+        font-size: 16px;
+        line-height: 24px;
+        color: #1D1D1D;
+      }
+      &sm-time {
+        font-size: 12px;
+        line-height: 20px;
+        color: #999999;
+      }
+    }
+    .card-list-item {
+      padding: 24px 0;
+      padding-left: 40px;
+      padding-right: 40px;
+      box-sizing: border-box;
+      box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
+      cursor: pointer;
+      &:hover {
+        background: #F5F6F7;
+        .text--title,
+        .text--sm-value {
+          color: #2CB7CA;
+        }
+      }
+    }
+    .card-bottom-info {
+      margin-top: 12px;
+      justify-content: flex-start;
+      text-align: left;
+      font-size: 14px;
+      line-height: 22px;
+      color: #999999;
+      .text--sm-value {
+        margin-right: 40px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    .sub-manager {
+      float: right;
+    }
+    .info-list {
+      min-height: 100px;
+      border-top: 1px solid transparent;
+    }
+    .add-key-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 32px;
+      padding: 8px 16px;
+      color: #F7F9FA;
+      border-radius: 6px;
+      background-color: #2ABED1;
+      cursor: pointer;
+      .icon-chahao {
+        margin-right: 4px;
+        transform: rotate(-45deg);
+      }
+      .button-text {
+        margin-left: 4px;
+        white-space: nowrap;
+      }
+    }
+    .icon-chahao {
+      position: relative;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      &:before,
+      &:after {
+        position: absolute;
+        content: '';
+        background-color: #fff;
+        top: 50%;
+        left: 50%;
+        width: 14px;
+        height: 2px;
+        border-radius: 2px;
+      }
+      &:before {
+        transform: translate(-50%,-50%) rotate(45deg);
+      }
+      &:after {
+        transform: translate(-50%,-50%) rotate(-45deg);
+      }
+    }
+    .el-pagination-container  {
+      margin-right: 40px;
+    }
+    .page-size-border{
+      display: inline-block;
+      padding: 0 15px;
+      height: 28px;
+      line-height: 28px;
+      border: 1px solid #ECECEC;
+      border-radius: 2px;
+      font-size: 14px;
+      color: #1D1D1D;
+    }
+  }
+</style>

src/components/scope/components/Edit.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="edit-form">
     <div class="input-box">
-      <div class="input-box-title">{{title}}关键词</div>
+      <div class="input-box-title">{{title}}关键词组</div>
       <div class="item">
         <div class="item-label">关键词：</div>
         <div class="item-value">
@@ -122,7 +122,7 @@ export default {
     },
     showMatch: {
       type: Boolean,
-      default: false
+      default: true
     },
     keyPlaceholder: {
       type: String,

src/components/scope/components/List.vue

@@ -100,7 +100,7 @@ export default {
     },
     showMatch: {
       type: Boolean,
-      default: false
+      default: true
     },
     isNesting: {
       type: Boolean,

src/components/selector/MedicalSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <selector-card
-    class="buyerclass-selector"
+    class="medical-selector"
     :cardType="selectorType"
     @onConfirm="onConfirm"
     @onCancel="onCancel"
@@ -21,7 +21,7 @@
 import SelectorCard from '@/components/selector/SelectorCard.vue'
 import MedicalSelectorContent from '@/components/selector/MedicalSelectorContent.vue'
 export default {
-  name: 'buyerclass-selector',
+  name: 'medical-selector',
   components: {
     SelectorCard,
     MedicalSelectorContent
@@ -45,10 +45,9 @@ export default {
   data () {
     return {}
   },
-  created () {},
   methods: {
     setCateState (data) {
-      return this.$refs.content.setCateState(data)
+      return this.$refs.content.setInfoTypeState(data)
     },
     getSelected () {
       return this.$refs.content.getSelected()
@@ -59,9 +58,6 @@ export default {
     onConfirm () {
       const selected = this.getSelected()
       this.$emit('onConfirm', selected)
-      if (this.$refs.content.notClass) {
-        this.$emit('onOtherConfirm', this.$refs.content.notClass)
-      }
     },
     onChange (selected) {
       this.$emit('onChange', selected)

src/views/medical/FindMedical.vue

@@ -9,29 +9,32 @@
               <span>业务范围</span>
             </div>
           </CommonTab>
-          <ForFilter class="filter-input" @onPageChange="onFilterChange" searchName="医疗机构名称" searchPlaceholder="请输入医疗机构名称"></ForFilter>
+          <div class="input-Selector">
+            <div class="filter-label filter-input-label">医疗机构名称：</div>
+            <BaseInput placeholder="请输入医疗机构名称" v-model="filters.name"></BaseInput>
+          </div>
           <AreaSelector  @onChange="changeArea" ref="areaSelector" selectorType="line">
             <div slot="header" class="filter-label">选择区域：</div>
           </AreaSelector>
-          <MedicalSelector selectorType="line">
+          <MedicalSelector @onChange="changeHospitalType" ref="typeSelector" selectorType="line" :initCate="hospitalTypeData">
             <div slot="header" class="filter-label">机构类型：</div>
           </MedicalSelector>
-          <MedicalSelector selectorType="line">
+          <MedicalSelector  @onChange="changeHospitalLevel" ref="levelSelector" selectorType="line" :initCate="hospitalLevelData">
             <div slot="header" class="filter-label">医院等级：</div>
           </MedicalSelector>
-          <MedicalSelector selectorType="line">
+          <MedicalSelector  @onChange="changeHospitalNature" ref="natureSelector" selectorType="line" :initCate="hospitalNatureData">
             <div slot="header" class="filter-label">经营性质：</div>
           </MedicalSelector>
           <BusinessScopeSelector class="ex-line-2" @onChange="changeBusiness" ref="businessScopeSelector" :initList="getScopeKeyList"  selectorType="line">
             <div slot="header" class="filter-label">业务范围：</div>
           </BusinessScopeSelector>
           <div class="flex-r-c center button-group">
-            <button class="button-default" @click="changeSubmitInfo(false)">重置</button>
+            <button class="button-default" @click="resetFilter">重置</button>
             <button class="button-submit" @click="changeSubmitInfo(true)">确定</button>
           </div>
         </div>
         <div class="medical-list-container">
-          <!-- <PotentialList></PotentialList> -->
+          <MedicalList :filters="filters" ref="pushList" @goDetail="goDetail"></MedicalList>
         </div>
       </template>
     </forLayOut>
@@ -45,44 +48,55 @@
 import '@/assets/style/iconfont.css'
 import { Drawer } from 'element-ui'
 import forLayOut from '@/components/forecast/ForLayout.vue'
-import ForFilter from '@/components/medical/FollowFilter.vue'
+import BaseInput from '@/components/input/BaseInput'
 import CommonTab from '@/components/medical/CommonTab.vue'
 import AreaSelector from '@/components/selector/AreaSelector.vue'
 import BusinessScopeSelector from '@/components/selector/BusinessScopeSelector.vue'
 import MedicalSelector from '@/components/selector/MedicalSelector'
-// import PotentialList from '@/components/push-list/PotentialList.vue'
+import MedicalList from '@/components/push-list/MedicalList.vue'
 import ScopeContent from '@/components/scope/index.vue'
 import DrawerCard from '@/components/drawer/Drawer'
-
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
+import { getMedicalFilter } from '@/api/modules/'
+import { transData } from '@/utils/'
+import { hospitalNatureExp } from '@/assets/js/selector.js'
 export default {
   name: 'findMedical',
   components: {
     [Drawer.name]: Drawer,
     forLayOut,
     CommonTab,
-    ForFilter,
+    BaseInput,
     AreaSelector,
     BusinessScopeSelector,
     MedicalSelector,
-    // PotentialList,
+    MedicalList,
     ScopeContent,
     DrawerCard
   },
   data () {
     return {
+      hospitalTypeData: this.hospitalType,
+      hospitalLevelData: this.hospitalLevel,
+      hospitalNatureData: hospitalNatureExp,
       showDrawer: false,
       showTips: '暂无符合条件的医疗机构',
       filters: {
-        business_scope: [],
-        area: {}
+        name: '',
+        scope: [],
+        area: {},
+        type: '',
+        level: '',
+        nature: ''
       }
     }
   },
   computed: {
     ...mapState({
       scope: state => state.user.scope,
-      isDeleteAllScope: state => state.user.isDeleteAllScope
+      isDeleteAllScope: state => state.user.isDeleteAllScope,
+      hospitalLevel: state => state.medical.hospitalLevel,
+      hospitalType: state => state.medical.hospitalType
     }),
     getScopeKeyList () {
       return this.scope.map(v => {
@@ -98,19 +112,86 @@ export default {
     if (!this.isDeleteAllScope) {
       await this.$store.dispatch('user/getKeywordsList')
     }
-    this.filters.business_scope = this.scope
+    this.filters.scope = this.scope
+    this.hospitalTypeData = this.hospitalType
+    this.hospitalLevelData = this.hospitalLevel
+    this.getMedicalFilterItem()
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.$refs.pushList.doQuery(this.filters)
+    })
   },
   methods: {
+    ...mapMutations({
+      setHospitalLevel: 'medical/setHospitalLevel',
+      setHospitalType: 'medical/setHospitalType'
+    }),
+    changeSubmitInfo () {
+      this.$refs.pushList.doQuery(this.filters)
+    },
+    resetFilter () {
+      this.filters.name = ''
+      this.filters.area = {}
+      this.filters.scope = []
+      this.filters.type = ''
+      this.filters.level = ''
+      this.filters.nature = ''
+      try {
+        this.$refs.areaSelector.setCitySelected()
+        this.$refs.typeSelector.setCateState()
+        this.$refs.levelSelector.setCateState()
+        this.$refs.natureSelector.setCateState()
+        this.$refs.businessScopeSelector.setState()
+        this.$refs.pushList.doQuery()
+      } catch (error) {}
+    },
+    // 获取医疗机构筛选条件
+    async getMedicalFilterItem () {
+      if (this.hospitalType.length > 0 && this.hospitalLevel.length > 0) return
+      const { data } = await getMedicalFilter()
+      if (data) {
+        if (data.level_code) {
+          data.level_code.unshift({
+            name: '全部',
+            code: '0',
+            level: '0'
+          })
+          const levelData = transData(data.level_code, 'code', 'pcode', 'children')
+          levelData.forEach(v => {
+            if (!v.children) {
+              v.children = []
+            }
+          })
+          this.hospitalLevelData = levelData
+          this.setHospitalLevel(levelData)
+        }
+        if (data.mi_type_code) {
+          data.mi_type_code.unshift({
+            name: '全部',
+            code: '0',
+            level: '0'
+          })
+          const typeData = transData(data.mi_type_code, 'code', 'pcode', 'children')
+          typeData.forEach(v => {
+            if (!v.children) {
+              v.children = []
+            }
+          })
+          this.hospitalTypeData = typeData
+          this.setHospitalType(typeData)
+        }
+      }
+    },
     onFilterChange () {},
     onTabRight () {
       this.showDrawer = true
     },
-    changeArea (item) {
-      this.filters.area = item
+    changeArea (area) {
+      this.filters.area = area
     },
     changeBusiness (item) {
       item = item.map(v => v.split(' ')[0])
-      console.log(item, 'xx')
       let tempArr = []
       this.scope.forEach(v => {
         if (item.includes(v.key.join(' '))) {
@@ -120,7 +201,19 @@ export default {
       if (item.length === 0) {
         tempArr = this.scope
       }
-      this.filters.business_scope = tempArr
+      this.filters.scope = tempArr
+    },
+    changeHospitalType (data) {
+      console.log(data, '机构类型')
+      this.filters.type = data.toString() || ''
+    },
+    changeHospitalLevel (data) {
+      console.log(data, '医院等级')
+      this.filters.level = data.toString() || ''
+    },
+    changeHospitalNature (data) {
+      console.log(data, '医院性质')
+      this.filters.nature = data.toString() || ''
     },
     onCloseDrawer (data) {
       this.showDrawer = data
@@ -130,6 +223,13 @@ export default {
         this.$refs.scopeRef.saveSetting()
         this.showDrawer = false
       })
+    },
+    goDetail (item) {
+      console.log(item, 'ddd')
+      const routeUrl = this.$router.resolve({
+        path: `/ent_portrait/${item.company_id}`
+      })
+      window.open(routeUrl.href, '_blank')
     }
   }
 }
@@ -150,6 +250,11 @@ export default {
         font-size: 18px;
       }
     }
+    .input-Selector{
+      display: flex;
+      align-items: center;
+      padding: 18px 16px;
+    }
     .selector-card.s-line{
       padding: 12px 16px;
     }
@@ -158,6 +263,9 @@ export default {
       text-align: right;
       font-size: 14px;
       color: #686868;
+      &.filter-input-label{
+        margin-right: 8px;
+      }
     }
     .button-group {
       background-color: #fff;
@@ -185,7 +293,7 @@ export default {
     }
   }
   .medical-list-container{
-    margin: 16px;
+    margin: 16px 0;
     background: #fff;
     border-radius: 8px;
   }

src/views/subscribe/components/key/KeyConfig.vue

@@ -194,6 +194,9 @@ export default {
         background-repeat: no-repeat;
         background-position: center center;
         cursor: pointer;
+        &::before{
+          content: '';
+        }
       }
       .icon-edit{
         margin: 0 10px;