优化

src/views/list/Home.vue

@@ -3,14 +3,14 @@
     <a-page-header
       style="border: 1px solid rgb(235, 237, 240)"
       title="订单状态数量统计"
-      sub-title='点击数字可以跳转到对应的订单列表'
+      sub-title="点击数字可以跳转到对应的订单列表"
       @back="() => null"
     />
     <div style="padding: 10px">
       <a-row :gutter="16">
-        <a-col :span="4" v-for="order in orderStatusList" :key="order.status" style='background: #ffffff;border: none'>
-          <a-card  :title="order.status_text" style='border: none '>
-            <router-link style='cursor: pointer;color: red;font-size: 40px;' :to="{ name: 'logistics_orderList', query: { order_status: order.status} }">{{ order.count }}单</router-link>
+        <a-col :span="4" v-for="order in orderStatusList" :key="order.status" style="background: #ffffff;border: none">
+          <a-card :title="order.status_text" style="border: none ">
+            <router-link style="cursor: pointer;color: red;font-size: 40px;" :to="{ name: 'logistics_orderList', query: { order_status: order.status} }">{{ order.count }}单</router-link>
           </a-card>
         </a-col>
       </a-row>
@@ -18,33 +18,33 @@
     <a-page-header
       style="border: 1px solid rgb(235, 237, 240)"
       title="订单状态流程说明"
-      sub-title=''
+      sub-title=""
       @back="() => null"
     />
     <a-card :bordered="false">
-      <a-steps class="steps" :current="5" direction='vertical'>
-        <a-step title="拆包中" subTitle='触发条件：用户申请打包；' description="物流商需操作：拆包->打包->【物流商后台-订单列表】点击【打包完成】录入相关信息；" status='process' />
-        <a-step title="未付款" subTitle='触发条件：物流商录入打包信息' description="无需物流商操作，待用户付款通知发货" status='process' />
-        <a-step title="待发货" subTitle="触发条件：用户订单付完款" description="物流商需操作：发货->【物流商后台-订单列表】点击【已发货】录入相关信息；" status='process' />
-        <a-step title="已发货" subTitle="触发条件：物流商在订单列表点击已发货" description="物流商需操作：在用户收货后，在【物流商后台-订单列表】点击【完成】录入相关信息；" status='process' />
-        <a-step title="已完成" subTitle="触发条件：用户收货后，物流商在【物流商后台-订单列表】点击【完成】；" description="流程完成" status='process' />
+      <a-steps class="steps" :current="5" direction="vertical">
+        <a-step title="拆包中" subTitle="触发条件：用户申请打包；" description="物流商需操作：拆包->打包->【物流商后台-订单列表】点击【打包完成】录入相关信息；" status="process" />
+        <a-step title="未付款" subTitle="触发条件：物流商录入打包信息" description="无需物流商操作，待用户付款通知发货" status="process" />
+        <a-step title="待发货" subTitle="触发条件：用户订单付完款" description="物流商需操作：发货->【物流商后台-订单列表】点击【已发货】录入相关信息；" status="process" />
+        <a-step title="已发货" subTitle="触发条件：物流商在订单列表点击已发货" description="物流商需操作：在用户收货后，在【物流商后台-订单列表】点击【完成】录入相关信息；" status="process" />
+        <a-step title="已完成" subTitle="触发条件：用户收货后，物流商在【物流商后台-订单列表】点击【完成】；" description="流程完成" status="process" />
       </a-steps>
     </a-card>
     <a-page-header
       style="border: 1px solid rgb(235, 237, 240)"
       title="包裹状态流程说明"
-      sub-title=''
+      sub-title=""
       @back="() => null"
     />
     <a-card :bordered="false">
