csair-web/src/views/banner/list.vue

<template>
  <el-row style="padding-top: 50px;padding-left: 40px">
    <el-row style="margin-top: 20px">
      <white-board style="margin-right: 50px;padding: 0px 0px 0px 0px;height: 714px;border-radius: 6px;">
        <el-row style="line-height: 40px;padding-top: 20px">
          <el-col :span="4">
            <el-select v-model="bannerData[0].value" placeholder="请选择" @change="moveDirection">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1" >
            <span style="font-weight: bold">间隔</span>
          </el-col>
          <el-col :span="1">
            <el-input v-model.trim="bannerData[1].value"></el-input>
          </el-col>
          <el-col :span="1">
            <span style="font-weight: bold">秒</span>
          </el-col>
          <el-col :span="1">
            <el-button type="primary" @click="changeSpace">确认</el-button>
          </el-col>
          <el-col :span="1" :offset="13">
            <el-button type="primary" @click="toEdit">新建</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="handleDel">删除选中</el-button>
          </el-col>
        </el-row>

        <el-row style="padding-top: 20px;padding-left: 3px">
          <el-table :data="tableData" row-key="id" ref="table" style="width: 100%;" @selection-change="handleSelectionChange" highlight-current-row stripe>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="seqencing" label="序号" width="100" align="center"></el-table-column>
            <el-table-column prop="bannerTitle" width="300" label="标题" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="缩略图" width="200" align="center">
              <template slot-scope="scope">
                <div style="height: 88px"><img :src="OSS_URL + scope.row.imageUrl" v-if="scope.row.imageUrl" style="height: 88px;width: 147px;"></div>
              </template>
            </el-table-column>
            <el-table-column prop="bannerUrl"  width="230" label="网址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="id" label="Banner顺序" width="200">
              <template slot-scope="scope">
                <el-col :span="6">
                  <el-row><el-button type="primary" @click="forward(scope.row)">前移</el-button></el-row>
                  <el-row style="margin-top: 3px"><el-button type="primary" @click="backward(scope.row)">后移</el-button></el-row>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column label="是否启用" width="150" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.bannerOn" style="text-align: left;">
                  <el-row>
                  <el-radio :label="1" @change="changeBannerOn(scope.row)">是</el-radio>
                  </el-row>
                  <el-row>
                  <el-radio :label="0" style="margin-top: 15px" @change="changeBannerOn(scope.row)">否</el-radio>
                  </el-row>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column prop="gmtCreated" label="创建日期" width="200" align="center"></el-table-column>
            <el-table-column width="150" align="center">
              <template slot-scope="scope">
                <el-button type="text" style="color: red" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row style="padding-top: 20px;padding-bottom: 20px">
          <el-pagination @size-change="changeSizeChange" @current-change="changeCurrentChange" :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="10" layout="sizes, prev, pager, next, jumper, total" :total="total" small></el-pagination>
        </el-row>
      </white-board>
    </el-row>
  </el-row>
</template>

<script>
  import bannerDetailApi from '@/api/bannerDetailApi'
  import bannerControlApi from '@/api/bannerControlApi'

  export default {
    name: 'bannerDetails',
    components: {
    },
    data () {
      return {
        searchForm: {
          searchKey: '',
          page: 1,
          size: 10
        },
        total: 0,
        bannerData: [{code: 'move', value: '0'}, {code: 'space', value: 3}],
        tableData: [],
        options: [{
          value: '0',
          label: '从左到右切换'
        }, {
          value: '1',
          label: '从上到下切换'
        }],
        temp: [],
        IdList: []
      }
    },
    mounted () {
      this.list()
    },
    methods: {
      handleDel () {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.IdList = []
          for (let i = 0; i < this.temp.length; i++) {
            this.IdList.push(this.temp[i].id)
          }
          bannerDetailApi.delete({idList: this.IdList}).then(data => {
            this.list()
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        })
      },
      toEdit () {
        this.$router.push({name: 'BannerEdit'})
      },
      handleEdit (index, row) {
        this.$router.push({name: 'BannerEdit', params: {key: 'bannerId', msgKey: row.id}})
      },
      handleSelectionChange (val) {
        this.temp = val
      },
      list () {
        this.tableData = []
        bannerDetailApi.page(this.searchForm).then(data => {
          this.total = data.totalCount
          this.tableData = data.list
        })
        bannerControlApi.findAll().then(data => {
          this.bannerData = data
        })
      },
      changeSizeChange (val) {
        this.searchForm.size = val
        this.list()
      },
      changeCurrentChange (val) {
        this.searchForm.page = val
        this.list()
      },
      forward (row) {
        bannerDetailApi.forward(row.id).then(data => {
          this.list()
        })
      },
      backward (row) {
        bannerDetailApi.backward(row.id).then(data => {
          this.list()
        })
      },
      changeBannerOn (row) {
        bannerDetailApi.changeBannerOn(row.id).then(data => {
          this.list()
        })
      },
      changeSpace () {
        bannerControlApi.ChangeSpace(this.bannerData[1].value).then(data => {
          this.list()
        })
      },
      moveDirection () {
        bannerControlApi.moveDirection().then(data => {
          this.list()
        })
      }
    }
  }
</script>

<style scoped>
  .el-radio {
    margin-right: 0px;
  }
  /deep/ .el-table th>.cell{
    font-family: MicrosoftYaHei-Bold;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-table__row el-table__row--striped {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-table__row {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-pagination__total {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-pagination__jump {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-button--primary {
    background-color: #2493e5;
    border-color: #2493e5;
  }
  /deep/ .el-button--mini, .el-button--mini.is-round{
    padding: 9px 19px;
  }
  /deep/ .el-input--mini .el-input__inner{
    height: 32px;
  }
  /deep/ .el-table td, .el-table th.is-leaf{
    border: 0px;
  }
  /deep/ .el-pagination__total{
    margin-left: 17px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-pagination__jump{
    margin-left: 15px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/ .el-radio__inner{
    width: 16px;
    height: 16px;
  }
  /deep/ .el-radio__inner::after{
    width: 8px;
    height: 8px;
  }
</style>