1.书籍管理、分类管理静态页

src/router/modules/books-management.js

@@ -14,16 +14,16 @@ const booksManagement = {
   children: [
     {
       path: 'article',
-      component: () => import('@/views/books-management/article'),
+      component: () => import('@/views/books-management/article-page/index'),
       name: 'articleManagement',
       meta: { title: '文章管理' }
     },
     {
-        path: 'ShuYuan',
-        component: () => import('@/views/books-management/ShuYuan'),
-        name: 'memberManagement',
-        meta: { title: '书源管理' }
-      }
+      path: 'ShuYuan',
+      component: () => import('@/views/books-management/ShuYuan-page/index'),
+      name: 'memberManagement',
+      meta: { title: '书源管理' }
+    }
   ]
 }
 export default booksManagement

src/views/books-management/ShuYuan-page/components/gather-state-dialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <Dialog
+    :is-dialog-exist="isDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-progress
+          type="circle"
+          :percentage="num"
+        />
+        <!--        <svg height="150" width="110">-->
+        <!--          <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round" />-->
+        <!--          <circle class="demo2" cx="55" cy="55" r="50" fill="red" stroke="skyblue" stroke-width="5" :stroke-dasharray="`${circleNum * 3.14}, 999`" />-->
+        <!--        </svg>-->
+        <p style="color: #666666">
+          正在采集书源 5个预计需要时间 01:18
+        </p>
+        <p>合计采集书源 69个</p>
+      </el-main>
+    </el-container>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  components: { Dialog },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // dialog样式
+      dialogStyle: {
+        '--dialog-width': '1000px',
+        '--dialog-height': '450px',
+        '--title-height': '51px'
+      },
+      // 弹窗标题
+      dialogTitle: '采集状态',
+      formData: {
+        name: '132456'
+      },
+      num: 0,
+      circleNum: 10
+    }
+  },
+  watch: {
+    'isDialog'(val) {
+      if (val) {
+        this.timerWay()
+      }
+    }
+  },
+  methods: {
+    timerWay() {
+      const timer = setInterval(() => {
+        this.num++
+        // this.circleNum++
+        console.log(this.num)
+        if (this.num >= 100) {
+          clearInterval(timer)
+        }
+      }, 100)
+    },
+    handleClose() {
+      this.$emit('handle-close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    width: 100%;
+    height: 100%;
+    .el-main{
+      width: 100%;
+      margin: auto 0;
+      text-align: center;
+      font-size: 14px;
+      /*
+       .demo2{
+        transform-origin: right left 0;
+        transform: rotate(-90deg);
+      }
+      */
+    }
+  }
+</style>

src/views/books-management/ShuYuan-page/components/timing-gather-books.vue

@@ -0,0 +1,132 @@
+<template>
+  <Dialog
+    :is-dialog-exist="isDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form
+          ref="formData"
+          :model="formData"
+          label-width="auto"
+        >
+          <el-form-item label="书源">
+            <el-checkbox-group v-model="formData.checkList">
+              <el-checkbox
+                v-for="(item, index) in 5"
+                :key="index"
+                label="选中且禁用"
+                style="min-width: 100px"
+              />
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item
+            v-if="dialogTitle === '定时采集书籍'"
+            label="更新时间"
+          >
+            <el-radio-group v-model="formData.radio">
+              <el-radio :label="3">
+                每日定时
+              </el-radio>
+              <el-radio :label="6">
+                每周定时
+              </el-radio>
+              <el-radio :label="9">
+                每月定时
+              </el-radio>
+            </el-radio-group>
+            <div style="margin-top: 10px">
+              <el-select
+                v-model="formData.name"
+                :placeholder="formData.radio === 3 ? '每日定时' : formData.radio === 6 ? '每周定时' : '每月定时'"
+                size="mini"
+                style="width: 40%"
+              >
+                <template slot="suffix">
+                  <i class="el-icon-date" />
+                </template>
+                <el-option
+                  label="区域一"
+                  value="shanghai"
+                />
+                <el-option
+                  label="区域二"
+                  value="beijing"
+                />
+              </el-select>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-main>
+      <el-footer>
+        <el-button type="primary">
+          {{ dialogTitle === '定时采集书籍' ? '提交' : '开始采集' }}
+        </el-button>
+        <el-button @click="handleClose">
+          取消
+        </el-button>
+      </el-footer>
+    </el-container>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  components: { Dialog },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    },
+    // 弹窗标题
+    dialogTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // dialog样式
+      dialogStyle: {
+        '--dialog-width': '1000px',
+        '--dialog-height': '455px',
+        '--title-height': '51px'
+      },
+      formData: {
+        name: '',
+        checkList: [],
+        radio: 3
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('handle-close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    width: 100%;
+    height: 100%;
+    .el-main{
+      width: 100%;
+      height: 90%;
+      padding: 2% 20% 0;
+    }
+    .el-footer{
+      width: 100%;
+      height: 10%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: 0 5px 10px #000000;
+    }
+  }
+</style>

src/views/books-management/ShuYuan-page/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-form
+        v-if="isSearchVisible"
+        ref="formData"
+        label-width="auto"
+        :model="formData"
+        inline
+      >
+        <div class="div-main">
+          <el-form-item
+            label="书源"
+            prop="name"
+          >
+            <el-input
+              v-model="formData.name"
+              placeholder="书源"
+              size="mini"
+            />
+          </el-form-item>
+          <el-form-item
+            label="备注"
+            prop="name"
+          >
+            <el-input
+              v-model="formData.name"
+              placeholder="备注"
+              size="mini"
+            />
+          </el-form-item>
+          <el-form-item>
+            <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>
+          <el-form-item style="width: 350px" />
+        </div>
+      </el-form>
+      <!-- 操作按钮 -->
+      <div class="div-btn">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh-right"
+            size="mini"
+            @click="_baseRequest(true)"
+          />
+          <el-button
+            type="primary"
+            icon=""
+            size="mini"
+            @click="openGatherDialog(null)"
+          >
+            一键采集书籍
+          </el-button>
+          <el-button
+            type="warning"
+            icon="el-icon-alarm-clock"
+            size="mini"
+            @click="openGatherStateDialog()"
+          >
+            定时采集书籍
+          </el-button>
+        </div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="isSearchVisible = !isSearchVisible"
+        />
+      </div>
+      <!-- 数据 -->
+      <div class="table-container">
+        <el-table
+          :data="tableData"
+          border
+          fit
+          tooltip-effect="dark"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+            width="55"
+          />
+          <el-table-column
+            label="书源"
+            align="center"
+            prop="name"
+            min-width="100"
+          />
+          <el-table-column
+            label="采集书籍数量"
+            align="center"
+            prop="name"
+          />
+          <el-table-column
+            label="备注"
+            align="center"
+            prop="filterKeyNum"
+          >
+            <template slot-scope="">
+              <!--              <span style="color: #1890FF;cursor:pointer;" @click="openNumDialog(scope.row)">{{ scope.row.filterKeyNum }}</span>-->
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <CustomButton
+                tip-text="采集"
+                icon="el-icon-folder-add"
+                @onClick="openGatherDialog(scope.row)"
+              />
+              <CustomButton
+                tip-text="禁用"
+                type="danger"
+                icon="el-icon-circle-close"
+                @onClick="openDeleteDialog(scope.row)"
+              />
+            </template>
+          </el-table-column>
+        </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>
+    <!--    文章编辑页面-->
+    <TimingGatherBooks
+      :is-dialog="isGatherDialog"
+      :dialog-title="gatherTitleDialog"
+      @handle-close="isGatherDialog = false"
+    />
+    <!--    采集状态-->
+    <GatherStateDialog
+      :is-dialog="isStateDialog"
+      @handle-close="isStateDialog = false"
+    />
+  </el-container>
+</template>
+
+<script>
+/**
+ *书源管理页面
+ * */
+import CustomButton from '@/components/CustomButton/index'
+import TimingGatherBooks from './components/timing-gather-books'
+import GatherStateDialog from './components/gather-state-dialog'
+// 编辑弹窗组件
+export default {
+  components: { CustomButton, TimingGatherBooks, GatherStateDialog },
+  data() {
+    return {
+      // 活动添加弹窗开关
+      isStateDialog: false,
+      isGatherDialog: false,
+      gatherTitleDialog: '',
+      // UI控制参数
+      isSearchVisible: true,
+      // 选择的操作的数据
+      selectItem: {},
+      // 多选列表数据
+      multipleSelection: [],
+      // 表格数据
+      tableData: [
+        {
+          name: '11'
+        }
+      ],
+      // 表单参数
+      formData: {
+        name: '',
+        // 默认显示页
+        currentPage: 1,
+        // 每页页数
+        limit: 10,
+        // 总页数
+        total: 10
+      }
+    }
+  },
+  created() {
+    this._baseRequest()
+  },
+  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
+      //   }
+      // })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 更新操作
+    refreshData() {
+      this._baseRequest(true)
+    },
+    // 提交操作
+    onSubmit() {
+      this._baseRequest()
+    },
+    // 重置操作
+    resetForm(val) {
+      this.$refs[val].resetFields()
+      this._baseRequest()
+    },
+    openGatherStateDialog() {
+      this.isStateDialog = true
+    },
+    // 打开编辑弹窗操作
+    openGatherDialog(row) {
+      this.isGatherDialog = true
+      if (row) {
+        this.gatherTitleDialog = '定时采集书籍'
+      } else {
+        this.gatherTitleDialog = '一键采集'
+      }
+    },
+    // 删除操作弹窗
+    openDeleteDialog(scope) {
+      this.$confirm('是否确认删除改书籍?删除后该书源信息将永久删除, 且不可复原, 请谨慎操作!', '删除提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.selectItem = scope.row
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 每页数据
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.formData.limit = val
+      this._baseRequest()
+    },
+    // 当前页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.formData.currentPage = val
+      this._baseRequest()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    width: 100%;
+    height: 100%;
+    .el-main{
+      .div-main{
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+        padding: 0 3%;
+        .el-input{
+          width: 220px;
+        }
+      }
+      .div-btn{
+        display: flex;
+        justify-content: space-between;
+        margin: 15px 0;
+        .drop-down{
+          margin: 0 10px;
+        }
+      }
+      .pagination-container{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+</style>

src/views/books-management/ShuYuan.vue

@@ -1,14 +0,0 @@
-<template>
-    <el-container>
-      <el-main>书源管理</el-main>
-    </el-container>
-</template>
-
-<script>
-export default {
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/books-management/article-page/components/edit-dialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <Dialog
+    :is-dialog-exist="isDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form
+          ref="formData"
+          :model="formData"
+          label-width="auto"
+        >
+          <el-form-item label="电子书ID">
+            <el-input
+              v-model="formData.name"
+              placeholder="电子书ID"
+              :disabled="true"
+            />
+          </el-form-item>
+          <el-form-item label="书名">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="书源">
+            <el-input
+              v-model="formData.name"
+              placeholder="书源"
+              :disabled="true"
+            />
+          </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-form-item>
+          <el-form-item label="简介">
+            <el-input
+              v-model="formData.name"
+              type="textarea"
+              :rows="5"
+              :resize="false"
+              placeholder="认识一下, 这是一个简介"
+            />
+          </el-form-item>
+        </el-form>
+      </el-main>
+      <el-footer>
+        <el-button type="primary">
+          确认
+        </el-button>
+        <el-button @click="handleClose">
+          取消
+        </el-button>
+      </el-footer>
+    </el-container>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  components: { Dialog },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // dialog样式
+      dialogStyle: {
+        '--dialog-width': '1000px',
+        '--dialog-height': '510px',
+        '--title-height': '51px'
+      },
+      // 弹窗标题
+      dialogTitle: '编辑书籍',
+      formData: {
+        name: '132456'
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('handle-close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    width: 100%;
+    height: 100%;
+    .el-main{
+      width: 100%;
+      height: 90%;
+      padding: 2% 15% 0;
+    }
+    .el-footer{
+      width: 100%;
+      height: 10%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: 0 5px 10px #000000;
+    }
+  }
+</style>

src/views/books-management/article-page/index.vue

@@ -0,0 +1,325 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-form
+        v-if="isSearchVisible"
+        ref="formData"
+        label-width="auto"
+        :model="formData"
+        inline
+      >
+        <div class="div-main">
+          <el-form-item
+            label="书名"
+            prop="name"
+          >
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入"
+              size="mini"
+            />
+          </el-form-item>
+          <el-form-item
+            label="分类"
+            prop="name"
+          >
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入"
+              size="mini"
+            />
+          </el-form-item>
+          <el-form-item
+            label="简介"
+            prop="name"
+          >
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入"
+              size="mini"
+            />
+          </el-form-item>
+          <el-form-item>
+            <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">
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-refresh-right"
+            size="mini"
+            @click="refreshData()"
+          />
+          <el-dropdown class="drop-down">
+            <el-button
+              type="warning"
+              size="mini"
+            >
+              书源<i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>黄金糕</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            @click="openDeleteDialog()"
+          >
+            删除
+          </el-button>
+        </div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="isSearchVisible = !isSearchVisible"
+        />
+      </div>
+      <!-- 数据 -->
+      <div class="table-container">
+        <el-table
+          :data="tableData"
+          border
+          fit
+          tooltip-effect="dark"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+            align="center"
+            width="55"
+          />
+          <el-table-column
+            label="电子书ID"
+            align="center"
+            prop="name"
+            min-width="100"
+          />
+          <el-table-column
+            label="书名"
+            align="center"
+            prop="name"
+          />
+          <el-table-column
+            label="书源"
+            align="center"
+            prop="filterKeyNum"
+          >
+            <template slot-scope="">
+              <!--              <span style="color: #1890FF;cursor:pointer;" @click="openNumDialog(scope.row)">{{ scope.row.filterKeyNum }}</span>-->
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="分类"
+            align="center"
+            prop="usePvdStr"
+          >
+            <template slot-scope="">
+              <!--              <span :style="{ color: scope.row.usePvdArr.length === 0 ? '#999999' : '#1890FF' }" style="cursor:pointer;" @click="openPlatformDialog(scope.row)">{{ scope.row.usePvdStr }}</span>-->
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="简介"
+            align="center"
+            prop="memo"
+          />
+          <el-table-column
+            label="操作"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <CustomButton
+                tip-text="编辑"
+                is-svg
+                icon="edit"
+                @onClick="openEditDialog(scope.row)"
+              />
+              <CustomButton
+                tip-text="删除"
+                type="danger"
+                is-svg
+                icon="delete"
+                @onClick="openDeleteDialog(scope.row)"
+              />
+            </template>
+          </el-table-column>
+        </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>
+    <!--    文章编辑页面-->
+    <ArticleEditDialog
+      :is-dialog="isEditDialog"
+      @handle-close="isEditDialog = false"
+    />
+  </el-container>
+</template>
+
+<script>
+/**
+ *文章管理页面
+ * */
+import CustomButton from '@/components/CustomButton/index'
+import ArticleEditDialog from './components/edit-dialog'
+// 编辑弹窗组件
+export default {
+  components: { CustomButton, ArticleEditDialog },
+  data() {
+    return {
+      // 活动添加弹窗开关
+      isEditDialog: false,
+      // UI控制参数
+      isSearchVisible: true,
+      // 选择的操作的数据
+      selectItem: {},
+      // 多选列表数据
+      multipleSelection: [],
+      // 表格数据
+      tableData: [
+        {
+          name: '11'
+        }
+      ],
+      // 表单参数
+      formData: {
+        name: '',
+        // 默认显示页
+        currentPage: 1,
+        // 每页页数
+        limit: 10,
+        // 总页数
+        total: 10
+      }
+    }
+  },
+  created() {
+    this._baseRequest()
+  },
+  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
+      //   }
+      // })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    // 更新操作
+    refreshData() {
+      this._baseRequest(true)
+    },
+    // 提交操作
+    onSubmit() {
+      this._baseRequest()
+    },
+    // 重置操作
+    resetForm(val) {
+      this.$refs[val].resetFields()
+      this._baseRequest()
+    },
+    // 打开编辑弹窗操作
+    openEditDialog(row) {
+      this.isEditDialog = true
+      console.log(row)
+    },
+    // 删除操作弹窗
+    openDeleteDialog(scope) {
+      this.$confirm('是否确认删除改书籍?删除后该书源信息将永久删除, 且不可复原, 请谨慎操作!', '删除提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.selectItem = scope.row
+      }).catch(() => {
+        this.$message.info('已取消删除')
+      })
+    },
+    // 每页数据
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.formData.limit = val
+      this._baseRequest()
+    },
+    // 当前页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.formData.currentPage = val
+      this._baseRequest()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    width: 100%;
+    height: 100%;
+    .el-main{
+      .div-main{
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+        padding: 0 3%;
+        .el-input{
+          width: 220px;
+        }
+      }
+      .div-btn{
+        display: flex;
+        justify-content: space-between;
+        margin: 15px 0;
+        .drop-down{
+          margin: 0 10px;
+        }
+      }
+      .pagination-container{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+</style>

src/views/books-management/article.vue

@@ -1,14 +0,0 @@
-<template>
-    <el-container>
-      <el-main>文章管理</el-main>
-    </el-container>
-</template>
-
-<script>
-export default {
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -0,0 +1,240 @@
+<template>
+  <Dialog
+    :is-dialog-exist="isDialog"
+    :title="dialogTitle"
+    :sub-title="dialogSubTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form
+          v-if="isSearchVisible"
+          ref="formData"
+          label-width="auto"
+          :model="formData"
+          inline
+        >
+          <div class="div-main">
+            <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>
+          </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-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
+            :data="tableData"
+            border
+            fit
+            tooltip-effect="dark"
+            @selection-change="handleSelectionChange"
+          >
+            <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>
+        </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'
+
+export default {
+  components: { Dialog },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // dialog样式
+      dialogStyle: {
+        '--dialog-width': '1000px',
+        '--dialog-height': '712px',
+        '--title-height': '51px'
+      },
+      dialogTitle: '查看书籍',
+      dialogSubTitle: '笔趣谷',
+      isSearchVisible: true,
+      // 表格数据
+      tableData: [
+        {
+          name: '11'
+        }
+      ],
+      formData: {
+        name: '132456',
+        // 默认显示页
+        currentPage: 1,
+        // 每页页数
+        limit: 10,
+        // 总页数
+        total: 10
+      }
+    }
+  },
+  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
+      //   }
+      // })
+    },
+    // 提交操作
+    onSubmit() {
+      this._baseRequest()
+    },
+    // 重置操作
+    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()
+    },
+    handleClose() {
+      this.$emit('handle-close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    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;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+  <Dialog
+    :is-dialog-exist="isDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form
+          ref="formData"
+          :model="formData"
+          label-width="auto"
+        >
+          <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-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-form-item>
+        </el-form>
+      </el-main>
+      <el-footer>
+        <el-button type="primary">
+          确认
+        </el-button>
+        <el-button @click="handleClose">
+          取消
+        </el-button>
+      </el-footer>
+    </el-container>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  components: { Dialog },
+  props: {
+    isDialog: {
+      type: Boolean,
+      default: false
+    },
+    // 弹窗标题
+    dialogTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // dialog样式
+      dialogStyle: {
+        '--dialog-width': '1000px',
+        '--dialog-height': '450px',
+        '--title-height': '51px'
+      },
+      formData: {
+        name: '132456'
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('handle-close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-container{
+    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;
+    }
+  }
+</style>

src/views/sort-management/index.vue

@@ -2,42 +2,67 @@
   <el-container>
     <el-main>
       <ActionButton
-        :openBtn1="true"
-        :textBtn1="'新增分类'"
-        :openBtn5="true"
-        :textBtn5="'书源'"
-        :typeBtn5="'warning'"
-        :iconBtn5="'el-icon-tickets'"
+        :open-btn1="true"
+        :text-btn1="'新增分类'"
+        :open-btn5="true"
+        :text-btn5="'书源'"
+        :type-btn5="'warning'"
+        :icon-btn5="'el-icon-tickets'"
         @handle-refresh="refreshData"
-        @handle-button1="refreshData1"
+        @handle-button1="openEditDialog(null)"
       />
 
       <div>
-        <el-table :data="[{}]">
-          <el-table-column type="index" label="序号" align="center"></el-table-column>
-          <el-table-column label="分类" align="center"></el-table-column>
-          <el-table-column label="书源" align="center"></el-table-column>
-          <el-table-column label="采集书籍数量" align="center"></el-table-column>
-          <el-table-column prop="address" label="操作" align="center">
+        <el-table
+          :data="[{}]"
+          border
+          fit
+          tooltip-effect="dark"
+        >
+          <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+            width="80"
+          />
+          <el-table-column
+            label="分类"
+            align="center"
+          />
+          <el-table-column
+            label="书源"
+            align="center"
+          />
+          <el-table-column
+            label="采集书籍数量"
+            align="center"
+          />
+          <el-table-column
+            prop="address"
+            label="操作"
+            align="center"
+          >
             <template slot-scope="scope">
               <CustomButton
                 tip-text="查看明细"
                 type="warning"
                 icon="el-icon-tickets"
-              ></CustomButton>
+                @onClick="openCheckBooksDialog(scope.row)"
+              />
               <CustomButton
                 tip-text="编辑"
                 type="primary"
                 icon="edit"
                 is-svg
-              ></CustomButton>
+                @onClick="openEditDialog(scope.row)"
+              />
               <CustomButton
                 tip-text="删除"
                 type="danger"
                 icon="delete"
                 is-svg
                 @onClick="handleDelete(scope.$index)"
-              ></CustomButton>
+              />
             </template>
           </el-table-column>
         </el-table>
@@ -51,61 +76,91 @@
             :total="totalCount"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-          >
-          </el-pagination>
+          />
         </el-footer>
       </div>
     </el-main>
+    <!--    编辑、新增弹窗-->
+    <EditDialog
+      :is-dialog="isEditDialog"
+      :dialog-title="editTitleDialog"
+      @handle-close="isEditDialog = false"
+    />
+    <!--    查看书籍弹窗-->
+    <CheckBooksDialog
+      :is-dialog="isCheckDialog"
+      @handle-close="isCheckDialog = false"
+    />
   </el-container>
 </template>
 
 <script>
-import ActionButton from "@/components/ActionButton/index";
-import CustomButton from "@/components/CustomButton/index";
-
+import ActionButton from '@/components/ActionButton/index'
+import CustomButton from '@/components/CustomButton/index'
+import EditDialog from './components/edit-dialog'
+import CheckBooksDialog from './components/check-books-dialog'
 export default {
   components: {
     ActionButton,
     CustomButton,
+    EditDialog,
+    CheckBooksDialog
   },
   data() {
     return {
+      isCheckDialog: false,
+      isEditDialog: false,
+      editTitleDialog: '',
       // 分页数据
       totalCount: 0,
       currentPage: 1,
       limit: 20,
       // 返回的数据
-      tableData: [],
-    };
+      tableData: []
+    }
   },
   methods: {
     refreshData() {
-      console.log("刷新");
+      console.log('刷新')
     },
-
-    // 新增分类
-    refreshData1() {
-      console.log("新增分类");
+    // 打开编辑弹窗操作
+    openEditDialog(row) {
+      this.isEditDialog = true
+      if (row) {
+        this.editTitleDialog = '编辑分类'
+      } else {
+        this.editTitleDialog = '新增分类'
+      }
+    },
+    // 打开查看书籍弹窗
+    openCheckBooksDialog() {
+      this.isCheckDialog = '编辑分类'
     },
 
-    handleDelete(index) {
-      console.log(index, "删除");
+    handleDelete(row) {
+      this.$confirm('是否确认删除该分类?删除后该分类信息将永久删除, 且不可复原, 请谨慎操作!', '删除提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.selectItem = row
+      }).catch(() => {})
     },
 
     // limit 改变
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-      this.limit = val;
-      this._fetchData();
+      console.log(`每页 ${val} 条`)
+      this.limit = val
+      this._fetchData()
     },
     // 当前页面改变
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      this.currentPage = val;
-      this._fetchData();
-    },
-  },
-};
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
+      this._fetchData()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>