JP4-7-MyLesson后台前端（五）

周航宇JoeZhou2025-09-09 18:03

Java道经 - 项目 - MyLesson - 后台前端（五）

传送门：JP4-7-MyLesson后台前端（一）

传送门：JP4-7-MyLesson后台前端（二）

传送门：JP4-7-MyLesson后台前端（三）

传送门：JP4-7-MyLesson后台前端（四）

传送门：JP4-7-MyLesson后台前端（五）

文章目录

  • [S06. OMS订单服务](#S06. OMS订单服务)
    • [E01. 购物车管理模块](#E01. 购物车管理模块)
      • [1. 查看购物车列表](#1. 查看购物车列表)
      • [2. 添加购物车记录](#2. 添加购物车记录)
      • [3. 修改购物车记录](#3. 修改购物车记录)
    • [E02. 订单管理模块](#E02. 订单管理模块)
      • [1. 查看订单列表](#1. 查看订单列表)
      • [2. 添加订单记录](#2. 添加订单记录)
      • [3. 修改订单记录](#3. 修改订单记录)
      • [4. 查看订单详情](#4. 查看订单详情)
      • [5. 添加订单详情](#5. 添加订单详情)
      • [6. 修改订单详情](#6. 修改订单详情)

S06. OMS订单服务

武技：搭建起始文件环境和对应的路由代码。

  1. 创建全部相关 Vue 页面，结构如下：

    |__ views
    |__ oms
    |__ cart
    |__ Cart.vue
    |__ CartInsert.vue
    |__ CartUpdate.vue
    |__ order
    |__ Order.vue
    |__ OrderInsert.vue
    |__ OrderUpdate.vue
    |__ detail
    |__ OrderDetail.vue
    |__ OrderDetailInsert.vue
    |__ OrderDetailUpdate.vue

  2. 在 router/index.js 文件中开发全部相关页面路由配置：

javascript 复制代码 
import Cart from "../views/oms/cart/Cart.vue";
import CartInsert from "../views/oms/cart/CartInsert.vue";
import CartUpdate from "../views/oms/cart/CartUpdate.vue";
import Order from "../views/oms/order/Order.vue";
import OrderInsert from "../views/oms/order/OrderInsert.vue";
import OrderUpdate from "../views/oms/order/OrderUpdate.vue";
import OrderDetail from "../views/oms/order/detail/OrderDetail.vue";
import OrderDetailInsert from "../views/oms/order/detail/OrderDetailInsert.vue";
import OrderDetailUpdate from "../views/oms/order/detail/OrderDetailUpdate.vue";

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/', name: 'Login', component: Login},
        {
            path: '/Main', name: 'Main', component: Main,
            redirect: '/Dashboard',
            children: [
                
				...
				
				{path: '/Cart', name: 'Cart', component: Cart},
	            {path: '/CartInsert', name: 'CartInsert', component: CartInsert},
	            {path: '/CartUpdate', name: 'CartUpdate', component: CartUpdate},
	            {path: '/Order', name: 'Order', component: Order},
	            {path: '/OrderInsert', name: 'OrderInsert', component: OrderInsert},
	            {path: '/OrderUpdate', name: 'OrderUpdate', component: OrderUpdate},
	            {path: '/OrderDetail', name: 'OrderDetail', component: OrderDetail},
	            {path: '/OrderDetailInsert', name: 'OrderDetailInsert', component: OrderDetailInsert},
	            {path: '/OrderDetailUpdate', name: 'OrderDetailUpdate', component: OrderDetailUpdate},
            ]
        }
    ]
});

E01. 购物车管理模块

1. 查看购物车列表

心法：查看购物车列表页面

武技：开发查看购物车列表页面 views/oms/cart/Cart.vue

html 复制代码 
<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, pageApi} from "../../../api/index.js";
import {myPage} from "../../../request/index.js";
import {isNotEmpty, isNotNull} from "../../../util/index.js";
import {MINIO_COURSE_COVER} from "../../../const/index.js";

// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'ShoppingCart', label: '购物车列表'},
];
// 数据头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '按用户账号搜索', callback: pageByUsername},
  {type: 'ipt', span: 5, placeholder: '按课程标题搜索', callback: pageByCourseTitle},
];
// 表格列
const columns = [
  {label: '用户', prop: 'username'},
  {label: '课程', prop: 'courseTitle'},
  {label: '课程封面', prop: 'courseCover', type: 'img', minio: MINIO_COURSE_COVER},
  {label: '课程价格', prop: 'coursePrice', suffix: ' 元'},
];
// 表格数据 + 分页数据 + 用户账号 + 课程标题
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});
let username = ref();
let courseTitle = ref();

/**
 * 分页查询
 *
 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。
 * 2. 附加分页查询条件，如标题等。
 * 3. 异步发送分页查询请求。
 *
 * @param pageNum 当前第几页，默认 1
 * @param pageSize 每页多少条，默认 5
 */
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    api: pageApi,
    args: {module: 'cart'},
    params: {pageNum, pageSize},
    records, pageInfo,
  }
  if (isNotEmpty(username.value)) config['params']['username'] = username.value;
  if (isNotEmpty(courseTitle.value)) config['params']['courseTitle'] = courseTitle.value;
  await myPage(config);
}

/* ==================== 搜索用户账号 ==================== */

/**
 * 按用户账号查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageByUsername(val) {
  if (isNotNull(val) || username.value) {
    username.value = val;
    page();
  }
}

/* ==================== 搜索课程标题 ==================== */

/**
 * 按课程标题模糊查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageByCourseTitle(val) {
  if (isNotNull(val) || courseTitle.value) {
    courseTitle.value = val;
    page();
  }
}
/* ==================== 加载函数 ==================== */

onMounted(() => page());

</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="cart"
            insert-page="/CartInsert"
            update-page="/CartUpdate"
            :records="records"
            :columns="columns"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :page-info="pageInfo"/>
</template>

<style scoped lang="scss"></style>

2. 添加购物车记录

心法：添加购物车记录页面

武技：开发添加购物车记录页面 views/oms/cart/CartInsert.vue

html 复制代码 
<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {onMounted, reactive, ref} from "vue";
import {insertApi, simpleListApi} from "../../../api/index.js";
import {getResponseData} from "../../../request/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";

// 全部用户下拉菜单选项
let userOptions = ref([]);
// 全部课程下拉菜单选项
let courseOptions = ref([]);
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'ShoppingCart', label: '购物车列表', url: '/Cart'},
  {icon: 'Plus', label: '添加购物车记录'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '用户', prop: 'fkUserId', type: 'select', required: true, options: userOptions, placeholder: '请选择用户'},
  {label: '课程', prop: 'fkCourseId', type: 'select', required: true, options: courseOptions, placeholder: '请选择课程'},
]);
let params = reactive({});
let rules = {};

