Files
peko-admin-web/src/views/luckyTycoon/luckyTycoonOnePlusOne.vue
2024-11-12 10:31:17 +08:00

769 lines
21 KiB
Vue

<template>
<div class="box">
<!-- 查询按钮 -->
<el-button class="primary" type="primary" @click="add()">新增</el-button>
</div>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="partitionDesc" align="center" label="地区" />
<el-table-column prop="destGiftId" align="center" label="礼物id" />
<el-table-column prop="luckyBagName" align="center" label="福袋名称" />
<el-table-column
align="center"
prop="giftInfo"
label="福袋图片"
width="120"
>
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.luckyBagPic"
:zoom-rate="1.1"
:preview-src-list="[scope.row.luckyBagPic]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template>
</el-table-column>
<el-table-column prop="createTime" align="center" label="添加时间" />
<el-table-column prop="destGiftName" align="center" label="礼物名称" />
<el-table-column
align="center"
prop="giftInfo"
label="礼物图片"
width="120"
>
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.destGiftPic"
:zoom-rate="1.1"
:preview-src-list="[scope.row.destGiftPic]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template>
</el-table-column>
<el-table-column prop="destGiftPrice" align="center" label="礼物价值" />
<el-table-column
prop="rewardGiftName"
align="center"
label="奖励礼物昵称"
/>
<el-table-column
align="center"
prop="giftInfo"
label="奖励礼物图片"
width="120"
>
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.rewardGiftPic"
:zoom-rate="1.1"
:preview-src-list="[scope.row.rewardGiftPic]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template>
</el-table-column>
<el-table-column
prop="rewardGiftPrice"
align="center"
label="奖励礼物价值"
/>
<el-table-column prop="dayLimit" align="center" label="每日库存" />
<el-table-column prop="totalLimit" align="center" label="总库存" />
<el-table-column
prop="todayResideStock"
align="center"
label="今日剩余库存"
/>
<el-table-column prop="grantStock" align="center" label="已发放库存数量" />
<el-table-column prop="seqNo" align="center" label="排序" />
<el-table-column align="center" label="操作" width="240px">
<template v-slot="scope">
<el-button
@click="eid(scope)"
class="primary"
type="primary"
size="default"
>编辑</el-button
>
<el-button
@click="
delDialog = true;
delDialogObj = scope.row;
"
:class="scope.row.isEnabled == 1 ? 'danger' : 'primary'"
:type="scope.row.isEnabled == 1 ? 'danger' : 'primary'"
size="default"
>{{ scope.row.isEnabled == 1 ? "下线" : "上线" }}
</el-button>
<el-button
@click="
deriveDialog = true;
deriveObjNew = scope.row;
"
class="primary"
type="primary"
size="default"
>导出</el-button
>
</template>
</el-table-column>
</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-dialog v-model="deriveDialog" title="导出" width="28%" center>
<!-- 榜单数据 -->
<!-- <div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>地区选择</span
>
<el-select v-model="deriveObj.value" placeholder="请选择">
<el-option
v-for="item in deriveObj.options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div> -->
<!-- 选择时间 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>选择时间</span
>
<div class="inquire">
<el-date-picker
v-model="deriveObj.time"
type="datetimerange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 60%"
>
</el-date-picker>
</div>
</div>
<!-- 弹窗按钮 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="deriveDialog = false">取消</el-button>
<el-button type="primary" @click="deriveOut()"> 确认导出 </el-button>
</span>
</template>
</el-dialog>
<!-- 新增&编辑弹窗 -->
<el-dialog
class="pub"
v-model="controlsDialog"
:title="controlsTitle"
width="36%"
center
>
<!-- 地区选择 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>地区选择</span
>
<el-select filterable v-model="controlsObj.value" placeholder="请选择">
<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">
<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.giftId"
:label="JsonFunc(item.giftName)"
:value="item.giftId"
>
</el-option>
</el-select>
</div>
<!-- 福袋价值 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>福袋价值</span
>
<el-input
v-model="controlsObj.cost"
placeholder=""
class="input"
disabled
></el-input>
</div>
<!-- 礼物昵称 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>礼物昵称</span
>
<el-select filterable v-model="controlsObj.value3" placeholder="请选择">
<el-option
v-for="item in controlsObj.options3"
:key="item.giftId"
:label="item.giftName"
:value="item.giftId"
>
</el-option>
</el-select>
</div>
<!-- 礼物价值 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>礼物价值</span
>
<el-input
v-model="controlsObj.cost2"
placeholder=""
class="input"
disabled
></el-input>
</div>
<!-- 奖励礼物昵称 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>奖励礼物昵称</span
>
<el-select filterable v-model="controlsObj.value4" placeholder="请选择">
<el-option
v-for="item in controlsObj.options4"
:key="item.giftId"
:label="JsonFunc(item.giftName)"
:value="item.giftId"
>
</el-option>
</el-select>
</div>
<!-- 奖励礼物价值 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>奖励礼物价值</span
>
<el-input
v-model="controlsObj.cost3"
placeholder=""
class="input"
disabled
></el-input>
</div>
<!-- 每日库存 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>每日库存</span
>
<el-input
v-model="controlsObj.inventory"
placeholder=""
class="input"
></el-input>
</div>
<!-- 总库存 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>总库存</span
>
<el-input
v-model="controlsObj.inventoryAll"
placeholder=""
class="input"
></el-input>
</div>
<!-- 排序 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>排序</span
>
<el-input
v-model="controlsObj.sort"
placeholder=""
class="input"
></el-input>
</div>
<!-- 是否可见 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>是否可见</span
>
<el-select filterable v-model="controlsObj.value5" placeholder="请选择">
<el-option
v-for="item in controlsObj.options5"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<!-- 选择时间 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>选择时间</span
>
<div class="inquire">
<el-date-picker
v-model="controlsObj.time"
type="datetimerange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 66%"
>
</el-date-picker>
</div>
</div>
<!-- 弹窗按钮 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="controlsDialog = false">取消</el-button>
<el-button type="primary" @click="controlsDialogOut()">
确认
</el-button>
</span>
</template>
</el-dialog>
<!-- 二次确认弹窗 -->
<el-dialog v-model="delDialog" title="提示" width="30%" center>
<span> 确定要进行该操作吗?</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="delDialog = false">取消</el-button>
<el-button type="primary" @click="delClick()"> 确认 </el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import {
listPartitionInfo,
listLuckyBagLinearGift,
luckyBagFortunatePage,
getPrizeGroupsInfo,
getAll,
luckyBagFortunateExport,
luckyBagFortunateSave,
luckyBagFortunateUpdateEnabled,
} from "@/api/luckyTycoon/luckyTycoon";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
name: "luckyTycoonOnePlusOne",
created() {
listPartitionInfo().then((res) => {
this.controlsObj.options = res.data;
});
listLuckyBagLinearGift({
giftTypes: "3,15",
}).then((res) => {
this.controlsObj.options2 = res.data;
});
this.getData();
},
data() {
return {
delDialog: false,
delDialogObj: {},
foundIndexFunVal: "",
loading: false,
// 表格数据
tableData: [],
// 分页
total: 10, //总页数
currentPage: 1, //页码
pageSize: 10, //条数//导出
deriveDialog: false,
deriveObjNew: {},
deriveObj: {
value: "",
time: "",
options: [
{
value: "1",
label: "英语区",
},
{
value: "2",
label: "阿拉伯区",
},
{
value: "4",
label: "华语区",
},
],
},
controlsDialog: false,
controlsDialogType: 1, //1新增 2编辑
controlsTitle: "编辑&新增",
controlsObj: {
// 地区选择
value: "",
options: [],
// 福袋礼物选择
value2: "",
options2: [],
cost: "",
value3: "",
options3: [],
cost2: "",
value4: "",
options4: [],
cost3: "",
inventory: "",
inventoryAll: "",
sort: "",
value5: 1,
options5: [
{
value: 1,
label: "是",
},
{
value: 0,
label: "否",
},
],
time: [],
},
};
},
watch: {
"controlsObj.value2": function (newValue, oldValue) {
this.controlsObj.cost = this.foundIndexFun(
newValue,
this.controlsObj.options2,
1
);
getPrizeGroupsInfo({ luckyBagId: this.controlsObj.value2 }).then(
(res) => {
var newArr = [];
res.data.highPrizeGroup.forEach((val) => {
newArr.push(val);
});
res.data.normalPrizeGroup.forEach((val) => {
newArr.push(val);
});
this.controlsObj.options3 = newArr;
}
);
},
"controlsObj.value3": function (newValue, oldValue) {
if (this.watchType) {
return;
}
this.controlsObj.cost2 = this.foundIndexFun(
newValue,
this.controlsObj.options3,
2
);
},
"controlsObj.value4": function (newValue, oldValue) {
if (this.watchType) {
return;
}
this.controlsObj.cost3 = this.foundIndexFun(
newValue,
this.controlsObj.options4,
1
);
},
},
methods: {
getData() {
this.loading = true;
luckyBagFortunatePage({
page: this.currentPage,
pageSize: this.pageSize,
}).then((res) => {
if (res.code == 200) {
this.tableData = res.data.records;
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
getAll().then((res) => {
this.controlsObj.options4 = res.data;
this.loading = false;
});
},
add() {
this.controlsDialog = true;
this.controlsTitle = "新增";
this.controlsDialogType = 1;
// this.controlsObj = {
// // 地区选择
// value: "",
// options: [],
// // 福袋礼物选择
// value2: "",
// options2: [],
// cost: "",
// value3: "",
// options3: [],
// cost2: "",
// value4: "",
// options4: [],
// cost3: "",
// inventory: "",
// inventoryAll: "",
// sort: "",
// value5: 1,
// options5: [
// {
// value: 1,
// label: "是",
// },
// {
// value: 2,
// label: "否",
// },
// ],
// time: "",
// };
},
eid(scope) {
var res = scope.row;
this.deriveObjNew = scope.row;
this.controlsTitle = "编辑";
this.controlsDialogType = 2;
this.foundIndexFunVal = res.rewardGiftId;
this.controlsObj.value = res.partitionId;
this.controlsObj.value2 = res.luckyBagId;
getPrizeGroupsInfo({ luckyBagId: this.controlsObj.value2 }).then(
(resArr) => {
var newArr = [];
resArr.data.highPrizeGroup.forEach((val) => {
newArr.push(val);
});
resArr.data.normalPrizeGroup.forEach((val) => {
newArr.push(val);
});
this.controlsObj.options3 = newArr;
this.controlsObj.value3 = res.destGiftId;
// this.controlsObj.cost = res.luckyBagPrice;
// this.controlsObj.cost2 = res.destGiftId;
this.controlsObj.value4 = res.rewardGiftId;
// this.controlsObj.cost3 = res.rewardGiftPrice;
this.controlsObj.inventory = res.dayLimit;
this.controlsObj.inventoryAll = res.totalLimit;
this.controlsObj.sort = res.seqNo;
this.controlsObj.value5 = res.isEnabled;
this.controlsObj.time[0] = res.startTime;
this.controlsObj.time[1] = res.endTime;
this.controlsDialog = true;
}
);
},
// 保存
controlsDialogOut() {
let startTime = "";
let endTime = "";
if (this.controlsObj.time && this.controlsObj.time.length > 0) {
startTime = dateFormat(this.controlsObj.time[0], "yyyy-MM-dd hh:mm:ss");
endTime = dateFormat(this.controlsObj.time[1], "yyyy-MM-dd hh:mm:ss");
}
if (this.controlsDialogType == 1) {
luckyBagFortunateSave({
partitionId: this.controlsObj.value,
luckyBagId: this.controlsObj.value2,
destGiftId: this.controlsObj.value3,
rewardGiftId: this.controlsObj.value4,
dayLimit: this.controlsObj.inventory,
totalLimit: this.controlsObj.inventoryAll,
seqNo: this.controlsObj.sort,
isEnabled: this.controlsObj.value5,
startTime,
endTime,
}).then((res) => {
if (res.code == 200) {
this.controlsDialog = false;
this.getData();
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
} else {
luckyBagFortunateSave({
partitionId: this.controlsObj.value,
luckyBagId: this.controlsObj.value2,
destGiftId: this.controlsObj.value3,
rewardGiftId: this.controlsObj.value4,
dayLimit: this.controlsObj.inventory,
totalLimit: this.controlsObj.inventoryAll,
seqNo: this.controlsObj.sort,
isEnabled: this.controlsObj.value5,
id: this.deriveObjNew.id,
startTime,
endTime,
}).then((res) => {
if (res.code == 200) {
this.controlsDialog = false;
this.getData();
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
}
},
// 导出
deriveOut() {
let startTime = "";
let endTime = "";
if (this.deriveObj.time && this.deriveObj.time.length > 0) {
startTime = dateFormat(this.deriveObj.time[0], "yyyy-MM-dd hh:mm:ss");
endTime = dateFormat(this.deriveObj.time[1], "yyyy-MM-dd hh:mm:ss");
}
luckyBagFortunateExport({
fortunateId: this.deriveObjNew.id,
partitionId: this.deriveObjNew.partitionId,
startTime,
endTime,
}).then((res) => {});
},
// 上下线
delClick() {
luckyBagFortunateUpdateEnabled({
fortunateId: this.delDialogObj.id,
isEnabled: this.delDialogObj.isEnabled == 1 ? 0 : 1,
}).then((res) => {
if (res.code == 200) {
this.delDialog = false;
this.getData();
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
},
// 分页导航
handleSizeChange() {
this.getData();
},
handleCurrentChange() {
this.getData();
},
foundIndexFun(val, arr, type) {
var i;
i = arr.findIndex((item) => item.giftId === val);
return type == 1 ? arr[i].goldPrice : arr[i].platformValue;
},
JsonFunc(val) {
var res = JSON.parse(val);
return res.zh;
},
},
};
</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;
}
}
.pub {
.input {
width: 55%;
display: inline-block;
}
}
</style>