attrs

szuprefix · Jan 31, 2020 · ad4878c · ad4878c
1 parent 53f73b8
commit ad4878c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 44 deletions.
diff --git a/src/components/form/Form.vue b/src/components/form/Form.vue
@@ -1,26 +1,24 @@
 <template>
-    <el-form ref="form" :inline="elOptions.inline" :size="elOptions.size" :model="formValue" v-if="value"
-             :inline-message="elOptions.inlineMessage" :hide-required-asterisk="elOptions.hideRequiredAsterisk"
-             label-position="elOptions.labelPosition"
-             :label-width="elOptions.labelWidth || elOptions.noLabel && '0px' || (!elOptions.inline && '160px')"
-             v-loading="loading" :element-loading-text="loading">
+    <el-form ref="form" v-bind="[$props,$attrs]"  :model="formValue" v-if="value"
+             v-loading="loading" :element-loading-text="loading"
+             :label-width="$attrs.labelWidth || $attrs.noLabel && '0px' || (!$attrs.inline && '160px')">
 
         <slot name="header"></slot>
         <el-alert :title="errors.non_field_errors" type="error" v-if="errors.non_field_errors"
                   :closable="false"></el-alert>
         <el-row>
             <template v-for="f in formItems" v-if="canEdit(f)">
                 <el-col :xs="f.span.xs" :sm="f.span.sm" :md="f.span.md" :lg="f.span.lg" :xl="f.span.xl"
-                        :key="f.name" v-if="!elOptions.inline && !elOptions.oneColumn && f.widget !== 'hidden'">
-                    <item :field="f" v-model="formValue" :options="options" :error="errors[f.name]"></item>
+                        :key="f.name" v-if="!$attrs.inline && !$attrs.oneColumn && f.widget !== 'hidden'">
+                    <item :field="f" v-model="formValue" v-bind="$attrs.itemOptions" :error="errors[f.name]"></item>
                 </el-col>
-                <item :field="f" v-model="formValue" :options="options" :error="errors[f.name]" v-else></item>
+                <item :field="f" v-model="formValue" v-bind="$attrs.itemOptions"  :error="errors[f.name]" v-else></item>
 
             </template>
             <slot name="submit">
-                <el-col :xs="elOptions.inline?12:24" :sm="elOptions.inline?8:24" :md="elOptions.inline?6:24"
-                        :lg="elOptions.inline?4:24"
-                        :xl="elOptions.inline?3:24" v-if="!elOptions.inline">
+                <el-col :xs="$attrs.inline?12:24" :sm="$attrs.inline?8:24" :md="$attrs.inline?6:24"
+                        :lg="$attrs.inline?4:24"
+                        :xl="$attrs.inline?3:24" v-if="!$attrs.inline">
                     <el-form-item>
                         <actions :items="_actions"></actions>
                     </el-form-item>
