webapp / GreenwayWeb

<template>
  <div class="history">
    <div class="content">
      <!-- 顶部 -->
      <div class="toolbar">
        <el-button type="primary" @click="add">新建</el-button>
      </div>
      <!-- 表格 -->
      <div class="content_table">
        <div class="table">
          <el-table
            :data="list"
            border
            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="day" label="第几天" />
            <el-table-column prop="credit" label="获取积分" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click.native.prevent="details(scope.row)">编辑</el-button>
                <el-button type="text" @click.native.prevent="delMsg(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="fenye">
          <el-pagination
            :current-page="formParams.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 消息详情弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      modal
    >
      <el-form ref="signForm" :model="signForm" :rules="signRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="第几天" prop="day">
          <el-input v-model="signForm.day" />
        </el-form-item>
        <el-form-item label="获取积分" prop="credit">
          <el-input v-model="signForm.credit" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="signForm.sort" />
        </el-form-item>
        <el-form-item label="是否显示" prop="display">
          <el-radio-group v-model="signForm.display">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('signForm')">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { creditSignGetAll, creditSignSave, creditSignUpdate, deleteCreditSign } from '@/api/sign'
export default {
  data () {
    return {
      list: [],
      total: 1,
      formParams: {
        page: 1,
        pageSize: 10
      },
      tipsList: [{
        id: 1,
        name: '系统消息'
      },
      {
        id: 2,
        name: '公告'
      },
      {
        id: 3,
        name: '站内信'
      }],
      signForm: {
        day: 1,
        credit: 1,
        sort: 1,
        display: 1,
      },
      signRules: {
        day: [
          { required: true, message: '请输入第几天', trigger: 'blur' }
        ],
        credit: [
          { required: true, message: '请输入获取积分', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        display: [
          { required: true, message: '请选择是否显示', trigger: 'change' }
        ]
      },
      dialogVisible: false
    }
  },
  mounted () {
    this.getAll()
  },
  methods: {
    // 新增
    add () {
      this.dialogVisible = true
    },
    // 历史消息列表
    async getAll () {
      const res = await creditSignGetAll(this.formParams)
      this.list = res.data.list
      this.total = res.data.total
    },
    // 消息详情
    async details (item) {
      this.signForm = Object.assign({}, item)
      this.dialogVisible = true
    },
    // 删除消息提示
    async delMsg (id) {
      this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除积分配置
    async del (id) {
      const res = await deleteCreditSign({ id: id })
      if (res.code === '') {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getAll()
      }
    },
    // 查询
    async search (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.total = 1
          this.formParams.page = 1
          this.getAll()
        } else {
          return false
        }
      })
    },
    // 重置表单
    async clear (formName) {
      this.$refs[formName].resetFields()
      this.getAll()
    },
    // 更改页数
    async handleSizeChange (val) {
      this.formParams.pageSize = val
      this.getAll()
    },
    // 翻页
    async handleCurrentChange (val) {
      this.formParams.page = val
      this.getAll()
    },
    // 关闭消息详情
    async handleClose () {
      this.dialogVisible = false
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.signForm.id) {
            creditSignUpdate(this.signForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.getAll()
                this.dialogVisible = false
              }
            })
          } else {
            creditSignSave(this.signForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.getAll()
                this.dialogVisible = false
              }
            })
          }
        } else {
          return false
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.signForm = {
        day: 1,
        credit: 1,
        sort: 1,
        display: 1
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang='scss' scoped>
@import url("../../styles/elDialog.scss");
.history{
  padding: 20px;
  .toolbar {
    margin-bottom: 20px;
  }
}
</style>
<style scoped>
.history /deep/ .el-table .cell.el-tooltip img {
  max-height: 100px;
}
</style>