Merge branch 'master' of github.com:szuprefix/vue-django

package.json

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

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="app" v-cloak>
+    <div id="app" v-cloak :class="{mobile_mode:isMobile}">
         <router-view v-if="layout === 'main'">
         </router-view>
         <template v-else>
@@ -24,7 +24,7 @@
                 </el-col>
             </el-row>
             <!--<login-view></login-view>-->
-            <drawer></drawer>
+            <drawer :size="isMobile?'50%': '30%'"></drawer>
         </template>
     </div>
 </template>
@@ -54,7 +54,14 @@
             layout (){
                 return this.$route.meta.layout
             },
-            ...mapState(['user', 'system_name', 'party'])
+            ...mapState(['user', 'system_name', 'party']),
+            isMobile () {
+                let ua = navigator.userAgent
+                if (ua.match(/Android/i) || ua.match(/webOS/i) || ua.match(/iPhone/i) || ua.match(/iPad/i) || ua.match(/iPod/i) || ua.match(/BlackBerry/i) || ua.match(/Windows Phone/i)) {
+                    return true
+                }
+                return false
+            }
         },
         methods: {
             logout(){

src/base.css

@@ -7,6 +7,10 @@
     visibility: hidden;
 }
 
+.mobile_mode .hover-show {
+    visibility: visible;
+}
+
 .el-table__row:hover .hover-show, .el-tree-node__content:hover .hover-show {
     visibility: visible;
     cursor: pointer;

src/components/async/Progress.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <el-timeline :reverse="$attrs.reverse">
+            <el-timeline-item
+                    v-for="(m, i) in messages"
+                    :key="i"
+                    :timestamp="m.timestamp">
+               {{m.status}} {{m.text}}
+            </el-timeline-item>
+        </el-timeline>
+    </div>
+</template>
+<script>
+    import progress from './progress'
+    import {parseTime} from '../../utils/filters'
+    export default{
+        props: {
+            task: Object
+        },
+        data () {
+            return {
+                messages: []
+            }
+        },
+        components: {},
+        created () {
+            progress(this.task, {progress: this.onProgress}).then((rs) => {
+                this.$emit('done', rs)
+            })
+        },
+        methods: {
+            onProgress(m) {
+                this.messages.push({...m, timestamp: parseTime(new Date(), '{h}:{i}:{s}')})
+            }
+        },
+        computed: {}
+    }
+</script>

src/components/async/progress.js

@@ -0,0 +1,46 @@
+/**
+ * Created by denishuang on 2018/3/12.
+ */
+export default  function (task, context) {
+    let sm = {
+        'PENDING': '排队中',
+        'STARTED': '开始执行',
+        'RETRY': '重试',
+        'SUCCESS': '任务成功',
+        'FAILURE': '任务失败',
+        ...context.status
+    }
+    let progress = context.progress || function () {}
+    let promise = new Promise((resolve, reject) => {
+        let s = task.status
+        let ps = s.split(' ')
+        // progress({status:sm[ps[0]], text: ps[1]})
+        let protocal = location.protocol === "https:" ? "wss" : "ws"
+        let url = `${protocal}://${location.host}/api/common/async_result/${task.id}/`
+        let ws = new WebSocket(url)
+        ws.onload = function () {
+            console.log('websocket conneted.')
+        }
+        ws.onmessage = (e) => {
+            let rs = JSON.parse(e.data)
+            if (rs.task_id !== task.id) {
+                console.log(`got other task id , ignore: ${rs.task_id}`)
+                return
+            }
+            ps = rs.status.split(' ')
+            progress({status:sm[ps[0]] || ps[0], text: ps[1]})
+            console.log(rs)
+            if (['SUCCESS', 'FAILURE'].includes(rs.status)) {
+                ws.close()
+                ws = null
+                if (rs.status === 'SUCCESS') {
+                    resolve(rs)
+                } else if (rs.status === 'FAILURE') {
+                    reject({code: 500, msg: rs.result, asyncResult: rs})
+                }
+            }
+        }
+
+    })
+    return promise
+}

src/components/layout/Actions.vue

@@ -39,7 +39,7 @@
         },
         data () {
             return {
-                _items: [],
+                actionItems: [],
                 dialog: undefined
             }
         },
@@ -69,11 +69,11 @@
                 return icon && (icon.includes(' ') ? icon : `fa fa-${icon}`) || undefined
             },
             normalizeItems() {
-                this._items = arrayNormalize(this.items, this.map, this.normalizeItem)
+                this.actionItems = arrayNormalize(this.items, this.map, this.normalizeItem)
             }
         },
         computed: {
-//            _items (){
+//            actionItems (){
 //                return this.items.map(a => {
 //                    if (typeof a === 'string') {
 //                        a = this.map[a]
@@ -82,12 +82,12 @@
 //                })
 //            },
             showActions () {
-                return this._items.filter((a) => {
+                return this.actionItems.filter((a) => {
                     return !(a instanceof Array)
                 })
             },
             dropdownActions () {
-                return this._items.filter((a) => {
+                return this.actionItems.filter((a) => {
                     return (a instanceof Array)
                 }).reduce((a, b) => a.concat(b), []).filter((a) => {
                     return !a.show || a.show()

src/components/layout/Drawer.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-drawer v-if="drawer" :visible.sync="drawer" @closed="onDialogDone">
+    <el-drawer v-if="drawer" v-bind="[$attrs]" :visible.sync="drawer" @closed="onDialogDone">
         <component :is="drawer.component" v-bind="[drawer.context]" @done="onDialogDone"></component>
     </el-drawer>
 </template>

src/components/model/Form.vue

@@ -5,7 +5,7 @@
                 <slot name="actions"></slot>
             </el-col>
             <el-col :span="6" class="flex-right">
-                <actions :items="_topActions"></actions>
+                <actions :items="topActionItems" :context="{model: model}"></actions>
             </el-col>
         </el-row>
         <x-form :url="url" :items="formItems" v-model="formValue" ref="form" :options="options.form" :disabled="disabled"
@@ -183,6 +183,15 @@
                 m = m || this
                 let ps = this.$store.state.user.model_permissions[m.appModel]
                 return ps && ps.includes(p)
+            },
+            normalizeActions(actions){
+                return arrayNormalize(actions, this.avairableActions, (a) => {
+                    if (a instanceof Array) {
+                        return this.normalizeActions(a)
+                    } else {
+                        return a
+                    }
+                })
             }
         },
         computed: {
@@ -192,9 +201,9 @@
             method () {
                 return this.mid ? "put" : "post"
             },
-            _topActions(){
-                let tas = this.topActions || get(this.model.viewsConfig, 'form.topActions') || ['delete', 'save', 'saveAndAnother']
-                return arrayNormalize(tas, this.avairableActions)
+            topActionItems () {
+                let tas = this.topActions || get(this.model.viewsConfig, 'form.topActions') || ['save', 'saveAndAnother', ['delete']]
+                return this.normalizeActions(tas)
             },
             disabled () {
                 return !(this.checkPermission('update', this.model) || this.checkPermission('create', this.model))