报表设计前端模板化-暂未完善

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/report/controller/dto/ReportDto.java

@@ -44,4 +44,10 @@ public class ReportDto extends GaeaBaseDTO implements Serializable {
     /** 报表缩略图 */
     private String reportImage;
 
+    /** 0--已禁用 1--已启用  DIC_NAME=ENABLE_FLAG */
+    private Integer enableFlag;
+
+    /** 0--未删除 1--已删除 DIC_NAME=DELETE_FLAG */
+    private Integer deleteFlag;
+
 }

report-ui/src/api/reportDataSet.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function reportDataSetList(params) {
+  return request({
+    url: 'dataSet/pageList',
+    method: 'GET',
+    params,
+  })
+}
+
+export function reportDataSetAdd(data) {
+  return request({
+    url: 'dataSet',
+    method: 'post',
+    data
+  })
+}
+
+export function reportDataSetDeleteBatch(data) {
+  return request({
+    url: 'dataSet/delete/batch',
+    method: 'post',
+    data
+  })
+}
+
+export function reportDataSetUpdate(data) {
+  return request({
+    url: 'dataSet',
+    method: 'put', data,
+  })
+}
+
+export function reportDataSetDetail(data) {
+  return request({
+    url: 'dataSet/' + data.id,
+    method: 'get',
+    params: { accessKey: data.accessKey }
+  })
+}
+
+export default { reportDataSetList, reportDataSetAdd, reportDataSetDeleteBatch, reportDataSetUpdate, reportDataSetDetail }

report-ui/src/api/reportmanage.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function reportList(params) {
+  return request({
+    url: '/report/pageList',
+    method: 'GET',
+    params,
+  })
+}
+
+export function reportAdd(data) {
+  return request({
+    url: '/report',
+    method: 'post',
+    data
+  })
+}
+
+export function reportDeleteBatch(data) {
+  return request({
+    url: '/report/delete/batch',
+    method: 'post',
+    data
+  })
+}
+
+export function reportUpdate(data) {
+  return request({
+    url: '/report',
+    method: 'put', data,
+  })
+}
+
+export function reportDetail(data) {
+  return request({
+    url: '/report/' + data.id,
+    method: 'get',
+    params: { accessKey: data.accessKey }
+  })
+}
+
+export default { reportList, reportAdd, reportDeleteBatch, reportUpdate, reportDetail }

report-ui/src/views/report/report/index-copy.vue

