代码复查系统总结

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

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

二.主要功能及实现

1. 菜单切换

   • 新建菜单，然后依次添加菜单条目，完成菜单栏的设计。

   • 将各菜单条目的code值分别设为1，2，3，然后在页面对应的js文件中添加属性menucode,并设默认值为‘1’，同时添加菜单条目的点击方法如下,实现对menucode的赋值。

     choosemenu:function(item,event){
         var _this = this;
         _this.MenuCode=item.code;
     },
     

   • 然后把菜单条目对应表格的v-show属性设为menucode==‘对应的code值’即可。

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

   • 添加表格控件属性: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分页对象
     }
     

3. 点击标题显示问题详情

   • 标题添加下划线实现

     标题栏下方添加模板，控件属性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，值为数据库查询到的一条数据对象
     

4. 问题详情页面设计

   • 表单数据源: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勾选即可。

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

   • 新建，需从后台传递一个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";
     }
     

6. 表头筛选功能

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

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

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