579 lines
19 KiB
Vue
579 lines
19 KiB
Vue
<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">{{ getJsonField(scope.row.seriesName, 'zh') }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name"
|
|
align="center"
|
|
label="勋章等级名称-英语区">
|
|
<template v-slot="scope">{{ getJsonField(scope.row.seriesName, 'en') }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name"
|
|
align="center"
|
|
label="勋章等级名称-阿语区">
|
|
<template v-slot="scope">{{ getJsonField(scope.row.seriesName, 'ar') }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name"
|
|
align="center"
|
|
label="勋章等级名称-土耳其区">
|
|
<template v-slot="scope">{{ getJsonField(scope.row.seriesName, 'tr') }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name"
|
|
align="center"
|
|
label="勋章等级名称-葡萄牙语区">
|
|
<template v-slot="scope">{{ getJsonField(scope.row.seriesName, 'pr') }}</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-input v-model="addFormData.seriesNamePr"
|
|
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 addLevelList"
|
|
: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;resetAddFormData();selectedCount=0">取消</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: '全部', value: '' },
|
|
{ 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 addLevelList = 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: '',
|
|
seriesNamePr: '',
|
|
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) => {
|
|
let resArr = addFormData.partitionInfosList.find(item => item.id === res)
|
|
obj.partitionFlag |= resArr.id
|
|
|
|
});
|
|
obj.seriesName = JSON.stringify({
|
|
zh: addFormData.seriesNameZh,
|
|
en: addFormData.seriesNameEn,
|
|
ar: addFormData.seriesNameAr,
|
|
tr: addFormData.seriesNameTr,
|
|
pr: addFormData.seriesNamePr,
|
|
});
|
|
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();
|
|
selectedCount.value = 0;
|
|
} else {
|
|
ElMessage.error(res.message);
|
|
addDialog.value = false
|
|
selectedCount.value = 0;
|
|
}
|
|
})
|
|
}
|
|
// 详情
|
|
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;
|
|
addFormData.seriesNamePr = JSON.parse(val.seriesName).pr;
|
|
}
|
|
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);
|
|
}
|
|
if ((num & 32) != 0) {
|
|
valArr.push(32);
|
|
}
|
|
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区 ';
|
|
}
|
|
if ((num & 32) != 0) {
|
|
val += '葡萄牙语区 ';
|
|
}
|
|
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: '',
|
|
seriesNamePr: '',
|
|
seq: '',
|
|
seriesId: '',
|
|
});
|
|
};
|
|
const getpartitionInfosList = (e) => {
|
|
console.log(e);
|
|
addFormData.partitionInfosList = JSON.parse(JSON.stringify(e));
|
|
addFormData.partitionInfosList.shift();
|
|
};
|
|
// 解析json字段
|
|
const getJsonField = (jsonStr, field) => {
|
|
try {
|
|
if (!jsonStr) return '';
|
|
const obj = JSON.parse(jsonStr);
|
|
return obj?.[field] || '';
|
|
} catch (e) {
|
|
console.error('JSON 解析失败:', jsonStr);
|
|
return '';
|
|
}
|
|
};
|
|
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,
|
|
getJsonField,
|
|
addLevelList
|
|
}
|
|
}
|
|
}
|
|
</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> |