technique_web3/src/views/company/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="idemand">
          <el-image class="image" :src="demand" fit="fill" />
          <div class="select">
            <el-row class="select_1">
              <el-col class="over" :span="4" v-if="oneList.length > 0">
                <div class="list">
                  <div class="left">行业规模：</div>
                  <div class="right">
                    <div class="label" v-for="(item, index) in oneList" :key="index">
                      {{ item.label }}<el-icon @click="toDel(item, 'one')"><Close /></el-icon>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col class="over" :span="4" v-if="twoList.length > 0">
                <div class="list">
                  <div class="left">行业类型：</div>
                  <div class="right">
                    <div class="label" v-for="(item, index) in twoList" :key="index">
                      {{ item.label }}<el-icon @click="toDel(item, 'two')"><Close /></el-icon>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col class="over" :span="4" v-if="thrList.length > 0">
                <div class="list">
                  <div class="left">省份地区：</div>
                  <div class="right">
                    <div class="label" v-for="(item, index) in thrList" :key="index">
                      {{ item.label }}<el-icon @click="toDel(item, 'thr')"><Close /></el-icon>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col class="over" :span="4" v-if="fourList.length > 0">
                <div class="list">
                  <div class="left">行业分类：</div>
                  <div class="right">
                    <div class="label" v-for="(item, index) in fourList" :key="index">
                      {{ item.label }}<el-icon @click="toDel(item, 'four')"><Close /></el-icon>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col class="over" :span="4" v-if="fiveList.length > 0">
                <div class="list">
                  <div class="left">企业状态：</div>
                  <div class="right">
                    <div class="label" v-for="(item, index) in fiveList" :key="index">
                      {{ item.label }}<el-icon @click="toDel(item, 'five')"><Close /></el-icon>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-row class="one_1">
              <el-col :span="3" class="left">行业规模</el-col>
              <el-col :span="21" class="right">
                <a-button
                  class="title"
                  v-for="(item, index) in scaleList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'one')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
            </el-row>
            <el-row class="one_1">
              <el-col :span="3" class="left">行业类型</el-col>
              <el-col :span="21" class="right">
                <a-button
                  class="title"
                  v-for="(item, index) in patternList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'two')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
            </el-row>
            <el-row class="one_1">
              <el-col :span="3" class="left">省份地区</el-col>
              <el-col :span="20" class="right" v-if="oneShow">
                <a-button
                  class="title"
                  v-for="(item, index) in cityList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'thr')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
              <el-col :span="20" class="right" v-else>
                <a-button
                  class="title"
                  v-for="(item, index) in cityList.slice(0, 9)"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'thr')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
              <el-col :span="1" class="button">
                <span v-if="!oneShow" @click="oneShow = true">
                  更多
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <span v-else @click="oneShow = false">
                  收起
                  <el-icon><ArrowUp /></el-icon>
                </span>
              </el-col>
            </el-row>
            <el-row class="one_1">
              <el-col :span="3" class="left">行业分类</el-col>
              <el-col :span="20" class="right" v-if="twoShow">
                <a-button
                  class="title"
                  v-for="(item, index) in IndustryList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'four')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
              <el-col :span="20" class="right" v-else>
                <a-button
                  class="title"
                  v-for="(item, index) in IndustryList.slice(0, 5)"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'four')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
              <el-col :span="1" class="button">
                <span v-if="!twoShow" @click="twoShow = true">
                  更多
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <span v-else @click="twoShow = false">
                  收起
                  <el-icon><ArrowUp /></el-icon>
                </span>
              </el-col>
            </el-row>
            <el-row class="one_1">
              <el-col :span="3" class="left">企业状态</el-col>
              <el-col :span="21" class="right">
                <a-button
                  class="title"
                  v-for="(item, index) in statusList"
                  :key="index"
                  type="link"
                  size="samll"
                  @click="toSelect(item, 'five')"
                  :class="[item.is_active ? 'show' : '']"
                >
                  {{ item.label }}
                </a-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" class="two">
            <el-col
              :span="24"
              class="list"
              v-for="(item, index) in list"
              :key="index"
              @click="toView(item)"
            >
              <el-col :span="4" class="left">
                <el-image class="image" :src="getUrl(item.logo)" fit="fill" />
              </el-col>
              <el-col :span="20" class="right">
                <el-col :span="24" class="right_1">
                  <el-tooltip effect="dark" :content="item.name" placement="top">
                    <span class="name"> {{ item.name || '暂无名称' }}</span>
                  </el-tooltip>
                  <el-col :span="2" class="tags">
                    <el-tag :type="[item.companyStatus == '0' ? 'success' : 'info']">{{
                      getDict(item.companyStatus, 'status')
                    }}</el-tag>
                  </el-col>
                </el-col>
                <el-col :span="24" class="right_2">
                  <el-tag type="primary">{{ getDict(item.pattern, 'pattern') }}</el-tag>
                  <el-tag type="primary">{{ getDict(item.scale, 'scale') }}</el-tag>
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="6" class="info">
                    法定代表人：<span>{{ item.representative || '暂无' }}</span>
                  </el-col>
                  <el-col :span="6" class="info">
                    成立日期：{{ moment(item.create_time).format('YYYY-MM-DD') }}
                  </el-col>
                  <el-col :span="8" class="info">
                    统一社会信用代码：{{ item.code || '暂无' }}
                  </el-col>
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="6" class="info">电话：{{ item.phone || '暂无' }}</el-col>
                  <el-col :span="6" class="info">邮箱：{{ item.email || '暂无' }}</el-col>
                </el-col>
                <el-col :span="24" class="right_3"> 地址：{{ item.address || '暂无' }} </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="thr">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :page-sizes="[10, 20, 50, 100, 200]"
              :total="total"
              :page-size="limit"
              v-model:current-page="currentPage"
              @current-change="changePage"
              @size-change="sizeChange"
            >
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
// API 引用
import { getCity } from '@/utils/city'
const $checkRes = inject('$checkRes')
import { get } from 'lodash-es'
// 接口
import { CompanyStore } from '@/store/api/user/company'
import { DictDataStore } from '@/store/api/system/dictData'
const store = CompanyStore()
const dictDataStore = DictDataStore()
// 图片引入
import demand from '/images/innovation.png'
// 路由
const router = useRouter()
// 加载中
const loading = ref(false)
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 字典表
const fieldList = ref([])
const statusList = ref([])
const patternList = ref([])
const scaleList = ref([])
// 字典表
const IndustryList = ref([])
const cityList = ref([])
// 查询
const oneList = ref([])
const twoList = ref([])
const thrList = ref([])
const fourList = ref([])
const fiveList = ref([])
// 是否展开
const oneShow = ref(false)
const twoShow = ref(false)
// 查看
const toView = (item) => {
  router.push({ path: '/company/detail', query: { id: item.id || item._id } })
}
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
  // 企业状态
  result = await dictDataStore.query({ code: 'companyStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 企业类型
  result = await dictDataStore.query({ code: 'companyType', is_use: '0' })
  if ($checkRes(result)) patternList.value = result.data
  // 企业规模
  result = await dictDataStore.query({ code: 'companyScale', is_use: '0' })
  if ($checkRes(result)) scaleList.value = result.data
  // 企业所属行业
  result = await dictDataStore.query({ code: 'companyIndustry', is_use: '0' })
  if ($checkRes(result)) IndustryList.value = result.data
  // 城市
  getCity().then((response) => (cityList.value = response.address))
}
const search = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    is_show: '0',
    status: '1'
  }
  if (oneList.value.length > 0) {
    const one = oneList.value.map((i) => {
      return i.value
    })
    info.one = one
  }
  if (twoList.value.length > 0) {
    info.two = twoList.value.map((i) => {
      return i.value
    })
  }
  if (thrList.value.length > 0) {
    info.thr = thrList.value.map((i) => {
      return i.label
    })
  }
  if (fourList.value.length > 0) {
    info.four = fourList.value.map((i) => {
      return i.value
    })
  }
  if (fiveList.value.length > 0) {
    info.five = fiveList.value.map((i) => {
      return i.value
    })
  }
  const res = await store.list(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'field') res = fieldList.value.find((f) => f.value == data)
  else if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'pattern') res = patternList.value.find((f) => f.value == data)
  else if (model == 'scale') res = scaleList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 选择查询
