java功能模块实现思路分析

课程与资质

  • 用三个表来保存资质和课程内容及他们之间的关系
  • 保存资质内容(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);
            }
          });
      });
    },

数据显示

![在这里插入图片描述](https://img-blog.csdnimg.cn/720978af765e41c9a058ff9bd90bb868.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56uL5aSP55qE5p2O5a2Q,size_20,color_FFFFFF,t_70,g_se,x_16

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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值