batch_create, table dump,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-django",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "个人实验项目, 本框架的目标是借鉴并超越django admin的自动化思想, 实现UI前端的极简快速定制开发",
   "main": "index.js",
   "files": [

src/components/layout/Actions.vue

@@ -3,7 +3,7 @@
         <el-button-group v-if="showActions.length>0">
             <template v-for="a in showActions">
                 <el-button :type="a.type" :title="a.title" size="small" @click="handleCommand(a.do)" v-if="!a.show || a.show()" :key="a.name">
-                    <i :class="`fa fa-${a.icon}`"></i>
+                    <i :class="`fa fa-${a.icon}`"></i>{{a.label}}
                 </el-button>
             </template>
         </el-button-group>

src/components/layout/SideBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-menu router :default-active="$route.path" :collapse="false" :default-openeds="['0']" class="sidebar">
+    <el-menu router :default-active="$route.path" :collapse="false" :default-openeds="defaultOpeneds" class="sidebar">
         <template v-for="mg,i in menus.items" v-if="!mg.hidden">
             <el-submenu :index="`${i}`" :key="mg.title" v-if="mg.items.length>1">
                 <template slot="title">
@@ -26,7 +26,10 @@
     export default {
         computed: mapState(['user']),
         data () {
-            return {menus}
+            return {
+                menus,
+                defaultOpeneds: ['0']
+            }
         },
         methods: {
             hasPerm(p){

src/components/layout/table/DataTable.vue

@@ -1,21 +1,26 @@
 <template>
-    <el-table :data="_value" ref="table" :span-method="spanMethod" :cell-class-name="options.cellClassName">
-        <template slot="left"></template>
-        <data-table-column :field="f" v-for="f in _fields" :key="f.name"></data-table-column>
-        <template slot="right"></template>
-    </el-table>
+    <el-popover placement="right-start" trigger="hover">
+        <actions :items="actions"></actions>
+        <el-table slot="reference" :data="_value" ref="table" :span-method="spanMethod" v-loading="loading"
+                  :element-loading-text="loading" :cell-class-name="options.cellClassName">
+            <template slot="left"></template>
+            <data-table-column :field="f" v-for="f in _fields" :key="f.name"></data-table-column>
+            <template slot="right"></template>
+        </el-table>
+    </el-popover>
 </template>
 <script>
     import {percent, toThousandslsFilter} from '../../../utils/filters'
     import {sortBy} from 'lodash'
     import DataTableColumn from './DataTableColumn.vue'
-    function flatten(ns, children_field_name){
+    import Actions from '../Actions.vue'
+    function flatten(ns, children_field_name) {
         let r = []
         ns.forEach(a => {
             let sns = a[children_field_name]
-            if(sns){
+            if (sns) {
                 r = r.concat(flatten(sns, children_field_name))
-            }else{
+            } else {
                 let n = Object.assign({}, a)
                 // delete n[children_field_name]
                 r.push(n)
@@ -29,20 +34,49 @@
             value: Array,
             defaultWidget: [Function, Object],
             group: false,
-            options:{type:Object, default:() => {}},
+            options: {
+                type: Object, default: () => {
+                }
+            },
             fields: {
                 type: Array, default: function () {
                     return [{name: '__str__', label: '名称'}]
                 }
             },
         },
         data () {
-            return {}
+            return {
+                loading: false,
+                actions:[{
+                    icon: 'download',
+                    label: '导出',
+                    do: this.dumpExcelData
+                }]
+            }
         },
-        components: {DataTableColumn},
+        components: {DataTableColumn,Actions},
         methods: {
+            getGridData(data){
+                let ds = data.map((d) => {
+                    return this.fieldNames.map((a) => d[a])
+                })
+                return [this.fieldNames].concat(ds)
+            },
+            dumpExcelData(){
+                this.loading = '正在导出'
+                let data = this.value
+                import('xlsx').then(XLSX => {
+                    let wb = XLSX.utils.book_new()
+                    let sds = this.getGridData(data)
+                    let ws = XLSX.utils.aoa_to_sheet(sds)
+                    XLSX.utils.book_append_sheet(wb, ws, 'Sheet 1')
+                    XLSX.writeFile(wb, `${this.options.title || '导出数据'}.xlsx`)
+                    this.loading = false
+                })
+
+            },
             doLayout () {
-              this.$refs.table.doLayout()
+                this.$refs.table.doLayout()
             },
             spanMethod ({row, column, rowIndex, columnIndex}){
                 if (!this.group) {

src/components/stats/ChartGrid.vue

@@ -1,26 +1,41 @@
 <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" :element-loading-text="loading">
-            <chart v-if="chartData[c.name]" :options="chartOptions[c.name]" :auto-resize="true"></chart>
+        <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"
+                :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" :options="c.options || {}"></data-table>
+               <chart v-else :options="chartOptions[c.name]" :auto-resize="true"></chart>
+           </template>
         </el-col>
     </el-row>
 </template>
 <script>
     import Qs from 'qs'
     import server_response from 'vue-django/src/mixins/server_response'
+    import DataTable from 'vue-django/src/components/layout/table/DataTable.vue'
+    import {zipObject} from 'lodash'
     let OPTIONS_TOOLBOX = {
         show: true,
-        right:'5%',
-        feature : {
+        right: '5%',
+        feature: {
             dataView: {show: true, title: '数据视图', readOnly: true},
         }
     }
+    let COMMON_OPTIONS = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross'
+            }
+        },
+        toolbox: OPTIONS_TOOLBOX,
+    }
 
     export default{
-        mixins:[server_response],
+        mixins: [server_response],
         props: {
             period: Array,
-            url:String,
+            url: String,
             items: Array,
             base: String
         },
@@ -29,24 +44,23 @@
                 chartData: {}
             }
         },
-        components: {},
+        components: {DataTable},
         mounted() {
             this.loadTimeData(this.period)
         },
         methods: {
+            genTableData(c){
+                let fns = c.fields.map(f => f.name)
+                let data=this.chartData[c.name].map((d) => zipObject(fns, d))
+                console.log(data)
+                return data
+            },
             genDailyOption(item, data){
-                return {
+                return Object.assign({}, COMMON_OPTIONS, {
                     title: {
                         text: item.title
                     },
                     visualMap: item.visualMap,
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross'
-                        }
-                    },
-                    toolbox: OPTIONS_TOOLBOX,
                     xAxis: {
                         type: 'category',
                         data: data.map((a) => a[0])
@@ -60,7 +74,10 @@
                         name: item.title,
                         data: data.map((a) => a[1])
                     }]
-                }
+                })
+            },
+            genTreeMapOption(item, data){
+
             },
             genBarOption(item, data){
                 let dataZoom = []
@@ -76,18 +93,11 @@
                             end: 900 / data.length
                         })
                 }
-                return {
+                return Object.assign({}, COMMON_OPTIONS, {
                     title: {
                         text: item.title
                     },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross'
-                        }
-                    },
                     dataZoom,
-                    toolbox: OPTIONS_TOOLBOX,
                     yAxis: {
                         type: 'category',
                         data: data.map((a) => a[0])
@@ -105,7 +115,7 @@
                         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]}`}
@@ -114,8 +124,8 @@
                 this.$http.get(`${this.url}?${qs}`).then(({data}) => {
                     this.loading = false
                     let ds = data
-                    if(this.base){
-                        ds=ds[this.base]
+                    if (this.base) {
+                        ds = ds[this.base]
                     }
                     this.chartData = Object.assign({}, ds)
                 }).catch(this.onServerResponseError)
@@ -125,7 +135,7 @@
             chartOptions(){
                 let res = {}
                 this.items.forEach((a) => {
-                    let optionFunc = a.type == 'daily' ? this.genDailyOption: this.genBarOption
+                    let optionFunc = a.type == 'daily' ? this.genDailyOption : this.genBarOption
                     res[a.name] = optionFunc(a, this.chartData[a.name])
                 })
                 return res

src/utils/batch_creator.js

@@ -26,7 +26,7 @@ function flatten(ns, children_field_name) {
 function ModelAccount(appModelName) {
     // let model={}
     let model = Register.get(appModelName)
-    // model.loadOptions()
+    // console.log(model)
     return {
         dmap: {},
         count: 0,
@@ -166,7 +166,8 @@ function ModelAccount(appModelName) {
             return Object.keys(this.dmap).filter(a => this.dmap[a].id < 0).map(a => this.dmap[a])
         },
         getFieldMap(){
-            return model.config.rest_options.actions.POST
+            let actions = model.config.rest_options.actions
+            return actions.POST || actions.LIST
         },
         getTableItems() {
             let r = []