@@ -0,0 +1,221 @@
+<!--
+ * @Author: lide1202@hotmail.com
+ * @Date: 2021-3-13 11:04:24
+ * @Last Modified by:   lide1202@hotmail.com
+ * @Last Modified time: 2021-3-13 11:04:24
+ !-->
+<template>
+  <anji-crud ref="listPage" :option="crudOption">
+    <template v-slot:buttonLeftOnTable>
+    </template>
+
+    <!--
+    <template slot="rowButton" slot-scope="props">
+        <el-button type="primary" @click="customButtom(props)">行按钮</el-button>
+    </template>
+    -->
+    <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
+    <!--这里可以将自定义的弹出框代码，放入到page中
+    <template v-slot:pageSection>
+      <div>插入底部html片段</div>
+    </template>
+    -->
+  </anji-crud>
+</template>
+<script>
+import { reportList, reportAdd, reportDeleteBatch, reportUpdate, reportDetail } from '@/api/reportmanage'
+export default {
+  name: 'Report',
+  components: {
+    anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
+  },
+  data() {
+    return {
+      crudOption: {
+        // 使用菜单做为页面标题
+        title: '报表管理',
+        // 详情页中输入框左边文字宽度
+        labelWidth: '120px',
+        // 查询表单条件
+        queryFormFields: [
+          {
+            inputType: 'input',
+            label: '报表名称',
+            field: 'reportName'
+          },
+          {
+            inputType: 'input',
+            label: '报表编码',
+            field: 'reportCode'
+          },
+        ],
+        // 操作按钮
+        buttons: {
+          query: {
+            api: reportList,
+            permission: 'reportManage:query'
+          },
+          queryByPrimarykey: {
+            api: reportDetail,
+            permission: 'reportManage:detail'
+          },
+          add: {
+            api: reportAdd,
+            permission: 'reportManage:insert'
+          },
+          delete: {
+            api: reportDeleteBatch,
+            permission: 'reportManage:delete'
+          },
+          edit: {
+            api: reportUpdate,
+            permission: 'reportManage:update'
+          },
+        },
+        // 表格列
+        columns: [
+          {
+            label: '',
+            field: 'id',
+            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
+            tableHide: true, // 表格中不显示
+            editHide: true, // 编辑弹框中不显示
+          },
+          {
+            label: '报表名称',//名称
+            placeholder: '',
+            field: 'reportName',
+            editField: 'reportName',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: '报表编码',//报表编码
+            placeholder: '',
+            field: 'reportCode',
+            editField: 'reportCode',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
+            ],
+            disabled: 'disableOnEdit',
+          },
+          {
+            label: '分组',//分组,暂时不展示出来
+            placeholder: '',
+            field: 'reportGroup',
+            tableHide: true,
+            editHide: true,
+            editField: 'reportGroup',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+            defaultValue: 'default'
+          },
+          {
+            label: '报表类型',//报表类型-目前仅支持大屏报表，暂时不展示出来
+            placeholder: '',
+            field: 'reportType',
+            editField: 'reportType',
+            tableHide: true,
+            editHide: true,
+            inputType: 'anji-select',
+            anjiSelectOption: {
+              dictCode: 'REPORT_TYPE',
+            },
+            rules: [
+              { min: 1, max: 20, message: '不超过20个字符', trigger: 'blur' }
+            ],
+            disabled: true,
+            defaultValue: 'report_screen'
+          },
+          {
+            label: '描述',//报表描述
+            placeholder: '',
+            field: 'reportDesc',
+            editField: 'reportDesc',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 255, message: '不超过255个字符', 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', //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
+              1: 'table-success',
+            },
+            editField: 'enableFlag',
+            inputType: 'anji-select',
+            anjiSelectOption: {
+              dictCode: 'ENABLE_FLAG',
+            },
+            rules: [
+            ],
+            disabled: false,
+            defaultValue: 1
+          },
+          {
+            label: '删除标记',//0--未删除 1--已删除 DIC_NAME=DELETE_FLAG
+            placeholder: '',
+            field: 'deleteFlag',
+            editHide: true,
+            editField: 'deleteFlag',
+            tableHide: true,
+            inputType: 'input',
+            rules: [
+            ],
+            disabled: false,
+          },
+          {
+            label: '报表缩略图',//报表缩略图
+            placeholder: '',
+            field: 'reportImage',
+            editField: 'reportImage',
+            inputType: 'anji-upload',
+            tableHide: true,
+            anjiUpload: {
+              limit: 1, // 文件大小 Number 类型
+            },
+          },
+        ],
+        // 弹出框表单对应的值有改动时
+        // formData 整个表单，通过编辑打开弹出框，根据主键查询数据时，fieldName, fieldVal, fieldExtend为空
+        // fieldName 触发修改的input name
+        // fieldVal input最新值
+        // fieldExtend 对于select型的扩展值
+        formChange: (formData, fieldName, fieldVal, fieldExtend) => {
+          if (fieldName == 'reportImage') {
+            const fileIdList = []
+            fieldVal.forEach(el => {
+              if (el.fileId) {
+                fileIdList.push(el.fileId)
+              }
+            })
+            formData['reportImage'] = fileIdList.join(',')
+          }
+
+        }
+      },
+    }
+  },
+
+  created() { },
+  methods: {
+    handleOpenDialog1() {
+      alert('自定义按钮1点击事件')
+    }
+  }
+}
+</script>

report-ui/src/views/report/resultset/index-copy.vue

