moliparty/peko-admin-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

勋章信息管理-新增上传mp4、获得方式，新增勋章等级管理页面

Browse Source
This commit is contained in:
chenruiye
2025-06-09 16:52:55 +08:00
parent fdf71c854e
commit 799f767e0d
3 changed files with 662 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/medal/MedalLevelManagement.js Normal file
View File

@@ -0,0 +1,28 @@
import request from '@/utils/request';
// 勋章等级管理-列表
export const getMedalSeriesList = query => {
return request({
url: '/admin/medalSeries/list',
method: 'get',
params: query
});
};
// 保存
export const saveOrUpdate = query => {
return request({
url: '/admin/medalSeries/saveOrUpdate',
method: 'post',
headers: {"Content-Type": 'application/json;charset=UTF-8' },
data: query
});
};
// 上下架
export const updateStatus = query => {
return request({
url: '/admin/medalSeries/updateStatus',
method: 'post',
params: query
});
};

420
src/views/medal/MedalInfo.vue
View File

@@ -11,10 +11,8 @@
</div>
<div class="inquire">
<span class="demonstration">分区</span>
<partition-select v-model:partition-id="inquire.partitionId"
v-model:partition-infos="inquire.options"
v-model:after-init="afterPartitionInit"
/>
<partition-select v-model:partition-id="inquire.partitionId" v-model:partition-infos="inquire.options"
v-model:after-init="afterPartitionInit" />
</div>
<!-- 查询按钮 -->
<el-button class="primary" type="primary" @click="getData()">
@@ -23,12 +21,7 @@
<el-button class="primary" type="primary" @click="add()"> 新增 </el-button>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%; margin-top: 25px"
>
<el-table v-loading="loading" :data="tableData" border style="width: 100%; margin-top: 25px">
<el-table-column prop="id" align="center" label="勋章ID" />
<el-table-column prop="partitionFlag" align="center" label="地区">
<template v-slot="scope">{{
@@ -47,22 +40,23 @@
<el-table-column prop="name" align="center" label="勋章名称-土耳其区">
<template v-slot="scope">{{ JSON.parse(scope.row.name).tr }}</template>
</el-table-column>
<el-table-column
align="center"
prop="picUrl"
label="勋章图片"
width="120"
>
<el-table-column prop="medalDesc" align="center" label="勋章获得方式-华语区">
<template v-slot="scope">{{ JSON.parse(scope.row.medalDesc)?.zh || ''}}</template>
</el-table-column>
<el-table-column prop="medalDesc" align="center" label="勋章获得方式-英语区">
<template v-slot="scope">{{ JSON.parse(scope.row.medalDesc)?.en || ''}}</template>
</el-table-column>
<el-table-column prop="medalDesc" align="center" label="勋章获得方式-阿语区">
<template v-slot="scope">{{ JSON.parse(scope.row.medalDesc)?.ar || ''}}</template>
</el-table-column>
<el-table-column prop="medalDesc" align="center" label="勋章获得方式-土耳其区">
<template v-slot="scope">{{ JSON.parse(scope.row.medalDesc)?.tr || ''}}</template>
</el-table-column>
<el-table-column align="center" prop="picUrl" label="勋章图片" width="120">
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.picUrl"
:zoom-rate="1.1"
:preview-src-list="scope.row.picUrl"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
<el-image style="width: 100px; height: 100px" :src="scope.row.picUrl" :zoom-rate="1.1"
:preview-src-list="scope.row.picUrl" fit="scale-down" preview-teleported="true"
hide-on-click-modal="true" />
</template>
</el-table-column>
<el-table-column prop="enable" align="center" label="状态">
@@ -73,21 +67,11 @@
<el-table-column prop="createTime" align="center" label="添加时间" />
<el-table-column align="center" label="操作" width="220">
<template v-slot="scope">
<el-button
@click="eidFun(scope.row)"
class="primary"
type="primary"
size="default"
>
<el-button @click="eidFun(scope.row)" class="primary" type="primary" size="default">
编辑
</el-button>
<el-button
@click="grantFun(scope.row)"
class="primary"
type="primary"
size="default"
:disabled="!scope.row.enable"
>
<el-button @click="grantFun(scope.row)" class="primary" type="primary" size="default"
:disabled="!scope.row.enable">
发放
</el-button>
</template>
@@ -95,139 +79,95 @@
</el-table>
<!-- 分页 -->
<el-pagination
style="margin-top: 10px"
class="paginationClass"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
layout="sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-pagination style="margin-top: 10px" class="paginationClass" v-model:current-page="currentPage"
v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
layout="sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
<!-- 新增&编辑弹窗 -->
<el-dialog
destroy-on-close
class="pub"
v-model="controlsDialog"
:title="controlsTitle"
width="32%"
center
>
<el-dialog destroy-on-close class="pub" v-model="controlsDialog" :title="controlsTitle" width="32%" center>
<!-- 地区 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>地区</span
>
<el-select
multiple
filterable
v-model="controlsObj.value"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item in controlsObj.options"
:key="item.id"
:label="item.desc"
:value="item.id"
>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">地区</span>
<el-select multiple filterable v-model="controlsObj.value" placeholder="请选择" style="width: 100%">
<el-option v-for="item in controlsObj.options" :key="item.id" :label="item.desc" :value="item.id">
</el-option>
</el-select>
</div>
<!-- 勋章名称-华语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>勋章名称-华语</span
>
<el-input
v-model="controlsObj.nickZh"
placeholder=""
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章名称-华语</span>
<el-input v-model="controlsObj.nickZh" placeholder="" class="input"></el-input>
</div>
<!-- 勋章名称-英语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>勋章名称-英语</span
>
<el-input
v-model="controlsObj.nickEn"
placeholder=""
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章名称-英语</span>
<el-input v-model="controlsObj.nickEn" placeholder="" class="input"></el-input>
</div>
<!-- 勋章名称-阿语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>勋章名称-阿语</span
>
<el-input
v-model="controlsObj.nickAr"
placeholder=""
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章名称-阿语</span>
<el-input v-model="controlsObj.nickAr" placeholder="" class="input"></el-input>
</div>
<!-- 勋章名称-土耳其 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>勋章名称-土耳其</span
>
<el-input
v-model="controlsObj.nickTr"
placeholder=""
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章名称-土耳其</span>
<el-input v-model="controlsObj.nickTr" placeholder="" class="input"></el-input>
</div>
<!-- 勋章图片 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>勋章图片</span
>
<el-upload
class="avatar-uploader"
action="/admin/tencent/cos/upload/file"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-error="handleAvatarError"
>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章图片</span>
<el-upload class="avatar-uploader" action="/admin/tencent/cos/upload/file" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="handleAvatarError">
<img :src="controlsObj.imageUrl1" class="avatar" />
</el-upload>
</div>
<!-- 勋章获得方式-华语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章获得方式-华语</span>
<el-input v-model="controlsObj.medalDescZh" placeholder="" class="input"></el-input>
</div>
<!-- 勋章获得方式-英语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章获得方式-英语</span>
<el-input v-model="controlsObj.medalDescEn" placeholder="" class="input"></el-input>
</div>
<!-- 勋章获得方式-阿语 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章获得方式-阿语</span>
<el-input v-model="controlsObj.medalDescAr" placeholder="" class="input"></el-input>
</div>
<!-- 勋章获得方式-土耳其 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章获得方式-土耳其</span>
<el-input v-model="controlsObj.medalDescTr" placeholder="" class="input"></el-input>
</div>
<!-- 动态图 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章动态图</span>
<el-upload class="avatar-uploader input" action="/admin/tencent/cos/upload/file" :show-file-list="false"
:on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUploadMp4" :on-error="handleAvatarError">
<video v-if="controlsObj.imageUrl2" :key="controlsObj.imageUrl2" autoplay width="320" height="240"
controls="controls">
<source :src="controlsObj.imageUrl2" type="video/mp4" />
</video>
</el-upload>
</div>
<!-- 状态 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>状态</span
>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">状态</span>
<el-select filterable v-model="controlsObj.value2" placeholder="请选择">
<el-option
v-for="item in controlsObj.options2"
:key="item.id"
:label="item.desc"
:value="item.id"
></el-option>
<el-option v-for="item in controlsObj.options2" :key="item.id" :label="item.desc"
:value="item.id"></el-option>
</el-select>
</div>
@@ -243,71 +183,30 @@
</el-dialog>
<!-- 发放勋章弹窗 -->
<el-dialog
destroy-on-close
class="pub"
v-model="grantDialog"
title="发放勋章"
width="32%"
center
>
<el-dialog destroy-on-close class="pub" v-model="grantDialog" title="发放勋章" width="32%" center>
<!-- 勋章名称 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>勋章名称</span
>
<el-input
v-model="grantObj.nick"
placeholder="默认展示的是中文勋章名称"
class="input"
disabled
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">勋章名称</span>
<el-input v-model="grantObj.nick" placeholder="默认展示的是中文勋章名称" class="input" disabled></el-input>
</div>
<!-- 发放对象平台号 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>发放对象平台号</span
>
<el-input
type="textarea"
:rows="2"
v-model="grantObj.userId"
placeholder="多个平台号用英文“,”号分开分隔"
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">发放对象平台号</span>
<el-input type="textarea" :rows="2" v-model="grantObj.userId" placeholder="多个平台号用英文“,”号分开分隔"
class="input"></el-input>
</div>
<!-- 发放天数 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>发放天数</span
>
<el-input
v-model="grantObj.days"
placeholder="输入天数，不输入则视为无限制"
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">发放天数</span>
<el-input v-model="grantObj.days" placeholder="输入天数，不输入则视为无限制" class="input"></el-input>
</div>
<!-- 备注 -->
<div style="margin-bottom: 25px; margin-top: 10px; display: flex">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>备注</span
>
<el-input
v-model="grantObj.desc"
placeholder=""
class="input"
></el-input>
<span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">备注</span>
<el-input v-model="grantObj.desc" placeholder="" class="input"></el-input>
</div>
<!-- 弹窗按钮 -->
@@ -358,7 +257,12 @@ export default {
nickAr: "",
nickTr: "",
imageUrl1: "",
imageUrl2: '',
value2: "",
medalDescZh: '',
medalDescEn: '',
medalDescAr: '',
medalDescTr: '',
options2: [
{
desc: "生效",
@@ -420,6 +324,11 @@ export default {
this.controlsObj.nickAr = "";
this.controlsObj.nickTr = "";
this.controlsObj.imageUrl1 = "";
this.controlsObj.imageUrl2 = "";
this.controlsObj.medalDescZh = "";
this.controlsObj.medalDescEn = "";
this.controlsObj.medalDescAr = "";
this.controlsObj.medalDescTr = "";
this.controlsObj.value2 = "";
this.controlsDialog = true;
},
@@ -432,7 +341,14 @@ export default {
this.controlsObj.nickEn = JSON.parse(val.name).en;
this.controlsObj.nickAr = JSON.parse(val.name).ar;
this.controlsObj.nickTr = JSON.parse(val.name).tr;
if (val.medalDesc) {
this.controlsObj.medalDescZh = JSON.parse(val.medalDesc).zh;
this.controlsObj.medalDescEn = JSON.parse(val.medalDesc).en;
this.controlsObj.medalDescAr = JSON.parse(val.medalDesc).ar;
this.controlsObj.medalDescTr = JSON.parse(val.medalDesc).tr;
}
this.controlsObj.imageUrl1 = val.picUrl;
this.controlsObj.imageUrl2 = val.mp4Url;
this.controlsObj.value2 = val.enable;
this.controlsObj.id = val.id;
this.controlsDialog = true;
@@ -455,7 +371,15 @@ export default {
ar: this.controlsObj.nickAr,
tr: this.controlsObj.nickTr,
});
obj.medalDesc = JSON.stringify({
zh: this.controlsObj.medalDescZh,
en: this.controlsObj.medalDescEn,
ar: this.controlsObj.medalDescAr,
tr: this.controlsObj.medalDescTr,
});
obj.picUrl = this.controlsObj.imageUrl1;
obj.mp4Url = this.controlsObj.imageUrl2;
obj.enable = this.controlsObj.value2;
console.log(obj);
medalSave(obj).then((res) => {
@@ -484,7 +408,14 @@ export default {
ar: this.controlsObj.nickAr,
tr: this.controlsObj.nickTr,
});
obj1.medalDesc = JSON.stringify({
zh: this.controlsObj.medalDescZh,
en: this.controlsObj.medalDescEn,
ar: this.controlsObj.medalDescAr,
tr: this.controlsObj.medalDescTr,
});
obj1.picUrl = this.controlsObj.imageUrl1;
obj1.mp4Url = this.controlsObj.imageUrl2;
obj1.enable = this.controlsObj.value2;
obj1.id = this.controlsObj.id;
console.log(1111111111, this.controlsObj.value);
@@ -536,56 +467,44 @@ export default {
},
partitionFlagFun(num, type) {
//1 2 4
var val = 0;
var val = '';
let valArr = [];
if (type == 2) {
if (num == 0 || num == 15) {
val = [1, 2, 4, 8];
if ((num & 1) != 0) {
valArr.push(1);
}
if (num == 0 || num == 15) {
val = [1, 2, 4, 8];
} else if (num == 1) {
val = [1];
} else if (num == 3) {
val = [1, 2];
} else if (num == 7) {
val = [1, 2, 4];
} else if (num == 2) {
val = [2];
} else if (num == 6) {
val = [2, 4];
} else if (num == 14) {
val = [2, 4, 8];
} else if (num == 4) {
val = [4];
} else if (num == 12) {
val = [4, 8];
} else if (num == 8) {
val = [8];
if ((num & 2) != 0) {
valArr.push(2);
}
if ((num & 4) != 0) {
valArr.push(4);
}
if ((num & 8) != 0) {
valArr.push(8);
}
if ((num & 16) != 0) {
valArr.push(16);
}
return valArr;
} else {
if (num == 0 || num == 15) {
val = "英语区、阿语区、华语区、土耳其区";
} else if (num == 1) {
val = "英语区";
} else if (num == 3) {
val = "英语区、阿语区";
} else if (num == 7) {
val = "英语区、阿语区、华语区";
} else if (num == 2) {
val = "阿语区";
} else if (num == 6) {
val = "阿语区、华语区";
} else if (num == 14) {
val = "阿语区、华语区、土耳其区";
} else if (num == 4) {
val = "华语区";
} else if (num == 12) {
val = "华语区、土耳其区";
} else if (num == 8) {
val = "土耳其区";
if ((num & 1) != 0) {
val += '英语区 ';
}
if ((num & 2) != 0) {
val += '阿拉伯语区 ';
}
if ((num & 4) != 0) {
val += '华语区 ';
}
if ((num & 8) != 0) {
val += '土耳其 ';
}
if ((num & 16) != 0) {
val += '英语2区 ';
}
return val;
}
},
beforeAvatarUpload() {
ElMessage({
@@ -610,6 +529,36 @@ export default {
type: "success",
});
},
handleAvatarSuccess2(res, file) {
console.log(file);
this.controlsObj.imageUrl2 = file.response.data;
ElMessage({
showClose: true,
message: "上传成功！",
type: "success",
});
},
beforeAvatarUploadMp4(file) {
const dotIndex = (file.name).indexOf('.'); // 找到 '.' 的位置
if (dotIndex !== -1) {
const result = (file.name).substring(dotIndex + 1); // 从 '.' 之后开始截取
console.log(result);
if (result == 'mp4') {
ElMessage({
showClose: true,
message: "上传中~",
type: "warning",
});
return true;
} else {
ElMessage.error('请上传mp4格式文件');
return false;
}
} else {
ElMessage.error('请上传mp4格式文件');
return false;
}
},
// 分页导航
handleSizeChange() {
this.getData();
@@ -624,21 +573,26 @@ export default {
.box {
padding-top: 20px;
background: #ecf0f5;
.inquire {
display: inline-block;
margin-right: 20px;
span {
margin-right: 10px;
}
.input {
width: 180px;
margin-right: 10px;
}
}
.dialogTableVisibleBut {
display: block;
margin: 30px 0 0 830px;
}
.paginationClass {
margin: 15px 0 5px 0px;
}

445
src/views/medal/MedalLevelManagement.vue Normal file
View File

@@ -0,0 +1,445 @@
<template>
<div class="box">
<div class="inquire">
<span>分区</span>
<partition-select v-model:partition-id="formData.partitionId" :needAll="true" :needAllPartition="true"
@update:partitionInfos="getpartitionInfosList" />
</div>
<div class="inquire">
<span>勋章类型</span>
<el-select v-model="formData.type" placeholder="请选择勋章类型">
<el-option v-for="item in TypeList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
<div class="inquire">
<span>勋章等级</span>
<el-select v-model="formData.level" placeholder="请选择勋章等级">
<el-option v-for="item in LevelList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
<el-button style="" type="primary" @click="getData()">查询</el-button>
<el-button style="" type="primary"
@click="addDialog = true; Dialogtitle = '新增'; resetAddFormData()">新增</el-button>
<!-- 表格数据 -->
<el-table v-loading="tableData.loading" :data="tableData.data" ref="multipleTable"
@selection-change="handleSelectionChange" border style="width: 100%; margin-top: 25px">
<el-table-column prop="seriesId" align="center" label="ID" />
<el-table-column prop="name" align="center" label="勋章等级名称-华语区">
<template v-slot="scope">{{ JSON.parse(scope.row.seriesName).zh }}</template>
</el-table-column>
<el-table-column prop="name" align="center" label="勋章等级名称-英语区">
<template v-slot="scope">{{ JSON.parse(scope.row.seriesName).en }}</template>
</el-table-column>
<el-table-column prop="name" align="center" label="勋章等级名称-阿语区">
<template v-slot="scope">{{ JSON.parse(scope.row.seriesName).ar }}</template>
</el-table-column>
<el-table-column prop="name" align="center" label="勋章等级名称-土耳其区">
<template v-slot="scope">{{ JSON.parse(scope.row.seriesName).tr }}</template>
</el-table-column>
<el-table-column prop="partitionDesc" align="center" label="分区">
<template v-slot="scope">{{
partitionFlagFun(scope.row.partitionFlag, 1)
}}</template>
</el-table-column>
<el-table-column prop="type" align="center" label="勋章类型">
<template v-slot="scope">{{
scope.row.type == 1 ? '任务勋章' : scope.row.type == 2 ? '成就勋章' : '荣耀勋章'
}}</template>
</el-table-column>
<el-table-column prop="medalLevel" align="center" label="勋章等级" />
<el-table-column prop="squareShow" align="center" label="是否展示">
<template v-slot="scope">
{{ scope.row.squareShow == 1 ? '展示' : '不展示' }}
</template>
</el-table-column>
<el-table-column prop="status" align="center" label="状态">
<template v-slot="scope">
{{ scope.row.status == 1 ? '上架' : '下架'}}
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="300">
<template v-slot="scope">
<el-button class="primary" type="primary" @click="
detailPageFun(scope.row);
" size="default">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination style="margin-top: 10px" class="paginationClass" :current-page="formData.pageNo"
:page-size="formData.pageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="sizes, prev, pager, next"
:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
<el-dialog v-model="addDialog" :title="Dialogtitle" width="28%" center>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">分区</span>
<el-select multiple filterable v-model="addFormData.partitionFlag" placeholder="请选择" style="width: 70%">
<el-option v-for="item in addFormData.partitionInfosList" :key="item.id" :label="item.desc"
:value="item.id">
</el-option>
</el-select>
</div>
<!-- 勋章等级名称-华语 -->
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章等级名称-华语</span>
<el-input v-model="addFormData.seriesNameZh" placeholder="" class="input" style="width: 50%"></el-input>
</div>
<!-- 勋章等级名称-英语 -->
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章等级名称-英语</span>
<el-input v-model="addFormData.seriesNameEn" placeholder="" class="input" style="width: 50%"></el-input>
</div>
<!-- 勋章等级名称-阿语 -->
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章等级名称-阿语</span>
<el-input v-model="addFormData.seriesNameAr" placeholder="" class="input" style="width: 50%"></el-input>
</div>
<!-- 勋章等级名称-土耳其 -->
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章等级名称-土耳其</span>
<el-input v-model="addFormData.seriesNameTr" placeholder="" class="input" style="width: 50%"></el-input>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章类型</span>
<el-select v-model="addFormData.type" placeholder="请选择勋章类型">
<el-option label="任务勋章" value="1"></el-option>
<el-option label="成就勋章" value="2"></el-option>
<el-option label="荣耀勋章" value="3"></el-option>
</el-select>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章等级</span>
<el-select v-model="addFormData.medalLevel" placeholder="请选择勋章等级" @change="medalLevelFun">
<el-option v-for="item in LevelList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
<template v-if="selectedCount > 0">
<div style="margin-bottom: 25px" v-for="(item, index) in selectedCount" :key="index">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">勋章ID LV{{ index + 1 }}</span>
<el-input v-model="addFormData.medalSeriesRefs[index].medalId" style="width: 50%"
class="input"></el-input>
</div>
</template>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">是否展示在勋章广场</span>
<el-select v-model="addFormData.squareShow">
<el-option label="展示" value="1"></el-option>
<el-option label="不展示" value="0"></el-option>
</el-select>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">状态</span>
<el-select v-model="addFormData.status">
<el-option label="上架" value="1"></el-option>
<el-option label="下架" value="0"></el-option>
</el-select>
</div>
<div style="margin-bottom: 25px">
<span style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label">排序</span>
<el-input v-model="addFormData.seq" style="width: 50%" class="input"></el-input>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="addDialog = false">取消</el-button>
<el-button type="primary" @click="addFun()"> 确认 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { ref, reactive, } from 'vue'
import PartitionSelect from "@/views/common/partitionSelect.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getMedalSeriesList, saveOrUpdate, updateStatus } from "@/api/medal/MedalLevelManagement";
export default {
name: 'MedalLevelManagement',
components: {
PartitionSelect
},
setup() {
const formData = reactive({
partitionId: undefined,
pageNo: 1,
pageSize: 10,
level: '',
type: ''
})
const LevelList = ref([
{ label: '1级', value: 1 },
{ label: '2级', value: 2 },
{ label: '3级', value: 3 },
{ label: '4级', value: 4 },
{ label: '5级', value: 5 },
{ label: '6级', value: 6 },
])
const TypeList = ref([
{ label: '任务勋章 ', value: 1 },
{ label: '成就勋章', value: 2 },
{ label: '荣耀勋章', value: 3 },
])
const addFormData = reactive({
partitionFlag: undefined,
type: "1",
partitionInfosList: [],
medalLevel: '',
medalSeriesRefs: [
{ medalId: '', level: 1 },
{ medalId: '', level: 2 },
{ medalId: '', level: 3 },
{ medalId: '', level: 4 },
{ medalId: '', level: 5 },
{ medalId: '', level: 6 },
],
status: "1",
squareShow: "1",
seriesNameZh: '',
seriesNameEn: '',
seriesNameAr: '',
seriesNameTr: '',
seq: '',
seriesId: '',
})
const tableData = reactive({
data: [],
total: 0,
loading: false,
})
const Dialogtitle = ref('')
const addDialog = ref(false)
const selectedCount = ref(0)
const getData = () => {
tableData.loading = true;
getMedalSeriesList(formData).then(res => {
if (res.code == 200) {
tableData.data = res.data.rows
tableData.loading = false;
tableData.total = res.data.total
} else {
tableData.loading = false;
ElMessage.error(res.message);
}
})
};
// 增加
const addFun = () => {
let obj = {}
// 过滤 medalId 为空的项
const filteredRefs = addFormData.medalSeriesRefs.filter(
item => item.medalId.trim() !== ''
);
addFormData.partitionFlag.forEach((res, i) => {
obj.partitionFlag |= addFormData.partitionInfosList[i].id;
});
obj.seriesName = JSON.stringify({
zh: addFormData.seriesNameZh,
en: addFormData.seriesNameEn,
ar: addFormData.seriesNameAr,
tr: addFormData.seriesNameTr,
});
obj.status = addFormData.status;
obj.squareShow = addFormData.squareShow;
obj.seq = addFormData.seq;
obj.type = addFormData.type;
obj.medalLevel = addFormData.medalLevel;
obj.medalSeriesRefs = filteredRefs;
if (addFormData.seriesId) {
obj.seriesId = addFormData.seriesId;
}
saveOrUpdate(obj).then(res => {
if (res.code == 200) {
ElMessage.success('添加成功');
resetAddFormData();
addDialog.value = false;
getData()
} else {
ElMessage.error(res.message);
addDialog.value = false
}
})
}
// 详情
const detailPageFun = (val) => {
resetAddFormData();
// 执行赋值
val.medalSeriesRefs.forEach(item => {
const target = addFormData.medalSeriesRefs.find(ref => ref.level == item.level);
if (target) {
target.medalId = String(item.medalId);
}
});
addFormData.status = String(val.status);
addFormData.squareShow = String(val.squareShow);
addFormData.seq = val.seq;
addFormData.type = String(val.type);
addFormData.medalLevel = val.medalLevel;
addFormData.partitionFlag = partitionFlagFun(val.partitionFlag, 2)
if (val.seriesName) {
addFormData.seriesNameZh = JSON.parse(val.seriesName).zh;
addFormData.seriesNameEn = JSON.parse(val.seriesName).en;
addFormData.seriesNameAr = JSON.parse(val.seriesName).ar;
addFormData.seriesNameTr = JSON.parse(val.seriesName).tr;
}
selectedCount.value = val.medalLevel;
addDialog.value = true;
Dialogtitle.value = "编辑";
addFormData.seriesId = val.seriesId;
}
const medalLevelFun = (val) => {
selectedCount.value = parseInt(val)
}
// 处理分区
const partitionFlagFun = (num, type) => {
//1 2 4
var val = '';
let valArr = [];
if (type == 2) {
if ((num & 1) != 0) {
valArr.push(1);
}
if ((num & 2) != 0) {
valArr.push(2);
}
if ((num & 4) != 0) {
valArr.push(4);
}
if ((num & 8) != 0) {
valArr.push(8);
}
if ((num & 16) != 0) {
valArr.push(16);
}
return valArr;
} else {
if ((num & 1) != 0) {
val += '英语区 ';
}
if ((num & 2) != 0) {
val += '阿拉伯语区 ';
}
if ((num & 4) != 0) {
val += '华语区 ';
}
if ((num & 8) != 0) {
val += '土耳其 ';
}
if ((num & 16) != 0) {
val += '英语2区 ';
}
return val;
}
};
//重置
const resetAddFormData = () => {
Object.assign(addFormData, {
partitionFlag: undefined,
type: "1",
// partitionInfosList: [],
medalLevel: '',
medalSeriesRefs: [
{ medalId: '', level: 1 },
{ medalId: '', level: 2 },
{ medalId: '', level: 3 },
{ medalId: '', level: 4 },
{ medalId: '', level: 5 },
{ medalId: '', level: 6 },
],
status: "1",
squareShow: "1",
seriesNameZh: '',
seriesNameEn: '',
seriesNameAr: '',
seriesNameTr: '',
seq: '',
seriesId: '',
});
};
const getpartitionInfosList = (e) => {
addFormData.partitionInfosList = JSON.parse(JSON.stringify(e));
addFormData.partitionInfosList.shift();
};
const handleSizeChange = (val) => {
formData.pageSize = val;
getData();
};
const handleCurrentChange = (val) => {
formData.pageNo = val;
getData();
};
return {
formData,
addFormData,
tableData,
addDialog,
getData,
addFun,
handleSizeChange,
handleCurrentChange,
medalLevelFun,
selectedCount,
LevelList,
TypeList,
partitionFlagFun,
getpartitionInfosList,
resetAddFormData,
detailPageFun,
Dialogtitle
}
}
}
</script>
<style lang="less" scoped>
.box {
padding-top: 20px;
background: #ecf0f5;
.inquire {
display: inline-block;
margin-right: 20px;
span {
margin-right: 10px;
}
.input {
width: 180px;
margin-right: 10px;
}
}
.dialogTableVisibleBut {
display: block;
margin: 30px 0 0 830px;
}
.paginationClass {
margin: 15px 0 5px 0px;
}
}
</style>