cxyy-web/src/views/thr/parts/demand.vue

<template>
  <div class="demand">
    <div class="demandOne">
      <div class="demandSeacher">
        <div class="demandOneLeft">
          <span>行业</span>
        </div>
        <div v-if="!oneShow" class="demandOneRight">
          <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
            {{ item.title }}
          </div>
        </div>
        <div v-else class="demandOneRight">
          <div class="label" v-for="(item, index) in plateList" :key="index">
            {{ 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" v-for="(item, index) in typeList.slice(0, 10)" :key="index">
            {{ item.label }}
          </div>
        </div>
        <div v-else class="demandOneRight">
          <div class="label" v-for="(item, index) in typeList" :key="index">
            {{ 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">
        <div class="demandOneLeft">
          <span>所在地</span>
        </div>
        <div class="demandOneRight">
          <div class="label" v-for="(item, index) in cityList" :key="index">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="demandIpunt">
      <a-input class="input" size="large" v-model:value="searchForm.name" placeholder="需求名称" />
      <a-input class="input" size="large" v-model:value="searchForm.tags" placeholder="标签名称" />
      <a-input class="input" size="large" v-model:value="searchForm.industry" placeholder="所属产业" />
      <a-input class="input" size="large" v-model:value="searchForm.company" placeholder="所属企业" />
      <a-button class="button" size="large" type="primary">检索</a-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-colunm3 textOne">{{ getArea(item.area) }}</div>
          <div class="table-colunm table-colunm1 textOne">{{ item.money || '面议' }}</div>
          <div class="table-colunm table-colunm1 textOne">{{ item.status || '未解决' }}</div>
          <div class="table-colunm 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>
</template>
<script setup>
const router = useRouter()
const list = inject('list')
const total = inject('total')
const sizeChange = inject('sizeChange')
const changePage = inject('changePage')
const plateList = inject('plateList')
const typeList = inject('typeList')
const cityList = inject('cityList')
const searchForm = ref({})
// 是否展开
const oneShow = ref(false)
const twoShow = ref(false)
const column = ref([
  { name: '序号', style: { width: '100px' }, key: 'num' },
  { name: '需方名称', style: { width: '250px' }, key: 'name' },
  { name: '技术领域', style: { width: '185px' }, key: 'time' },
  { name: '所在地', style: { width: '360px' }, key: 'area' },
  { name: '投入预算', style: { width: '100px' }, key: 'money' },
  { name: '状态', style: { width: '100px' }, key: 'status' },
  { name: '操作', style: { width: '185px' }, key: 'operation' }
])
// 查看详情
const toView = (item) => {
  router.push({ path: '/demand/detail', query: { id: item.id || item._id } })
}
// 转换地区
const getArea = (data) => {
  if (data) return data.join('-')
  else return '暂无'
}
</script>
<style scoped lang="scss">
.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 {
          color: #313131;
          margin-bottom: 10px;
          padding: 8px 10px;
          border-radius: 3px;
          background-color: #fff;
          border: solid 1px transparent;
          cursor: pointer;
        }
        .label:first-child {
          color: #0a58c2;
          border: solid 1px #006dd2;
        }
        .label:hover {
          color: $global-color-107;
        }
      }
      .button {
        display: flex;
        align-items: center;
        margin: 0 5px 0 0;
      }
    }
  }
  .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: 185px;
          text-align: center;
        }
        .table-colunm1 {
          width: 100px !important;
        }
        .table-colunm2 {
          width: 250px !important;
        }
        .table-colunm3 {
          width: 360px !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>