esua-epdc-admin/src/views/modules/case/typicalcase-list.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-news__typicalcase}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="案例标题">
          <el-input v-model="dataForm.caseTitle" placeholder="请输入" clearable></el-input>
        </el-form-item>
          <el-form-item label="时间"
                        prop="startTime">
              <el-date-picker v-model="dataForm.startTime"
                              type="date"
                              :picker-options="pickerBeginDateBefore"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="选择日期时间">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="至"
                        label-width="25px"
                        prop="endTime">
              <el-date-picker v-model="dataForm.endTime"
                              type="date"
                              :picker-options="pickerBeginDateAfter"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="选择日期时间">
              </el-date-picker>
          </el-form-item>
        <!--查询按钮-->
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <!--添加按钮-->
        <el-form-item>
          <el-button type="primary" @click="addHandle()">{{"新增典型案例"}}</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表-->
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column label="序号" type="index"  header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="caseTitle" label="优秀案例标题" header-align="center" align="center" min-width="200" show-overflow-tooltip title="caseTitle"></el-table-column>
        <el-table-column prop="state" label="状态" :formatter="formatState" header-align="center" align="center" width="100"></el-table-column>
        <el-table-column prop="caseNumber" label="优秀案例数" header-align="center" align="center" width="100"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center" width=“180“></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('case:actbanner:grounding')" type="text" size="small" @click="changeGroundingHandle(scope.row)">{{ changeGroundingText(scope.row.state) }}</el-button>
            <el-button type="text" size="small" @click="detailHandle(scope.row.id)">{{"查看详细"}}</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div style="text-align:center">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './typicalcase-add-or-update'
import CaseInfoDetailView from './typicalcase-detail'
import {debounce} from 'lodash'
export default {
  mixins: [mixinViewModule],
  name: 'CaseInfoList',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/cloudAnalysis/typicalcase/page',
        getDataListIsPage: true,
        deleteURL: '/cloudAnalysis/typicalcase',
        deleteIsBatch: true
      },
      dataForm: {
        caseTitle: '',
        startTime: '',
        endTime: ''
      },
        pickerBeginDateBefore: {
            disabledDate: (time) => {
                let beginDateVal = this.dataForm.startTime
                if (beginDateVal) {
                    return time.getTime() > new Date(beginDateVal).getTime()
                }
            }
        },
        pickerBeginDateAfter: {
            disabledDate: (time) => {
                let EndDateVal = this.dataForm.endTime
                if (EndDateVal) {
                    return time.getTime() < new Date(EndDateVal).getTime()
                }
            }
        }
    }
  },
  components: {
    AddOrUpdate,
    CaseInfoDetailView
  },
  created: function () {
    this.getDataList()
  },
  methods: {
    detailHandle (id) {
      this.$parent.selectComponent = 'CaseInfoAdd'
      this.$router.push({ path: '/case-typicalcase', query: { id: id } })
    },
    formatState: function (row, column) {
      let state = row.state
      if (state == 1) {
        return '上架'
      } else if (state == 0) {
        return '下架'
      }
    },
    changeGroundingText(state){
      let status = state
      if (status == 1) {
        return '下架'
      } else if (status == 0) {
        return '上架'
      }
    },
    addHandle () {
      this.$parent.selectComponent = 'CaseInfoAdd'
      this.$router.push({ path: '/case-typicalcase' })
    },
    changeGroundingHandle: debounce(function (row) {
        this.$confirm(this.$t('prompt.info', { 'handle': this.changeGroundingText(row.state) }), this.$t('prompt.title'), {
            confirmButtonText: this.$t('confirm'),
            cancelButtonText: this.$t('cancel'),
            type: 'warning'
        }).then(() => {
            this.$http.get(`/cloudAnalysis/typicalcase/updateState/${row.id}`).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.$message({
                    message: this.$t('prompt.success'),
                    type: 'success',
                    duration: 500,
                    onClose: () => {
                        this.getDataList()
                    }
                })
            }).catch(() => {})
        }).catch(() => {})
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>