5.4.4 机构名称
5.4.4.1 创建实体类Company
package com. zx. system. entity ;
import com. baomidou. mybatisplus. annotation. TableName ;
import lombok. AllArgsConstructor ;
import lombok. Data ;
import lombok. NoArgsConstructor ;
import lombok. ToString ;
import lombok. experimental. Accessors ;
import java. util. Date ;
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Accessors ( chain = true )
@TableName ( "tb_company" )
public class Company {
private Integer id;
private String name;
private String orgType;
private String phone;
private String linkname;
private String handPhotos;
private String address;
private String logo;
private String email;
private String promiseLetter;
private String trademarkPic;
private String intro;
private String briefIntro;
private String mainCategory;
private String identityPic;
private String workType;
private String businessPic;
private Date businessTerm;
private String businessRegistNo;
private String eduCertImg;
private String eduCertTerm;
private String eduCertNo;
private String approvalStatus;
private String approvalComment;
private String approvalPeople;
private Date approvalDate;
private Integer approvalNums;
private String remark;
private Date createDate;
private Date changeDate;
private Integer tenantId;
private String idCard;
private String teacherCertImg;
private String teacherCertNo;
private Integer status;
private String majorCertImg;
private String majorCertNo;
private String workExperience;
private String workResults;
private String title;
}
5.4.4.2 创建实体类CompanyMapper
package com. zx. system. mapper ;
import com. baomidou. mybatisplus. core. mapper. BaseMapper ;
import com. zx. system. entity. Company ;
import org. apache. ibatis. annotations. Mapper ;
@Mapper
public interface CompanyMapper extends BaseMapper < Company > {
}
5.4.4.3 创建实体类CompanyService
package com. zx. system. service ;
import com. baomidou. mybatisplus. core. conditions. query. QueryWrapper ;
import com. baomidou. mybatisplus. extension. service. impl. ServiceImpl ;
import com. zx. system. entity. Company ;
import com. zx. system. mapper. CompanyMapper ;
import org. springframework. beans. factory. annotation. Autowired ;
import org. springframework. stereotype. Service ;
import java. util. List ;
@Service
public class CompanyService extends ServiceImpl < CompanyMapper , Company > {
@Autowired
private CompanyMapper companyMapper;
public List < Company > selectAll ( ) {
QueryWrapper qw = new QueryWrapper ( ) ;
qw. select ( "id" , "name" , "org_type" , "phone" , "linkname" ) ;
qw. eq ( "status" , 1 ) ;
qw. orderByDesc ( "create_date" ) ;
return companyMapper. selectList ( qw) ;
}
}
5.4.4.4 创建实体类CompanyController
package com. zx. system. controller ;
import com. zx. system. entity. Company ;
import com. zx. system. service. CompanyService ;
import org. springframework. beans. factory. annotation. Autowired ;
import org. springframework. web. bind. annotation. CrossOrigin ;
import org. springframework. web. bind. annotation. GetMapping ;
import org. springframework. web. bind. annotation. RequestMapping ;
import org. springframework. web. bind. annotation. RestController ;
import java. util. List ;
@RestController
@CrossOrigin
@RequestMapping ( "/system/company" )
public class CompanyController {
@Autowired
private CompanyService companyService;
@GetMapping ( "/selectAll" )
public List < Company > selectAll ( ) {
return companyService. selectAll ( ) ;
}
}
5.4.4.5 后端测试
5.4.4.6 修改basic.js
import axios from '../axios.js'
const zx_basic = 'http://localhost:9999/basic'
export const AllCategory = async ( ) => {
const res = await axios. get ( zx_basic+ "/category/getTree" )
return res
}
export const Level1Category = async ( ) => {
const res = await axios. get ( zx_basic+ "/category/level1Category" )
return res
}
export const GetDict = async ( code ) => {
const res = await axios. get ( zx_basic+ "/dictionary/getDicItems/" + code)
return res
}
const zx_system = 'http://localhost:8888/system'
export const GetCompany = async ( ) => {
const res = await axios. get ( zx_system+ "/company/selectAll" )
return res
}
5.4.4.7 修改course.vue
< template>
< el-card shadow = " always" >
< h3> < el-icon> < ElementPlus /> </ el-icon> 课程管理</ h3>
< el-row style = " padding : 10px; " gutter = " 3" >
< el-col span = " 8" >
< el-button type = " primary" size = " small" @click = " toAdd" >
< el-icon> < CirclePlus /> </ el-icon> 新增
</ el-button>
< el-button v-if = " multipleSelection.length" type = " danger" size = " small" @click = " handlerMuchDel" > 删除多条</ el-button>
</ el-col>
< el-col span = " 16" >
< el-input size = " small" v-model = " searchName" placeholder = " 按课程名称搜索" >
< template #append > < el-icon> < Search/> </ el-icon> </ template>
</ el-input>
</ el-col>
</ el-row>
< el-table :data = " filterData" @selection-change = " handleSelectionChange" border >
< el-table-column prop = " id" type = " selection" width = " 55" > </ el-table-column>
< el-table-column prop = " planNum" label = " 计划数量" heder-align = " center" > </ el-table-column>
< el-table-column prop = " companyName" label = " 公司名称" heder-align = " center" > </ el-table-column>
< el-table-column prop = " name" label = " 课程名称" heder-align = " center" > </ el-table-column>
< el-table-column prop = " tags" label = " 课程标签" heder-align = " center" > </ el-table-column>
< el-table-column prop = " mtName" label = " 大分类名称" heder-align = " center" > </ el-table-column>
< el-table-column prop = " stName" label = " 小分类名称" heder-align = " center" > </ el-table-column>
< el-table-column prop = " grade" label = " 课程等级" heder-align = " center" > </ el-table-column>
< el-table-column prop = " teachmode" label = " 教学模式" heder-align = " center" > </ el-table-column>
< el-table-column prop = " auditStatus" label = " 审核状态" heder-align = " center" > </ el-table-column>
< el-table-column prop = " coursePubId" label = " 发布标识" heder-align = " center" > </ el-table-column>
< el-table-column prop = " price" label = " 课程单价" heder-align = " center" > </ el-table-column>
< el-table-column prop = " createDate" label = " 创建时间" :formatter = " formatDate" align = " center" />
< el-table-column prop = " auditDate" label = " 审核时间" :formatter = " formatDate" align = " center" />
< el-table-column label = " 操作" align = " center" >
< template #default = " scope" >
< el-button @click = " toEdit(scope.$index)" type = " success" size = " small" > < el-icon> < EditPen/> </ el-icon> 修改</ el-button>
< el-button @click = " handleDel(scope.row.id)" type = " danger" size = " small" > < el-icon> < Delete/> </ el-icon> 删除</ el-button>
< el-button @click = " handlePub(scope.row.id)" type = " danger" size = " small" > < el-icon> < Delete/> </ el-icon> 发布</ el-button>
< el-button @click = " handleDown(scope.row.id)" type = " danger" size = " small" > < el-icon> < Delete/> </ el-icon> 下架</ el-button>
</ template>
</ el-table-column>
</ el-table>
< div style = " " >
< el-pagination :current-page = " page.pageNum" :page-size = " page.pageSize" :page-sizes = " [5,10,50,100]"
layout = " total,sizes,prev,pager,next,jumper" :total = " page.total"
@size-change = " handleSizeChange" @current-change = " handleCurrentChange" >
</ el-pagination>
</ div>
</ el-card>
< el-dialog v-model = " dialogVisible" draggable >
< template #header >
< h4> < el-icon> < Brush/> </ el-icon> {
{dialogType==='add'?'新增':'修改'}}课程管理</ h4>
</ template>
< el-form :model = " form.data" label-position = " left" label-width = " 120px" >
< el-form-item label = " 机构名称" >
< el-select v-model = " form.data.companyId" placeholder = " 请选择" >
< el-option v-for = " item in companyOptions" :key = " item.id" :label = " item.name" :value = " item.id" > </ el-option>
</ el-select>
</ el-form-item>
< el-form-item label = " 课程名称" >
< el-input v-model = " form.data.name" show-word-limit maxlength = " 100" > </ el-input>
</ el-form-item>
< el-form-item label = " 适用人群" >
< el-input v-model = " form.data.users" type = " textarea"
show-word-limit maxlength = " 500" :autosize = " {minRows:2,maxRows:4}" > </ el-input>
</ el-form-item>
< el-form-item label = " 课程标签" >
< el-input v-model = " form.data.tags" > </ el-input>
</ el-form-item>
< el-form-item label = " 一级分类" >
< el-select v-model = " form.data.mt" placeholder = " 请选择" >
< el-option v-for = " item in mtOptions" :key = " item.id" :label = " item.name" :value = " item.id" > </ el-option>
</ el-select>
</ el-form-item>
< el-form-item label = " 二级分类" >
< el-select v-model = " form.data.st" placeholder = " 请选择" >
< el-option :value = " selectValue" :label = " selectValue" style = " height : 200px; overflow : auto; " >
< el-tree :data = " stOptions" @node-click = " handleNodeClick" > </ el-tree>
</ el-option>
</ el-select>
</ el-form-item>
< el-form-item label = " 课程等级" >
< el-select v-model = " form.data.grade" placeholder = " 请选择" >
< el-option v-for = " item in gradeOptions" :key = " item.code" :label = " item.desc" :value = " item.code" > </ el-option>
</ el-select>
</ el-form-item>
< el-form-item label = " 教学模式" >
< el-select v-model = " form.data.teachmode" placeholder = " 请选择" >
< el-option v-for = " item in teachmodeOptions" :key = " item.code" :label = " item.desc" :value = " item.code" > </ el-option>
</ el-select>
</ el-form-item>
< el-form-item label = " 课程介绍" >
< el-input v-model = " form.data.description" type = " textarea"
show-word-limit maxlength = " 1000" :autosize = " {minRows:4,maxRows:10}" > </ el-input>
</ el-form-item>
< el-form-item label = " 课程图片" >
< el-input v-model = " form.data.pic" > </ el-input>
</ el-form-item>
< el-form-item label = " 课程单价" >
< el-input v-model = " form.data.price" > (元)</ el-input>
</ el-form-item>
</ el-form>
< div style = " " >
< el-button @click = " dialogSave" type = " success" > 保存</ el-button>
< el-button @click = " dialogCancle" type = " primary" > 取消</ el-button>
</ div>
</ el-dialog>
</ template>
< script setup >
import {
GetCompany, Level1Category, AllCategory, GetDict} from '../../api/basic.js'
import {
ref, reactive } from 'vue'
import {
ElMessageBox} from 'element-plus'
import {
toast} from '../../tools/utils.js'
import {
CoursePage, CourseDel, CourseSave} from '../../api/course.js'
const dialogVisible = ref ( false )
const dialogType = ref ( 'add' )
const searchName = ref ( '' )
let mtOptions = ref ( [ ] )
Level1Category ( )
. then ( res => {
mtOptions. value = res
} )
. catch ( err => {
} )
let stOptions = ref ( [ ] )
AllCategory ( )
. then ( res => {
stOptions= res
console. log ( res+ '-' + stOptions)
} ) . catch ( err => {
console. log ( err)
} )
const selectValue= ref ( )
const handleNodeClick = ( e, node ) => {
selectValue. value= e. value+ '->' + e. label
form. data. st= selectValue. value
}
let gradeOptions = ref ( [ ] )
GetDict ( 204 ) . then ( ( res => {
gradeOptions. value= res
} ) ) . catch ( err => {
console. log ( err)
} )
let teachmodeOptions = ref ( [ ] )
GetDict ( 200 ) . then ( res => {
teachmodeOptions= res
} ) . catch ( err => {
console. log ( err)
} )
let companyOptions = ref ( [ ] )
GetCompany ( ) . then ( res => {
companyOptions. value= res
} ) . catch ( err => {
console. log ( err) } )
const multipleSelection = ref ( [ ] )
const handleSelectionChange = ( val ) => {
multipleSelection. value = val
}
const state = reactive ( {
tableDate : [ ] } )
const handleDel = ( id ) => {
ElMessageBox. confirm ( '您是否确认删除此记录?' , '提示' , {
confirmButtonText : '确认' , cancelButtonText : '取消' , type : 'warning' } )
. then ( ( ) => {
CourseDel ( id) . then ( res => {
toast ( '删除记录成功!' )
loadingData ( 1 , page. pageSize)
} )
. catch ( err => {
console. log ( err)
} )
} )
. catch ( ( ) => {
} )
}
const handlerMuchDel = ( ) => {
ElMessageBox. confirm ( '您是否确认删除此记录?' , '提示' , {
confirmButtonText : '确认' , cancelButtonText : '取消' , type : 'warning' } )
. then ( ( ) => {
multipleSelection. value. forEach ( row => {
CourseDel ( row. id) . then ( res => {
toast ( '删除成功!' )
loadingData ( 1 , page. pageSize)
} ) . catch ( err => {
console. log ( err)
} )
} )
} )
. catch ( ( ) => {
} )
}
const toAdd = ( ) => {
dialogVisible. value= true
form. data= {
... form. data,
... formInit
}
}
const dialogSave = ( ) => {
CourseSave ( form. data) . then ( res => {
toast ( '保存数据成功' )
loadingData ( 1 , page. pageSize)
} ) . catch ( err => {
console. log ( err)
} )
dialogVisible. value= false
}
const dialogCancle = ( ) => {
dialogVisible. value= false
}
const toEdit = ( index ) => {
form. data = {
... form. data,
... state. tableDate[ index]
}
dialogVisible. value= true
dialogType. value= 'edit'
}
const formInit= {
id : null ,
companyId : null ,
companyName : null ,
name : null ,
users : null ,
tags : null ,
mt : null ,
st : null ,
grade : null ,
teachmode : null ,
description : null ,
pic : null ,
price : null
}
let form = reactive ( formInit)
console. log ( form. data+ '=================================' )
const page = reactive ( {
total : 0 ,
pageNum : 1 ,
pageSize : 10
} )
const loadingData = ( pageNum, pageSize ) => {
CoursePage ( pageNum, pageSize) . then ( res => {
state. tableDate= reactive ( res. data. records)
page. total= res. data. total
} ) . catch ( err => {
console. log ( err)
} )
}
loadingData ( page. pageNum, page. pageSize)
const handleSizeChange = ( val ) => {
page. pageSize = val
loadingData ( 1 , page. pageSize)
}
const handleCurrentChange = ( val ) => {
page. pageNum = val
loadingData ( page. pageNum, page. pageSize)
}
import {
computed} from 'vue'
let filterData = computed ( ( ) => {
if ( state. tableData != null )
return state. tableData. filter ( ( row ) => {
return row. name. includes ( searchName. value)
} )
} )
import {
format } from 'date-fns'
const formatDate = ( row, index, cellValue ) => {
if ( cellValue != null ) {
return format ( new Date ( cellValue) , 'yyyy-MM-dd' )
}
return cellValue
}
</ script>
< style>
</ style>
5.4.4.8 测试
5.4.5 课程标签
5.4.5.1 效果
5.4.5.2 修改course.vue
< template>
< el-card shadow = " always" >
< h3> < el-icon> < ElementPlus /> </ el-icon> 课程管理</ h3>
< el-row style = " padding : 10px; " gutter = " 3" >
< el-col span = " 8" >
< el-button type = " primary" size = " small" @click = " toAdd" >
< el-icon> < CirclePlus /> </ el-icon> 新增
</ el-button>
< el-button v-if = " multipleSelection.length" type = " danger" size = " small" @click = " handlerMuchDel" > 删除多条</ el-button>
</ el-col>
< el-col span = " 16" >
< el-input size = " small" v-model = " searchName" placeholder = " 按课程名称搜索" >
< template #append > < el-icon> < Search/> </ el-icon> </ template>
</ el-input>
</ el-col>
</ el-row>
< el-table :data = " filterData"