​

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','白色'：''

​