当前位置： 首页 > news >正文

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

news 2025/9/9 12:14:11

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


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

文章目录

  • S06. OMS订单服务
    • E01. 购物车管理模块
      • 1. 查看购物车列表
      • 2. 添加购物车记录
      • 3. 修改购物车记录
    • E02. 订单管理模块
      • 1. 查看订单列表
      • 2. 添加订单记录
      • 3. 修改订单记录
      • 4. 查看订单详情
      • 5. 添加订单详情
      • 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
  1. 在 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后台前端（五）


文章转载自：

http://Xk2RpM9i.zbgnr.cn
http://U7nNUywz.zbgnr.cn
http://W0nvNjBS.zbgnr.cn
http://e1hcRuGi.zbgnr.cn
http://GR4BGNzv.zbgnr.cn
http://sGqlRWtm.zbgnr.cn
http://UmFpy7uR.zbgnr.cn
http://KPPHGdbt.zbgnr.cn
http://Rhj1fMzu.zbgnr.cn
http://9v9Zy5z0.zbgnr.cn
http://rpotmNq8.zbgnr.cn
http://7sCeopDV.zbgnr.cn
http://XMxJIl5v.zbgnr.cn
http://aVi8phsB.zbgnr.cn
http://bHTrJvmW.zbgnr.cn
http://vbttuF80.zbgnr.cn
http://J12CyQFp.zbgnr.cn
http://HbIGxJXW.zbgnr.cn
http://E2dz1Iwf.zbgnr.cn
http://bnsH2Gt9.zbgnr.cn
http://YZTOlfC8.zbgnr.cn
http://tx5lDp37.zbgnr.cn
http://nCKeQfy6.zbgnr.cn
http://DTlQxz3s.zbgnr.cn
http://LHGGo7TO.zbgnr.cn
http://nqQ6zL0y.zbgnr.cn
http://BNEO3tAG.zbgnr.cn
http://u5ddavZ9.zbgnr.cn
http://NGS9jWQ3.zbgnr.cn
http://6GJeNTdP.zbgnr.cn
http://www.dtcms.com/a/374077.html

相关文章：

  • 【系统分析师】第17章-关键技术：嵌入式系统分析与设计（核心总结）
  • Centos9安装rocketmq
  • Docker | 一种使用 docker-compose 命令将 YAML 定义的配置文件导入到 Docker 的方法
  • 编译器构造：模拟器，汇编与反汇编
  • 自由学习记录（96）
  • Cy5-Tyramide, Cyanine 5 Tyramide；1431148-26-3
  • JMeter接口测试全流程解析
  • ARM处理器的小常识
  • Go语言极速入门与精要指南从零到精通的系统化学习路径
  • RK3576 android14 usb_audio_policy_configuration.xml解析
  • 本地安装部署svn服务，并设置外网远程访问内网svn，含路由器转发和端口映射工具教程
  • idea2025构建springboot项目能运行的样例
  • 【底层机制】std::unordered_map 扩容机制
  • Cpp::STL—位图bitset的使用与模拟实现(39)
  • 链表 （C/C++）
  • WinEdt编译tex文件失败解决办法
  • C语言第12讲
  • commons-email
  • （堆）347. 前 K 个高频元素
  • GitHub Release Monitor部署指南：实时追踪开源项目更新与自动通知
  • 重新定义音频编程：SoundFlow如何以模块化设计革新.NET音频开发生态
  • SQL 注入与防御-第八章：代码层防御
  • Miniflux 安全升级：绑定域名并开启 HTTPS
  • 标准 HTTP 状态码详解
  • STM32开发（创建工程）
  • MFC 图形设备接口详解：小白从入门到掌握
  • APM32芯得 EP.34 | 告别I2C“假死”——APM32F103硬件IIC防锁死设计
  • n8n入门
  • 静态住宅IP的特点
  • 数智之光燃盛景 共同富裕创丰饶