admin-draw-lots/src/views/WeChatConfig/index.vue

<template>
  <div class="body">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" style="float: right" icon="el-icon-plus" @click="handleAdd">新建配置</el-button>
      </div>
      <div class="text item">
        <el-table stripe :data="tableData" border style="width: 100%">
          <el-table-column prop="appName" label="配置名称" />

          <el-table-column prop="picture" label="二维码" align="center">
            <template slot-scope="scope">
              <!-- :src="scope.row.qrCode" -->
              <el-popover placement="right" trigger="hover" style="cursor: pointer;">
                <el-image
                  slot="reference"
                  src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
                  alt="scope.row.image_url"
                  style="max-height: 110px;max-width: 110px"
                />
                <el-image src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png" />
              </el-popover>

              <!-- <img
                src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
                min-width="70"
                height="80"
              />-->
            </template>
          </el-table-column>

          <el-table-column prop="createDate" label="状态" align="center" width="200">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status==1?'success':'danger'"
                size="small "
                effect="dark"
              >{{ scope.row.status==1?'发布':'未发布' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="100" width="280">
            <template slot-scope="scope">
              <el-link :underline="false" style="margin-right:1em" type="primary">
                <router-link
                  :to="{path:'WeChatConfig/Edit',query: { configId: scope.row.configId }}"
                >编辑</router-link>
              </el-link>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除该配置吗？"
                @onConfirm="handleDelete(scope.row)"
              >
                <el-link slot="reference" :underline="false" type="danger">删除</el-link>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="WxTotal!==0"
          style="float:right; margin:20px 0"
          :total="WxTotal"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[pageSize, 20, 35,40,50,80,100]"
          layout="total, prev, pager, next, sizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getConfigList, DeleteConfig } from '@/api/WeChatApi'

export default {
  data() {
    return {
      appName: undefined,
      daterange: '',
      tableData: [],
      endDate: undefined,
      startDate: undefined,
      //
      pageSize: 10,
      currentPage: 1,
      WxTotal: 0 // 条目总数
    }
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    // 改变每页显示条数
    handleSizeChange(val) {
      this.pageSize = val
      this.changePagination()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.changePagination()
    },
    // 改变分页组件重新查询数据
    changePagination() {
      getConfigList({
        // title: this.title,
        // startDate: this.startDate,
        // endDate: this.endDate,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
      })
    },

    handleAdd() {
      this.$router.push({ path: 'WeChatConfig/Edit' })
    },

    handleDelete(row) {
      DeleteConfig(row.configId).then(() => {
        this.onSearch()
      })
    },
    onSearch() {
      getConfigList({
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
        this.WxTotal = res.data.total
      })
    },
    onReset() {
      this.appName = ''

      this.onSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  box-shadow: none;
}
</style>