Files
peko-admin-web/src/views/nobleman/GuildInfo.vue
2024-12-09 14:05:05 +08:00

896 lines
26 KiB
Vue

<template>
<div class="box">
<!-- 查询 -->
<div class="inquire">
<span>ID</span>
<el-input
v-model="inquire.userId"
placeholder=""
class="input"
></el-input>
</div>
<div class="inquire">
<span>推荐人</span>
<el-input
v-model="inquire.referrer"
placeholder=""
class="input"
></el-input>
</div>
<!-- 时间选择器 -->
<!-- <div class="inquire">
<div class="block">
<span class="demonstration">日期</span>
<el-date-picker
v-model="inquire.time"
type="datetimerange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
</div> -->
<!-- 查询按钮 -->
<el-button class="primary" type="primary" @click="getData()"
>查询</el-button
>
<el-button class="primary" type="primary" @click="addDialog = true"
>添加</el-button
>
<el-button class="primary" type="primary" @click="exportInfoFun()"
>导出</el-button
>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column prop="referrer" align="center" label="推荐人" />
<el-table-column prop="ownerErbanNo" align="center" label="会长ID" />
<el-table-column prop="ownerNick" align="center" label="会长昵称" />
<el-table-column
prop="ownerPartitionName"
align="center"
label="会长分区"
/>
<el-table-column prop="name" align="center" label="公会昵称" />
<el-table-column align="center" prop="giftInfo" label="公会头像">
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.avatar"
:zoom-rate="1.1"
:preview-src-list="[scope.row.avatar]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template>
</el-table-column>
<el-table-column align="center" prop="giftInfo" label="公会背景图">
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.backgroundUrl"
:zoom-rate="1.1"
:preview-src-list="[scope.row.backgroundUrl]"
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="memberNum" align="center" label="成员数量" /> -->
<el-table-column align="center" label="成员数量/上限">
<template v-slot="scope">
<el-button
@click="memberDialogFun(scope.row)"
type="text"
size="default"
>{{ scope.row.memberNum }}/{{ scope.row.memberNumLimit }}</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="收款账户" width="300">
<template v-slot="scope">
<el-button
@click="payAccountDialogFun(scope.row)"
type="text"
size="medium "
>
payoneer:{{
scope.row.payAccount.payoneer
? scope.row.payAccount.payoneer
: "未添加"
}} </el-button
><br />
<el-button
@click="payAccountDialogFun(scope.row)"
type="text"
size="medium "
>
USDT-ERC20:{{
scope.row.payAccount.usdt ? scope.row.payAccount.usdt : "未添加"
}} </el-button
><br />
<el-button
@click="payAccountDialogFun(scope.row)"
type="text"
size="medium "
>
PayPal:{{
scope.row.payAccount.payPal
? scope.row.payAccount.payPal
: "未添加"
}} </el-button
><br />
</template>
</el-table-column>
<!-- <el-table-column prop="goldIncome" align="center" label="金币总收入" />
<el-table-column prop="diamondRemain" align="center" label="钻石总收入" /> -->
<el-table-column
prop="guildContact"
align="center"
label="公会联系方式"
/>
<el-table-column align="center" prop="idCard" label="公会长身份证件">
<!-- <template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.idCard"
:zoom-rate="1.1"
:preview-src-list="[scope.row.idCard]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template> -->
</el-table-column>
<el-table-column prop="inviteErbanNo" align="center" label="邀请人ID" />
<el-table-column prop="inviteCheck" align="center" label="邀请人证明">
<template v-slot="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.inviteCheck"
:zoom-rate="1.1"
:preview-src-list="[scope.row.inviteCheck]"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true"
/>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="300">
<template v-slot="scope">
<el-button
@click="ediClick(scope)"
class="primary"
type="primary"
size="default"
:disabled="!scope.row.enable"
>编辑</el-button
>
<el-button
@click="
delDialog = true;
delDialogData = scope.row;
"
:class="scope.row.enable ? 'danger' : 'info'"
:type="scope.row.enable ? 'danger' : 'info'"
size="default"
:disabled="!scope.row.enable"
>{{ scope.row.enable ? "移除" : "已解散" }}</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialog" title="新增" width="28%" center>
<div style="margin-bottom: 25px">
<span
style="display: inline-block; margin-right: 20px; width: 100px"
class="col-sm-2 control-label"
>会长ID</span
>
<el-input
v-model="resource.id"
style="width: 75%"
class="input"
></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="resource.referrer"
style="width: 75%"
class="input"
></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="resource.nick"
style="width: 75%"
class="input"
></el-input>
</div> -->
<template #footer>
<span class="dialog-footer">
<el-button @click="addDialog = false">取消</el-button>
<el-button type="primary" @click="add()"> 确认 </el-button>
</span>
</template>
</el-dialog>
<!-- 分页 -->
<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="editDialog" title="编辑" width="28%" center>
<!-- 会长ID -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>会长ID</span
>
<el-input
v-model="ediObj.leaderId"
style="width: 75%"
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="ediObj.leaderNick"
style="width: 75%"
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="ediObj.guildNick"
style="width: 75%"
class="input"
></el-input>
</div>
<!-- 公会头像 -->
<div class="selectBox selectBoxImg">
<span class="left" style="margin-right: 20px">公会头像</span>
<!-- action="/admin/tencent/cos/upload/file" -->
<el-upload
class="avatar-uploader"
action="/admin/tencent/cos/upload/file"
:show-file-list="false"
:on-success="handleAvatarSuccess2"
:before-upload="beforeAvatarUpload"
:on-error="handleAvatarError"
>
<img v-if="ediObj.imageUrl2" :src="ediObj.imageUrl2" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</div>
<!-- 公会背景图 -->
<div class="selectBox selectBoxImg">
<span class="left" style="margin-right: 20px">公会背景图</span>
<!-- action="/admin/tencent/cos/upload/file" -->
<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 v-if="ediObj.imageUrl1" :src="ediObj.imageUrl1" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</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="ediObj.guildNumber"
style="width: 75%"
class="input"
></el-input>
</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> 确定要解散该公会吗?</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>
<!-- 编辑收款账户弹窗 -->
<el-dialog
v-model="payAccountDialog"
:title="payAccountTitle"
width="28%"
center
>
<!-- Payoneer -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>Payoneer</span
>
<el-input
v-model="payAccount.payoneer"
style="width: 75%"
class="input"
></el-input>
</div>
<!-- USDT-ERC20 -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>USDT-ERC20</span
>
<el-input
v-model="payAccount.usdt"
style="width: 75%"
class="input"
></el-input>
</div>
<!-- PayPal -->
<div style="margin-bottom: 25px; margin-top: 10px">
<span
style="display: inline-block; margin-right: 20px"
class="col-sm-2 control-label"
>PayPal</span
>
<el-input
v-model="payAccount.payPal"
style="width: 75%"
class="input"
></el-input>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="payAccountDialog = false">取消</el-button>
<el-button type="primary" @click="payAccountClick()">
保存
</el-button>
</span>
</template>
</el-dialog>
<!-- 编辑成员弹窗 -->
<el-dialog v-model="memberDialog" :title="memberTitle" width="36%" center>
<!-- 新增用户 -->
<div class="inquire">
<span>平台ID</span>
<el-input
v-model="member.userID"
placeholder="请输入新增平台id"
class="input"
></el-input>
<el-button type="primary" @click="addMemberFun()"> 新增 </el-button>
</div>
<!-- 内嵌表格 -->
<el-table
v-loading="loading"
:data="member.tableData"
border
style="width: 100%; margin-top: 25px"
>
<el-table-column align="center" label="用户平台ID">
<template v-slot="scope">
{{ scope.row.erbanNo
}}{{
scope.row.roleType == 1
? "(会长)"
: scope.row.roleType == 2
? "(管理员)"
: ""
}}
{{ scope.row.enable == false ? "(已离开)" : "" }}
</template>
</el-table-column>
<el-table-column prop="nick" align="center" label="用户昵称" />
<el-table-column prop="createTime" align="center" label="加入时间" />
<el-table-column align="center" label="操作" width="300">
<template v-slot="scope">
<el-button
@click="setMemberFun(scope.row)"
:class="scope.row.roleType == 2 ? 'danger' : 'primary'"
:type="scope.row.roleType == 2 ? 'danger' : 'primary'"
size="default"
:disabled="scope.row.roleType == 1 ? true : false"
>{{
scope.row.roleType == 1
? "会长"
: scope.row.roleType == 2
? "取消管理员"
: "设为管理员"
}}</el-button
>
<el-button
@click="
memberRemoveObj = scope.row;
memberRemoveDialog = true;
"
class="danger"
type="danger"
size="default"
:disabled="scope.row.roleType == 1 ? true : false"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="memberDialog = false">
关闭
</el-button>
</span>
</template>
</el-dialog>
<!-- 二次确认删除弹窗 -->
<el-dialog v-model="memberRemoveDialog" title="提示" width="30%" center>
<span> 确定要删除该成员吗?</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="memberRemoveDialog = false">取消</el-button>
<el-button type="primary" @click="delmemberRemoveClick()">
确认
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import {
pageFamily,
exportInfo,
create,
update,
dismiss,
savePayAccount,
manageListFamilyMember,
addMember,
setManager,
removeMember,
} from "@/api/nobleman/nobleman";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
name: "GuildInfo",
data() {
return {
loading: false,
delDialog: false,
delDialogData: null,
//查询所需条件对象
inquire: {
userId: "",
referrer: "",
time: "",
},
//新增所需对象
resource: {
id: "",
nick: "",
referrer: "",
},
// 表格
tableData: [],
// 新增弹窗
addDialog: false,
// 分页
total: 10, //总页数
currentPage: 1, //页码
pageSize: 10, //条数
// 编辑弹窗
editDialog: false,
ediObj: {
leaderId: "",
leaderNick: "",
guildNick: "",
guildNumber: "",
id: "",
imageUrl1: "",
imageUrl2: "",
},
// 收款账户弹窗
payAccountDialog: false,
payAccountTitle: "(会长昵称【ID:0】)的收款账户",
payAccountNew: {},
payAccount: {
payoneer: "",
usdt: "",
payPal: "",
},
// 新增成员弹窗
memberDialog: false,
memberTitle: "【公会名称】成员信息",
memberNew: {},
member: {
userID: "",
tableData: [],
},
// 删除成员弹窗
memberRemoveDialog: false,
memberRemoveObj: {},
};
},
created() {
this.getData();
},
methods: {
// 查询接口
getData() {
this.loading = true;
let time = this.inquire.time;
let startTime = "";
let endTime = "";
if (time && time.length > 0) {
startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
}
pageFamily({
erbanNo: this.inquire.userId,
referrer: this.inquire.referrer,
familyName: this.inquire.nick,
// startDate: startTime,
// endDate: endTime,
pageNum: this.currentPage,
pageSize: this.pageSize,
}).then((res) => {
this.total = res.data.total;
this.tableData = res.data.rows;
this.loading = false;
});
},
// 打开成员信息弹窗
memberDialogFun(val) {
var than = this;
than.memberTitle = `${val.name}】成员信息`;
than.memberNew = val;
manageListFamilyMember({
familyId: val.id,
}).then((res) => {
this.member.tableData = res.data;
than.memberDialog = true;
});
},
// 二次确认删除成员
delmemberRemoveClick() {
removeMember({
familyMemberId: this.memberRemoveObj.familyMemberId,
}).then((res) => {
if (res.code == 200) {
ElMessage({
showClose: true,
message: "删除成功",
type: "success",
});
manageListFamilyMember({
familyId: this.memberNew.id,
}).then((res) => {
this.member.tableData = res.data;
});
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
this.memberRemoveDialog = false;
});
},
// 设置管理员
setMemberFun(val) {
setManager({
familyMemberId: val.familyMemberId,
status: val.roleType == 3 ? true : val.roleType == 2 ? false : null,
}).then((res) => {
if (res.code == 200) {
ElMessage({
showClose: true,
message: "设置成功!",
type: "success",
});
this.member.userID = "";
manageListFamilyMember({
familyId: this.memberNew.id,
}).then((res) => {
this.member.tableData = res.data;
});
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
});
},
// 新增成员
addMemberFun() {
addMember({
erbanNo: this.member.userID,
familyId: this.memberNew.id,
}).then((res) => {
if (res.code == 200) {
ElMessage({
showClose: true,
message: "保存成功!",
type: "success",
});
this.member.userID = "";
manageListFamilyMember({
familyId: this.memberNew.id,
}).then((res) => {
this.member.tableData = res.data;
});
} else {
ElMessage({
showClose: true,
message: "保存失败!",
type: "error",
});
}
});
},
// 打开收款账户弹窗
payAccountDialogFun(val) {
this.payAccountTitle = `(${val.ownerNick}【ID:${val.ownerErbanNo}】)的收款账户`;
this.payAccount.payoneer = val.payAccount.payoneer;
this.payAccount.usdt = val.payAccount.usdt;
this.payAccount.payPal = val.payAccount.payPal;
this.payAccountDialog = true;
this.payAccountNew = val;
},
// 保存收款账户
payAccountClick() {
savePayAccount({
id: this.payAccountNew.payAccount.familyId,
payPal: this.payAccount.payPal,
payoneer: this.payAccount.payoneer,
usdt: this.payAccount.usdt,
}).then((res) => {
if (res.code == 200) {
ElMessage({
showClose: true,
message: "保存成功!",
type: "success",
});
this.payAccountDialog = false;
this.getData();
} else {
ElMessage({
showClose: true,
message: "保存失败!",
type: "error",
});
}
});
},
// 导出
exportInfoFun() {
let time = this.inquire.time;
let startTime = "";
let endTime = "";
if (time && time.length > 0) {
startTime = dateFormat(this.inquire.time[0], "yyyy-MM-dd hh:mm:ss");
endTime = dateFormat(this.inquire.time[1], "yyyy-MM-dd hh:mm:ss");
}
exportInfo({
erbanNo: this.inquire.userId,
referrer: this.inquire.referrer,
familyName: this.inquire.nick,
// startDate: startTime,
// endDate: endTime,
}).then((res) => {});
},
// 添加
add() {
this.addDialog = false;
create({
erbanNo: this.resource.id,
referrer: this.resource.referrer,
}).then((res) => {
this.getData();
});
},
// 编辑按钮
ediClick(res) {
var obj = res.row;
this.ediObj.leaderId = obj.ownerErbanNo;
this.ediObj.leaderNick = obj.ownerNick;
this.ediObj.guildNick = obj.name;
this.ediObj.guildNumber = obj.memberNumLimit;
this.ediObj.id = obj.id;
this.ediObj.imageUrl1 = obj.backgroundUrl;
this.ediObj.imageUrl2 = obj.avatar;
this.editDialog = true;
},
// 二次确认弹窗
editDialogClick() {
console.log(this.ediObj);
update({
id: this.ediObj.id,
memberNumLimit: this.ediObj.guildNumber,
backgroundUrl: this.ediObj.imageUrl1,
avatar: this.ediObj.imageUrl2,
name: this.ediObj.guildNick,
}).then((res) => {
if (res.code == 200) {
ElMessage({
showClose: true,
message: res.message,
type: "success",
});
this.getData();
this.editDialog = false;
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
this.delDialog = false;
});
},
// 解散按钮
delClick() {
console.log(this.delDialogData.id);
var familyId = this.delDialogData.id;
dismiss({ familyId }).then((res) => {
console.log();
if (res.code == 200) {
this.getData();
ElMessage({
showClose: true,
message: "解散成功",
type: "success",
});
} else {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
}
this.delDialog = false;
});
},
beforeAvatarUpload() {
ElMessage({
showClose: true,
message: "上传中~",
type: "warning",
});
},
handleAvatarError() {
ElMessage({
showClose: true,
message: "上传失败!",
type: "error",
});
},
handleAvatarSuccess2(res, file) {
console.log(file);
// this.ediObj.imageUrl1 = URL.createObjectURL();
this.ediObj.imageUrl2 = file.response.data;
ElMessage({
showClose: true,
message: "上传成功!",
type: "success",
});
},
handleAvatarSuccess(res, file) {
console.log(file);
// this.ediObj.imageUrl1 = URL.createObjectURL();
this.ediObj.imageUrl1 = file.response.data;
ElMessage({
showClose: true,
message: "上传成功!",
type: "success",
});
},
// 分页导航
handleSizeChange() {
this.getData();
},
handleCurrentChange() {
this.getData();
},
},
};
</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;
}
}
.selectBox {
display: flex;
height: 35px;
line-height: 35px;
margin-bottom: 20px;
}
.selectBoxImg {
height: 150px;
}
</style>