分类筛选+协议分页

src/views/modules/course/courseChapter.vue

@@ -1,64 +1,135 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
       <!-- <el-form-item label="课程目录章节名称">
         <el-input v-model="query.keywords" placeholder="课程目录章节名称" clearable></el-input>
       </el-form-item> -->
       <el-form-item>
-        <el-button @click="pageIndex = 1;getDataList()">查询</el-button>
+        <el-button
+          @click="
+            pageIndex = 1;
+            getDataList();
+          "
+          >查询</el-button
+        >
         <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="dataList" border v-loading="dataListLoading"
-      style="width: 100%;">
-      <el-table-column prop="title" header-align="center" align="center" label="章节名称">
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%;"
+    >
+      <el-table-column
+        prop="title"
+        header-align="center"
+        align="center"
+        label="章节名称"
+      >
       </el-table-column>
 
-      <el-table-column prop="createTime" header-align="center" align="center" label="创建日期">
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        label="创建日期"
+      >
       </el-table-column>
       <el-table-column header-align="center" align="center" label="图片">
         <template slot-scope="scope">
-          <img v-if="scope.row.imgUrl != ''" :src="scope.row.imgUrl" width="70" height="100" class="tableImg" />
+          <img
+            v-if="scope.row.imgUrl != ''"
+            :src="scope.row.imgUrl"
+            width="70"
+            height="100"
+            class="tableImg"
+          />
         </template>
       </el-table-column>
-      <el-table-column prop="content" header-align="center" align="center" label="内容">
+      <el-table-column
+        prop="content"
+        header-align="center"
+        align="center"
+        label="内容"
+      >
+        <template slot-scope="scope">
+          <div class="hidden1">
+            {{ scope.row.content }}
+          </div>
+        </template>
       </el-table-column>
 
-      <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="250"
+        label="操作"
+      >
         <template slot-scope="scope">
-           
           <div>
-                <router-link :to="{path: 'course-courseVideo' , query:{ id : scope.row.id , pageIndex} }">
+            <router-link
+              :to="{
+                path: 'course-courseVideo',
+                query: { id: scope.row.id, pageIndex }
+              }"
+            >
               <el-button type="text" size="small">视频管理</el-button>
             </router-link>
-                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
-                <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+              >删除</el-button
+            >
           </div>
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
-      style="padding: 30px 0; text-align: center;" layout="total, sizes, prev, pager, next, jumper">
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      style="padding: 30px 0; text-align: center;"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
   </div>
 </template>
 
 <script>
