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

<template>
  <div>
    <el-dialog
      title="订单发货"
      :visible.sync="sendShow"
      width="1000px"
      :before-close="close"
    >
      <el-form
        :model="shipForm"
        ref="shipForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="订单号：">
          <span>{{ goodsInfo.orderId }}</span>
        </el-form-item>
        <el-form-item label="收货地址：">
          <span>{{
            `${goodsInfo.receiver}，${goodsInfo.tel}，${goodsInfo.province}${goodsInfo.city}${goodsInfo.area}${goodsInfo.address}`
          }}</span>
        </el-form-item>
        <el-form-item 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-item label="快递单号：" prop="deliveryFlowId">
          <el-input
            v-model.number="shipForm.deliveryFlowId"
            placeholder="输入快递单号"
            clearable
            size="small"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
      <!-- 商品 -->
      <el-table
        ref="table"
        :data="goodsInfo.items"
        @selection-change="handleSelectionGoods"
        class="ticket-table"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column label="商品名称" prop="title" />
        <el-table-column label="规格">
          <template slot-scope="{ row }">
            <div>{{ row.properties || "--" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="{ row }">
            <div>{{ row.goodsNum }}件</div>
          </template>
        </el-table-column>
        <el-table-column label="快递公司">
          <template slot-scope="{ row }">
            <div>{{ row.deliveryId || "--" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="快递单号">
          <template slot-scope="{ row }">
            <div>{{ row.deliveryFlowId || "--" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="发货状态">
          <template slot-scope="{ row }">
            <div>{{ row.deliveryFlowId ? "已发货" : "未发货" }}</div>
          </template>
        </el-table-column>
      </el-table>
      <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, deliverOrderShip } from "@/api/business/order";
export default {
  mixins: [CustomFieldsMixin],
  props: {
    // 弹框显示
    sendShow: {
      type: Boolean,
      default: false,
    },
    // 订单详情
    goodsInfo: {
      type: Object,
      default: {},
    },
  },
  created() {
    this.getCompanyList();
  },
  data() {
    return {
      loading: false,
      shipForm: {
        deliveryId: "",
        deliveryFlowId: "",
      },
      // 快递下拉列表
      companyData: [],
      // 选中商品ID
      ids: [],
      rules: {
        deliveryId: [
          { required: true, message: "请选择快递公司", trigger: "change" },
        ],
        deliveryFlowId: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
          { type: "number", message: "快递单号为数字值", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 关闭发货弹框
    close() {
      this.$emit("close");
      this.loading = false;
      this.ids = [];
      this.$refs["shipForm"].resetFields();
    },

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

    // 选中商品
    handleSelectionGoods(e) {
      this.ids = e.map((item) => item.itemId);
    },

    // 确认
    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) {
      if (!this.ids.length) {
        this.msgError("请选择发货的商品");
        this.loading = false;
        return;
      }
      let data = {
        ...form,
        orderId: this.goodsInfo.orderId,
        itemIds: this.ids,
      };
      deliverOrderShip(data)
        .then((res) => {
          if (res.code == 0) {
            this.msgSuccess("发货成功");
            this.close();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style>
</style>