自定义报表-基础版本-新增-001

src/api/customize/report.js

@@ -0,0 +1,128 @@
+import { axios } from '@/utils/request'
+import { stringify } from 'qs'
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getCustomizeReportPage (parameter) {
+    return axios({
+        url: '/customize/reports/page?' + stringify(parameter),
+        method: 'get',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+/**
+ * add func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function addCustomizeReport (parameter) {
+    return axios({
+        url: '/customize/reports',
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+        data: parameter
+    })
+}
+
+/**
+ * update func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function updateCustomizeReport (parameter) {
+    return axios({
+        url: '/customize/reports/' + parameter.id,
+        method: 'PUT',
+        data: parameter
+    })
+}
+
+/**
+ * fetch single func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function fetchCustomizeReport (parameter) {
+    return axios({
+        url: '/customize/reports/' + parameter.id,
+        method: 'get',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+/**
+ * query list func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function queryCustomizeReport (parameter) {
+    return axios({
+        url: '/customize/reports?' + stringify(parameter),
+        method: 'get',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+/**
+ * delete batch func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function deleteCustomizeReports (parameter) {
+    return axios({
+        url: '/customize/reports',
+        method: 'DELETE',
+        data: parameter
+    })
+}
+
+/**
+ * delete single func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function deleteCustomizeReport (parameter) {
+    return axios({
+        url: '/customize/reports/' + parameter.id,
+        method: 'DELETE',
+        data: parameter
+    })
+}
+
+
+/**
+ * export file
+ * parameter: { }
+ * @param parameter :
+ * @returns {*}
+ */
+export function exportCustomizeReport (parameter) {
+    return axios({
+        url: '/customize/reports/export?' + stringify(parameter),
+        method: 'get',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+        responseType: 'blob'
+    })
+}

src/router/generator-platform-routers.js

@@ -328,7 +328,10 @@ const constantRouterComponents = {
   'RepairReportSbInfo': () => import('@/views/dashboard/RepairReportSbInfo'), // 设备维修报表
   'RepairReportSbInfoFee': () => import('@/views/dashboard/RepairReportSbInfoFee'), // 设备维修费用报表
   'RepairReportMttr': () => import('@/views/dashboard/RepairReportMttr'), // MTTR月统计报表
-  'RepairReportFee': () => import('@/views/dashboard/RepairReportFee') // 费用按月统计
+  'RepairReportFee': () => import('@/views/dashboard/RepairReportFee'), // 费用按月统计
+
+  // 自定义管理
+  'CustomizeReport': () => import('@/views/customize/report/CustomizeReport') // 自定义报表
 }
 
 // 前端未找到页面路由（固定不用改）

src/utils/dict.js

@@ -278,7 +278,10 @@ DictCache.TYPE = {
   PURCHASE_INVOICE_TYPE: 'PURCHASE_INVOICE_TYPE',
   PURCHASE_STORE_PLACE: 'PURCHASE_STORE_PLACE',
   GROUP_INFO: 'GROUP_INFO',
-  _AUDIT_MONEY: '_AUDIT_MONEY'
+  _AUDIT_MONEY: '_AUDIT_MONEY',
+  CUSTOMIZE_REPORT_ECHART_TYPE: 'CUSTOMIZE_REPORT_ECHART_TYPE',
+  CUSTOMIZE_REPORT_INTER_TYPE: 'CUSTOMIZE_REPORT_INTER_TYPE',
+  PARAMETER_TYPE: 'PARAMETER_TYPE'
 
 }
 DictCache.CODE = {

src/views/customize/report/CustomizeReport.vue

@@ -0,0 +1,285 @@
+<template>
+  <a-card :bordered='false'>
+    <div class='table-page-search-wrapper' @keyup.enter='handleEnter'>
+      <a-form layout='inline'>
+        <a-row :gutter='48'>
+          <a-col :md='8' :sm='24'>
+            <a-form-item label='关键字'>
+              <a-input v-model='queryParam.keyword' placeholder='请输入名称/类型名称' />
+            </a-form-item>
+          </a-col>
+          <a-col :md='8 || 24' :sm='24'>
+            <span class='table-page-search-submitButtons'>
+              <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
+              <a-button style='margin-left: 8px' @click='resetSearchForm'>重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class= 'table-operator'>
+     <a-button v-if="$auth('customize-reports-add')" type='primary' icon='plus' @click='$refs.baseModal.base()'>新增
+      </a-button>
+      <a-button
+        style= "margin-left: 8px"
+        v-if="$auth('customize-reports-export')"
+        type='primary'
+        icon='download'
+        @click='doExport'>导出
+      </a-button>
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 && $auth('customize-reports-del')">
+        <a-menu slot='overlay'>
+          <a-popconfirm title='是否要删除所选数据？' @confirm='batchDelete()'>
+            <a-menu-item key='1'>
+              <a-icon type='delete' />
+              <a>删除</a></a-menu-item>
+          </a-popconfirm>
+        </a-menu>
+        <a-button style='margin-left: 8px'>
+          批量操作
+          <a-icon type='down' />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref='table'
+      size='default'
+      rowKey='id'
+      :columns='columns'
+      :data='loadData'
+      :alert='options.alert'
+      :rowSelection='options.rowSelection'
+      showPagination='auto'
+    >
+            <span slot='action' slot-scope='record'>
+              <template>
+                <a @click='handleView(record)'>查看</a>
+                <operation-button
+                  v-if="$auth('customize-reports-edit')"
+                  @click='handleEdit(record)'
+                >修改</operation-button>
+                <operation-button
+                  v-if="$auth('customize-reports-del')"
+                  :type='2'
+                  title='是否要删除该条数据？'
+                  @confirm='batchDelete(record.id)'>删除</operation-button>
+              </template>
+            </span>
+
+      <span slot="interType" slot-scope="text">
+          <badge
+            :text="interTypeMap[text]" />
+        </span>
+
+      <span slot="echartType" slot-scope="text">
+          <badge
+            :text="echartTypeMap[text]" />
+        </span>
+    </s-table>
+    <base-form ref='baseModal' @ok='handleOk' />
+    <detail ref='detailModal' />
+  </a-card>
+</template>
+
+<script>
+import { STable, Ellipsis } from '@/components'
+import BaseForm from './modules/BaseForm'
+import Detail from './modules/Detail'
+import {
+  getCustomizeReportPage,
+  deleteCustomizeReports,
+  fetchCustomizeReport,
+  exportCustomizeReport
+} from '@/api/customize/report'
+
+export default {
+  name: 'CustomizeReportList',
+  components: {
+    STable,
+    Ellipsis,
+    BaseForm,
+    Detail
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          customRender: (text, record, index) => {
+            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
+          }
+        },
+        {
+          title: '自定义报表名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '图形类别',
+          dataIndex: 'echartType',
+          scopedSlots: { customRender: 'echartType' }
+        },
+        {
+          title: '报表检索条件',
+          dataIndex: 'parameter'
+        },
+        {
+          title: '报表接口类型',
+          dataIndex: 'interType',
+          scopedSlots: { customRender: 'interType' }
+        },
+        {
+          title: '数据来源',
+          dataIndex: 'sqlVal'
+        },
+        {
+          title: '表格展示字段',
+          dataIndex: 'columns'
+        },
+        {
+          title: '',
+          dataIndex: 'createdUserName'
+        },
+        {
+          title: '',
+          dataIndex: 'createdTime'
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: '200px',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 下拉框map
+      echartTypeMap: [],
+      interTypeMap: [],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        parameter = {
+          ...parameter,
+          ...this.queryParam,
+          dataScope: {
+            sortBy: 'desc',
+            sortName: 'update_time'
+          }
+        }
+        return getCustomizeReportPage(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res.data
+          })
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          }
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: false
+    }
+  },
+  created () {
+    // 下拉框map
+    this.echartTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOMIZE_REPORT_ECHART_TYPE)
+    this.interTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOMIZE_REPORT_INTER_TYPE)
+  },
+  methods: {
+    tableOption () {
+      if (!this.optionAlertShow) {
+        this.options = {
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            }
+          },
+          rowSelection: {
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: this.onSelectChange,
+            getCheckboxProps: record => ({
+              props: {
+                disabled: false,
+                name: record.id
+              }
+            })
+          }
+        }
+        this.optionAlertShow = true
+      } else {
+        this.options = {
+          alert: false,
+          rowSelection: null
+        }
+        this.optionAlertShow = false
+      }
+    },
+    batchDelete (id) {
+      let ids = []
+      if (this.BaseTool.String.isBlank(id)) {
+        const length = this.selectedRows.length
+        if (length === 0) {
+          this.$message.info('请选择要删除的记录')
+          return
+        }
+        ids = this.selectedRows.map(item => item.id)
+      } else {
+        ids = [id]
+      }
+      deleteCustomizeReports(ids).then(res => {
+        this.$message.info('删除成功')
+        this.handleOk()
+        this.$refs.table.clearSelected()
+      })
+    },
+    handleEdit (record) {
+      fetchCustomizeReport({ id: record.id }).then(res => {
+        const modal = this.$refs.baseModal
+        modal.base(res.data)
+      })
+    },
+    handleView (record) {
+      fetchCustomizeReport({ id: record.id }).then(res => {
+        const modal = this.$refs.detailModal
+        modal.base(res.data)
+      })
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    resetSearchForm () {
+      this.queryParam = {}
+      this.$refs.table.refresh(true)
+    },
+    doExport () {
+      const parameter = {
+        ...this.queryParam
+      }
+      exportCustomizeReport(parameter).then(file => {
+        this.BaseTool.Util.downLoadExportExcel(file)
+      })
+    },
+    handleEnter () {
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>

src/views/customize/report/modules/BaseForm.vue

@@ -0,0 +1,214 @@
+<template>
+  <a-modal
+    :title='modalTitle'
+    :width='800'
+    :visible='visible'
+    :confirmLoading='confirmLoading'
+    class='ant-modal2'
+    @cancel='handleCancel'
+  >
+    <a-form :form='form'>
+
+      <a-form-item v-show='false'>
+        <a-input v-decorator="['id']" type='hidden' />
+      </a-form-item>
+      <a-form-item v-show='false'>
+        <a-input v-decorator="['status']" type='hidden' />
+      </a-form-item>
+
+      <row-list :col='2'>
+        <row-item>
+
+          <a-form-item
+            label='自定义报表名称'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-input
+              v-decorator="['name', {rules: [{required: true, message: '自定义报表名称不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+
+          <a-form-item
+            label='图形类别'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-select
+              v-decorator="['echartType', { initValue: 1, rules: [{required: true, message: '图形不能为空'}]}]"
+              placeholder="请选择">
+              <a-select-option
+                v-for="(label,value) in echartTypeMap"
+                :key="value"
+                :label="label"
+                :value="parseInt(value)">{{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label='报表检索条件'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-textarea
+              disabled='disabled'
+              v-decorator="['parameter', {rules: [{required: true, message: '报表检索条件不能为空'}]}]" />
+            <a-button type="primary" style="width:30%" @click="handleParameterSelect">新增</a-button>
+          </a-form-item>
+        </row-item>
+        <row-item>
+
+          <a-form-item
+            label='报表接口类型'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-select
+              v-decorator="['interType', { initValue: 1, rules: [{required: true, message: '数据提供方式不能为空'}]}]"
+              placeholder="请选择">
+              <a-select-option
+                v-for="(label,value) in interTypeMap"
+                :key="value"
+                :label="label"
+                :value="parseInt(value)">{{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+
+          <a-form-item
+            label='接口数据来源配置'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-textarea
+              v-decorator="['sqlVal', {rules: [{required: true, message: '自定义报表名称不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+
+          <a-form-item
+            label='表格展示字段'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-textarea
+              placeholder='输入数据库字段的驼峰名称，逗号,隔开'
+              v-decorator="['columns', {rules: [{required: true, message: '表格展示字段不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+      </row-list>
+    </a-form>
+    <template slot='footer'>
+      <a-button :loading='confirmLoading' type='primary' @click='save()'>保存</a-button>
+    </template>
+    <parameter-modal ref="parameterModal" @selected="handleparameterSelectd" />
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import ParameterModal from '@/views/customize/report/modules/ParameterModal'
+import { addCustomizeReport, updateCustomizeReport } from '@/api/customize/report'
+
+export default {
+  name: 'BaseCustomizeReport',
+  components: {
+    ParameterModal
+  },
+  data () {
+    return {
+      confirmLoading: false,
+      modalTitle: null,
+      form: this.$form.createForm(this),
+      visible: false,
+      // 下拉框map
+      echartTypeMap: [],
+      interTypeMap: [],
+      parameter: []
+    }
+  },
+  props: {},
+  created () {
+    // 下拉框map
+    this.echartTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOMIZE_REPORT_ECHART_TYPE)
+    this.interTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOMIZE_REPORT_INTER_TYPE)
+  },
+  methods: {
+    base (record) {
+      this.visible = true
+      // 如果是空标识添加
+      if (this.BaseTool.Object.isBlank(record)) {
+        this.modalTitle = '添加'
+        return
+      }
+      this.modalTitle = '编辑'
+      const { form: { setFieldsValue } } = this
+      // 日期处理
+      this.$nextTick(() => {
+        setFieldsValue(Object.assign(pick(record, [
+          'id',
+          'name',
+          'echartType',
+          'parameter',
+          'interType',
+          'sqlVal',
+          'columns',
+          'status',
+          'remark'
+        ])))
+      })
+    },
+    handleParameterSelect () {
+      this.$refs.parameterModal.base()
+    },
+    handleparameterSelectd (rows) {
+      this.parameter.push(rows)
+      const parameterVal = JSON.stringify(this.parameter)
+      this.form.setFieldsValue({
+        'parameter': parameterVal
+      })
+    },
+    save () {
+      const { form: { validateFieldsAndScroll } } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        if (errors) {
+          this.confirmLoading = false
+          return
+        }
+        // 日期处理
+        if (this.BaseTool.String.isBlank(values.id)) {
+          values.status = 0
+          addCustomizeReport(values)
+            .then(() => {
+              this.handleCancel(values)
+            }).catch(() => {
+            this.confirmLoading = false
+          })
+        } else {
+          updateCustomizeReport(values)
+            .then(() => {
+              this.handleCancel(values)
+            }).catch(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel(values) {
+      this.visible = false
+      this.confirmLoading = false
+      this.form.resetFields()
+      if (this.BaseTool.Object.isNotBlank(values)) {
+        this.$emit('ok', values)
+      }
+    }
+
+  }
+}
+</script>

src/views/customize/report/modules/CustomizeReportSelectModal.vue

@@ -0,0 +1,297 @@
+<template>
+    <a-modal
+            :title="modalTitle"
+            :width="1000"
+            :visible="visible"
+            :confirmLoading="confirmLoading"
+            class="ant-modal2"
+            @cancel="handleCancel"
+    >
+        <a-card :bordered="false">
+            <div class="table-page-search-wrapper">
+                <a-form layout="inline">
+                    <a-row :gutter="48">
+                        <a-col :md="8" :sm="24">
+                            <a-form-item label="关键字">
+                                <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称"/>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="8 || 24" :sm="24">
+                <span class="table-page-search-submitButtons">
+                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                  <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+                </span>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </div>
+
+            <div class="table-operator">
+            </div>
+
+            <s-table
+                    ref="table"
+                    size="default"
+                    rowKey="id"
+                    :columns="columns"
+                    :data="loadData"
+                    :alert="options.alert"
+                    :customRow="options.customRow"
+                    :rowSelection="options.rowSelection"
+                    showPagination="auto"
+            >
+                <span slot="action" slot-scope="record1">
+                  <template>
+                    <a @click="handleView(record1)">查看</a>
+                  </template>
+                </span>
+            </s-table>
+            <detail ref="detailModal"/>
+        </a-card>
+        <template slot="footer">
+            <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">取消</a-button>
+            <a-button :loading="confirmLoading" type="primary" @click="handleSelect()">确定</a-button>
+        </template>
+    </a-modal>
+</template>
+
+<script>
+    import { STable, Ellipsis } from '@/components'
+    import Detail from './Detail'
+    import { getCustomizeReportPage, fetchCustomizeReport } from '@/api/customize/report'
+
+    export default {
+        name: 'CustomizeReportSelectModal',
+        components: {
+            STable,
+            Ellipsis,
+            Detail
+        },
+        props: {
+            type: {
+                type: String,
+                default: 'radio'
+            },
+            selectedRowKey: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            },
+            selectedRow: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            }
+        },
+        data () {
+            return {
+                confirmLoading: false,
+                mdl: {},
+                modalTitle: null,
+                visible: false,
+                record: null,
+                // 查询参数
+                queryParam: {
+                },
+                extraQueryParam: {
+                },
+                // 表头
+                columns: [
+                    {
+                        title: '序号',
+                        dataIndex: 'index',
+                        customRender: (text, record, index) => {
+                            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
+                        }
+                    },
+                                                                                                                                                {
+                                title: '自定义报表名称',
+                                dataIndex: 'name'
+                            },
+                                                                                                                                                        {
+                                title: '图形类别',
+                                dataIndex: 'echartType'
+                            },
+                                                                                                                                                        {
+                                title: '报表检索条件',
+                                dataIndex: 'parameter'
+                            },
+                                                                                                                                                        {
+                                title: '报表接口类型',
+                                dataIndex: 'interType'
+                            },
+                                                                                                                                                        {
+                                title: 'sql语句',
+                                dataIndex: 'sql'
+                            },
+                                                                                                                                                        {
+                                title: '表格展示字段',
+                                dataIndex: 'columns'
+                            },
+                                                                                                                                                        {
+                                title: '自定义报表状态',
+                                dataIndex: 'status'
+                            },
+                                                                                                                                                        {
+                                title: '备注',
+                                dataIndex: 'remark'
+                            },
+                                                                                                                                                                                                                                                {
+                                title: '',
+                                dataIndex: 'createdUserName'
+                            },
+                                                                                                                                                                                                    {
+                                title: '',
+                                dataIndex: 'createdTime'
+                            },
+                                                                                                                                        {
+                        title: '操作',
+                        key: 'action',
+                        width: '200px',
+                        align: 'center',
+                        scopedSlots: { customRender: 'action' }
+                    }
+                ],
+                // 下拉框map
+                                // 加载数据方法 必须为 Promise 对象
+                loadData: parameter => {
+                    parameter = {
+                        ...parameter,
+                        ...this.queryParam,
+                        ...this.extraQueryParam,
+                        dataScope: {
+                            sortBy: 'desc',
+                            sortName: 'update_time'
+                        }
+                    }
+                    return getCustomizeReportPage(Object.assign(parameter, this.queryParam))
+                            .then(res => {
+                                return res.data
+                            })
+                },
+                selectedRowKeys: [],
+                selectedRows: [],
+
+                options: {
+                    alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+                    rowSelection: {
+                        selectedRowKeys: this.selectedRowKeys,
+                        onChange: this.onSelectChange
+                    }
+                },
+                optionAlertShow: false,
+                isCreated: false
+            }
+        },
+        created () {
+            // 下拉框map
+                    },
+        methods: {
+            tableOption () {
+                if (!this.optionAlertShow) {
+                    this.options = {
+                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+                        rowSelection: {
+                            selectedRowKeys: this.selectedRowKeys,
+                            onChange: this.onSelectChange,
+                            type: this.type,
+                            getCheckboxProps: record => ({
+                                props: {
+                                    disabled: false,
+                                    name: record.id
+                                }
+                            })
+                        },
+                        customRow: (record) => {
+                            return {
+                                on: { // 事件
+                                    click: (event) => { // 点击行
+                                        // 选择对象
+                                        this.mySelect([record.id], [record])
+                                    },
+                                    dblclick: (event) => {
+                                        this.mySelect([record.id], [record])
+                                        this.handleSelect()
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    this.optionAlertShow = true
+                } else {
+                    this.options = {
+                        alert: false,
+                        rowSelection: null
+                    }
+                    this.optionAlertShow = false
+                }
+            },
+            handleView (record) {
+                fetchCustomizeReport({ id: record.id }).then(res => {
+                    const modal = this.$refs.detailModal
+                    modal.base(res.data)
+                })
+            },
+            handleOk () {
+                this.$refs.table.refresh()
+            },
+            onSelectChange (selectedRowKeys, selectedRows) {
+                this.selectedRowKeys = selectedRowKeys
+                this.selectedRows = selectedRows
+            },
+            resetSearchForm () {
+                this.queryParam = {
+                }
+                this.$refs.table.refresh(true)
+            },
+            base (record, queryParam = {}) {
+                this.visible = true
+                this.modalTitle = '选择信息'
+                this.extraQueryParam = queryParam
+                this.record = record
+                if (this.isCreated) {
+                    this.$refs.table.clearSelected()
+                    this.options.rowSelection.type = this.type
+                    this.handleOk()
+                } else {
+                    this.tableOption()
+                    this.isCreated = true
+                }
+            },
+            handleCancel () {
+                this.visible = false
+                this.confirmLoading = false
+            },
+            handleSelect () {
+                if (this.selectedRowKeys.length === 0) {
+                    this.$message.warn('请至少选择一项信息')
+                } else {
+                    this.confirmLoading = true
+                    this.$emit('selected', this.record, this.selectedRowKeys, this.selectedRows)
+                    this.confirmLoading = false
+                    this.visible = false
+                }
+            },
+            mySelect(selectedRowKeys, selectedRows) {
+                if (this.type === 'radio') {
+                    this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
+                            this.$refs.table.rowSelection.onChange(selectedRowKeys, selectedRows)
+                } else {
+                    let mySelectedRowKeys
+                    let mySelectedRows = this.selectedRows.filter(item => item.id !== selectedRowKeys[0])
+                    if (this.selectedRowKeys.includes(selectedRowKeys[0])) {
+                        mySelectedRowKeys = this.selectedRowKeys.filter(item => item !== selectedRowKeys[0])
+                    } else {
+                        mySelectedRowKeys = [...selectedRowKeys, ...this.selectedRowKeys]
+                        mySelectedRows = [...mySelectedRows, ...selectedRows]
+                    }
+                    this.$refs.table.updateSelect(mySelectedRowKeys, mySelectedRows)
+                            this.$refs.table.rowSelection.onChange(mySelectedRowKeys, mySelectedRows)
+                }
+
+            }
+        }
+    }
+</script>

src/views/customize/report/modules/Detail.vue

@@ -0,0 +1,83 @@
+<template>
+  <a-modal
+    :title='modalTitle'
+    :width='850'
+    :visible='visible'
+    :confirmLoading='confirmLoading'
+    class='ant-modal2'
+    @cancel='handleCancel'
+  >
+    <detail-list title='' :col='2'>
+      <detail-list-item term='自定义报表名称'>{{ model.name }}</detail-list-item>
+      <detail-list-item term='图形类别'>{{ BaseTool.Object.getField(echartTypeMap,model.echartType) }}</detail-list-item>
+      <detail-list-item term='报表检索条件'>{{ model.parameter }}</detail-list-item>
+      <detail-list-item term='报表接口类型'>{{ BaseTool.Object.getField(interTypeMap,model.interType) }}</detail-list-item>
+      <detail-list-item term='数据来源'>{{ model.sqlVal }}</detail-list-item>
+      <detail-list-item term='表格展示字段'>{{ model.columns }}</detail-list-item>
+      <detail-list-item term='添加人'>{{ model.createdUserName }}</detail-list-item>
+      <detail-list-item term='添加时间'>{{ model.createdTime }}</detail-list-item>
+      <detail-list-item term='修改人'>{{ model.updateUserName }}</detail-list-item>
+      <detail-list-item term='修改时间'>{{ model.updateTime }}</detail-list-item>
+    </detail-list>
+
+    <template slot='footer'>
+      <a-button :loading='confirmLoading' type='primary' @click='handleCancel()'>返回</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import DetailList from '@/components/tools/DetailList'
+
+const DetailListItem = DetailList.Item
+
+export default {
+  name: 'CustomizeReportDetail',
+  components: {
+    DetailList,
+    DetailListItem
+  },
+  data () {
+    return {
+      confirmLoading: false,
+      mdl: {},
+      modalTitle: null,
+      visible: false,
+      echartTypeMap: [],
+      interTypeMap: [],
+      // 下拉框map
+      model: {
+        'name': null,
+        'echartType': null,
+        'parameter': null,
+        'interType': null,
+        'sqlVal': null,
+        'columns': null,
+        'status': null,
+        'remark': null,
+        'createdUserId': null,
+        'updateUserId': null,
+        'updateUserName': null,
+        'updateTime': null
+      }
+    }
+  },
+  created () {
+    // 下拉框map
+    this.echartTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOMIZE_REPORT_ECHART_TYPE)
+    this.interTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CUSTOMIZE_REPORT_INTER_TYPE)
+  },
+  methods: {
+    base(record) {
+      this.visible = true
+      this.modalTitle = '详情'
+      this.model = record
+    },
+    handleCancel() {
+      this.visible = false
+      this.confirmLoading = false
+    }
+
+  }
+}
+</script>

src/views/customize/report/modules/ParameterModal.vue

@@ -0,0 +1,194 @@
+<template>
+  <a-modal
+    :title="modalTitle"
+    :width="1200"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    class="ant-modal2"
+    @cancel="handleCancel"
+  >
+    <a-form :form='form'>
+      <row-list :col='2'>
+        <row-item>
+          <a-form-item
+            label='条件名称'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-input
+              v-decorator="['label', {rules: [{required: true, message: '字段名称不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label='对应数据库字段名称'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-input
+              v-decorator="['key', {rules: [{required: true, message: '字段名称不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+
+          <a-form-item
+            label='字段类型'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-select
+              @change="selectVal()"
+              v-decorator="['type', { initValue: 1, rules: [{required: true, message: '字段类型为空'}]}]"
+              placeholder="请选择">
+              <a-select-option
+                v-for="(label,value) in parameterTypeMap"
+                :key="value"
+                :label="label"
+                :value="value">{{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label='字段值'
+            :labelCol='BaseTool.Constant.labelCol'
+            :wrapperCol='BaseTool.Constant.wrapperCol'
+          >
+            <a-textarea placeholder='select类型的值，请以英文,号隔开'
+                        v-decorator="['value']" />
+          </a-form-item>
+        </row-item>
+      </row-list>
+    </a-form>
+    <template slot="footer">
+      <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">取消</a-button>
+      <a-button :loading="confirmLoading" type="primary" @click="handleSelect()">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import { STable, Ellipsis } from '@/components'
+import Detail from './Detail'
+
+export default {
+  name: 'ParameterModal',
+  components: {
+    STable,
+    Ellipsis,
+    Detail
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'radio'
+    },
+    selectedRowKey: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    selectedRow: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      confirmLoading: false,
+      mdl: {},
+      modalTitle: null,
+      visible: false,
+      record: null,
+      form: this.$form.createForm(this),
+      // 查询参数
+      queryParam: {
+      },
+      extraQueryParam: {
+      },
+      projectStartTimeStart: undefined,
+      projectStartTimeEnd: undefined,
+
+      // 下拉框map
+      selectedRowKeys: [],
+      selectedRows: [],
+      parameterTypeMap: [],
+      options: {
+        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: false,
+      isCreated: false
+    }
+  },
+  created () {
+    // 下拉框map
+    this.parameterTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PARAMETER_TYPE)
+  },
+  methods: {
+    selectVal (val) {
+      this.form.setFieldsValue({
+        'value': ''
+      })
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    resetSearchForm () {
+      this.queryParam = {
+      }
+      this.$refs.table.refresh(true)
+    },
+    base (record) {
+      this.visible = true
+      this.modalTitle = '新增查询条件'
+      this.form.resetFields()
+    },
+    handleCancel () {
+      this.visible = false
+      this.confirmLoading = false
+    },
+    handleSelect () {
+      const { form: { validateFieldsAndScroll } } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        if (errors) {
+          return
+        }
+        console.log(values)
+        this.$emit('selected', values)
+        this.confirmLoading = false
+        this.visible = false
+      })
+    },
+    mySelect (selectedRowKeys, selectedRows) {
+      if (this.type === 'radio') {
+        this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
+        this.$refs.table.rowSelection.onChange(selectedRowKeys, selectedRows)
+      } else {
+        let mySelectedRowKeys
+        let mySelectedRows = this.selectedRows.filter(item => item.id !== selectedRowKeys[0])
+        if (this.selectedRowKeys.includes(selectedRowKeys[0])) {
+          mySelectedRowKeys = this.selectedRowKeys.filter(item => item !== selectedRowKeys[0])
+        } else {
+          mySelectedRowKeys = [...selectedRowKeys, ...this.selectedRowKeys]
+          mySelectedRows = [...mySelectedRows, ...selectedRows]
+        }
+        this.$refs.table.updateSelect(mySelectedRowKeys, mySelectedRows)
+        this.$refs.table.rowSelection.onChange(mySelectedRowKeys, mySelectedRows)
+      }
+    }
+  }
+}
+</script>