cxyy-web/src/views/search/parts/supply.vue

<template>
  <div class="main">
    <div class="w_1300">
      <!-- <div class="active">
    <div class="active_1" v-show="industry && industry.length > 0">
      <div class="active_left">行业：</div>
      <div class="active_right">
        <div class="active_label" v-for="(item, index) in industry" :key="index">
          {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
        </div>
      </div>
    </div>
    <div class="active_1" v-show="field && field.length > 0">
      <div class="active_left">技术领域：</div>
      <div class="active_right">
        <div class="active_label" v-for="(item, index) in field" :key="index">
          {{ item.label }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
        </div>
      </div>
    </div>
    <div class="active_1" v-show="city && city.length > 0">
      <div class="active_left">所在地：</div>
      <div class="active_right">
        <div class="active_label" v-for="(item, index) in city" :key="index">
          {{ item.name }}<el-icon @click="toDel(item, '3')"><Close /></el-icon>
        </div>
      </div>
    </div>
  </div> -->
      <div class="demand">
        <div class="demandOne">
          <div class="demandSeacher">
            <div class="demandOneLeft">
              <span>行业</span>
            </div>
            <div v-if="!oneShow" class="demandOneRight">
              <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
                {{ item.title }}
              </div>
            </div>
            <div v-else class="demandOneRight">
              <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
                {{ item.title }}
              </div>
            </div>
            <div 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>
            </div>
          </div>
          <div class="demandSeacher">
            <div class="demandOneLeft">
              <span>技术领域</span>
            </div>
            <div v-if="!twoShow" class="demandOneRight">
              <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
                {{ item.label }}
              </div>
            </div>
            <div v-else class="demandOneRight">
              <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
                {{ item.label }}
              </div>
            </div>
            <div 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>
            </div>
          </div>
          <div class="demandSeacher border">
            <div class="demandOneLeft">
              <span>所在地</span>
            </div>
            <div class="demandOneRight">
              <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="demandIpunt">
          <el-input class="input" size="large" v-model:value="searchForm.name" placeholder="供应名称" />
          <el-input class="input" size="large" v-model:value="searchForm.tags" placeholder="标签名称" />
          <el-input class="input" size="large" v-model:value="searchForm.industry" placeholder="所属产业" />
          <el-input class="input" size="large" v-model:value="searchForm.source" placeholder="所属来源" />
          <el-button class="button" size="large" type="primary" @click="toSearchInfo(searchForm, '1')">检索</el-button>
        </div>
        <div class="demandTwo">
          <div class="demandTable">
            <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
              {{ item.name }}
            </div>
          </div>
          <div class="demandValue">
            <div class="value" v-for="(item, index) in list" :key="index">
              <div class="table-colunm table-colunm1 textOne">{{ index + 1 }}</div>
              <div class="table-colunm table-colunm2 textOne">{{ item.name || '暂无' }}</div>
              <div class="table-colunm textOne">{{ item.field || '暂无' }}</div>
              <div class="table-colunm table-colunm4 textOne">{{ item.industry || '暂无' }}</div>
              <!-- <div class="table-colunm">{{ item.status || '暂无' }}</div> -->
              <div class="table-colunm table-colunm3 textOne">{{ item.source || '暂无' }}</div>
              <div class="table-colunm textOne table-colunm3 button" @click="toView(item)">查看详情</div>
            </div>
          </div>
          <div class="demandTotal">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { SupplyStore } from '@/store/api/platform/supply'
import { RegionStore } from '@/store/api/system/region'
import { SectorStore } from '@/store/api/platform/sector'
import { DictDataStore } from '@/store/api/system/dictData'
const regionStore = RegionStore()
const sectorStore = SectorStore()
const supplyStore = SupplyStore()
const dictDataStore = DictDataStore()

const router = useRouter()

const searchValue = inject('searchValue')

// 加载中
const loading = ref(false)
// 字典表
const cityList = ref([])
const typeList = ref([])
const plateList = ref([])
const statusList = ref([])
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const searchForm = ref({})
// 查询
const industry = ref([])
const field = ref([])
const city = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let res
  res = await regionStore.list({ level: 'city', parent_code: 22 })
  if (res.errcode == '0') cityList.value = res.data
  cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
  res = await sectorStore.query({ is_use: '0' })
  if (res.errcode == '0') plateList.value = res.data
  plateList.value.unshift({ id: '-1', title: '不限', is_active: true })
  // 技术领域
  res = await dictDataStore.query({ code: 'field', is_use: '0' })
  if (res.errcode == '0') typeList.value = res.data
  typeList.value.unshift({ id: '-1', value: '-1', label: '不限', is_active: true })
  // 状态
  res = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if (res.errcode == '0') statusList.value = res.data
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    is_use: '0',
    status: '1',
    ...searchForm.value
  }
  if (searchValue.value) info.tags = searchValue.value
  let res = await supplyStore.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 搜索
const toSearchInfo = async (data) => {
  searchForm.value = data
  await search({ skip, limit })
}
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 })
}
// 是否展开
const oneShow = ref(false)
const twoShow = ref(false)
const column = ref([
  { name: '序号', style: { width: '100px' }, key: 'num' },
  { name: '供方内容', style: { width: '320px' }, key: 'name' },
  { name: '技术领域', style: { width: '220px' }, key: 'field' },
  { name: '所属产业', style: { width: '240px' }, key: 'industry' },
  { name: '来源', style: { width: '200px' }, key: 'source' },
  { name: '操作', style: { width: '200px' }, key: 'operation' }
])
// 查看详情
const toView = (item) => {
  router.push({ path: '/supply/detail', query: { id: item.id || item._id } })
}
// 筛选条件
const toSearchFind = async () => {
  if (industry.value && industry.value.length > 0) {
    searchForm.value.industry = industry.value.map((i) => {
      return i.title
    })
  } else delete searchForm.value.industry
  if (field.value && field.value.length > 0) {
    searchForm.value.field = field.value.map((i) => {
      return i.label
    })
  } else delete searchForm.value.field
  if (city.value && city.value.length > 0) {
    searchForm.value.area = city.value.map((i) => {
      return i.name
    })
  } else delete searchForm.value.area

  await search({ skip, limit })
}

