|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- <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>
|