前端主要分俩模块,一个是管理模块,一个是展示模块。
管理模块负责传递json数据。 如图1.1,目前只是大概做了一个静态数据传递,先做页面展示。
展示模块负责根据json数据展示页面。如图1.2,根据动态组件和传递json数据展示页面,页面主要有动态表单、动态按钮、动态列表、动态弹窗等。
既然是vue动态生成页面,那么必然绕不开组件,所以就先从动态组件开始写。先写出动态表单,动态按钮,动态列表和动态弹窗的组件。然后再将他们之间的逻辑功能串联起来,这样,前端只需要传递数据,页面本身就可以完成全部的操作。
主要还是谈一谈动态组件的编写吧。
核心代码是 动态组件配置
:is="item.componentType" v-model="item.defalutValue" size="small" :placeholder="item.placeholder" clearable style="width: 200px" :options="item.optionValue" :props="{value: 'code',label: 'name',children: 'children', checkStrictly: true, expandTrigger: 'hover' }" value-format="yyyy-MM-dd" > v-for="dict in item.optionValue" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
v-for="dict in item.optionValue" :key="dict.dictValue" :label="dict.dictValue" >{{dict.dictLabel}}
这个组件基本包含了所有的项目中所需要用到的全部组件,输入框 ,选择框,级联选择器,时间选择器,radio-group等。
核心代码如下
其中一个比较难的地方是是formtter,因为如果el-table-column中没有prop属性的话,:formmatter就不生效,所以加上prop属性(之前是用的slot-scope)
转换代码如下,这个相当于提前把所有需要转换的东西都写进去,需要那个就从转换库中转换。
formatters(row,column){
for(var i=0;i { if(column.label==this.tableData.tittle[i].name) { switch(this.tableData.tittle[i].prop) { case 'sysLevel'://系统级别翻译 return this.selectDictLabel(this.tableData.sysLevelOptions, row.sysLevel); case 'timeType'://时间类型翻译 return this.selectDictLabel(this.tableData.timeTypeOptions, row.timeType); case 'mTime'://统计时间翻译 let timeFormat='{y}-{m}-{d}'; if (row.timeType=='y'){ timeFormat='{y}'; } else if (row.timeType=='m'){ timeFormat='{y}-{m}'; } return this.parseTime(row.mTime,timeFormat); default: return row[this.tableData.tittle[i].prop] } } } }, 这部分是基本的组件生成,写写博客摸摸鱼,下午要写一写组件之间的逻辑了。