|
|
@@ -0,0 +1,471 @@
|
|
|
+<template>
|
|
|
+ <div class="right-wrap">
|
|
|
+ <div class="myTabs" style="background: #fff;min-height: 500px;">
|
|
|
+ <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="表彰列表" name="first">
|
|
|
+ <el-button size="small" type="primary" @click="dialogVisible = true">上传表彰</el-button>
|
|
|
+ <el-table size="small" :data="dataList" border style="margin-top: 20px;width: 100%">
|
|
|
+ <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
|
|
|
+ <el-table-column align="center" min-width="200" label="附件">
|
|
|
+ <template slot-scope="props">
|
|
|
+ <div v-for="(item, index) in props.row.files" :key="index">
|
|
|
+ <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" prop="categoryName" min-width="100" label="表彰类别"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="title" min-width="100" label="表彰名称"></el-table-column>
|
|
|
+ <!-- <el-table-column align="center" prop="integral" min-width="100" label="积分"></el-table-column> -->
|
|
|
+ <el-table-column min-width="60" align="center" prop="statusName" label="状态"></el-table-column>
|
|
|
+ <el-table-column min-width="150" align="center" prop="createTime" label="上传时间"></el-table-column>
|
|
|
+ <el-table-column min-width="150" align="center" prop="content" label="备注"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="myPage">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="积分获取规则" name="second">
|
|
|
+ <el-empty v-if="!integralRules" :image-size="200"></el-empty>
|
|
|
+ <div v-else v-html="integralRules"></div>
|
|
|
+ </el-tab-pane> -->
|
|
|
+
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="上传表彰" :visible.sync="dialogVisible" width="40%">
|
|
|
+ <el-form :rules="rules" ref="dataForm" :model="dataForm" label-width="100px">
|
|
|
+ <el-form-item label="表彰类别:" prop="type">
|
|
|
+ <el-cascader clearable size="small" style="width: 95%;" v-model="dataForm.type" :options="typeList"
|
|
|
+ :props="{ value: 'id',label: 'typeName',children: 'children'}"
|
|
|
+ @change="handleChange"></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表彰名称:" prop="title">
|
|
|
+ <el-input clearable style="width: 95%;" size="small" v-model="dataForm.title"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表彰描述:" prop="title">
|
|
|
+ <el-input type="textarea" :rows="2" clearable style="width: 95%;" size="small" v-model="dataForm.content"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表彰附件:" prop="fileIds">
|
|
|
+ <el-upload :action="fileUrl" :file-list="dataForm.files" :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeUploadFile" :on-remove="handleRemove">
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script scoped>
|
|
|
+import { certificatePage, certificateUpload, notice, certificatType } from "@/api/allApi";
|
|
|
+import { handleTree } from '@/utils/index'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ integralRules: '',
|
|
|
+ typeList: [],
|
|
|
+ activeName: 'first',
|
|
|
+ fileUrl: this.baseUrl,
|
|
|
+ dataList: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ rules: {
|
|
|
+ type: [{ required: true, message: "请选择表彰类别", trigger: "blur" }],
|
|
|
+ title: [{ required: true, message: "请填写表彰名称", trigger: "blur" }],
|
|
|
+ fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
|
|
|
+ content: [{ required: true, message: "请填写表彰描述", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ },
|
|
|
+ dataForm: {
|
|
|
+ type: [],
|
|
|
+ title:'',
|
|
|
+ fileIds: '',
|
|
|
+ files:[],
|
|
|
+ content:''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTypeList();
|
|
|
+ // this.getDataList();
|
|
|
+ this.getIntegralNotice();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTypeList(){
|
|
|
+ certificatType().then(response => {
|
|
|
+ this.typeList = handleTree(response.data.data);
|
|
|
+ console.log(this.typeList);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab.name, event);
|
|
|
+ },
|
|
|
+ getIntegralNotice() {
|
|
|
+ notice({ noticeType: 'certificatNotice' }).then(response => {
|
|
|
+ this.integralRules = response.data.data.content;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ let fileIds = [];
|
|
|
+ for (let i in fileList) {
|
|
|
+ let id = fileList[i].response.data.id;
|
|
|
+ fileIds.push(id);
|
|
|
+ }
|
|
|
+ this.dataForm.fileIds = fileIds.join(",");
|
|
|
+ },
|
|
|
+ beforeUploadFile(file) {
|
|
|
+ console.log(file);
|
|
|
+ const size = file.size / 1024 / 1024;
|
|
|
+ console.log(size);
|
|
|
+ if(size > 10 ){
|
|
|
+ this.$message.error("文件大小不能超过10MB！");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res, file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ console.log("------", "==========");
|
|
|
+ console.log("res = ", res);
|
|
|
+
|
|
|
+ let fileIds = [];
|
|
|
+ for (let i in fileList) {
|
|
|
+ let response = fileList[i].response;
|
|
|
+ if (response.errno && response.errno != "0") {
|
|
|
+ this.$message.error("该文件上传失败,已被移除,请重新上传!");
|
|
|
+ // 上传失败移除该 file 对象
|
|
|
+ fileList.splice(i, 1);
|
|
|
+ } else {
|
|
|
+ let id = fileList[i].response.data.id;
|
|
|
+ fileIds.push(id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dataForm.fileIds = fileIds.join(",");
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.$refs['dataForm'].resetFields();
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs['dataForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ certificateUpload(this.dataForm)
|
|
|
+ .then((response) => {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$notify({
|
|
|
+ title: "成功",
|
|
|
+ message: "表彰上传成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.dataForm.type = [],
|
|
|
+ this.dataForm.fileIds = '',
|
|
|
+ this.dataForm.files = [],
|
|
|
+ this.getDataList();
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDataList() {
|
|
|
+ certificatePage(this.listQuery).then(response => {
|
|
|
+ this.dataList = response.data.data.items;
|
|
|
+ this.total = response.data.data.total;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.listQuery.limit = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.listQuery.page = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.right-wrap {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.myPage {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.gainList_container {
|
|
|
+ min-height: 560px;
|
|
|
+}
|
|
|
+
|
|
|
+.gainList_container .gains_wrapper {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.gainList_container .gains_wrapper .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: -20px 0 0 -20px;
|
|
|
+}
|
|
|
+
|
|
|
+.item.isVirtual {
|
|
|
+ background: #f7f8fa;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 0 1 auto;
|
|
|
+ width: calc(50% - 30px);
|
|
|
+ min-width: 410px;
|
|
|
+ height: 116px;
|
|
|
+ padding-right: 6px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e5e6eb;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.item .img-wapper {
|
|
|
+ width: 114px;
|
|
|
+ height: 114px;
|
|
|
+ margin-right: 16px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.item .img-wapper .item-icon {
|
|
|
+ max-width: 72px;
|
|
|
+ max-height: 72px;
|
|
|
+}
|
|
|
+
|
|
|
+.item .main {
|
|
|
+ flex: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.item .date,
|
|
|
+.item .goods_name {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.item .goods_name {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #252933;
|
|
|
+ padding-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.item p {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.item .date {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #8a919f;
|
|
|
+}
|
|
|
+
|
|
|
+.item .buttons {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-left: -8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.item .button-item.actived {
|
|
|
+ background: #f2f3f5;
|
|
|
+ color: #8a919f;
|
|
|
+}
|
|
|
+
|
|
|
+.item .button-item {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 26px;
|
|
|
+ margin-left: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 50px;
|
|
|
+ color: #8a919f;
|
|
|
+ white-space: nowrap;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.item .arrow {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-left: 2px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+}
|
|
|
+
|
|
|
+svg:not(:root) {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.item .button-item svg path {
|
|
|
+ fill: currentColor;
|
|
|
+}
|
|
|
+
|
|
|
+.status {
|
|
|
+ margin-right: 30px;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.status.bottom {
|
|
|
+ margin-top: 55px;
|
|
|
+}
|
|
|
+
|
|
|
+.status .use-btn {
|
|
|
+ color: #1e80ff;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-container {
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline-entry-list {
|
|
|
+ margin-right: 17.5rem;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 720px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.entry-list-container {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+.entry-list-container .tab-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 20px 16px;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-header .tab-title {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.content-body {
|
|
|
+ padding: 10px 20px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie {
|
|
|
+ margin: 0 0 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .serie-title {
|
|
|
+ height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .serie-title .title {
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1d2129;
|
|
|
+ margin: 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .serie-title .series-left,
|
|
|
+.serie .serie-title .series-right {
|
|
|
+ width: 16px;
|
|
|
+ height: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ border-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list {
|
|
|
+ display: grid;
|
|
|
+ justify-content: space-between;
|
|
|
+ grid-template-columns: repeat(auto-fill, 150px);
|
|
|
+ grid-gap: 10px 20px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item {
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 150px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-item-icon {
|
|
|
+ width: 65px;
|
|
|
+ height: 65px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-item-icon .not-obtain {
|
|
|
+ filter: grayscale(100%);
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-item-icon img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .badge-desc {
|
|
|
+ /* margin-top: -10px; */
|
|
|
+ text-align: center;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.serie .badge-icon-list .badge-icon-item .obtain-date {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #86909c;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+</style>
|
