cas_cloud_web/src/views/admin/enterprise/extension/results.vue

<template>
  <div class="app-container">
    <el-radio-group
      v-model="queryParams.searchType"
      size="small"
      @change="handleQuery"
    >
      <el-badge :value="12" class="count-badge" :hidden="true">
        <el-radio-button label="1">企业</el-radio-button>
      </el-badge>
      <el-radio-button label="2">成果</el-radio-button>
      <el-radio-button label="4">专利</el-radio-button>
      <el-radio-button label="5">专家</el-radio-button>
      <el-radio-button label="6">服务需求</el-radio-button>
      <el-radio-button label="7">技术需求</el-radio-button>
      <!-- <el-radio-button label="4">实验室</el-radio-button> -->
    </el-radio-group>

    <!-- <el-row :gutter="20">
        <el-col
          :xs="12"
          :sm="6"
          :lg="4"
          style="margin-top: 20px"
          v-for="item in 10"
          :key="item"
        >
          <div style="border: 1px solid #787878">
            <div style="text-align: right">
              <el-tag type="warning" effect="dark" style="border-radius: 0">
                7.8万
              </el-tag>
            </div>
            <div style="padding: 10px">
              <div class="ellipsis">
                高碳当量高强度灰铁材质研发高碳当量高强度灰铁材质研发
              </div>
              <div
                style="
                  margin: 10px 0;
                  display: flex;
                  justify-content: space-between;
                "
              >
                <el-tag type="info" effect="plain">所属领域</el-tag>
                <el-tag type="info" effect="plain">普通企业需求</el-tag>
              </div>
              <div style="margin-bottom: 10px">研发类型:</div>
              <div>截止时间:</div>
            </div>
            <div class="btn_info pointer">查看详情</div>
          </div>
        </el-col>
      </el-row> -->

    <div v-if="dataList.length" style="margin-top: 20px" v-loading="loading">
      <section v-for="item in dataList" :key="item.id">
        <div style="border: 1px solid #dcdcdc; margin-bottom: 10px">
          <enterpriseItem
            :data="item"
            v-if="queryParams.searchType == 1"
          ></enterpriseItem>
          <AchievementItem
            :data="item"
            v-else-if="queryParams.searchType == 2"
          ></AchievementItem>
          <gainItem
            :data="item"
            v-else-if="queryParams.searchType == 4"
          ></gainItem>
          <expertItem
            :data="item"
            v-else-if="queryParams.searchType == 5"
          ></expertItem>
          <serviceDemandItem
            :data="item"
            v-else-if="queryParams.searchType == 6"
          ></serviceDemandItem>
          <TechnologyDemandItem
            :data="item"
            v-else-if="queryParams.searchType == 7"
          ></TechnologyDemandItem>
        </div>
      </section>
    </div>
    <el-empty v-else></el-empty>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Post">
import { search } from "@/api/website/home/index";
import gainItem from "@/views/website/searchList/components/gainItem.vue";
import expertItem from "@/views/website/searchList/components/expertItem.vue";
import serviceDemandItem from "@/views/website/searchList/components/serviceDemandItem.vue";
import enterpriseItem from "../../components/enterpriseItem.vue";
import TechnologyDemandItem from "@/views/website/searchList/components/technologyDemandItem.vue";
import AchievementItem from "@/views/website/searchList/components/achievementItem.vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);

const queryType = computed(() => {
  if (queryParams.value.searchType == 1) {
    return 2;
  } else if (queryParams.value.searchType == 2) {
    return 1;
  } else if (queryParams.value.searchType == 4) {
    return 2;
  } else if (queryParams.value.searchType == 5) {
    return 2;
  } else if (queryParams.value.searchType == 6) {
    return 1;
  } else if (queryParams.value.searchType == 7) {
    return 1;
  }
});

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    query: route.query.keyword,
    searchType: "1",
    queryType: queryType,
  },
});

const { queryParams } = toRefs(data);

watch(
  queryType,
  (val) => {
    router.replace({
      path: route.path,
      query: {
        keyword: route.query.keyword,
        queryType: val,
      },
    });
  },
  { immediate: true }
);
/** 查询列表 */
async function getList() {
  const resp = await search(queryParams.value);
  dataList.value = resp.list;
  total.value = resp.total;
  loading.value = false;
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 删除按钮操作 */
// function handleDelete(id) {
//   proxy.$modal
//     .confirm('是否确认删除订单号为"' + id + '"的数据项？')
//     .then(function () {
//       return delPost(postIds);
//     })
//     .then(() => {
//       getList();
//       proxy.$modal.msgSuccess("删除成功");
//     })
//     .catch(() => {});
// }
// function handleResults(id) {
//   router.push({ path: "./results" });
// }
handleQuery();
</script>
<style lang="scss" scoped>
.btn_info {
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  background-color: #787878;
}
:deep(.count-badge) {
  z-index: 99;
}
</style>