完善用户提货订单

src/views/order/channel/components/SendGoods.vue

@@ -0,0 +1,272 @@
+<template>
+  <div>
+    <el-dialog
+      title="订单发货"
+      :visible.sync="sendShow"
+      width="800px"
+      :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: 500px"
+          >
+            <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: 500px"
+          />
+        </el-form-item>
+        <el-form-item label="盲票组：">
+          <el-select
+            v-model="shipForm.boxId"
+            placeholder="请选择盲票组"
+            clearable
+            size="small"
+            style="width: 500px"
+          >
+            <el-option
+              v-for="item in channelList"
+              :key="item.areaId"
+              :label="item.title"
+              :value="item.boxId"
+            >
+              <div class="channel">
+                <div>{{ item.boxNo }}</div>
+                <div>{{ item.title }}</div>
+                <div>{{ item.orderNum }}包</div>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="盲票包序号：">
+          <el-autocomplete
+            v-model="pkgNo"
+            :fetch-suggestions="querySearch"
+            placeholder="输入盲票包序号"
+            size="small"
+            :disabled="shipForm.boxId ? false : true"
+            style="width: 500px"
+            @select="handleSelect"
+          >
+            <template slot-scope="{ item }">
+              <div class="channel">
+                <div>{{ item.startSn }}至{{ item.endSn }}</div>
+                <div>{{ item.title }}</div>
+              </div>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+      </el-form>
+      <!-- 选中盲票组列表 -->
+      <div class="table">
+        <el-table ref="table" :data="list">
+          <el-table-column label="盲票组" prop="title" />
+          <el-table-column label="盲票包系列号范围" min-width="100">
+            <template slot-scope="{ row }">
+              <div>
+                <div>{{ row.startSn }}至{{ row.endSn }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="50">
+            <template slot-scope="scope">
+              <div>
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="delList(scope.$index, scope.row)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 按钮 -->
+      <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,
+  ticketPkgList,
+  channelOrderShip,
+} from "@/api/business/order";
+export default {
+  mixins: [CustomFieldsMixin],
+  props: {
+    // 发货弹框显示
+    sendShow: {
+      type: Boolean,
+      default: false,
+    },
+    // 订单详情
+    goodsInfo: {
+      type: Object,
+      default: {},
+    },
+    // 盲票组下拉列表
+    channelList: {
+      type: Array,
+      default: [],
+    },
+  },
+  created() {
+    this.getCompanyList();
+  },
+  data() {
+    return {
+      loading: false,
+      shipForm: {
+        deliveryId: "",
+        deliveryFlowId: "",
+        boxId: "",
+      },
+      // 快递下拉列表
+      companyData: [],
+      // 盲票组序列号
+      pkgNo: "",
+      // 选中盲票组列表
+      list: [],
+      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.list = [];
+      this.shipForm.boxId = "";
+      this.$refs["shipForm"].resetFields();
+    },
+
+    // 快递下拉列表
+    getCompanyList() {
+      companyList({}).then((res) => {
+        this.companyData = res.data;
+      });
+    },
+
+    // 查询盲票组序列号
+    querySearch(queryString, cb) {
+      ticketPkgList({
+        orderId: this.goodsInfo.orderId,
+        boxId: this.shipForm.boxId,
+        pkgNo: this.pkgNo,
+      }).then((res) => {
+        cb(res.data);
+      });
+    },
+
+    // 选中盲票组序列号
+    handleSelect(item) {
+      this.list.push(item);
+    },
+
+    // 删除选中盲票组序列号
+    delList(index, row) {
+      this.list.splice(index, 1);
+    },
+
+    // 确认
+    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 ids = this.list.map((item) => item.pkgId);
+      if (!ids.length) {
+        this.msgError("请选择发货的票包");
+        this.loading = false;
+        return;
+      }
+      if (this.goodsInfo.pkgNum != ids.length) {
+        this.msgError(
+          `应发${this.goodsInfo.pkgNum}包，实际选中${ids.length}包`
+        );
+        this.loading = false;
+        return;
+      }
+      let data = {
+        ...form,
+        orderId: this.goodsInfo.orderId,
+        pkgIds: ids,
+      };
+      channelOrderShip(data)
+        .then((res) => {
+          if (res.code == 0) {
+            this.msgSuccess("发货成功");
+            this.close();
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+<style scoped>
+.channel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

src/views/order/deliver/detail.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <!-- 订单信息 -->
     <div class="info">
       <div class="info-title">订单信息</div>
       <div class="info-item">
@@ -21,44 +22,46 @@
         </div>
       </div>
     </div>
+    <!-- 买家信息 -->
     <div class="info">
       <div class="info-title">买家信息</div>
       <div class="info-item">
         <div class="info-item-content">
           <div class="info-item-content-one">
             <div class="title">用户昵称：</div>
-            <div class="txt">{{ info.nickName }}</div>
+            <div class="txt">{{ info.nickName || "--" }}</div>
           </div>
           <div class="info-item-content-one">
             <div class="title">收货人：</div>
-            <div class="txt">{{ info.receiver }}</div>
+            <div class="txt">{{ info.receiver || "--" }}</div>
           </div>
           <div class="info-item-content-one">
             <div class="title">联系电话：</div>
-            <div class="txt">{{ info.tel }}</div>
+            <div class="txt">{{ info.tel || "--" }}</div>
           </div>
         </div>
         <div class="info-item-content">
           <div class="info-item-content-one">
             <div class="title">收货地址：</div>
             <div class="">
-              {{ `${info.province}${info.city}${info.area}${info.address}` }}
+              {{
+                `${info.province || "--"}${info.city || "--"}${
+                  info.area || "--"
+                }${info.address || "--"}`
+              }}
             </div>
           </div>
         </div>
       </div>
     </div>
+    <!-- 订单状态 -->
     <div class="info">
       <div class="info-title">订单状态</div>
       <div class="info-item">
         <div class="info-item-content">
           <div class="info-item-content-one">
             <div class="title">订单状态：</div>
-            <div class="txt">{{ status.desc }}</div>
-          </div>
-          <div class="info-item-content-one" v-if="status.value === 2">
-            <div class="title">发货时间：</div>
-            <div class="txt">{{ "--" }}</div>
+            <div class="txt">{{ status.desc || "--" }}</div>
           </div>
         </div>
         <div class="info-item-content">
@@ -69,18 +72,47 @@
             @click="toGoods()"
             >发货</el-button
           >
-          <div class="info-item-content-one" v-if="status.value === 2">
-            <div class="title">快递公司：</div>
-            <div class="txt">{{ "--" }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 物流信息 -->
+    <div class="info" v-if="status.value === 2">
+      <div class="info-title">物流信息</div>
+      <div class="info-item">
+        <div
+          class="info-item-logistics"
+          v-for="(item, index) in deliverList"
+          :key="index"
+        >
+          <div class="title">快递{{ index + 1 }}</div>
+          <div class="info">
+            <div class="info-one">
+              <div class="tit">快递公司：</div>
+              <div class="txt">{{ item.companyName || "--" }}</div>
+            </div>
+            <div class="info-one">
+              <div class="tit">快递单号：</div>
+              <div class="txt">{{ item.deliveryFlowId || "--" }}</div>
+            </div>
+            <div class="info-one">
+              <div class="tit">发货时间：</div>
+              <div class="txt">{{ parseTime(item.deliveryTime) || "--" }}</div>
+            </div>
           </div>
-          <div class="info-item-content-one" v-if="status.value === 2">
-            <div class="title">快递单号：</div>
-            <div class="txt">{{ "--" }}</div>
+          <div class="goods">
+            <div class="goods-item" v-for="(ele, ins) in item.items" :key="ins">
+              <img :src="ele.picUrl" alt="" />
+              <div class="info">
+                <div>{{ ele.title || "--" }}</div>
+                <div>{{ ele.properties || "--" }}</div>
+                <div>{{ ele.goodsNum }}件</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
+    <!-- 商品信息 -->
     <div class="info">
       <div class="info-title">商品信息</div>
       <div class="info-table">
@@ -112,6 +144,7 @@
           </el-table-column>
         </el-table>
       </div>
+      <!-- 按钮 -->
       <div class="info-amt">
         <div class="info-amt-price">
           <span>运费：</span>{{ $numberFormat(info.freightAmt) }}元
@@ -121,65 +154,94 @@
         </div>
       </div>
     </div>
+
+    <!-- 发货 -->
+    <send-goods :send-show="goodsShow" :goods-info="info" @close="close" />
   </div>
 </template>
 <script>
 import { deliverDetail } from "@/api/business/order";
 import { publicFileGetUrl } from "@/api/common";
-import { accMul } from "@/utils/util";
+import SendGoods from "./components/SendGoods";
 export default {
-  name: "Detail",
+  name: "UserDetail",
+  components: {
+    SendGoods,
+  },
   data() {
     return {
+      // 订单ID
       orderId: "",
+      // 订单详情
       info: {},
+      // 订单状态
       status: {},
+      // 商品信息列表
       list: [],
+      // 物流信息性别
+      deliverList: [],
+      // 发货显示
+      goodsShow: false,
     };
   },
   created() {
     this.orderId = this.$route.query.id;
-    console.log(this.orderId);
     this.getDetail();
   },
   methods: {
+    // 订单详情
     getDetail() {
       deliverDetail({ orderId: this.orderId }).then((res) => {
-        console.log("res", res);
         if (res.code == 0) {
           this.info = res.data;
           this.status = JSON.parse(res.data.status);
-          res.data.items.forEach((item) => {
-            let picUrlArr = item.picUrl.split(",");
-            item.picUrl = publicFileGetUrl + picUrlArr[0];
-          });
+          res.data.deliverList &&
+            res.data.deliverList.forEach((item) => {
+              item.items.forEach((ele) => {
+                let picUrlArr = ele.picUrl.split(",");
+                ele.picUrl = publicFileGetUrl + picUrlArr[0];
+              });
+            });
+          this.deliverList = res.data.deliverList;
+          res.data.items &&
+            res.data.items.forEach((item) => {
+              let picUrlArr = item.picUrl.split(",");
+              item.picUrl = publicFileGetUrl + picUrlArr[0];
+            });
           this.list = res.data.items;
         }
       });
     },
 
-    toGoods() {},
+    // 点击发货
+    toGoods() {
+      this.goodsShow = true;
+    },
+
+    // 发货关闭
+    close() {
+      this.goodsShow = false;
+      this.getDetail();
+    },
   },
-  components: {},
-  mounted() {},
-  destroyed() {},
 };
 </script>
 <style lang="scss" scoped>
 .info {
-  margin-bottom: 40px;
+  margin-bottom: 30px;
   &-title {
     font-size: 14px;
     margin-bottom: 20px;
     font-weight: bold;
   }
   &-item {
+    padding-left: 50px;
     &-content {
       display: flex;
 
       &-one {
         display: flex;
-        margin-bottom: 40px;
+        margin-bottom: 20px;
 
         .title {
           width: 100px;
@@ -190,6 +252,45 @@ export default {
         }
       }
     }
+
+    &-logistics {
+      margin-bottom: 20px;
+      .title {
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+      .info {
+        display: flex;
+        margin-bottom: 20px;
+        &-one {
+          display: flex;
+        }
+        .tit {
+          width: 100px;
+        }
+        .txt {
+          width: 200px;
+        }
+      }
+      .goods {
+        margin: 10px 0;
+        &-item {
+          display: flex;
+          border-bottom: 1px solid #f3eeee;
+          img {
+            width: 100px;
+            height: 100px;
+          }
+          .info {
+            padding-left: 20px;
+            display: flex;
+            flex-direction: column;
+            height: 100px;
+            justify-content: space-between;
+          }
+        }
+      }
+    }
   }
   &-amt {
     margin-top: 20px;

src/views/order/deliver/index.vue

@@ -63,12 +63,25 @@
         >
       </el-form-item>
     </el-form>
+    <!-- 导出、刷新 -->
     <el-row :gutter="10">
+      <el-col :span="1.5">
+        <el-button
+          type="infor"
+          plain
+          icon="el-icon-printer"
+          size="small"
+          @click="handleExportDraw"
+          v-hasPermi="['order:deliver:export']"
+          >导出订单</el-button
+        >
+      </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
       ></right-toolbar>
     </el-row>
+    <div class="ge"></div>
     <!-- 订单状态 -->
     <el-tabs type="card" v-model="state" @tab-click="handleClick">
       <el-tab-pane label="全部订单" name="no"></el-tab-pane>
@@ -81,7 +94,7 @@
     </el-tabs>
     <!-- 列表 -->
     <el-table ref="table" v-loading="loading" :data="list">
-      <!-- 展开 -->
+      <!-- 展开盲票组列表 -->
       <el-table-column type="expand">
         <template slot-scope="{ row }">
           <el-table :data="row.items">
@@ -108,6 +121,7 @@
           </el-table>
         </template>
       </el-table-column>
+      <!-- 不展开列表 -->
       <el-table-column label="订单号" prop="orderId" min-width="80" />
       <el-table-column label="下单时间" min-width="100">
         <template slot-scope="{ row }">
@@ -148,14 +162,14 @@
         <template slot-scope="{ row }">
           <div>
             <el-button
-              v-hasPermi="['business:ticket:on']"
+              v-hasPermi="['order:deliver:query']"
               type="text"
               @click="getDetail(row)"
               >查看详情</el-button
             >
             <el-button
               v-if="row.status.value === 1"
-              v-hasPermi="['business:ticket:on']"
+              v-hasPermi="['order:deliver:ship']"
               type="text"
               @click="toGoods(row)"
               >发货</el-button
@@ -165,6 +179,7 @@
       </el-table-column>
     </el-table>
 
+    <!-- 分页 -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -173,82 +188,19 @@
       @pagination="getList"
     />
 
-    <el-dialog
-      title="订单发货"
-      :visible.sync="goodsShow"
-      width="800px"
-      :before-close="close"
-    >
-      <el-form :model="shipForm" ref="queryForm" 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="快递公司：">
-          <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="快递单号：">
-          <el-input
-            v-model="shipForm.deliveryFlowId"
-            placeholder="输入快递单号"
-            clearable
-            size="small"
-            style="width: 300px"
-          />
-        </el-form-item>
-        <el-form-item label="盲票组：">
-          <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="盲票包序号：">
-          <el-input
-            v-model="shipForm.deliveryFlowId"
-            placeholder="输入盲票包序号"
-            clearable
-            size="small"
-            style="width: 300px"
-          />
-        </el-form-item>
-      </el-form>
-    </el-dialog>
-
+    <!-- 发货 -->
     <send-goods :send-show="goodsShow" :goods-info="goodsInfo" @close="close" />
   </div>
 </template>
 <script>
-import { getDeliverList, companyList } from "@/api/business/order";
+import {
+  getDeliverList,
+  deliverOrderExport,
+} from "@/api/business/order";
 import { publicFileGetUrl } from "@/api/common";
 import SendGoods from "./components/SendGoods";
 export default {
+  name: "Deliver",
   components: {
     SendGoods,
   },
@@ -256,6 +208,7 @@ export default {
     return {
       loading: false,
       showSearch: true,
+      // 筛选
       queryParams: {
         nickName: "",
         title: "",
@@ -264,6 +217,7 @@ export default {
         endTime: "",
         status: "",
       },
+      // 分页
       pageParams: {
         pageNum: 1,
         pageSize: 10,
@@ -277,21 +231,17 @@ export default {
       tradeTimeArr: [],
       // 订单列表状态
       state: "no",
-
+      // 发货显示
       goodsShow: false,
+      // 订单详情
       goodsInfo: {},
-      shipForm: {
-        deliveryId: "",
-        deliveryFlowId: "",
-      },
-      companyData: [],
     };
   },
   created() {
     this.getList();
-    this.getCompanyList();
   },
   methods: {
+    // 订单列表
     getList() {
       this.loading = true;
       getDeliverList(
@@ -321,17 +271,26 @@ export default {
           this.loading = false;
         });
     },
-    getCompanyList() {
-      companyList({}).then((res) => {
-        this.companyData = res.data;
-      });
-    },
+
     //搜索
     handleQuery() {
       this.getList();
     },
+
     // 重置
-    resetQuery() {},
+    resetQuery() {
+      this.queryParams = {
+        nickName: "",
+        title: "",
+        orderId: "",
+        startTime: "",
+        endTime: "",
+        status: "",
+      };
+      this.tradeTimeArr = [];
+      this.getList();
+    },
+
     // 选择下单时间
     tardeTime(e) {
       if (e) {
@@ -344,6 +303,7 @@ export default {
         this.handleQuery();
       }
     },
+
     // 订单切换
     handleClick(e) {
       if (e.name == "no") {
@@ -353,16 +313,46 @@ export default {
       }
       this.getList();
     },
+
     // 查看详情
     getDetail(row) {
       this.$router.push({ name: "UserDetail", query: { id: row.orderId } });
     },
+
+    // 点击发货
     toGoods(row) {
       this.goodsShow = true;
       this.goodsInfo = row;
     },
+
+    // 关闭发货
     close() {
       this.goodsShow = false;
+      this.getList();
+    },
+
+    // 导出订单
+    handleExportDraw() {
+      this.$confirm("是否确认导出订单?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.vloading = this.$loading({
+            lock: true,
+            text: "正在导出订单.....",
+            background: "rgba(0, 0, 0, 0.7)",
+          });
+          return deliverOrderExport(this.queryParams);
+        })
+        .then((response) => {
+          this.vloading.close();
+          this.download(response.msg);
+        })
+        .catch(() => {
+          this.vloading.close();
+        });
     },
   },
 };
@@ -371,4 +361,7 @@ export default {
 ::v-deep .el-tabs--border-card > .el-tabs__content {
   padding: 0;
 }
+.ge {
+  height: 20px;
+}
 </style>