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

src/components/media/aliyun/ImageUpload.vue

@@ -0,0 +1,185 @@
+<template>
+    <div>
+        <el-upload :http-request="uploadFile"
+                   class="image-uploader"
+                   ref="upload"
+                   action="noaction"
+                   accept=".jpg,.png,.jpeg,.gif"
+                   :list-type="$attrs.listType || 'picture-card'"
+                   :file-list="fileList"
+                   v-bind="[$attrs, $props]"
+                   :on-preview="onPreview"
+                   :on-remove="onRemove"
+                   :on-change="onChange"
+                   :on-progress="onProgress"
+                   :on-success="onSuccess"
+                   :on-exceed="onExceed"
+                   :on-error="onError">
+
+            <i class="el-icon-plus"></i>
+        </el-upload>
+
+        <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+        </el-dialog>
+    </div>
+</template>
+<script>
+    import {format} from 'date-fns'
+    import {template} from 'lodash'
+    export default {
+        model: {
+            event: 'change'
+        },
+        props: {
+            signUrl: String,
+            fileName: String,
+            context: Object,
+            urls: Array
+        },
+        data () {
+            return {
+                fileList: this.urls.map(u => {
+                    return {url: u}
+                }),
+                elUploader: undefined,
+                dialogImageUrl: '',
+                dialogVisible: false
+            }
+        },
+        mounted () {
+            this.elUploader = this.$el.querySelector('.el-upload')
+            this.toggleAdd()
+        },
+        methods: {
+            getAuthorization (OSS, func) {
+                let signUrl = template(this.signUrl)(this.context)
+                return this.$http.post(signUrl).then(({data}) => {
+                    let creds = data.Credentials
+                    const client = new OSS({
+                        region: data.region,
+                        accessKeyId: creds.AccessKeyId,
+                        accessKeySecret: creds.AccessKeySecret,
+                        stsToken: creds.SecurityToken,
+                        bucket: data.bucket
+                    })
+
+                    return func(client)
+                })
+            },
+            onPreview(file) {
+                this.dialogImageUrl = file.url
+                this.dialogVisible = true
+            },
+            onProgress(event, file, fileList){
+                console.log(['progress', event, file])
+            },
+            onError(err, file, fileList){
+                console.log(['error', err, file, fileList])
+            },
+            onSuccess(response, file, fileList){
+                let sf = fileList.find(f => f.uid === file.uid)
+                if (!sf) {
+                    console.error('file not found:', file.uid)
+                    return
+                }
+                sf.url = `${this.urlPrefix}${response.name}`
+                this.$emit('success', {response, file, fileList, limit: this.$attrs.limit})
+            },
+            onRemove(file, fileList) {
+                this.fileList = fileList
+                this.$emit('remove', {file, fileList})
+            },
+            onChange (file, fileList) {
+                this.fileList = fileList
+            },
+            toggleAdd () {
+                if (this.$attrs.limit === 1) {
+                    if (this.fileList.length > 0) {
+                        this.elUploader.classList.add('hidden')
+                    } else {
+                        this.elUploader.classList.remove('hidden')
+                    }
+                }
+            },
+            onExceed(files, fileList) {
+                this.$message({message: '超出文件数限制.', type: 'error'})
+            },
+            toUrl(file) {
+                var URL = window.URL || window.webkitURL
+                let url = URL.createObjectURL(file)
+                return url
+            },
+            getFileNumber(fn) {
+                let re = /(\d+)\./g
+                let m = re.exec(fn)
+                if (m) {
+                    return m[1]
+                }
+            },
+            getFileNameContext (fn) {
+                let ps = fn.split('.')
+                let extName
+                let fileName = fn
+                let baseName = fn
+                if (ps.length > 1) {
+                    extName = ps[ps.length - 1]
+                    baseName = fn.substr(0, fn.length - 1 - extName.length)
+                }
+                let d = new Date()
+                let dateTime = format(d, 'YYYYMMDDHHmmssSSS')
+                return {
+                    extName,
+                    fileName,
+                    baseName,
+                    dateTime,
+                    number: this.getFileNumber(fn)
+                }
+            },
+            uploadFile (req) {
+                let file = req.file
+                let fn = file.name
+                let ctx = {...this.context, ...this.getFileNameContext(fn)}
+                file.uploadContext = ctx
+                let fileName = template(this.fileName || '${dateTime}.${extName}')(ctx)
+                return new Promise((resolve, reject) => {
+                    import('ali-oss').then(module => {
+                        let OSS = module.default
+                        this.getAuthorization(OSS, (client) => {
+                            const options = {
+                                progress: this.onProgress,
+                                partSize: 100 * 1024,
+                                meta: {},
+                            }
+                            client.multipartUpload(fileName, req.file, options).then((res) => {
+                                resolve(res)
+                            }).catch((err) => {
+                                reject(err)
+                            })
+                        })
+                    })
+                })
+            }
+        },
+        computed: {
+            urlPrefix() {
+                return `https://${this.$store.state.party.settings.aliyun.oss.domain}/`
+            }
+        },
+        watch: {
+            fileList (v) {
+                this.toggleAdd()
+            },
+            urls (v) {
+                this.fileList = this.urls.map(u => {
+                    return {url: u}
+                })
+            }
+        }
+    }
+</script>
+<style>
+    .el-upload.hidden {
+        display: none;
+    }
+</style>

src/components/model/Select.vue

@@ -37,7 +37,7 @@
         props: {
             appModel: String,
             placeholder: String,
-            field: Object,
+            field: {type:Object, default: () => {return {}}},
             showCreate: {type: Boolean, default: true},
             value: [String, Number, Array],
             showLink: {type: Boolean, default: true}
@@ -100,9 +100,11 @@
             load (qs) {
                 return this.loadData(Object.assign({page_size: DEFAULT_PAGE_SIZE}, this.field.baseQueries, qs)).then(({data}) => {
                     this.data = data.results
-                    if(data.count === 1 && !this.selectedValue) {
-                        this.$emit('input', this.data[0][this.id_field])
-                    }
+//                    if (data.count === 1 && !this.selectedValue) {
+//                        let nv = this.data[0][this.idField]
+//                        this.$emit('input', nv)
+//                        this.selectedObjects = this.data
+//                    }
                     this.moreThanOnePage = data.next
                 })
             },

src/components/model/Table.vue

@@ -209,7 +209,7 @@
                             a.widget = a.widget || this.defaultWidget(a)
                         }
                         if (orderingFields.includes(a.name)) {
-                            a.sortable = true
+                            a.sortable = 'custom'
                         }
                         return a
                     }).filter(a => !qns.includes(a.name))

src/components/table/widgets/Picture.vue

@@ -0,0 +1,25 @@
+<template>
+    <el-image fit='fill' v-bind="[field, $attrs, $props]" :src="`${theProxy}${value[field.name]}`"
+              v-if="value[field.name]"></el-image>
+</template>
+<script>
+    export default{
+        props: {
+            value: String,
+            field: Object,
+            context: Object,
+            proxy: {type: String, default: ''}
+        },
+        data () {
+            return {}
+        },
+        components: {},
+        methods: {},
+        computed: {
+            theProxy () {
+                return this.proxy || this.field.proxy || ''
+            }
+        }
+    }
+</script>
+