课程管理页面的 index.vue：
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="课程名称" prop="courseName"> <el-input v-model="queryParams.courseName" placeholder="请输入课程名称" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="渠道名称" prop="channelId"> <el-select v-model="queryParams.channelId" placeholder="请选择渠道名称" clearable > <el-option v-for="channel in channelList" :key="channel.channelId" :label="channel.channelName" :value="channel.channelId" /> </el-select> </el-form-item> <el-form-item label="课程状态" prop="courseStatus"> <el-select v-model="queryParams.courseStatus" placeholder="请选择课程状态" clearable > <el-option v-for="dict in course_status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="课程类型" prop="courseType"> <el-select v-model="queryParams.courseType" placeholder="请选择课程类型" clearable > <el-option v-for="dict in course_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['tienchin:course:create']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['tienchin:course:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['tienchin:course:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['tienchin:course:export']" >导出 </el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="courseList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-column label="课程编号" align="center" prop="courseId" :show-overflow-tooltip="true"/> <el-table-column label="课程类型" align="center"> <template #default="scope"> <dict-tag :options="course_type" :value="scope.row.type"/> </template> </el-table-column> <el-table-column label="课程名称" align="center" :show-overflow-tooltip="true" prop="name"/> <el-table-column label="课程价格" align="center" :show-overflow-tooltip="true" prop="price"/> <el-table-column label="课程适用人群" align="center" width="120"> <template #default="scope"> <dict-tag :options="course_apply_to" :value="scope.row.applyTo"/> </template> </el-table-column> <el-table-column label="课程简介" :show-overflow-tooltip="true" width="180" align="center" prop="info"/> <el-table-column label="创建时间" align="center" prop="createTime"> <template #default="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150"> <template #default="scope"> <el-button type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['tienchin:course:edit']" >修改 </el-button> <el-button type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['tienchin:course:remove']" >删除 </el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改课程对话框 --> <el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-form ref="courseRef" :model="form" :rules="rules" label-width="100px"> <el-row> <el-col :span="12"> <el-form-item label="课程分类" prop="type"> <el-select v-model="form.type" placeholder="请选择课程分类" clearable style="width: 240px;" > <el-option v-for="ct in course_type" :key="ct.value" :label="ct.label" :value="parseInt(ct.value)" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="课程名称" prop="name"> <el-input v-model="form.name" placeholder="请输入课程名称"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="适用人群" prop="applyTo"> <el-select v-model="form.applyTo" placeholder="请选择适用人群" clearable style="width: 240px;" > <el-option v-for="cat in course_apply_to" :key="cat.value" :label="cat.label" :value="parseInt(cat.value)" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="课程价格" prop="price"> <el-input-number v-model="form.price" placeholder="课程价格" :precision="2" :step="100" :min="0" style="width: 100%;" /> </el-form-item> </el-col> </el-row> <el-form-item label="课程简介" prop="info"> <el-input v-model="form.info" type="textarea" placeholder="请输入课程简介"/> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="Course"> import { addCourse, listCourse, listChannel, getInfo, updateCourse, delCourse } from "@/api/tienchin/course"; const {proxy} = getCurrentInstance(); const { course_type, course_apply_to, } = proxy.useDict('course_type', 'course_apply_to'); const courseList = ref([]); const channelList = ref([]); const open = ref(false); const loading = ref(true); const showSearch = ref(true); const ids = ref([]); const single = ref(true); const multiple = ref(true); const total = ref(0); const title = ref(""); const data = reactive({ form: {}, queryParams: { pageNum: 1, pageSize: 10 }, rules: { price: [{required: true, message: "课程价格不能为空", trigger: "blur"}], name: [{required: true, message: "课程名称不能为空", trigger: "blur"}], info: [{required: true, message: "课程简介不能为空", trigger: "blur"}], applyTo: [{required: true, message: "适用人群不能为空", trigger: "blur"}], type: [{required: true, message: "课程类型不能为空", trigger: "blur"}] } }); const {queryParams, form, rules} = toRefs(data); /** 查询课程列表 */ function getList() { loading.value = true; listCourse(queryParams.value).then(response => { courseList.value = response.rows; total.value = response.total; loading.value = false; }); } /** 取消按钮 */ function cancel() { open.value = false; reset(); } /** 表单重置 */ function reset() { form.value = { applyTo: undefined, name: undefined, type: undefined, price: undefined, info: undefined }; proxy.resetForm("courseRef"); } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm("queryRef"); handleQuery(); } /** 多选框选中数据 */ function handleSelectionChange(selection) { ids.value = selection.map(item => item.courseId); single.value = selection.length !== 1; multiple.value = !selection.length; } /** 新增按钮操作 */ function handleAdd() { reset(); open.value = true; title.value = "添加课程"; } /** 修改按钮操作 */ function handleUpdate(row) { reset(); const courseId = row.courseId || ids.value; getInfo(courseId).then(response => { form.value = response.data; open.value = true; title.value = "修改课程"; }); } /** 提交按钮 */ function submitForm() { proxy.$refs["courseRef"].validate(valid => { if (valid) { if (form.value.courseId !== undefined) { updateCourse(form.value).then(response => { proxy.$modal.msgSuccess("修改成功"); open.value = false; getList(); }); } else { addCourse(form.value).then(response => { proxy.$modal.msgSuccess("新增成功"); open.value = false; getList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const courseIds = row.courseId || ids.value; proxy.$modal.confirm('是否确认删除课程编号为"' + courseIds + '"的数据项？').then(function () { return delCourse(courseIds); }).then(() => { getList(); proxy.$modal.msgSuccess("删除成功"); }).catch(() => { }); } /** 导出按钮操作 */ function handleExport() { proxy.download("tienchin/course/export", { ...queryParams.value }, `course_${new Date().getTime()}.xlsx`); } /** * 获取渠道列表 */ function handelChannelList() { listChannel().then(response => { channelList.value = response.data; }); } function formatDate(isoDateString) { // 创建一个新的日期对象 var date = new Date(isoDateString); // 提取年、月、日、小时、分钟和秒 var year = date.getFullYear(); var month = (date.getMonth() + 1).toString().padStart(2, "0"); var day = date.getDate().toString().padStart(2, "0"); var hours = date.getHours().toString().padStart(2, "0"); var minutes = date.getMinutes().toString().padStart(2, "0"); var seconds = date.getSeconds().toString().padStart(2, "0"); // 构建格式化后的日期时间字符串 var formattedDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; // 返回格式化后的日期时间字符串 return formattedDate; } getList(); </script>
