统计组件增加列表类型

src/business/platform/data/templaterender/templates/list.vue

@@ -1242,7 +1242,6 @@ export default {
                 rowHandle: rowHandle,
                 searchForm: searchForms.length > 0 ? { forms: searchForms } : null
             }
-            console.log(this.listConfig)
 
             // 判断地点是否第一层级
             const position = this.$store.getters.userInfo.positions

src/business/platform/form/formrender/dynamic-form/dynamic-form.vue

@@ -8,14 +8,14 @@
                     {{ formDef.name }}
                     <span v-if="formDef && formDef.flowName">{{ formDef.flowName }}</span>
                     <relevance-table
-                        v-if="titleList.length > 0 && formParams.formAttrs.customClass.includes('true')"
+                        v-if="titleList.length > 0 && (formParams.formAttrs.customClass && formParams.formAttrs.customClass.includes('true'))"
                         :list="titleList"
                         :form="form"
                         class="relevanceTable"
                     />
                     <Statis-or-record-table
-                        v-if="StaOrRec.length > 0"
-                        :StaOrRec="StaOrRec"
+                        v-if="record.length > 0"
+                        :list="record"
                         :form="form"
                     />
                 </div>
@@ -171,7 +171,7 @@
                 invalidFields: {},
                 activeStep: 0,
                 titleList: [],