/* ==================== 添加成功后 ==================== */

function insertSuccess() {
  ElMessage.success('添加成功！');
  setTimeout(() => router.push('/Cart'), 1000);
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  // 查询全部用户并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'user'}))).forEach(user => {
    userOptions.value.push({label: user['username'], value: user['id']});
  });
  // 查询全部课程并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'course'}))).forEach(course => {
    courseOptions.value.push({label: course['title'], value: course['id']});
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card v-if="userOptions.length > 0 && courseOptions.length > 0" class="cart-insert-card" header="添加购物车记录">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :params="params"
             :api="insertApi"
             :args="{module: 'cart'}"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.cart-insert-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 外边距
}
</style>

3. 修改购物车记录

心法：修改购物车记录页面

武技：开发修改购物车记录页面 views/oms/cart/CartUpdate.vue

html 复制代码 
<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {onMounted, reactive, ref} from "vue";
import {simpleListApi, updateApi} from "../../../api/index.js";
import {getResponseData} from "../../../request/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";

// 全部用户下拉菜单选项
let userOptions = ref([]);
// 全部课程下拉菜单选项
let courseOptions = ref([]);
// 获取当前购物车记录
let cart = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'ShoppingCart', label: '购物车列表', url: '/Cart'},
  {icon: 'Edit', label: '修改购物车记录'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '用户', prop: 'fkUserId', type: 'select', required: true, options: userOptions, placeholder: '请选择用户'},
  {label: '课程', prop: 'fkCourseId', type: 'select', required: true, options: courseOptions, placeholder: '请选择课程'},
]);
let params = reactive(cart);
let rules = {};

/* ==================== 修改成功后 ==================== */

