web/src/components/push-list/MedicalList.vue

<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 && item.city && 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>
      </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-card>
</template>

<script>
import { Pagination, Card, Button, Dialog } from 'element-ui'
import Empty from '@/components/common/Empty.vue'
import { moneyUnit } from '@/utils/'
import { getSearchMedicalList, setInstitutionClaim, institutionUnClaimed } from '@/api/modules/'

export default {
  name: 'potential-list',
  components: {
    [Pagination.name]: Pagination,
    [Card.name]: Card,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    Empty
  },
  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: [] // 查询请求返回的数据
      }
    }
  },
  created () {},
  methods: {
    async changeClaim (item) {
      if (item.isClaim) {
        // 取消认领
        const { error_code: code, error_msg: msg } = await institutionUnClaimed({
          ent_id: item.company_id
        })
        if (code === 0) {
          this.$toast('已取消认领')
          item.isClaim = false
          this.$forceUpdate()
        } else {
          this.$toast(msg, 2000)
        }
      } else {
        // 认领
        const { error_code: code, error_msg: msg } = await setInstitutionClaim({
          ent_id: item.company_id,
          ent_name: item.company_name
        })
        if (code === 0) {
          this.$toast('认领成功')
          item.isClaim = true
          this.$forceUpdate()
        } else {
          if (code === 1013) {
            this.$toast('医疗机构认领已达上限')
          } else {
            this.$toast(msg, 2000)
          }
        }
      }
    },
    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)
    },
    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 (key !== 'sort' && !query[key]) {
            delete query[key]
          }
        }
      }
      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()
    }
  }
}
</script>

<style lang="scss" scoped>
  @include diy-icon('edit', 20, 20);
  @include diy-icon('icon-company', 24, 24);
  @include diy-icon('renling', 18, 18);
  @include diy-icon('renling-01', 18, 18);
  @include diy-icon('renling-active', 18, 18);
  ::v-deep .el-icon-jy-icon-company {
    margin-right: 8px;
    flex-shrink: 0;
  }
  // 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 {
    border-radius: 8px;
    box-shadow: none!important;
    overflow: hidden;
    .header-box {
      padding: 14px 40px;
      border-bottom: 1px solid #ECECEC;
    }
    .card-title {
      position: relative;
      line-height: 28px;
      color: $color_main;
      &::after{
        position: absolute;
        left: 0;
        bottom: -14px;
        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;
        white-space: nowrap;
      }
      &:hover{
        .el-icon-jy-renling{
          background-image: url('~@/assets/images/icon/renling-01.png');
        }
        span{
          color: #2CB7CA;
        }
      }
    }

    .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: #F7F9FC;
        .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: ''!important;
        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>