FE_IASF_server/src/pages/page/list/index.vue

<template>
  <div class="page">
    <div class="tool">
      <p class="page-name">企业网站管理后台</p>
      <div style="display: inline-flex;align-items: center;">
        <el-dropdown class="setting" trigger="click" :hide-on-click="false">
          <el-tooltip placement="top">
            <img class="icon" src="@/assets/img/setting.png" alt="">
          </el-tooltip>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button @click="resetColumns" type="text">列重置</el-button>
            </el-dropdown-item>
            <el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0">
              <el-checkbox v-model="column.show">{{ column.name }}</el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="search-wrap">
          <el-select v-model="field" @change="initData">
            <el-option
              v-for="(item, i) in keywords"
              :key="i"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-input class="keyword" placeholder="请输入栏目或模板名称" v-model.trim="keyword" clearable></el-input>
        </div>
      </div>
    </div>

    <el-table ref="table" :data="list" class="table" header-align="center" row-key="id">
      <el-table-column type="index" width="60" label="序号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + (page - 1) * pageSize + 1 }}
        </template>
      </el-table-column>
      <el-table-column v-if="settings[0].show" prop="columnName" label="长页栏目名称" align="center"></el-table-column>
      <el-table-column v-if="settings[1].show" prop="articleTemplate" label="模板名称" align="center"></el-table-column>
      <el-table-column v-if="settings[2].show" prop="columnName" label="上级栏目" align="center">
        <template slot-scope="scope">
          {{ scope.row.parents }}
        </template>
      </el-table-column>
      <el-table-column v-if="settings[3].show" prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column v-if="settings[4].show" prop="updateTime" label="最近编辑" align="center"></el-table-column>
      <el-table-column v-if="settings[5].show" prop="editorName" label="编辑人" align="center"></el-table-column>
      <el-table-column v-if="settings[6].show" label="操作" width="170" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="start(scope.row)">预览</el-button>
          <el-button type="text" @click="start(scope.row)">编辑</el-button>
          <el-button type="text" @click="start(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        field: 'programName',
        keywords: [
          {
            id: 'programName',
            name: '栏目名称'
          },
          {
            id: 'templateName',
            name: '模板名称'
          }
        ],
        keyword: '',
        page: +this.$route.query.page || 1,
        pageSize: 10,
        total: 0,
        list: [],
        originSettings: [],
        settings: [
          {
            name: '长页栏目名称',
            show: true
          },
          {
            name: '模板名称',
            show: true
          },
          {
            name: '上级栏目',
            show: true
          },
          {
            name: '创建日期',
            show: true
          },
          {
            name: '最近编辑',
            show: true
          },
          {
            name: '编辑人',
            show: true
          },
          {
            name: '操作',
            show: true
          }
        ]
      };
    },
    watch: {
      keyword: function(val) {
        clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
          this.initData()
        }, 500)
      }
    },
    mounted() {
      this.$store.commit('user/SET_CRUMBS', [
        {
          name: '站点管理',
          route: '/site'
        },
        {
          name: '内容管理'
        },
        {
          name: '页面管理'
        }
      ])
      this.originSettings = JSON.parse(JSON.stringify(this.settings))
      this.getData()
    },
    methods: {
      // 列表
      getData() {
        this.$post(this.api.longPageColumnList, {
          siteId: this.$store.state.content.site.id,
          pageNum: this.page,
          pageSize: this.pageSize,
          programName: this.field === 'programName' ? this.keyword : '',
          templateName: this.field === 'templateName' ? this.keyword : ''
        }).then(({ data }) => {
          const list = data.records
          list.map(e => {
            // 上级栏目
            e.parents = e.superiorColumn ?
              e.superiorColumn.map(n => n.columnName).join(' / ') :
              '--'
          })
          this.list = list
          this.total = +data.total
        }).catch(err => {})
      },
      initData() {
        this.page = 1
        this.getData()
      },
      // 重置栏位筛选
      resetColumns() {
        this.settings = JSON.parse(JSON.stringify(this.originSettings))
      },
      handleCurrentChange(val) {
        this.page = val
        this.getData()
      },
      add() {
        this.$router.push('add')
      },
      edit(row) {
        this.$router.push(`add?id=${row.id}`)
      }
    }
};
</script>

<style lang="scss" scoped>
.el-radio-group {
    white-space: nowrap;
}
.el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0;
}
</style>