zfire-newmall-admin/src/views/mallManagement/order/order_detail/index.vue

<template>
  <div class="app-container">
    <el-page-header @back="goBack" content="订单详情"></el-page-header>
    <div class="order-main">
      <el-row style="padding: 15px 15px 10px">
        <el-col :span="24">
          <div class="order-main-title">
            <span>订单编号：{{ orderDetail.orderId }}</span>
            <span>下单时间：{{ orderDetail.createTime }}</span>
            <span>商户：{{ orderDetail.companyWechatName || '无' }}</span>
            <!-- <span>网点：{{ orderDetail.websitName || '无' }}</span> -->
            <el-tag v-if="orderDetail.isOld == 'YES'">以旧换新</el-tag>
            <div class="fr">
              <el-link type="primary" :underline="false" @click="showDialog('remark')">订单备注</el-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100%; padding: 10px 15px 15px 15px">
        <el-row>
          <el-col :span="10">
            <div style="display: flex;">
              <div>
                <div class="order-main-status">
                  <span>{{ orderDetail.orderStatus | ORDER_CURRENT_STATUS_FILTER }}</span>
                </div>
                <div class="order-main-opt-btn">
                  <template v-if="orderDetail.orderStatus === 'NOPAY'">
                    <el-popconfirm title="确定收款吗？" @confirm="confirmOrder">
                      <el-button slot="reference" size="small">确认收款</el-button>
                    </el-popconfirm>
                    <el-button size="small" @click="showDialog('price')" style="margin-left: 10px;">修改价格</el-button>
                    <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder" style="margin-left: 10px;">
                      <el-button slot="reference" size="small" type="danger">取消订单</el-button>
                    </el-popconfirm>
                  </template>
                  <template v-if="orderDetail.orderStatus === 'DFH'">
                    <el-button size="small" type="primary" @click="showDialog('send')">发货</el-button>
                    <el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder" style="margin-left: 10px;">
                      <el-button slot="reference" size="small" type="danger">取消订单</el-button>
                    </el-popconfirm>
                  </template>
                  <el-button type="primary" size="small" @click="returnOrder()" v-if="(orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER')">发起退货</el-button>
                  <template v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
                    <el-button size="small" @click="showDialog('query')">查看物流</el-button>
                  </template>
                </div>
              </div>
              <el-table
                class="specTable"
                style="margin-left: 30px;"
                height="120px"
                :data="printList"
                element-loading-text="Loading"
                border
                highlight-current-row
                stripe>
                <el-table-column align="center" label="打印人" prop="createBy" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="打印时间" prop="createTime" width="160"></el-table-column>
              </el-table>
            </div>
            
          </el-col>
          <el-col :span="14" style="padding-top: 10px;">
            <el-steps :active="orderDetail.orderStatus != 'CLOSE' ? curOrderStatus : -1" align-center>
              <el-step title="买家下单" :description="orderDetail.createTime"></el-step>
              <el-step title="买家付款" :description="orderDetail.payTime ? orderDetail.payTime : ''"></el-step>
              <el-step title="商家发货" :description="orderDetail.deliverTime ? orderDetail.deliverTime : ''"></el-step>
              <el-step title="交易成功" :description="orderDetail.overTime ? orderDetail.overTime : ''"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="order-receive-info">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :lg="12">
          <div class="main-detail">
            <h3>订单信息</h3>
            <div class="item">
              <div class="label">收货人信息：</div>
              <div class="value">{{ orderDetail.receUserName }} ({{ orderDetail.recePhone }})</div>
            </div>
            <div class="item">
              <div class="label">收货人地址：</div>
              <div class="value">{{ orderDetail.province + orderDetail.city + orderDetail.area + orderDetail.street +
                orderDetail.receAddress + (orderDetail.houseNo || '') }}</div>
            </div>
            <div class="item">
              <div class="label">销售员信息：</div>
              <div class="value">{{ orderDetail.workerName }} ({{ orderDetail.workerPhone }})</div>
            </div>
            <div class="item">
              <div class="label">业务员信息：</div>
              <div class="value">{{ orderDetail.saleName }} ({{ orderDetail.saleMobile }})</div>
            </div>
            <div class="item">
              <div class="label">下单渠道：</div>
              <div class="value">{{ orderDetail.source }}</div>
            </div>
            <div class="item">
              <div class="label">支付方式：</div>
              <div class="value">{{ orderDetail.payType }}</div>
            </div>
            <div class="item">
              <div class="label">是否开票：</div>
              <div class="value">{{ orderDetail.tax ? '是' : '否' }}</div>
            </div>
            <div class="item" v-if="orderDetail.dispatchType">
              <div class="label">工单派单方式：</div>
              <div class="value">{{ orderDetail.dispatchType }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" v-if="orderDetail.orderStatus === 'YFH' || orderDetail.orderStatus === 'OVER'">
          <div class="main-detail">
            <h3>物流信息</h3>
            <div class="item">
              <div class="label">快递单号：</div>
              <div class="value">{{ orderDetail.logisticsNo }}</div>
            </div>
            <div class="item">
              <div class="label">快递公司：</div>
              <div class="value">{{ orderDetail.companyName }}</div>
            </div>
            <div class="item">
              <div class="label">货件仓储：</div>
              <div class="value">{{ orderDetail.storageName }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="orderDetail.orderOldProductDTOList && orderDetail.orderOldProductDTOList.length > 0" style="margin-bottom: 30px;">
      <h3>旧机信息</h3>
      <div class="order-detail">
        <!-- 回收 -->
        <el-table :data="orderDetail.orderOldProductDTOList" style="width: 100%;" size="small" border>
          <el-table-column prop="mainName" label="大类" align="center"></el-table-column>
          <el-table-column prop="smallName" label="小类" align="center"></el-table-column>
          <el-table-column prop="specName" label="型号" align="center"></el-table-column>
          <el-table-column prop="itemList" label="属性" align="center">
            <template slot-scope="scope">
              {{scope.row.itemList.map(o => o.dictName).join('、')}}
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="单位" align="center">
            <template>台</template>
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center"></el-table-column>
          <el-table-column prop="payAmount" label="旧机金额" align="center"></el-table-column>
          <el-table-column prop="yjhxDkFlag" label="支付方式" align="center">
            <template slot-scope="scope">
              {{ {1: '线上支付抵扣订单货款', 2: '仅线上展示旧机价值'}[scope.row.yjhxDkFlag] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="compensateList.length > 0" style="margin-bottom: 30px;">
      <h3>理赔信息</h3>
      <div class="order-detail">
        <!-- 理赔表格 -->
        <el-table :data="compensateList" style="width: 100%;" size="small" border>
          <el-table-column prop="goodsName" label="理赔商品" align="center"></el-table-column>
          <el-table-column prop="num" label="理赔数量" align="center"></el-table-column>
          <el-table-column prop="createTime" label="理赔时间" align="center"></el-table-column>
          <el-table-column prop="refundAmount" label="理赔金额" align="center"></el-table-column>
          <el-table-column prop="operatorUser" label="操作人" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <h3>商品信息</h3>
    <div class="order-detail">
      <!-- 订单表格 -->
      <el-table :data="orderDetail.orderDetails" style="width: 100%" border>
        <el-table-column label="商品信息" min-width="200">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="6">
                <el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="18">
                <div><el-tag type="danger" effect="plain" size="mini" style="margin-right: 4px" v-if="scope.row.promotionFullPieceId">满件打折</el-tag>{{ scope.row.goodsName }}</div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSpecValue" label="规格" align="center"></el-table-column>
        <el-table-column prop="price" label="单价" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column prop="shareAmount" label="分销金额" align="center">
          <template slot-scope="scope">
            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.shareAmount : '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="discountAmount" label="优惠金额" align="center"></el-table-column>
        <!-- <el-table-column prop="zkAmount" label="折扣优惠" align="center"></el-table-column> -->
        <el-table-column prop="applyAmount" label="优惠价格申请" align="center" min-width="110"></el-table-column>
        <el-table-column prop="profitAmount" label="实际销售金额" align="center" min-width="110">
          <template slot-scope="scope">
            {{ orderDetail.workerId || orderDetail.promotionGroupUserId ? scope.row.profitAmount : scope.row.payAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="payAmount" label="商品总金额" align="center" min-width="100"></el-table-column>
        <el-table-column prop="freight" label="运费" align="center"></el-table-column>
        <el-table-column prop="userRefundNum" label="用户维权数量" align="center" min-width="110"></el-table-column>
        <el-table-column prop="userRefundAmount" label="用户维权金额" align="center" min-width="110"></el-table-column>
        <el-table-column prop="refundNum" label="退款数量" align="center"></el-table-column>
        <el-table-column prop="refundAmount" label="退款金额" align="center"></el-table-column>
        <el-table-column prop="refundBy" label="退款人" align="center"></el-table-column>
        <el-table-column prop="refundTime" label="退款时间" align="center" min-width="160"></el-table-column>
        <el-table-column label="操作" align="center" width="160" v-if="orderDetail.orderStatus != 'CLOSE' && orderDetail.payTypeId == 'WECHAT'">
          <template slot-scope="scope">
            <el-button v-if="!~['TIMEOUT', 'CLOSE'].indexOf(orderDetail.orderStatus)" size="mini" type="primary"
              @click="handleRefund(scope.row)"
              :disabled="!orderDetail.refundAble || scope.row.refundNum >= scope.row.num">退款</el-button>
            <el-button v-if="!~['TIMEOUT'].indexOf(orderDetail.orderStatus)" size="mini"
              @click="handleCompensate(scope.row)">理赔</el-button>
          </template>
        </el-table-column>
      </el-table>


      <div class="order-amount-info">
        <el-row>
          <el-col :span="19">
            <div style="width: 1px;height: 1px;"></div>
          </el-col>
          <el-col :span="5">
            <div style="padding-bottom: 10px;">商品总价：¥ {{ orderDetail.totalAmount }}</div>
            <div style="padding-bottom: 10px;">运费：¥ {{ orderDetail.freight }}</div>
            <div style="padding-bottom: 10px;" v-if="orderDetail.discountAmount">
              优惠：¥ {{ orderDetail.discountAmount }}
              <span v-if="orderDetail.exchangeCode">（优惠码：{{ orderDetail.exchangeCode }}）</span>
              <span v-if="orderDetail.promotionDiscountRate">（{{ orderDetail.promotionDiscountRate * 10 }}折）</span>
              <span v-if="orderDetail.promotionFullPieceId">（{{ orderDetail.promotionFullPieceRemark }}）</span>
            </div>
            <div style="font-size: 14px;">
              <span style="padding-right: 15px;">实际收款</span><span style="color: red;font-size: 18px;">¥ {{
                orderDetail.payAmount }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="order-evaluate-info" v-if="evaluateDetail">
      <div class="title">
        <div class="left">评价信息<span>{{ evaluateDetail.createTime }}</span></div>
        <div class="right">
          <span>是否客户端展示</span>
          <el-switch v-model="evaluateDetail.isShow" @change="changeShow"></el-switch>
        </div>
      </div>
      <div class="main">
        <div class="rate-list">
          <div style="display: flex; align-items: center; margin-bottom: 5px;">商品质量：<el-rate
              :value="evaluateDetail.commentGoods" disabled disabled-void-color="#DDDDDD"></el-rate></div>
          <div style="display: flex; align-items: center; margin-bottom: 5px;">服务质量：<el-rate
              :value="evaluateDetail.commentService" disabled disabled-void-color="#DDDDDD"></el-rate></div>
          <div style="display: flex; align-items: center;">配送质量：<el-rate :value="evaluateDetail.commentExpress" disabled
              disabled-void-color="#DDDDDD"></el-rate></div>
        </div>
        <div class="tag-list" v-if="orderDetail.orderCommentTags && orderDetail.orderCommentTags.length > 0">
          <el-tag v-for="(item, index) in orderDetail.orderCommentTags" :key="index">{{ item }}</el-tag>
        </div>
      </div>
      <div class="content">{{ evaluateDetail.content }}</div>
      <div class="img-list" v-if="orderDetail.orderCommentImgs && orderDetail.orderCommentImgs.length > 0">
        <el-image v-for="(item, index) in orderDetail.orderCommentImgs" :key="index" :src="item"
          :preview-src-list="orderDetail.orderCommentImgs" fit="cover"></el-image>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="remarkVisible" :show-close="false" :width="dialogWidth"
      :close-on-click-modal="false">
      <el-form :model="orderForm" :rules="orderFormRules" ref="orderForm" v-if="curOpenDialogType !== 'query'"
        label-width="100px" label-position="left">
        <el-form-item prop="remark" v-if="curOpenDialogType === 'remark'">
          <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 16 }" placeholder="请输入备注内容" v-model="remark"
            maxlength="100" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item prop="payAmount" v-if="curOpenDialogType === 'price'">
          <el-input v-model="orderForm.payAmount" autocomplete="off" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="receUserName" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.receUserName" autocomplete="off" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="收货电话" prop="recePhone" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.recePhone" autocomplete="off" placeholder="请输入收货电话"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="receAddress" v-if="curOpenDialogType === 'info'">
          <el-input v-model="orderForm.receAddress" autocomplete="off" placeholder="请输入收货地址"></el-input>
        </el-form-item>
		<template v-if="curOpenDialogType === 'send'">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-form-item label="发货方式" prop="pickType">
					  <el-radio-group v-model="orderForm.pickType">
					    <el-radio label="YES">自提/自送</el-radio>
					    <el-radio label="NO">快递物流</el-radio>
					  </el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item v-if="orderForm.pickType == 'YES'" label="提货人" prop="pickName" :rules="[{ required: true, message: '提货人不能为空', trigger: 'blur' }]">
					  <el-input v-model="orderForm.pickName" placeholder="请输入提货人"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item v-if="orderForm.pickType == 'YES'" label="提货人电话" prop="pickPhone" :rules="[{ required: true, message: '提货人电话不能为空', trigger: 'blur' },{ pattern:/^((1[3456789]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }]">
					  <el-input v-model="orderForm.pickPhone" placeholder="请输入提货人电话"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item v-if="orderForm.pickType == 'NO'" label="快递单号" prop="logisticsNo">
					  <el-input v-model="orderForm.logisticsNo" autocomplete="off" placeholder="请输入快递单号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item v-if="orderForm.pickType == 'NO'" label="物流公司" prop="companyCode">
					  <el-select v-model="orderForm.companyCode" placeholder="请选择物流公司" style="width: 100%;">
					    <el-option :label="item.name" :value="item.code" v-for="(item, index) in companyList"
					      :key="index"></el-option>
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="仓储" prop="storageId">
					  <el-select v-model="orderForm.storageId" placeholder="请选择仓储" style="width: 100%;">
					    <el-option :label="item.storageName" :value="item.storageId" v-for="(item, index) in storageList"
					      :key="index"></el-option>
					  </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="是否派单" prop="workOrder">
					  <el-radio-group v-model="orderForm.workOrder">
					    <el-radio :label="true">是</el-radio>
					    <el-radio :label="false">否</el-radio>
					  </el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-card class="box-card">
						<el-tabs v-model="typeIndex">
						    <el-tab-pane label="发货数量" name="1"></el-tab-pane>
						    <el-tab-pane v-if="joinCode" label="发货条码" name="2"></el-tab-pane>
						</el-tabs>
						<br/>
						<el-button size="small" v-show="typeIndex == 2 && joinCode" type="primary" @click="addCode()">新增</el-button>
						<el-button size="small" v-show="typeIndex == 1 && joinCode" type="primary" @click="handleDownload('导入条码模板')">导入条码模板下载</el-button>
						<div class="table">
							<!-- 发货数量 -->
							<el-form v-show="typeIndex == 1" ref="formData1" :model="formData1" label-width="0" size="small" label-position="left">
								<el-table :data="formData1.list" element-loading-text="Loading" border fit highlight-current-row stripe>
									<el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
									<el-table-column prop="mainName" align="center" label="大类"></el-table-column>
									<el-table-column prop="smallName" align="center" label="小类"></el-table-column>
									<el-table-column prop="goodsName" align="center" label="商品名称"></el-table-column>
									<el-table-column prop="goodsMaterialName" align="center" label="物料名称"></el-table-column>
									<el-table-column prop="goodsMaterialSpecsName" align="center" label="规格型号"></el-table-column>
									<el-table-column prop="goodsMaterialUnit" align="center" label="单位">
										<template slot-scope="scope">
											{{scope.row.goodsMaterialUnit == 'C'?'整套':scope.row.goodsMaterialUnit == 'I'?"单个":''}}
										</template>
									</el-table-column>
									<el-table-column prop="num" align="center" label="数量"></el-table-column>
									<el-table-column prop="insideNum" align="center" label="内机数量"></el-table-column>
									<el-table-column prop="outNum" align="center" label="外机数量"></el-table-column>
									<el-table-column prop="partNum" align="center" label="配件数量"></el-table-column>
									<el-table-column prop="insideCodeQty" align="center" label="导入内机条码数量" width="140"></el-table-column>
									<el-table-column prop="outCodeQty" align="center" label="导入外机条码数量" width="140"></el-table-column>
									<el-table-column prop="partsCodeQty" align="center" label="导入配件条码数量" width="140"></el-table-column>
									<el-table-column label="操作" align="center" width="140" fixed="right">
										<template slot-scope="scope" v-if="joinCode">
											<el-upload
											  action='_'
											  :show-file-list='false'
											  :http-request="importCode"
											>
												<el-button @click="orderDetailId = scope.row.orderDetailId" size="mini" type="text">导入条码</el-button>
											</el-upload>
										</template>
									</el-table-column>
								</el-table>
							</el-form>
							<!-- 发货条码 -->
							<el-form ref="formData2" :model="formData2">
								<el-table v-show="typeIndex == 2" :data="formData2.list" element-loading-text="Loading" border fit highlight-current-row stripe>
									<el-table-column label="品牌" align="center">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.brandName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="商品大类" align="center">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.mainName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="商品小类" align="center">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.smallName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="商品名称">
										<template slot-scope="scope">
											<el-form-item>
												<el-input type="text" v-model="scope.row.goodsMaterialName" :disabled="true" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="规格型号" align="center">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.specs'" :rules="[{ required: true, message: `请选择规格型号`, trigger: 'blur' }]">
												<el-select v-model="scope.row.specs" @change="(e)=>{changeSpecs(e,scope.row)}" value-key="orderDetailId" :disabled="isEdit2 != scope.$index" placeholder="请选择" style="width: 100%;">
												    <el-option
												      v-for="(item,ind) in formData1.list"
												      :key="ind"
												      :label="item.goodsMaterialSpecsName"
												      :value="item">
												    </el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="物料类型" align="center">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.goodsMaterialItemType'" :rules="[{ required: true, message: `请选择物料类型`, trigger: 'blur' }]">
												<el-select v-model="scope.row.goodsMaterialItemType" @change="(e)=>{changeMaterial(e,scope.row)}" 
													:disabled="isEdit2 != scope.$index" placeholder="请选择" style="width: 100%;">
												    <el-option
												      v-for="(item,ind) in [{name: '内机',id: 'INSIDE'},{name: '外机',id: 'OUT'},{name: '配件',id: 'PARTS'}]"
												      :key="ind"
												      :label="item.name"
												      :value="item.id">
												    </el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="物料名称" align="center">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.material'" :rules="[{ required: true, message: `请选择物料名称`, trigger: 'blur' }]">
												<el-select v-model="scope.row.material" @focus="(e)=>{
													if(!scope.row.goodsMaterialItemType){
														return $message.warning('请先选择物料类型！');
													}
												}" @change="(e)=>{
													scope.row.materialName = e.name
													scope.row.stockQty = (e.uniqueCode=='YES'?1:null)
													scope.row.uniqueCode = e.uniqueCode
													scope.row.goodsMaterialItemId = e.itemId
												}" value-key="name" :disabled="isEdit2 != scope.$index" placeholder="请选择" style="width: 100%;">
												    <el-option
												      v-for="(item,ind) in scope.row.materialList"
												      :key="ind"
												      :label="item.name"
												      :value="item">
												    </el-option>
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="是否一物一码" >
										<template slot-scope="scope">
											<el-form-item>
												{{scope.row.uniqueCode=='YES'?'是':scope.row.uniqueCode=='NO'?'否':''}}
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="条码" >
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.materialCode'" :rules="[{ required: true, message: `请输入条码`, trigger: 'blur' }]">
												<el-input type="text" v-model="scope.row.materialCode" :disabled="isEdit2 != scope.$index" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="" align="center" label="数量">
										<template slot-scope="scope">
											<el-form-item :prop="'list.' + scope.$index + '.stockQty'" :rules="[{ required: true, message: `请输入数量`, trigger: 'blur' }]">
												<el-input type="number" v-model="scope.row.stockQty" :disabled="isEdit2 != scope.$index || scope.row.uniqueCode=='YES'" placeholder="请输入"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column label="操作" align="right" width="140" fixed="right">
										<template slot-scope="scope">
											<el-button size="mini" type="primary" v-if="scope.$index == isEdit2" @click="saveCode(scope.row)">保存</el-button>
											<el-button size="mini" type="primary" v-if="scope.$index != isEdit2" @click="isEdit2 = scope.$index">编辑</el-button>
											<el-popconfirm title="确定删除吗？" @confirm="delCode(scope.row.orderDetailCodeId,scope.$index)">
												<el-button slot="reference" size="mini" type="danger">删除</el-button>
											</el-popconfirm>
										</template>
									</el-table-column>
								</el-table>
							</el-form>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</template>
      </el-form>
      <el-table v-loading="logisticsLoading" :data="logistics" style="width: 100%" size="mini"
        v-if="curOpenDialogType === 'query'">
        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
        <el-table-column prop="areaName" label="地区名称" align="center"></el-table-column>
        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
        <el-table-column prop="state" label="物流状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
          </template>
        </el-table-column>
        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
		  
        <el-button type="primary" @click="saveForm" v-if="curOpenDialogType !== 'query' && curOpenDialogType !== 'send'">保 存</el-button>
		<el-button type="primary" @click="deliverGoods" v-if="curOpenDialogType == 'send'">发 货</el-button>
        <el-button @click="cancelForm">{{ curOpenDialogType === 'query' ? '关 闭' : '取 消' }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="理赔" :visible.sync="compensateFormVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="compensateForm" :model="compensateForm" :rules="compensateFormRules" label-position="left">
        <el-form-item label="理赔数量" prop="num">
          <el-input v-model="compensateForm.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="理赔金额" prop="amount">
          <el-input v-model="compensateForm.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="compensateForm.remark" autocomplete="off" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCompensateForm">取 消</el-button>
        <el-button type="primary" @click="submitCompensateForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cancelOrder,
  changePrice,
  changeReceiveInfo,
  confirmOrder,
  getOrderDetail, goodsDeliver,
  saveRemark, orderRefund, orderCompensate, getCompensateList,
  changeShow, getCodeDetail, getMaterialList, listImport, saveCode, delCode, getPrintList
} from "@/api/order";
import { getExpress, getCompanyList } from "@/api/common";
import { commonTemplateDownload } from '@/api/common.js'
import * as Storage from "@/api/storage";
import { mapGetters } from 'vuex'

export default {
  name: "detail",
  data() {
    return {
      orderId: '',
      orderDetail: {},
      evaluateDetail: null,
      dialogTitle: '',
      remarkVisible: false,
      remark: '',
      price: 0,
      orderForm: {
        orderId: '',
        payAmount: '',
        receAddress: '',
        receUserName: '',
        recePhone: '',
        logisticsNo: '',
        companyCode: '',
        workOrder: true,
		pickType: 'YES',
		pickName: '',
		pickPhone: ''
      },
      orderFormRules: {
        payAmount: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'price') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请输入价格'))
                } else {
                  if (!this.isNumber(value)) {
                    callback(new Error('请输入数字值'))
                  } else {
                    callback()
                  }
                }
              }
            }, trigger: 'blur'
          }
        ],
        receUserName: [
          { require: true, message: '请输入收货人', trigger: 'blur' }
        ],
        recePhone: [
          { require: true, message: '请输入收货电话', trigger: 'blur' }
        ],
        receAddress: [
          { require: true, message: '请输入收货地址', trigger: 'blur' }
        ],
        logisticsNo: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请输入快递单号'))
                } else {
                  callback()
                }
              }
            }, trigger: 'blur'
          }
        ],
        storageId: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请选择仓储'))
                } else {
                  callback()
                }
              }
            }, trigger: 'change'
          }
        ],
        companyCode: [
          {
            validator: (rule, value, callback) => {
              if (this.curOpenDialogType !== 'send') {
                callback()
              } else {
                if (!value) {
                  callback(new Error('请选择快递公司'))
                } else {
                  callback()
                }
              }
            }, trigger: 'change'
          }
        ]
      },
      curOpenDialogType: 'order',
      logistics: [],
      storageList: [],
      dialogWidth: '50%',
      logisticsLoading: false,
      companyList: [],

      compensateFormVisible: false,
      compensateForm: {
        id: null,
        num: '',
        amount: '',
        remark: '',
      },
      compensateFormRules: {
        num: [
          { required: true, message: '请输入理赔数量', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value > (this.compensateItem.num - this.compensateItem.refundNum)) {
                callback(new Error('最多还可以理赔' + (this.compensateItem.num - this.compensateItem.refundNum) + '件商品'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        amount: [
          { required: true, message: '请输入理赔金额', trigger: 'blur' },
        ]
      },
      compensateItem: {
        num: '',
        refundNum: '',
      },
      compensateList: [],
	  typeIndex: '1',
	  formData1: {
	  	list: [],
	  },
	  formData2: {
	  	list: [],
	  },
	  isEdit1: 0,
	  isEdit2: 0,
	  joinCode: JSON.parse(localStorage.getItem('greemall_user')).joinCode,
	  orderDetailId: '',

    printList: [],
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.getDetail();
    this.getStorageList();
    this.getCompanyList();
    this.getCompensateList();
    this.getPrintList();
  },
  methods: {
    getDetail() {
      getOrderDetail({ orderId: this.orderId }).then((res) => {
        this.orderDetail = res.data
        this.orderDetail.workerName = this.orderDetail.workerName ? this.orderDetail.workerName : '暂无'
        this.orderDetail.workerPhone = this.orderDetail.workerPhone ? this.orderDetail.workerPhone : ''
        this.evaluateDetail = res.data.orderComment;
		let arr = []
		res.data.orderDetails.forEach(item=>{
			if(item.goodsMaterialId){
				arr.push(item)
			}
		})
		this.formData1.list = arr
      })
    },

    getPrintList() {
      getPrintList({ orderId: this.orderId }).then(res => {
        this.printList = res.data || [];
      })
    },

    showDialog(type) {
      this.dialogWidth = type === 'query' ? '80%' : type === 'send' ? '80%': '50%'
      this.remarkVisible = true
      this.curOpenDialogType = type
      if (type === 'remark') {
        this.dialogTitle = '订单备注'
        this.remark = this.orderDetail.remark
      } else if (type === 'price') {
        this.dialogTitle = '修改价格'
        this.orderForm.payAmount = this.orderDetail.payAmount
      } else if (type === 'info') {
        this.dialogTitle = '收货人信息'
        this.orderForm.receUserName = this.orderDetail.receUserName
        this.orderForm.recePhone = this.orderDetail.recePhone
        this.orderForm.receAddress = this.orderDetail.receAddress
      } else if (type === 'send') {
        this.dialogTitle = '发货信息'
      } else if (type === 'query') {
        this.logisticsLoading = true
        this.dialogTitle = '物流信息'
        getExpress({
          logisticsNo: this.orderDetail.logisticsNo,
          companyCode: this.orderDetail.companyCode
        }).then(res => {
          this.logistics = res.data
          this.logisticsLoading = false
        })
      }
    },
    cancelForm() {
      this.remarkVisible = false
      if (this.curOpenDialogType === 'query') {
        return
      }
      this.$refs.orderForm.resetFields()
      if (this.curOpenDialogType === 'remark') {
        this.remark = ''
      } else if (this.curOpenDialogType === 'price') {
        this.price = ''
      }
    },
    saveForm() {
      const params = {
        orderId: this.orderId
      }
      if (this.curOpenDialogType === 'remark') {
        params.remark = this.remark
        saveRemark(params).then(() => {
          this.cancelForm();
          this.getDetail();
          this.$successMsg('保存成功');
        })
      } else if (this.curOpenDialogType === 'price') {
        params.price = this.orderForm.payAmount
        this.$refs.orderForm.validate((valid) => {
          if (valid) {
            changePrice(params).then(() => {
              this.cancelForm();
              this.getDetail();
              this.$successMsg('保存成功');
            })
          }
        })
      } else if (this.curOpenDialogType === 'info') {
        params.receUserName = this.orderForm.receUserName
        params.recePhone = this.orderForm.recePhone
        params.receAddress = this.orderForm.receAddress
        params.orderStatus = this.orderDetail.orderStatus
        this.$refs.orderForm.validate((valid) => {
          if (valid) {
            changeReceiveInfo(params).then(() => {
              this.cancelForm();
              this.getDetail();
              this.$successMsg('保存成功');
            })
          }
        })
      } else if (this.curOpenDialogType === 'send') {
        params.logisticsNo = this.orderForm.logisticsNo
        params.storageId = this.orderForm.storageId
        params.companyCode = this.orderForm.companyCode
        params.workOrder = this.orderForm.workOrder
        this.$refs.orderForm.validate((valid) => {
          if (valid) {
            goodsDeliver(params).then(() => {
              this.cancelForm();
              this.getDetail();
              this.$successMsg('保存成功');
            })
          }
        })
      }
    },
    cancelOrder() {
      cancelOrder({ orderId: this.orderId }).then(() => {
        this.getDetail();
        this.$successMsg('取消成功');
      })
    },
    confirmOrder() {
      confirmOrder({ orderId: this.orderId }).then(() => {
        this.getDetail();
        this.$successMsg('确认收款成功');
      })
    },
    // 发起退货
    returnOrder() {
      this.$router.push({
        name: "sales_return_order_list",
        query: {
          orderId: this.orderId
        }
      })
    },
    goBack() {
      // this.$router.go(-1);
		this.$router.push({
			name:"order_list"
		})
    },
    isNumber(val) {
      const regPos = /^\d+(\.\d+)?$/
      const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },

    getStorageList() {
      Storage.getList({ pageNum: 1, pageSize: 100 }).then(res => {
        this.storageList = res.data.records
      })
    },

    // 获取物流公司列表
    getCompanyList() {
      getCompanyList().then(res => {
        this.companyList = res.data;
      })
    },

    // 退款
    handleRefund(row) {
      console.log(row);
      if (row.num == 1) {
        this.$confirm('此操作将退款此商品, 是否继续?', '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.orderRefund(1, row.orderDetailId);
        }).catch(() => { });
      }
      else {
        this.$prompt('请输入退款数量', '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: function (value) {
            if (!value) return '请输入退款数量';
            if (value == 0) return '退款数量不能小于1';
            if (value > (row.num - row.refundNum)) {
              return '最多还可以退款' + (row.num - row.refundNum) + '件商品'
            }
          },
        }).then(({ value }) => {
          this.orderRefund(value, row.orderDetailId);
        }).catch(() => { });
      }
    },

    // 退款
    orderRefund(num, id) {
      orderRefund({
        num: num,
        orderDetailId: id,
      }).then(res => {
        this.getDetail();
        this.$successMsg('退款成功');
      })
    },

    // 理赔
    handleCompensate(row) {
      this.compensateFormVisible = true;
      this.compensateForm.id = row.orderDetailId;
      this.compensateItem.num = row.num;
      this.compensateItem.refundNum = row.refundNum;
    },

    // 取消 理赔
    cancelCompensateForm() {
      this.compensateFormVisible = false;
      this.compensateForm = {
        id: null,
        num: '',
        amount: '',
        remark: '',
      }
    },

    // 提交 理赔
    submitCompensateForm() {
      this.$refs.compensateForm.validate((valid) => {
        if (valid) {
          let params = {
            adminUserId: this.userid,
            orderDetailId: this.compensateForm.id,
            num: this.compensateForm.num,
            refundAmount: this.compensateForm.amount,
            remark: this.compensateForm.remark,
          }
          orderCompensate(params).then(res => {
            this.cancelCompensateForm();
            this.getDetail();
            this.getCompensateList();
            this.$successMsg('理赔成功');
          })
        }
      });

    },

    // 获取理赔列表
    getCompensateList() {
      getCompensateList({ orderId: this.orderId }).then(res => {
        this.compensateList = res.data;
      })
    },

    // 切换评价信息是否显示
    changeShow() {
      changeShow({
        isShow: this.evaluateDetail.isShow,
        orderId: this.orderId,
      }).then(res => {
        this.getDetail();
        this.$successMsg();
      })
    },
	
	async getCodeDetail(){
		getCodeDetail({orderId: this.orderId}).then(async res => {
			for(var item of res.data){
				item.specs = {goodsMaterialSpecsName: item.specsName,orderDetailId: item.orderDetailId}
				item.material = {name: item.materialName}
				item.materialList = await this.getMaterialList(item.specsName,item.goodsMaterialItemType)
			}
			this.formData2.list = res.data
		})
	},
	async getMaterialList(specsName,type){
		return new Promise((resolve, reject) => {
			getMaterialList({
				pageNum: 1,
				pageSize: -1,
				specsName,
				type
			}).then(async res => {
				resolve(res.data.records) 
			})
		})
		
	},
	async changeSpecs(e,row){
		row.brandName = e.brandName
		row.brandId = e.brandId
		row.mainName = e.mainName
		row.mainId = e.mainNumber
		row.smallName = e.smallName
		row.smallId = e.smallNumber
		row.specsName = e.goodsMaterialSpecsName
		row.goodsMaterialName = e.goodsName
		row.goodsMaterialId = e.goodsMaterialId
		row.material = null
		row.materialName = ''
		row.stockQty = ''
		row.uniqueCode = ''
		row.materialList = await this.getMaterialList(row.specsName,row.goodsMaterialItemType)
		row.orderDetailId = e.orderDetailId
	},
	async changeMaterial(e,row){
		if(!row.specs){
			return this.$message.warning('请先选择规格型号！');
		}
		row.material = null
		row.materialName = ''
		row.stockQty = ''
		row.uniqueCode = ''
		row.materialList = await this.getMaterialList(row.specsName,row.goodsMaterialItemType)
	},
	//发货新增条码
	addCode(){
		this.$refs.formData2.validate((valid) => {
			if (valid) {
				this.isEdit2 = 0
				this.formData2.list.unshift({
					brandId: '',
					brandName: '',
					mainId: '',
					mainName: '',
					stockQty: '',
					smallId: '',
					smallName: '',
					goodsMaterialItemType: '',
					goodsMaterialName: '',
					goodsMaterialId: '',
					materialCode: '',
					uniqueCode: '',
					specs: null,
					specsName: '',
					materialName: '',
					material: null,
					materialList: [],
					orderDetailId: '',
					goodsMaterialItemId: ''
				})
			}
		});
	},
	delCode(orderDetailCodeId,index){
		if(orderDetailCodeId){
			delCode({
			  orderDetailCodeId
			}).then(res => {
			  if (res.code == 200) {
			    this.$message({ type: 'success', message: '删除成功!' })
			    this.getOrderDetail()
			    this.getCodeDetail()
			  } else {
			    this.$message.error(res.msg);
			  }
			})
		}else{
			this.formData2.list.splice(index,1)
		}
	},
	saveCode(orderDetailCodes){
		const that = this
		let params = [{
			...orderDetailCodes,
			orderId: this.orderId,
		}]
		delete params[0].material;
		delete params[0].specs;
		this.$refs.formData2.validate((valid, invalidFields, errLabels) => {
			if (valid) {
				saveCode(params).then(res=>{
					if(res.code == 200){
						that.$message.success('保存成功!')
						this.getOrderDetail()
						this.getCodeDetail()
					}
				})
			}
		})
	},
	deliverGoods(){
		this.$refs.orderForm.validate((valid) => {
		  if (valid) {
		    goodsDeliver({
		      orderId: this.orderId,
		      logisticsNo: this.orderForm.logisticsNo,
		      storageId: this.orderForm.storageId,
		      companyCode: this.orderForm.companyCode,
		      workOrder: this.orderForm.workOrder,
		    				pickName: this.orderForm.pickName,
		    				pickPhone: this.orderForm.pickPhone,
		    				pickType: this.orderForm.pickType,
		    }).then(() => {
		      this.cancelForm();
		      this.getDetail();
		      this.$successMsg('发货成功');
		    })
		  }
		})
	},
	importCode(data){
		const loading = this.$loading({
		  lock: true,
		  text: '正在导入',
		  spinner: 'el-icon-loading',
		  background: 'rgba(0, 0, 0, 0.7)'
		})
		var formdata = new FormData()
		formdata.append('file', data.file)
		let params = {
			orderDetailId: this.orderDetailId
		}
		if (!!params) {
		  for (const key in params) {
		    if (Object.hasOwnProperty.call(params, key)) {
		      formdata.append(key, params[key])
		    }
		  }
		}
		listImport({ formdata })
		  .then(res => {
		    this.getOrderDetail()
		    loading.close()
		    this.$message({
		      type: 'success',
		      message: '导入成功!'
		    })
		  })
		  .catch(err => {
		    loading.close()
		    this.$message({
		      type: 'error',
		      message: err.message || '导入失败'
		    })
		  })
	},
	
	// 下载导入模版
	handleDownload(title) {
		commonTemplateDownload({ name: '导入条码.xlsx' }, title).then(res => {
			this.$message({
				message: '下载成功',
				type: 'success'
			})
		}).catch(err => {
			this.$message.error('下载失败')
		})
	},

  },
  computed: {
    ...mapGetters([
      'userid',
      'name'
    ]),
    curOrderStatus() {
      switch (this.orderDetail.orderStatus) {
        case 'NOPAY':
          return 1
          break;
        case 'DFH':
          return 2
          break;
        case 'YFH':
          return 3
          break;
        case 'OVER':
          return 4
          break;
        default:
          return 1
      }
    },
    totalAmountCompute() {
      if (!this.orderDetail.totalAmount) {
        return 0
      }
      const totalAmount = parseFloat(this.orderDetail.totalAmount)
      const freight = parseFloat(this.orderDetail.freight)
      return (totalAmount - freight).toFixed(2)
    },
  }
}
</script>

