添加Qs fromData 请求输出格式

src/api/article.js

@@ -10,7 +10,9 @@ export function fetchList(query) {
 }
 
 // 文章的编辑、保存
-export function editArticle(data) {
+export function editArticle(data) { 
+
+  console.log(data , 'datas')
   return request({
     url: '/setCenter/Article/edit',
     method: 'post',

src/api/sort-management.js

@@ -16,3 +16,47 @@ export function getCategoryList(params) {
     })
 }
 
+
+
+export function getCategoryShow(id, params) {
+    return request({
+        url: `category/show/${id}`,
+        method: 'get',
+        params: params
+    })
+}
+
+
+
+export function getCategoryDelete(id) {
+    return request({
+        url: `category/delete/${id}`,
+        method: 'DELETE'
+    })
+}
+
+
+
+export function getCategoryAdd(data) {
+    console.log(data ,'data')
+    return request({
+        url: `category/create`,
+        method: 'POST',
+        data: {
+            name:  data.name,
+            source_platform: data.source_platform
+        }
+    })
+}
+
+
+
+export function getCategoryUpdate( data ,id ) {
+    console.log(data ,'getCategoryUpdate')
+
+    return request({
+        url: `category/update/${id}`,
+        method: 'PUT',
+        data: data
+    })
+}

src/utils/request.js

@@ -1,8 +1,9 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
-import store from '@/store'
+ 
 import { getToken } from '@/utils/auth'
 
+import qs from 'qs'
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
@@ -19,7 +20,9 @@ service.interceptors.request.use(
     config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  
     config.headers['api-token'] = getToken() || ''
-  
+
+
+    config.data = qs.stringify(config.data) // 转为formdata数据格式
     return config
   },
   error => {

src/views/sort-management/components/check-books-dialog.vue

@@ -2,7 +2,7 @@
   <Dialog
     :is-dialog-exist="isDialog"
     :title="dialogTitle"
-    :sub-title="dialogSubTitle"
+    :sub-title="booksItem ? booksItem.btn5Data.name : ''"
     :dialog-style="dialogStyle"
     @close-dialog="handleClose"
   >
@@ -16,224 +16,162 @@
           inline
         >
           <div class="div-main">
-            <el-form-item
-              label="书名"
-              prop="name"
-            >
-              <el-input
-                v-model="formData.name"
-                placeholder="请输入"
-              />
+            <el-form-item label="书名" prop="name">
+              <el-input v-model="formData.name" placeholder="请输入" />
             </el-form-item>
-            <el-form-item
-              label="分类"
-              prop="name"
-            >
-              <el-input
-                v-model="formData.name"
-                placeholder="请输入"
-              />
-            </el-form-item>
-            <el-form-item
-              label="简介"
-              prop="name"
-            >
-              <el-input
-                v-model="formData.name"
-                placeholder="请输入"
-              />
+
+            <el-form-item label="简介" prop="book_intro">
+              <el-input v-model="formData.book_intro" placeholder="请输入" />
             </el-form-item>
-          </div>
-          <div class="div-main">
-            <el-form-item>
-              <el-button
-                type="primary"
-                size="mini"
-                @click="onSubmit"
-              >
-                提交
-              </el-button>
-              <el-button
-                type="info"
-                plain
-                size="mini"
-                @click="resetForm('formData')"
-              >
+            <el-form-item label=" ">
+              <el-button type="primary" size="mini" @click="onSubmit"> 提交 </el-button>
+              <el-button type="info" plain size="mini" @click="resetForm('formData')">
                 重置
               </el-button>
             </el-form-item>
           </div>
         </el-form>
-        <!-- 操作按钮 -->
-        <div class="div-btn">
-          <el-button
-            type="primary"
-            icon="el-icon-refresh-right"
-            size="mini"
-            @click="_baseRequest(true)"
-          />
-        </div>
+
         <!-- 数据 -->
         <div class="table-container">
           <el-table
+            v-loading="tableData.length === 0"
             :data="tableData"
             border
             fit
             tooltip-effect="dark"
           >
-            <el-table-column
-              type="index"
-              label="序号"
-              align="center"
-              width="55"
-            />
-            <el-table-column
-              label="书名"
-              align="center"
-              prop="name"
-            />
-            <el-table-column
-              label="分类"
-              align="center"
-              prop="name"
-              min-width="100"
-            />
-            <el-table-column
-              label="书源"
-              align="center"
-              prop="name"
-              min-width="100"
-            />
-            <el-table-column
-              label="简介"
-              align="center"
-              prop="memo"
-            />
+            <el-table-column type="index" label="序号" align="center" width="55" />
+            <el-table-column label="书名" align="center" prop="book_name" />
+            <el-table-column label="分类" align="center">
+              <template slot-scope="scope">{{ booksItem.data.category_name }}</template>
+            </el-table-column>
+            <el-table-column label="书源" align="center">
+              <template slot-scope="scope">{{ booksItem.btn5Data.name }}</template>
+            </el-table-column>
+            <el-table-column label="简介" align="center" prop="book_intro" />
           </el-table>
         </div>
-        <!-- 底部分页组件 -->
-        <div class="pagination-container">
-          <el-pagination
-            :current-page="formData.currentPage"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="formData.limit"
-            layout="total,  prev, pager, next, sizes,jumper"
-            :total="formData.total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-        </div>
       </el-main>
     </el-container>
   </Dialog>
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index'
+import Dialog from "@/components/Dialog/index";
 
 export default {
   components: { Dialog },
   props: {
     isDialog: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    mod: {
+      type: Array,
+      default: () => [],
+    },
+    booksItem: {
+      type: Object,
+      default: () => {
+        return {
+          btn5Data: {
+            name: "",
+          },
+        };
+      },
+    },
   },
+  watch: {
+    mod() {
+      this._baseRequest();
+    },
+  },
+
   data() {
     return {
       // dialog样式
       dialogStyle: {
-        '--dialog-width': '1000px',
-        '--dialog-height': '712px',
-        '--title-height': '51px'
+        "--dialog-width": "1000px",
+        "--dialog-height": "712px",
+        "--title-height": "51px",
       },
-      dialogTitle: '查看书籍',
-      dialogSubTitle: '笔趣阁',
+      dialogTitle: "查看书籍",
+      dialogSubTitle: "笔趣阁",
       isSearchVisible: true,
       // 表格数据
-      tableData: [
-        {
-          name: '11'
-        }
-      ],
+      tableData: [],
       formData: {
-        name: '132456',
-        // 默认显示页
-        currentPage: 1,
-        // 每页页数
-        limit: 10,
-        // 总页数
-        total: 10
-      }
-    }
+        name: "",
+        book_intro: "",
+      },
+    };
   },
   methods: {
-    // 基础请求
-    _baseRequest(refres = false) {
-      // const params = {
-      //   name: this.formData.name,
-      //   p: this.formData.currentPage,
-      //   limit: this.formData.limit
-      // }
-      // filterWordList(params).then(resp => {
-      //   if (parseInt(resp.code) === 0) {
-      if (refres) {
-        this.$message.success('刷新成功~')
-      }
-      //     // console.log(JSON.stringify(resp.data))
-      //     this.tableData = resp.data.list
-      //     this.formData.total = resp.data.total
-      //   }
-      // })
+    _baseRequest() {
+      this.tableData = [];
+      this.tableData = JSON.parse(JSON.stringify(this.mod));
     },
-    // 提交操作
+    // 提交搜索操作
     onSubmit() {
-      this._baseRequest()
+      let data = null;
+      if (this.formData.name && this.formData.book_intro) {
+        data = this.mod.filter((item) => {
+          if (
+            item.book_name.indexOf(this.formData.name) != -1 &&
+            item.book_intro.indexOf(this.formData.book_intro) != -1
+          ) {
+            return item;
+          }
+        });
+      } else if (this.formData.name && !this.formData.book_intro) {
+        data = this.mod.filter((item) => {
+          if (item.book_name.indexOf(this.formData.name) != -1) {
+            return item;
+          }
+        });
+      } else {
+        data = this.mod.filter((item) => {
+          if (item.book_intro.indexOf(this.formData.book_intro) != -1) {
+            return item;
+          }
+        });
+      }
+      this.tableData = data;
     },
     // 重置操作
     resetForm(val) {
-      this.$refs[val].resetFields()
-      this._baseRequest()
-    },
-    // 每页数据
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-      this.formData.limit = val
-      this._baseRequest()
-    },
-    // 当前页
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-      this.formData.currentPage = val
-      this._baseRequest()
+      this.$refs[val].resetFields();
+      this._baseRequest();
     },
+
     handleClose() {
-      this.$emit('handle-close')
-    }
-  }
-}
+      this.$emit("handle-close");
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .el-container{
+.el-container {
+  width: 100%;
+  height: 100%;
+  .el-main {
     width: 100%;
-    height: 100%;
-    .el-main{
-      width: 100%;
-      .div-main{
-        display: flex;
-        justify-content: space-between;
-        flex-flow: row wrap;
-        padding: 0 5%;
-      }
-      .div-btn{
-        margin-bottom: 10px;
-      }
-      .pagination-container{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+    .div-main {
+      display: flex;
+      justify-content: space-between;
+      flex-flow: row wrap;
+      padding: 0 5%;
+    }
+    .div-btn {
+      margin-bottom: 10px;
+    }
+    .pagination-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
+}
 </style>

src/views/sort-management/components/edit-dialog.vue

@@ -7,110 +7,157 @@
   >
     <el-container>
       <el-main>
-        <el-form
-          ref="formData"
-          :model="formData"
-          label-width="auto"
-        >
+        <el-form ref="formData" :model="formData" label-width="auto">
           <el-form-item label="书源">
             <el-select
-              v-model="formData.name"
-              placeholder="请输入"
+              v-model="formData.source_platform"
+              placeholder="请选择"
               style="width: 100%"
             >
               <el-option
-                label="区域一"
-                value="shanghai"
-              />
-              <el-option
-                label="区域二"
-                value="beijing"
+                :label="item.name"
+                :value="item.value"
+                v-for="(item, index) in dropdownData"
+                :key="index"
               />
             </el-select>
           </el-form-item>
           <el-form-item label="分类">
-            <el-select
-              v-model="formData.name"
-              placeholder="请输入"
-              style="width: 100%"
-            >
-              <el-option
-                label="区域一"
-                value="shanghai"
-              />
-              <el-option
-                label="区域二"
-                value="beijing"
-              />
-            </el-select>
+            <el-input v-model="formData.name" placeholder="请输入"></el-input>
           </el-form-item>
         </el-form>
       </el-main>
       <el-footer>
-        <el-button type="primary">
-          确认
-        </el-button>
-        <el-button @click="handleClose">
-          取消
-        </el-button>
+        <el-button type="primary" @click="onSubmit"> 确认</el-button>
+        <el-button @click="handleClose"> 取消 </el-button>
       </el-footer>
     </el-container>
   </Dialog>
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index'
+import Dialog from "@/components/Dialog/index";
+import { getCategoryAdd, getCategoryUpdate } from "@/api/sort-management";
 
 export default {
   components: { Dialog },
   props: {
     isDialog: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 弹窗标题
     dialogTitle: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
+    dropdownData: {
+      type: Array,
+      default: () => {},
+    },
+    selectItem: {
+      type: Object,
+      default: () => {
+        return {
+          source_platform: "",
+          name: ""
+        };
+      },
+    },
   },
+
+  watch: {
+    isDialog(val) {
+      if (val) {
+        this.init();
+      }
+    },
+  },
+
   data() {
     return {
       // dialog样式
       dialogStyle: {
-        '--dialog-width': '1000px',
-        '--dialog-height': '450px',
-        '--title-height': '51px'
+        "--dialog-width": "1000px",
+        "--dialog-height": "450px",
+        "--title-height": "51px",
       },
       formData: {
-        name: '132456'
-      }
-    }
+        source_platform: "",
+        name: "",
+      },
+    };
   },
   methods: {
+    init() {
+      console.log("初始化");
+      if (this.dialogTitle === "新增分类") {
+        this.formData = {
+          source_platform: "",
+          name: "",
+        };
+      } else {
+        this.formData = this.selectItem;
+      }
+    },
     handleClose() {
-      this.$emit('handle-close')
-    }
-  }
-}
+      this.$emit("handle-close");
+    },
+
+    onSubmit() {
+      console.log(this.formData)
+
+      if (this.formData.name === "") return this.$message.error("请输入分类名称");
+      if (this.formData.source_platform === "") return this.$message.error("请选择书源");
+ 
+
+      if (this.dialogTitle === "新增分类") {
+        getCategoryAdd({
+          name: this.formData.name,
+          source_platform: this.formData.source_platform
+        }).then((res) => {
+           this.$emit("handle-success");
+           this.$message.success('新增成功')
+        }).catch(err=>{
+             this.$emit("handle-close");
+
+        })
+      } else { 
+     
+        getCategoryUpdate(
+          {
+            name: this.formData.name,
+          },
+          this.formData.source_platform
+        ).then((res) => {
+           this.$emit("handle-success");
+           this.$message.success('修改成功')
+        }).catch(err=>{
+             this.$emit("handle-close");
+
+        })
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .el-container{
+.el-container {
+  width: 100%;
+  height: 100%;
+  .el-main {
+    width: 100%;
+    height: 90%;
+    padding: 5% 15% 0;
+  }
+  .el-footer {
     width: 100%;
-    height: 100%;
-    .el-main{
-      width: 100%;
-      height: 90%;
-      padding: 5% 15% 0;
-    }
-    .el-footer{
-      width: 100%;
-      height: 10%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      box-shadow: 0 5px 10px #000000;
-    }
+    height: 10%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 5px 10px #000000;
   }
+}
 </style>

src/views/sort-management/index.vue

@@ -21,7 +21,7 @@
           <el-table-column label="书源" align="center">
             <template slot-scope="scope">{{ btn5Data.name }}</template>
           </el-table-column>
-          <el-table-column label="采集书籍数量" align="center" />
+          <el-table-column label="采集书籍数量" align="center" prop="count_num" />
           <el-table-column prop="address" label="操作" align="center">
             <template slot-scope="scope">
               <CustomButton
@@ -42,13 +42,13 @@
                 type="danger"
                 icon="delete"
                 is-svg
-                @onClick="handleDelete(scope.$index)"
+                @onClick="handleDelete(scope.row)"
               />
             </template>
           </el-table-column>
         </el-table>
 
-        <el-footer>
+        <!-- <el-footer>
           <el-pagination
             :current-page="currentPage"
             :page-sizes="[5, 10, 15, 20, 30]"
@@ -58,7 +58,7 @@
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
           />
-        </el-footer>
+        </el-footer> -->
       </div>
     </el-main>
     <!--    编辑、新增弹窗-->
@@ -66,11 +66,18 @@
       :is-dialog="isEditDialog"
       :dialog-title="editTitleDialog"
       @handle-close="isEditDialog = false"
-      :btn5Data="btn5Data"
+      :dropdownData="dropdownData"
       :CategoryList="CategoryList"
+      :selectItem="selectItem"
+      @handle-success="onHandleSuccess"
     />
     <!--    查看书籍弹窗-->
-    <CheckBooksDialog :is-dialog="isCheckDialog" @handle-close="isCheckDialog = false" />
+    <CheckBooksDialog
+      :mod="booksData"
+      :booksItem="booksItem"
+      :is-dialog="isCheckDialog"
+      @handle-close="isCheckDialog = false"
+    />
   </el-container>
 </template>
 
@@ -80,7 +87,12 @@ import CustomButton from "@/components/CustomButton/index";
 import EditDialog from "./components/edit-dialog";
 import CheckBooksDialog from "./components/check-books-dialog";
 
-import { getPlatformList, getCategoryList } from "@/api/sort-management";
+import {
+  getPlatformList,
+  getCategoryList,
+  getCategoryShow,
+  getCategoryDelete,
+} from "@/api/sort-management";
 
 export default {
   components: {
@@ -103,17 +115,25 @@ export default {
       dropdownData: [],
       CategoryList: [],
       btn5Data: {},
+      booksData: null,
+      booksItem: null,
+      selectItem: {},
     };
   },
   created() {
     this.init();
   },
   methods: {
-    init() {
-      this.onPlatformList();
+    init(refresh = false) {
+      this.onPlatformList(refresh);
+    },
+
+    onHandleSuccess() {
+      this.init();
+      this.isEditDialog = false;
     },
 
-    onPlatformList() {
+    onPlatformList(refresh) {
       getPlatformList().then((res) => {
         let obj = res.data;
         let arr = [];
@@ -128,39 +148,56 @@ export default {
         this.dropdownData = arr;
         this.btn5Data = arr[0];
         this.onCategoryList(arr[0].value);
+        refresh && this.$message.success("刷新成功");
       });
     },
 
     onCategoryList(source_platform) {
       getCategoryList({
-        source_platform,
+        source_platform: source_platform,
+        need_num: true,
       }).then((res) => {
         this.tableData = res.data; // 分类列表
       });
     },
 
     handleButton5(data) {
-      console.log(data)
       this.btn5Data = data;
-        this.onCategoryList(data.value);
+      this.onCategoryList(data.value);
 
       this.$forceUpdate();
     },
 
     refreshData() {
-      console.log("刷新");
+      this.init(true);
     },
     // 打开编辑弹窗操作
     openEditDialog(row) {
+  
       this.isEditDialog = true;
       if (row) {
         this.editTitleDialog = "编辑分类";
+        this.selectItem = {
+          source_platform: row.id,
+          name: row.category_name,
+        };
       } else {
         this.editTitleDialog = "新增分类";
       }
     },
     // 打开查看书籍弹窗
-    openCheckBooksDialog() {
+    openCheckBooksDialog(data) {
+      this.booksData = [];
+      getCategoryShow(data.id, {
+        source_platform: this.btn5Data.value,
+      }).then((res) => {
+        this.booksData = res.data;
+        this.booksItem = {
+          data: data,
+          btn5Data: this.btn5Data,
+        };
+      });
+
       this.isCheckDialog = true;
     },
 
@@ -175,7 +212,10 @@ export default {
         }
       )
         .then(() => {
-          this.selectItem = row;
+          console.log(row);
+          getCategoryDelete(row.id).then((res) => {
+            this.init();
+          });
         })
         .catch(() => {});
     },