初始化项目

admin-vue/src/views/checkout/modules/CheckoutForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="560"
+    :visible="visible"
+    :isLoading="isLoading"
+    :confirmLoading="isLoading"
+    :maskClosable="false"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="isLoading">
+      <a-form :form="form">
+        <a-form-item label="结账时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" v-decorator="['end_time', { rules: [{ required: true }] }]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import _ from 'lodash'
+import * as Api from '@/api/checkout'
+
+export default {
+  data () {
+    return {
+      // 对话框标题
+      title: '结账',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      isLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {}
+    }
+  },
+  created () {
+  },
+  methods: {
+
+    /**
+     * 显示对话框
+     */
+    handle (record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+    },
+
+    // 确认按钮
+    handleSubmit (e) {
+      e.preventDefault()
+      // 表单验证
+      const { form: { validateFields } } = this
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    /**
+     * 关闭对话框事件
+     */
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    /**
+    * 提交到后端api
+    */
+    onFormSubmit (values) {
+      this.isLoading = true
+      Api.checkout({ form: values })
+        .then((result) => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
+    }
+
+  }
+}
+</script>

admin-vue/src/views/checkout/modules/index.js

@@ -0,0 +1,5 @@
+import CheckoutForm from './CheckoutForm'
+
+export {
+    CheckoutForm
+}