445 lines
18 KiB
Vue
445 lines
18 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">{{ 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> |