Changes marjor choice

src/views/career/subject/majorChoice.vue.unused

@@ -0,0 +1,318 @@
+<template>
+  <div class="major-page">
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/career/plan/index' }"
+          >生涯·志愿</el-breadcrumb-item
+        >
+        <el-breadcrumb-item :to="{ path: '/career/subject/index' }"
+          >选科查询</el-breadcrumb-item
+        >
+        <el-breadcrumb-item>由专业选科目</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="content-box">
+      <div class="content-top-box">
+        <div class="content-box-title">招生专业的选科要求</div>
+        <div class="my-subject-button" @click="toMyPage()">我的选科方案</div>
+      </div>
+      <div class="content-msg">
+        新高考改革方案，志愿填报将采取“专业+学校”的填报方式，由学校平行志愿转变为专业平行志愿，每个招生专业都有相应的选考科目要求。您可以通过此功能查询各学校各专业的选考科目要求。
+      </div>
+
+      <div class="table-box">
+        <mx-table
+          :rows="dataList"
+          :propDefines="propDefines"
+          @selection-change="handleSelectionChange"
+        >
+          <template #select="{ row }">
+            <img
+              class="college-icon"
+              v-if="row.collect"
+              @click="httpCollectRemove(row)"
+              src="@/assets/images/subject/icon_shoucang_pre.png"
+            />
+            <img
+              class="college-icon"
+              v-else
+              @click="httpCollectAdd(row)"
+              src="@/assets/images/subject/icon_shoucang_n.png"
+            />
+          </template>
+        </mx-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="pageNum"
+          :limit.sync="pageSize"
+          :page-size="20"
+          @pagination="onChangePage"
+        />
+      </div>
+      <div class="button-box">
+        <el-button @click="httpXkcxScheme">提交选科方案</el-button>
+      </div>
+    </div>
+    <div class="major-list-box" v-if="xkcxSchemeTotal>0">
+      <div class="major-list-title">
+        如需填报以上专业，您有以下<span>{{ xkcxSchemeTotal }}</span
+        >种选科组合可以选择
+      </div>
+      <div class="major-card-list">
+        <div
+          class="divide-equally-box"
+          v-for="(item, index) in xkcxSchemeList"
+          :key="index"
+        >
+          <div class="major-card-item">
+            <div class="major-card-title">{{ item.course }}</div>
+            <div class="major-progress-box">
+              <el-progress
+                type="circle"
+                stroke-width="14"
+                width="96"
+                color="#c8eee3"
+                :percentage="item.marjorRate"
+              ></el-progress>
+              <div class="major-progress-text">
+                可报{{ item.marjorRate }}%的专业
+              </div>
+            </div>
+            <div class="major-card-bottom-box">
+              <div class="major-card-msg" v-if="item.collect">
+                <i class="el-icon-circle-check"></i> 已加入我的选科方案
+              </div>
+              <div v-else class="major-card-button" @click="onClickJoin(item)">
+                加入我的选科方案
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { xkcxScheme, schemeAdd,xkcxlist } from "@/api/webApi/webQue";
+
+export default {
+  data() {
+    return {
+      dataList: [
+      ],
+      propDefines: {
+        selection: {
+          type: "selection"
+        },
+        universityName: {
+          label: "院校名称",
+        },
+        marjorName: {
+          label: "专业（类）名称",
+        },
+        resourcesName: {
+          label: "类中所含专业",
+          align: "left",
+        },
+        level: {
+          label: "专业层次",
+        },
+        courseRemark0: {
+          label: "首选科目",
+          align: "left",
+        },
+        courseRemark1: {
+          label: "再选科目",
+          align: "left",
+        },
+        collect: {
+          label: "选择",
+          align: "left",
+          slot: "select",
+          width: "100px",
+        },
+      },
+      selectIds: [],
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+      xkcxSchemeTotal: 0,
+      xkcxSchemeList: [],
+    };
+  },
+  created() {
+    this.httpGetXkcxList();
+  },
+  methods: {
+    onChangePage(page) {
+      this.pageSize = page.limit;
+      this.pageNum = page.page;
+      this.httpGetXkcxList();
+    },
+    handleSelectionChange(list) {
+      let ids = [];
+      let len = list.length;
+      for (let i = 0; i < len; i++) {
+        ids.push(list[i]["id"]);
+      }
+      this.selectIds = ids;
+    },
+    onClickJoin(item) {
+      this.httpSchemeAdd(item.id);
+    },
+    httpSchemeAdd(id) {
+      schemeAdd({
+        groupId: id,
+        df: 0,
+      }).then((res) => {
+        this.httpXkcxScheme();
+        console.log(res);
+      });
+    },
+    toMyPage() {
+      this.$router.push("/career/subject/myChoice");
+    },
+    httpXkcxScheme() {
+      if (this.selectIds.length == 0) {
+        this.$message.error("请选择专业");
+        return;
+      }
+      xkcxScheme({
+        ids: this.selectIds.toString(),
+      }).then((res) => {
+        this.xkcxSchemeList = res.rows;
+        this.xkcxSchemeTotal = res.total;
+      });
+    },
+    httpGetXkcxList() {
+      xkcxlist({
+        collect:true,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+      })
+        .then((res) => {
+          this.dataList = res.rows;
+          this.total = res.total;
+        })
+        .catch((err) => {
+          console.log("请求出错！");
+        });
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.breadcrumb {
+  padding: 15px 30px;
+  margin: 15px 0;
+  border-bottom: 1px solid #eee;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+}
+.el-breadcrumb {
+  font-size: 16px !important;
+}
+.content-box {
+  padding: 60px 40px 60px 50px;
+}
+.content-box-title {
+  color: #47c6a2;
+  font-size: 24px;
+}
+.content-top-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.my-subject-button {
+  color: #47c6a2;
+  cursor: pointer;
+  font-size: 14px;
+  border: 1px solid #47c6a2;
+  padding: 13px 110px;
+}
+.content-msg {
+  margin: 32px 0;
+  font-size: 16px;
+}
+.button-box {
+  padding: 30px;
+  display: flex;
+  justify-content: center;
+}
+.major-list-title {
+  color: #4c4c4c;
+  font-size: 24px;
+  text-align: center;
+  margin-top: 100px;
+}
+.major-list-title span {
+  color: #d28140;
+}
+.major-card-list {
+  margin-top: 30px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.divide-equally-box {
+  width: 33%;
+  margin: 0px auto;
+}
+.major-card-item {
+  width: 320px;
+  margin: 20px auto;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 10%);
+  margin-top: 20px;
+}
+.major-card-title {
+  text-align: center;
+  background: #47c6a2;
+  color: #fff;
+  font-size: 24px;
+  font-weight: 600;
+  padding: 25px 0px;
+}
+.major-progress-box {
+  padding: 40px 0 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.major-progress-text {
+  margin-top: 20px;
+}
+.major-card-bottom-box {
+  border-top: 1px solid #eee;
+  margin: 0 auto;
+  width: 80%;
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.major-card-button {
+  width: 100%;
+  background: #47c6a2;
+  color: #fff;
+  height: 48px;
+  text-align: center;
+  line-height: 48px;
+  cursor: pointer;
+}
+.major-card-msg {
+  height: 48px;
+  line-height: 48px;
+  color: #73a0fa;
+}
+/deep/ .el-progress__text {
+  font-size: 18px !important;
+  color: #73a0fa;
+}
+</style>

src/views/career/subject/subjectChoice.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="subject-page">
+    <div class="breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/career/plan/index' }"
+        >生涯·志愿1
+        </el-breadcrumb-item
+        >
+        <el-breadcrumb-item :to="{ path: '/career/subject/index' }"
+        >选科查询
+        </el-breadcrumb-item
+        >
+        <el-breadcrumb-item>由科目选专业</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="content-box">
+      <el-card>
+        <div>
+          <el-row class="radioInput">
+            <div>
+              <span class="radiaTitle">年份：</span>
+            </div>
+            <el-radio-group v-model="selected.years" @change="yearChange">
+              <el-radio-button
+                v-for="item in form.years"
+                :key="item"
+                :label="item"
+                style="margin-bottom: 10px"
+              ></el-radio-button>
+            </el-radio-group>
+          </el-row>
+          <el-row class="radioInput radioScience">
+            <div>
+              <span class="radiaTitle">首选科目：</span>
+            </div>
+            <el-checkbox-group v-model="selected.sciences[0]" @change="onScienceChanged" size="mini" :max="1">
+              <el-checkbox-button v-for="item in form.sciences[0]" :key="item" :label="item">
+                {{item}}
+              </el-checkbox-button>
+            </el-checkbox-group>
+            <div>
+              <span class="radiaTitle">再选科目：</span>
+            </div>
+            <el-checkbox-group v-model="selected.sciences[1]" @change="onScienceChanged" size="mini" :max="2">
+              <el-checkbox-button v-for="item in form.sciences[1]" :key="item" :label="item">
+                {{item}}
+              </el-checkbox-button>
+            </el-checkbox-group>
+          </el-row>
+          <el-row class="radioInput">
+            <div>
+              <span class="radiaTitle">院校地区：</span>
+            </div>
+            <el-radio-group v-model="selected.locations" @change="locationChange">
+              <el-radio-button label="">所有</el-radio-button>
+              <el-radio-button
+                v-for="item in form.locations"
+                :key="item"
+                :label="item"
+                style="margin-bottom: 10px"
+              ></el-radio-button>
+            </el-radio-group>
+          </el-row>
+          <el-row class="radioInput">
+            <div>
+              <span class="radiaTitle">院校类型：</span>
+            </div>
+            <el-radio-group v-model="selected.types" @change="typeChange">
+              <el-radio-button label="">所有</el-radio-button>
+              <el-radio-button
+                v-for="item in form.types"
+                :key="item"
+                :label="item"
+                style="margin-bottom: 10px"
+              ></el-radio-button>
+            </el-radio-group>
+          </el-row>
+          <el-row class="radioInput">
+            <div>
+              <span class="radiaTitle">院校特色：</span>
+            </div>
+            <el-radio-group v-model="selected.features" @change="featureChange">
+              <el-radio-button label="">所有</el-radio-button>
+              <el-radio-button
+                v-for="item in form.features"
+                :key="item.code"
+                :label="item.code"
+                style="margin-bottom: 10px"
+              >{{item.label}}</el-radio-button>
+            </el-radio-group>
+          </el-row>
+          <el-row class="radioInput">
+            <div>
+              <span class="radiaTitle">层次：</span>
+            </div>
+            <el-radio-group v-model="selected.levels" @change="levelChange">
+              <el-radio-button label="">所有</el-radio-button>
+              <el-radio-button
+                v-for="item in form.levels"
+                :key="item"
+                :label="item"
+                style="margin-bottom: 10px"
+              ></el-radio-button>
+            </el-radio-group>
+          </el-row>
+        </div>
+        <div class="content">
+          <div class="xkcx-input-box">
+            <div class="search_header">
+              <input
+                placeholder="请输入内容"
+                v-model="keyword"
+                @keyup.enter="httpGetXkcxList()"
+              />
+              <img
+                src="@/assets/images/icon_search2.png"
+                alt=""
+                @click="httpGetXkcxList()"
+              />
+            </div>
+          </div>
+          <div class="concerned-college-container">
+            <mx-table :rows="dataList" :propDefines="propDefines">
+              <template #select="{ row }">
+                <img
+                  class="college-icon"
+                  v-if="row.collect"
+                  @click="httpCollectRemove(row)"
+                  src="@/assets/images/subject/icon_shoucang_pre.png"
+                />
+                <img
+                  class="college-icon"
+                  v-else
+                  @click="httpCollectAdd(row)"
+                  src="@/assets/images/subject/icon_shoucang_n.png"
+                />
+              </template>
+            </mx-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              :page.sync="pageNum"
+              :limit.sync="pageSize"
+              :page-size="20"
+              @pagination="onChangePage"
+            />
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { selectUniversity } from '@/api/webApi/career-course'
+  import {collectAdd, collectRemove, xkcxlist, xkcxYears} from "@/api/webApi/webQue";
+
+  export default {
+    data() {
+      return {
+        // 初始条件
+        form: {
+          years: [],
+          sciences: [["物理", "历史"],["化学", "生物", "政治", "地理"]],
+          locations: ["湖南", "湖北"],
+          types: ["综合", "工科", "农业", "林业"],
+          features:[ "双一流", "985", "211"],
+          levels:["本科","专科"]
+        },
+        // 选中条件
+        selected: { years:[], sciences:[[],[]], locations:"", types:"", features:"", levels:"" },
+        pageNum: 1,
+        pageSize: 20,
+        total: 0,
+        keyword: "",
+        // 查询结果
+        dataList: [],
+        isShowTabl: true,
+        propDefines: {
+          universityName: {
+            label: "院校名称",
+          },
+          marjorName: {
+            label: "专业（类）名称",
+          },
+          resourcesName: {
+            label: "专业备注",
+            align: "left",
+          },
+          level: {
+            label: "专业层次",
+          },
+          courseRemark0: {
+            label: "首选科目范围",
+            align: "left",
+          },
+          courseRemark1: {
+            label: "再选科目范围",
+            align: "left",
+          },
+          year: {
+            label: "年份",
+            align: "left",
+          },
+          collect: {
+            label: "选择",
+            align: "left",
+            slot: "select",
+            width: "100px",
+          },
+        },
+      };
+    },
+    created() {
+      this.getYears();
+      this.getUniversity();
+    },
+    methods: {
+      // 取有效年份清单
+      getYears() {
+        xkcxYears().then((res) => {
+          this.form.years = res.data || [];
+          this.selected.years = this.form.years[0]
+        });
+      },
+      // 取其他条件清单
+      getUniversity() {
+        selectUniversity().then(res => {
+          this.form.features = res.data.features;
+          this.form.locations = res.data.locations;
+          this.form.levels = res.data.levels;
+          this.form.types = res.data.types;
+        })
+      },
+
+      yearChange(value) {
+        this.httpGetXkcxList();
+      },
+      onScienceChanged(value) {
+        this.httpGetXkcxList();
+      },
+      locationChange(value) {
+        this.httpGetXkcxList();
+      },
+      typeChange(value) {
+        this.httpGetXkcxList();
+      },
+      featureChange(value) {
+        this.httpGetXkcxList();
+      },
+      levelChange(value) {
+        this.httpGetXkcxList();
+      },
+      // 查询结果
+      httpGetXkcxList() {
+        if (this.selected.sciences[0].length<1 || this.selected.sciences[1].length<2) return;
+
+        //console.log(this.selected);return;
+        xkcxlist({
+          level:this.selected.levels.toString(),
+          keyword: this.keyword,
+          course0: this.selected.sciences[0].toString(),
+          course1: this.selected.sciences[1].toString(),
+          locations: this.selected.locations.toString(),
+          ts: this.selected.features.toString(),
+          types: this.selected.types.toString(),
+          year: this.selected.years.toString(),
+          pageNum: this.pageNum,
+          marjors: [],
+          pageSize: this.pageSize,
+        })
+          .then((res) => {
+            this.dataList = res.rows;
+            this.total = res.total;
+            this.isShowTable = true;
+          })
+          .catch((err) => {
+            console.log("请求出错！");
+            this.cleanSchoolSelect();
+          });
+      },
+
+      onChangePage(page) {
+        this.pageSize = page.limit;
+        this.pageNum = page.page;
+        this.httpGetXkcxList();
+      },
+      // 收藏
+      httpCollectAdd(row) {
+        row.collect = true;
+        collectAdd({
+          refId: row.id,
+        });
+      },
+      // 取消收藏
+      httpCollectRemove(row) {
+        row.collect = false;
+        collectRemove({
+          refId: row.id,
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped>
+.xkcx-input-box {
+  padding: 20px 0;
+  display: flex;
+  margin-top: -3em;
+}
+  .subject-page {
+    padding: 0 100px;
+  }
+
+.college-icon {
+  cursor: pointer;
+}
+
+  .breadcrumb {
+    padding: 15px 30px;
+    margin: 15px 0;
+    border-bottom: 1px solid #eee;
+    border-radius: 2px;
+    background-color: #fff;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  }
+
+  .content-box {
+    padding: 10px 40px 10px 50px;
+  }
+
+  .search_header {
+    margin-left: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+    margin-right: 20px;
+  }
+
+  .search_header img {
+    position: absolute;
+    right: 20px;
+    cursor: pointer;
+    top: 6px;
+  }
+
+  .search_header input {
+    background: #f7f7ff;
+    border-radius: 20px;
+    border: 1px solid #c6cbf5;
+    outline: none;
+    width: 340px;
+    height: 32px;
+    padding-left: 24px;
+  }
+
+  .popup-item-title span {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+</style>
+
+<style lang="scss" scoped>
+.layui-bg-orange {
+  background-color: var(--themeColor);
+  margin-left: 0;
+}
+</style>
+
+<style lang="scss">
+.el-checkbox-button {
+  margin-bottom: 10px;
+  .el-checkbox-button__inner {
+    font-size: 14px;
+  }
+}
+
+.radioInput {
+  .el-radio {
+    .el-radio__input {
+      display: none;
+    }
+  }
+}
+.radioInput.radioScience {
+  .el-radio-button {
+    border: 1px solid #47C6A2;
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+}
+.radioInput {
+  display: flex;
+  .el-radio-button .el-radio-button__inner {
+    border-radius: 4px !important;
+    border: none;
+    padding: 5px 10px !important;
+    font-weight: 400;
+    font-family: PingFangSC-Regular, PingFang SC;
+  }
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: none;
+  }
+  .radiaTitle {
+    display: inline-block;
+    width: 130px;
+    font-size: 14px;
+    text-align: right;
+    margin-top: 2px;
+  }
+}
+.radioInput02 {
+  display: flex;
+  align-items: center;
+  .radiaTitle {
+    display: inline-block;
+    width: 130px;
+    font-size: 14px;
+    text-align: right;
+    margin-top: 2px;
+  }
+  .el-input--medium .el-input__inner {
+    border-radius: 50px;
+  }
+}
+</style>