ADD file via upload

8 months ago · 8b9d9012eb
parent df00bca905
commit 8b9d9012eb
1 changed files with 251 additions and 0 deletions
--- a/AdminOrders.vue
+++ b/AdminOrders.vue
@ -0,0 +1,251 @@
+<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>