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后台前端（五）

相关推荐
fruge6 分钟前
前端三驾马车（HTML/CSS/JS）核心概念深度解析
前端·css·html
百锦再9 分钟前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
刘一说13 分钟前
Spring Boot 启动慢？启动过程深度解析与优化策略
java·spring boot·后端
烛阴15 分钟前
Lua 模块的完整入门指南
前端·lua
壹佰大多21 分钟前
【spring如何扫描一个路径下被注解修饰的类】
java·后端·spring
百锦再27 分钟前
对前后端分离与前后端不分离（通常指服务端渲染）的架构进行全方位的对比分析
java·开发语言·python·架构·eclipse·php·maven
DokiDoki之父43 分钟前
Spring—注解开发
java·后端·spring
浪里行舟1 小时前
国产OCR双雄对决？PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
CodeCraft Studio1 小时前
【能源与流程工业案例】KBC借助TeeChart 打造工业级数据可视化平台
java·信息可视化·.net·能源·teechart·工业可视化·工业图表
摇滚侠1 小时前
Spring Boot 3零基础教程，WEB 开发 默认页签图标 Favicon 笔记29
java·spring boot·笔记
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南082025软件测试面试八股文（含答案+文档）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10Labelme从安装到标注：零基础完整指南