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

<template>
  <div id="unit">
    <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">
            <template #fields>
              <el-option v-for="i in fieldList" :key="i.model" :label="i.dict_label" :value="i.dict_value"></el-option>
            </template>
          </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.company }}</el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="other_1 textOver">
                <span>单位联系人：</span>
                <span>{{ item.unit_contact }}</span>
              </el-col>
              <el-col :span="12" class="other_1 textOver">
                <span>单位地址：</span>
                <span>{{ item.address }}</span>
              </el-col>
              <el-col :span="12" class="other_1 textOver">
                <span>行业领域：</span>
                <span class="direction" v-for="(i, index) in item.fields" :key="index">{{ i.name }};</span>
              </el-col>
              <el-col :span="12" class="other_1 textOver">
                <span>技术需求方向：</span>
                <span class="direction" v-for="(p, index) in item.direction" :key="index">{{ p.name }}; </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 { UnitStudioApplyStore } from '@common/src/stores/studio/role/unitStudioApply'; //
import type { IQueryResult } from '@/util/types.util';
const sysdictdata = DictDataStore();
const unitStudioApply = UnitStudioApplyStore();
let fields: Ref<any[]> = ref([
  { label: '单位名称', model: 'company', isSearch: true },
  // { label: '单位地址', model: 'address', isSearch: true },
  { label: '行业领域', model: 'fields', type: 'select', isSearch: true },
  { label: '技术需求方向', model: 'direction', 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 unitStudioApply.query(info);
  list.value = res.data as any[];
  let p1: any = res.data as any[];
  for (const val of p1) {
    if (val.fields) val.fields = getDict(val.fields);
  }
  total.value = res.total;
};
// 查询
const partSearch = (form: { [x: string]: any }) => {
  searchForm.value = form;
  search({ skip, limit });
};
const emit = defineEmits(['toView']);
//获取领域信息
const getDict = (fields: any) => {
  let data = [];
  for (const val of fields) {
    let info = fieldList.value.find((i) => i.dict_value == val);
    if (info) data.push({ name: info.dict_label });
  }
  return data;
};
const toView = (e: object) => {
  emit('toView', { data: e, component: 'units' });
};
// 查询其他信息
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 10px 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;
          }
          .direction {
            color: #000000;
          }
        }
      }
    }
    .list:hover {
      cursor: pointer;
      border: 3px solid #65cd94;
      .company {
        color: #ffffff;
      }
    }
    .list:nth-child(2n) {
      margin: 0 0 10px 0;
    }
  }
}
</style>