peko-admin-web/src/views/guildOperationManagement/guildAnchorManagement.vue

<template>
  <div class="box">
    <!-- 查询 -->
    <div class="inquire">
            <span>分区</span>
            <partition-select v-model:partition-id="formData.partitionId" v-model:delete-id="deleteId" />
        </div>
        <div class="inquire">
      <span>主播ID</span>
      <el-input v-model="formData.erbanNo"
                placeholder=""
                class="input"></el-input>
    </div>
    <div class="inquire">
      <span>公会ID</span>
      <el-input v-model="formData.guildId"
                placeholder=""
                class="input"></el-input>
    </div>
    <div class="inquire">
      <span>公会长ID</span>
      <el-input v-model="formData.ownerErbanNo"
                placeholder=""
                class="input"></el-input>
    </div>
    <div class="inquire">
            <span class="demonstration">状态</span>
            <el-select v-model="formData.enable" placeholder="请选择">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="无效" :value="0"></el-option>
          <el-option label="有效" :value="1"></el-option>
        </el-select>
        </div>
    <el-button class="primary"
               type="primary"
               @click="getData()">查询</el-button>
               <el-button style="" type="primary" @click="addDialog = true">新增</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="guildId" align="center" label="公会ID" />
            <el-table-column prop="guildName" align="center" label="公会昵称" />
            <el-table-column prop="guildOwnerErbanNo" align="center" label="公会长ID" />
            <el-table-column prop="guildOwnerRegionName" align="center" label="公会长所属国家" />
            <el-table-column prop="erbanNo" align="center" label="成员ID" />
            <el-table-column prop="nick" align="center" label="成员昵称" />
            <el-table-column prop="partitionName" align="center" label="成员分区" />
            <el-table-column prop="regionName" align="center" label="成员国家" />
            <el-table-column prop="enable" align="center" label="成员状态" >
                <template v-slot="scope">
                    {{scope.row.enable  ? '有效' : '无效'}}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" >
                <template v-slot="scope" >
                    <el-button class="primary" type="primary" @click="
                        detailPageFun(scope.row);
                    " size="default" v-if ="scope.row.enable">移除主播</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="adminName" align="center" label="操作人" />
            <el-table-column prop="enable" align="center" label="操作时间" >
                <template v-slot="scope">
                    {{scope.row.enable  ? convertTimestamp(scope.row.createTime) : convertTimestamp(scope.row.updateTime)}}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 10px" class="paginationClass" :current-page="formData.page"
            :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="新增" 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="addFormData.erbanNo" style="width: 50%" 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">公会Id</span>
                <el-input v-model="addFormData.guildId" 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, onMounted ,reactive} from 'vue'
import { ElMessage ,ElMessageBox} from "element-plus";
import PartitionSelect from "../common/partitionSelect.vue";
import {getGuildManagePageGuildMemberList,addGuildManagePageGuildMember,removeGuildManagePageGuildMember} from "@/api/noblemanNew/noblemanNew";
export default {
    name: "guildAnchorManagement",
  components: {PartitionSelect},
  setup() {
    const formData = reactive({
            partitionId: undefined,
            enable:-1,
            erbanNo:'',
            guildId:'',
            ownerErbanNo:'',
            pageNum:1,
            pageSize:10
        });
        const deleteId = ref(1)
        const addFormData = reactive({
            erbanNo: '',
            guildId: ''
        })
        const tableData = reactive({
            data: [],
            total: 0,
            loading: false,
        })
        const addDialog = ref(false)
        const getData = () => {
            tableData.loading = true;
            getGuildManagePageGuildMemberList(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 = () => {
            addGuildManagePageGuildMember(addFormData).then(res => {
                if (res.code == 200) {
                    ElMessage.success('添加成功');
                    addDialog.value = false
                    addFormData.erbanNo = ''
                    addFormData.guildId = ''
                    getData()
                } else {
                    ElMessage.error(res.message);
                    addDialog.value = false
                }
            })
        }
        // 移除
        const detailPageFun = (rows) => {
            ElMessageBox.confirm("确定要移出吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                removeGuildManagePageGuildMember({
                    guildMemberId: rows.guildMemberId
                }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: "success",
                            message: "操作成功!",
                        });
                        getData();
                    }else{
                        ElMessage({
                            type: "error",
                            message: res.message,
                        });
                    }
                })
            }).catch(() => {
                ElMessage({
                    type: "warning ",
                    message: "已取消",
                });
            });
        }
        const handleSizeChange = (val) => {
            formData.pageSize = val;
            getData();
        };
        const handleCurrentChange = (val) => {
            formData.pageNum = val;
            getData();
        };
       const convertTimestamp =(time)=> {
      let date = new Date(time);
      return date.format("yyyy-MM-dd hh:mm:ss");
    };
        return {
            formData,
            addFormData,
            tableData,
            addDialog,
            getData,
            handleSizeChange,
            handleCurrentChange,
            addFun,
            detailPageFun,
            deleteId,
            convertTimestamp

        }
  }
}
</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>