uni-pos/src/views/information/index.vue

<template>
  <div class="group-page">
    <div class="toolbar">
      <el-button
        type="primary"
        size="mini"
      
        @click="getActivityTweetsList"
        icon="el-icon-zoom-in"
      >
        查询
      </el-button>
      <el-button type="warning" size="mini" @click="reset" icon="el-icon-refresh-right">
        重置
      </el-button>
      <el-button
        type="goon"
        size="mini"
        @click="addGroup"
        icon="el-icon-circle-plus-outline"
      >
        新增
      </el-button>
    </div>
    <div class="group-content">
      <el-table
        id="tables"
        :data="tableData.list"
        style="width: 100%"
        v-loading="loading"
        row-key="id"
      >
        <el-table-column
          prop="mainTitle"
          label="活动标题"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="viceTitle"
          label="活动简介"
          align="center"
          width="200"
        ></el-table-column>
        <!-- <el-table-column
          prop="coverImg"
          label="活动封面图"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <img
              v-if="scope.row.coverImg"
              :src="scope.row.coverImg"
              class="avatar"
              width="80"
              height="80"
            />
          </template>             
        </el-table-column> -->
        <el-table-column
          prop="createTime"
          label="发布时间"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="storeName"
          label="发布人(平台)"
          align="center"
          width="200"
        ></el-table-column>
        <!-- <el-table-column
          prop="updateTime"
          label="最后修改时间"
          align="center"
          width="200"
        ></el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="editGroup(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteGroup(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="formParams.pageSize"
      :page.sync="formParams.pageNum"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <grope-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :type="dialog.type"
      @close="editClose"
      @success="getActivityTweetsList"
    />
  </div>
</template>
<script>
import ActivityTweets from '@/api/ActivityTweets'
import GropeEdit from './Edit'
import Pagination from '@/components/Pagination'
import db from '@/utils/localstorage'
export default {
  name: 'ActivityTweets',
  components: {
    GropeEdit,
    Pagination,
  },
  data() {
    return {
      loading: true,
      formParams: {
        "pageNum": 1,
        "pageSize": 10,
        "searchKey": "",
        "type": 2,
        state: ''
      },
      dialog: {
        type: 'add',
        isVisible: false,
      },
      tableData: [],
    }
  },
  created() {
    this.getActivityTweetsList()
  },
  mounted(){
  },
  methods: {
    async getActivityTweetsList() {
      this.loading = true
      const res = await ActivityTweets.page(this.formParams)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.tableData = resData.data
        this.loading = false
        console.log(this.tableData,'this.tableData')
      }
    },
    fetch() {
      this.getActivityTweetsList()
    },
    reset() {
      this.getActivityTweetsList()
    },
    addGroup() {
      this.dialog = {
        type: 'add',
        isVisible: true,
      }
      this.$refs.edit.setParams(null)
    },
    editClose() {
      this.dialog.isVisible = false
    },
    editGroup(row) {
      const {id, mainTitle, viceTitle, coverImg, startTime, endTime, content, state} = row
      this.dialog = {
        type: 'edit',
        isVisible: true,
      }
      this.$refs.edit.setParams(row)
    },
    async delete(params) {
      const res = await ActivityTweets.delete(params)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success',
        })
        this.getActivityTweetsList()
      }
    },
    deleteGroup(row) {
      const { id } = row
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      })
        .then(() => {
          this.delete({
            id,
          })
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="less" scoped>
.group-page {
  padding: 15px 20px;
  .toolbar {
    margin-bottom: 20px;
    text-align: left;
    .el-input{
      margin-right: 10px !important;
    }
    .group-name {
      width: 180px;
    }
  }
}
</style>