huangguo_admin/src/views/activity/contact/index.vue

<template>
  <div class="pf-warpper avlist">
    <el-row class="table-form">
      <el-form :inline="true" :model="searchData.param" class="form-inline" size="mini">
        <el-form-item>
          <el-button @click="add" icon="el-icon-circle-plus-outline" plain type="success">新增</el-button>
          <el-button @click="onSearch" icon="el-icon-refresh" plain type="info">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="resData" element-loading-text="拼命加载中" border height="750" highlight-current-row style="width: 100%" v-loading="loading">
          <el-table-column fixed align="center" label="排序" width="80">
            <template slot-scope="scope">{{scope.row.rank}}</template>
          </el-table-column>
          <el-table-column align="center" label="联系方式标题" width="200">
            <template slot-scope="scope">{{scope.row.title}}</template>
          </el-table-column>
          <el-table-column align="center" label="封面">
            <template slot-scope="scope">
              <ShowImg style="width:40px;height:40px;margin:0 auto" :urls="scope.row.cover"></ShowImg>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <el-button :type="scope.row.status? 'success' : 'danger'" plain size="mini">{{ scope.row.status? '开启' : '关闭' }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否官方">
            <template slot-scope="scope">
              <el-button :type="scope.row.isOfficial? 'success' : 'danger'" plain size="mini">{{ scope.row.isOfficial? '是' : '否' }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="跳转地址" width="350">
            <template slot-scope="scope">{{ scope.row.jumpUrl }}</template>
          </el-table-column>
          <el-table-column align="center" label="描述" width="350">
            <template slot-scope="scope">{{ scope.row.desc }}</template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" width="150">
            <template slot-scope="scope">{{
              scope.row.createdAt |BeiJingTime
            }}</template>
          </el-table-column>
          <el-table-column align="center" label="更新时间" width="150">
            <template slot-scope="scope">{{
              scope.row.updatedAt |BeiJingTime
            }}</template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.$index, scope.row)" size="mini" type="primary">编辑</el-button>
              <el-button @click="handleDelete(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="table-pagination">
      <el-pagination :current-page="searchData.pageNum" :page-size="searchData.pageSize" :page-sizes="[10, 20, 30, 50, 100]" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
    </div>
    <!-- 新增及编辑 -->
    <Edit :data="editData" v-if="editVisible" @close="closeEdit" />
  </div>
</template>
<script>
// 引入模块
import Edit from './components/AddOrEdit'
import { contactList, contactDel } from '@/api/activity/contact'
import ShowImg from '@/components/ShowImg/index.vue'
export default {
  name: 'Contact',
  components: { Edit, ShowImg },
  data() {
    return {
      // 请求列表参数
      searchData: {
        pageNum: 1,
        pageSize: 10,
      },
      resData: [], // el-table表格数据
      total: 0, // 数据总条数
      editVisible: false, // 新增或编辑弹出框
      loading: true, // 列表加载状态
      // 编辑数据
      editData: {
        title: '新增',
        data: {},
      },
    }
  },

  mounted() {
    this.getContactList()
  },
  methods: {
    // TODO:新增联系方式列表数据
    async getContactList() {
      this.loading = true
      contactList(this.searchData).then((res) => {
        if (res.code === 200) {
          this.resData = res.data.list
          this.total = res.data.total
        } else {
          this.resData = []
          this.total = 0
          this.$message.error('请求列表失败')
        }
        this.loading = false
      })
    },
    //TODO:编辑联系方式列表数据
    handleDelete(index, row) {
      this.$confirm('确定删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        contactDel({ id: row.id }).then((res) => {
          if (res.code === 200) {
            this.getContactList()
            this.$message.success('成功删除!')
          } else {
            this.$message.error('操作失败')
          }
        })
      })
    },
    onSearch() {
      this.searchData.pageNum = 1
      this.searchData.pageSize = 10
      this.getContactList()
    },

    // 切换每页数据量
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.getContactList()
    },
    // 切换页数
    handleCurrentChange(val) {
      this.searchData.pageNum = val
      this.getContactList()
    },

    // 新增按钮
    add() {
      this.editVisible = true
      this.editData = {
        title: '新增',
        data: {},
      }
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.editVisible = true
      this.editData = {
        title: '编辑',
        data: row,
      }
    },

    // 关闭编辑弹窗
    closeEdit() {
      this.editData = {
        title: '新增',
        data: {},
      }
      this.editVisible = false
      this.getContactList()
    },
  },
}
</script>