liveOrderDetails.vue 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206
  1. <template>
  2. <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
  3. <div style="padding: 20px; background-color: #fff;">
  4. 订单详情
  5. </div>
  6. <div class="contentx" v-if="item!=null">
  7. <div class="desct"></div>
  8. <div class="order-status" v-if="item!=null" >
  9. <el-steps :active="item.status==4?item.status:item.status" align-center finish-status="success">
  10. <el-step title="待支付"></el-step>
  11. <el-step title="待发货"></el-step>
  12. <el-step title="待收货"></el-step>
  13. <el-step title="已完成"></el-step>
  14. </el-steps>
  15. </div>
  16. <el-card shadow="never" style="margin-top: 15px">
  17. <div class="operate-container" v-if="item!=null">
  18. <span style="margin-left: 20px" class="color-danger">订单状态:
  19. <el-tag prop="status" v-for="(ite, index) in orderOptions" v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
  20. </span>
  21. <div class="operate-button-container" v-if="item.status==3">
  22. <el-button size="mini" @click="finishOrder()" v-hasPermi="['live:liveOrder:finishOrder']">确认收货</el-button>
  23. </div>
  24. <div class="operate-button-container" v-if="item.status==2&&item.orderType==1">
  25. <el-button size="mini" @click="sendVisible=true" v-hasPermi="['live:liveOrder:sendGoods']">发货</el-button>
  26. </div>
  27. <div class="operate-button-container" v-if="item.status==2&&item.orderType==2">
  28. <el-button size="mini" @click="tuiOrder()" v-hasPermi="['live:liveOrder:sendHisGoods']" >推送订单</el-button>
  29. </div>
  30. <div class="operate-button-container" v-if="item.deliverySn!=null" v-hasPermi="['live:liveOrder:express']">
  31. <el-button size="mini" @click="showExpress()" >查看物流</el-button>
  32. </div>
  33. <div class="operate-button-container" >
  34. <el-button size="mini" @click="editDelivery()" v-hasPermi="['live:liveOrder:updateDelivery']" >修改物流单号</el-button>
  35. </div>
  36. <div class="operate-button-container" >
  37. <el-button size="mini" @click="editOrder()" v-hasPermi="['live:liveOrder:edit']" >修改订单</el-button>
  38. </div>
  39. <div class="operate-button-container" v-if="item.extendOrderId == null" >
  40. <el-button size="mini" @click="addErpOrder()" v-hasPermi="['live:liveOrder:createErpOrder']">创建ERP订单信息</el-button>
  41. </div>
  42. <div class="operate-button-container" v-if="item.extendOrderId!=null" >
  43. <el-button size="mini" @click="showErpOrder()" v-hasPermi="['live:liveOrder:getEroOrder']">ERP订单信息</el-button>
  44. </div>
  45. <div class="operate-button-container" v-if="item.status>1">
  46. <el-button size="mini" @click="refund()" v-hasPermi="['live:liveOrder:refundOrderMoney']">退款</el-button>
  47. </div>
  48. </div>
  49. <div class="desct">
  50. 基本信息
  51. </div>
  52. <el-descriptions :column="3" border >
  53. <el-descriptions-item label="订单编号" ><span v-if="item!=null">{{item.orderCode}}</span></el-descriptions-item>
  54. <el-descriptions-item label="会员"><span v-if="item.nickName!=null">{{item.nickName}}({{item.phone}})</span></el-descriptions-item>
  55. <el-descriptions-item label="支付方式" ><dict-tag :options="PayOptions" :value="item.payType"/></el-descriptions-item>
  56. <el-descriptions-item label="收货人" > <span v-if="item!=null">{{item.userName}}</span> </el-descriptions-item>
  57. <el-descriptions-item label="手机号码" > <span v-if="item!=null">{{item.userPhone}}</span>
  58. <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['live:liveOrder:queryPhone']"></el-button>
  59. </el-descriptions-item>
  60. <el-descriptions-item label="收货地址" > <span v-if="item!=null">{{item.userAddress}}</span>
  61. <el-button icon="el-icon-search" size="mini" @click="handleAddress()" style="margin-left: 20px;" circle v-hasPermi="['live:liveOrder:queryAddress']"></el-button>
  62. </el-descriptions-item>
  63. <el-descriptions-item label="所属公司"><span v-if="item!=null">{{item.companyName}}</span></el-descriptions-item>
  64. <el-descriptions-item label="员工"><span v-if="item!=null">{{item.companyUserName}}</span></el-descriptions-item>
  65. <el-descriptions-item label="推广佣金" ><span v-if="item.tuiMoney!=null">{{item.tuiMoney.toFixed(2)}}</span></el-descriptions-item>
  66. <el-descriptions-item label="推广佣金状态" ><span v-if="item!=null"><dict-tag :options="tuiOptions" :value="item.tuiMoneyStatus"/> </span></el-descriptions-item>
  67. <el-descriptions-item label="ERP编号" ><span v-if="item!=null">{{item.extendOrderId}}</span></el-descriptions-item>
  68. <el-descriptions-item label="用户备注" ><span v-if="item!=null">{{item.remark}}</span></el-descriptions-item>
  69. <el-descriptions-item label="档期归属" >
  70. <el-tag prop="scheduleId" v-for="(schedule, index) in scheduleOptions" v-if="item!=null&&item.scheduleId==schedule.id">{{schedule.name}}
  71. </el-tag>
  72. </el-descriptions-item>
  73. <el-descriptions-item label="订单购买类型" ><span v-if="item!=null"><dict-tag :options="orderBuyTypeOptions" :value="item.orderBuyType"/></span></el-descriptions-item>
  74. <el-descriptions-item label=" 公众号/渠道" ><span v-if="item!=null">{{item.channel}}</span></el-descriptions-item>
  75. <el-descriptions-item label=" 渠道" ><span v-if="item!=null"><dict-tag :options="channelOptions" :value="item.orderChannel"/></span></el-descriptions-item>
  76. <el-descriptions-item label=" 企微主体" ><span v-if="item!=null"><dict-tag :options="qwSubjectOptions" :value="item.qwSubject"/></span></el-descriptions-item>
  77. </el-descriptions>
  78. </el-card>
  79. </div>
  80. <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
  81. <div style="margin-top: 20px">
  82. <div class="desct">
  83. 物流信息
  84. </div>
  85. &nbsp;
  86. <el-link type="primary" @click="editDelivery(null)">添加物流信息</el-link>
  87. </div>
  88. <el-table
  89. border
  90. :data="deliverList"
  91. size="small"
  92. style="width: 100%;margin-top: 20px" >
  93. <el-table-column label="物流公司编码" width="150" align="center">
  94. <template slot-scope="scope">
  95. <p>{{scope.row.deliverSn}}</p>
  96. </template>
  97. </el-table-column>
  98. <el-table-column label="物流公司名称" width="300" align="center">
  99. <template slot-scope="scope">
  100. <p>{{scope.row.deliverName}}</p>
  101. </template>
  102. </el-table-column>
  103. <el-table-column label="物流单号" width="300" align="center">
  104. <template slot-scope="scope">
  105. <p>{{scope.row.deliverId}}</p>
  106. </template>
  107. </el-table-column>
  108. <el-table-column label="物流状态" width="300" align="center">
  109. <template slot-scope="scope">
  110. <span>
  111. <el-tag v-for="(item, index) in deliveryStatusOptions" v-if="scope.row!=null&&scope.row.status==item.dictValue">
  112. {{item.dictLabel}}
  113. </el-tag>
  114. </span>
  115. </template>
  116. </el-table-column>
  117. <el-table-column label="发货时间" width="240" align="center">
  118. <template slot-scope="scope">
  119. {{scope.row.deliverySendTime}}
  120. </template>
  121. </el-table-column>
  122. <el-table-column label="操作" width="240" align="center">
  123. <template slot-scope="scope">
  124. <el-link type="primary" @click="showExpress(scope)">查看物流跟踪</el-link>
  125. &nbsp;&nbsp;
  126. <el-link type="primary" @click="editDelivery(scope)">修改物流</el-link>
  127. </template>
  128. </el-table-column>
  129. </el-table>
  130. </div>
  131. <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
  132. <div class="desct">
  133. 商品信息
  134. </div>
  135. <el-tooltip class="item" effect="dark" :content="showList ? '显示全部' : '隐藏'" placement="top" style="float: right;">
  136. <el-button size="mini" circle icon="el-icon-search" @click="showListD()" />
  137. </el-tooltip>
  138. <el-table border v-if="showProd!=null" :data="showProd" size="small" style="width: 100%;margin-top: 20px" >
  139. <el-table-column label="商品图片" width="150" align="center">
  140. <template slot-scope="scope">
  141. <img :src="scope.row.imgUrl" style="height: 80px">
  142. </template>
  143. </el-table-column>
  144. <el-table-column label="商品编码" width="300" align="center">
  145. <template slot-scope="scope">
  146. <p>{{scope.row.barCode}}</p>
  147. </template>
  148. </el-table-column>
  149. <el-table-column label="仓库代码" width="300" align="center">
  150. <template slot-scope="scope">
  151. <p>{{scope.row.warehouseCode}}</p>
  152. </template>
  153. </el-table-column>
  154. <el-table-column label="商品名称" width="300" align="center">
  155. <template slot-scope="scope">
  156. <p>{{scope.row.productName}}</p>
  157. </template>
  158. </el-table-column>
  159. <el-table-column label="单价" width="240" align="center">
  160. <template slot-scope="scope">
  161. <p>¥{{scope.row.price.toFixed(2)}}</p>
  162. </template>
  163. </el-table-column>
  164. <el-table-column label="出库价" width="240" align="center">
  165. <template slot-scope="scope">
  166. <p>¥{{(scope.row.netPrice != null ? scope.row.netPrice : getOutboundPrice(scope.$index, scope.row)).toFixed(2)}}</p>
  167. </template>
  168. </el-table-column>
  169. <el-table-column label="市场价" width="240" align="center">
  170. <template slot-scope="scope">
  171. {{scope.row.otPrice}}
  172. </template>
  173. </el-table-column>
  174. <el-table-column label="产品数量" width="240" align="center">
  175. <template slot-scope="scope">
  176. {{scope.row.totalNum}}
  177. </template>
  178. </el-table-column>
  179. </el-table>
  180. <div style="float: right;margin: 20px" v-if="item.totalPrice!=null">
  181. 商品总价:<span class="color-danger">¥{{(parseFloat(item.totalPrice)).toFixed(2)}}</span>
  182. </div>
  183. </div>
  184. <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
  185. <div class="desct">
  186. 费用信息
  187. </div>
  188. <el-tooltip class="item" effect="dark" :content="showList ? '显示全部' : '隐藏'" placement="top" style="float: right;">
  189. <el-button size="mini" circle icon="el-icon-search" @click="showListD()" />
  190. </el-tooltip>
  191. <el-descriptions :column="3" border >
  192. <el-descriptions-item label="商品合计" ><span v-if="item!=null">{{(parseFloat(item.totalPrice || 0)).toFixed(2)}}</span></el-descriptions-item>
  193. <el-descriptions-item label="应付金额"><span v-if="item!=null">{{(parseFloat(item.payPrice || 0)).toFixed(2)}}</span></el-descriptions-item>
  194. <el-descriptions-item label="邮费"><span v-if="item!=null">{{(parseFloat(item.payPostage || 0)).toFixed(2)}}</span></el-descriptions-item>
  195. <el-descriptions-item label="优惠券" ><span v-if="item.discountMoney!=null">{{item.discountMoney}}</span></el-descriptions-item>
  196. <el-descriptions-item label="积分抵扣" > <span v-if="item!=null">{{item.payIntegral}}</span> </el-descriptions-item>
  197. <el-descriptions-item label="实付金额" > <span v-if="item!=null">{{(parseFloat(item.payMoney || 0)).toFixed(2)}}</span> </el-descriptions-item>
  198. <el-descriptions-item label="代收金额" > <span v-if="item!=null">{{item.payRemain}}</span> </el-descriptions-item>
  199. <el-descriptions-item label="服务费" > <span v-if="item!=null">{{0.00}}</span> </el-descriptions-item>
  200. <el-descriptions-item label="折扣率" >
  201. <span v-if="item!=null && productTotal > 0">{{ discountRatePercent }}%</span>
  202. <span v-else-if="item!=null">0.00%</span>
  203. </el-descriptions-item>
  204. <el-descriptions-item label="产品合计" >
  205. <span v-if="item!=null && showProd!=null && showProd.length > 0">¥{{productTotal.toFixed(2)}}</span>
  206. <span v-else-if="item!=null">¥0.00</span>
  207. </el-descriptions-item>
  208. <el-descriptions-item label=""/>
  209. </el-descriptions>
  210. <div style="float: right;margin: 20px" v-if="item.payMoney!=null">
  211. 实付合计:<span class="color-danger">¥{{(parseFloat(item.payMoney)).toFixed(2)}}</span>
  212. </div>
  213. </div>
  214. <div class="contentx" v-if="payments!=null" style="padding-bottom: 70px;">
  215. <div class="desct">
  216. 支付信息
  217. </div>
  218. <el-table
  219. border
  220. :data="payments"
  221. size="small"
  222. style="width: 100%;margin-top: 20px" >
  223. <el-table-column label="支付单号" align="center" prop="payCode" width="120px" />
  224. <el-table-column label="支付金额" align="center" prop="payMoney" />
  225. <el-table-column label="类型" align="center" prop="payTypeCode" />
  226. <el-table-column label="交易单号" align="center" prop="bankTransactionId" />
  227. <el-table-column label="银行单号" align="center" prop="bankSerialNo" />
  228. <el-table-column label="创建时间" align="center" prop="createTime" />
  229. <el-table-column label="支付时间" align="center" prop="payTime" />
  230. </el-table>
  231. </div>
  232. <div class="contentx" v-if="logs!=null" style="padding-bottom: 70px;">
  233. <div class="desct">
  234. 操作信息
  235. </div>
  236. <el-table style="margin-top: 20px;width: 100%"
  237. ref="orderHistoryTable"
  238. :data="logs" border>
  239. <el-table-column label="操作时间" width="160" align="center">
  240. <template slot-scope="scope">
  241. {{scope.row.changeTime}}
  242. </template>
  243. </el-table-column>
  244. <el-table-column label="备注" align="center">
  245. <template slot-scope="scope">
  246. {{scope.row.changeMessage}}
  247. </template>
  248. </el-table-column>
  249. </el-table>
  250. </div>
  251. <div class="contentx" v-if="tuiMoneyLogs!=null" style="padding-bottom: 70px;">
  252. <div class="desct">
  253. 分佣信息
  254. </div>
  255. <el-table
  256. border
  257. :data="tuiMoneyLogs"
  258. size="small"
  259. style="width: 100%;margin-top: 20px" >
  260. <el-table-column label="公司名称" align="center" prop="companyName" width="120px" />
  261. <el-table-column label="金额" align="center" prop="money" />
  262. <el-table-column label="余额" align="center" prop="balance" />
  263. <el-table-column label="创建时间" align="center" prop="createTime" />
  264. <el-table-column label="备注" align="center" prop="remark" />
  265. </el-table>
  266. </div>
  267. <el-dialog :title="edit.title" :visible.sync="edit.open" width="600px" append-to-body>
  268. <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
  269. <el-form-item label="订单状态" prop="status" >
  270. <el-select v-model="editForm.status" placeholder="请选择状态" clearable size="small" filterable>
  271. <el-option
  272. v-for="dict in orderOptions "
  273. :key="dict.dictValue"
  274. :label="dict.dictLabel"
  275. :value="dict.dictValue"
  276. />
  277. </el-select>
  278. </el-form-item>
  279. <el-form-item label="物流状态" prop="deliveryStatus" >
  280. <el-select v-model="editForm.deliveryStatus" placeholder="请选择物流状态" clearable size="small" filterable>
  281. <el-option
  282. v-for="dict in deliveryStatusOptions "
  283. :key="dict.dictValue"
  284. :label="dict.dictLabel"
  285. :value="dict.dictValue"
  286. />
  287. </el-select>
  288. </el-form-item>
  289. <el-form-item label="物流跟踪状态" prop="deliveryType" >
  290. <el-select v-model="editForm.deliveryType" placeholder="请选择状态" clearable size="small" filterable>
  291. <el-option
  292. v-for="dict in deliveryTypeOptions "
  293. :key="dict.dictValue"
  294. :label="dict.dictLabel"
  295. :value="dict.dictValue"
  296. />
  297. </el-select>
  298. </el-form-item>
  299. <el-form-item label="详情地址" prop="userAddress" >
  300. <el-input v-model="editForm.userAddress" placeholder="请输入" />
  301. </el-form-item>
  302. <el-form-item label="备注" prop="remark" >
  303. <el-input v-model="editForm.remark" placeholder="请输入备注" />
  304. </el-form-item>
  305. </el-form>
  306. <div slot="footer" class="dialog-footer">
  307. <el-button type="primary" @click="submitEditForm">确 定</el-button>
  308. </div>
  309. </el-dialog>
  310. <el-dialog :title="erpDialog.title" :visible.sync="erpDialog.open" width="600px" append-to-body>
  311. <div v-if="item!=null&&item.extendOrderId!=null&&item.status==1" v-hasPermi="['live:liveOrder:updateExpress']" >
  312. <el-button size="mini" @click="updateExpress()" >同步物流发货</el-button>
  313. </div>
  314. <div class="table-layout" v-if="erpOrder!=null">
  315. <el-row>
  316. <el-col :span="6" class="table-cell-title">订单编号</el-col>
  317. <el-col :span="6" class="table-cell-title">是否代收</el-col>
  318. <el-col :span="6" class="table-cell-title">快递编号</el-col>
  319. <el-col :span="6" class="table-cell-title">快递名称</el-col>
  320. </el-row>
  321. <el-row>
  322. <el-col :span="6" class="table-cell">
  323. {{erpOrder.code}}
  324. </el-col>
  325. <el-col :span="6" class="table-cell">
  326. {{erpOrder.cod?'是':'否'}}
  327. </el-col>
  328. <el-col :span="6" class="table-cell">
  329. {{erpOrder.express_code}}
  330. </el-col>
  331. <el-col :span="6" class="table-cell">
  332. {{erpOrder.express_name}}
  333. </el-col>
  334. </el-row>
  335. <el-row>
  336. <el-col :span="6" class="table-cell-title">收货人</el-col>
  337. <el-col :span="6" class="table-cell-title">电话</el-col>
  338. <el-col :span="6" class="table-cell-title">地址</el-col>
  339. <el-col :span="6" class="table-cell-title">运单号</el-col>
  340. </el-row>
  341. <el-row>
  342. <el-col :span="6" class="table-cell">
  343. {{erpOrder.receiver_name}}
  344. </el-col>
  345. <el-col :span="6" class="table-cell">
  346. {{erpOrder.receiver_mobile}}
  347. </el-col>
  348. <el-col :span="6" class="table-cell">
  349. {{erpOrder.receiver_address}}
  350. </el-col>
  351. <el-col :span="6" class="table-cell">
  352. {{erpOrder.deliverys!=null&&erpOrder.deliverys.length>0?erpOrder.deliverys[0].mail_no:''}}
  353. </el-col>
  354. </el-row>
  355. </div>
  356. </el-dialog>
  357. <el-dialog :title="editDy.title" :visible.sync="editDy.open" width="600px" append-to-body>
  358. <el-form ref="editDyForm" :model="editDyForm" :rules="editDyRules" label-width="100px">
  359. <div v-hasPermi="['live:liveOrder:updateErpOrder']" style="margin-bottom: 20px;" >
  360. <el-button size="mini" @click="updateErpOrder" >同步物流单号信息</el-button>
  361. </div>
  362. <el-form-item label="物流公司" prop="deliveryCode" >
  363. <el-select style="width:220px" v-model="editDyForm.deliveryCode" placeholder="请选择" clearable size="small">
  364. <el-option key="SF" label="顺丰" value="SF" />
  365. <el-option key="EMS" label="邮政" value="EMS" />
  366. <el-option key="ZTO" label="中通" value="ZTO" />
  367. <el-option key="JD" label="京东" value="JD" />
  368. <el-option key="DBL" label="德邦" value="DBL" />
  369. <el-option key="YD" label="韵达" value="YD" />
  370. </el-select>
  371. </el-form-item>
  372. <el-form-item label="物流单号" prop="deliveryId" >
  373. <el-input v-model="editDyForm.deliveryId" placeholder="请输入物流单号" />
  374. </el-form-item>
  375. </el-form>
  376. <div slot="footer" class="dialog-footer">
  377. <el-button type="primary" @click="submitEditDyForm">确 定</el-button>
  378. <el-button @click="editDy.open = false">取 消</el-button>
  379. </div>
  380. </el-dialog>
  381. <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
  382. <div v-hasPermi="['live:liveOrder:syncExpress']" >
  383. <el-button size="mini" @click="syncExpress()" >同步快递鸟物流状态</el-button>
  384. </div>
  385. <el-table style="margin-top: 20px;width: 100%"
  386. ref="orderHistoryTable"
  387. :data="traces" border>
  388. <el-table-column label="操作时间" width="160" align="center">
  389. <template slot-scope="scope">
  390. {{scope.row.AcceptTime}}
  391. </template>
  392. </el-table-column>
  393. <el-table-column label="位置" align="center">
  394. <template slot-scope="scope">
  395. {{scope.row.Location}}
  396. </template>
  397. </el-table-column>
  398. <el-table-column label="描述" align="center">
  399. <template slot-scope="scope">
  400. {{scope.row.AcceptStation}}
  401. </template>
  402. </el-table-column>
  403. </el-table>
  404. </el-dialog>
  405. </div>
  406. </template>
  407. <script>
  408. import {
  409. getLiveOrder,
  410. syncExpress,
  411. updateLiveOrder,
  412. updateErp,
  413. getExpress,
  414. listOrderitem,
  415. tuiOrder,
  416. refundOrderMoney,
  417. editDeliveryId,
  418. finishOrder,
  419. getOrderExpress,
  420. getOrderPayments,
  421. getOrderLog,
  422. tuiMoneyLogs,
  423. updateExpress,
  424. createErpOrder, getEroOrder, getUserPhone, getLiveOrderAddress
  425. } from "@/api/live/liveOrder";
  426. import {getStoreOrderLive} from "@/api/store/storeOrder";
  427. export default {
  428. props:["data"],
  429. data() {
  430. return {
  431. expressDialog:{
  432. title:"物流信息",
  433. open:false,
  434. },
  435. editDy:{
  436. title:"修改物流单号",
  437. open:false,
  438. },
  439. sourceOptions:[],
  440. payments: [],
  441. followDialogVisible:false,
  442. dialogVisible:false,
  443. total: 0,
  444. msgForm:{
  445. pageNum: 1,
  446. pageSize: 10,
  447. userId:null,
  448. followDoctorId:null,
  449. },
  450. editDyForm:{
  451. id: null,
  452. orderId: null,
  453. deliveryId: null,
  454. deliveryCode: null,
  455. },
  456. showList:true,
  457. edit:{
  458. title:"修改订单",
  459. open:false,
  460. },
  461. erpDialog:{
  462. title:"ERP订单信息",
  463. open:false,
  464. },
  465. show:{
  466. title:"问诊详情",
  467. open:false,
  468. },
  469. pack:{
  470. title:"套餐包",
  471. open:false,
  472. },
  473. followList:[],
  474. money:null,
  475. moneyVisible:false,
  476. rules:{},
  477. sendVisible:false,
  478. logs:[],
  479. pay:[],
  480. nickName:null,
  481. storeName:null,
  482. PayOptions:[],
  483. orderOptions:[],
  484. payStatusOptions:[],
  485. express:null,
  486. traces:[],
  487. msg:[],
  488. deliverList: [],
  489. sexOptions:[],
  490. refundOptions:[],
  491. channelOptions:[],
  492. qwSubjectOptions:[],
  493. tuiOptions:[],
  494. orOptions:[],
  495. storeOPtions:[],
  496. deliveryStatusOptions:[],
  497. deliveryPayStatusOptions:[],
  498. deliveryTypeOptions:[],
  499. orderTypeOptions:[],
  500. orderBuyTypeOptions:[],
  501. scheduleOptions:[],
  502. item:null,
  503. tuiMoneyLogs:[],
  504. erpOrder:null,
  505. prod:null,
  506. showProd:null,
  507. editForm:{
  508. orderId:null,
  509. status:null,
  510. userAddress:null,
  511. deliveryStatus:null,
  512. deliveryType:null,
  513. remark:"",
  514. },
  515. editDyRules:{
  516. deliveryId: [
  517. { required: true, message: "物流单号不能为空", trigger: "blur" }
  518. ],
  519. deliveryCode: [
  520. { required: true, message: "物流公司不能为空", trigger: "blur" }
  521. ],
  522. },
  523. editRules:{
  524. userAddress: [
  525. { required: true, message: "收货地址不能为空", trigger: "blur" }
  526. ],
  527. },
  528. mrules:{
  529. },
  530. form: {
  531. deliveryCode: null,
  532. deliveryName:null,
  533. deliverySn:null,
  534. orderId:null,
  535. }
  536. }
  537. },
  538. computed: {
  539. /** 产品合计:每个产品单价*数量之和(基于 showProd) */
  540. productTotal() {
  541. if (!this.showProd || this.showProd.length === 0) {
  542. return 0;
  543. }
  544. let total = 0;
  545. for (let i = 0; i < this.showProd.length; i++) {
  546. const row = this.showProd[i];
  547. const price = parseFloat(row.price) || 0;
  548. const num = parseFloat(row.totalNum) || 0;
  549. total += price * num;
  550. }
  551. return total;
  552. },
  553. /** 折扣率百分比:实付 / 商品总价(totalPrice) */
  554. discountRatePercent() {
  555. if (!this.item || !this.item.totalPrice || parseFloat(this.item.totalPrice) <= 0) {
  556. return '0.00';
  557. }
  558. const payMoney = parseFloat(this.item.payMoney) || 0;
  559. const totalPrice = parseFloat(this.item.totalPrice) || 0;
  560. const rate = parseFloat((payMoney / totalPrice).toFixed(2));
  561. return (rate * 100).toFixed(2);
  562. }
  563. },
  564. created() {
  565. this.getDicts("sys_store_pay_type").then(response => {
  566. this.PayOptions = response.data;
  567. });
  568. this.getDicts("sys_order_status").then(response => {
  569. this.orderOptions = response.data;
  570. });
  571. this.getDicts("sys_order_pay").then(response => {
  572. this.payStatusOptions = response.data;
  573. });
  574. this.getDicts("sys_order_source").then(response => {
  575. this.sourceOptions = response.data;
  576. });
  577. this.getDicts("sys_store_order_type").then(response => {
  578. this.orderTypeOptions = response.data;
  579. });
  580. this.getDicts("sys_store_order_buy_type").then(response => {
  581. this.orderBuyTypeOptions = response.data;
  582. });
  583. this.getDicts("sys_refund_status").then(response => {
  584. this.refundOptions = response.data;
  585. });
  586. this.getDicts("sys_store_channel").then(response => {
  587. this.channelOptions = response.data;
  588. });
  589. this.getDicts("sys_store_qw_subject").then(response => {
  590. this.qwSubjectOptions = response.data;
  591. });
  592. this.getDicts("sys_tui_money_status").then(response => {
  593. this.tuiOptions = response.data;
  594. });
  595. this.getDicts("sys_company_or").then(response => {
  596. this.orOptions = response.data;
  597. });
  598. this.getDicts("sys_patient_sex").then(response => {
  599. this.sexOptions = response.data;
  600. });
  601. this.getDicts("sys_store_delivery_pay_status").then(response => {
  602. this.deliveryPayStatusOptions = response.data;
  603. });
  604. this.getDicts("store_order_delivery_status").then(response => {
  605. this.deliveryStatusOptions = response.data;
  606. });
  607. this.getDicts("logistics_status").then(response => {
  608. this.deliveryTypeOptions = response.data;
  609. });
  610. },
  611. methods: {
  612. getOrderLive(orderId){
  613. getLiveOrder(orderId).then(response => {
  614. this.item=response.data
  615. });
  616. this.getlistOrderitem(orderId);
  617. },
  618. followMsg(row){
  619. const userId = this.item.userId;
  620. const followDoctorId =this.item.followDoctorId;
  621. const doctorName = this.item.doctorName;
  622. const patientName = this.item.patientName;
  623. setTimeout(() => {
  624. this.$refs.msgDetails.getDetails(userId,followDoctorId,doctorName,patientName);
  625. }, 500);
  626. this.dialogVisible = true;
  627. },
  628. msgDialogClose(){
  629. this.dialogVisible = false;
  630. },
  631. handlePhone(){
  632. const orderId = this.item.orderId;
  633. getUserPhone(orderId).then(response =>{
  634. this.item.userPhone = response.userPhone;
  635. })
  636. },
  637. handleAddress(){
  638. const orderId = this.item.orderId;
  639. getLiveOrderAddress(orderId).then(response =>{
  640. this.item.userAddress = response.address;
  641. })
  642. },
  643. fmt(val) {
  644. return val != null ? Number(val).toFixed(2) : '0.00'
  645. },
  646. editDelivery(scope){
  647. this.editDy.open = true;
  648. this.editDyForm.orderId = this.item.orderId;
  649. if (scope && scope.row) {
  650. this.editDyForm.id = scope.row.id;
  651. this.editDyForm.deliveryCode = scope.row.deliverSn;
  652. this.editDyForm.deliveryId = scope.row.deliverId;
  653. } else {
  654. this.editDyForm.id = null;
  655. this.editDyForm.deliveryCode = null;
  656. this.editDyForm.deliveryId = '';
  657. }
  658. },
  659. showListD(){
  660. if(this.showList){
  661. this.showProd=this.prod
  662. }else{
  663. this.showProd=[this.prod[0]]
  664. }
  665. this.showList=this.showList?false:true;
  666. },
  667. /**
  668. * 计算出库价(与 productOrder 一致:折扣率四舍五入保留两位小数)
  669. */
  670. getOutboundPrice(index, row) {
  671. if (!this.item || !this.showProd || this.showProd.length === 0) {
  672. return 0;
  673. }
  674. const price = parseFloat(row.price) || 0;
  675. const num = parseFloat(row.totalNum) || 0;
  676. const payMoney = parseFloat(this.item.payMoney) || 0;
  677. if (this.productTotal <= 0) {
  678. return 0;
  679. }
  680. const discountRate = parseFloat((payMoney / this.productTotal).toFixed(2));
  681. if (this.showProd.length === 1) {
  682. return price * discountRate;
  683. }
  684. const isLastItem = index === this.showProd.length - 1;
  685. if (isLastItem) {
  686. let previousTotal = 0;
  687. for (let i = 0; i < index; i++) {
  688. const prevRow = this.showProd[i];
  689. const prevPrice = parseFloat(prevRow.price) || 0;
  690. const prevNum = parseFloat(prevRow.totalNum) || 0;
  691. const prevOutboundPrice = prevPrice * discountRate;
  692. previousTotal += prevOutboundPrice * prevNum;
  693. }
  694. return num > 0 ? (payMoney - previousTotal) / num : 0;
  695. }
  696. return price * discountRate;
  697. },
  698. showExpress(){
  699. this.expressDialog.open=true;
  700. getExpress({
  701. orderId: this.item.orderId,
  702. deliverId: this.item.deliverySn,
  703. deliverSn: this.item.deliveryCode,
  704. }).then(response => {
  705. this.express = response.data;
  706. if(this.express!=null&&this.express.Traces!=null){
  707. this.traces=this.express.Traces
  708. }
  709. });
  710. },
  711. updateErpOrder(){
  712. var that=this;
  713. this.$confirm('确定同步物流单号信息吗', "警告", {
  714. confirmButtonText: "确定",
  715. cancelButtonText: "取消",
  716. type: "warning"
  717. }).then(function() {
  718. var data={orderId:that.item.orderId}
  719. return updateErp(data);
  720. }).then(() => {
  721. this.msgSuccess("操作成功");
  722. getLiveOrder(this.item.orderId).then(response => {
  723. this.item=response.data
  724. that.getlogList(this.item.orderId);
  725. that.$parent.$parent.getList();
  726. });
  727. this.editDy.open = false
  728. }).catch(function() {});
  729. },
  730. sendFollowMsg(){
  731. var that=this;
  732. this.$confirm('是否确认发送消息?', "警告", {
  733. confirmButtonText: "确定",
  734. cancelButtonText: "取消",
  735. type: "warning"
  736. }).then(function() {
  737. return sendMsg(that.item.orderId);
  738. }).then(() => {
  739. this.msgSuccess("操作成功");
  740. }).catch(function() {});
  741. },
  742. handleClose1(){
  743. this.dialogVisible=false;
  744. },
  745. handleClose2(){
  746. this.followDialogVisible=false;
  747. },
  748. follow(row){
  749. getMsgFollow(row).then(response => {
  750. if(response.data.formJson!=null&&response.data.formJson!=''&&response.data.writeStatus==1){
  751. this.messageFollowList=JSON.parse(response.data.formJson );
  752. this.followDialogVisible=true;
  753. }else{
  754. this.$message({
  755. message: '未填写随访单',
  756. type: 'info'
  757. });
  758. return
  759. }
  760. });
  761. },
  762. //修改订单状态
  763. submitEditForm(){
  764. this.$refs["editForm"].validate(valid => {
  765. if (valid) {
  766. updateLiveOrder(this.editForm).then(response => {
  767. if (response.code === 200) {
  768. this.msgSuccess("操作成功");
  769. this.edit.open = false;
  770. getLiveOrder(this.item.orderId).then(response => {
  771. this.item=response.data
  772. that.getlogList(this.item.orderId);
  773. that.$parent.$parent.getList();
  774. });
  775. }
  776. });
  777. }
  778. });
  779. },
  780. editOrder(){
  781. this.edit.open=true;
  782. this.editForm.orderId=this.item.orderId;
  783. this.editForm.remark=this.item.remark;
  784. this.editForm.userAddress = this.item.userAddress == null ? '' : this.item.userAddress.toString();
  785. this.editForm.status = this.item.status == null ? '' : this.item.status.toString();
  786. this.editForm.deliveryType = this.item.deliveryType == null ? '' : this.item.deliveryType.toString();
  787. this.editForm.deliveryStatus = this.item.deliveryStatus == null ? '' : this.item.deliveryStatus.toString();
  788. },
  789. updateExpress(){
  790. var that=this;
  791. this.$confirm('确定同步物流信息吗,同步后将自动发货?', "警告", {
  792. confirmButtonText: "确定",
  793. cancelButtonText: "取消",
  794. type: "warning"
  795. }).then(function() {
  796. var data=that.item.orderId
  797. return updateExpress(data);
  798. }).then(() => {
  799. this.msgSuccess("操作成功");
  800. getLiveOrder(this.item.orderId).then(response => {
  801. this.item=response.data
  802. that.getlogList(this.item.orderId);
  803. that.$parent.$parent.getList();
  804. });
  805. }).catch(function() {});
  806. },
  807. addErpOrder(){
  808. var that=this;
  809. this.$confirm('是否确认推送管易?', "警告", {
  810. confirmButtonText: "确定",
  811. cancelButtonText: "取消",
  812. type: "warning"
  813. }).then(function() {
  814. var data=that.item.orderCode
  815. return createErpOrder({
  816. orderCode: data
  817. });
  818. }).then(() => {
  819. this.msgSuccess("操作成功");
  820. getLiveOrder(this.item.orderId).then(response => {
  821. this.item=response.data
  822. that.getlogList(this.item.orderId);
  823. that.$parent.$parent.getList();
  824. });
  825. }).catch(function() {});
  826. },
  827. showErpOrder(){
  828. this.erpDialog.open=true;
  829. var data=this.item.extendOrderId;
  830. getEroOrder({
  831. extendOrderId: data
  832. }).then(response => {
  833. this.erp = response.data;
  834. if(response.data.orders!=null&&response.data.orders.length==1){
  835. this.erpOrder=response.data.orders[0]
  836. }
  837. });
  838. },
  839. editTuiMoney1(){
  840. var that=this;
  841. this.$confirm('是否解冻此订单推广佣金吗?', "警告", {
  842. confirmButtonText: "确定",
  843. cancelButtonText: "取消",
  844. type: "warning"
  845. }).then(function() {
  846. var data=that.item.orderId;
  847. return editTuiMoney(data);
  848. }).then(() => {
  849. this.msgSuccess("操作成功");
  850. getLiveOrder(this.item.orderId).then(response => {
  851. this.item=response.data
  852. that.getlogList(this.item.orderId);
  853. that.$parent.$parent.getList();
  854. });
  855. }).catch(function() {});
  856. },
  857. editTuiMoney2(){
  858. var that=this;
  859. this.$confirm('是否冻结此订单推广佣金吗?', "警告", {
  860. confirmButtonText: "确定",
  861. cancelButtonText: "取消",
  862. type: "warning"
  863. }).then(function() {
  864. var data=that.item.orderId;
  865. return editTuiMoney(data);
  866. }).then(() => {
  867. this.msgSuccess("操作成功");
  868. getLiveOrder(this.item.orderId).then(response => {
  869. this.item=response.data
  870. that.getlogList(this.item.orderId);
  871. that.$parent.$parent.getList();
  872. });
  873. }).catch(function() {});
  874. },
  875. returnCost(){
  876. var that=this;
  877. this.$confirm('是否退还此订单成本吗?', "警告", {
  878. confirmButtonText: "确定",
  879. cancelButtonText: "取消",
  880. type: "warning"
  881. }).then(function() {
  882. var data=that.item.orderId;
  883. return returnCost(data);
  884. }).then(() => {
  885. this.msgSuccess("操作成功");
  886. this.getDetails(this.item.orderId,null,null)
  887. }).catch(function() {});
  888. },
  889. moneyCancel(){
  890. this.money=null;
  891. this.moneyVisible=false;
  892. },
  893. refund(){
  894. var that=this;
  895. this.$confirm('是否确认申请退款?', "警告", {
  896. confirmButtonText: "确定",
  897. cancelButtonText: "取消",
  898. type: "warning"
  899. }).then(function() {
  900. var data={
  901. orderId:that.item.orderId
  902. }
  903. return refundOrderMoney(data);
  904. }).then(() => {
  905. this.msgSuccess("操作成功");
  906. getLiveOrder(this.item.orderId).then(response => {
  907. this.item = response.data;
  908. // this.getlogList(this.item.orderId);
  909. this.$parent.$parent.getList();
  910. });
  911. }).catch(function() {});
  912. },
  913. finishOrder(){
  914. var that=this;
  915. this.$confirm('是否确认客户已收货?', "警告", {
  916. confirmButtonText: "确定",
  917. cancelButtonText: "取消",
  918. type: "warning"
  919. }).then(function() {
  920. var data={
  921. orderId:that.item.orderId
  922. }
  923. return finishOrder(data);
  924. }).then(() => {
  925. this.msgSuccess("操作成功");
  926. getLiveOrder(this.item.orderId).then(response => {
  927. this.item = response.data;
  928. this.getlistOrderitem(this.item.orderId);
  929. this.$parent.$parent.getList();
  930. });
  931. }).catch(function() {});
  932. },
  933. syncExpress(){
  934. var that=this;
  935. this.$confirm('确定同步物流状态吗', "警告", {
  936. confirmButtonText: "确定",
  937. cancelButtonText: "取消",
  938. type: "warning"
  939. }).then(function() {
  940. var data=that.item.orderId
  941. return syncExpress(data);
  942. }).then(() => {
  943. this.msgSuccess("操作成功");
  944. this.expressDialog.open=false
  945. getLiveOrder(this.item.orderId).then(response => {
  946. this.item=response.data
  947. that.getlogList(this.item.orderId);
  948. that.$parent.$parent.getList();
  949. });
  950. }).catch(function() {});
  951. },
  952. getInquiryOrder(){
  953. this.show.open=true;
  954. setTimeout(() => {
  955. this.$refs.Details.getDetails(this.item.inquiryOrderId);
  956. }, 1);
  957. },
  958. getPackageOrder(){
  959. this.pack.open=true;
  960. console.log(this.item.packageOrderId)
  961. setTimeout(() => {
  962. this.$refs.packDetails.getDetails(this.item.packageOrderId);
  963. }, 1);
  964. },
  965. tuiOrder(){
  966. var that=this;
  967. this.$confirm('是否确认推送订单?', "警告", {
  968. confirmButtonText: "确定",
  969. cancelButtonText: "取消",
  970. type: "warning"
  971. }).then(function() {
  972. var data={
  973. orderId:that.item.orderId
  974. }
  975. return tuiOrder(data);
  976. }).then(() => {
  977. this.msgSuccess("操作成功");
  978. getLiveOrder(this.item.orderId).then(response => {
  979. this.item = response.data;
  980. this.getlogList(this.item.orderId);
  981. this.$parent.$parent.getList();
  982. });
  983. }).catch(function() {});
  984. },
  985. getDetails(orderId,nickName,storeName) {
  986. this.nickName=nickName;
  987. this.storeName=storeName;
  988. this.item=null;
  989. this.tuiMoneyLogs=null;
  990. getLiveOrder(orderId).then(response => {
  991. this.item = response.data;
  992. console.log(this.tuiMoneyLogs)
  993. this.tuiMoneyLogs = response.tuiMoneyLogs;
  994. this.msgForm.userId=response.data.userId;
  995. this.msgForm.followDoctorId=response.data.followDoctorId;
  996. this.getlistOrderitem(this.item.orderId);
  997. getOrderExpress(orderId).then(response => {
  998. this.deliverList = response.data;
  999. console.log(this.deliverList)
  1000. });
  1001. getOrderPayments(this.item.orderId).then(response => {
  1002. this.payments = response.payments;
  1003. });
  1004. getOrderLog(this.item.orderId).then(response => {
  1005. this.logs = response.logs
  1006. });
  1007. tuiMoneyLogs(this.item.orderId).then(response => {
  1008. this.tuiMoneyLogs = response.data
  1009. })
  1010. });
  1011. },
  1012. getOrder(){
  1013. getLiveOrder(this.item.orderId).then(response => {
  1014. this.item = response.data;
  1015. this.getlistOrderitem(this.item.orderId);
  1016. });
  1017. },
  1018. submitEditDyForm(){
  1019. this.$refs["editDyForm"].validate(valid => {
  1020. if (valid) {
  1021. const params = {
  1022. orderId: this.editDyForm.orderId,
  1023. deliverSn: this.editDyForm.deliveryCode,
  1024. deliverId: this.editDyForm.deliveryId,
  1025. type: 1
  1026. };
  1027. if (this.editDyForm.id != null) {
  1028. params.id = this.editDyForm.id;
  1029. }
  1030. editDeliveryId(params).then(response => {
  1031. if (response.code === 200) {
  1032. this.msgSuccess("操作成功");
  1033. this.editDy.open = false;
  1034. getLiveOrder(this.item.orderId).then(response => {
  1035. this.item = response.data;
  1036. this.$parent.$parent.getList();
  1037. });
  1038. getOrderExpress(this.item.orderId).then(response => {
  1039. this.deliverList = response.data || [];
  1040. });
  1041. }
  1042. })
  1043. }
  1044. });
  1045. },
  1046. getlistOrderitem(orderId){
  1047. this.prod = null
  1048. this.showProd=[]
  1049. this.showList = true
  1050. listOrderitem(orderId).then(response => {
  1051. this.prod = response.rows;
  1052. if (this.prod.length > 0) {
  1053. this.showProd=[this.prod[0]];
  1054. }
  1055. });
  1056. },
  1057. // getlogList(orderId){
  1058. // logList(orderId).then(response => {
  1059. // this.logs = response.rows;
  1060. // });
  1061. // },
  1062. // getPayment(orderId){
  1063. // payment(orderId).then(response => {
  1064. // console.log(response)
  1065. // this.pay = response.data;
  1066. // });
  1067. // }
  1068. }
  1069. }
  1070. </script>
  1071. <style scoped>
  1072. .content{
  1073. height: 100%;
  1074. background-color: #fff;
  1075. padding: 0px 20px;
  1076. }
  1077. .contentx{
  1078. height: 100%;
  1079. background-color: #fff;
  1080. padding: 0px 20px 20px;
  1081. margin: 20px;
  1082. }
  1083. .el-descriptions-item__label.is-bordered-label{
  1084. font-weight: normal;
  1085. }
  1086. .el-descriptions-item__content {
  1087. max-width: 150px;
  1088. min-width: 100px;
  1089. }
  1090. .desct{
  1091. padding-top: 20px;
  1092. padding-bottom: 20px;
  1093. color: #524b4a;
  1094. font-weight: bold;
  1095. }
  1096. .order-content{
  1097. margin: 10px;
  1098. }
  1099. .operate-container {
  1100. background: #F2F6FC;
  1101. height: 60px;
  1102. margin: -20px -20px 0;
  1103. line-height: 60px;
  1104. }
  1105. .operate-button-container {
  1106. float: right;
  1107. margin-right: 20px
  1108. }
  1109. </style>
  1110. <style scoped>
  1111. .chat-records {
  1112. overflow-y: auto;
  1113. }
  1114. .timestamp {
  1115. font-size: 12px;
  1116. color: #A9A9A9;
  1117. }
  1118. .chat-record {
  1119. margin: 10px;
  1120. flex-direction: column;
  1121. align-items: flex-start;
  1122. }
  1123. .sent {
  1124. background-color: #fbfdff;
  1125. color: #000839;
  1126. }
  1127. .sent .timestamp {
  1128. float: right;
  1129. }
  1130. .right{
  1131. float: right;
  1132. }
  1133. .received {
  1134. background-color: #fbfdff;
  1135. color: #000000;
  1136. }
  1137. .el-descriptions-item__content {
  1138. max-width: 150px;
  1139. min-width: 100px;
  1140. }
  1141. .order-content{
  1142. margin: 10px;
  1143. }
  1144. .operate-container {
  1145. background: #F2F6FC;
  1146. height: 60px;
  1147. margin: -20px -20px 0;
  1148. line-height: 60px;
  1149. }
  1150. .operate-button-container {
  1151. float: right;
  1152. margin-right: 20px
  1153. }
  1154. </style>