软件工程应用于实践：AJ-Report项目 源码分析（1）
作者：互联网
2021SC@SDUSC
我负责的部分是前端关于报表设计的部分。
由于相关内容还在学习中，本次分析较少内容。
首先是报表设计中的“数据源”
点击后界面如图
源码位于report-ui\src\views\report\datasource，接下来源码分析
<template>
<anji-crud ref="listPage" :option="crudOption">
<template v-slot:buttonLeftOnTable>
<el-button type="primary" icon="el-icon-plus" @click="operateDatasource('add')" v-permission="'datasourceManage:insert'">新增</el-button>
</template>
<template slot="rowButton" slot-scope="props">
<el-button type="text" @click="operateDatasource('edit',props)" v-permission="'datasourceManage:update'">编辑</el-button>
</template>
<template v-slot:pageSection>
<EditDataSource ref="EditDataSource" :dataSource="dataSource" :visib="dialogVisibleSetDataSource" @handleClose="dialogVisibleSetDataSource = false" @refreshList="refreshList" />
</template>
</anji-crud></template>首先在顶端插入“新增”按钮，在每一行右侧插入“编辑”按钮，即自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片。这里可以将自定义的弹出框代码，放入到page中。
crudOption: {
title: '数据源',
labelWidth: '120px',
queryFormFields: [
{
inputType: 'input',
label: '数据源编码',
field: 'sourceCode'
},
{
inputType: 'input',
label: '数据源名称',
field: 'sourceName'
},
{
inputType: 'anji-select',
anjiSelectOption: {
dictCode: 'SOURCE_TYPE',
},
label: '数据源类型',
field: 'sourceType'
},
],
首先使用菜单做为页面标题，详情页中输入框左边文字宽度，接下来编写查询表单条件，其中form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange。
{
label: '数据源类型',
placeholder: '',
field: 'sourceType',
fieldTableRowRenderer: (row) => {
return this.getDictLabelByCode('SOURCE_TYPE', row['sourceType'])
},
editField: 'sourceType',
inputType: 'input',
rules: [
{ min: 1, max: 50, message: '不超过50个字符', trigger: 'blur' }
],
disabled: false,
},
{
label: '数据源连接配置json',
placeholder: '',
field: 'sourceConfig',
editField: 'sourceConfig',
tableHide: true,
inputType: 'input',
rules: [
{ min: 1, max: 2048, message: '不超过2048个字符', trigger: 'blur' }
],
disabled: false,
},
{
label: '状态',//0--已禁用 1--已启用 DIC_NAME=ENABLE_FLAG
placeholder: '',
field: 'enableFlag',
fieldTableRowRenderer: (row) => {
return this.getDictLabelByCode('ENABLE_FLAG', row['enableFlag'])
},
colorStyle: {
0: 'table-danger',
1: 'table-success',
},数据源类型 DIC_NAME=SOURCE_TYPE; mysql，orace，sqlserver，elasticsearch，接口，javaBean，数据源类型字典中item-extend动态生成表单。
数据源连接配置json：关系库{ jdbcUrl:'', username:'', password:'' } ES{hostList:'ip1:9300,ip2:9300,ip3:9300', clusterName:'elasticsearch_cluster' } 接口{apiUrl:'http://ip:port/url', method:'' } javaBean{ beanNamw:'xxx' }
key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
标签：数据源,AJ,label,field,源码,Report,input,inputType,row 来源： https://blog.csdn.net/qq_51460830/article/details/120780514