前后端项目-part03

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;//c机构 p个人private String phone;//联系方式private String linkname;//联系人名称private String handPhotos;//手持证件照private String address;//机构地址private String logo;//机构logoprivate 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;//租户IDprivate 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> {@Autowiredprivate CompanyMapper companyMapper;public List<Company> selectAll(){QueryWrapper qw = new QueryWrapper();qw.select("id","name","org_type","phone","linkname");//查询指定列qw.eq("status",1);//1正常0停用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 {@Autowiredprivate CompanyService companyService;@GetMapping("/selectAll")public List<Company> selectAll(){return companyService.selectAll();}
}

5.4.4.5 后端测试

5.4.4.6 修改basic.js

// 课程管理CRUD
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>&nbsp;新增</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><!-- 4个下拉框 --><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="请选择"><!-- 遍历gradeOptions :key遍历的id  :label要展示的数据 :value根据key获取到的value--><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>// 一级分类:::: 1.引入jsimport {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('')//按照课程名称查询//查后台数据,准备4个下拉框的值,value值是要传给后台的,label的值是要在页面展示的//:::: 一级分类:::: 2.使用1.引入js的结果,利用axios获取数据let mtOptions = ref([]) //一级分类//响应式声明变量Level1Category().then(res=>{// console.log(res)mtOptions.value = res //给响应式变量赋值要用value属性}).catch(err=>{})//:::: 二级分类:::: let stOptions = ref([]) AllCategory().then(res=>{stOptions=resconsole.log(res+'-'+stOptions)}).catch(err=>{console.log(err)})const selectValue=ref()const handleNodeClick=(e,node)=>{selectValue.value=e.value+'->'+e.labelform.data.st=selectValue.value}let gradeOptions = ref([]) //课程等级204,课程模式200GetDict(204).then((res=>{// console.log(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([])//临时存放选中的数据,实际上就是多个rowconst 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