daya-mall-admin/src/views/oms/order/deliverOrderList.vue

<template>
   
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>发货列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="deliverOrderTable" style="width: 100%" :data="list" border :row-class-name="tableRowClassName">
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.orderSn }}</template>
        </el-table-column>
        <el-table-column label="收货人" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.receiverName }}</template>
        </el-table-column>
        <el-table-column label="手机号码" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.receiverPhone }}</template>
        </el-table-column>
        <el-table-column label="邮政编码" width="160" align="center">
          <template slot-scope="scope">{{
            scope.row.receiverPostCode
          }}</template>
        </el-table-column>
        <el-table-column label="收货地址" align="center">
          <template slot-scope="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column label="配送方式" width="160" align="center">
          <template slot-scope="scope">
            <el-select
              placeholder="请选择物流公司"
              v-model="scope.row.deliveryCompany"
              size="small"
            >
              <el-option
                v-for="item in companyOptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" width="180" align="center">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <p class="table-btn-group">
            <el-button
              size="mini"
              type="danger"
              @click="handleViewRemove(scope.$index, scope.row)"
              >移除</el-button
            >
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px; text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm" :disabled="list.length <= 0" type="primary">确定</el-button>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">
      <el-table style="width: 100%" :data="listError" border>
        <el-table-column label="编号" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="内容"  align="center">
          <template slot-scope="scope">{{ scope.row.text }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { deliveryOrder } from "@/api/order";
const defaultLogisticsCompanies = [
  "顺丰快递",
  "圆通快递",
  "中通快递",
  "韵达快递",
];
export default {
  name: "deliverOrderList",
  data() {
    return {
      list: [],
      listError: [],
      dialogVisible: false,
      companyOptions: defaultLogisticsCompanies,
    };
  },
  created() {
    this.list = this.$route.query.list;
    //当list不为数组时转换为数组
    if (this.list instanceof Array === false) {
      this.list = [];
    }
    console.log( this.list)
  },
  methods: {
    tableRowClassName(row) {
      if(row.row.isError) {
        return 'warning-row'
      }
      return ''
    },
    handleViewRemove(index, row) {
      console.log(this.list, index, row)
      this.list.splice(index, 1)
    },
    cancel() {
      this.$router.back();
    },
    confirm() {
      this.$confirm("是否要进行发货操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deliveryOrder(this.list).then((response) => {
            const result = response.data
            if(!result || Object.keys(result).length <= 0) {
              this.$router.back();
              this.$message({
                type: "success",
                message: "发货成功!",
              });
            } else {
              this.list.forEach((item) => {
                if(result[item.orderSn]) {
                  item.isError = true
                }
              })

              this.dialogVisible = true;
              const temp = []
              for(let i in result) {
                temp.push({
                  id: i,
                  text: result[i]
                })
              }
              this.listError = temp
            }
          })
           
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发货",
          });
        });
    },
  },
};
</script>
<style>
.el-table .warning-row {
    background: oldlace;
  }</style>