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

doc/config配置.md

@@ -0,0 +1,64 @@
+# Config 文件配置
+
+## 创建新的app
+
+1. 首先在apps.js 文件中将app加入到apps中
+
+   ```
+   let apps = {
+   	'app_name':{
+   		verbose_name: '在侧边栏显示的列名'
+   		icon: 'el ui 中的icon',
+   		menu: '上级菜单',
+   		itemActions:[
+   			{name: '取名', icon: '图标', title: '标题', do:'执行的命令'}
+   		]
+   	}
+   }
+   ```
+
+
+
+2. 在src/views目录下创建app对应的目录，并创建对应的子目录如： baidu/user为百度app下的user目录，并在user目录下创建config.js文件, 通过配置config.js可以生成对应django model中对应表的列表页。例如在django中我们startapp 名为baidu,并添加了user的model，对应数据库中的baidu_user表，在前端vue配置config文件即可自动生成对应的列表页，省去了创建列表页的繁琐。下面展示部分配置：
+
+   ```
+   function search_post({row}){
+       console.log(row)
+   }
+   export default {
+       list: {
+           items: ['username', 'age', 'city'],
+           options: {
+               remoteTable:{
+                   rowActions:[{name:'anyname', label: '按钮上的文字', do:search_post}]
+               }
+           },
+           batchActions:[
+               {
+                   name: 'name',
+                   api: 'batch_disable',
+                   context: {'enable_flag': false},
+                   label: '禁用',
+                   notice: '禁用将不再显示.'
+               }
+           ]
+   
+       }
+   }
+   ```
+
+   其中list表示列表的配置，items用于配置显示的列，代码表示显示username, age, city三列, options用于配置表格，在remoteTable下可以配置行操作按钮, name可以随意设置，label设置按钮文字，do设置执行的命令。
+
+   **特别注意：do如果设置为方法名（不带括号）则会调用前面设置的function如上面的search_post方法，而且会自动传参过去，如上面的row就是传入的参数，里面包含了行信息。除此之外还会有column, store等参数可选。如果do后面跟随字符串如 'baidu/user/add' 则点击按钮后会访问'baidu/user/add.vue' , 我们可以使用this.$attrs 获取row的参数。**
+
+   batchActions用于批处理数据，批处理多行信息如删除等操作。其中name可以随意设置，api为后端api, 如示例代码将会调用  url/api/baidu/user/batch_disable 方法，并会默认传入每行的id, 并附带context中的参数enable_flag.   label设置顶部按钮文本，notice设置弹出的提示。
+
+   后端的api的设计：
+
+   ```
+   @decorators.action(['POST'], detail=False)
+       def batch_disable(self, request):
+           return self.do_batch_action('is_active')
+   ```
+
+   后端使用do_batch_action可以用来处理请求，如上面的代码可以将 is_active 字段设置为true, 因为is_active字段是boolean类型的，do_batch_action 默认支持处理boolean数据， 如果哟啊将is_active设为false则需要传入context.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-django",
-  "version": "0.9.5",
+  "version": "0.9.9",
   "description": "个人实验项目, 本框架的目标是借鉴并超越django admin的自动化思想, 实现UI前端的极简快速定制开发",
   "main": "index.js",
   "files": [
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/szuprefix/vue-django#readme",
   "dependencies": {
-    "axios": "^0.19.0",
+    "axios": ">=0.21.1",
     "date-fns": "^1.29.0",
     "element-ui": "^2.7.2",
     "js-cookie": "^2.2.0",
@@ -60,7 +60,7 @@
     "vue-loader": "^11.1.4",
     "vue-template-compiler": "^2.1.8",
     "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2",
+    "webpack-dev-server": ">=3.1.11",
     "jsonlint": "^1.6.2"
   }
 }

src/App.vue

@@ -1,7 +1,8 @@
 <template>
     <div id="app" v-cloak :class="{mobile_mode:isMobile}">
-        <router-view v-if="layout === 'main'">
-        </router-view>
+        <template v-if="layout === 'main'">
+            <component :is="view"></component>
+        </template>
         <template v-else>
             <el-menu class="el-menu-demo" mode="horizontal" router>
                 <el-menu-item index="/" class="brand">
