operation-system/src/views/order/sendGoodsInfo.vue

<template>
  <div class="app-container customer-control">
    <div class="container-custom">
      <!-- 表格 -->
      <div class="table-cont">
        <el-table :data="tableData" style="width: 100%">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column property="productId" label="商品ID" width="100" />
          <el-table-column
            property="productName"
            label="商品名称"
            width="300"
          />
          <el-table-column label="图片" width="">
            <template #default="scope">
              <div class="tree-goods-subOrder-image">
                <img
                  style="width: 60px; height: 60px"
                  :src="scope.row.productImage"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="购买数量" width="">
            <template #default="scope">{{ scope.row.quantity }}</template>
          </el-table-column>
          <el-table-column label="商品单价" width="">
            <template #default="scope">{{ scope.row.unitPrice }}</template>
          </el-table-column>
          <el-table-column label="规格" width="">
            <template #default="scope">{{ scope.row.unit }}</template>
          </el-table-column>
          <el-table-column label="商品总价" width="">
            <template #default="scope">{{ scope.row.subtotalAmount }}</template>
          </el-table-column>
          <!-- <el-table-column label="收货地址" width="">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column label="最晚发货时间" width="">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column> -->
        </el-table>
        <div class="select-send">
          <el-radio-group v-model="radio1">
            <el-radio value="2" size="large">平台物流</el-radio>
            <el-radio value="1" size="large">第三方物流</el-radio>
          </el-radio-group>
        </div>
        <div
          v-if="radio1 == '2'"
          style="
            padding: 10px 0;
            margin-top: 10px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
          "
        >
          <div>
            <el-button class="el-button-gry" @click="send()" type="primary"
              >发货</el-button
            >
          </div>
        </div>
        <div v-else class="sendGoods">
          <div
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
            "
          >
            <div>
              <div class="logistics">
                <div>选择物流：</div>
                <el-select
                  v-model="optionsValue"
                  placeholder="选择物流"
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div
                v-for="(item, index) in inputData"
                :key="index"
                style="align-items: center"
                class="logistics"
              >
                <div>物流单号：</div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <el-input
                    style="margin: 5px 0px; width: 240px"
                    v-model="inputData[index].content"
                    placeholder="输入物流单号"
                  >
                  </el-input>
                </div>
                <div style="display: flex; align-items: center">
                  <div v-if="index == 0" style="margin-left: 10px">
                    <el-button
                      class="el-button-gry"
                      type="primary"
                      @click="addInput()"
                      >新增包裹</el-button
                    >
                  </div>
                  <div v-if="index !== 0" style="margin-left: 10px">
                    <el-button type="danger" @click="deleteList(index)"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div>共计{{ inputData.length }}个包裹</div>
            <div>
              <el-button class="el-button-gry" @click="send()" type="primary"
                >发货</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
import { createLogisticOrder } from "../../api/order/list";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const tableData = ref([]);
const radio1 = ref("2");
onMounted(() => {
  tableData.value = JSON.parse(route.query.data).orderItemInfos;
});

watch(
  () => route.query.data,
  (newSearch) => {
    if (route.query.data) {
      tableData.value = JSON.parse(route.query.data).orderItemInfos;
    }
  }
);

const inputData = reactive([
  {
    content: "",
  },
]);

let list = ref([]);

const options = [
  {
    label: "申通快递",
    value: "shentong",
  },
  {
    label: "韵达快递",
    value: "yunda",
  },
  {
    label: "京东快递",
    value: "jd",
  },
];
let optionsValue = ref("申通快递");

const column = ref([
  { prop: "goodId", label: "ID", width: "150" },
  {
    prop: "productImage",
    label: "商品图片",
    width: "150",
  },
  { prop: "productName", label: "商品名称", width: "150" },
  { prop: "goodPrice", label: "商品单价", width: "150" },
  { prop: "salesVolume", label: "购买数量", width: "150" },
  { prop: "pageView", label: "订单总价", width: "150" },
  { prop: "stock", label: "子订单数量", width: "150" },
  { prop: "isListed", label: "状态", width: "150" },
  { prop: "action", label: "操作", slotName: "action" },
]);

const addInput = () => {
  inputData.push({
    content: "",
  });
};

const deleteList = (index) => {
  inputData.splice(index, 1);
};

const send = async () => {
  inputData.forEach((res) => {
    list.value.push(res.content);
  });
  try {
    let response = await createLogisticOrder({
      orderId: JSON.parse(route.query.data).id,
      waybillName: radio1.value == 2 ? "" : optionsValue.value,
      waybillCode: radio1.value == 2 ? "" : list.value.join(","),
      type: radio1.value,
    });
    console.log(response);
    if (response.code == 200) {
      ElMessage({
        message: "发货成功",
        type: "success",
        plain: true,
      });
      router.back();
    }
  } catch (error) {
    console.log(error);
  }
};
</script>
<style lang="scss" scoped>
.select-send {
  padding: 5px 10px;
  margin-top: 10px;
  width: 100%;
  background-color: #fff;
}
.tree-goods-subOrder-image {
  width: 135px;
  height: 60px;
}
.table-cont {
  background-color: #f5f5f5 !important;
}
.sendGoods {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 10px 10px 30px 10px;
}
.logistics {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.address {
  width: 100%;
  background-color: #fff;
  font-size: 15px;
  color: #000000;
  margin: 20px 0px;
  padding: 20px 10px;
}
.send-button {
  text-align: center;
  width: 60px;
  height: 25px;
  line-height: 25px;
  border-radius: 5px;
  font-size: 15px;
  color: #fff;
  background-color: #409eff;
  cursor: pointer;
}
.tree-goods {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-left: 300px;
  align-items: center;
  .sendGoods {
    margin-left: 15px;
    padding: 5px 10px;
    background-color: #409eff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .tree-goods-subOrder {
    // display: flex;
    // width: 1510px;
    height: 60px;
    .tree-goods-subOrder-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .tree-goods-subOrder-image {
        width: 135px;
        height: 60px;
      }
      .tree-goods-subOrder-name {
        width: 150px;
        height: 60px;
        line-height: 60px;
        padding: 0 15px;
      }
    }
  }
}
.table-toolbar {
  width: 300px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: end;
  padding: 14px 16px 0 0;
}
</style>