video整合condition

src/components/MxCondition/condition-object/condition-video-grade.js

@@ -0,0 +1,26 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  videoGrades,
+} from "@/api/webApi/webVideo";
+
+export default {
+  ...conditionObjectBase,
+  key: 'videoGrade',
+  dependentKeys: ['videoCourse'],
+  isDependencyReady(params) {
+    return params.videoCourse
+  },
+  title: '年级',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      videoGrades({ course:param.videoCourse,subject:$ref.model.videoType }).then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item.code
+  },
+  getLabel: function(item) {
+    return item.label
+  }
+}

src/components/MxCondition/condition-object/condition-video-pack.js

@@ -0,0 +1,33 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  packList,
+} from "@/api/webApi/webVideo";
+
+export default {
+  ...conditionObjectBase,
+  key: 'videoPack',
+  dependentKeys: ['videoVersion'],
+  isDependencyReady(params) {
+    return params.videoVersion
+  },
+  title: '学册',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      packList({
+        course:$ref.model.videoCourse,
+        subject:$ref.model.videoType,
+        grade:$ref.model.videoGrade,
+        pageNum:1,
+        pageSize:20,
+        version:param.videoVersion,
+      }).then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item.value
+  },
+  getLabel: function(item) {
+    return item.label
+  }
+}

src/components/MxCondition/condition-object/condition-video-subject.js

@@ -0,0 +1,26 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  videoSubjects,
+} from "@/api/webApi/webVideo";
+
+export default {
+  ...conditionObjectBase,
+  key: 'videoCourse',
+  dependentKeys: ['videoType'],
+  isDependencyReady(params) {
+    return params.videoType
+  },
+  title: '科目',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      videoSubjects({ subject:param.videoType }).then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item.code
+  },
+  getLabel: function(item) {
+    return item.label
+  }
+}

src/components/MxCondition/condition-object/condition-video-type.js

@@ -0,0 +1,22 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  videoType,
+} from "@/api/webApi/webVideo";
+
+export default {
+  ...conditionObjectBase,
+  key: 'videoType',
+  title: '类型',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      videoType().then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item.code + ''
+  },
+  getLabel: function(item) {
+    return item.label
+  }
+}

src/components/MxCondition/condition-object/condition-video-version.js

