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

<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)"
          >
            <svg-icon icon-class="keyboard" />
            一键采集书籍
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-alarm-clock"
            size="mini"
            @click="openGatherStateDialog()"
          >
            定时采集书籍
          </el-button>
          <span class="btn-text">
            上次采集时间: 2021-08-09 13:52:42
          </span>
        </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"
        >
          <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="禁用"
                is-svg
                type="danger"
                icon="disabled"
                @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
      //   }
      // })
    },

    // 更新操作
    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(() => {})
    },
    // 每页数据
    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;
        }
        .btn-text{
          color: #A97402;
          font-size: 14px;
          padding: 6px 10px 6px 3px;
          margin-left: 8px;
          background: rgba(255, 193, 61, 0.2);
          border-radius: 2px;
          border: 1px solid rgba(255, 193, 61, 0.5);
          box-sizing: border-box;
        }
      }
      .pagination-container{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>