-                StaOrRec: []
+                record: []
             }
         },
         computed: {
@@ -291,7 +291,7 @@
             //     }
             // }) 
             this.titleList = []
-            this.StaOrRec = []
+            this.record = []
         },
         methods: {
             /**
@@ -604,7 +604,7 @@
             },
             // 将对象参数传入， 进行渲染
             getStatisOrRecord(type) {
-                this.StaOrRec = type
+                this.record = type
             }
             /**
              * 获取表单字段的具体控件组件实例

src/business/platform/form/formrender/dynamic-form/mixins/StatisOrRecordTable.vue

@@ -1,89 +1,90 @@
 <!-- 表单内预览统计页面及记录合资页面 -->
 <template>
-    <div>
-        <ul style="padding: 0px;margin: 0px;">
-            <li v-for="(el, index) in StaOrRec" :key="index" class="tableClazz" @click="openDataTemplate(el)">
-                <!-- 统计页面呈现-->
-                <el-tag>
-                    {{ el.title }}
-                </el-tag>
-                <el-popover
-                    v-if="el.type =='Statis'"
-                    v-model="isShow"
-                    width="380"
-                    style="margin-left: 90px; padding-left: 100px;"
-                    trigger="manual"
-                >
-                    <span class="el-icon-close" style="float: right;" @click.stop="closePopo" />
-                    <template-statis v-if="isShow" static="line" :shows="el.show" />
-                </el-popover>
-            </li>
-        </ul>
-
+    <div class="relev">
+        <div v-for="(el, index) in list" :key="index" class="sin" @click="handleOpen(el)">
+            <!-- 统计页面呈现-->
+            <el-tag effect="dark" size="small">
+                {{ el.title }}
+            </el-tag>
+            <el-popover
+                v-if="el.type =='Statis'"
+                v-model="isShow"
+                width="380"
+                style="margin-left: 90px; padding-left: 100px;"
+                trigger="manual"
+            >
+                <span class="el-icon-close" style="float: right;" @click.stop="closePopover" />
+                <template-statis v-if="isShow" static="line" :shows="el.show" />
+            </el-popover>
+        </div>
     </div>
 </template>
 
 <script>
 import $dialog from '@/utils/dialog'
 import templateStatis from '@/views/statistics/index.vue'
+
 export default {
     components: {
-        templateStatis: templateStatis
+        templateStatis
     },
     props: {
-        StaOrRec: { // 传入的开启对话框数组
+        list: { // 传入的开启对话框数组
             type: Array
         },
-        form: { // 当前表单示例
+        form: { // 当前表单实例
             type: Object,
             default: () => {}
         }
     },
     data () {
         return {
-            isShow: false
+            isShow: false,
+            templateData: {
+                Record: {
+                    setting: {}
+                },
+                normal: {
+                    setting: {
+                        center: true
+                    }
+                }
+            }
         }
     },
     methods: {
-        openDataTemplate (el) {
-            if (el.type === 'Record') {
-                this.openDataTemplateDialog(this.form, {
-                    type: el.type
-                })
-            } else if (el.type === 'Statis') { // 如果是统计， 则用另外的形式展示组件页面
+        handleOpen (el) {
+            if (el.type === 'Statis') {
                 this.isShow = true
-            } else if (el.type === 'param') { // 如果是统计， 则用另外的形式展示组件页面
-                this.openDataTemplateParamDialog(this.form, {
-                    type: el.type
-                })
-            } else {
-                alert('当前点击的数据，参数type错误')
+                return
             }
+            this.openDataTemplateDialog(this.form, {
+                type: el.type,
+                title: el.title,
+                templateId: el.templateId,
+                dynamicParams: el.filter
+            })
         },
-        openDataTemplateDialog (form, { type }) {
-            // 弹窗打开
-            /*
-            templateStatis: () => import ('@/views/statistics/index.vue')
-            <template-statis v-if="type =='Statis'" static="line" shows="[]" />
-            */
+        openDataTemplateDialog (form, { type, title, templateId, dynamicParams }) {
             $dialog({
                 components: {
-                    templateList: () => import ('@/views/platform/bpmn/bpmInstHis/list.vue')
+                    templateList: type === 'normal' ? () => import ('@/views/platform/data/dataTemplate/template-list.vue') : () => import ('@/views/platform/bpmn/bpmInstHis/list.vue')
                 },
                 data () {
                     return {
-                        type: type
+                        height: document.body.clientHeight - 150,
+                        type,
+                        title,
+                        templateId,
+                        dynamicParams
                     }
                 },
-                template: `<div style="height:600px;">
-
-                        <template-list v-if="type =='Record'" location="absolute" />
-
-                  </div>`
+                template: type === 'normal' ? `<template-list v-if="type === 'normal'" :template-id="templateId" :height="height" :dynamic-params="dynamicParams" />` : `<div style="height:600px;"><template-list v-if="type === 'Record'" location="absolute" /></div>`
             }, {
                 dialog: {
                     appendToBody: true,
-                    width: '80%'
+                    width: '80%',
+                    ...this.templateData[type].setting
                 }
             }, (tpl) => {
                 // 关掉自定义浮窗
@@ -97,56 +98,22 @@ export default {
                 form.dialogTemplate = null
             })
         },
-        /* 关闭*/
-        closePopo () {
+        closePopover () {
             this.isShow = false
-        },
-        openDataTemplateParamDialog (form, { type }) {
-            // 弹窗打开
-            /*
-            templateStatis: () => import ('@/views/statistics/index.vue')
-            <template-statis v-if="type =='Statis'" static="line" shows="[]" />
-            */
-
-            $dialog({
-                components: {
-                    //    templateList: () => import ('@/views/detection/jtsjpz/view.vue'),
-                },
-                data () {
-                    return {
-                        type: type
-                    }
-                },
-                template: `<div style="height:600px;">
-                        <template-list v-if="type =='param'" location="absolute" />
-                        </div>`
-            }, {
-                dialog: {
-                    appendToBody: true,
-                    width: '60%'
-                }
-            }, (tpl) => {
-                // 关掉自定义浮窗
-                form.customComponent = null
-                // 打开弹窗
-                form.dialogTemplate = tpl
-            }).catch((_this) => {
-                // 标识为不显示
-                _this.visible = false
-                // 关掉弹窗
-                form.dialogTemplate = null
-            })
         }
     }
 }
 </script>
 
-<style>
-  .tableClazz{
-    cursor: pointer;
-    padding: 5px 5px;
-    font-size: 12px;
-     float: right;
-     margin-top: -1.25rem;
-  }
+<style lang="less" scoped>
+    .relev{
+        width: 100%;
+        display: flex;
+        flex-flow: wrap;
+        justify-content: flex-end;
+        .sin{
+            margin: 5px;
+            cursor: pointer;
+        }
+    }
 </style>

src/business/platform/form/formrender/dynamic-form/mixins/relevanceTable.vue

@@ -80,6 +80,7 @@ export default {
     justify-content: flex-end;
     .sin{
         margin: 5px;
+        cursor: pointer;
     }
 }
 </style>

src/utils/dialog.js

@@ -1,79 +1,79 @@
 import Vue from 'vue'
 
-export default function(component, options = { dialog: {}}, cb) {
-  return new Promise(async(resolve, reject) => {
-    const dialog = {
-      appendToBody: true, // 对话框遮罩层是否插入至 body 元素上
-      scrollToTop: false,
-      ...options.dialog
-    }
-    // const footer = options.footer
-
-    const template = Vue.extend({
-      components: {
-        'ibps-dialog-component': component
-      },
-      data() {
-        return {
-          visible: true,
-          wrap: null
-        }
-      },
-      methods: {
-        onSubmit(data) {
-          resolve(this, data)
-        },
-        onCancel(data) {
-          reject(this, data)
-        },
-        onClose(done) {
-          done()
-          this.onCancel()
-        },
-        scrollToTop() {
-          if (this.wrap.scrollTop) {
-            this.wrap.scrollTop -= 200
-            requestAnimationFrame(this.scrollToTop)
-          }
-        },
-        toTop() {
-          this.wrap = document.querySelector('.el-dialog__wrapper')
-          this.scrollToTop()
+export default function (component, options = { dialog: {}}, cb) {
+    return new Promise(async (resolve, reject) => {
+        const dialog = {
+            appendToBody: true, // 对话框遮罩层是否插入至 body 元素上
+            scrollToTop: false,
+            ...options.dialog
         }
-      },
-      render() {
-        var h = arguments[0]
-        return h('el-dialog', {
-          'attrs': {
-            ...dialog,
-            class: dialog.className,
-            visible: this.visible,
-            beforeClose: this.onClose
-          }
-        }, [h('ibps-dialog-component',
-          {
-            'on': {
-              'submit': this.onSubmit,
-              'cancel': this.onCancel
-            }
-          })]
-        )
+        // const footer = options.footer
 
-        // (
-        //   <el-dialog
-        //     {...{ attrs: data }}
-        //     class={data.className}
-        //     visible={this.visible}
-        //     beforeClose={this.close}
-        //   >
-        //     <ibps-dialog-component onSubmit={this.submit} onCancel={this.cancel} {...options} />
-        //     <div v-if={footer} slot='footer' >
-        //       测试
-        //     </div>
-        //   </el-dialog>
-        // )
-      }
+        const template = Vue.extend({
+            components: {
+                'ibps-dialog-component': component
+            },
+            data () {
+                return {
+                    visible: true,
+                    wrap: null
+                }
+            },
+            methods: {
+                onSubmit (data) {
+                    resolve(this, data)
+                },
+                onCancel (data) {
+                    reject(this, data)
+                },
+                onClose (done) {
+                    done()
+                    this.onCancel()
+                },
+                scrollToTop () {
+                    if (this.wrap.scrollTop) {
+                        this.wrap.scrollTop -= 200
+                        requestAnimationFrame(this.scrollToTop)
+                    }
+                },
+                toTop () {
+                    this.wrap = document.querySelector('.el-dialog__wrapper')
+                    this.scrollToTop()
+                }
+            },
+            render () {
+                var h = arguments[0]
+                return h('el-dialog', {
+                    'attrs': {
+                        ...dialog,
+                        class: dialog.className,
+                        visible: this.visible,
+                        beforeClose: this.onClose
+                    }
+                }, [h('ibps-dialog-component',
+                    {
+                        'on': {
+                            'submit': this.onSubmit,
+                            'cancel': this.onCancel
+                        }
+                    })]
+                )
+
+                // (
+                //   <el-dialog
+                //     {...{ attrs: data }}
+                //     class={data.className}
+                //     visible={this.visible}
+                //     beforeClose={this.close}
+                //   >
+                //     <ibps-dialog-component onSubmit={this.submit} onCancel={this.cancel} {...options} />
+                //     <div v-if={footer} slot='footer' >
+                //       测试
+                //     </div>
+                //   </el-dialog>
+                // )
+            }
+        })
+        cb && cb(template)
     })
-    cb && cb(template)
-  })
 }