@@ -0,0 +1,29 @@
+import conditionObjectBase from '../condition-object-base.js'
+import {
+  videoVersions,
+} from "@/api/webApi/webVideo";
+
+export default {
+  ...conditionObjectBase,
+  key: 'videoVersion',
+  dependentKeys: ['videoGrade'],
+  isDependencyReady(params) {
+    return params.videoGrade
+  },
+  title: '版本',
+  getList: function(param,$ref) {
+    return new Promise((resolve, reject) => {
+      videoVersions({
+        course:$ref.model.videoCourse,
+        subject:$ref.model.videoType,
+        grade:param.videoGrade }).then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item.code
+  },
+  getLabel: function(item) {
+    return item.label
+  }
+}

src/views/career/zhiyuan/NewSimulatedVolunteer.vue

@@ -242,18 +242,4 @@ export default {
   width: 100%;
   padding: 0 15px;
 }
-
-
-.mask {
-  z-index: 2009;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  opacity: 0.5;
-  margin: 0;
-}
-
 </style>

src/views/career/zhiyuan/batch.vue

@@ -122,46 +122,3 @@ export default {
   margin-left: 0;
 }
 </style>
-<style lang="scss">
-.radioInput {
-  .el-radio {
-    .el-radio__input {
-      display: none;
-    }
-  }
-}
-.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>

src/views/videocourse/video_course.vue

@@ -1,74 +1,13 @@
-<template >
+<template>
   <div class="video_contianer">
     <el-card>
-      <div slot="header" >
-        <mx-search-group  justify="space-between" :span="6" v-model="form.sectionName" placeholder="请输入搜索内容" @search="searchVideo">
-          <div class="spans">
-          <span
-            v-for="item in videoType"
-            :key="item.code"
-            class="pointer"
-            :class="typeActive == item.code ? 'active_text' : ''"
-            @click="toggleType(item.code)"
-          >{{ item.label }}</span
-          >
-          </div>
+      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
+                    @invalid="handleInvalidQuery"
+      ></mx-condition>
+      <div slot="header">
+        <mx-search-group justify="end" :span="6" v-model="sectionName" placeholder="请输入搜索内容" @search="searchVideo">
         </mx-search-group>
       </div>
-      <div class="radio_contianer">
-        <div style="margin-bottom: 16px">
-          <span>科目</span>
-          <el-radio-group v-model="form.course" @change="getGrade" size="mini">
-            <el-radio-button
-              :label="item.code"
-              v-for="item in subjects"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span>年级</span>
-          <el-radio-group v-model="form.grade" @change="getVersion" size="mini">
-            <el-radio-button
-              :label="item.code"
-              v-for="item in grade"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-if="version.length > 0">
-          <span>版本</span>
-          <el-radio-group
-            v-model="form.version"
-            size="mini"
-            @change="toggleCondition"
-          >
-            <el-radio-button
-              :label="item.code"
-              v-for="item in version"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-if="packList.length > 0">
-          <span>分类</span>
-          <el-radio-group
-            v-model="form.pack"
-            size="mini"
-            @change="togglePack($event)"
-          >
-            <el-radio-button
-              :label="item.value"
-              v-for="item in packList"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-      </div>
     </el-card>
     <!-- 视频主体 -->
     <el-card class="video_content" v-if="videoList.length > 0">
@@ -100,162 +39,85 @@
         <pagination
           v-show="total > 0"
           :total="total"
-          :page.sync="form.pageNum"
-          :limit.sync="form.pageSize"
+          :page.sync="pageForm.pageNum"
+          :limit.sync="pageForm.pageSize"
           :pageSizes="[16,32]"
           @pagination="getVideoList"
         />
       </div>
     </el-card>
-    <evaluation-empty v-if="videoList.length == 0" />
+    <evaluation-empty v-if="videoList.length == 0"/>
   </div>
 </template>
 <script>
-import {
-  videoSubjects,
-  videoType,
-  videoGrades,
-  videoVersions,
-  packList,
-  videoList,
-  videoInfo,
-} from "@/api/webApi/webVideo";
+import { videoList } from '@/api/webApi/webVideo'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
-import FormSearch from "@/components/formSearch";
+import MxCondition from '@/components/MxCondition/mx-condition'
+
 export default {
-  components: {MxSearchGroup },
+  components: { MxSearchGroup, MxCondition },
   data() {
     return {
-      input: "",
-      typeActive: 0,
-      videoType: [],
-      form: {
-        course: "", // 科目
-        subject: "", // 大类
-        grade: "", // 年级
-        version: "", // 版本
+      pageForm: {
         pageNum: 1,
-        pageSize: 16,
-        pack: 0,
-        sectionName: "",
+        pageSize: 16
+      },
+      sectionName: '',
+      queryParams: {
+        videoType: '',
+        videoCourse: '',
+        videoGrade: '',
+        videoVersion: '',
+        videoPack: ''
       },
-      subjects: [], // 课程
-      grade: [], // 年级
-      version: [], //  版本
-      packList: [], // 分类
+      requireFields: ['videoType', 'videoCourse',
+        'videoGrade',
+        'videoVersion',
+        'videoPack'
+      ],
       total: 0,
       packNewList: [],
-      videoList: [], // 视频列表
-    };
+      videoList: [] // 视频列表
+    }
   },
   methods: {
-    tohandle(code) {
-      console.log(code);
+    handleInvalidQuery() {
+
     },
     toVideoDetail(id, chapter_id, childrenId, section_aliId, aliIdType) {
       this.$router.push({
-        path: "/video_course/detail",
-        query: {
+        path: '/video_course/detail', query: {
           packId: id,
           chapter_id: chapter_id,
           childrenId: childrenId,
           section_aliId,
           aliIdType: aliIdType
-        },
-      });
-    },
-    searchVideo() {
-      this.getVideoList();
-    },
-    // 获取视频课程大类
-    getVideoType() {
-      videoType().then((res) => {
-        this.videoType = res.rows;
-        if (res.rows.length > 0) {
-          this.toggleType(res.rows[0].code);
         }
-      });
+      })
     },
-    //  切换大类获取科目
-    toggleType(params) {
-      this.typeActive = params;
-      this.form.subject = params;
-      let { subject } = this.form;
-      // 获取科目
-      videoSubjects({ subject }).then((res) => {
-        this.subjects = res.rows;
-        if (res.rows.length > 0) {
-          this.form.course = res.rows[0].code;
-        }
-        // 获取年级
-        this.getGrade();
-      });
+    handleQuery() {
+      this.getVideoList()
     },
-    // 获取年级
-    getGrade() {
-      let { subject, course } = this.form;
-      videoGrades({ subject, course }).then((res) => {
-        console.log(JSON.stringify(res.rows));
-        this.grade = res.rows;
-        if (res.rows.length > 0) {
-          this.form.grade = res.rows[0].code;
-        }
-        this.getVersion();
-      });
-    },
-    // 获取版本
-    getVersion() {
-      let { subject, course, grade } = this.form;
-      videoVersions({ subject, course, grade }).then((res) => {
-        let resArr = res.rows.filter((item) => {
-          return item != null;
-        });
-        if (resArr.length > 0) {
-          this.version = resArr;
-          this.form.version = this.version[0].code;
-          this.getPack();
-        } else {
-          this.version = []
-          this.form.version = ''
-          this.videoList = []
-        }
-      });
-    },
-    // 获取包分类
-    getPack() {
-      packList(this.form).then((res) => {
-        if (res.rows.length > 0) {
-          this.form.pack = res.rows[0].value;
-          this.packList = res.rows;
-          this.getVideoList();
-        } else {
-          this.packList = []
-          this.form.pack = ''
-          this.videoList = []
-        }
-      });
+    searchVideo() {
+      this.getVideoList()
     },
     // 获取视频列表
     getVideoList() {
-      videoList(this.form).then((res) => {
-        console.log(res);
-        this.total = res.total;
-        this.videoList = res.rows;
-      });
-    },
-    togglePack(pack) {
-      this.form.pack = pack;
-      this.getVideoList();
-    },
-    toggleCondition(code) {
-      this.form.version = code;
-      this.getPack();
+      videoList({
+        course: this.queryParams.videoCourse, // 科目
+        subject: this.queryParams.videoType, // 大类
+        grade: this.queryParams.videoGrade, // 年级
+        version: this.queryParams.videoVersion, // 版本
+        pack: this.queryParams.videoPack,
+        ...this.pageForm,
+        sectionName: this.sectionName
+      }).then((res) => {
+        this.total = res.total
+        this.videoList = res.rows
+      })
     }
-  },
-  created() {
-    this.getVideoType();
-  },
-};
+  }
+}
 </script>
 <style scoped>
 .el-card {
@@ -265,9 +127,11 @@ export default {
 .video_contianer {
   padding: 20px;
 }
+
 .spans {
   margin-left: 10px;
 }
+
 .spans > span {
   height: 100%;
   display: inline-block;
@@ -279,28 +143,35 @@ export default {
   margin-right: 8px;
   border: 1px solid #eee;
 }
+
 .active_text {
   background: #47c6a2;
   color: white;
 }
+
 .search_btn {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
+
 .search_btn input {
   border: 0;
   height: 100%;
 }
+
 .search_btn input:focus {
   outline: 0;
 }
+
 .search_btn img {
   cursor: pointer;
 }
+
 .radio_contianer {
   margin-top: 24px;
 }
+
 .radio_contianer span {
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
@@ -310,9 +181,11 @@ export default {
   height: 20px;
   margin-right: 16px;
 }
+
 .radio_contianer .el-radio-button {
   margin-right: 8px;
 }
+
 .video_content p {
   margin: 0;
   padding: 0;
@@ -325,27 +198,33 @@ export default {
   line-height: 20px;
   margin-top: 11px;
 }
+
 .video_item > img {
   cursor: pointer;
 }
+
 .video_content .el-col {
   margin-bottom: 42px;
 }
+
 .video_item > img {
   width: 100%;
   padding-right: 22px;
 }
 </style>
-<style >
+<style>
 .radio_contianer .el-radio-button__inner {
   border-left: 1px solid #dcdfe6;
 }
+
 .radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
   border-radius: 16px;
 }
+
 .radio_contianer .el-radio-button .el-radio-button__inner {
   border-radius: 16px;
 }
+
 .split_page .el-pager > li {
   border-radius: 50%;
 }