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

<template>
    <div class="container">
        <!-- 搜索框 -->
        <el-input v-model="search" placeholder="输入关键字" :maxlength="20" />
        <el-button class="searchButton" @Click="tableData()" type="primary">搜索</el-button>

        <el-button class="addButton" @click="addItem()" type="primary">添加道具</el-button>
    </div>

    <el-table :data="tableData()" class="table-container" :border="true">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="bagTab" label="道具类型" align="center" />
        <el-table-column prop="name" label="道具名称" align="center" />
        <el-table-column prop="count" label="数量" align="center">
            <template #default="scope">
                <template v-if="!scope.row.editing">
                    <span>{{ scope.row.count }}</span>
                    <el-button @click="handlEditClick(scope.row)" type="primary" :icon="Edit" circle class="edit-button" />
                </template>
                <template v-else>
                    <div class="con">
                        <div class="input-container">
                            <el-input v-model="scope.row.count" placeholder="count" />
                        </div>
                        <div class="button-container">
                            <el-button @click="handleSaveClick(scope.row)" type="success" :icon="Check" circle />
                            <el-button @click="handleCancelClick(scope.row)" type="danger" :icon="Close" circle />
                        </div>
                    </div>
                </template>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <el-button @click="editItem(scope.row)" type="danger" :icon="Delete">删除道具</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="dialogTitle" v-model="showModal" @close="closeModal" width="350px">

        <el-form-item label="道具ID">
            <el-input v-model="itemId" placeholder="输入道具ID" :maxlength="5"
                style="width: 200px;position: relative; left: 41.219px;" />
        </el-form-item>
        <el-form-item label="道具数量">
            <el-input v-model="itemNum" placeholder="请输入道具数量" :maxlength="5"
                style="width: 200px;position: relative; left: 28px;" />
        </el-form-item>

        <span slot="footer" class="dialog-footer" style="position: absolute; right: 20px; bottom: 10px;">
            <el-button type="primary" @click="saveItem">保存</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 } from 'vue'
import { Edit, Check, Close, Delete } from '@element-plus/icons-vue'
import playerApi from '@/api/player'

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


let dialogTitle = ref<string>('');

const showModal = ref<Boolean>(false);
const itemId = ref("");
const itemNum = ref<Number>(1);
const search = ref("");

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

const tableData = () => {
    let its: any = [];
    if (search.value == "") {
        state.total = props.its.length;
        its = props.its;
    } else {
        const regex = new RegExp(search.value, 'i');
        its = props.its.filter(
            (item: { id: string, name: string }, index) => {
                return regex.test(item.id) || regex.test(item.name);
            }
        );
        state.total = its.length;

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

// 分页
// 删除道具
const editItem = (row: any) => {
    ElMessageBox.confirm('确定要删除该道具吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            itemId: row.id,
            itemNum: row.count
        }

        let resp = playerApi.delPlayerItem(data);

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

const addItem = () => {
    dialogTitle.value = "添加道具";
    showModal.value = true;
}

const closeModal = () => {
    itemId.value = null;
    itemNum.value = 1;
    showModal.value = false;
    dialogTitle.value = "添加图纸";
}

// 保存
const saveItem = () => {
    let data = {
        playerId: props.ruleForm.id,
        itemId: itemId.value,
        itemNum: itemNum.value
    }

    playerApi.addPlayerItem(data).then((resp) => {
        let data = resp.data.result;
        if (data === '道具添加失败') {
            ElMessage({
                message: "道具添加失败",
                type: 'error',
                duration: 3000
            });
        } else {
            props.callback(data)
        }
    });

    showModal.value = false;
}

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

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


// 道具修改
const handlEditClick = (row: any) => {
    row.editing = true;
};

const handleSaveClick = (row: any) => {
    // row.editing = false;

    ElMessageBox.confirm('确定要修改道具数量吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        row.editing = false;
        let data = {
            playerId: props.ruleForm.id,
            itemId: row.id,
            itemNum: row.count
        }

        let resp = playerApi.editPlayerItem(data);

        ElMessage({
            message: "修改成功",
            type: 'info',
            duration: 3000
        });
    }).catch(() => { });
};

const handleCancelClick = (row: any) => {
    row.editing = false;
};
</script>

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

.input-container {
    align-items: center;
    width: 200px;
}


.searchButton {
    margin-right: 10px;
}

.button-container {
    position: relative;
    left: 10px;
    transform: translateY(-8%);
}

.container {
    display: flex;
    align-items: center;
    width: 200px;
    margin-bottom: 20px;
}

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

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

.pagination-container {
    display: flex;
    justify-content: center;
}
</style>