-import AddOrUpdate from './chapter-add-or-update'
+import AddOrUpdate from "./chapter-add-or-update";
 export default {
   data() {
     return {
       dataForm: {
-        key: ''
+        key: ""
       },
       query: {
-        type:'',
-        categoryId:'',
-        sociologyId:'',
-        keywords:''
+        type: "",
+        categoryId: "",
+        sociologyId: "",
+        keywords: ""
       },
       dataList: [],
       delFlag: false,
@@ -68,7 +139,7 @@ export default {
       dataListLoading: false,
       dataListSelections: [],
       addOrUpdateVisible: false
-    }
+    };
   },
   components: {
     AddOrUpdate
@@ -76,25 +147,27 @@ export default {
   activated() {
     this.courseid = this.$route.query.courseid;
     this.catalogue_id = this.$route.query.id;
-    console.log('111', this.courseid)
-    console.log('222', this.catalogue_id)
+    console.log("111", this.courseid);
+    console.log("222", this.catalogue_id);
     if (this.$route.query.upPageInde != null) {
       this.pageIndex = this.$route.query.upPageIndex;
-        console.log(this.pageIndex)
+      console.log(this.pageIndex);
     }
-    this.getDataList()
+    this.getDataList();
   },
   methods: {
     // 获取数据列表
     getDataList() {
-      this.dataListLoading = true
+      this.dataListLoading = true;
       this.$http({
-        url: this.$http.adornUrl('/master/course/getCourseCatalogueChapterList'),
-        method: 'post',
+        url: this.$http.adornUrl(
+          "/master/course/getCourseCatalogueChapterList"
+        ),
+        method: "post",
         data: this.$http.adornData({
-            'id': this.catalogue_id,
-            'page': this.pageIndex,
-            'limit': this.pageSize,
+          id: this.catalogue_id,
+          page: this.pageIndex,
+          limit: this.pageSize
           // "type": this.query.type||0, //类型0全部，1：医学，2：国学
           // "categoryId": this.query.categoryId, //医学类型id，当type为1时为必填项;为0时代表全部
           // "sociologyId": this.query.sociologyId, //国学类型id,当type为2时为必填项；为0代表全部
@@ -102,69 +175,73 @@ export default {
         })
       }).then(({ data }) => {
         if (data && data.code === 0) {
-          this.dataList = data.page.records
-          this.totalPage = data.page.total
+          this.dataList = data.page.records;
+          this.totalPage = data.page.total;
         } else {
-          this.dataList = []
-          this.totalPage = 0
+          this.dataList = [];
+          this.totalPage = 0;
         }
-        this.dataListLoading = false
-      })
+        this.dataListLoading = false;
+      });
     },
     // 每页数
     sizeChangeHandle(val) {
-      this.pageSize = val
-      this.pageIndex = 1
-      this.getDataList()
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
     },
     // 当前页
     currentChangeHandle(val) {
-      this.pageIndex = val
-      this.getDataList()
+      this.pageIndex = val;
+      this.getDataList();
     },
     // 多选
     selectionChangeHandle(val) {
-      this.dataListSelections = val
+      this.dataListSelections = val;
     },
     // 新增 / 修改
     addOrUpdateHandle(row) {
-        console.log('row1', row)
-      this.addOrUpdateVisible = true
+      console.log("row1", row);
+      this.addOrUpdateVisible = true;
       this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(row, this.catalogue_id, this.courseid)
-      })
+        this.$refs.addOrUpdate.init(row, this.catalogue_id, this.courseid);
+      });
     },
     // 删除
     deleteHandle(id) {
       //   var ids = id ? [id] : this.dataListSelections.map(item => {
       //     return item.id
       //   })
-      this.$confirm(`确定对[id=${id}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
+      this.$confirm(
+        `确定对[id=${id}]进行[${id ? "删除" : "批量删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }
+      ).then(() => {
         this.$http({
-          url: this.$http.adornUrl('/master/course/delCourseCatalogueChapter'),
-          method: 'post',
+          url: this.$http.adornUrl("/master/course/delCourseCatalogueChapter"),
+          method: "post",
           data: this.$http.adornData({
-            'id': id
+            id: id
           })
         }).then(({ data }) => {
           if (data && data.code === 0) {
             this.$message({
-              message: '操作成功',
-              type: 'success',
+              message: "操作成功",
+              type: "success",
               duration: 1500,
               onClose: () => {
-                this.getDataList()
+                this.getDataList();
               }
-            })
+            });
           } else {
-            this.$message.error(data.msg)
+            this.$message.error(data.msg);
           }
-        })
-      })
+        });
+      });
     },
     // 开关变化
     SwitchChange(event) {
@@ -172,81 +249,95 @@ export default {
       var parms = {
         delFlag: event.delFlag,
         id: event.id
-      }
+      };
       this.$http({
-        url: this.$http.adornUrl('/book/book/update'),
-        method: 'post',
+        url: this.$http.adornUrl("/book/book/update"),
+        method: "post",
         data: parms
-      }).then(res => {
+      })
+        .then(res => {
           this.$message({
-          message: '成功',
-          type: 'success'
+            message: "成功",
+            type: "success"
+          });
+          this.loading = false;
+          this.getDataList();
         })
-        this.loading = false
-        this.getDataList()
-      }).catch(error => {
-        this.loading = false
-        console.log(error)
-      })
-      console.log(event)
+        .catch(error => {
+          this.loading = false;
+          console.log(error);
+        });
+      console.log(event);
     },
     chapterHandle(id, row) {
-      if (row.novel == '') {
-        this.$alert('请上传电子书文件后在进行此操作', '提示', {
-          confirmButtonText: '好的',
+      if (row.novel == "") {
+        this.$alert("请上传电子书文件后在进行此操作", "提示", {
+          confirmButtonText: "好的"
         });
-        return false
+        return false;
       }
       this.$http({
-          url: this.$http.adornUrl('/book/book/getChapter'),
-          method: 'get',
+        url: this.$http.adornUrl("/book/book/getChapter"),
+        method: "get",
         params: this.$http.adornParams({
-            'id':id
+          id: id
         })
       }).then(res => {
         this.$message({
-          message: '成功',
-          type: 'success'
-        })
-        this.loading = false
-        this.getDataList()
-      })
+          message: "成功",
+          type: "success"
+        });
+        this.loading = false;
+        this.getDataList();
+      });
     },
     contentHandle(id) {
       this.$http({
-          url: this.$http.adornUrl('/book/bookchaptercontent/getBookVoices'),
-          method: 'get',
+        url: this.$http.adornUrl("/book/bookchaptercontent/getBookVoices"),
+        method: "get",
         params: this.$http.adornParams({
-            'id':id
+          id: id
         })
       }).then(res => {
         this.$message({
-          message: '成功',
-          type: 'success'
-        })
-        this.loading = false
-        this.getDataList()
-      })
+          message: "成功",
+          type: "success"
+        });
+        this.loading = false;
+        this.getDataList();
+      });
     },
     voicesHandle(id) {
       //allVoices
       this.$http({
         // url: this.$http.adornUrl('/book/bookchaptercontent/allVoices'),
-          url: this.$http.adornUrl('/book/bookchaptercontent/AllVOices'),
-          method: 'get',
+        url: this.$http.adornUrl("/book/bookchaptercontent/AllVOices"),
+        method: "get",
         params: this.$http.adornParams({
-            'id':id
+          id: id
         })
       }).then(res => {
-        console.log('book/bookchaptercontent/AllVOices')
+        console.log("book/bookchaptercontent/AllVOices");
         this.$message({
-          message: '成功',
-          type: 'success'
-        })
-        this.loading = false
-        this.getDataList()
-      })
-    }
+          message: "成功",
+          type: "success"
+        });
+        this.loading = false;
+        this.getDataList();
+      });
     }
   }
