Jelajahi Sumber

新增:后台订单管理支持修改收货地址

萤火科技 1 tahun lalu
induk
melakukan
0af88a4bbd

+ 13 - 0
src/api/order/event.js

@@ -4,6 +4,7 @@ import { axios } from '@/utils/request'
 const api = {
   updatePrice: '/order.event/updatePrice',
   updateRemark: '/order.event/updateRemark',
+  updateAddress: '/order.event/updateAddress',
   confirmCancel: '/order.event/confirmCancel',
   delete: '/order.event/delete',
   printer: '/order.event/printer'
@@ -33,6 +34,18 @@ export function updateRemark (data) {
   })
 }
 
+/**
+ * 修改收货地址
+ * @param {*} data
+ */
+export function updateAddress (data) {
+  return axios({
+    url: api.updateAddress,
+    method: 'post',
+    data
+  })
+}
+
 /**
  * 审核:用户取消订单
  * @param {*} data

+ 21 - 3
src/views/order/Detail.vue

@@ -60,7 +60,7 @@
           <!-- 操作栏 -->
           <div class="actions clearfix mt-10">
             <div
-              v-if="$module('order-updatePrice') &&$auth('/order/detail.updatePrice')"
+              v-if="$module('order-updatePrice') && $auth('/order/detail.updatePrice')"
               class="action-item"
             >
               <a-button
@@ -90,6 +90,16 @@
             <div class="action-item" v-if="$auth('/order/detail.merchantRemark')">
               <a-button @click="handleMerchantRemark">商家备注</a-button>
             </div>
+            <div class="action-item" v-if="$auth('/order/detail.updateAddress')">
+              <a-button
+                v-if="(
+                    record.delivery_type == DeliveryTypeEnum.EXPRESS.value
+                    && record.delivery_status != DeliveryStatusEnum.DELIVERED.value
+                    && !inArray(record.order_status, [OrderStatusEnum.CANCELLED.value, OrderStatusEnum.APPLY_CANCEL.value])
+                )"
+                @click="handleUpdateAddress()"
+              >修改收货地址</a-button>
+            </div>
             <div
               v-if="$module('order-printer') && $auth('/order/detail.printer')"
               class="action-item"
@@ -303,6 +313,7 @@
     <PrinterForm ref="PrinterForm" @handleSubmit="handleRefresh" />
     <PriceForm ref="PriceForm" @handleSubmit="handleRefresh" />
     <RemarkForm ref="RemarkForm" @handleSubmit="handleRefresh" />
+    <AddressForm ref="AddressForm" @handleSubmit="handleRefresh" />
     <ExpressForm ref="ExpressForm" />
   </div>
 </template>
@@ -311,7 +322,7 @@
 import { inArray } from '@/utils/util'
 import * as Api from '@/api/order'
 import { GoodsItem, UserItem } from '@/components/Table'
-import { DeliveryForm, CancelForm, PrinterForm, PriceForm, RemarkForm, ExpressForm } from './modules'
+import { DeliveryForm, CancelForm, PrinterForm, PriceForm, RemarkForm, ExpressForm, AddressForm } from './modules'
 import {
   OrderTypeEnum,
   DeliveryStatusEnum,
@@ -367,7 +378,8 @@ export default {
     PrinterForm,
     PriceForm,
     RemarkForm,
-    ExpressForm
+    ExpressForm,
+    AddressForm
   },
   data () {
     return {
@@ -488,6 +500,12 @@ export default {
       this.$refs.PriceForm.show(record)
     },
 
+    // 修改收货地址
+    handleUpdateAddress () {
+      const { record } = this
+      this.$refs.AddressForm.show(record)
+    },
+
     // 商家备注
     handleMerchantRemark () {
       const { record } = this

+ 121 - 0
src/views/order/modules/AddressForm.vue

@@ -0,0 +1,121 @@
+<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-input
+            placeholder="请输入收货人姓名"
+            v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入联系电话" v-decorator="['phone', { rules: [{ required: true }] }]" />
+        </a-form-item>
+
+        <a-form-item label="省市区" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <SelectRegion
+            placeholder="请选择省市区"
+            v-decorator="['cascader', { rules: [{ required: true, message: '请选择省市区' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入详细地址" v-decorator="['detail', { rules: [{ required: true }] }]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { pick } from 'lodash'
+import * as Api from '@/api/order/event'
+import { SelectRegion } from '@/components'
+
+export default {
+  components: {
+    SelectRegion
+  },
+  data () {
+    return {
+      // 对话框标题
+      title: '修改收货地址',
+      // 标签布局属性
+      labelCol: { span: 6 },
+      // 输入框布局属性
+      wrapperCol: { span: 14 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      isLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前记录
+      record: {}
+    }
+  },
+  created () {
+  },
+  methods: {
+
+    // 显示对话框
+    show (record) {
+      // 显示窗口
+      this.visible = true
+      // 当前记录
+      this.record = record
+      // 设置默认值
+      this.setFieldsValue()
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      const { record, $nextTick, form: { setFieldsValue } } = this
+      $nextTick(() => {
+        setFieldsValue(pick(record.address, ['name', 'phone', 'cascader', 'detail']))
+      })
+    },
+
+    // 确认按钮
+    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.updateAddress(this.record['order_id'], { form: values })
+        .then(result => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(() => this.isLoading = false)
+    }
+
+  }
+}
+</script>

+ 2 - 1
src/views/order/modules/index.js

@@ -4,5 +4,6 @@ import PrinterForm from './PrinterForm'
 import PriceForm from './PriceForm'
 import RemarkForm from './RemarkForm'
 import ExpressForm from './ExpressForm'
+import AddressForm from './AddressForm'
 
-export { DeliveryForm, CancelForm, PrinterForm, PriceForm, RemarkForm, ExpressForm }
+export { DeliveryForm, CancelForm, PrinterForm, PriceForm, RemarkForm, ExpressForm, AddressForm }