mp-ui-pc/src/views/order/deliver/components/ExpressEdit.vue

<template>
  <div>
    <el-dialog
      title="修改快递信息"
      :visible.sync="editShow"
      width="500px"
      :before-close="close"
    >
      <el-form
        :model="shipForm"
        ref="shipForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="配送方式：" prop="deliveryId">
          <el-radio @change="radioDistribution" v-model="shipForm.deliveryType" label="1">快递发货</el-radio>
          <el-radio @change="radioDistribution" v-model="shipForm.deliveryType" label="2">无需物流</el-radio>
        </el-form-item>
        <el-form-item v-if="shipForm.deliveryType == 1" label="快递单号：" prop="deliveryFlowId">
          <el-input
            v-model="shipForm.deliveryFlowId"
            @blur="InputBlur()"
            placeholder="输入快递单号"
            clearable
            size="small"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item v-if="shipForm.deliveryType == 1" label="快递公司：" prop="deliveryId">
          <el-select
            v-model="shipForm.deliveryId"
            placeholder="请选择快递公司"
            clearable
            size="small"
            style="width: 300px"
          >
            <el-option
              v-for="item in companyData"
              :key="item.areaId"
              :label="item.companyName"
              :value="item.deliveryId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :disabled="loading" @click="saveClick"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CustomFieldsMixin from "@/mixins/CustomFields";
import { companyList, deliverOrderShipUpdate, automaticRecognition} from "@/api/business/order";
export default {
  mixins: [CustomFieldsMixin],
  props: {
    // 发货弹框显示
    editShow: {
      type: Boolean,
      default: false,
    },
    // 订单详情
    goodsInfo: {
      type: Object,
      default: {},
    },
    // 订单ID
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      shipForm: {
        deliveryId: "",
        deliveryFlowId: "",
        deliveryType: "1",//配送方式
      },
      // 快递下拉列表
      companyData: [],
      rules: {
        deliveryId: [
          { required: false, message: "请选择快递公司", trigger: "change" },
        ],
        deliveryFlowId: [
          { required: false, message: "请输入快递单号", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCompanyList();
    this.getFormData()
  },
  methods: {
    getFormData(){
      this.shipForm.deliveryId = this.goodsInfo.deliveryId
      this.shipForm.deliveryFlowId = this.goodsInfo.deliveryFlowId
      this.shipForm.deliveryType = this.goodsInfo.deliveryFlowId?"1":"2"
    },

    // 关闭发货弹框
    close() {
      this.$emit("close");
      this.loading = false;
      this.$refs["shipForm"].resetFields();
    },

    //切换配送方式时清空另一个方式所选项
    radioDistribution(){
      if(this.shipForm.deliveryType == '2'){
        this.shipForm.deliveryId = '';
        this.shipForm.deliveryFlowId = '';
      }
    },

    // 快递下拉列表
    getCompanyList() {
      companyList({}).then((res) => {
        this.companyData = res.data;
      });
    },

    //快递单号失去焦点时
    InputBlur(){
      if (this.shipForm.deliveryFlowId){
        automaticRecognition(this.shipForm.deliveryFlowId).then((res)=>{
          if (res.code == 0 && res.data){
            this.shipForm.deliveryId = res.data.deliveryId
          }
        })
      }
    },

    // 确认
    saveClick() {
      this.loading = true;
      const subForm = this.$refs["shipForm"];
      subForm.validate((valid) => {
        if (valid) {
          this.submitForm(this.shipForm);
        } else {
          this.loading = false;
          // 提示第一个error
          this.getFormErrorMessage(subForm);
          return false;
        }
      });
    },

    // 提交
    submitForm(form) {
      let data = {
        ...form,
        orderId: this.orderId,
        itemIds: this.goodsInfo.items.map( item => item.itemId)
      };
      deliverOrderShipUpdate(data)
        .then((res) => {
          if (res.code == 0) {
            this.msgSuccess("修改成功");
            this.close();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped>
</style>