010GMClient/src/components/player/msaInfo/index.vue

<template>
    <div class="msaContainer">
        <!-- 搜索框 -->
        <el-input v-model="search" placeholder="输入关键字" :maxlength="20" />
        <el-select v-model="msaTyp" placeholder="关卡类型" @change="tableData" class="searchButton">
            <el-option v-for="option in msaOptions" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
        </el-select>
        <el-button class="searchButton" @click="tableData()" type="primary">搜索</el-button>
        <el-button class="addButton" @click="showModal = true" type="primary">添加关卡</el-button>
    </div>


    <el-table :data="tableData()" class="table-container" :border="true">
        <el-table-column prop="id" label="ID" class="centered-content" align="center" />
        <el-table-column prop="msIc" label="关卡通过" class="centered-content" align="center">
            <template #default="scope">
                <span v-if="scope.row.msIc === true">通关</span>
                <span v-else>未通关</span>
            </template>
        </el-table-column>
        <el-table-column prop="msLc" label="关卡生命次数" class="centered-content" align="center" />
        <el-table-column prop="sty" label="关卡类型" class="centered-content" align="center">
            <template #default="scope">
                <span v-if="scope.row.sty === 1">主线关卡</span>
                <span v-else-if="scope.row.sty === 2">支线关卡</span>
                <span v-else-if="scope.row.sty === 10">藏宝图</span>
                <span v-else-if="scope.row.sty === 11">RogueLike</span>
                <span v-else>支线关卡</span>
            </template>
        </el-table-column>
        <el-table-column prop="msi" label="关卡道具" class="centered-content" align="center">
            <template #default="scope">
                <span v-if="scope.column.property === 'msi'">
                    {{ JSON.stringify(scope.row[scope.column.property]) }}
                </span>
                <span v-else>{{ scope.row[scope.column.property] }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center">
            <template #default="scope" class="con">
                <el-button @click="completeMsa(scope.row)" type="success" :icon="Check" class="button-container"
                    @mouseenter="showText" @mouseleave="hideText">
                    <i class="ic, resultPropson"></i>
                    <span class="text">完成关卡</span>
                </el-button>
                <el-button @click="resetMsa(scope.row)" @mouseenter="showText" @mouseleave="hideText" type="primary"
                    :icon="Refresh" class="button-container">
                    <i class="icon"></i>
                    <span class="text">重置关卡</span>
                </el-button>
                <el-button @click="delMsa(scope.row)" type="danger" :icon="Delete" class="button-container"
                    @mouseenter="showText" @mouseleave="hideText">
                    <i class="ic, resultPropson"></i>
                    <span class="text">删除关卡</span>
                </el-button>
            </template>

        </el-table-column>
    </el-table>

    <el-pagination style="margin: auto;" class="pagination-container" background layout="prev, pager, next ,total,sizes"
        :total="state.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />

    <!-- 模态框 -->
    <el-dialog title="添加关卡" v-model="showModal" @close="closeModal" width="350px">
        <el-form-item label="关卡ID">
            <el-input v-model="msaId" placeholder="输入关卡ID" :maxlength="5"
                style="width: 200px;position: relative; left: 41.219px;" />

        </el-form-item>

        <span slot="footer" class="dialog-footer" style="position: absolute; right: 20px; bottom: 10px;">
            <el-button type="primary" @click="addUsa">保存</el-button>
            <el-button @click="closeModal">关闭</el-button>
        </span>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus';
import { reactive, ref, toRefs, defineComponent, defineEmits, computed } from 'vue'
import { Edit, Check, Close, Delete, Refresh } from '@element-plus/icons-vue'
import playerApi from '@/api/player'

const props = defineProps({
    msa: Array,
    ruleForm: Object,
    callback: {
        type: Function,
        required: true
    },
    callback1: {
        type: Function,
        required: true
    }
});

const showModal = ref<Boolean>(false);
const msaTyp = ref(0);
const msaOptions = [{
    'label': "未选择",
    'value': 0
}, {
    'label': "主线关卡",
    'value': 1
}, {
    'label': "支线关卡",
    'value': 2

},{
    'label': "藏宝图",
    'value': 10

},{
    'label': "Rogue",
    'value': 11

}];
const search = ref("");

const msaId = ref("");

const state = reactive({
    page: 1,
    limit: 10,
    total: props.msa.length
});



const tableData = () => {    
    let msa: any = [];
    let checkTyp = msaTyp.value;
    if (search.value == "" && checkTyp == 0) {
        state.total = props.msa.length;
        msa = props.msa;
    } else if (search.value == "" && checkTyp != 0) {
        const regex = new RegExp(`^${checkTyp}$`, 'i');
        msa = props.msa.filter(
            (item: { id: string, sty: string }, index) => {
                return regex.test(item.sty);
            }
        );
        state.total = msa.length;
    } else if (search.value != "" && checkTyp == 0) {
        const regex = new RegExp(search.value, 'i');
        msa = props.msa.filter(
            (item: { id: string, sty: string }, index) => {
                return regex.test(item.id);
            }
        );
        state.total = msa.length;
    } else {
        const regex = new RegExp(search.value, 'i');
        msa = props.msa.filter(
            (item: { id: string, sty: string }, index) => {
                return regex.test(item.id) && (item.sty == checkTyp + "");
            }
        );
        state.total = msa.length;

    }

    return msa.filter(
        (item, index) =>
            index < state.page * state.limit &&
            index >= state.limit * (state.page - 1)
    );
};

const showText = (event) => {
    const button = event.target;
    const text = button.querySelector('.text');
    text.style.display = 'block';
}

const hideText = (event) => {
    const button = event.target;
    const text = button.querySelector('.text');
    text.style.display = 'none';
}


const closeModal = () => {
    msaId.value = null
    showModal.value = false;
}

const addUsa = () => {
    let uhs = msaId.value;
    if (uhs != "" || uhs != null) {
        let data = {
            playerId: props.ruleForm.id,
            uhs: uhs,
            srvId:props.ruleForm.gId
        }

        playerApi.addMsa(data).then((resp) => {
            let data = resp.data.result;
            props.callback(data);
        });

        ElMessage({
            message: "添加成功",
            type: 'success',
            duration: 3000
        });

        msaId.value = null
        showModal.value = false;
    }
}

// 完成关卡
const completeMsa = (row: any) => {
    ElMessageBox.confirm('确定要完成该关卡吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            msaId: row.id,
            srvId:props.ruleForm.gId
        }

        let resp = playerApi.completeMsa(data);
        props.callback1(row);
        ElMessage({
            message: "完成关卡成功",
            type: 'success',
            duration: 3000
        });
        // let index = props.msa.indexOf(row);
        // props.msa.splice(index, 1);
    }).catch(() => { });
}

