ChartGrid, rowActions, HiddenList

src/components/form/Form.vue

@@ -99,7 +99,7 @@
             onPosted(data){
                 this.loading = false
                 this.$message({message: this.successInfo || `${this.submitName}成功`, type: 'success'})
-                this.$emit("form-posted", data)
+                this.$emit('form-posted', data)
                 return data
             },
             onValidated (valid, notValidFields) {

src/components/form/Widget.vue

@@ -1,9 +1,6 @@
 <template>
-    <span v-if="field.widget === 'readonly'" style="white-space: pre-wrap">
-        {{value[field.name]}}
-    </span>
-    <span v-else-if="typeof(field.widget) === 'function'" v-html="field.widget(value,field)">
-    </span>
+    <span v-if="field.widget === 'readonly'" style="white-space: pre-wrap">{{value[field.name]}}</span>
+    <span v-else-if="typeof(field.widget) === 'function'" v-html="field.widget(value,field)"></span>
     <el-radio-group v-model="value[field.name]" v-else-if="field.widget === 'radio'" @change="fieldValueChanged"
                     :disabled="field.disabled">
         <el-radio-button :label="c.value" v-for="c in field.choices" :key="c.value">{{ c.display_name}}

src/components/layout/BatchActions.vue

@@ -7,22 +7,38 @@
                :disabled="scopes.select.count===0" :type="a.type"
                :key="a.name">{{a.label}}
     </el-button>
+    <el-dialog :title="dialog.title" v-if="dialog" :visible.sync="showDialog">
+      <component :is="dialog.component" v-bind="[dialog]"></component>
+    </el-dialog>
   </span>
 </template>
 <script>
+//  import _import from '../../router/_import_production'
     export default{
         props: {
             items: Array,
             context: Object,
         },
         data () {
             return {
-                scope: 'select'
+                scope: 'select',
+                dialog: undefined,
+                showDialog: false
             }
         },
         components: {},
         methods: {
             onCommand(action){
+                if(action.dialog) {
+//                    let component = _import(action.dialog.component)
+                    this.dialog = {title:action.label, ...action.dialog}
+                    this.showDialog = true
+                }else {
+                    this.runCommand(action)
+                }
+
+            },
+            runCommand(action) {
                 let scope = this.scopes[this.scope]
                 if (scope.count === 0) {
                     this.$message('请先勾选至少一条记录')

src/components/layout/HiddenList.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <template v-for="item, i in items" v-if="i<current">
+            <slot v-bind="{item}"></slot>
+            <el-divider v-if="i<current-1"></el-divider>
+        </template>
+        <el-divider v-if="current<items.length" content-position="right">
+            <span style="cursor: pointer" @click="showMore">更多<i class="el-icon-arrow-down"></i> </span>
+        </el-divider>
+        <el-divider v-if="current> 1 && current === items.length" content-position="right">
+            <span style="cursor: pointer" @click="current = 1">收起<i class="el-icon-arrow-up"></i> </span>
+        </el-divider>
+    </div>
+</template>
+<script>
+    export default{
+        props: {
+            items: Array,
+            step: {type: Number, default: 10}
+        },
+        data () {
+            return {
+                current: 1
+            }
+        },
+        components: {},
+        methods: {
+            showMore () {
+                this.current = Math.min(this.current + this.step, this.items.length)
+            }
+        },
+        computed: {}
+    }
+</script>

src/components/model/Form.vue

@@ -153,6 +153,7 @@
             {
                 let payLoad = {model: this.model.config, data, intent: this.intent}
                 this.$emit("form-posted", payLoad)
+                this.$emit('input', data)
             },
             toDelete(){
                 this.$emit("model-delete", this)
@@ -199,6 +200,9 @@
             },
         },
         watch: {
+            value(val){
+                this.formValue = val
+            },
             formValue(val){
                 this.model.data = val
                 this.$emit("input", val)

src/components/model/Table.vue

@@ -342,20 +342,32 @@
                 }
             },
             rtAttrs () {
+                let mc = this.model.config
                 let bactions = {}
-                if (this.model.config.actions) {
-                    this.model.config.actions.forEach(a => {
+                if (mc.actions) {
+                    mc.actions.forEach(a => {
                         bactions[a.name] = a
                         a.do = () => {
                             this.$router.push(`${this.model.getListUrl()}${a.name}/`)
                         }
                     })
                 }
-                let avairableActions = {...this.avairableActions, ...bactions}
+                let ractions = {}
+                if (mc.itemActions) {
+                    mc.itemActions.forEach(a => {
+                        ractions[a.name] = a
+                        a.do = ({row}) => {
+                            this.$router.push(`${this.model.getDetailUrl(row.id)}${a.name}/`)
+                        }
+                    })
+                }
+
+                let avairableActions = {...this.avairableActions, ...bactions, ...ractions}
                 let topActions = ['refresh', 'create', ['download'].concat(Object.keys(bactions))]
+                let rowActions = ['edit'].concat(Object.keys(ractions)).concat([[this.parentMultipleRelationField ? 'removeFromParent' : 'delete']])
                 return {
                     topActions,
-                    rowActions: ['edit', [this.parentMultipleRelationField ? 'removeFromParent' : 'delete']],
+                    rowActions,
                     excelFormat: this.excelFormat,
                     permissionFunction: this.checkPermission,
                     dblClickAction: 'edit',

src/components/stats/ChartGrid.vue

@@ -1,9 +1,11 @@
 <template>
     <el-row>
-        <el-col :sm="c.sm || 24" :md="c.md || 12" :xl="c.xl || 8" v-for="c in items" :key="c.name" v-loading="loading"
+        <el-col :sm="c.sm || c.span || 24" :md="c.md || c.span ||  12" :xl="c.xl || c.span || 8" v-for="c in items"
+                :key="c.name" v-loading="loading"
                 :element-loading-text="loading">
             <template v-if="chartData[c.name]">
-                <data-table v-if="c.type === 'table'" :group="true" :value="genTableData(c)" :fields="c.fields"
+                <data-table v-if="c.type === 'table'" :title="c.title" :group="c.group" :value="genTableData(c)"
+                            :items="c.fields"
                             :options="Object.assign({maxHeight:500},c.options)"></data-table>
                 <chart v-else :options="chartOptions[c.name]" :auto-resize="true"></chart>
             </template>
@@ -13,7 +15,7 @@
 <script>
     import Qs from 'qs'
     import server_response from 'vue-django/src/mixins/server_response'
-    import DataTable from 'vue-django/src/components/table/DataTable.vue'
+    import DataTable from 'vue-django/src/components/table/Table.vue'
     import {zipObject} from 'lodash'
     let OPTIONS_TOOLBOX = {
         show: true,
@@ -57,10 +59,7 @@
                 return data
             },
             genDailyOption(item, data){
-                return Object.assign({}, COMMON_OPTIONS, {
-                    title: {
-                        text: item.title
-                    },
+                return {
                     visualMap: item.visualMap,
                     xAxis: {
                         type: 'category',
@@ -75,16 +74,13 @@
                         name: item.title,
                         data: data.map((a) => a[1])
                     }]
-                })
+                }
             },
             genTreeMapOption(item, data){
 
             },
             genFunnelOption (item, data) {
-                return Object.assign({}, COMMON_OPTIONS, {
-                    title: {
-                        text: item.title
-                    },
+                return {
                     tooltip: {
                         trigger: 'item',
                         formatter: "{a} <br/>{b} : {c}%"
@@ -128,11 +124,11 @@
                                 }
                             },
                             data: data.map(a => {
-                                return {value: (a[1]/data[0][1]*100).toFixed(0), name: a[0]}
+                                return {value: (a[1] / data[0][1] * 100).toFixed(0), name: a[0]}
                             })
                         }
                     ]
-                })
+                }
             },
             genBarOption (item, data){
                 let dataZoom = []
@@ -148,10 +144,7 @@
                             end: 900 / data.length
                         })
                 }
-                return Object.assign({}, COMMON_OPTIONS, {
-                    title: {
-                        text: item.title
-                    },
+                return {
                     dataZoom,
                     yAxis: {
                         type: 'category',
@@ -170,13 +163,17 @@
                         name: item.title,
                         data: data.map((a) => a[1])
                     }]
-                })
+                }
             },
             loadTimeData(period){
                 let context = {measures: this.items.map((a) => a.name), period: `${period[0]}至${period[1]}`}
                 let qs = Qs.stringify(context, {indices: false})
                 this.loading = "加载中"
-                this.$http.get(`${this.url}?${qs}`).then(({data}) => {
+                let url = this.url
+                if (!url.includes('?')) {
+                    url = url.concat('?')
+                }
+                this.$http.get(`${url}&${qs}`).then(({data}) => {
                     this.loading = false
                     let ds = data
                     if (this.base) {
@@ -191,7 +188,14 @@
                 let res = {}
                 this.items.forEach((a) => {
                     let optionFunc = a.type == 'daily' ? this.genDailyOption : (a.type === 'funnel' ? this.genFunnelOption : this.genBarOption)
-                    res[a.name] = optionFunc(a, this.chartData[a.name])
+                    res[a.name] = {
+                        ...COMMON_OPTIONS,
+                        title: {
+                            text: a.title
+                        },
+                        ...optionFunc(a, this.chartData[a.name]),
+                        ...a.options
+                    }
                 })
                 return res
             }