-      <a-steps class="steps" :current="5" direction='vertical'>
-        <a-step title="待入库" subTitle='触发条件：用户包裹报备入库；' description="物流商需操作：如果包裹已到仓库，需在【物流商后台-包裹列表】中点击【入库】的录入相关信息" status='process' />
-        <a-step title="运输中" subTitle='触发条件：用户录入物流单号，api查询物流信息' description="物流商需操作：如果包裹已到仓库，需在【物流商后台-包裹列表】中点击【入库】的录入相关信息" status='process' />
-        <a-step title="待认领" subTitle="触发条件：物流商录入包裹信息中，用户没有报备的包裹；" description="无需物流商操作" status='process' />
-        <a-step title="已入库" subTitle="触发条件：物流商录入包裹信息中，用户已报备（或已认领）的包裹；" description="无需物流商操作" status='process' />
-        <a-step title="申请打包" subTitle="触发条件：用户申请打包；" description="物流商需操作：拆包->打包->【物流商后台-订单列表】找到对应包裹的订单录入相关信息；" status='process' />
-        <a-step title="已发货" subTitle="触发条件：物流商在【物流商后台-订单列表】找到对应包裹的订单点击【已发货】；" description="" status='process' />
-        <a-step title="已完成" subTitle="触发条件：物流商在【物流商后台-订单列表】找到对应包裹的订单点击【完成】；" description="流程完成" status='process' />
+      <a-steps class="steps" :current="5" direction="vertical">
+        <a-step title="待入库" subTitle="触发条件：用户包裹报备入库；" description="物流商需操作：如果包裹已到仓库，需在【物流商后台-包裹列表】中点击【入库】的录入相关信息" status="process" />
+        <a-step title="运输中" subTitle="触发条件：用户录入物流单号，api查询物流信息" description="物流商需操作：如果包裹已到仓库，需在【物流商后台-包裹列表】中点击【入库】的录入相关信息" status="process" />
+        <a-step title="待认领" subTitle="触发条件：物流商录入包裹信息中，用户没有报备的包裹；" description="无需物流商操作" status="process" />
+        <a-step title="已入库" subTitle="触发条件：物流商录入包裹信息中，用户已报备（或已认领）的包裹；" description="无需物流商操作" status="process" />
+        <a-step title="申请打包" subTitle="触发条件：用户申请打包；" description="物流商需操作：拆包->打包->【物流商后台-订单列表】找到对应包裹的订单录入相关信息；" status="process" />
+        <a-step title="已发货" subTitle="触发条件：物流商在【物流商后台-订单列表】找到对应包裹的订单点击【已发货】；" description="" status="process" />
+        <a-step title="已完成" subTitle="触发条件：物流商在【物流商后台-订单列表】找到对应包裹的订单点击【完成】；" description="流程完成" status="process" />
       </a-steps>
     </a-card>
   </page-header-wrapper>

src/views/list/TableList.vue

@@ -102,8 +102,9 @@
           <template>
             <a @click="handleSub(record)">详情</a>
             <a-divider v-if="record && (record.order_status === 5 || record.order_status === 20 || record.order_status === 29)" type="vertical" />
-            <a @click="handleEdit(record)" v-if="record && (record.order_status === 5 || record.order_status === 20 || record.order_status === 29)">
-              {{ record.order_status === 5 ? '打包完成' : (record.order_status === 20 ? '已发货':(record.order_status === 29 ? '完成':'')) }}</a>
+            <a @click="handleEdit(record,'打包完成')" v-if="record && record.order_status === 5">打包完成</a>
+            <a @click="handleEdit(record,'已发货')" v-else-if="record && record.order_status === 20">已发货</a>
+            <a @click="handleEdit(record,'完成（已收货）')" v-else-if="record && record.order_status === 29">完成（已收货）</a>
           </template>
         </span>
       </s-table>
@@ -113,6 +114,7 @@
         :visible="visibleDelivery"
         :loading="confirmLoading"
         :model="mdl"
+        :title="deliveryFormTitle"
         @cancel="handleCancel"
         @ok="deliveryOk"
       />
