测试

src/components/pages/PaymentManagement/AllowancePayment.vue

@@ -34,54 +34,56 @@
           <a href="javascript:;" @click="toAllowanceDetails(record, text, index)">查看详情</a>
         </span>
       </a-table>
-      <a-modal title="发放津贴" v-model="visible" @ok="createSubsidy()">
-        <a-form :form="form">
-          <a-form-item
-            v-bind="formItemLayout"
-            label="发放类型"
-            has-feedback
-          >
-            <a-select
-              v-decorator="[
-                'select',
-                {rules: [{ required: true, message: ' 津贴类型' }]}
-              ]"
-              placeholder="请选择津贴类型"
+      <a-spin :spinning="spinning" :delay="delayTime">
+        <a-modal title="发放津贴"  v-model="visible" @ok="createSubsidy()">
+          <a-form :form="form">
+            <a-form-item
+              v-bind="formItemLayout"
+              label="发放类型"
+              has-feedback
             >
-              <a-select-option value="travel">
-                交通补助
-              </a-select-option>
-              <a-select-option value="meal">
-                餐补
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label="发放金额" v-bind="formItemLayout" >
-            <a-input
-              v-decorator="['orderPrice',{rules: [{required: true, message: '充值金额不能为空'}, {validator: rechargeNum}]}]"
-            />
-          </a-form-item>
-          <a-form-item
-            v-bind="formItemLayout"
-            label="截止日期"
-          >
-            <a-date-picker
-              placeholder="请选择截止日期"
-              :disabledDate="disabledDate"
-              :showToday="false"
-              v-decorator="['date-picker', config]"
-            />
-          </a-form-item>
-          <a-form-item label="选择成员" v-bind="formItemLayout">
-            <div class="peopleBox" @click="choosePeople()">
-              {{ peopleListStr() }}
-            </div>
-          </a-form-item>
-          <a-form-item label="备注" v-bind="formItemLayout" >
-            <a-textarea v-decorator="['remark', {rules: [{ required: true, message: '备注不能为空' }]}]"/>
-          </a-form-item>
-        </a-form>
-      </a-modal>
+              <a-select
+                v-decorator="[
+                  'select',
+                  {rules: [{ required: true, message: ' 津贴类型' }]}
+                ]"
+                placeholder="请选择津贴类型"
+              >
+                <a-select-option value="travel">
+                  交通补助
+                </a-select-option>
+                <a-select-option value="meal">
+                  餐补
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item label="发放金额" v-bind="formItemLayout" >
+              <a-input
+                v-decorator="['orderPrice',{rules: [{required: true, message: '充值金额不能为空'}, {validator: rechargeNum}]}]"
+              />
+            </a-form-item>
+            <a-form-item
+              v-bind="formItemLayout"
+              label="截止日期"
+            >
+              <a-date-picker
+                placeholder="请选择截止日期"
+                :disabledDate="disabledDate"
+                :showToday="false"
+                v-decorator="['date-picker', config]"
+              />
+            </a-form-item>
+            <a-form-item label="选择成员" v-bind="formItemLayout">
+              <div class="peopleBox" @click="choosePeople()">
+                {{ peopleListStr() }}
+              </div>
+            </a-form-item>
+            <a-form-item label="备注" v-bind="formItemLayout" >
+              <a-textarea v-decorator="['remark', {rules: [{ required: true, message: '备注不能为空' }]}]"/>
+            </a-form-item>
+          </a-form>
+        </a-modal>
+      </a-spin>
   </div>
 </template>
 
@@ -94,6 +96,8 @@ export default {
   name: 'AllowancePayment',
   data () {
     return {
+      spinning: false,
+      delayTime: 100,
       formItemLayout: {
         labelCol: {
           xs: { span: 24 },
@@ -274,6 +278,7 @@ export default {
       return str.substring(0, str.length - 1)
     },
     createSubsidy () {
+      this.spinning = true;
       this.form.validateFields((err, fieldsValue) => {
         if (err) {
           return
@@ -307,6 +312,7 @@ export default {
             this.userIdListObj = []
             this.departmentIdListObj = []
             this.$message.success('发放成功')
+            this.spinning = false;
             this.queryRecordList()
           } else {
             this.$message.error(res.data.message)

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import { Menu, Layout, Breadcrumb, Icon, Button, DatePicker, Input, Table, Tag, Divider, Dropdown, Modal, Form, Select, message, Pagination, LocaleProvider } from 'ant-design-vue'
+import { Menu, Layout, Breadcrumb, Icon, Button, DatePicker, Input, Table, Tag, Divider, Dropdown, Modal, Form, Select, message, Pagination, LocaleProvider, Spin } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import { config } from './api/config'
 import axios from 'axios'
@@ -11,6 +11,7 @@ import qs from 'qs'
 Vue.use(Layout)
 Vue.use(LocaleProvider)
 Vue.use(Menu)
+Vue.use(Spin)
 Vue.use(Breadcrumb)
 Vue.use(Icon)
 Vue.use(Button)