function updateSuccess() {
  ElMessage.success('修改记录成功！');
  setTimeout(() => router.push('/Cart'), 1000);
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  // 查询全部用户并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'user'}))).forEach(user => {
    userOptions.value.push({label: user['username'], value: user['id']});
  });
  // 查询全部课程并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'course'}))).forEach(course => {
    courseOptions.value.push({label: course['title'], value: course['id']});
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card v-if="userOptions.length > 0 && courseOptions.length > 0" class="cart-update-card" header="修改购物车记录">
    <my-form type="update"
             :items="items"
             :rules="rules"
             :params="params"
             :api="updateApi"
             :args="{module: 'cart'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.cart-update-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 外边距
}
</style>

E02. 订单管理模块

1. 查看订单列表

心法：查看订单列表页面

武技：开发查看订单列表页面 views/oms/order/Order.vue

html 复制代码 
<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, pageApi} from "../../../api/index.js";
import {myPage} from "../../../request/index.js";
import {isNotEmpty, isNotNull, orderPayTypeFormat, orderStateFormat} from "../../../util/index.js";
import {ORDER_STATE_OPTIONS} from "../../../const/index.js";
import router from "../../../router/index.js";

// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'Goods', label: '订单列表'},
];
// 数据头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '按订单编号搜索', callback: pageBySn},
  {type: 'ipt', span: 5, placeholder: '按用户账号搜索', callback: pageByUsername},
  {type: 'opt', span: 5, placeholder: '按订单状态搜索', options: ORDER_STATE_OPTIONS, callback: pageByStatus},
];
// 表格列
const columns = [
  {label: '订单编号', prop: 'sn', type: 'tag', tagType: 'info', width: 200},
  {label: '订单总金额', prop: 'totalAmount', suffix: ' 元', width: 120},
  {label: '实际支付价格', prop: 'payAmount', suffix: ' 元', width: 120},
  {label: '支付方式', prop: 'payType', type: 'tag', format: orderPayTypeFormat},
  {label: '支付状态', prop: 'status', type: 'tag', tagType: 'primary', format: orderStateFormat},
  {label: '付款账号', prop: 'username'},
  {label: '描述', prop: 'info', type: 'card'},
];
// 按钮列
const buttons = [
  {label: '订单详情', type: 'success', callback: orderDetail},
];
// 表格数据 + 分页数据 + 订单编号 + 订单状态 + 付款账号
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});
let sn = ref();
let status = ref();
let username = ref();

/**
 * 分页查询
 *
 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。
 * 2. 附加分页查询条件，如标题等。
 * 3. 异步发送分页查询请求。
 *
 * @param pageNum 当前第几页，默认 1
 * @param pageSize 每页多少条，默认 5
 */
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    api: pageApi,
    args: {module: 'order'},
    params: {pageNum, pageSize},
    records, pageInfo,
  }
  if (isNotEmpty(sn.value)) config['params']['sn'] = sn.value;
  if (isNotEmpty(status.value)) config['params']['status'] = status.value;
  if (isNotEmpty(username.value)) config['params']['username'] = username.value;
  await myPage(config);
}

/* ==================== 搜索订单编号 ==================== */

/**
 * 按订单编号模糊查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageBySn(val) {
  if (isNotNull(val) || sn.value) {
    sn.value = val;
    page();
  }
}

/* ==================== 搜索订单状态 ==================== */

/**
 * 按订单状态查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageByStatus(val) {
  if (isNotNull(val) || status.value) {
    status.value = val;
    page();
  }
}

/* ==================== 搜索付款账号 ==================== */

/**
 * 按付款账号查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageByUsername(val) {
  if (isNotNull(val) || username.value) {
    username.value = val;
    page();
  }
}

/* ==================== 订单详情 ==================== */

function orderDetail(row) {
  sessionStorage.setItem('orderId', row['id']);
  sessionStorage.setItem('orderSn', row['sn'].toString());
  router.push('/OrderDetail');
}

/* ==================== 加载函数 ==================== */

onMounted(() => page());

</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="order"
            insert-page="/OrderInsert"
            update-page="/OrderUpdate"
            :records="records"
            :columns="columns"
            :buttons="buttons"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :page-info="pageInfo"/>
</template>

<style scoped lang="scss"></style>

2. 添加订单记录

心法：添加订单记录页面

武技：开发添加订单记录页面 views/oms/order/OrderInsert.vue