@@ -0,0 +1,176 @@
+<template>
+  <anji-crud ref="listPage" :option="crudOption">
+    <template v-slot:buttonLeftOnTable>
+    </template>
+
+    <!--
+    <template slot="rowButton" slot-scope="props">
+        <el-button type="primary" @click="customButtom(props)">行按钮</el-button>
+    </template>
+    -->
+    <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
+    <!--这里可以将自定义的弹出框代码，放入到page中
+    <template v-slot:pageSection>
+      <div>插入底部html片段</div>
+    </template>
+    -->
+  </anji-crud>
+</template>
+<script>
+import { reportDataSetList, reportDataSetAdd, reportDataSetDeleteBatch, reportDataSetUpdate, reportDataSetDetail } from '@/api/reportDataSet'
+export default {
+  name: 'ReportDataSet',
+  components: {
+    anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
+  },
+  data() {
+    return {
+      crudOption: {
+        // 使用菜单做为页面标题
+        title: this.$lang('GLOBAL_MENU_LANG.ReportDataSet'),
+        // 详情页中输入框左边文字宽度
+        labelWidth: '120px',
+        // 查询表单条件
+        queryFormFields: [
+          {
+            inputType: 'input',
+            label: this.$lang('ReportDataSet.setCode'),
+            field: 'setCode'
+          },
+          {
+            inputType: 'input',
+            label: this.$lang('ReportDataSet.setName'),
+            field: 'setName'
+          },
+        ],
+        // 操作按钮
+        buttons: {
+          query: {
+            api: reportDataSetList,
+            permission: 'resultsetManage:query'
+          },
+          queryByPrimarykey: {
+            api: reportDataSetDetail,
+            permission: 'resultsetManage:detail'
+          },
+          add: {
+            api: reportDataSetAdd,
+            permission: 'resultsetManage:insert'
+          },
+          delete: {
+            api: reportDataSetDeleteBatch,
+            permission: 'resultsetManage:delete'
+          },
+          edit: {
+            api: reportDataSetUpdate,
+            permission: 'resultsetManage:update'
+          },
+        },
+        // 表格列
+        columns: [
+          {
+            label: '',
+            field: 'id',
+            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
+            tableHide: true, // 表格中不显示
+            editHide: true, // 编辑弹框中不显示
+          },
+          {
+            label: this.$lang('ReportDataSet.setCode'),//数据集编码
+            placeholder: '',
+            field: 'setCode',
+            editField: 'setCode',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 50, message: '不超过50个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.setName'),//数据集名称
+            placeholder: '',
+            field: 'setName',
+            editField: 'setName',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 100, message: '不超过100个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.setDesc'),//数据集描述
+            placeholder: '',
+            field: 'setDesc',
+            editField: 'setDesc',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 255, message: '不超过255个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.sourceCode'),//数据源编码
+            placeholder: '',
+            field: 'sourceCode',
+            editField: 'sourceCode',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 50, message: '不超过50个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.dynSentence'),//动态查询sql或者接口中的请求体
+            placeholder: '',
+            field: 'dynSentence',
+            editField: 'dynSentence',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 2,048, message: '不超过2048个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.caseResult'),//结果案例
+            placeholder: '',
+            field: 'caseResult',
+            editField: 'caseResult',
+            inputType: 'input',
+            rules: [
+              { min: 1, max: 65,535, message: '不超过65535个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.enableFlag'),//0--已禁用 1--已启用  DIC_NAME=ENABLE_FLAG
+            placeholder: '',
+            field: 'enableFlag',
+            editField: 'enableFlag',
+            inputType: 'input',
+            rules: [
+            ],
+            disabled: false,
+          },
+          {
+            label: this.$lang('ReportDataSet.deleteFlag'),//0--未删除 1--已删除 DIC_NAME=DELETE_FLAG
+            placeholder: '',
+            field: 'deleteFlag',
+            editField: 'deleteFlag',
+            inputType: 'input',
+            rules: [
+            ],
+            disabled: false,
+          },
+        ],
+      },
+    }
+  },
+
+  created() { },
+  methods: {
+    handleOpenDialog1() {
+      alert('自定义按钮1点击事件')
+    }
+  }
+}
+</script>