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

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


传送门：JP4-7-MyLesson后台前端（一）
传送门：JP4-7-MyLesson后台前端（二）
传送门：JP4-7-MyLesson后台前端（三）
传送门：JP4-7-MyLesson后台前端（四）
传送门：JP4-7-MyLesson后台前端（五）

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 文件中开发全部相关页面路由配置：

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

<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

<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

<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

<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

<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

<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

<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

<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

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