dvcp_v2_webapp/packages/wechat/AppVillageInfo/components/Event.vue

<template>
  <ai-list class="join-event" :isTabs="true">
    <template slot="content">
      <ai-search-bar>
        <template slot="left">
          <el-button v-if="permissions('app_appvillageinfo_edit')" icon="iconfont iconAdd" type="primary" size="small" @click="add">添加</el-button>
        </template>
        <template slot="right">
          <el-input
            placeholder="请输入标题"
            size="small"
            clearable
            v-model="search.title"
            v-throttle="() => {search.current = 1, getList()}"
            @clear="search.current = 1, search.title = '', getList()"
            suffix-icon="iconfont iconSearch" />
        </template>
      </ai-search-bar>
      <div class="ai-table">
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
          <el-table-column slot="options" label="操作" align="center" width="250" fixed="right">
            <template slot-scope="{ row }" class="fs-14">
              <div class="table-options">
                <el-button
                  type="text"
                  @click="publish(row)"
                  :title="row.status === '1' ? '取消发布' : '发布'"
                  :disabled="!permissions('app_appvillageinfo_edit')">
                  {{ row.status === '1' ? '取消发布' : '发布' }}
                </el-button>
                <el-button
                  type="text"
                  title="详情"
                  @click="toDetail(row.id)"
                  :disabled="!permissions('app_appvillageinfo_detail')">
                  详情
                </el-button>
                <el-button
                  type="text"
                  title="编辑"
                  @click="toAdd(row.id)"
                  :disabled="!permissions('app_appvillageinfo_edit')">
                  编辑
                </el-button>
                <el-button
                  @click="remove(row.id)"
                  type="text"
                  title="删除"
                  :disabled="!permissions('app_appvillageinfo_edit')">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </div>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'ReportEvent',

    props: {
      instance: Function,
      dict: Object,
      areaId: String,
      permissions: Function
    },

    computed: {
      ...mapState(['user']),
      colConfigs() {
        return [
          { prop: 'type', label: '类型', formart: v => this.dict.getLabel('villInfoType', v) },
          { prop: 'title', label: '标题', align: 'left' },
          { prop: 'status', label: '发布状态', align: 'center', formart: v => this.dict.getLabel('villInfoStatus', v) },
          { prop: 'createDate', label: '发布时间', dateFormat: 'YYYY-MM-DD', align: 'center' },
          { prop: 'createUser', label: '发布人', align: 'center' },
          { prop: 'areaName', label: '来源地区', align: 'center' },
          { slot: 'options', label: '操作' }
        ]
      }
    },

    data () {
      return {
        search: {
          current: 1,
          size: 10,
          title: ''
        },
        total: 0,
        ids: [],
        tableData: [],
        orderDetail: {}
      }
    },

    mounted () {
      this.dict.load('villInfoType', 'villInfoStatus', 'villInfoCommentStatus').then(() => {
        this.getList()
      })
    },

    methods: {
      getList () {
        this.instance.post(`/app/appvillageinfo/list`, null, {
          params: {
            ...this.search,
            areaId: this.areaId
          }
        }).then(res => {
          if (res.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      publish (params) {
        this.$confirm(`是否${params.status === '1' ? '取消发布' : '发布'}该条数据?`).then(() => {
          this.instance.post(`/app/appvillageinfo/updateCountYardstatus`, {
            id: params.id,
            status: params.status === '1' ? 0 : 1
          }).then(res => {
            if (res.code == 0) {
              this.$message.success(`${params.status === '1' ? '取消发布' : '发布'}成功！`)
              this.getList()
            }
          })
        })
      },

      toAdd (id) {
        this.$emit('change', {
          type: 'add',
          params: {
            id
          }
        })
      },

      add () {
        this.$emit('change', {
          type: 'add',
          params: {
            id: ''
          }
        })
      },

      toEdit (id) {
        this.$emit('change', {
          type: 'add',
          params: {
            type: 'ReportAdd',
            id
          }
        })
      },

      toDetail (id) {
        this.$emit('change', {
          type: 'detail',
          params: {
            type: 'eventDetail',
            id
          }
        })
      },

      remove (id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/appvillageinfo/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .join-event {
    ::v-deep th {
      font-weight: bold!important;
    }
    ::v-deep .table-options{
      span{
        font-size: 14px!important;
      }
    }
  }
  .table-btn {
    margin-right: 16px;
    font-size: 14px;
    color: #2266FF;
    cursor: pointer;

    &:hover {
      opacity: 0.6;
    }

    &:last-child {
      margin-right: 0;
    }

    &:last-child:hover {
      color: #f46;
      opacity: 1;
    }
  }
</style>