自存
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="queueList"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column align="center" label="队列编号" width="200">
<template slot-scope="scope">
{{ scope.row.id }}
</template>
</el-table-column>
<el-table-column label="队列名称" align="center">
<template slot-scope="scope">
{{ scope.row.queueName }}
</template>
</el-table-column>
<el-table-column label="队列人数" width="150" align="center">
<template slot-scope="scope">
{{ scope.row.totalPeople }}/{{ scope.row.maxPeople }}
</template>
</el-table-column>
<el-table-column
class-name="status-col"
label="队列状态"
width="110"
align="center"
>
<template slot-scope="scope">
<el-tag
:type="scope.row.queueListStatus === 0 ? 'success' : 'danger'"
>
{{ scope.row.queueListStatus === 0 ? "开启" : "关闭" }}
</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
prop="created_at"
label="开始时间"
width="200"
>
<template slot-scope="scope">
<i class="el-icon-time" />
<span>{{ formatTime(scope.row.startTime) }}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="created_at"
label="结束时间"
width="200"
>
<template slot-scope="scope">
<i class="el-icon-time" />
<span>{{ formatTime(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!--表格分页-->
<el-dialog title="编辑" :visible.sync="editDialogVisible" width="30%">
<el-form ref="editForm" :model="editForm" label-width="150px">
<el-form-item label="队列名称" prop="name">
<el-input v-model="editForm.queueName"></el-input>
</el-form-item>
<el-form-item label="队列最大人数(人)" prop="name">
<el-input-number
:controls="false"
v-model="editForm.maxPeople"
:min="0"
:max="100"
:precision="0"
></el-input-number>
</el-form-item>
<!-- 其他表单项 -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveEdit">保存</el-button>
</span>
</el-dialog>
<el-dialog
title="确认删除"
:visible.sync="deleteConfirmVisible"
width="30%"
>
<span>确定要删除吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteItem">确定</el-button>
<el-button @click="deleteConfirmVisible = false">取消</el-button>
</span>
</el-dialog>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { getList,editList ,delList} from "@/api/table";
export default {
data() {
return {
editDialogVisible: false,
deleteConfirmVisible: false,
editForm: {
id: "",
queueName: "",
maxPeople: "",
},
editingIndex: null,
deletingIndex: null,
currentPage: 1, //当前页
totalRow: 0, //总页数
total: 0, //总条数
pageSize: 10, //当前显示条数
queueList: [],
listLoading: true,
};
},
created() {
this.fetchData();
},
methods: {
handleEdit(index, row) {
this.editingIndex = index;
this.editForm = { ...row };
this.editDialogVisible = true;
},
handleDelete(index, row) {
this.deletingIndex = index;
this.deleteConfirmVisible = true;
},
saveEdit() {
editList(this.editForm).then((response) => {
this.editDialogVisible = false;
this.fetchData()
});
},
deleteItem() {
// 删除逻辑
console.log("删除项", this.queueList[this.deletingIndex]);
this.queueList.splice(this.deletingIndex, 1);
delList(this.queueList[this.deletingIndex]).then((response) => {
this.deleteConfirmVisible = false;
this.fetchData()
});
},
//页数变换
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
},
//当前页变换
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData();
},
current_change(currentPage) {
this.currentPage = currentPage;
},
formatTime(timeString) {
const date = new Date(timeString);
// 格式化日期时间,例如:2024-02-28 19:42:21
return `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
.getHours()
.toString()
.padStart(2, "0")}:${date
.getMinutes()
.toString()
.padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
},
fetchData() {
const data = {
current: 1,
pageSize: this.pageSize,
sortField: "",
sortOrder: "",
id: "",
shopId: "",
queueName: "",
startTime: "",
endTime: "",
totalPeople: "",
maxPeople: "",
queueListStatus: "",
};
this.listLoading = true;
getList(data).then((response) => {
this.listLoading = false;
this.queueList = response.data.records;
console.log(response.data.pages);
this.totalRow = parseInt(response.data.pages);
this.total = parseInt(response.data.total);
});
},
},
};
</script>