|
|
@@ -0,0 +1,904 @@
|
|
|
+<template>
|
|
|
+ <div class="order-content">
|
|
|
+ <div class="order-status" v-if="order!=null" >
|
|
|
+ <el-steps :active="order.status==3?order.status+1:order.status" align-center>
|
|
|
+ <el-step title="待支付"></el-step>
|
|
|
+ <el-step title="待发货"></el-step>
|
|
|
+ <el-step title="待收货"></el-step>
|
|
|
+ <el-step title="交易完成"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <el-card shadow="never" style="margin-top: 15px">
|
|
|
+ <div class="operate-container" v-if="order!=null">
|
|
|
+ <span style="margin-left: 20px" class="color-danger">订单状态：
|
|
|
+ <el-tag prop="status" v-for="(item, index) in statusOptions" v-if="order.status==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div class="operate-button-container" >
|
|
|
+ <el-button size="mini" @click="handleCertificates()" v-hasPermi="['store:storeOrder:uploadCredentials']" >上传凭证</el-button>
|
|
|
+ <el-button size="mini" @click="handleEditAddress()" v-if="order.status==0||order.status==1" v-hasPermi="['store:storeOrder:editAddress']" >修改收货地址</el-button>
|
|
|
+ <el-button size="mini" @click="handleBindCustomer()" v-hasPermi="['store:storeOrder:bindCustomer']" >关联客户</el-button>
|
|
|
+ <el-button size="mini" @click="editOrder()" v-hasPermi="['store:storeOrder:edit']" >修改订单</el-button>
|
|
|
+ <!-- <el-button size="mini" @click="handleEditUser()" v-hasPermi="['users:user:edit']" >修改会员修改</el-button> -->
|
|
|
+ <el-button size="mini" v-if="order.customerId!=null&&order.customerId>0" @click="handleCustomer()" >查看客户详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="operate-button-container" v-hasPermi="['store:storeOrder:express']" >
|
|
|
+ <el-button size="mini" @click="showExpress()" >查看物流</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 20px 0px" v-if="order!=null">
|
|
|
+ <span class="font-small">
|
|
|
+ 基本信息
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="4" border >
|
|
|
+ <el-descriptions-item label="订单编号" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ {{order.orderCode}}
|
|
|
+ </span>
|
|
|
+ <el-tag v-for="(item, index) in createTypeOptions" v-if="order!=null&&order.orderCreateType==item.dictValue">{{item.dictLabel}}
|
|
|
+ </el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="会员" >
|
|
|
+ <span v-if="user!=null">
|
|
|
+ {{user.nickname}}({{user.phone}})
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <!-- <el-descriptions-item label="进线时间" >
|
|
|
+ <span v-if="user!=null">
|
|
|
+ {{user.registerDate}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="推线编码" >
|
|
|
+ <span v-if="user!=null">
|
|
|
+ {{user.registerCode}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item> -->
|
|
|
+
|
|
|
+ <el-descriptions-item label="收货人" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.realName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="手机号码" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.userPhone }}
|
|
|
+ </span>
|
|
|
+ <el-button type="text" size="mini" @click="callNumber(0,0,orderId)" v-hasPermi="['store:storeOrder:callNumber']">拨号</el-button>
|
|
|
+ <el-button type="text" size="mini" @click="handleSms(order.userPhone)" v-hasPermi="['store:storeOrder:sendSms']">短信</el-button>
|
|
|
+ <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['store:storeOrder:queryPhone']"></el-button>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="收货地址" >
|
|
|
+ <el-popover
|
|
|
+ v-if="order!=null"
|
|
|
+ placement="top-start"
|
|
|
+ title="收货地址"
|
|
|
+ width="300"
|
|
|
+ trigger="hover"
|
|
|
+ :content="order.userAddress">
|
|
|
+ <span slot="reference">{{order.userAddress}}</span>
|
|
|
+ <el-button icon="el-icon-search" size="mini" @click="handleAddress()" style="margin-left: 20px;" circle v-hasPermi="['store:storeOrder:queryAddress']"></el-button>
|
|
|
+ </el-popover>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="支付方式" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ <el-tag prop="orderType" v-for="(item, index) in payTypeOptions" v-if="order.payType==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="订单类型" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ <el-tag prop="orderType" v-for="(item, index) in orderTypeOptions" v-if="order.orderType==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="物流公司编号" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.deliverySn }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="物流公司名称" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.deliveryName }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="快递单号" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.deliveryId }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="档期归属" >
|
|
|
+ <el-tag prop="scheduleId" v-for="(item, index) in scheduleOptions" v-if="order!=null&&order.scheduleId==item.id">{{item.name}}
|
|
|
+ </el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用户备注" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.mark }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="平台备注" >
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ {{order.remark }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="跟随阶段" v-if="company.companyId == 174">
|
|
|
+ <span v-if="order!=null ">
|
|
|
+ <el-tag prop="orderVisit" v-for="(item, index) in customerUserStatusOptions" v-if="order.orderVisit==item.dictValue">{{item.dictLabel}}</el-tag>
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="customerInfo!=null " label="客户编码" >
|
|
|
+ <span >
|
|
|
+ {{customerInfo.customerCode }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item v-if="customerInfo!=null " label="进线时间" >
|
|
|
+ <span >
|
|
|
+ {{customerInfo.registerDate }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+
|
|
|
+ </el-descriptions>
|
|
|
+ <div style="margin: 20px 0px" v-if="order!=null">
|
|
|
+ <span class="font-small">
|
|
|
+ 凭证信息
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-image
|
|
|
+ v-if="this.certificates != null"
|
|
|
+ :src="certificates"
|
|
|
+ :preview-src-list="[certificates]"
|
|
|
+ :style="{ width: '100px', height: '100px' }"
|
|
|
+ @click.native="showImageDialog"
|
|
|
+ ></el-image>
|
|
|
+ <el-dialog :visible.sync="dialogVisibleImage" width="10%">
|
|
|
+ <img :src="certificates" style="width: 100%" alt="">
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <span class="font-small">商品信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ v-if="items!=null"
|
|
|
+ :data="items"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;margin-top: 20px" >
|
|
|
+ <el-table-column label="商品图片" width="150" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品名称" width="300" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="单价" width="240" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <p>￥{{JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}</p>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="规格" width="240" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{JSON.parse(scope.row.jsonInfo).sku}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数量" width="180" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.num}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小计" align="center">
|
|
|
+ <template slot-scope="scope" >
|
|
|
+ ￥{{scope.row.num*JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="float: right;margin: 20px" v-if="order!=null">
|
|
|
+ 合计：<span class="color-danger">￥{{order.totalPrice.toFixed(2)}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin: 60px 0px 20px 0px">
|
|
|
+ <span class="font-small">费用信息</span>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="4" border >
|
|
|
+ <el-descriptions-item label="商品合计" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.totalPrice.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="应付金额" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.payPrice.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="运费" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.payPostage.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="优惠券" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.couponPrice.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="积分抵扣" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.deductionPrice.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="实付金额" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.payMoney.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="代收金额" >
|
|
|
+ <span v-if="order!=null">
|
|
|
+ ￥{{order.payDelivery.toFixed(2)}}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
|
|
|
+ <span class="font-small">支付信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="payments"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%;margin-top: 20px" >
|
|
|
+ <el-table-column label="支付单号" align="center" prop="payCode" width="120px" />
|
|
|
+ <el-table-column label="支付金额" align="center" prop="payMoney" />
|
|
|
+ <el-table-column label="类型" align="center" prop="payTypeCode" />
|
|
|
+ <el-table-column label="交易单号" align="center" prop="bankTransactionId" />
|
|
|
+ <el-table-column label="银行单号" align="center" prop="bankSerialNo" />
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" />
|
|
|
+ <el-table-column label="支付时间" align="center" prop="payTime" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div style="margin-top: 20px">
|
|
|
+ <span class="font-small">操作信息</span>
|
|
|
+ </div>
|
|
|
+ <el-table style="margin-top: 20px;width: 100%"
|
|
|
+ ref="orderHistoryTable"
|
|
|
+ :data="logs" border>
|
|
|
+ <el-table-column label="操作时间" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.changeTime}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.changeMessage}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="edit.title" :visible.sync="edit.open" width="600px" append-to-body>
|
|
|
+ <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
|
|
|
+ <el-form-item label="订单类型" prop="orderType" >
|
|
|
+ <el-select style="width: 200px" v-model="editForm.orderType" placeholder="请选择订单类型" clearable size="small" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in orderTypeOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="档期归属" prop="scheduleId" >
|
|
|
+ <el-select filterable style="width: 200px" v-model="editForm.scheduleId" placeholder="请选择档期" clearable size="small" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in scheduleOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="跟随阶段" prop="orderVisit" v-if="company.companyId == 174" >
|
|
|
+ <el-select filterable style="width: 200px" v-model="editForm.orderVisit" placeholder="请选择跟随阶段" clearable size="small" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in customerUserStatusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="mark" >
|
|
|
+ <el-input v-model="editForm.mark" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="editUser.title" :visible.sync="editUser.open" width="600px" append-to-body>
|
|
|
+ <el-form ref="editUserForm" :model="editUserForm" :rules="editUserRules" label-width="100px">
|
|
|
+ <el-form-item label="进线时间" prop="registerDate">
|
|
|
+ <el-date-picker clearable size="small"
|
|
|
+ v-model="editUserForm.registerDate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择进线时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推线编码" prop="registerCode">
|
|
|
+ <el-input v-model="editUserForm.registerCode" placeholder="请输入推线编码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="渠道来源" prop="source">
|
|
|
+ <el-input v-model="editUserForm.source" placeholder="请输入渠道来源" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditUserForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="editAddress.title" :visible.sync="editAddress.open" width="600px" append-to-body>
|
|
|
+ <el-form ref="editAddressForm" :model="editAddressForm" :rules="editAddressRules" label-width="100px">
|
|
|
+ <el-form-item label="收件人" prop="realName">
|
|
|
+ <el-input v-model="editAddressForm.realName" placeholder="请输入收件人" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" prop="source">
|
|
|
+ <el-input v-model="editAddressForm.userPhone" placeholder="请输入联系电话" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收货地址" prop="district">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select @change="provinceChange" v-model="editAddressForm.provinceId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in province"
|
|
|
+ :key="item.cityId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.cityId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select @change="cityChange" v-model="editAddressForm.cityId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in city"
|
|
|
+ :key="item.cityId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.cityId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select @change="districtChange" v-model="editAddressForm.districtId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in district"
|
|
|
+ :key="item.cityId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.cityId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="详细地址" prop="detail">
|
|
|
+ <el-input v-model="editAddressForm.detail" placeholder="请输入收货人详细地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitEditAddressForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
|
|
|
+ <el-table style="margin-top: 20px;width: 100%"
|
|
|
+ ref="orderHistoryTable"
|
|
|
+ :data="traces" border>
|
|
|
+ <el-table-column label="操作时间" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.AcceptTime}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="位置" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.Location}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="描述" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.AcceptStation}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="bindCustomerDialog.title" :visible.sync="bindCustomerDialog.open" width="800px" append-to-body>
|
|
|
+ <el-form ref="bindCustomerForm" :model="bindCustomerForm" :rules="bindCustomerRules" label-width="100px">
|
|
|
+ <el-form-item label="客户查询">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-input v-model="bindCustomerForm.mobile" placeholder="请输入客户手机号"/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="searchCustomer">查看</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户选择" prop="customerIds">
|
|
|
+ <el-table @selection-change="handleSelectionChange"
|
|
|
+ :data="customers" border>
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="ID" align="center" prop="customerId" />
|
|
|
+ <el-table-column label="客户编号" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.customerCode}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.customerName}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户手机号" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.mobile}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitBindCustomerForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="certificateDialig.title" :visible.sync="certificateDialig.open" append-to-body>
|
|
|
+ <el-form ref="certificateForm" :model="certificateForm" :rules="certificateRules" label-width="100px">
|
|
|
+ <el-form-item label="凭证" prop="certificates">
|
|
|
+ <ImageUpload v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="handleConfirm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-drawer
|
|
|
+ :append-to-body="true"
|
|
|
+ size="75%"
|
|
|
+ :title="customer.title" :visible.sync="customer.open"
|
|
|
+ >
|
|
|
+ <customer-details ref="customerDetails" />
|
|
|
+ </el-drawer>
|
|
|
+ <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
|
|
|
+ <add-sms ref="sms" @close="closeSms()"></add-sms>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {updateUser,getUser } from "@/api/users/user";
|
|
|
+import { getTcmScheduleList } from "@/api/company/tcmScheduleReport";
|
|
|
+import {getCustomerListBySearch } from "@/api/crm/customer";
|
|
|
+import ImageUpload from '@/components/ImageUpload'
|
|
|
+import Material from '@/components/Material'
|
|
|
+import {bindCustomer,getExpress, listStoreOrder, getStoreOrder, delStoreOrder, addStoreOrder, updateStoreOrder, exportStoreOrder,uploadCredentials, getStoreOrderAddress,getUserPhone} from "@/api/store/storeOrder";
|
|
|
+import {getAllList} from "@/api/store/city";
|
|
|
+import customerDetails from '../../crm/components/customerDetails.vue';
|
|
|
+import addSms from '../../crm/components/addSms.vue';
|
|
|
+export default {
|
|
|
+ name: "order",
|
|
|
+ components: {customerDetails,
|
|
|
+ ImageUpload,Material ,addSms},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ customerUserStatusOptions:[],
|
|
|
+ scheduleOptions:[],
|
|
|
+ dialogVisibleImage: false,
|
|
|
+ customerInfo:null,
|
|
|
+ customer:{
|
|
|
+ title:"客户详情",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ photoArr:null,
|
|
|
+ certificateDialig:{
|
|
|
+ title:"上传凭证",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ certificateForm:{
|
|
|
+ orderCode:null,
|
|
|
+ certificates:null,
|
|
|
+ },
|
|
|
+ addSms:{
|
|
|
+ open:false,
|
|
|
+ title:"发短信"
|
|
|
+ },
|
|
|
+ certificateRules:{
|
|
|
+ certificates:[
|
|
|
+ { required: true, message: "凭证不能为空", trigger: "change" }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ customers:[],
|
|
|
+ bindCustomerDialog:{
|
|
|
+ title:"关联客户",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ bindCustomerForm:{
|
|
|
+ mobile:null,
|
|
|
+ customerIds:null,
|
|
|
+ },
|
|
|
+ bindCustomerRules:{
|
|
|
+ customerIds: [
|
|
|
+ { required: true, message: "客户不能为空", trigger: "change" }
|
|
|
+ ],
|
|
|
+
|
|
|
+ },
|
|
|
+ orderId:null,
|
|
|
+ expressDialog:{
|
|
|
+ title:"物流信息",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ citys:[],
|
|
|
+ province:[],
|
|
|
+ city:[],
|
|
|
+ district:[],
|
|
|
+ editAddress:{
|
|
|
+ title:"修改收货地址",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ editAddressForm:{
|
|
|
+ districtId:null,
|
|
|
+
|
|
|
+ },
|
|
|
+ editAddressRules:{
|
|
|
+
|
|
|
+ },
|
|
|
+ editUser:{
|
|
|
+ title:"修改会员信息",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ editUserForm:{
|
|
|
+ registerDate:null,
|
|
|
+ registerCode:"",
|
|
|
+ source:"",
|
|
|
+ },
|
|
|
+ editUserRules:{
|
|
|
+
|
|
|
+ },
|
|
|
+ edit:{
|
|
|
+ title:"",
|
|
|
+ open:false,
|
|
|
+ },
|
|
|
+ editForm:{
|
|
|
+ orderType:null,
|
|
|
+ scheduleId:null,
|
|
|
+ orderVisit:null,
|
|
|
+ mark:"",
|
|
|
+ },
|
|
|
+ editRules:{
|
|
|
+
|
|
|
+ },
|
|
|
+ createTypeOptions:[],
|
|
|
+ orderTypeOptions:[],
|
|
|
+ payTypeOptions:[],
|
|
|
+ statusOptions:[],
|
|
|
+ certificates:null,
|
|
|
+ order:null,
|
|
|
+ user:{},
|
|
|
+ logs:[],
|
|
|
+ items:[],
|
|
|
+ express:[],
|
|
|
+ traces:[],
|
|
|
+ payments:[],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("crm_customer_user_status").then((response) => {
|
|
|
+ this.customerUserStatusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_type").then((response) => {
|
|
|
+ this.orderTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_status").then((response) => {
|
|
|
+ this.statusOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_pay_type").then((response) => {
|
|
|
+ this.payTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("store_order_create_type").then((response) => {
|
|
|
+ this.createTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ getTcmScheduleList().then(response => {
|
|
|
+ this.scheduleOptions = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ company(){
|
|
|
+ return this.$store.state.user.user;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closeSms(){
|
|
|
+ this.addSms.open=false;
|
|
|
+ },
|
|
|
+ handleSms(mobile){
|
|
|
+ this.addSms.open=true;
|
|
|
+ var that=this;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.sms.getOrderId(this.orderId,mobile,2);
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ },
|
|
|
+ handlePhone(){
|
|
|
+ const id = this.order.id;
|
|
|
+ getUserPhone(id).then(response =>{
|
|
|
+ this.order.userPhone = response.userPhone;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAddress(){
|
|
|
+ const id = this.order.id;
|
|
|
+ getStoreOrderAddress(id).then(response =>{
|
|
|
+ this.order.userAddress = response.address;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showImageDialog() {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleCustomer(){
|
|
|
+ var that=this;
|
|
|
+ this.customer.open = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.customerDetails.getDetails(this.order.customerId);
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.bindCustomerForm.customerIds = selection.map(item => item.customerId)
|
|
|
+ },
|
|
|
+ searchCustomer(){
|
|
|
+ if(this.bindCustomerForm.mobile==null||this.bindCustomerForm.mobile==""){
|
|
|
+ this.msgError("请输入手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var data={mobile:this.bindCustomerForm.mobile};
|
|
|
+ getCustomerListBySearch(data).then(response => {
|
|
|
+ this.customers=response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleBindCustomer() {
|
|
|
+ this.customers=[];
|
|
|
+ this.bindCustomerDialog.open = true;
|
|
|
+ this.bindCustomerForm.mobile=null;
|
|
|
+ this.bindCustomerForm.orderId=this.orderId;
|
|
|
+ this.bindCustomerForm.customerIds=null;
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitBindCustomerForm() {
|
|
|
+ this.$refs["bindCustomerForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ bindCustomer(this.bindCustomerForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.bindCustomerDialog.open = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCertificates(){
|
|
|
+ this.certificateDialig.open = true;
|
|
|
+ this.photoArr = null;
|
|
|
+ },
|
|
|
+ handleConfirm(){
|
|
|
+ this.certificateForm.id = this.orderId;
|
|
|
+ this.certificateForm.orderCode = this.order.orderCode;
|
|
|
+ this.certificateForm.certificates = this.photoArr;
|
|
|
+ uploadCredentials(this.certificateForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("上传成功");
|
|
|
+ this.certificateDialig.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showExpress(){
|
|
|
+ this.expressDialog.open=true;
|
|
|
+ getExpress(this.orderId).then(response => {
|
|
|
+ this.express = response.data;
|
|
|
+ if(this.express!=null&&this.express.Traces!=null){
|
|
|
+ this.traces=this.express.Traces
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ districtChange(val){
|
|
|
+ var item=this.citys.find((item)=>{
|
|
|
+ return item.cityId==val&&item.level==2;
|
|
|
+ })
|
|
|
+ this.editAddressForm.district=item.name;
|
|
|
+
|
|
|
+ },
|
|
|
+ cityChange(val){
|
|
|
+ this.district=this.citys.filter(item => item.parentId===val )
|
|
|
+ this.editAddressForm.districtId=null;
|
|
|
+ var item=this.citys.find((item)=>{
|
|
|
+ return item.cityId==val&&item.level==1;
|
|
|
+ })
|
|
|
+ console.log(item)
|
|
|
+ this.editAddressForm.city=item.name;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ provinceChange(val){
|
|
|
+ this.city=this.citys.filter(item => item.parentId===val )
|
|
|
+ this.district=[];
|
|
|
+ this.editAddressForm.cityId=null;
|
|
|
+ this.editAddressForm.districtId=null;
|
|
|
+ var item=this.citys.find((item)=>{
|
|
|
+ return item.cityId==val&&item.level==0;
|
|
|
+ })
|
|
|
+ this.editAddressForm.province=item.name;
|
|
|
+ },
|
|
|
+ getCityList(){
|
|
|
+ getAllList().then(res => {
|
|
|
+ this.citys=res.data;
|
|
|
+ this.province=res.data.filter(item => item.level===0 )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEditAddress() {
|
|
|
+ this.getCityList();
|
|
|
+ this.editAddressForm.id=this.order.id;
|
|
|
+ this.editAddressForm.realName=this.order.realName;
|
|
|
+ this.editAddressForm.userPhone=this.order.userPhone;
|
|
|
+ var address=this.order.userAddress.split(' ')
|
|
|
+ var province=this.citys.find((item)=>{
|
|
|
+ return item.name==address[0]&&item.level==0;
|
|
|
+ })
|
|
|
+ if(province!=null){
|
|
|
+ this.editAddressForm.provinceId=province.cityId;
|
|
|
+ this.city=this.citys.filter(item => item.parentId===province.cityId&&item.level==1 )
|
|
|
+ }
|
|
|
+ var city=this.citys.find((item)=>{
|
|
|
+ return item.name==address[1]&&item.level==1;
|
|
|
+ })
|
|
|
+
|
|
|
+ if(city!=null){
|
|
|
+ this.editAddressForm.cityId=city.cityId;
|
|
|
+ this.district=this.citys.filter(item => item.parentId===city.cityId&&item.level==2 )
|
|
|
+ }
|
|
|
+ var district=this.citys.find((item)=>{
|
|
|
+ return item.name==address[2]&&item.level==2;
|
|
|
+ })
|
|
|
+ if(district!=null){
|
|
|
+ this.editAddressForm.districtId=district.cityId;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.editAddress.open = true;
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitEditAddressForm() {
|
|
|
+ this.$refs["editAddressForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.editAddressForm.userAddress=this.editAddressForm.province+" "+this.editAddressForm.city+" "+this.editAddressForm.district+" "+this.editAddressForm.detail;
|
|
|
+ updateStoreOrder(this.editAddressForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.editAddress.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleEditUser() {
|
|
|
+ const userId = this.order.userId
|
|
|
+ getUser(userId).then(response => {
|
|
|
+ this.editUserForm.userId=response.data.userId;
|
|
|
+ this.editUserForm.registerDate=response.data.registerDate;
|
|
|
+ this.editUserForm.registerCode=response.data.registerCode;
|
|
|
+ this.editUserForm.source=response.data.source;
|
|
|
+ this.editUser.open = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitEditUserForm() {
|
|
|
+ this.$refs["editUserForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ updateUser(this.editUserForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.editUser.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitEditForm(){
|
|
|
+ this.$refs["editForm"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ updateStoreOrder(this.editForm).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.msgSuccess("操作成功");
|
|
|
+ this.edit.open = false;
|
|
|
+ this.getOrder(this.order.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ editOrder(){
|
|
|
+ this.edit.open=true;
|
|
|
+ this.editForm.mark=this.order.mark
|
|
|
+ this.editForm.id=this.order.id;
|
|
|
+ if(this.order.orderType!=null){
|
|
|
+ this.editForm.orderType=this.order.orderType.toString();
|
|
|
+ }
|
|
|
+ this.editForm.scheduleId=this.order.scheduleId;
|
|
|
+ this.editForm.orderVisit = this.order.orderVisit;
|
|
|
+
|
|
|
+ },
|
|
|
+ getOrder(orderId){
|
|
|
+ this.orderId=orderId;
|
|
|
+ this.certificates = null;
|
|
|
+ getStoreOrder(orderId).then(response => {
|
|
|
+ this.order = response.order;
|
|
|
+ if(response.order.certificates != null){
|
|
|
+ this.certificates = response.order.certificates;
|
|
|
+ }
|
|
|
+ this.user = response.user;
|
|
|
+ this.logs = response.logs;
|
|
|
+ this.items = response.items;
|
|
|
+ this.payments=response.payments;
|
|
|
+ this.customerInfo=response.customer;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.order-content{
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+.detail-container {
|
|
|
+ width: 80%;
|
|
|
+ padding: 20px 20px 20px 20px;
|
|
|
+ margin: 20px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.operate-container {
|
|
|
+ background: #F2F6FC;
|
|
|
+ height: 60px;
|
|
|
+ margin: -20px -20px 0;
|
|
|
+ line-height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.operate-button-container {
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px
|
|
|
+}
|
|
|
+
|
|
|
+.table-layout {
|
|
|
+ margin-top: 20px;
|
|
|
+ border-left: 1px solid #DCDFE6;
|
|
|
+ border-top: 1px solid #DCDFE6;
|
|
|
+}
|
|
|
+
|
|
|
+.table-cell {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-right: 1px solid #DCDFE6;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.table-cell-title {
|
|
|
+ border-right: 1px solid #DCDFE6;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ padding: 10px;
|
|
|
+ background: #F2F6FC;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+</style>
|
ct