bookstore/AdminOrders.vue

<template>
  <div class="order-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
          v-model="searchQuery"
          placeholder="搜索订单（订单号、顾客姓名）"
          suffix-icon="el-icon-search"
          @input="handleSearch"
          clearable
          style="width: 300px;"
      />
      <el-button type="primary" @click="openAddDialog" style="margin-left: 10px;">新增订单</el-button>
    </div>

    <!-- 订单信息展示 -->
    <el-table :data="currentPageOrders" stripe style="width: 100%">
      <el-table-column label="订单号" prop="orderId"></el-table-column>
      <el-table-column label="顾客姓名" prop="customerName"></el-table-column>
      <el-table-column label="商品" prop="product"></el-table-column>
      <el-table-column label="数量" prop="quantity"></el-table-column>
      <el-table-column label="总金额" prop="totalAmount"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button @click="editOrder(row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteOrder(row)" type="text" size="small" class="delete-btn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-if="totalOrders > 10"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalOrders"
        layout="prev, pager, next, jumper"
        @current-change="handlePageChange"
    ></el-pagination>

    <!-- 增加订单的表单 -->
    <el-dialog :visible.sync="dialogVisible" title="新增/编辑订单" @close="resetForm">
      <el-form :model="newOrder" label-width="120px">
        <el-form-item label="订单号" prop="orderId" :rules="[{ required: true, message: '订单号不能为空', trigger: 'blur' }]">
          <el-input v-model="newOrder.orderId" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item label="顾客姓名" prop="customerName" :rules="[{ required: true, message: '顾客姓名不能为空', trigger: 'blur' }]">
          <el-input v-model="newOrder.customerName" placeholder="请输入顾客姓名"></el-input>
        </el-form-item>
        <el-form-item label="商品" prop="product" :rules="[{ required: true, message: '商品不能为空', trigger: 'blur' }]">
          <el-input v-model="newOrder.product" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity" :rules="[{ required: true, message: '数量不能为空', trigger: 'blur' }]">
          <el-input v-model="newOrder.quantity" placeholder="请输入数量" type="number"></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="totalAmount" :rules="[{ required: true, message: '总金额不能为空', trigger: 'blur' }]">
          <el-input v-model="newOrder.totalAmount" placeholder="请输入总金额" type="number"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" :rules="[{ required: true, message: '状态不能为空', trigger: 'blur' }]">
          <el-select v-model="newOrder.status" placeholder="请选择状态">
            <el-option label="待付款" value="待付款"></el-option>
            <el-option label="已发货" value="已发货"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="saveOrder">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*import { ref, onMounted, watch } from 'vue';*/
/*import { ElTable, ElTableColumn, ElButton, ElPagination, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, Message } from 'element-ui';*/