const toSelect = async (item, num) => {
  if (item.is_active) return
  if (num == 'one') {
    for (const val of scaleList.value) {
      if (val.value == item.value) val.is_active = true
    }
    const one = oneList.value.find((f) => f.value == item.value)
    if (!one) oneList.value.push(item)
    else oneList.value = oneList.value.filter((f) => f.value == item.value)
  }
  if (num == 'two') {
    for (const val of patternList.value) {
      if (val.value == item.value) val.is_active = true
    }
    const two = twoList.value.find((f) => f.value == item.value)
    if (!two) twoList.value.push(item)
    else twoList.value = twoList.value.filter((f) => f.value == item.value)
  }
  if (num == 'thr') {
    for (const val of cityList.value) {
      if (val.value == item.value) val.is_active = true
    }
    const thr = thrList.value.find((f) => f.value == item.value)
    if (!thr) thrList.value.push(item)
    else thrList.value = thrList.value.filter((f) => f.value == item.value)
  }
  if (num == 'four') {
    for (const val of IndustryList.value) {
      if (val.value == item.value) val.is_active = true
    }
    const four = fourList.value.find((f) => f.value == item.value)
    if (!four) fourList.value.push(item)
    else fourList.value = fourList.value.filter((f) => f.value == item.value)
  }
  if (num == 'five') {
    for (const val of statusList.value) {
      if (val.value == item.value) val.is_active = true
    }
    const five = fiveList.value.find((f) => f.value == item.value)
    if (!five) fiveList.value.push(item)
    else fiveList.value = fiveList.value.filter((f) => f.value == item.value)
  }
  loading.value = true
  await search({ skip, limit })
  loading.value = false
}
// 删除标签
const toDel = async (item, type) => {
  if (type == 'one') {
    const one = oneList.value.filter((f) => f.value != item.value)
    oneList.value = one
    for (const i of scaleList.value) {
      if (i.value == item.value) i.is_active = !i.is_active
    }
  }
  if (type == 'two') {
    const two = twoList.value.filter((f) => f.value != item.value)
    twoList.value = two
    for (const i of patternList.value) {
      if (i.value == item.value) i.is_active = !i.is_active
    }
  }
  if (type == 'thr') {
    const thr = thrList.value.filter((f) => f.value != item.value)
    thrList.value = thr
    for (const i of cityList.value) {
      if (i.value == item.value) i.is_active = !i.is_active
    }
  }
  if (type == 'four') {
    const four = fourList.value.filter((f) => f.value != item.value)
    fourList.value = four
    for (const i of IndustryList.value) {
      if (i.value == item.value) i.is_active = !i.is_active
    }
  }
  if (type == 'five') {
    const five = fiveList.value.filter((f) => f.value != item.value)
    fiveList.value = five
    for (const i of statusList.value) {
      if (i.value == item.value) i.is_active = !i.is_active
    }
  }
  loading.value = true
  await search({ skip, limit })
  loading.value = false
}
const getUrl = (item) => {
  if (item) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style lang="scss" scoped>
.main {
  background: rgb(248, 248, 248);

  .idemand {
    position: relative;
    .image {
      width: 100%;
      height: 200px;
    }
    .select {
      width: 1200px;
      position: absolute;
      left: 18.5%;
      bottom: 10%;
      .select_1 {
        display: flex;
        align-items: flex-end;
        .over {
          max-height: 106px;
          overflow-y: auto;
          .list {
            border-radius: 5px;
            margin-right: 10px;
            background-color: #fff;
            padding: 5px;
            font-size: $global-font-size-18;
            .left {
              padding: 10px;
            }
            .right {
              .show {
                color: #2374ff !important;
              }
              display: flex;
              flex-wrap: wrap;
              .label {
                display: flex;
                align-items: center;
                margin: 3px;
                padding: 5px;
                background: #f5f5f5;
                border: 1px solid #f0f0f0;
                border-radius: 2px;
              }
            }
          }
        }
        .over::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }

  .one {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0 0 0;

    .one_1 {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: #9d9898 1px dashed;

      .left {
        background: #2280ff;
        border-radius: 15px;
        line-height: 26px;
        color: #fff;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: PingFangSC-Medium;
      }

      .right {
        .show {
          color: #2374ff !important;
        }
        .title {
          color: #666;
          font-size: $global-font-size-18;
          line-height: 15px;
          margin: 0 10px;
          display: inline-block;
          overflow: hidden;
          text-decoration: none;
        }

        .title:hover {
          color: #2374ff;
        }
      }
      .button {
        color: #2374ff;
        font-size: $global-font-size-14;
        cursor: pointer;
      }
    }
  }

  .two {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;

    .list {
      display: flex;
      margin: 5px 0 0 0;
      padding: 5px;
      border-radius: 8px;
      border: 1px solid #f4f4f4;
      .left {
        text-align: center;
        .image {
          width: 150px;
          height: 150px;
          border-radius: 10px;
        }
      }
      .right {
        padding: 5px;
        .right_1 {
          display: flex;
          align-items: center;
          .name {
            margin: 0 10px 0 0;
            word-break: break-all;
            font-size: $global-font-size-20;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 500;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .tags {
            grid-gap: 0.5rem;
            gap: 0.5rem;
            display: flex;
          }
        }
        .right_2 {
          grid-gap: 0.5rem;
          gap: 0.5rem;
          display: flex;
          margin: 10px 0;
        }
        .right_3 {
          display: flex;
          margin: 10px 0;
          font-size: $global-font-size-18;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          color: #666;
          .info {
            span {
              color: #2171f6;
            }
          }
        }
      }
    }
    .list:hover {
      box-shadow:
        0 4px 5px -3px rgba(0, 0, 0, 0.06),
        0 4px 12px 4px rgba(0, 0, 0, 0.06);
    }
  }

  .thr {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px;
  }
}
</style>