+};
 </script>
+<style scoped lang="scss">
+.hidden1 {
+  text-overflow: ellipsis;
+  // white-space: nowrap;
+  overflow: hidden;
+  display: -webkit-box;
+
+  -webkit-line-clamp: 2;
+
+  -webkit-box-orient: vertical;
+}
+</style>

src/views/modules/shop/shopproduct.vue

@@ -12,6 +12,17 @@
           clearable
         ></el-input>
       </el-form-item>
+      <el-form-item>
+        <el-select v-model="dataForm.goodsType" placeholder="请选择商品类型" clearable >
+          <el-option
+            v-for="item in goodsTypeList"
+            :key="item.dictType"
+            :label="item.dictValue"
+            :value="item.dictType"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button
           @click="
@@ -36,6 +47,7 @@
       </el-form-item>
     </el-form>
     <el-table
+    height="70vh"
       :data="dataList"
       border
       v-loading="dataListLoading"
@@ -183,7 +195,7 @@
 
     <commonTags ref="commonTags"></commonTags>
     <correlation ref="correlation"></correlation>
-    <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>   -->
+    <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>  
      
   </div>
 </template>
@@ -200,8 +212,9 @@ export default {
   data() {
     return {
       dataForm: {
-        key: ""
-      },
+        key: "",
+        goodsType: "",
+      },  goodsTypeList: [],
       dataList: [],
       publishStatus: false,
       pageIndex: 1,
@@ -224,8 +237,18 @@ export default {
   },
   activated() {
     this.getDataList();
+    this.getGoodsTypeList();
   },
   methods: {
+    getGoodsTypeList() {
+      this.$http({
+        url: this.$http.adornUrl("/book/sysdictdata/selectByType/goodsType"),
+        method: "get"
+      }).then(({ data }) => {
+        // console.log(data.dataList)
+        this.goodsTypeList = data.dataList;
+      });
+    },
     handleEditTags(id) {
       this.$nextTick(() => {
         this.$refs.commonTags.open(id);
@@ -251,18 +274,26 @@ export default {
     // 获取数据列表
     getDataList() {
       this.dataListLoading = true;
-      this.$http({
-        url: this.$http.adornUrl("/book/shopproduct/list"),
-        method: "get",
-        params: this.$http.adornParams({
-          page: this.pageIndex,
+
+      this.$http
+          .request({
+            url: this.$http.adornUrl(`/master/shopProduct/listByPage`),
+            method: "POST",
+            data: {
+              current: this.pageIndex,
           limit: this.pageSize,
-          key: this.dataForm.key
+          productName: this.dataForm.key,
+          goodsType: this.dataForm.goodsType
+            },
+            header: {
+              //默认 无 说明：请求头
+              "Content-Type": "application/json"
+            }
           })
-      }).then(({ data }) => {
+     .then(({ data }) => {
         if (data && data.code === 0) {
-          this.dataList = data.page.list;
-          this.totalPage = data.page.totalCount;
+          this.dataList = data.result.records;
+          this.totalPage = data.result.pages;
         } else {
           this.dataList = [];
           this.totalPage = 0;