export default {
  /*components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElPagination,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
  }*/
  data() {
    return {
      orders: [...dummyOrders], // 全部订单数据
      currentPageOrders: [], // 当前页显示的订单数据
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示订单数量
      totalOrders: 0, // 订单总数
      searchQuery: '', // 搜索输入框的内容
      dialogVisible: false, // 是否显示新增订单的对话框
      newOrder: {
        orderId: '',
        customerName: '',
        product: '',
        quantity: 1,
        totalAmount: 0,
        status: '待付款',
      },
    };
  },
  created() {
    this.totalOrders = this.orders.length;
  },
  mounted() {
    this.fetchOrders();
  },
  watch: {
    searchQuery() {
      this.fetchOrders();
    },
  },
  methods: {
    fetchOrders() {
      const filteredOrders = this.orders.filter((order) => {
        return (
            order.orderId.includes(this.searchQuery) || order.customerName.includes(this.searchQuery)
        );
      });

      // 分页处理
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = this.currentPage * this.pageSize;
      this.currentPageOrders = filteredOrders.slice(startIndex, endIndex);
      this.totalOrders = filteredOrders.length;
    },
    handleSearch() {
      this.currentPage = 1; // 重置页码为第一页
      this.fetchOrders(); // 根据搜索查询更新数据
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchOrders();
    },
    openAddDialog() {
      this.resetForm();
      this.dialogVisible = true;
    },
    saveOrder() {
      if (!this.newOrder.orderId) {
        this.$message.error('订单号不能为空');
        return;
      }

      if (this.newOrder.orderId && !this.newOrder.orderId.startsWith('100')) {
        this.$message.error('订单号格式不正确');
        return;
      }

      // 新增订单
      if (!this.newOrder.id) {
        this.newOrder.id = this.orders.length + 1;
        this.orders.push(this.newOrder);
      } else {
        // 编辑订单
        const index = this.orders.findIndex((order) => order.orderId === this.newOrder.orderId);
        if (index !== -1) {
          this.orders[index] = { ...this.newOrder };
        }
      }

      this.$message.success('操作成功');
      this.dialogVisible = false;
      this.fetchOrders(); // 刷新订单列表
    },
    editOrder(order) {
      this.newOrder = { ...order };
      this.dialogVisible = true;
    },
    deleteOrder(order) {
      const index = this.orders.findIndex((o) => o.orderId === order.orderId);
      if (index !== -1) {
        this.orders.splice(index, 1);
      }

      this.$message.success('删除成功');
      this.fetchOrders(); // 刷新订单列表
    },
    resetForm() {
      this.newOrder = {
        orderId: '',
        customerName: '',
        product: '',
        quantity: 1,
        totalAmount: 0,
        status: '待付款',
      };
    },
  },
};

// 假数据
const dummyOrders = [
  { orderId: '1001', customerName: '张三', product: '书籍 A', quantity: 2, totalAmount: 40.00, status: '待付款' },
  { orderId: '1002', customerName: '李四', product: '书籍 B', quantity: 1, totalAmount: 25.00, status: '已发货' },
  { orderId: '1003', customerName: '王五', product: '书籍 C', quantity: 3, totalAmount: 54.00, status: '已完成' },
  { orderId: '1004', customerName: '赵六', product: '书籍 D', quantity: 1, totalAmount: 22.00, status: '已取消' },
  { orderId: '1005', customerName: '孙七', product: '书籍 E', quantity: 2, totalAmount: 60.00, status: '待付款' },
  { orderId: '1006', customerName: '周八', product: '书籍 F', quantity: 4, totalAmount: 60.00, status: '已发货' },
  { orderId: '1007', customerName: '吴九', product: '书籍 G', quantity: 1, totalAmount: 28.00, status: '已完成' },
  { orderId: '1008', customerName: '郑十', product: '书籍 H', quantity: 5, totalAmount: 85.00, status: '待付款' },
  { orderId: '1009', customerName: '钱一', product: '书籍 I', quantity: 1, totalAmount: 19.00, status: '已发货' },
  { orderId: '1010', customerName: '陈二', product: '书籍 J', quantity: 3, totalAmount: 72.00, status: '已完成' },
  { orderId: '1001', customerName: '张三', product: '书籍 A', quantity: 2, totalAmount: 40.00, status: '待付款' },
  { orderId: '1001', customerName: '张三', product: '书籍 A', quantity: 2, totalAmount: 40.00, status: '待付款' },
  { orderId: '1001', customerName: '张三', product: '书籍 A', quantity: 2, totalAmount: 40.00, status: '待付款' },
  { orderId: '1001', customerName: '张三', product: '书籍 A', quantity: 2, totalAmount: 40.00, status: '待付款' },
  { orderId: '1001', customerName: '张三', product: '书籍 A', quantity: 2, totalAmount: 40.00, status: '待付款' },

  // 更多订单...
];
</script>

<style scoped>
.order-container {
  margin: 20px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.delete-btn {
  color: red;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.delete-btn:hover {
  text-decoration: underline;
}

.dialog-footer {
  text-align: right;
}
</style>