后台增删改查页面模板

自存

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