581 lines
17 KiB
Vue
581 lines
17 KiB
Vue
<template>
|
|
<div class="outer">
|
|
<!-- 查询 -->
|
|
<div class="inquire" style="display: inline-block; margin-right: 20px">
|
|
<span class="demonstration">地区:</span>
|
|
<el-select v-model="searchValues.partitionId" placeholder="请选择">
|
|
<el-option
|
|
v-for="(item, i) in partitionInfos"
|
|
:key="i"
|
|
:label="item.desc"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<!-- 按钮 -->
|
|
<div class="buttonBox">
|
|
<el-button class="primary" type="primary" size="default" @click="add()"
|
|
>新增</el-button
|
|
>
|
|
<el-button @click="getData()" class="primary" type="primary" size="default"
|
|
style="margin-right: 10px">查询</el-button>
|
|
</div>
|
|
<!-- 列表 -->
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%; margin-top: 25px"
|
|
>
|
|
<el-table-column prop="giftId" align="center" label="礼物id" />
|
|
<el-table-column prop="giftName" align="center" label="礼物名称" />
|
|
<el-table-column align="center" prop="partitionId" label="地区">
|
|
<template v-slot="scope">
|
|
<span>{{ getPartitionInfo(scope.row.partitionId) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="icon" label="礼物图片">
|
|
<template v-slot="scope">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="scope.row.giftUrl"
|
|
:zoom-rate="1.1"
|
|
:preview-src-list="[scope.row.giftUrl]"
|
|
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="giftPrice" align="center" label="礼物价值" />
|
|
<el-table-column prop="stickNum" align="center" label="需要魔法棒数量" />
|
|
<el-table-column prop="promiseCount" align="center" label="累计许愿出次数" />
|
|
<el-table-column prop="stockNum" align="center" label="库存" />
|
|
<!-- <el-table-column prop="isEnabled" align="center" label="是否可见" /> -->
|
|
<el-table-column align="center" label="是否可见">
|
|
<template v-slot="scope">
|
|
<div>{{ scope.row.isEnabled == 0 ? "否" : "是" }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="seqNo" align="center" label="排序" />
|
|
<el-table-column align="center" label="操作" width="300">
|
|
<template v-slot="scope">
|
|
<el-button @click="edi(scope.row)" class="primary" type="primary" size="default"
|
|
>编辑</el-button
|
|
>
|
|
<el-button
|
|
@click="controls(scope.row)"
|
|
:class="scope.row.isEnabled == 1 ? 'danger' : 'primary'"
|
|
:type="scope.row.isEnabled == 1 ? 'danger' : 'primary'"
|
|
size="default"
|
|
><div>{{ scope.row.isEnabled == 1 ? "下线" : "上线" }}</div></el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
style="margin-top: 10px; display: none"
|
|
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="addDialog" 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="resource.partitionId" style="width: 75%" placeholder="请选择">
|
|
<el-option v-for="item in partitionInfos" :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="resource.index"
|
|
@change="giftOptionsChange"
|
|
style="width: 75%"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in giftOptions.filter(v => resource.partitionId == null || ((v.partitionFlag & resource.partitionId) != 0))"
|
|
:key="i"
|
|
:label="item.giftName"
|
|
:value="i"
|
|
></el-option>
|
|
</el-select>
|
|
</div>
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>礼物价值</span
|
|
>
|
|
<el-input
|
|
v-model="resource.goldPrice"
|
|
style="width: 75%"
|
|
class="input"
|
|
placeholder="先选择许愿礼物"
|
|
disabled
|
|
></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>魔法棒数量</span
|
|
>
|
|
<el-input v-model="resource.stickNum" style="width: 75%" class="input"></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>库存</span
|
|
>
|
|
<el-input v-model="resource.stockNum" style="width: 75%" class="input"></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>排序</span
|
|
>
|
|
<el-input v-model="resource.seqNo" style="width: 75%" class="input"></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px; margin-top: 0px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>是否可见</span
|
|
>
|
|
<el-select v-model="resource.isEnabled" style="width: 75%" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in showOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="addDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="addDialogClick()"> 确认 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 编辑弹窗 -->
|
|
<el-dialog v-model="editDialog" 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="editresource.partitionId" style="width: 75%" placeholder="请选择">
|
|
<el-option v-for="item in partitionInfos" :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
|
|
disabled
|
|
v-model="editresource.giftName"
|
|
style="width: 75%"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in editGiftOptions.filter(v => editresource.partitionId == null || ((v.partitionFlag & editresource.partitionId) != 0))"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>礼物价值</span
|
|
>
|
|
<el-input
|
|
v-model="editresource.goldPrice"
|
|
style="width: 75%"
|
|
class="input"
|
|
placeholder="先选择许愿礼物"
|
|
disabled
|
|
></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>魔法棒数量</span
|
|
>
|
|
<el-input
|
|
v-model="editresource.stickNum"
|
|
style="width: 75%"
|
|
class="input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>库存</span
|
|
>
|
|
<el-input
|
|
v-model="editresource.stockNum"
|
|
style="width: 75%"
|
|
class="input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>排序</span
|
|
>
|
|
<el-input
|
|
v-model="editresource.seqNo"
|
|
style="width: 75%"
|
|
class="input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px; margin-top: 0px">
|
|
<span
|
|
style="display: inline-block; margin-right: 20px"
|
|
class="col-sm-2 control-label"
|
|
>是否可见</span
|
|
>
|
|
<el-select
|
|
v-model="editresource.isEnabled"
|
|
style="width: 75%"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in editShowOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="editDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="editDialogClick()"> 确认 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 二次确认删除弹窗 -->
|
|
<el-dialog v-model="delDialog" title="提示" width="30%" center>
|
|
<span> {{ delDialogText }}</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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
promiseStarConfigList,
|
|
giftGetAll,
|
|
promiseStarConfigSave,
|
|
promiseStarConfigUpdateEnable,
|
|
// @ts-ignore
|
|
} from "@/api/wishingStar/wishingStar";
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
import { ElMessage } from "element-plus";
|
|
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
|
|
export default {
|
|
name: "wishingStarSet",
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
tableData: [],
|
|
total: 10, //总页数
|
|
currentPage: 1, //页码
|
|
pageSize: 10, //条数
|
|
addDialog: false, //控制新增弹窗
|
|
resource: {
|
|
//新增弹窗所需对象
|
|
index: null,
|
|
giftId: null,
|
|
goldPrice: "",
|
|
stickNum: null,
|
|
stockNum: null,
|
|
seqNo: null,
|
|
isEnabled: null,
|
|
partitionId: null,
|
|
},
|
|
giftOptions: [
|
|
//新增弹窗礼物筛选
|
|
],
|
|
showOptions: [
|
|
//新增弹窗是否可见筛选
|
|
{
|
|
value: 0,
|
|
label: "否",
|
|
},
|
|
{
|
|
value: 1,
|
|
label: "是",
|
|
},
|
|
],
|
|
editDialog: false, //控制编辑弹窗
|
|
editresource: {
|
|
//编辑弹窗所需对象
|
|
id: null,
|
|
giftId: null,
|
|
goldPrice: null,
|
|
stickNum: null,
|
|
stockNum: null,
|
|
seqNo: null,
|
|
isEnabled: null,
|
|
giftName: null,
|
|
partitionId: null,
|
|
},
|
|
editGiftOptions: [
|
|
//编辑弹窗礼物筛选
|
|
{
|
|
value: 0,
|
|
label: "选择许愿礼物",
|
|
},
|
|
],
|
|
editShowOptions: [
|
|
//编辑弹窗是否可见筛选
|
|
{
|
|
value: 0,
|
|
label: "否",
|
|
},
|
|
{
|
|
value: 1,
|
|
label: "是",
|
|
},
|
|
],
|
|
delDialog: false, //控制删除弹窗
|
|
delDialogText: "确认吗?", //删除弹窗提示
|
|
// 删除要用的数据对象
|
|
promiseStarConfigUpdateEnableObj: {
|
|
isEnabled: null,
|
|
id: null,
|
|
},
|
|
partitionInfos: [],
|
|
searchValues: {
|
|
partitionId: null,
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.initPartition();
|
|
this.getData();
|
|
giftGetAll({
|
|
giftType: 2,
|
|
// @ts-ignore
|
|
}).then((res) => {
|
|
this.giftOptions = res.data.map(v => {
|
|
let giftName = v.giftName;
|
|
if (giftName.startsWith('{') && giftName.endsWith('}')) {
|
|
v.giftName = JSON.parse(giftName).zh;
|
|
}
|
|
return v;
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
// 初始化数据
|
|
getData() {
|
|
this.loading = true;
|
|
// @ts-ignore
|
|
promiseStarConfigList({
|
|
partitionId: this.searchValues.partitionId,
|
|
}).then((res) => {
|
|
this.tableData = res.data;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 新增
|
|
add() {
|
|
this.addDialog = true;
|
|
},
|
|
// 监听新增礼物价值
|
|
// @ts-ignore
|
|
giftOptionsChange(e) {
|
|
let gifts = this.giftOptions.filter(v => this.resource.partitionId == null || ((v.partitionFlag & this.resource.partitionId) != 0));
|
|
// @ts-ignore
|
|
this.resource.giftId = gifts[e].giftId;
|
|
// @ts-ignore
|
|
this.resource.giftName = gifts[e].giftName;
|
|
// @ts-ignore
|
|
this.resource.goldPrice = gifts[e].goldPrice;
|
|
},
|
|
// 表单编辑
|
|
// @ts-ignore
|
|
edi(res) {
|
|
console.log("编辑按钮当前一行的数据", res);
|
|
console.log("编辑按钮当前一行的数据", this.resource.index);
|
|
this.editresource.id = res.id;
|
|
this.editresource.giftId = res.giftId;
|
|
this.editresource.stickNum = res.stickNum;
|
|
this.editresource.stockNum = res.stockNum;
|
|
this.editresource.seqNo = res.seqNo;
|
|
this.editresource.isEnabled = res.isEnabled;
|
|
this.editresource.goldPrice = res.giftPrice;
|
|
// @ts-ignore
|
|
this.editresource.giftName = res.giftName;
|
|
this.editresource.partitionId = res.partitionId;
|
|
this.editDialog = true;
|
|
},
|
|
// 表单上线下线按钮
|
|
// @ts-ignore
|
|
controls(res) {
|
|
console.log(res);
|
|
// @ts-ignore
|
|
this.promiseStarConfigUpdateEnableObj.isEnabled = res.isEnabled == 1 ? 0 : 1;
|
|
this.promiseStarConfigUpdateEnableObj.id = res.id;
|
|
this.delDialog = true;
|
|
},
|
|
// 新增弹窗确认按钮
|
|
addDialogClick() {
|
|
promiseStarConfigSave({
|
|
giftId: this.resource.giftId,
|
|
stickNum: this.resource.stickNum,
|
|
stockNum: this.resource.stockNum,
|
|
seqNo: this.resource.seqNo,
|
|
isEnabled: this.resource.isEnabled,
|
|
partitionId: this.resource.partitionId,
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
}).then((res) => {
|
|
this.getData();
|
|
});
|
|
this.addDialog = false;
|
|
},
|
|
// 编辑弹窗确认按钮
|
|
editDialogClick() {
|
|
console.log(this.editresource);
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
promiseStarConfigSave(this.editresource).then((res) => {
|
|
this.getData();
|
|
});
|
|
this.editDialog = false;
|
|
},
|
|
// 删除弹窗确认按钮
|
|
delClick() {
|
|
console.log(this.promiseStarConfigUpdateEnableObj);
|
|
promiseStarConfigUpdateEnable({
|
|
isEnabled: this.promiseStarConfigUpdateEnableObj.isEnabled,
|
|
id: this.promiseStarConfigUpdateEnableObj.id,
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
}).then((res) => {
|
|
this.getData();
|
|
});
|
|
this.delDialog = false;
|
|
},
|
|
// 分页导航
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
handleSizeChange(val) {},
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
handleCurrentChange(val) {},
|
|
initPartition() {
|
|
getPartitionInfoList().then(res => {
|
|
this.partitionInfos = res.data;
|
|
});
|
|
},
|
|
getPartitionInfo(partitionId) {
|
|
let partitions = this.partitionInfos.filter(v => v.id == partitionId);
|
|
if (!partitions || partitions.length <= 0) {
|
|
return '';
|
|
}
|
|
return partitions[0].desc;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.outer {
|
|
padding-top: 20px;
|
|
background: #ecf0f5;
|
|
border-top: 3px solid #d2d6de;
|
|
.search {
|
|
width: 100%;
|
|
height: 41px;
|
|
.searchLeft,
|
|
.searchRight {
|
|
width: 20%;
|
|
float: left;
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
.input {
|
|
width: 75%;
|
|
}
|
|
}
|
|
}
|
|
.buttonBox {
|
|
margin-top: 10px;
|
|
}
|
|
.authorityBox {
|
|
.authoritySpan {
|
|
margin-right: 20px;
|
|
}
|
|
.authorityInpput {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.dialogTableVisibleBut {
|
|
margin: -25px 0 20px 0px;
|
|
}
|
|
}
|
|
</style>
|