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

package.json

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

src/components/form/Widget.vue

@@ -16,7 +16,7 @@
                @change="fieldValueChanged">
     </el-switch>
     <el-input-number v-model="value[field.name]" v-else-if="field.widget === 'number'" :disabled="field.disabled"
-                     :controls="field.type === 'integer'" @change="fieldValueChanged">
+                   controls-position="right"  :controls="field.type === 'integer'" @change="fieldValueChanged">
     </el-input-number>
     <el-date-picker v-model="value[field.name]" :type="field.widget" value-format="yyyy-MM-ddTHH:mm:ss"
                     :placeholder="field.placeholder || field.label" :readonly="field.read_only"

src/components/form/widgets/NumberRange.vue

@@ -75,7 +75,7 @@
                 return !this.range[0] && !this.range[1]
             },
             options () {
-                return get(this.field, 'search.options') || [] // || DEFAULT_OPTIONS
+                return get(this.field, 'options') || [] // || DEFAULT_OPTIONS
             }
         },
         watch: {

src/components/form/widgets/Percent.vue

@@ -1,35 +1,48 @@
 <template>
     <span class="el-input-group" style="width:6rem;">
         <el-input-number v-model="number" :controls="false" style="width:6rem;"
-                         @change="onChange"></el-input-number><span class="el-input-group__append">%</span>
+                         @change="onChange"></el-input-number><span class="el-input-group__append percent-input">%</span>
     </span>
 </template>
 <script>
-    import {options_without_time} from '../../../utils/date_picker_options'
-    import dateUtil from 'element-ui/src/utils/date'
     export default{
         props: {
             value: String,
             field: Object
         },
         data () {
             return {
-                number: this.value * 100
+                number: 0
             }
         },
         components: {},
         created () {
-            this.number = this.value * 100
+            this.calNumber(this.value)
         },
         methods: {
+            calNumber (v) {
+                this.number = (v * 100).toFixed(this.fixed)
+            },
             onChange(v) {
-                this.$emit('input', v / 100)
+                let rv = (v / 100).toFixed(this.fixed+2)
+                this.calNumber(rv)
+                this.$emit('input', rv)
             }
         },
+        computed: {
+           fixed () {
+               return this.field.fixed || 2
+           }
+        },
         watch: {
             value (v) {
-                this.number = this.value * 100
+                this.calNumber(v)
             }
         }
     }
 </script>
+<style>
+    .el-input-group__append.percent-input{
+        padding: 0 10px;
+    }
+</style>

src/components/form/widgets/Tags.vue

@@ -0,0 +1,40 @@
+<template>
+    <el-select v-model="tags" multiple placeholder="请选择">
+        <el-option
+                v-for="item in field.tags"
+                :key="item"
+                :label="item"
+                :value="item">
+        </el-option>
+    </el-select>
+</template>
+<script>
+    export default{
+        props: {
+            value: String,
+            field: Object
+        },
+        data () {
+            return {
+                tags: []
+            }
+        },
+        components: {},
+        created () {
+            this.tags = this.value.split(',').filter(a => a.trim().length>0)
+        },
+        methods: {
+            onChange(v) {
+                this.$emit('input', v / 100)
+            }
+        },
+        watch: {
+            value (v) {
+                this.tags = this.value.split(',').filter(a => a.trim().length>0)
+            },
+            tags () {
+                this.$emit('input', this.tags.join(','))
+            }
+        }
+    }
+</script>

src/components/generic/ForeignKey.vue

@@ -20,7 +20,7 @@
         },
         computed: {
             labelFieldName  () {
-                return this.field.labelField || 'object_name'
+                return this.field.labelField || this.field.name
             },
             label(){
                 return this.context[this.labelFieldName]

src/components/model/Display.vue

@@ -0,0 +1,99 @@
+<template>
+    <json-display v-model="value" :field="jsonField" v-if="loaded"></json-display>
+</template>
+<script>
+    import Model from './Model'
+    import ServerResponse from '../../mixins/server_response'
+    import arrayNormalize from '../../utils/array_normalize'
+    import JsonDisplay from '../widgets/JsonDisplay.vue'
+    import {get} from 'lodash'
+    export default{
+        mixins: [ServerResponse],
+        components: {JsonDisplay},
+        props: {
+            appModel: String,
+            items: Array,
+            value: Object,
+            field: Object
+        },
+        data () {
+            return {
+                mid: undefined,
+                formItems: [],
+                formValue: {},
+                loaded : false,
+                model: Model(this.appModel || this.field.model, this.defaults, this.$store.state.bus)
+            }
+        },
+        created () {
+            this.init()
+            this.$on("model-delete", this.onDelete)
+        },
+        methods: {
+            init(){
+                this.mid = this.model.id = this.getId()
+                this.model.load().then((data, options) => {
+                    this.mid = this.model.id
+                    this.formValue = Object.assign({}, this.model.data)
+                    this.normalizeItems()
+                    this.loaded = true
+                    this.$emit('loaded', this.model)
+                }).catch(this.onServerResponseError)
+            },
+            getId(){
+                let id = this.value && this.value.id ||
+                    this.$route.path.startsWith(this.model.getListUrl()) && this.$route.params.id
+                    || undefined
+                return id === 'create' ? undefined : id
+            },
+            defaultWidget (f) {
+                if (f.type == 'field' && f.model) {
+                    return RelatedSelect
+                } else if (['field', 'choice'].includes(f.type) && f.choices) {
+                    return f.choices.length <= 2 ? (f.multiple ? 'checkbox' : 'radio') : 'select'
+                }
+            },
+            getItems () {
+                if (this.items) {
+                    return Promise.resolve(this.items)
+                }
+                return import(`@/views${this.model.getListUrl()}config.js`).then(m => {
+                    let c = m.default
+                    return this.mid && c.update || c.create || c.form || {}
+                }).catch(() => {
+                    return {}
+                }).then(config => {
+                    return config.items || Object.values(this.model.options.actions.POST).filter(a => a.read_only !== true)
+                })
+            },
+            normalizeItems() {
+                this.getItems().then(items => {
+                    this.formItems = arrayNormalize(items, this.model.fieldConfigs)
+                })
+
+            },
+            clear () {
+                this.model.clear()
+                this.mid = this.model.id = undefined
+                this.formValue = Object.assign({}, this.model.data, this.defaults)
+                this.$nextTick(this.$refs.form.$refs.form.clearValidate)
+            },
+        },
+        computed: {
+            jsonField () {
+                return {...this.field, items: this.formItems}
+            }
+        },
+        watch: {
+            value(val){
+                this.formValue = val
+            },
+            formValue(val){
+                this.model.data = val
+            },
+            items () {
+                this.normalizeItems()
+            }
+        }
+    }
+</script>

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}"></actions>
+                <actions :items="topActionItems" :context="{model: model}" 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"