|
|
@@ -0,0 +1,200 @@
|
|
|
+<!--
|
|
|
+ * @Description: 合作院校
|
|
|
+ * @Author: 空白格
|
|
|
+ * @Date: 2022-08-11 17:17:33
|
|
|
+ * @LastEditors: 空白格
|
|
|
+ * @LastEditTime: 2022-08-11 17:48:45
|
|
|
+ * @FilePath: \veterans_client_web\src\views\CooperativeColleges\CooperativeCollegesIndex.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="cooperative-colleges">
|
|
|
+ <BannerBreadcrumb title="合作院校" />
|
|
|
+ <div class="cooperative-colleges-content" v-loading="loading">
|
|
|
+ <div class="cooperative-colleges-content-list">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="24"
|
|
|
+ :md="24"
|
|
|
+ :lg="12"
|
|
|
+ :xl="12"
|
|
|
+ v-for="(school, index) in schoolList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="company-list-item">
|
|
|
+ <div class="company-list-item-left">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="
|
|
|
+ school.schoolLogoUrl ||
|
|
|
+ require('@/assets/images/default-school.png')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div slot="placeholder" class="image-slot">
|
|
|
+ 加载中<span class="dot">...</span>
|
|
|
+ </div>
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="require('@/assets/images/default-school.png')"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="company-list-item-center">
|
|
|
+ <div class="name">{{ school.schoolName }}</div>
|
|
|
+ <div>
|
|
|
+ {{ school.count || "-" }}个专业 ·
|
|
|
+ {{ school.schoolNature | filtersDict(schoolNatureList) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="company-list-item-right">
|
|
|
+ <i class="el-icon-arrow-right"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="pagination" v-if="total">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="currentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
|
|
|
+import { getDictData } from "@/api/Dict";
|
|
|
+import { getSchoolList } from "@/api/CooperativeColleges";
|
|
|
+export default {
|
|
|
+ name: "CooperativeCollegesIndex",
|
|
|
+ components: {
|
|
|
+ BannerBreadcrumb,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ schoolNatureList: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ schoolName: undefined,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ schoolList: [],
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDict();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取字典数据
|
|
|
+ * @date 2022-08-11
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ getDict() {
|
|
|
+ getDictData({ key: "school_nature" }).then((res) => {
|
|
|
+ this.schoolNatureList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取学校列表
|
|
|
+ * @date 2022-08-11
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ getSchoolList(this.queryParams).then((res) => {
|
|
|
+ this.schoolList = res.rows;
|
|
|
+ this.total = Number(res.total);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ currentChange(page) {},
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ filtersDict(val, list) {
|
|
|
+ let label = "-";
|
|
|
+ list.forEach((element) => {
|
|
|
+ if (Number(element.text) === Number(val)) {
|
|
|
+ label = element.label;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return label;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.cooperative-colleges {
|
|
|
+ &-content {
|
|
|
+ width: calc(70% + 40px);
|
|
|
+ min-width: 600px;
|
|
|
+ margin: 23px auto 0;
|
|
|
+ &-list {
|
|
|
+ padding: 20px 20px 100px;
|
|
|
+ background-color: #fff;
|
|
|
+ .company-list-item {
|
|
|
+ display: flex;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ &-left {
|
|
|
+ width: 61px;
|
|
|
+ height: 61px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border: solid 1px #e2e2e2;
|
|
|
+ border-radius: 4px;
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-center {
|
|
|
+ width: calc(100% - 95px);
|
|
|
+ color: #919191;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
+ .name {
|
|
|
+ color: #1a1a1a;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #9c9c9c;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ text-align: center;
|
|
|
+ :deep(.el-pager .active) {
|
|
|
+ background-color: #ff3939;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
|
|
|
+ background-color: #ff3939;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
