课程与资质
- 用三个表来保存资质和课程内容及他们之间的关系
- 保存资质内容(id就是资质的id,course是给课程显示用的)
- 资质课程关联表
- 保存课程内容
在资质列表里面执行添加课程,执行了sql
查询未拥有的课程和查询已有课程怎么区别
一点击添加课程,就回调两个方法显示已有课程,可添加课程
-
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
-
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
vue中created和mounted的区别
// 可添加课程列表
findCourseName(qualifyId) {
const _this = this;
_this.$http
.get(_this.findCourseNameUrl, { params: { qualifyId: qualifyId } })
.then(({ data: res }) => {
if (res.data) {
const list = res.data;
const nameList = [];
list.forEach((i) => {
const name = {
label: i.courseName,
value: i.id,
};
nameList.push(name);
});
this.courseNameList = nameList;
}
});
},
// 查找拥有课程
findCourseById(qualifyId) {
this.dataListLoading = true;
const _this = this;
_this.$http
.get(this.findCourseByIdUrl, { params: { qualifyId: qualifyId } })
.then(({ data: res }) => {
// console.log(res)
this.dataListLoading = false;
const objList = [];
if (res.code === 0) {
if (res.data != null) {
const dataList = res.data;
dataList.forEach((item) => {
const tabObj = {
id: item.id,
courseName: item.courseName,
content: item.content,
isEdit: true,
// 能编辑
};
objList.push(tabObj);
});
}
this.recordList = objList;
// console.log(res.data)
} else {
this.$message.error("系统异常");
}
})
.catch(() => {
this.dataListLoading = false;
});
},
后端方法
@GetMapping("findCourseById")
@ApiOperation("资质课程")
@LogOperation("资质课程")
@RequiresPermissions("ground:qualify:courseList")
public Result<List<CourseDTO>> findCourseById(String qualifyId){
List<CourseEntity> list = qualifyService.findCourseById(qualifyId);
List<CourseDTO> courseDTOList = ConvertUtils.sourceToTarget(list, CourseDTO.class);
return new Result<List<CourseDTO>>().ok(courseDTOList);
}
@GetMapping("findCourseName")
@ApiOperation("未拥有课程")
@LogOperation("未拥有课程")
@RequiresPermissions("ground:qualify:info")
public Result<List<CourseDTO>> findCourseName(String qualifyId){
List<CourseEntity> list = qualifyService.findCourseName(qualifyId);
List<CourseDTO> courseDTOList = ConvertUtils.sourceToTarget(list, CourseDTO.class);
return new Result<List<CourseDTO>>().ok(courseDTOList);
}
ServiceImpl
java创建一个list集合,List是不能直接实例化的,所以要用其他的,如ArrayList。
1、List temp=new ArrayList();
2、temp.add(xxx)。
其他解决方法:
1、List list = new ArrayList();//创建集合对象;
2、list.Add(“1”);//在集合里存入数据。
3、list.Add(“2”);
4、List是一个接口,不能实例化,创建对象时要使用他的实现类ArrayList(其他)。
通过资质id查询已拥有课程,通过selectBatchIds查询出courseEntities返回,如果不存在返回new ArrayList<>()???
- 查询未拥有课程,也是查询出所有课程,removeAll所有已拥有课程,得到allCourse可选择课程。
Dao.xml findByPage方法
查询course_id根据资质id,返回String类型,用List<String 接>收
前端
<template>
<el-dialog
title="数据详情"
:visible.sync="courseVisible"
width="70%"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
>
<div style="height: 400px; overflow-y: auto">
<el-select v-model="addCourseName" multiple clearable size="mini">
<el-option
v-for="(item, index) in courseNameList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-button
v-if="$hasPermission('ground:qualify:addCourse')"
size="mini"
@click="addCourse()"
>添加课程</el-button
>
<el-table
size="small"
v-loading="dataListLoading"
:data="recordList"
border
style="width: 100%"
>
<el-table-column prop="courseName" label="课程名称"> </el-table-column>
<el-table-column prop="content" label="课程内容"> </el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button
v-if="$hasPermission('ground:qualify:deleteById')"
:disabled="scope.row.isEdit == true ? false : true"
size="mini"
type="danger"
plain
@click="deleteCourse(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="button-btn">
<el-button @click="close" size="mini" style="width: 180px">
返回</el-button
>
</div>
</el-dialog>
</template>
<script>
import debounce from "lodash/debounce";
export default {
props: ["qualifyId"],
data() {
return {
courseVisible: false,
dataListLoading: false,
dataForm: {
id: "",
qualifyName: "",
department: "",
number: "",
creator: "",
createDate: "",
updateDate: "",
},
addCourseName: "",
recordList: [],
courseNameList: [],
findCourseByIdUrl: "/ground/qualify/findCourseById",
deleteCourseUrl: "/ground/qualify/deleteCourseById",
findCourseNameUrl: "/ground/qualify/findCourseName",
addCourseUrl: "/ground/qualify/addCourse",
};
},
computed: {
dataRule() {
return {};
},
},
mounted() {
if (this.qualifyId) {
this.findCourseById(this.qualifyId);
this.findCourseName(this.qualifyId);
}
this.courseVisible = true;
},
methods: {
// 添加课程
addCourse() {
console.log(this.addCourseName);
const _this = this;
_this.$http
.post(
_this.addCourseUrl + "/" + _this.qualifyId + "/" + _this.addCourseName
)
.then(({ data: res }) => {
if (res.code === 0) {
_this.$message.info("添加成功");
_this.findCourseById(_this.qualifyId);
_this.courseNameList = [];
_this.addCourseName = "";
_this.findCourseName(_this.qualifyId);
}
});
},
// 可添加课程列表
findCourseName(qualifyId) {
const _this = this;
_this.$http
.get(_this.findCourseNameUrl, { params: { qualifyId: qualifyId } })
.then(({ data: res }) => {
if (res.data) {
const list = res.data;
const nameList = [];
list.forEach((i) => {
const name = {
label: i.courseName,
value: i.id,
};
nameList.push(name);
});
this.courseNameList = nameList;
}
});
},
// 查找拥有课程
findCourseById(qualifyId) {
this.dataListLoading = true;
const _this = this;
_this.$http
.get(this.findCourseByIdUrl, { params: { qualifyId: qualifyId } })
.then(({ data: res }) => {
// console.log(res)
this.dataListLoading = false;
const objList = [];
if (res.code === 0) {
if (res.data != null) {
const dataList = res.data;
dataList.forEach((item) => {
const tabObj = {
id: item.id,
courseName: item.courseName,
content: item.content,
isEdit: true,
// 能编辑
};
objList.push(tabObj);
});
}
this.recordList = objList;
// console.log(res.data)
} else {
this.$message.error("系统异常");
}
})
.catch(() => {
this.dataListLoading = false;
});
},
// 删除拥有课程
deleteCourse: function (index, row) {
this.$confirm("确认删除吗", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$http
.post(this.deleteCourseUrl + "/" + this.qualifyId + "/" + row.id)
.then(({ data: res }) => {
if (res.code === 0) {
this.$message.info("删除成功");
this.findCourseById(this.qualifyId);
this.findCourseName(this.qualifyId);
}
});
});
},
// 获取信息
getInfo() {
this.$http
.get("/ground/qualify/" + this.dataForm.id)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.dataForm = {
...this.dataForm,
...res.data,
};
})
.catch(() => {});
},
close() {
this.courseVisible = false;
this.$emit("close");
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
if (!valid) {
return false;
}
this.$http[!this.dataForm.id ? "post" : "put"](
"/ground/qualify/",
this.dataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script>
数据显示完成接收,添加和删除功能了
添加接收往关联表tb_course_qualify插入和删除数据
- ServiceImpl,增加方法
增加方法要决定接收的是多选择还是单选,单选用courseId字符串接收,多选用List《courseId,》接收,在业务逻辑处理的时候多选使用BaseService的批量插入方法,参数是一个实体类对象集合
单选使用mapper的insert方法,参数是一个实体类对象
- 删除方法
前端
- 增加
// 添加课程
addCourse() {
console.log(this.addCourseName);
const _this = this;
_this.$http
.post(
_this.addCourseUrl + "/" + _this.qualifyId + "/" + _this.addCourseName
)
.then(({ data: res }) => {
if (res.code === 0) {
_this.$message.info("添加成功");
_this.findCourseById(_this.qualifyId);
_this.courseNameList = [];
_this.addCourseName = "";
_this.findCourseName(_this.qualifyId);
}
});
},
- 删除
// 删除拥有课程
deleteCourse: function (index, row) {
this.$confirm("确认删除吗", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$http
.post(this.deleteCourseUrl + "/" + this.qualifyId + "/" + row.id)
.then(({ data: res }) => {
if (res.code === 0) {
this.$message.info("删除成功");
this.findCourseById(this.qualifyId);
this.findCourseName(this.qualifyId);
}
});
});
},
数据显示
public PageData<QualifyDTO> findByPage(Map<String, Object> params) {
IPage<QualifyEntity> iPage = getPage(params, "create_date", true);//分页组件
List<QualifyEntity> list1 = qualifyDao.findByPage(params);
List<CourseEntity> list2 = courseDao.findByPage(null);
List<CourseQualifyEntity> list3 = courseQualifyDao.selectList(null);
Map<String,CourseEntity> courseMap = new HashMap<>();
if(!list2.isEmpty()){
for (CourseEntity c:list2){
courseMap.put(c.getId(),c);
//使用课程实体类的数据,保存到map中
//courseid作为key,整个课程作为值
}
}
for (QualifyEntity q:list1){
StringBuilder sb = new StringBuilder();
for (CourseQualifyEntity cq:list3){
if(q.getId().equals(cq.getQualifyId())){//资质课程表里面的资质id是否=资质id
String courseName = courseMap.get(cq.getCourseId()).getCourseName();
//get(key)key也接收课程id,
// 得到对应的课程信息,在通过get方法得到课程名称
sb.append(","+courseName);
}
}
if(sb.length()>0){
sb.deleteCharAt(0);
}
q.setCourse(sb.toString());
}
return getPageData(list1, iPage.getTotal(), QualifyDTO.class);
}
- 这里遇到一个问题,数据库设计的时候,q.getid是bigint,cq.get…id是varchar的话,在做if判断是否相等的时候需要类型转换
前端弹框实现
-
在原来界面里面添加一个button,点击按钮,将该列对应的id值赋值给qualifyId,
-
一个弹框,
-
弹框页面,接收qualifyId,courseVisavle
-
弹框代码
<template>
<el-dialog
title="数据详情"
:visible.sync="courseVisible"
width="70%"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
>
<div style="height: 400px; overflow-y: auto">
<el-select v-model="addCourseName" multiple clearable size="mini">
<el-option
v-for="(item, index) in courseNameList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-button
v-if="$hasPermission('ground:qualify:addCourse')"
size="mini"
@click="addCourse()"
>添加课程</el-button
>
<el-table
size="small"
v-loading="dataListLoading"
:data="recordList"
border
style="width: 100%"
>
<el-table-column prop="courseName" label="课程名称"> </el-table-column>
<el-table-column prop="content" label="课程内容"> </el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button
v-if="$hasPermission('ground:qualify:deleteById')"
:disabled="scope.row.isEdit == true ? false : true"
size="mini"
type="danger"
plain
@click="deleteCourse(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="button-btn">
<el-button @click="close" size="mini" style="width: 180px">
返回</el-button
>
</div>
</el-dialog>
</template>
<script>
import debounce from "lodash/debounce";
export default {
props: ["qualifyId"],
data() {
return {
courseVisible: false,
dataListLoading: false,
dataForm: {
id: "",
qualifyName: "",
department: "",
number: "",
creator: "",
createDate: "",
updateDate: "",
},
addCourseName: "",
recordList: [],
courseNameList: [],
findCourseByIdUrl: "/qualify/tbqualify/findCourseById",
deleteCourseUrl: "/ground/qualify/deleteCourseById",
findCourseNameUrl: "/qualify/tbqualify/findCoursename",
addCourseUrl: "/ground/qualify/addCourse",
};
},
computed: {
dataRule() {
return {};
},
},
mounted() {
if (this.qualifyId) {
this.findCourseById(this.qualifyId);
this.findCourseName(this.qualifyId);
}
this.courseVisible = true;
},
methods: {
// 添加课程
addCourse() {
console.log(this.addCourseName);
const _this = this;
_this.$http
.post(
_this.addCourseUrl + "/" + _this.qualifyId + "/" + _this.addCourseName
)
.then(({ data: res }) => {
if (res.code === 0) {
_this.$message.info("添加成功");
_this.findCourseById(_this.qualifyId);
_this.courseNameList = [];
_this.addCourseName = "";
_this.findCourseName(_this.qualifyId);
}
});
},
// 可添加课程列表
findCourseName(qualifyId) {
const _this = this;
_this.$http
.get(_this.findCourseNameUrl, { params: { qualifyId: qualifyId } })
.then(({ data: res }) => {
if (res.data) {
const list = res.data;
const nameList = [];
list.forEach((i) => {
const name = {
label: i.courseName,
value: i.id,
};
nameList.push(name);
});
this.courseNameList = nameList;
}
});
},
// 查找拥有课程
findCourseById(qualifyId) {
this.dataListLoading = true;
const _this = this;
_this.$http
.get(this.findCourseByIdUrl, { params: { qualifyId: qualifyId } })
.then(({ data: res }) => {
// console.log(res)
this.dataListLoading = false;
const objList = [];
if (res.code === 0) {
if (res.data != null) {
const dataList = res.data;
dataList.forEach((item) => {
const tabObj = {
id: item.id,
courseName: item.courseName,
content: item.content,
isEdit: true,
// 能编辑
};
objList.push(tabObj);
});
}
this.recordList = objList;
// console.log(res.data)
} else {
this.$message.error("系统异常");
}
})
.catch(() => {
this.dataListLoading = false;
});
},
// 删除拥有课程
deleteCourse: function (index, row) {
this.$confirm("确认删除吗", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.$http
.post(this.deleteCourseUrl + "/" + this.qualifyId + "/" + row.id)
.then(({ data: res }) => {
if (res.code === 0) {
this.$message.info("删除成功");
this.findCourseById(this.qualifyId);
this.findCourseName(this.qualifyId);
}
});
});
},
// 获取信息
getInfo() {
this.$http
.get("/ground/qualify/" + this.dataForm.id)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.dataForm = {
...this.dataForm,
...res.data,
};
})
.catch(() => {});
},
close() {
this.courseVisible = false;
this.$emit("close");
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
if (!valid) {
return false;
}
this.$http[!this.dataForm.id ? "post" : "put"](
"/ground/qualify/",
this.dataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script>