@@ -132,7 +130,7 @@
             },
 
             _actions () {
-                return this.actions || [{name: 'submit', label: this.submitName, do: this.onSubmit}]
+                return this.actions || [{name: 'submit', label: this.submitName, do: this.onSubmit, type: 'primary', size:this.$attrs.size}]
             },
             elOptions () {
                 return this.options.elForm || {}

diff --git a/src/components/form/Item.vue b/src/components/form/Item.vue
@@ -1,8 +1,7 @@
 <template>
-    <el-form-item :prop="field.name" :rules="field.rules" :label="field.label" :error="error"
-                  :ref="field.name"
-                  :style="options.noLabel && {} || options.itemStyle || {minWidth: '350px'}">
-        <template slot="label" v-if="!options.noLabel">
+    <el-form-item :prop="field.name" v-bind="[field, $attrs]" :error="error" :ref="field.name"
+                  :style="$attrs.noLabel && {} || $attrs.itemStyle || {minWidth: '350px'}">
+        <template slot="label" v-if="!$attrs.noLabel">
             {{field.label}}
             <el-tooltip placement="top" v-if="field.help_text">
                 <div slot="content" v-html="field.help_text"></div>

diff --git a/src/components/layout/Actions.vue b/src/components/layout/Actions.vue
@@ -1,7 +1,7 @@
 <template>
     <el-button-group v-if="showActions.length>0">
         <template v-for="a in showActions">
-            <el-button :type="a.type" :title="a.title" :size="size" @click="handleCommand(a.do)"
+            <el-button :type="a.type" :title="a.title" :size="a.size || size" @click="handleCommand(a.do)"
                        v-if="!a.show || a.show()" :key="a.name">
                 <i :class="getIconClass(a.icon)" v-if="a.icon"></i>{{a.label}}
             </el-button>

diff --git a/src/configs/axios.js b/src/configs/axios.js
@@ -9,20 +9,6 @@ axios.defaults.xsrfHeaderName = 'X-CSRFToken'
 axios.defaults.headers['X-REQUESTED-WITH'] = 'XMLHttpRequest'
 axios.defaults.baseURL = '/api/'
 
-// axios.interceptors.request.use(function (config) {
-//     // Do something before request is sent
-//     // if (Cookies.get('sharetoken')) {
-//     //   config.headers['X-SHARETOKEN'] = Cookies.get('sharetoken')
-//     // }
-//     // if (Cookies.get('access_token')) {
-//     //     config.headers['Authorization'] = Cookies.get('access_token')
-//     // }
-//     return config;
-// }, function (error) {
-//     // Do something with request error
-//     return Promise.reject(error);
-// });
-
 axios.interceptors.response.use(function (response) {
     return response;
 }, function (error) {
@@ -37,7 +23,7 @@ import Vue from 'vue'
 Vue.prototype.$http = Vue.http = axios
 
 if (!Cookies.get('csrftoken')) {
-  axios.get('/csrf_token/')
+    axios.get('/csrf_token/')
 }
 
 export default axios
diff --git a/src/views/auth/login.vue b/src/views/auth/login.vue
@@ -1,33 +1,37 @@
 <template>
     <div class="login-container">
-        <!--<el-dialog title="登录" :visible="!(user.id>0)" :show-close="false"-->
-        <!--:close-on-click-modal="false">-->
-        <rest-form formUrl="/auth/user/login/" v-model="form" :formItems="fieldItems" ref="form" formSize="big"
-                   class="login-form"
-                   formSubmitName="登录" formNoLabel :formHideRequiredAsterisk="true" @form-posted="done">
+        <x-form url="/auth/user/login/" v-model="form" :items="items" ref="form" size="big" :itemOptions="{noLabel:true}"
+                class="login-form" submitName="登录" :noLabel="true" :hide-required-asterisk="true" @form-posted="done">
 
             <h3 slot="header">登录{{$store.state.system_name}}</h3>
-        </rest-form>
-        <!--</el-dialog>-->
+        </x-form>
     </div>
 </template>
 <script>
     import {mapState} from 'vuex'
-    import RestForm from '../../components/rest/Form.vue'
+    import XForm from '../../components/form/Form.vue'
     import {setToken} from '../../utils/auth'
     const AUTH_STORAGE_NAME = 'auth.username'
     export default{
         data () {
             return {
                 form: {username: localStorage.getItem(AUTH_STORAGE_NAME), password: ''},
-                fieldItems: [
-                    {name: 'username', required: true, label: '帐号', span: 24, icon: 'user'},
-                    {name: 'password', required: true, label: '密码', widget: 'password', icon: 'lock', span: 24, onEnter: this.submit}
+                items: [
+                    {name: 'username', required: true, label: '帐号', span: 24, icon: 'user', 'label-width': '0px'},
+                    {
+                        name: 'password',
+                        required: true,
+                        label: '密码',
+                        widget: 'password',
+                        icon: 'lock',
+                        span: 24,
+                        onEnter: this.submit
+                    }
                 ]
             }
         },
         components: {
-            RestForm
+            XForm
         },
         methods: {
             done(data){