html 复制代码 
<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {onMounted, reactive, ref} from "vue";
import {insertApi, simpleListApi} from "../../../api/index.js";
import {getResponseData} from "../../../request/index.js";
import {ORDER_PAY_TYPE_OPTIONS, ORDER_STATE_OPTIONS, RULE} from "../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";

// 全部用户下拉菜单选项
let userOptions = ref([]);
// 全部优惠卷下拉菜单选项
let couponsOptions = ref([]);
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'Goods', label: '订单列表', url: '/Order'},
  {icon: 'Plus', label: '添加订单'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '下单账号', prop: 'fkUserId', type: 'select', options: userOptions, required: true, span: 12},
  {label: '订单总金额', prop: 'totalAmount', type: 'number', required: true, span: 12},
  {label: '实际支付金额', prop: 'payAmount', type: 'number', required: true, span: 12},
  {label: '订单状态', prop: 'status', type: 'select', options: ORDER_STATE_OPTIONS, required: true, span: 12},
  {label: '支付方式', prop: 'payType', type: 'select', options: ORDER_PAY_TYPE_OPTIONS, required: true, span: 12},
  {label: '优惠卷', prop: 'fkCouponsId', type: 'select', options: couponsOptions, span: 12},
  {label: '描述', prop: 'info', required: true, type: 'textarea'},
]);
let params = reactive({});
let rules = {info: RULE.INFO};

/* ==================== 添加成功后 ==================== */

function insertSuccess() {
  ElMessage.success('添加成功！');
  setTimeout(() => router.push('/Order'), 1000);
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  // 查询全部用户并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'user'}))).forEach(user => {
    userOptions.value.push({label: user['username'], value: user['id']});
  });
  // 查询全部优惠卷并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'coupons'}))).forEach(coupons => {
    couponsOptions.value.push({label: coupons['title'], value: coupons['id']});
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card v-if="userOptions.length > 0 && couponsOptions.length > 0" class="order-insert-card" header="添加订单">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :params="params"
             :api="insertApi"
             :args="{module: 'order'}"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.order-insert-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 外边距
}
</style>

3. 修改订单记录

心法：修改订单记录页面

武技：开发修改订单记录页面 views/oms/order/OrderUpdate.vue

html 复制代码 
<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {onMounted, reactive, ref} from "vue";
import {simpleListApi, updateApi} from "../../../api/index.js";
import {getResponseData} from "../../../request/index.js";
import {ElMessage} from "element-plus";
import {ORDER_PAY_TYPE_OPTIONS, ORDER_STATE_OPTIONS, RULE} from "../../../const/index.js";
import router from "../../../router/index.js";

// 全部优惠卷下拉菜单选项
let couponsOptions = ref([]);
// 获取当前订单记录
let order = JSON.parse(sessionStorage.getItem('row'));
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'Goods', label: '订单列表', url: '/Order'},
  {icon: 'Edit', label: '修改购物车记录'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '下单账号', prop: 'username', disabled: true},
  {label: '订单总金额', prop: 'totalAmount', type: 'number', required: true, span: 12},
  {label: '实际支付金额', prop: 'payAmount', type: 'number', required: true, span: 12},
  {label: '订单状态', prop: 'status', type: 'select', options: ORDER_STATE_OPTIONS, required: true, span: 12},
  {label: '支付方式', prop: 'payType', type: 'select', options: ORDER_PAY_TYPE_OPTIONS, required: true, span: 12},
  {label: '优惠卷', prop: 'fkCouponsId', type: 'select', options: couponsOptions},
  {label: '描述', prop: 'info', required: true, type: 'textarea'},
]);
let params = reactive(order);
let rules = {info: RULE.INFO};

/* ==================== 修改成功后 ==================== */

function updateSuccess() {
  ElMessage.success('修改记录成功！');
  setTimeout(() => router.push('/Order'), 1000);
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  // 查询全部优惠卷并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'coupons'}))).forEach(coupons => {
    couponsOptions.value.push({label: coupons['title'], value: coupons['id']});
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card v-if="couponsOptions.length > 0" class="order-update-card" header="修改订单记录">
    <my-form type="update"
             :items="items"
             :rules="rules"
             :params="params"
             :api="updateApi"
             :args="{module: 'order'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.order-update-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 外边距
}
</style>

4. 查看订单详情

心法：查看订单详情页面

武技：开发查看订单详情页面 views/oms/order/order-detail/OrderDetail.vue