@@ -273,6 +275,7 @@ export default {
         visible: false,
         confirmLoading: false,
         mdl: null,
+        deliveryFormTitle: null,
         // 高级搜索 展开/关闭
         advanced: false,
         // 查询参数
@@ -342,15 +345,16 @@ export default {
       this.mdl = null
       this.visible = true
     },
-    handleEdit (record) {
+    handleEdit (record, title) {
       this.visibleDelivery = true
+      this.deliveryFormTitle = title
       this.mdl = { ...record }
     },
     deliveryOk () {
       const form = this.$refs.deliveryModal.form
       this.confirmLoading = true
       form.validateFields((errors, values) => {
-        console.log('TableList - loadData response:', values)
+        console.log('TableList - deliveryOk validateFields response:', values)
         if (!errors) {
           values.order_sn = this.mdl.order_sn
           if (this.mdl.order_status === 20) {

src/views/list/modules/deliveryForm.vue

@@ -1,6 +1,6 @@
 <template>
   <a-modal
-    title="包裹入库"
+    :title="title"
     :width="640"
     :visible="visible"
     :confirmLoading="loading"
@@ -8,9 +8,9 @@
     @cancel="() => { $emit('cancel') }"
   >
     <a-spin :spinning="loading">
-      <a-form :form="form" v-bind="formLayout">
+      <a-form :form="form" v-bind="formLayout" v-if="model && model.order_status === 5">
         <!-- 面单图片上传 -->
-        <a-form-item label="面单图片">
+        <a-form-item label="打包后的包裹图片">
           <a-upload
             name="file"
             :showUploadList="false"
@@ -57,6 +57,53 @@
           <a-input v-decorator="['height']" placeholder="请输入高度" />
         </a-form-item>
       </a-form>
+      <a-form :form="form" v-bind="formLayout" v-else-if="model && model.order_status === 20">
+        <!-- 面单图片上传 -->
+        <a-form-item label="发货的面单图片">
+          <a-upload
+            name="file"
+            :showUploadList="false"
+            :customRequest="handleImgUpload"
+            accept="image/*"
+          >
+            <a-button icon="upload">上传图片</a-button>
+          </a-upload>
+          <div v-if="imgUrl" style="margin-top: 8px;">
+            <img :src="imgUrl" alt="面单图片" style="max-width: 100px; max-height: 100px;" />
+          </div>
+          <a-input v-decorator="['img_url']" style="display: none;" />
+        </a-form-item>
+        <!-- 物流单号 -->
+        <a-form-item label="物流单号">
+          <a-input v-decorator="['tracking_no']" />
+        </a-form-item>
+        <!-- 物流地址 -->
+        <a-form-item label="物流地址">
+          <a-input
+            v-decorator="['logistics_url']"
+            placeholder="请输入物流地址"
+          />
+        </a-form-item>
+        <a-form-item label="实际发货时间">
+          <a-date-picker placeholder="请选择实际的发货时间" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" v-decorator="['real_delivery_time', {getValueFromEvent: handleDate}]" />（物流开始时间）
+        </a-form-item>
+      </a-form>
+      <a-form :form="form" v-bind="formLayout" v-else-if="model && model.order_status === 29">
+        <!-- 面单图片上传 -->
+        <a-form-item label="收货截图图片">
+          <a-upload
+            name="file"
+            :showUploadList="false"
+            :customRequest="handleImgUpload"
+            accept="image/*"
+          >
+            <a-button icon="upload">上传图片</a-button>（放置收货的截图，或者物流信息有收货信息的截图）
+          </a-upload>
+        </a-form-item>
+        <a-form-item label="实际收货时间" size="12">
+          <a-date-picker placeholder="请选择实际的收货时间" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" v-decorator="['real_receipt_time', {getValueFromEvent: handleDate}]" />（用户收货时间或者成功送达时间）
+        </a-form-item>
+      </a-form>
     </a-spin>
   </a-modal>
 </template>
@@ -65,7 +112,7 @@
 import pick from 'lodash.pick'
 import { imgUpload } from '@/api/manage'
 
-const fields = ['img_url', 'tracking_no', 'logistics_url', 'id', 'weight', 'length', 'width', 'height', 'real_weight']
+const fields = ['img_url', 'tracking_no', 'logistics_url', 'id', 'weight', 'length', 'width', 'height', 'real_weight', 'real_delivery_time', 'real_receipt_time']
 
 export default {
   props: {
@@ -80,6 +127,10 @@ export default {
     model: {
       type: Object,
       default: () => null
+    },
+    title: {
+      type: String,
+      required: true
     }
   },
   data () {
@@ -111,6 +162,12 @@ export default {
       } catch (e) {
         onError(e)
       }
+    },
+    handleDate (value) {
+      if (value) {
+        return value.format('YYYY-MM-DD HH:mm')
+      }
+      return value
     }
   },
   created () {