<style scoped lang="scss">
.order-main {
  margin-top: 15px;
  border: 1px solid #e5e5e5;

  .order-main-title {
    font-size: 14px;
  }

  .order-main-title span {
    margin-right: 15px;
  }

  .order-main-status {
    padding: 15px 0;
    font-size: 24px;
    color: #409EFF;
  }

  .order-main-opt-btn {
    padding: 15px 0;
  }
}

.order-receive-info {
  margin: 15px 0 30px;
  padding: 15px;
  background: #f5f7fa;

  :first-child div span {
    padding-right: 15px;
  }
}

.order-detail {
  background: #f5f7fa;

  .order-amount-info {
    padding: 15px 0;
    font-size: 12px;
    font-weight: bold;
  }

  ::v-deep .el-table tr,
  ::v-deep .el-table th {
    background-color: #f5f7fa;
  }
}

.main-detail {
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .item {
    display: flex;
    font-size: 14px;
    color: #666;
    padding-bottom: 12px;

    .label {
      white-space: nowrap;
    }
  }
}

.order-evaluate-info {
  margin: 15px 0;
  padding: 30px 15px;
  background: #f5f7fa;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 16px;
      font-weight: 700;

      span {
        font-weight: normal;
        margin-left: 20px;
        font-size: 14px;
        color: #666;
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-size: 14px;

      span {
        margin-right: 10px;
      }
    }
  }

  .main {
    margin-top: 20px;
    display: flex;

    .rate-list {
      font-size: 14px;
      flex-shrink: 0;
    }

    .tag-list {
      margin-left: 30px;

      ::v-deep .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .content {
    width: 400px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }

  .img-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;

    ::v-deep .el-image {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #eaeaea;
    }
  }
}
</style>