SxsnPC/src/views/modules/medal.vue

<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-home">
            <div class="top adfacjb">
                <div class="top-left">勋章管理</div>
                <div class="top-right">
                    <el-button type="primary" @click="handleAdd">新增勋章</el-button>
                </div>
            </div>
            <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无勋章" style="margin-top: 20px;">
                <el-table-column prop="medalName" label="勋章名称"></el-table-column>
                <el-table-column prop="xxx" label="勋章图片">
                    <template slot-scope="scope">
                      <img :src="scope.row.imageUrl" style="width: 90px;height: auto;">
                    </template>
                </el-table-column>
                <el-table-column prop="issueBeginTime" label="发放开始时间"></el-table-column>
                <el-table-column prop="issueEndTime" label="发放结束时间"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                        <!-- <el-button type="text" @click="handleOpenClose(1)">启用</el-button> -->
                        <!-- <el-button type="text" @click="handleOpenClose(0)">停用</el-button> -->
                        <el-button type="text" @click="handleDelete(scope.row)" v-if="scope.row.isDefault==0">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
              :current-page="queryParams.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="queryParams.limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle">
            </el-pagination>
        </div>
        <el-dialog width="800px" :visible.sync="show" :title="title" @close="cancel">
          <el-form ref="medalRef" :model="form" :rules="rules" label-width="110px" style="width: 70%;margin: 0 auto;">
            <el-form-item label="勋章名称" prop="medalName">
              <el-input v-model="form.medalName" placeholder="请输入勋章名称"></el-input>
            </el-form-item>
            <el-form-item label="勋章图片" class="redLabel">
                <el-upload
                    :action="url"
                    :file-list="fileList"
                    :limit="1"
                    :before-upload="file => beforeUploadHandle(file, [180, 180])"
                    list-type="picture-card"
                    :on-success="successHandle"
                    :on-remove="handleRemove"
                    class="upload-demo"
                    >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <div class="upload_tip">建议尺寸：180*180像素，点击上传勋章图片</div>
            </el-form-item>
            <el-form-item label="发放开始时间" :class="{'red':form.isDefault===0}">
                <el-date-picker v-model="form.issueBeginTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" :disabled="form.isDefault===1"></el-date-picker>
            </el-form-item>
            <el-form-item label="发放结束时间" :class="{'red':form.isDefault===0}">
              <el-date-picker v-model="form.issueEndTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" :disabled="form.isDefault===1"></el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remark" placeholder="请输入备注" :disabled="form.isDefault===1"></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 200px;">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
          </div>
        </el-dialog>
    </el-card>
</template>

<script>
import moment from 'moment'
import Cookies from 'js-cookie'
export default {
  data () {
    return {
      dataList: [],
      total: 0,
      loading: false,
      queryParams: {
        page: 1,
        limit: 10
      },
      show: false,
      title: '新增勋章',
      form: {
        id: '',
        isDefault: 0,
        medalName: '',
        imageUrl: '',
        issueBeginTime: '',
        issueEndTime: '',
        remark: ''
      },
      rules: {
        medalName: [
          { required: true, message: '请输入勋章名称', trigger: 'blur' }
        ],
        issueBeginTime: [
          { required: true, message: '请选择发放开始时间', trigger: 'change' }
        ],
        issueEndTime: [
          { required: true, message: '请选择发放结束时间', trigger: 'change' }
        ]
      },
      buttonLoading: false,
      url: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`,
      fileList: []
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    handleAdd () {
      this.title = '新增勋章'
      this.show = true
    },
    handleEdit (row) {
      this.title = '编辑勋章'
      this.$http.get(`/core/medal/${row.id}`).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.form = res.data
        if (this.form.imageUrl) {
          this.fileList = [
            { name: '', url: this.form.imageUrl }
          ]
        }
        this.show = true
      })
    },
    handleDelete (row) {
      this.$confirm('确定要删除该勋章吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.buttonLoading = true
        this.$http.delete('/core/medal', { 'data': [row.id] }).then(({ data: res }) => {
          if (res.code !== 0) return this.$message.error(res.msg)
          this.$message.success('删除成功')
          this.getDataList()
          this.buttonLoading = false
        })
      })
    },
    handleOpenClose (status) {},
    pageSizeChangeHandle (val) {
      this.queryParams.limit = val
      this.getDataList()
    },
    pageCurrentChangeHandle (val) {
      this.queryParams.page = val
      this.getDataList()
    },
    getDataList () {
      this.$http.get('/core/medal/page', { params: this.queryParams }).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.dataList = res.data.list
        this.total = res.data.total
      })
    },
    beforeUploadHandle (file, index, fixedNumber) {
      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error(
          this.$t('upload.tip', { format: 'jpg、png、gif' })
        )
        return false
      }
    },
    handleRemove (file, fileList) {
      this.fileList = fileList.map((item) => item) || []
      this.form.imageUrl = ''
    },
    successHandle (res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.fileList.unshift({
        name: '',
        url: res.data
      })
      this.form.imageUrl = this.fileList[0].url
    },
    submitForm () {
      this.$refs['medalRef'].validate((valid) => {
        if (valid) {
          if (!this.form.imageUrl) return this.$message.error('请上传勋章图片')
          if (this.form.isDefault === 0) {
            if (!this.form.issueBeginTime) return this.$message.error('请选择发放开始时间')
            if (!this.form.issueEndTime) return this.$message.error('请选择发放结束时间')
            if (Date.parse(this.form.issueBeginTime) > Date.parse(this.form.issueEndTime)) return this.$message.error('发放开始时间不能大于结束时间')
            this.form.issueBeginTime = moment(this.form.issueBeginTime).format('YYYY-MM-DD HH:mm:ss')
            this.form.issueEndTime = moment(this.form.issueEndTime).format('YYYY-MM-DD HH:mm:ss')
          }
          this.buttonLoading = true
          this.$http[this.form.id ? 'put' : 'post']('/core/medal', this.form).then(({ data: res }) => {
            if (res.code !== 0) return this.$message.error(res.msg)
            this.$message.success(`${this.form.id ? '编辑' : '新增'}成功`)
            this.show = false
            this.getDataList()
            this.buttonLoading = false
          })
        } else {
          return false
        }
      })
    },
    cancel () {
      this.form = {
        id: '',
        isDefault: 0,
        medalName: '',
        imageUrl: '',
        issueBeginTime: '',
        issueEndTime: '',
        remark: ''
      }
      this.fileList = []
      this.$refs['medalRef'].resetFields()
      this.show = false
    }
  }
}
</script>

<style>
.el-form-item.red .el-form-item__label::before{
      content: "*";
      color: #F56C6C;
      margin-right: 4px;
}
</style>
<style scoped lang="scss">
.top{
    &-left{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 16px;
        color: #252525;
        line-height: 22px;
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 84px;
    height: 84px;
    line-height: 84px;
    text-align: center;
  }
  ::v-deep .el-upload--picture-card{
    width: 84px !important;
    height: 84px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar {
    width: 84px;
    height: 84px;
    display: block;
  }
  .upload-demo{
    display: flex !important;
    flex-wrap: wrap;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
    width: 84px !important;
    height: 84px !important;
  }
  .upload_tip{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #A4A4A4;
    line-height: 17px;
    margin-top: 2px;
}
::v-deep .redLabel>.el-form-item__label{
    &::before{
        content: "*";
        color: #F56C6C;
        margin-right: 4px;
    }
  }
</style>