|
|
@@ -0,0 +1,246 @@
|
|
|
+<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="xxx" label="勋章名称"></el-table-column>
|
|
|
+ <el-table-column prop="xxx" label="勋章图片">
|
|
|
+ <template slot-scope="scope"></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="xxx" label="指定发放时间"></el-table-column>
|
|
|
+ <el-table-column prop="xxx" label="发放条件"></el-table-column>
|
|
|
+ <el-table-column prop="xxx" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="handleEdit">编辑</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">删除</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="aaa">
|
|
|
+ <el-input v-model="form.aaa" 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="选择发放时间" prop="bbb">
|
|
|
+ <el-date-picker v-model="form.bbb" type="datetime" format="yyyy-MM-dd HH:mm" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设置发放条件" prop="ccc">
|
|
|
+ <el-select v-model="form.ccc" placeholder="请选择发放条件" style="width: 100%;">
|
|
|
+ <el-option label="发放条件一" :value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </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 Cookies from 'js-cookie'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ title: '新增勋章',
|
|
|
+ form: {
|
|
|
+ id: '',
|
|
|
+ aaa: '',
|
|
|
+ imgUrl: '',
|
|
|
+ bbb: '',
|
|
|
+ ccc: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ aaa: [
|
|
|
+ { required: true, message: '请输入勋章名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ bbb: [
|
|
|
+ { required: true, message: '请选择发放时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ ccc: [
|
|
|
+ { required: true, message: '请设置发放条件', trigger: 'change' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ buttonLoading: false,
|
|
|
+ url: `${window.SITE_CONFIG['apiURL']}/sys/oss/uploadFile?token=${Cookies.get('token')}`,
|
|
|
+ fileList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAdd () {
|
|
|
+ this.title = '新增勋章'
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ handleEdit () {
|
|
|
+ this.title = '编辑勋章'
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ handleDelete () {
|
|
|
+ this.$confirm('确定要删除该勋章吗？', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.buttonLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getDataList()
|
|
|
+ this.buttonLoading = false
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleOpenClose (status) {},
|
|
|
+ pageSizeChangeHandle (val) {
|
|
|
+ this.queryParams.limit = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ pageCurrentChangeHandle (val) {
|
|
|
+ this.queryParams.page = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ getDataList () {},
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRemoveCover (file, fileList) {
|
|
|
+ this.fileList = fileList.map((item) => item) || []
|
|
|
+ this.form.imgUrl = ''
|
|
|
+ },
|
|
|
+ successHandleCover (res, file, fileList) {
|
|
|
+ if (res.code !== 0) {
|
|
|
+ return this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ this.fileList.unshift({
|
|
|
+ name: '',
|
|
|
+ url: res.data
|
|
|
+ })
|
|
|
+ this.form.imgUrl = this.fileList[0].url
|
|
|
+ },
|
|
|
+ submitForm () {
|
|
|
+ this.$refs['medalRef'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (!this.form.imgUrl) return this.$message.error('请上传勋章图片')
|
|
|
+ this.buttonLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.show = false
|
|
|
+ this.getDataList()
|
|
|
+ this.buttonLoading = false
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancel () {
|
|
|
+ this.form = {
|
|
|
+ id: '',
|
|
|
+ aaa: '',
|
|
|
+ imgUrl: '',
|
|
|
+ bbb: '',
|
|
|
+ ccc: ''
|
|
|
+ }
|
|
|
+ this.$refs['medalRef'].resetFields()
|
|
|
+ this.show = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<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>
|