html 复制代码 
<script setup>
import MyNav from "../../../../components/MyNav.vue";
import MyHead from "../../../../components/MyHead.vue";
import MyTable from "../../../../components/MyTable.vue";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, pageApi} from "../../../../api/index.js";
import {isNotEmpty, isNotNull} from "../../../../util/index.js";
import {myPage} from "../../../../request/index.js";
import {MINIO_COURSE_COVER} from "../../../../const/index.js";

// 所属订单ID和所属订单编号
let orderId = sessionStorage.getItem('orderId');
let orderSn = sessionStorage.getItem('orderSn');
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'Goods', label: '订单列表', url: '/Order'},
  {icon: 'Stopwatch', label: `《${orderSn}》订单详情`},
];
// 数据头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '按订单编号搜索', callback: pageBySn},
  {type: 'ipt', span: 5, placeholder: '按课程标题搜索', callback: pageLikeCourseTitle},
];
// 表格列
const columns = [
  {label: '订单编号', prop: 'sn', type: 'tag', tagType: 'info', width: 200},
  {label: '课程标题', prop: 'courseTitle'},
  {label: '课程封面', prop: 'courseCover', type: 'img', minio: MINIO_COURSE_COVER},
  {label: '课程原价', prop: 'coursePrice', suffix: '.00元'},
];
// 表格数据 + 分页数据 + 订单编号 + 课程标题
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});
let sn = ref();
let courseTitle = ref();

/* ==================== 分页查询 ==================== */

/**
 * 分页查询记录
 *
 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。
 * 2. 附加分页查询条件，如标题等。
 * 3. 异步发送分页查询请求。
 * 4. 将 seckillTitle 融入表格数据的每一项，方便进行展示。
 *
 * @param pageNum 当前第几页，默认 1
 * @param pageSize 每页多少条，默认 5
 */
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    api: pageApi,
    args: {module: 'orderDetail'},
    params: {pageNum, pageSize, orderId},
    records, pageInfo,
  }
  if (isNotEmpty(sn.value)) config['params']['sn'] = sn.value;
  if (isNotEmpty(courseTitle.value)) config['params']['courseTitle'] = courseTitle.value;
  await myPage(config);
}

/* ==================== 搜索订单编号 ==================== */

/**
 * 按订单编号模糊查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageBySn(val) {
  if (isNotNull(val) || sn.value) {
    sn.value = val;
    page();
  }
}

/* ==================== 搜索课程标题 ==================== */

/**
 * 按课程标题模糊查询
 *
 * 1. 将输入框中的值赋值给分页条件字段变量。
 * 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageLikeCourseTitle(val) {
  if (isNotNull(val) || courseTitle.value) {
    courseTitle.value = val;
    page();
  }
}

/* ==================== 加载函数 ==================== */

onMounted(() => page());

</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="orderDetail"
            insert-page="/OrderDetailInsert"
            update-page="/OrderDetailUpdate"
            :records="records"
            :columns="columns"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :page-info="pageInfo"/>
</template>

<style scoped lang="scss"></style>

5. 添加订单详情

心法：添加订单详情页面

武技：开发添加订单详情页面 views/oms/order/order-detail/OrderDetailInsert.vue

html 复制代码 
<script setup>
import MyNav from "../../../../components/MyNav.vue";
import MyForm from "../../../../components/MyForm.vue";
import {onMounted, reactive, ref} from "vue";
import {insertApi, simpleListApi} from "../../../../api/index.js";
import {getResponseData} from "../../../../request/index.js";
import {RULE} from "../../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../../router/index.js";

// 所属订单ID和所属订单编号
let orderId = sessionStorage.getItem('orderId');
let orderSn = sessionStorage.getItem('orderSn');
// 全部课程下拉菜单选项
let courseOptions = ref([]);
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'Goods', label: '订单列表', url: '/Order'},
  {icon: 'Stopwatch', label: `《${orderSn}》订单详情`, url: '/OrderDetail'},
  {icon: 'Plus', label: '添加订单课程'},
];

/* ==================== 添加表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '所属订单', prop: 'orderSn', disabled: true},
  {label: '课程', prop: 'fkCourseId', required: true, type: 'select', options: courseOptions, placeholder: '请选择课程'},
]);
let params = reactive({orderSn, 'fkOrderId': orderId});
let rules = {};

/* ==================== 添加成功后 ==================== */