@@ -37,7 +38,9 @@
     import LoginView from './views/auth/login.vue'
     export default {
         data () {
-            return {}
+            return {
+                view: null
+            }
         },
         components: {
             SideBar,
@@ -50,6 +53,19 @@
                 this.$router.replace('/auth/login/')
             })
         },
+        methods: {
+            logout(){
+                this.$confirm("确定要退出登录吗?").then(() => {
+                    this.$store.dispatch('logout')
+
+                }).catch(this.onServerResponseError)
+            },
+            changeRoute(to) {
+                if (to.matched.length > 0) {
+                    this.view =  {...to.matched[to.matched.length - 1].components.default}
+                }
+            }
+        },
         computed: {
             layout (){
                 return this.$route.meta.layout
@@ -62,14 +78,13 @@
                 }
                 return false
             }
-        },
-        methods: {
-            logout(){
-                this.$confirm("确定要退出登录吗?").then(() => {
-                    this.$store.dispatch('logout')
 
-                }).catch(this.onServerResponseError)
+        },
+        watch: {
+            $route (newVal, oldVal) {
+                this.changeRoute(newVal, oldVal)
             }
+
         }
     }
 </script>

src/components/form/Form.vue

@@ -83,6 +83,9 @@
             },
             onPosted(data){
                 this.loading = false
+                if(data === false){
+                    return
+                }
                 this.$message({message: this.successInfo || `${this.submitName}成功`, type: 'success'})
                 this.$emit('form-posted', data)
                 return data

src/components/form/widgets/DateRange.vue

@@ -3,8 +3,8 @@
             v-model="period"
             :type="`${type}range`"
             :range-separator="defaultSeparator"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            :start-placeholder="`最小${field.label}`"
+            :end-placeholder="`最大${field.label}`"
             :value-format="valueFormat"
             align="right"
             :picker-options="date_picker_options">

src/components/generic/ForeignKey.vue

@@ -1,8 +1,8 @@
 <template>
-  <a :href="`#${url}`"  title="点击跳转" class="foreignkey-link" v-if="hasLink">
-    {{label}}
-  </a>
-  <span v-else>
+    <a :href="`#${url}`" title="点击跳转" class="foreignkey-link" v-if="hasLink">
+        {{label}}
+    </a>
+    <span v-else>
         {{label}}
     </span>
 </template>
@@ -13,7 +13,7 @@
     export default{
         props: {
             value: [String, Number],
-            field: Object ,
+            field: Object,
             context: Object
         },
         created () {

src/components/layout/BatchActions.vue

@@ -39,9 +39,15 @@
 
             },
             getConfirm(action) {
-                if (action.confirm instanceof Function) {
-                    return action.confirm
-                } else if (action.confirm === false) {
+                let cfm = action.confirm
+                if (typeof cfm === 'string'){
+                    this.$store.state.bus.$emit('opendrawer', {
+                        component: cfm,
+                        context: {...action.drawer, ...this.context}
+                    })
+                }else if (cfm instanceof Function) {
+                    return cfm
+                } else if (cfm === false) {
                     return (action, scope) => Promise.resolve()
                 } else {
                     return (action, scope) => this.$confirm(action.notice, `确定要对${scope.label}记录执行"${action.label}"操作吗?`, {type: 'warning'})

src/components/layout/ViewTabs.vue

@@ -53,11 +53,8 @@
                 }
                 this.curTab = tab.name
             },
-            changeRoute (newVal, oldVal) {
-//                console.log(newVal)
-//                console.log(oldVal)
+            changeRoute (newVal) {
                 let to = newVal
-                // let view = to.matched[0]
                 let view = null
                 if (to.matched.length > 0) {
                     view = to.matched[to.matched.length - 1]

src/components/media/ImageInput.vue

@@ -18,13 +18,15 @@
             }
         },
         created () {
-//            console.log(this.bucket)
+            console.log(this.context)
         },
         components: {ImageUpload},
         methods: {
             onSuccess({fileList}) {
-
                 this.changeFileList(fileList)
+                if(this.field.onSuccess) {
+                    this.field.onSuccess({fileList, ...this.$props})
+                }
             },
             onRemove ({fileList}) {
                 this.changeFileList(fileList)

src/components/media/qcloud/ImageUpload.vue

@@ -27,6 +27,7 @@
 <script>
     import {format} from 'date-fns'
     import {template} from 'lodash'
+    import {getFileMd5Async} from '../../../utils/file_md5'
     export default {
         model: {
             event: 'change'
@@ -125,7 +126,8 @@
                     return m[1]
                 }
             },
-            getFileNameContext (fn) {
+            genFileNameContext (file, fnt) {
+                let fn = file.name
                 let ps = fn.split('.')
                 let extName
                 let fileName = fn
@@ -136,45 +138,54 @@
                 }
                 let d = new Date()
                 let dateTime = format(d, 'YYYYMMDDHHmmssSSS')
-                return {
+                let ctx = {
+                    ...this.context,
                     extName,
                     fileName,
                     baseName,
                     dateTime,
                     number: this.getFileNumber(fn)
                 }
+                return Promise.resolve(ctx).then(ctx => {
+                    if (fnt.includes('${md5}')) {
+                        return getFileMd5Async(file).then(md5 => {
+                            ctx.md5 = md5
+                            return ctx
+                        })
+                    } else {
+                        return ctx
+                    }
+                })
             },
             uploadFile (req) {
                 let file = req.file
-                let fn = file.name
-                let ctx = {...this.context, ...this.getFileNameContext(fn)}
-                file.uploadContext = ctx
-//                console.log(ctx)
-                let fileName = template(this.fileName || '${dateTime}.${extName}')(ctx)
-//                console.log(fileName)
-//                return
-                return new Promise((resolve, reject) => {
-                    import('cos-js-sdk-v5').then( module => {
-                        let TcCos = module.default
-                        let tcCos = new TcCos({
-                            getAuthorization: this.getAuthorization
-                        })
-                        tcCos.putObject({
-                            Bucket: this.bucket, /* 必须 */
-                            Region: this.region, /* 存储桶所在地域，必须字段 */
-                            Key: fileName,
-                            Body: req.file,
-                            onProgress: function (info) {
-                                console.log('tcCos.onProgress', info, req)
-                                req.onProgress(info)
-                            }
-                        }, function (err, data) {
+                let fnt = this.fileName || '${dateTime}.${extName}'
+                return this.genFileNameContext(file, fnt).then(ctx => {
+                    file.uploadContext = ctx
+                    let fileName = template(fnt)(ctx)
+                    return new Promise((resolve, reject) => {
+                        import('cos-js-sdk-v5').then(module => {
+                            let TcCos = module.default
+                            let tcCos = new TcCos({
+                                getAuthorization: this.getAuthorization
+                            })
+                            tcCos.putObject({
+                                Bucket: this.bucket, /* 必须 */
+                                Region: this.region, /* 存储桶所在地域，必须字段 */
+                                Key: fileName,
+                                Body: file,
+                                onProgress: function (info) {
+                                    console.log('tcCos.onProgress', info, req)
+                                    req.onProgress(info)
+                                }
+                            }, function (err, data) {
 //                        console.log(err || data)
-                            if (err) {
-                                reject(err)
-                            } else {
-                                resolve(data)
-                            }
+                                if (err) {
+                                    reject(err)
+                                } else {
+                                    resolve(data)
+                                }
+                            })
                         })
                     })
                 })

src/components/model/Form.vue

@@ -5,7 +5,7 @@
                 <slot name="actions"></slot>
             </el-col>
             <el-col :span="6" class="flex-right">
-                <actions :items="topActionItems" :context="{model: model}" style="margin-right: 1rem"></actions>
+                <actions :items="topActionItems" :context="{model: model, view: this}" style="margin-right: 1rem"></actions>
             </el-col>
         </el-row>
         <x-form :url="url" :items="formItems" v-model="formValue" ref="form" :options="options.form" :disabled="disabled"