修改物流

src/views/order/modules/DeliveryFormEdit.vue

@@ -0,0 +1,162 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="680"
+    :visible="visible"
+    :isLoading="isLoading"
+    :confirmLoading="isLoading"
+    :maskClosable="false"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="isLoading">
+      <a-form-model ref="ruleForm" :model="record" :rules="rules" :label-col="labelCol" :wrapperCol="wrapperCol">
+        <div>
+          <a-form-model-item label="物流公司" prop="express_id">
+            <a-select v-model="record.express_id" placeholder="请选择物流公司">
+              <a-select-option v-for="(item, index) in expressList" :key="index" :value="item.express_id">{{
+                item.express_name
+              }}</a-select-option>
+            </a-select>
+            <div class="form-item-help">
+              <router-link target="_blank" :to="{ path: '/setting/delivery/express/index' }">物流公司管理</router-link>
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="物流单号" prop="express_no" extra="请手动录入物流单号或快递单号">
+            <a-input v-model="record.express_no" />
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { assignment } from '@/utils/util'
+import * as Api from '@/api/order/delivery'
+import * as ExpressApi from '@/api/setting/express'
+import ClientEnum from '@/common/enum/Client'
+import { PaymentMethodEnum } from '@/common/enum/payment'
+import { DeliveryStatusEnum } from '@/common/enum/order'
+import { GoodsItem } from '@/components/Table'
+
+const rules = {
+  expressId: [{ required: true, message: '请选择物流公司', trigger: 'blur' }],
+  expressNo: [{ required: true, message: '请填写物流单号', trigger: 'blur' }],
+}
+
+export default {
+  components: {
+    GoodsItem,
+  },
+  data() {
+    return {
+      // 对话框标题
+      title: '订单发货',
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      isLoading: false,
+      // 验证规则
+      rules,
+      // 当前tab索引
+      // 物流公司列表
+      expressList: [],
+      // 当前记录
+      record: {},
+    }
+  },
+  computed: {},
+  beforeCreate() {
+    // 批量给当前实例赋值
+    assignment(this, {
+      ClientEnum,
+      PaymentMethodEnum,
+    })
+  },
+  created() {
+    // 获取物流公司列表
+    this.getExpressList()
+  },
+  methods: {
+    // 显示对话框
+    show(record) {
+      console.log(record, 'AAAAAAAAAAAAAAAAAA')
+      // 当前记录
+      this.record = record
+      this.visible = true
+    },
+
+    // 获取物流公司列表
+    getExpressList() {
+      this.isLoading = true
+      ExpressApi.all()
+        .then((result) => (this.expressList = result.data.list))
+        .finally(() => (this.isLoading = false))
+    },
+
+    // 确认按钮
+    handleSubmit(e) {
+      e.preventDefault()
+      // 表单验证
+      this.$refs.ruleForm.validate((valid) => {
+        // 提交到后端api
+        valid && this.onFormSubmit()
+      })
+    },
+
+    // 关闭对话框事件
+    handleCancel() {
+      this.visible = false
+      if (this.$refs.ruleForm) {
+        this.$refs.ruleForm.resetFields()
+      }
+    },
+
+    // 提交到后端api
+    onFormSubmit() {
+      this.isLoading = true
+      Api.updateDelivery({
+        delivery_id: this.record.delivery_id,
+        form: { express_no: this.record.express_no, express_id: this.record.express_id },
+      })
+        .then((result) => {
+          // 显示成功
+          this.$message.success(result.message, 1.5)
+          // 关闭对话框事件
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', true)
+        })
+        .finally(() => (this.isLoading = false))
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+/deep/.ant-modal-header {
+  border-bottom: none;
+}
+/deep/.ant-modal-footer {
+  border-top: none;
+}
+/deep/.ant-modal-body {
+  padding: 0px 24px;
+}
+/deep/.ant-tabs-bar {
+  margin-bottom: 22px;
+}
+.ant-table-wrapper {
+  margin-bottom: 30px;
+}
+.ant-form-item {
+  margin-bottom: 15px;
+  &:last-child {
+    margin-bottom: 5px;
+  }
+}
+</style>