function insertSuccess() {
  ElMessage.success('添加成功！');
  setTimeout(() => router.push('/OrderDetail'), 1000);
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  // 查询全部课程并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'course'}))).forEach(course => {
    courseOptions.value.push({label: course['title'] + '（￥' + course['price'] + '）', value: course['id']});
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card v-if="courseOptions.length > 0" class="order-detail-insert-card" header="添加订单课程">
    <my-form type="insert"
             :items="items"
             :rules="rules"
             :params="params"
             :api="insertApi"
             :args="{module: 'orderDetail'}"
             :callback="insertSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.order-detail-insert-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 外边距
}
</style>

6. 修改订单详情

心法：修改订单详情页面

武技：开发修改订单详情页面 views/oms/order/order-detail/OrderDetailUpdate.vue

html 复制代码 
<script setup>
import MyNav from "../../../../components/MyNav.vue";
import MyForm from "../../../../components/MyForm.vue";
import {onMounted, reactive, ref} from "vue";
import {simpleListApi, updateApi} from "../../../../api/index.js";
import {getResponseData} from "../../../../request/index.js";
import {RULE} from "../../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../../router/index.js";

// 获取当前订单详情记录
let orderDetail = JSON.parse(sessionStorage.getItem('row'));
// 所属订单ID和所属订单编号
let orderId = sessionStorage.getItem('orderId');
let orderSn = sessionStorage.getItem('orderSn');
// 全部课程下拉菜单选项
let courseOptions = ref([]);
// 路径导航
const navItems = [
  {icon: 'Files', label: '订单管理'},
  {icon: 'Goods', label: '订单列表', url: '/Order'},
  {icon: 'Stopwatch', label: `《${orderSn}》订单详情`, url: '/OrderDetail'},
  {icon: 'Edit', label: '修改订单详情'},
];

/* ==================== 修改表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '所属订单', prop: 'sn', disabled: true},
  {label: '课程', prop: 'fkCourseId', required: true, type: 'select', options: courseOptions, placeholder: '请选择课程'},
]);
let params = reactive(orderDetail);
let rules = {};

/* ==================== 修改成功后 ==================== */

function updateSuccess() {
  ElMessage.success('添加成功！');
  setTimeout(() => router.push('/OrderDetail'), 1000);
}

/* ==================== 加载函数 ==================== */

onMounted(async () => {
  // 查询全部课程并添加到下拉菜单选项中
  Object.values(getResponseData(await simpleListApi(null, {module: 'course'}))).forEach(course => {
    courseOptions.value.push({label: course['title'] + '（￥' + course['price'] + '）', value: course['id']});
  });
});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card v-if="courseOptions.length > 0" class="order-detail-update-card" header="修改订单详情信息">
    <my-form type="update"
             :items="items"
             :rules="rules"
             :params="params"
             :api="updateApi"
             :args="{module: 'orderDetail'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.order-detail-update-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 外边距
}
</style>

Java道经 - 项目 - MyLesson - 后台前端（五）

传送门：JP4-7-MyLesson后台前端（一）

传送门：JP4-7-MyLesson后台前端（二）

传送门：JP4-7-MyLesson后台前端（三）

传送门：JP4-7-MyLesson后台前端（四）

传送门：JP4-7-MyLesson后台前端（五）

相关推荐
代码匠心1 小时前
AI 自动编程：一句话设计高颜值博客
前端·ai·ai编程·claude
_AaronWong2 小时前
Electron 实现仿豆包划词取词功能：从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode2 小时前
I/O 多路复用：从浏览器到 Linux 内核
前端
用户5433081441942 小时前
AI 时代，前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo2 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦！快来抢先体验吧。
前端
恋猫de小郭3 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态，无需摄像头？
前端·人工智能·ai编程
哀木3 小时前
给自己整一个 claude code，解锁编程新姿势
前端
程序员鱼皮3 小时前
GitHub 关注突破 2w，我总结了 10 个涨星涨粉技巧！
前端·后端·github
UrbanJazzerati3 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉3 小时前
5分钟上手LangChain.js：用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆03OpenClaw 使用和管理 MCP 完全指南04AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot05Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw + 飞书（Feishu）环境搭建指南10本地部署 OpenClaw + DeepSeek-R1 完全指南