代码复查系统总结

2023-12-01 23:38:52

代码复查系统总结

一.总体框架及操作流程简单介绍

主要页面：
- 主页面，main.html
- 问题详情页面，show_problem_table.html
- 问题编辑及新建问题页面，add_problem_table.html
页面逻辑
- 主页面下包含三个布局，上（标题显示），左（菜单栏），中（点击菜单对应的表单，默认显示问题管理表单）
- 点击问题表单中的标题，转至show_problem_table.html。点击新建复查问题和编辑，转至add_problem_table.html。

二.主要功能及实现

菜单切换
- 新建菜单，然后依次添加菜单条目，完成菜单栏的设计。
- 将各菜单条目的code值分别设为1，2，3，然后在页面对应的js文件中添加属性menucode,并设默认值为‘1’，同时添加菜单条目的点击方法如下,实现对menucode的赋值。
```
choosemenu:function(item,event){
    var _this = this;
    _this.MenuCode=item.code;
},
```
- 然后把菜单条目对应表格的v-show属性设为menucode==‘对应的code值’即可。

表格数据的加载（此处以问题表为例）

添加表格控件属性:pageable-data为probletbdata(js中定义)，添加控件方法@load-data,loadProblemTbData如下，表格列对应prop属性设置与数据表中相一致。

ProblemTbData: [],

loadProblemTbData: function (queryInfo) {
    var _this = this;
    Artery.loadPageData('main/getProblemTbData', queryInfo).then(function (data) {
        _this.ProblemTbData = data;
    }).catch(function (error) {
        console.error(error);
    });
},

方法实现将从后端接口maian/getProblemTbData接收到的分页数据data存入ProblemTbData[]中。接口实现如下

@RequestMapping("/getProjectTbData")
@ResponseBody
@ExceptionTips("获取信息失败")
@DataTranslate
public Object getProjectTbData(IQueryInfo queryInfo) {
    return QueryManager.datas(queryInfo, ProjectTable.class, projectService::selectAll);
	//返回list分页对象
}

点击标题显示问题详情

标题添加下划线实现

标题栏下方添加模板，控件属性slot-scope为props，然后添加链接，设置连接控件属性:text为props.row.title，添加点击事件@click showproblemtable(prop.row.pk)此处参数设为pk（主键）

<aty-table-column label="标题" prop="title" filter-type="string">
  <template slot-scope="props">
    <u><aty-link :text="props.row.title" target="" @click="showproblemtable(props.row.pk)"></aty-link></u>
  </template>
    //<u></u>标签为设置下划线

showproblemtable:function (id) {//id为传入参数   新打开一个页面
    Artery.open({
        targetType:'_window',
        url:'main/showProblemTable/'+id,	//页面地址，此处为后台接口
        //title:'新建复查问题',
        height:500,
        width:600,
        closable:true,		//右上角是否显示关闭
        footerHide:true		//底部是否显示按钮
    })
}

后台接口如下

@GetMapping("/showProblemTable/{id}")
public String showProblemTable(HttpServletRequest request,@PathVariable String id){
    request.setAttribute("problemtable",problemService.selectByPrimaryKey(id));
    return "show_problem_table";
}
//此处request.setAttribute()方法实现向前端页面传递参数problemtable，值为数据库查询到的一条数据对象

问题详情页面设计
- 表单数据源:data 设为problemtable（js中定义，值为此前后台所传递的值），此处需要在html页面脚本中先声明，然后js中定义相关属性
```
<script th:inline="javascript">
  var problemtable = Artery.resolveObj(/*[[${problemtable}]]*/)
  problemtable = problemtable ? problemtable:{}
</script>
```
```
data: function() {
   return {
      problemtable:problemtable,

   }
},
```
  然后表单中各属性的值便可设置为problem.title(标题属性，其余属性类似)，此处需注意，下拉框被禁用后，值无法显示，此时需要将下拉控件:data属性设为，然后控件属性auto-complete勾选即可。

新建及编辑页面设计（两个事件可共同调用一个页面，细微逻辑有区分）

新建，需从后台传递一个problemTable对象用于数据的保存提交，同时传递项目及人员信息（数据库中查到的用于下拉框的选择，此处后期可以通过code，codetype表设置）后台传值操作与上面类似。

表单提交操作

submit:function(event){//form_addproblem为此表单的ref属性值
   this.$refs['form_addproblem'].submit('add_problem_table/addOrUpdate').then(function () {
      parent.vm.$refs['problem'].reloadData();//上一级页面表单数据重新加载，同样该表单ref属性为problem
      parent.Artery.close();
   }).catch(function (error) {
      Artery.message.error("信息无效，请检查");
   });
},
//补充：请求方法
    Ajax请求：
    Post://有请求体
		Aryery.ajax.post(url,{
            param1:data1;
            param2:data2;
        }).then(fuction(result)){
        });
	Get://没有请求体，直接将参数与url拼接进行访问
		Artery.ajax.get(url,{
            params:{
                param1:data1;
                param2:data2;
            }
        }).then(function(result){});

@RequestMapping("/addOrUpdate")
@ResponseBody
@ExceptionTips("添加或更新异常")
public String addOrUpdate(@RequestBody ProblemTable problemTable){
    if(StringUtils.isBlank(problemTable.getPk())){//判断对应值是否为空，true执行新增操作
        problemTable.setPk(UUIDHelper.getUuid());
        problemService.insert(problemTable);
    }else{
        problemService.updateByPrimaryKey(problemTable);//false执行更新操作
    }
    return "ok";
}

编辑页面添加了delete按钮，此处注意点击事件方法名若设为delete则会发生意想不到的事情（delete为vue中的关键字）

delete1:function() {
   var _this = this;
   this.$Modal.confirm({
      title: '提示',
      content: '确认删除?',//点击删除后弹出提示框，二次确认
      onOk: function () {
         _this.$refs['form_addproblem'].submit('add_problem_table/problemDelete').then(function () {
            parent.vm.$refs['problem'].reloadData();	//与提交一样，只是调用接口不同
            parent.Artery.close()
         });
      }
   })
},

@RequestMapping("/problemDelete")
@ResponseBody
@ExceptionTips("删除信息异常")
public String problemDelete(@RequestBody ProblemTable problemTable){
    problemService.deleteByPrimaryKey(problemTable.getPk());
    return "ok";
}

表头筛选功能
- 表格列对应属性filter-type设置为string即可实现
- 如果要求设置筛选条件，及通过下拉框进行选择，此时需要设置相应的code，codetype表。

三.下拉框的设置与code,codeType表的使用单值数据

数据库中新建两张表code，codetype
然后对应的filter-type属性设为code，code-type属性设为表中对应的110
对应的pojo类中属性前加上标注@CodeType("110")即可。

码农公寓

代码复查系统总结

一.总体框架及操作流程简单介绍

二.主要功能及实现

三.下拉框的设置与code,codeType表的使用 单值数据

相关文章

三.下拉框的设置与code,codeType表的使用单值数据