jcyjdt_studio/src/components/common/web/list/demand.vue

<template>
  <div id="demand">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <component :is="partsSearch" :is_title="false" :is_search="true" :fields="fields" @search="partSearch"> </component>
        </el-col>
        <el-col :span="24" class="two">
          <el-col class="list" :span="12" v-for="(item, index) in list" :key="index" @click="toView(item)">
            <el-col :span="24" class="company">{{ item.title }}</el-col>
            <el-col :span="24" class="other">
              <el-col :span="8" class="other_1 textOver">
                <span>依托单位名称：</span>
                <span>{{ item.company_name }}</span>
              </el-col>
              <el-col :span="8" class="other_1 textOver">
                <span>需求截止时间：</span>
                <span>{{ item.stop_date }}</span>
              </el-col>
              <el-col :span="8" class="other_1 textOver">
                <span>专业领域：</span>
                <span>{{ getDict(item.fields) }}</span>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="thr">
          <component :is="CPage" :total="total" :limit="limit" @query="search"></component>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import CPage from '@/components/common/web/c-page.vue';
import partsSearch from '@/components/c-search.vue';
import type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import { DictDataStore } from '@common/src/stores/users/sysdictdata'; // 字典表
import { TecholdemandStore } from '@common/src/stores/studio/supplydemand/techoldemand'; //
import type { IQueryResult } from '@/util/types.util';
const sysdictdata = DictDataStore();
const techoldemand = TecholdemandStore();
let fields: Ref<any[]> = ref([
  { label: '标题', model: 'title', isSearch: true },
  { label: '依托单位名称', model: 'scientist_name', isSearch: true },
  { label: '科学家名称', model: 'scientist_name', isSearch: true },
]);
// 查询数据
let searchForm: Ref<{}> = ref({});
let list: Ref<any[]> = ref([]);
// 总数
let total: Ref<number> = ref(0);
let limit: 10;
let skip = 0;
let fieldList: Ref<any[]> = ref([]);
onMounted(async () => {
  await searchOther();
  await search({ skip, limit });
});
// 查询
const search = async (e: { skip: number; limit: number }) => {
  const { skip, limit } = e;
  let info = { limit: limit, skip: skip, ...searchForm.value, is_use: '0', status: '1' };
  if (info.limit == undefined) info.limit = 8;
  const res: IQueryResult = await techoldemand.query(info);
  list.value = res.data as any[];
  total.value = res.total;
};
// 查询
const partSearch = (form: { [x: string]: any }) => {
  searchForm.value = form;
  search({ skip, limit });
};
const emit = defineEmits(['toView']);
//获取领域信息
const getDict = (e: any) => {
  let fields = [];
  for (const val of e) {
    let data = fieldList.value.find((i) => i.dict_value == val);
    if (data) fields.push(data.dict_label);
  }
  let data = fields.join(',');
  return data;
};
const toView = (e: object) => {
  emit('toView', { data: e, component: 'demands' });
};
// 查询其他信息
const searchOther = async () => {
  // 字典表---单位性质
  const p1: IQueryResult = await sysdictdata.query({ dict_type: 'studio_field' });
  fieldList.value = p1.data as [];
};
</script>

<style lang="scss" scoped>
.main {
  .one {
    box-shadow: 0 0 2px #858585;
    padding: 10px;
    margin: 0 0 10px 0;
  }
  .two {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-shadow: 0 0 5px #858585;
    padding: 10px;
    border-radius: 5px;
    margin: 0 0 10px 0;
    .list {
      max-width: 49%;
      border: 3px solid #a2e1f7;
      padding: 10px;
      border-radius: 5px;
      margin: 0 20px 20px 0;
      .company {
        font-size: 20px;
        font-family: cursive;
        margin: 0 0 10px 0;
        font-weight: bold;
      }
      .other {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .other_1 {
          margin: 0 0 10px 0;
          span {
            font-size: 14px;
            color: #858585;
          }
          span:nth-child(2) {
            color: #000000;
          }
        }
      }
    }
    .list:hover {
      cursor: pointer;
      border: 3px solid #65cd94;
      .company {
        color: #ffffff;
      }
    }
    .list:nth-child(2n) {
      margin: 0 0 20px 0;
    }
  }
}
</style>