const toSelect = async (data, type) => {
  if (data.is_active) {
    toDel(data, type)
  } else {
    if (data.id != '-1') {
      if (type == '1') {
        for (const val of plateList.value) {
          if (data.id == val.id) val.is_active = true
          if (val.id == '-1') val.is_active = false
        }
        const res = industry.value.find((i) => i.id == data.id)
        if (!res) industry.value.push(data)
      } else if (type == '2') {
        for (const val of typeList.value) {
          if (data.id == val.id) val.is_active = true
          if (val.id == '-1') val.is_active = false
        }
        const res = field.value.find((i) => i.id == data.id)
        if (!res) field.value.push(data)
      } else {
        for (const val of cityList.value) {
          if (data.id == val.id) val.is_active = true
          if (val.id == '-1') val.is_active = false
        }
        const res = city.value.find((i) => i.id == data.id)
        if (!res) city.value.push(data)
      }
    } else {
      if (type == '1') {
        for (const val of plateList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        industry.value = []
      } else if (type == '2') {
        for (const val of typeList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        field.value = []
      } else {
        for (const val of cityList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        city.value = []
      }
    }
  }
  await toSearchFind()
}
const toDel = async (data, type) => {
  if (type == '1') {
    for (const val of plateList.value) {
      if (data.id == val.id) val.is_active = false
    }
    industry.value = industry.value.filter((f) => f.id != data.id)
    if (industry.value.length == 0) {
      for (const val of plateList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  } else if (type == '2') {
    for (const val of typeList.value) {
      if (data.id == val.id) val.is_active = false
    }
    field.value = field.value.filter((f) => f.id != data.id)
    if (field.value.length == 0) {
      for (const val of typeList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  } else {
    for (const val of cityList.value) {
      if (data.id == val.id) val.is_active = false
    }
    city.value = city.value.filter((f) => f.id != data.id)
    if (city.value.length == 0) {
      for (const val of cityList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  }
  await toSearchFind()
}
defineExpose({
  search
})
</script>
<style scoped lang="scss">
.main {
  background: url(/images/demand.png) no-repeat top center;
  background-size: 100% 100%;
  .active {
    .active_1 {
      display: inline-flex;
      background: #f5f7f9;
      border-radius: 2px;
      min-height: 28px;
      line-height: 28px;
      margin: 10px 10px 0 0;
      position: relative;
      background-color: #fff;
      padding: 10px;
      .active_left {
        flex: 0 0 auto;
        font-family: PingFangSC-Regular;
        color: #525a68;
        line-height: 36px;
      }
      .active_right {
        font-family: PingFangSC-Regular;
        color: rgba(0, 0, 0, 0.85);
        line-height: 28px;
        padding-right: 4px;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        .active_label {
          overflow: hidden;
          display: inline-block;
          margin-right: 10px;
          margin-top: 3px;
          margin-bottom: 3px;
          padding: 10px;
          display: flex;
          align-items: center;
          flex: none;
          box-sizing: border-box;
          max-width: 100%;
          height: 30px;
          background: #f5f5f5;
          border: 1px solid #f0f0f0;
          border-radius: 2px;
          cursor: default;
        }
      }
    }
  }
  .demand {
    padding: 10px 0;
    .demandOne {
      background-color: $global-color-fff;
      .demandSeacher {
        display: flex;
        justify-content: center;
        align-items: stretch;
        position: relative;
        border: solid 1px #e5e5e5;
        border-bottom: 0;
        font-size: $global-font-size-18;
        color: #666;
        min-height: 60px;
        overflow: hidden;
        .demandOneLeft {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          width: 110px;
          text-align: center;
          color: #000;
          font-weight: bold;
          background-color: #fafafa;
        }
        .demandOneRight {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding: 12px;
          flex: 1;
          border-left: solid 1px #e5e5e5;
          background-color: #fff;
          .label {
            margin-right: 3px;
            color: #313131;
            margin-bottom: 10px;
            padding: 8px 10px;
            border-radius: 3px;
            background-color: #fff;
            border: solid 1px transparent;
            cursor: pointer;
          }
          .label:hover {
            color: $global-color-107;
          }
          .show {
            color: #0a58c2;
            border: solid 1px #006dd2;
          }
        }
        .button {
          display: flex;
          align-items: center;
          margin: 0 5px 0 0;
        }
      }
      .border {
        border: solid 1px #e5e5e5;
        border-bottom: 1 !important;
      }
    }
    .demandIpunt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
      .input {
        margin: 0 5px 0 0;
      }
      .button {
        margin: 0 0 0 5px;
      }
    }
    .demandTwo {
      margin: 10px 0;
      .demandTable {
        display: flex;
        justify-content: space-between;
        color: $global-color-fff;
        font-size: $global-font-size-20;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 12px 0;
        .label {
          text-align: center;
        }
      }
      .demandValue {
        color: $global-color-fff;
        font-size: $global-font-size-20;
        .value {
          display: flex;
          justify-content: space-between;
          padding: 12px 0;
          .table-colunm {
            width: 220px;
            text-align: center;
          }
          .table-colunm1 {
            width: 100px !important;
          }
          .table-colunm2 {
            width: 320px !important;
          }
          .table-colunm3 {
            width: 200px !important;
          }
          .table-colunm4 {
            width: 240px !important;
          }
          .button {
            cursor: pointer; /* 改变鼠标样式为手形 */
          }
          .button:hover {
            color: $global-color-107;
          }
        }
        .value:nth-child(2n) {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
      .demandTotal {
        display: flex;
        justify-content: center;
        margin: 20px 0;
      }
    }
  }
}
</style>