// 分页
// 重置关卡
const resetMsa = (row: any) => {
    ElMessageBox.confirm('确定要重置该关卡吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            uhs: row.id,
            srvId:props.ruleForm.gId
        }

        let resp = playerApi.resetMsa(data);
        props.callback1(row);
        ElMessage({
            message: "重置成功",
            type: 'success',
            duration: 3000
        });
        // let index = props.msa.indexOf(row);
        // props.msa.splice(index, 1);
    }).catch(() => { });
}

// 删除关卡
const delMsa = (row: any) => {
    ElMessageBox.confirm('确定要删除该关卡吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            index: row.id,
            srvId:props.ruleForm.gId
        }

        let resp = playerApi.delMsa(data);

        ElMessage({
            message: "删除成功",
            type: 'success',
            duration: 3000
        });
        let index = props.msa.indexOf(row);
        props.msa.splice(index, 1);
    }).catch(() => { });
}

const handleCurrentChange = (e) => {
    state.page = e;
};

const handleSizeChange = (e) => {
    state.limit = e;
};

</script>

<style>
.con {
    display: flex;
    align-items: center;
}

.button-container {
    position: relative;
    left: 10px;
    transform: translateY(1%);
    border-radius: 50%;
    width: 30px;
    height: 28px;
}

.input-container {
    display: flex;
    align-items: center;
}

.addButton {
    position: absolute;
    right: 5%;
}

.searchButton {
    margin-right: 10px;
    margin-left: 10px;
    /* 调整搜索按钮的右侧间距 */
}


.button-container:hover {
    border-radius: 10px;
    width: 100px;
}

.button-container el-button {
    margin-right: 10px;
}

.button-container el-button:last-child {
    margin-right: 0;
}

.msaContainer {
    display: flex;
    align-items: center;
    width: 400px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* 设置向下间距为 10 像素 */
}

.edit-button {
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
}

.table-container {
    text-alugn: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.centered-content {
    text-align: center;
}

.text {
    display: none;
}
</style>