add.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. <template>
  2. <div class="app-container">
  3. <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom:40px">
  4. <div class="bj-divider">
  5. <div class="left">
  6. <span class="default-text">三方订单基本信息</span>
  7. <div class="button"></div>
  8. <span class="tips"></span>
  9. </div>
  10. </div>
  11. <el-row>
  12. <el-col :span="9">
  13. <el-form-item label-width="100px" label="三方订单号" prop="outerOrderNo" style="margin-right:20px">
  14. <el-input v-model="form.outerOrderNo" placeholder="请输入三方订单号" />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="9">
  18. <el-form-item label-width="140px" label="三方订单下单时间" prop="orderTime" >
  19. <el-date-picker clearable size="small" style="width:100%"
  20. v-model="form.orderTime"
  21. type="date"
  22. value-format="yyyy-MM-dd"
  23. placeholder="请选择">
  24. </el-date-picker>
  25. </el-form-item>
  26. </el-col>
  27. <el-col :span="9">
  28. <el-form-item label-width="100px" label="销售渠道" prop="channelType" style="margin-right:20px">
  29. <el-select style="width:100%" @change="channelChange" v-model="form.channelType" :placeholder="storePlaceholder" clearable size="small">
  30. <el-option
  31. v-for="item in channelTypeOptions"
  32. :key="'channelType'+item.dictValue"
  33. :label="item.dictLabel"
  34. :value="item.dictValue"/>
  35. </el-select>
  36. </el-form-item>
  37. </el-col>
  38. <el-col :span="9">
  39. <el-form-item label-width="140px" label="选择销售店铺" prop="storeId">
  40. <el-select style="width:100%" :disabled="storeAvailable" ref="storeId" v-model="form.storeId" placeholder="请选择销售店铺" clearable size="small">
  41. <el-option
  42. v-for="item in stores"
  43. :key="'omsStore'+item.storeId"
  44. :label="item.storeName"
  45. :value="item.storeId"/>
  46. </el-select>
  47. </el-form-item>
  48. </el-col>
  49. <el-col :span="18">
  50. <el-form-item label-width="100px" label="商家备注" prop="channelType">
  51. <el-input type="textarea" v-model="form.orderRemark" show-word-limit maxlength="200"></el-input>
  52. </el-form-item>
  53. </el-col>
  54. </el-row>
  55. <div class="bj-divider"><div class="left"><span class="default-text">买家以及收货信息</span><div class="button"></div><span class="tips"></span></div></div>
  56. <el-row>
  57. <el-col :span="9">
  58. <el-form-item label-width="100px" label="买家昵称" prop="buyerNick" style="margin-right:20px">
  59. <el-input v-model="form.outerOrderNo" placeholder="请输入买家昵称" />
  60. </el-form-item>
  61. </el-col>
  62. </el-row>
  63. <el-row>
  64. <el-col :span="9">
  65. <el-form-item label-width="100px" label="收货人" prop="logisticsUserName" style="margin-right:20px">
  66. <el-input v-model="form.logisticsUserName" placeholder="请输入" />
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="9">
  70. <el-form-item label-width="100px" label="收货人手机" prop="logisticsUserPhone">
  71. <el-input v-model="form.logisticsUserPhone" placeholder="请输入" />
  72. </el-form-item>
  73. </el-col>
  74. <el-col :span="9">
  75. <el-form-item label-width="95px" label="所属省市区" prop="cityIds">
  76. <el-cascader style="width:100%"
  77. ref="citySelect"
  78. v-model="cityIds"
  79. :options="citys"
  80. @change="handleCityChange"></el-cascader>
  81. </el-form-item>
  82. </el-col>
  83. <el-col :span="9">
  84. <el-form-item label-width="10px" prop="cityIds">
  85. <el-input v-model="form.userAddress" placeholder="详情地址" />
  86. </el-form-item>
  87. </el-col>
  88. <el-col :span="18">
  89. <el-form-item label-width="100px" label="买家备注" prop="buyerRemark" >
  90. <el-input type="textarea" v-model="form.buyerRemark" show-word-limit maxlength="200"></el-input>
  91. </el-form-item>
  92. </el-col>
  93. </el-row>
  94. <div class="bj-divider"><div class="left"><span class="default-text">支付信息</span><div class="button"></div><span class="tips"></span></div></div>
  95. <el-row>
  96. <el-col :span="8">
  97. <el-form-item label="支付方式" prop="payType">
  98. <el-select style="width:100%" v-model="form.payType" placeholder="请选择支付方式" clearable size="small">
  99. <el-option
  100. v-for="item in payTypeOptions"
  101. :key="'payType'+item.dictValue"
  102. :label="item.dictLabel"
  103. :value="item.dictValue"/>
  104. </el-select>
  105. </el-form-item>
  106. </el-col>
  107. <el-col :span="8">
  108. <el-form-item label-width="100px" label="支付金额" prop="buyerPayAmount" style="margin-right:20px">
  109. <el-input v-model="form.buyerPayAmount" type="number" placeholder="请输入" />
  110. </el-form-item>
  111. </el-col>
  112. <el-col :span="8">
  113. <el-form-item label-width="140px" label="支付金额是否含运费" prop="shippingType">
  114. <el-radio-group v-model="form.shippingType">
  115. <el-radio :key="'shippingType'+item.dictValue" :label="item.dictValue" v-for="item in shippingTypeOptions" >{{item.dictLabel}}</el-radio>
  116. </el-radio-group>
  117. </el-form-item>
  118. </el-col>
  119. </el-row>
  120. <el-row>
  121. <el-col :span="8">
  122. <el-form-item label="支付状态" prop="payStatus">
  123. <el-select style="width:100%" v-model="form.payStatus" placeholder="请选择" clearable size="small">
  124. <el-option
  125. v-for="item in payStatusOptions"
  126. :key="'payStatus'+item.dictValue"
  127. :label="item.dictLabel"
  128. :value="item.dictValue"/>
  129. </el-select>
  130. </el-form-item>
  131. </el-col>
  132. <el-col :span="8">
  133. <el-form-item label-width="100px" label="支付时间" prop="payTime" style="margin-right:20px">
  134. <el-date-picker clearable size="small" style="width:100%"
  135. v-model="form.payTime"
  136. type="date"
  137. value-format="yyyy-MM-dd"
  138. placeholder="请选择">
  139. </el-date-picker>
  140. </el-form-item>
  141. </el-col>
  142. </el-row>
  143. <div class="bj-divider"><div class="left"><span class="default-text">优惠信息</span><div class="button"></div><span class="tips"></span></div></div>
  144. <el-row>
  145. <el-col :span="9">
  146. <el-form-item label-width="100px" label="三方平台优惠" prop="isThirdDiscount" style="margin-right:10px">
  147. <el-radio-group v-model="form.isThirdDiscount">
  148. <el-radio :key="'isThirdDiscount'+item.dictValue" :label="item.dictValue" v-for="item in isThirdDiscountOptions" >{{item.dictLabel}}</el-radio>
  149. </el-radio-group>
  150. </el-form-item>
  151. </el-col>
  152. <el-col :span="9" v-if="form.isThirdDiscount!='0'">
  153. <el-form-item label-width="10" label="" prop="thirdDiscount">
  154. <el-input v-model="form.thirdDiscount" placeholder="三方平台优惠金额" />
  155. </el-form-item>
  156. </el-col>
  157. <el-col :span="9" v-if="form.isThirdDiscount!='0'">
  158. <el-form-item label-width="100px" label="优惠承担" prop="thirdDiscountAmount" style="margin-right:10px">
  159. <el-input v-model="form.thirdDiscountAmount" placeholder="三方平台承担优惠金额" />
  160. </el-form-item>
  161. </el-col>
  162. <el-col :span="9" v-if="form.isThirdDiscount!='0'">
  163. <el-form-item label-width="10" label="" prop="businessDiscountAmount">
  164. <el-input v-model="form.businessDiscountAmount" placeholder="商家承担优惠金额" />
  165. </el-form-item>
  166. </el-col>
  167. </el-row>
  168. <div class="bj-divider" style="margin-bottom:10px">
  169. <div class="left"><span class="default-text">商品信息</span>
  170. <el-button plain type="primary" size="mini" @click="handleAddProduct">添加商品</el-button>
  171. <span class="tips"></span>
  172. </div>
  173. </div>
  174. <el-row>
  175. <el-col :span="24">
  176. <el-form-item label="" label-width="0" prop="productList" style="margin-left:0" >
  177. <el-table border width="100%" style="margin-top:5px;" :data="products">
  178. <el-table-column label="商品编号" align="center" prop="barCode" />
  179. <el-table-column label="商品图片" align="center" width="100">
  180. <template slot-scope="scope">
  181. <el-popover
  182. placement="right"
  183. title=""
  184. trigger="hover">
  185. <img slot="reference" :src="scope.row.image" width="50">
  186. <img :src="scope.row.image" style="max-width: 50px;">
  187. </el-popover>
  188. </template>
  189. </el-table-column>
  190. <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
  191. <el-table-column label="商品规格" align="center" prop="sku" />
  192. <!-- <el-table-column label="库存" align="center" prop="stock" /> -->
  193. <el-table-column label="售价" align="center" prop="price" >
  194. <template slot-scope="scope">
  195. <div v-if="scope.row.price!=null">
  196. {{scope.row.price.toFixed(2)}}
  197. </div>
  198. </template>
  199. </el-table-column>
  200. <!-- <el-table-column label="代理价" align="center" prop="agentPrice" /> -->
  201. <el-table-column label="数量" align="center" prop="count" width="200px" >
  202. <template slot-scope="scope">
  203. <div>
  204. <el-input-number v-model="scope.row.count" @change="handleProductCountChange(scope.row)" size="mini" :min="1" :max="scope.row.stock" ></el-input-number>
  205. </div>
  206. </template>
  207. </el-table-column>
  208. <el-table-column label="小计" align="center" prop="money" >
  209. <template slot-scope="scope">
  210. <div v-if="scope.row.money!=null">
  211. {{scope.row.money.toFixed(2)}}
  212. </div>
  213. </template>
  214. </el-table-column>
  215. <el-table-column label="操作" align="center" width="100px" >
  216. <template slot-scope="scope">
  217. <el-button
  218. size="mini"
  219. type="text"
  220. icon="el-icon-delete"
  221. @click="handleProductDelete(scope.row)"
  222. >删除</el-button>
  223. </template>
  224. </el-table-column>
  225. </el-table>
  226. <!-- <el-row >
  227. <el-col >
  228. <span style="margin-left:10px;" v-if="totalMoney!=null">商品总价:{{totalMoney}}</span>
  229. </el-col>
  230. </el-row> -->
  231. </el-form-item>
  232. </el-col>
  233. </el-row>
  234. </el-form>
  235. <div slot="footer" class="dialog-footer">
  236. <el-button type="primary" @click="submitForm">确 定</el-button>
  237. <el-button @click="cancel">取 消</el-button>
  238. </div>
  239. </div>
  240. </template>
  241. <script>
  242. import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from "@/api/oms/orderInternal";
  243. import { listStore } from "@/api/oms/store";
  244. import { getCitys } from "@/api/store/city";
  245. export default {
  246. name: "Store",
  247. data() {
  248. return {
  249. // 遮罩层
  250. loading: true,
  251. // 弹出层标题
  252. title: "",
  253. // 是否显示弹出层
  254. open: false,
  255. // 表单参数
  256. form: { },
  257. // 表单校验
  258. rules: {
  259. outerOrderNo: [
  260. { required: true, message: "请输入三方订单号", trigger: "blur" }
  261. ],
  262. orderTime: [
  263. { required: true, message: "请选择三方下单时间", trigger: "blur" }
  264. ],
  265. channelType: [
  266. { required: true, message: "请选择销售渠道", trigger: "blur" }
  267. ],
  268. storeId: [
  269. { required: true, message: "请选择销售店铺", trigger: "blur" }
  270. ],
  271. buyerNick: [
  272. { required: true, message: "请输入买家昵称", trigger: "blur" }
  273. ],
  274. logisticsUserName: [
  275. { required: true, message: "请输入收货人", trigger: "blur" }
  276. ],
  277. logisticsUserPhone: [
  278. { required: true, message: "请输入收货人手机号", trigger: "blur" }
  279. ],
  280. cityIds: [
  281. { required: true, message: "请选择收货地址", trigger: "blur" }
  282. ],
  283. payType: [
  284. { required: true, message: "请选择支付方式", trigger: "blur" }
  285. ],
  286. payStatus: [
  287. { required: true, message: "请选择支付状态", trigger: "blur" }
  288. ],
  289. buyerPayAmount: [
  290. { required: true, message: "请输入支付金额", trigger: "blur" }
  291. ],
  292. payTime: [
  293. { required: true, message: "请选择支付时间", trigger: "blur" }
  294. ],
  295. },
  296. channelTypeOptions:[],
  297. stores:[],
  298. payTypeOptions:[],
  299. shippingTypeOptions:[],
  300. payStatusOptions:[],
  301. isThirdDiscountOptions:[],
  302. cityIds:[],
  303. citys:[],
  304. storeAvailable:true,
  305. storePlaceholder:"请先选择销售渠道",
  306. isFreeShipping:false,
  307. products:[],
  308. product:{
  309. open:false,
  310. title:"商品选择"
  311. },
  312. };
  313. },
  314. created() {
  315. this.getDicts("oms_channel_type").then((response) => {
  316. this.channelTypeOptions = response.data;
  317. });
  318. this.getDicts("oms_pay_type").then((response) => {
  319. this.payTypeOptions = response.data;
  320. });
  321. this.getDicts("oms_shipping_type").then((response) => {
  322. this.shippingTypeOptions = response.data;
  323. });
  324. this.getDicts("oms_pay_status").then((response) => {
  325. this.payStatusOptions = response.data;
  326. });
  327. this.getDicts("oms_is_third_discount").then((response) => {
  328. this.isThirdDiscountOptions = response.data;
  329. });
  330. this.getCitys();
  331. this.reset();
  332. },
  333. methods: {
  334. // 取消按钮
  335. cancel() {
  336. this.open = false;
  337. this.reset();
  338. },
  339. // 表单重置
  340. // 表单重置
  341. reset() {
  342. this.form = {
  343. id: null,
  344. storeId: null,
  345. outerOrderNo: null,
  346. innerOrderNo: null,
  347. preemptCode: null,
  348. orderType: null,
  349. orderSource: null,
  350. innerOrderSource: null,
  351. orderStatus: 0,
  352. refundStatus: 0,
  353. payType: null,
  354. payStatus: "0",
  355. auditType: null,
  356. auditStatus: 0,
  357. orderStage: null,
  358. isGift: null,
  359. isThirdDiscount:"0",
  360. goodsNum: null,
  361. skuNum: null,
  362. thirdDiscountAmount: null,
  363. businessDiscountAmount: null,
  364. totalDiscount: null,
  365. totalAmount: null,
  366. amountReceivable: null,
  367. buyerPayAmount: null,
  368. buyerRealPrice: null,
  369. shippingType: "0",
  370. costAmount: null,
  371. postage: null,
  372. tags: null,
  373. buyerNick: null,
  374. buyerRemark: null,
  375. orderRemark: null,
  376. serviceRemark: null,
  377. payNo: null,
  378. orderTime: null,
  379. payTime: null,
  380. userAddress:null,
  381. cityIds:[],
  382. citys:[],
  383. };
  384. this.cityIds=[];
  385. this.resetForm("form");
  386. },
  387. /** 修改按钮操作 */
  388. handleUpdate(row) {
  389. this.reset();
  390. const storeId = row.storeId || this.ids
  391. getStore(storeId).then(response => {
  392. this.form = response.data;
  393. this.form.channelWarehouseName=row.channelWarehouseName;
  394. if(this.form.channelType!=null){
  395. this.form.channelType = this.form.channelType.toString();
  396. }
  397. if(this.form.storeType!=null){
  398. this.form.storeType = this.form.storeType.toString();
  399. }
  400. if(this.form.status!=null){
  401. this.form.status = this.form.status.toString();
  402. }
  403. this.open = true;
  404. this.title = "修改网店";
  405. });
  406. },
  407. /** 提交按钮 */
  408. submitForm() {
  409. this.$refs["form"].validate(valid => {
  410. if (valid) {
  411. if (this.form.storeId != null) {
  412. updateStore(this.form).then(response => {
  413. if (response.code === 200) {
  414. this.msgSuccess("修改成功");
  415. this.open = false;
  416. this.getList();
  417. }
  418. });
  419. } else {
  420. addStore(this.form).then(response => {
  421. if (response.code === 200) {
  422. this.msgSuccess("新增成功");
  423. this.open = false;
  424. this.getList();
  425. }
  426. });
  427. }
  428. }
  429. });
  430. },
  431. /** 删除按钮操作 */
  432. handleDelete(row) {
  433. const storeIds = row.storeId || this.ids;
  434. this.$confirm('是否确认删除网店编号为"' + storeIds + '"的数据项?', "警告", {
  435. confirmButtonText: "确定",
  436. cancelButtonText: "取消",
  437. type: "warning"
  438. }).then(function() {
  439. return delStore(storeIds);
  440. }).then(() => {
  441. this.getList();
  442. this.msgSuccess("删除成功");
  443. }).catch(function() {});
  444. },
  445. /** 导出按钮操作 */
  446. handleExport() {
  447. const queryParams = this.queryParams;
  448. this.$confirm('是否确认导出所有网店数据项?', "警告", {
  449. confirmButtonText: "确定",
  450. cancelButtonText: "取消",
  451. type: "warning"
  452. }).then(function() {
  453. return exportStore(queryParams);
  454. }).then(response => {
  455. this.download(response.msg);
  456. }).catch(function() {});
  457. },
  458. getChanelType(type){
  459. var chanelTypeName="";
  460. const chanelType = this.channelTypeOptions.filter((obj) => {
  461. return obj[dictValue] === type
  462. });
  463. if(chanelType!=null){
  464. chanelTypeName=chanelType.dictLable;
  465. }
  466. return chanelTypeName;
  467. },
  468. channelChange(e){
  469. var item=this.channelTypeOptions.find(val => val.dictValue === e);
  470. var channelType=item.dictValue;
  471. this.form.channelType=channelType;
  472. listStore({"channelType":channelType}).then(response => {
  473. this.stores = response.rows;
  474. });
  475. this.storeAvailable=false;
  476. this.storePlaceholder="请选择";
  477. },
  478. handleCityChange(value) {
  479. console.log(value);
  480. var nodes=this.$refs.citySelect.getCheckedNodes();
  481. this.form.cityIds=nodes[0].pathLabels[0]+"-"+nodes[0].pathLabels[1]+"-"+nodes[0].pathLabels[2];
  482. this.form.cityIdsStr=value.toString();
  483. console.log(this.form.cityIdsStr);
  484. },
  485. getCitys(){
  486. getCitys().then(res => {
  487. this.loading = false;
  488. this.citys=res.data;
  489. });
  490. },
  491. handleProductCountChange(row){
  492. row.money=row.count*row.price;
  493. this.$forceUpdate();
  494. this.compute();
  495. },
  496. handleProductDelete(row){
  497. this.products.splice(this.products.findIndex(item => item.id === row.id), 1)
  498. this.compute();
  499. },
  500. compute(){
  501. this.totalMoney=0;
  502. var that=this;
  503. this.products.forEach (function (value) {
  504. that.totalMoney += value.money;
  505. });
  506. that.totalMoney=that.totalMoney.toFixed(2);
  507. },
  508. selectProduct(row){
  509. console.log(row);
  510. for(var i=0;i<this.products.length;i++){
  511. if(this.products[i].id==row.id){
  512. return;
  513. }
  514. }
  515. row.count=1;
  516. row.money=row.count*row.price;
  517. this.products.push(row);
  518. this.compute();
  519. },
  520. handleAddProduct(){
  521. this.product.open=true;
  522. // setTimeout(() => {
  523. // this.$refs.product.getData(1);
  524. // }, 200);
  525. },
  526. }
  527. };
  528. </script>
  529. <style lang="scss" scoped>
  530. .app-main{
  531. background: #ffffff;
  532. }
  533. .app-container{
  534. margin: 0;
  535. }
  536. .bj-divider {
  537. padding: 10px 0;
  538. border-bottom: 1px solid #eee;
  539. margin-bottom: 16px;
  540. display: -webkit-box;
  541. display: -ms-flexbox;
  542. display: flex;
  543. -webkit-box-align: center;
  544. -ms-flex-align: center;
  545. align-items: center;
  546. -webkit-box-pack: justify;
  547. -ms-flex-pack: justify;
  548. justify-content: space-between;
  549. width: 100%
  550. }
  551. .bj-divider.small {
  552. font-size: 14px;
  553. padding: 8px 0;
  554. margin-bottom: 8px
  555. }
  556. .bj-divider.noPadding {
  557. padding: 0
  558. }
  559. .bj-divider .left {
  560. display: -webkit-box;
  561. display: -ms-flexbox;
  562. display: flex;
  563. -webkit-box-align: center;
  564. -ms-flex-align: center;
  565. align-items: center
  566. }
  567. .bj-divider .button {
  568. display: -webkit-box;
  569. display: -ms-flexbox;
  570. display: flex
  571. }
  572. .bj-divider .default-text {
  573. border-left: 4px #409eff solid;
  574. padding-left: 16px;
  575. font-size: 18px
  576. }
  577. .bj-divider.small .default-text {
  578. font-size: 14px
  579. }
  580. .bj-divider .xs {
  581. font-size: 12px;
  582. padding: 0 8px
  583. }
  584. .bj-divider .tips {
  585. line-height: 20px;
  586. margin-left: 16px
  587. }
  588. .bj-divider .right {
  589. display: -webkit-box;
  590. display: -ms-flexbox;
  591. display: flex;
  592. -webkit-box-align: center;
  593. -ms-flex-align: center;
  594. align-items: center
  595. }
  596. .bj-divider .el-button {
  597. margin-left: 16px
  598. }
  599. .bj-divider .fixed {
  600. position: fixed;
  601. top: 55px;
  602. z-index: 9;
  603. right: 20px
  604. }
  605. .bj-divider .right .el-form-item--small.el-form-item {
  606. margin-bottom: 0
  607. }
  608. .dialog-footer{
  609. text-align: right;
  610. position: fixed;
  611. right: 0px;
  612. bottom: 0px;
  613. width: 90%;
  614. margin-right: 0px;
  615. padding:10px 20px;
  616. z-index: 9;
  617. background: #ffffff;
  618. height: 65px;
  619. }
  620. </style>