order.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
  1. <template>
  2. <div>
  3. <div class="btn">
  4. <el-button type="primary">同步订单</el-button>
  5. </div>
  6. <div class="search">
  7. <el-form ref="advancedForm" :model="advancedForm" label-width="160px">
  8. <el-row>
  9. <el-col :span="8">
  10. <el-form-item label="订单日期">
  11. <el-date-picker
  12. v-model="advancedForm.goodsExchange_time_range"
  13. type="daterange"
  14. align="center"
  15. :editable="false"
  16. unlink-panels
  17. :clearable="false"
  18. :default-time="['00:00:00', '23:59:59']"
  19. range-separator="-"
  20. start-placeholder="开始日期"
  21. end-placeholder="结束日期"
  22. value-format="timestamp"
  23. :picker-options="{
  24. disabledDate(time) {
  25. return (
  26. time.getTime() - 1 >=
  27. new Date(
  28. new Date().getFullYear(),
  29. new Date().getMonth(),
  30. new Date().getDate()
  31. ).getTime() +
  32. 86400000 -
  33. 1
  34. );
  35. },
  36. shortcuts: MixinPickerShortcuts,
  37. }"
  38. >
  39. </el-date-picker>
  40. </el-form-item>
  41. </el-col>
  42. <el-col :span="8">
  43. <el-form-item label="仓库">
  44. <el-select v-model="advancedForm.warehouse_id" clearable>
  45. <el-option
  46. v-for="item in warehouseList"
  47. :key="item.id"
  48. :label="item.name"
  49. :value="item.id"
  50. />
  51. </el-select>
  52. </el-form-item>
  53. </el-col>
  54. <el-col :span="8">
  55. <el-form-item label="订单编号">
  56. <el-input v-model="advancedForm.sn" placeholder="请输入订单编号"></el-input>
  57. </el-form-item>
  58. </el-col>
  59. </el-row>
  60. </el-form>
  61. <el-button @click="advancedSearchEvent"> 搜索 </el-button>
  62. </div>
  63. <en-table-layout
  64. toolbar
  65. pagination
  66. :loading="loading"
  67. :tableData="tableData"
  68. @selection-change="handleSelectionChange"
  69. >
  70. <div slot="toolbar" class="inner-toolbar">
  71. <div class="toolbar-btns">
  72. <el-button
  73. size="mini"
  74. type="primary"
  75. v-if="checkPermission(['order:add'])"
  76. @click="handleAdd"
  77. >新增</el-button
  78. >
  79. <!-- <el-button size="mini" type="primary" v-if="checkPermission(['order:outbound'])"
  80. @click="batchOutbound">批量出库</el-button> -->
  81. </div>
  82. <!-- <div class="toolbar-search">
  83. <en-table-search
  84. @search="searchEvent"
  85. @advancedSearch="advancedSearchEvent"
  86. advanced
  87. advancedWidth="465"
  88. placeholder="请输入订单编号或会员名称"
  89. >
  90. <template slot="advanced-content">
  91. <el-form
  92. ref="advancedForm"
  93. :model="advancedForm"
  94. label-width="80px"
  95. >
  96. <el-form-item label="订单时间">
  97. <el-date-picker
  98. v-model="advancedForm.order_time"
  99. type="daterange"
  100. align="center"
  101. :default-time="['00:00:00', '23:59:59']"
  102. :editable="false"
  103. unlink-panels
  104. range-separator="-"
  105. start-placeholder="开始日期"
  106. end-placeholder="结束日期"
  107. >
  108. </el-date-picker>
  109. </el-form-item>
  110. <el-form-item label="仓库">
  111. <el-select v-model="advancedForm.status" clearable>
  112. <el-option label="待提交" value="WAIT_SUBMIT" />
  113. <el-option label="待审核" value="WAIT_AUDIT" />
  114. <el-option label="审核驳回" value="AUDIT_REJECT" />
  115. <el-option label="待出库" value="WAIT_WAREHOUSE_OUT" />
  116. <el-option label="待发货" value="WAIT_SHIP" />
  117. <el-option label="已发货" value="SHIPPED" />
  118. </el-select>
  119. </el-form-item>
  120. <el-form-item label="订单编号">
  121. <el-select v-model="advancedForm.payment_status" clearable>
  122. <el-option label="未支付" value="NOT_PAY" />
  123. <el-option label="已支付" value="PAY" />
  124. </el-select>
  125. </el-form-item>
  126. </el-form>:selectable="canWarehouseOut"
  127. </template>
  128. </en-table-search>
  129. </div> -->
  130. </div>
  131. <template slot="table-columns">
  132. <el-table-column
  133. type="selection"
  134. width="55"
  135. />
  136. <el-table-column prop="sn" label="订单编号">
  137. <template slot-scope="scope">
  138. {{ scope.row.sn }}
  139. </template>
  140. </el-table-column>
  141. <el-table-column label="客户">
  142. <template slot-scope="scope">{{ memberType(scope.row.member_id) }}</template>
  143. </el-table-column>
  144. <el-table-column label="下单时间">
  145. <template slot-scope="scope">{{
  146. scope.row.order_time | unixToDate
  147. }}</template>
  148. </el-table-column>
  149. <el-table-column prop="warehouse_id" label="仓库名称">
  150. <template slot-scope="scope">
  151. {{warehouseName(scope.row.warehouse_id) }}
  152. </template>
  153. </el-table-column>
  154. <el-table-column prop="delivery_type" label="配送方式">
  155. <template slot-scope="scope">{{ deliveryType(scope.row.delivery_type) }}</template>
  156. </el-table-column>
  157. <el-table-column prop="pay_type" label="付款方式">
  158. <template slot-scope="scope">{{payType(scope.row.pay_type) }}</template>
  159. </el-table-column>
  160. <el-table-column prop="status" label="实付金额">
  161. <template slot-scope="scope">{{
  162. "¥" + scope.row.pay_price
  163. }}</template>
  164. </el-table-column>
  165. <el-table-column prop="status" label="订单状态">
  166. <template slot-scope="scope">
  167. {{typeName(scope.row.status) }}
  168. </template>
  169. </el-table-column>
  170. <!-- <el-table-column prop="status" label="订单状态">
  171. <template slot-scope="scope">{{ scope.row.payment_status_text }}</template>
  172. </el-table-column> -->
  173. <el-table-column label="操作" width="250">
  174. <template slot-scope="scope">
  175. <el-button size="mini"
  176. @click="handleAudit(scope.row)">查看</el-button>
  177. <el-button size="mini" type="success"
  178. v-if="scope.row.status==='TO_BE_COMMIT'"
  179. @click="handleSubmit(scope.row.id)">确认</el-button>
  180. <!-- <el-button size="mini" type="danger" v-if="scope.row.allowable.withdraw && checkPermission(['order:withdraw'])"
  181. @click="handleWithdraw(scope.row.id)">撤回</el-button> -->
  182. <el-button size="mini" @click="handleEdit(scope.row)"
  183. v-if="scope.row.status==='TO_BE_COMMIT'"
  184. >编辑</el-button
  185. >
  186. <!-- <el-button size="mini" type="primary" v-if="scope.row.allowable.payment && checkPermission(['order:payment'])"
  187. @click="handlePayment(scope.row.id)">设为已支付</el-button> -->
  188. </template>
  189. </el-table-column>
  190. </template>
  191. <el-pagination
  192. slot="pagination"
  193. v-if="pageData"
  194. @size-change="handlePageSizeChange"
  195. @current-change="handlePageCurrentChange"
  196. :current-page="pageData.page_no"
  197. :page-sizes="[10, 20, 50, 100]"
  198. :page-size="pageData.page_size"
  199. layout="total, sizes, prev, pager, next, jumper"
  200. :total="pageData.data_total"
  201. >
  202. </el-pagination>
  203. </en-table-layout>
  204. </div>
  205. </template>
  206. <script>
  207. import * as API_order from "@/api/order";
  208. import Storage from "@/utils/storage";
  209. import * as API_BasicSetting from '@/api/basicSetting'
  210. import * as API_Setting from '@/api/setting'
  211. import * as API_CollectingAccount from "@/api/collectingAccount";
  212. export default {
  213. name: "orderList",
  214. data() {
  215. return {
  216. warehouseList: [],
  217. /** 列表loading状态 */
  218. loading: false,
  219. /** 列表参数 */
  220. params: {
  221. page_no: 1,
  222. page_size: 10,
  223. ...this.$route.query,
  224. },
  225. cancelpopup: false,
  226. cancelLister: "",
  227. /** 列表数据 */
  228. tableData: [],
  229. /** 列表分页数据 */
  230. pageData: [],
  231. /** 高级搜索数据 */
  232. advancedForm: {},
  233. /** 表格最大高度 */
  234. tableMaxHeight: document.body.clientHeight - 54 - 34 - 50 - 15,
  235. accessToken: Storage.getItem("seller_access_token"),
  236. multipleSelection: [],
  237. orderType:[],
  238. collectingAccountList: [], // 支付方式列表
  239. deliveryTypeList: [
  240. {
  241. code: "express",
  242. name: "快递配送",
  243. },
  244. {
  245. code: "self_pick",
  246. name: "门店自提",
  247. },
  248. ],
  249. customerList:[],
  250. };
  251. },
  252. mounted() {
  253. this.GET_OrderList();
  254. this.GET_WarehouseList()
  255. this.GET_CollectingAccountList()
  256. this.GET_CustomerList();
  257. },
  258. activated() {
  259. delete this.params.market_enable;
  260. this.params = {
  261. ...this.params,
  262. ...this.$route.query,
  263. };
  264. this.GET_OrderList();
  265. window.onresize = this.countTableHeight;
  266. },
  267. beforeRouteUpdate(to, from, next) {
  268. delete this.params.market_enable;
  269. this.params = {
  270. ...this.params,
  271. ...this.$route.query,
  272. };
  273. this.GET_OrderList();
  274. next();
  275. },
  276. methods: {
  277. memberType(val){
  278. let name=''
  279. this.customerList.map(el=>{
  280. if(el.id==val) {
  281. return name=el.name
  282. }
  283. })
  284. return name
  285. },
  286. //获取客户列表
  287. GET_CustomerList() {
  288. API_BasicSetting.customer(this.params)
  289. .then((response) => {
  290. this.customerList = response.data;
  291. })
  292. .catch(() => {});
  293. },
  294. //配送方式查看
  295. deliveryType(val){
  296. let name=''
  297. this.deliveryTypeList.map(el=>{
  298. if(el.code==val) {
  299. return name=el.name
  300. }
  301. })
  302. return name
  303. },
  304. //获取付款方式
  305. payType(val){
  306. let name=''
  307. this.collectingAccountList.map(el=>{
  308. if(el.id==val) {
  309. return name=el.name
  310. }
  311. })
  312. return name
  313. },
  314. /** 获取支付方式列表 */
  315. GET_CollectingAccountList() {
  316. API_CollectingAccount.getList({
  317. page_no: 1,
  318. page_size: -1,
  319. enable_flag: true,
  320. }).then((response) => {
  321. this.collectingAccountList = response.data;
  322. });
  323. },
  324. //获取订单状态大小写转换.toUpperCase()
  325. typeName(val){
  326. let name=''
  327. this.orderType.map(el=>{
  328. if(el.value==val) {
  329. return name=el.label
  330. }
  331. })
  332. return name
  333. },
  334. //获取仓库名称
  335. warehouseName(val){
  336. let name=''
  337. this.warehouseList.map(el=>{
  338. if(el.id==val) {
  339. return name=el.name
  340. }
  341. })
  342. return name
  343. },
  344. batchOutbound() {
  345. if (this.multipleSelection.length === 0) {
  346. this.$message.error("请选择订单!");
  347. return;
  348. }
  349. const orderIds = this.multipleSelection.map((order) => order.id);
  350. this.$router.push({
  351. name: "orderOutbound",
  352. params: { orderIds: orderIds },
  353. });
  354. },
  355. /** 获取仓库 */
  356. GET_WarehouseList() {
  357. API_BasicSetting.getWarehouseListAll().then(response => {
  358. this.warehouseList = response
  359. })
  360. API_Setting.getPage({dictType:"order_status"}).then(res=>{
  361. this.orderType=res.data
  362. })
  363. },
  364. /** 计算高度 */
  365. countTableHeight() {
  366. this.tableHeight = document.body.clientHeight - 54 - 35 - 50;
  367. },
  368. /** 多选改变 */
  369. handleSelectionChange(val) {
  370. this.multipleSelection = val;
  371. },
  372. /** 新增 */
  373. handleAdd() {
  374. this.$router.push({
  375. name: "orderAdd",
  376. params: { callback: this.GET_OrderList },
  377. });
  378. },
  379. /** 是否可以出库 */
  380. /* canWarehouseOut(row) {
  381. return row.allowable.warehouse_out;
  382. }, */
  383. /** 分页大小发生改变 */
  384. handlePageSizeChange(size) {
  385. this.params.page_size = size;
  386. this.GET_OrderList();
  387. },
  388. /** 分页页数发生改变 */
  389. handlePageCurrentChange(page) {
  390. this.params.page_no = page;
  391. this.GET_OrderList();
  392. },
  393. /** 搜索事件触发 */
  394. searchEvent(data) {
  395. this.params = {
  396. ...this.params,
  397. keywords: data,
  398. };
  399. this.params.page_no = 1;
  400. delete this.params.order_status;
  401. Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
  402. this.GET_OrderList();
  403. },
  404. /** 高级搜索事件触发 */
  405. advancedSearchEvent() {
  406. this.params = {
  407. ...this.params,
  408. ...this.advancedForm,
  409. };
  410. this.params.page_no = 1;
  411. delete this.params.start_time;
  412. delete this.params.end_time;
  413. if (this.advancedForm.order_time) {
  414. this.advancedForm.order_time[0] =
  415. this.advancedForm.order_time[0].getTime() / 1000;
  416. this.advancedForm.order_time[1] =
  417. this.advancedForm.order_time[1].getTime() / 1000;
  418. }
  419. delete this.params.keywords;
  420. this.GET_OrderList();
  421. },
  422. /** 编辑订单 */
  423. handleEdit(order) {
  424. this.$router.push({
  425. name: "orderEdit",
  426. params: { id: order.id, callback: this.GET_OrderList },
  427. });
  428. },
  429. /** 审核订单 */
  430. handleAudit(order) {
  431. this.$router.push({
  432. name: "orderDetail",
  433. params: { id: order.id, callback: this.GET_OrderList },
  434. });
  435. },
  436. /** 订单设为已支付 */
  437. async handlePayment(id) {
  438. // 二次确认
  439. await this.$confirm(`确认要设为已支付吗?`, "提示");
  440. // 发起修改
  441. await API_order.payment(id);
  442. this.$message.success("操作成功!");
  443. // 刷新列表
  444. this.GET_OrderList();
  445. },
  446. /** 提交订单 */
  447. async handleSubmit(id) {
  448. // 发起修改
  449. await API_order.submit(id);
  450. this.$message.success("操作成功!");
  451. // 刷新列表
  452. this.GET_OrderList();
  453. },
  454. /** 撤回订单 */
  455. async handleWithdraw(id) {
  456. // 发起修改
  457. await API_order.withdraw(id);
  458. this.$message.success("操作成功!");
  459. // 刷新列表
  460. this.GET_OrderList();
  461. },
  462. GET_OrderList() {
  463. this.loading = true;
  464. API_order.getOrderList(this.params).then((response) => {
  465. this.loading = false;
  466. this.tableData = response.data;
  467. this.pageData = {
  468. page_no: response.page_no,
  469. page_size: response.page_size,
  470. data_total: response.data_total,
  471. };
  472. });
  473. },
  474. },
  475. };
  476. </script>
  477. <style type="text/scss" lang="scss" scoped>
  478. .btn{
  479. display: flex;
  480. justify-content: flex-end;
  481. padding: 30px 20px 5px;
  482. border-radius: 5px;
  483. background-color: #fff;
  484. .el-button{
  485. width: 100px;
  486. }
  487. }
  488. .search {
  489. display: flex;
  490. align-items: center;
  491. background: #fff;
  492. overflow: hidden;
  493. padding: 30px 10px 10px 10px;
  494. /deep/ .el-form-item {
  495. .el-form-item__content {
  496. .el-input {
  497. width: 200px;
  498. }
  499. }
  500. }
  501. .el-button{
  502. margin-top: -19px;
  503. margin-left: 20px;
  504. }
  505. }
  506. /* .container {
  507. padding: 10px 10px 0 10px;
  508. } */
  509. /deep/ .el-table {
  510. min-height: auto !important;
  511. }
  512. /deep/ div.toolbar {
  513. height: 70px;
  514. padding: 20px 0;
  515. }
  516. /* 工具条*/
  517. .inner-toolbar {
  518. display: flex;
  519. width: 100%;
  520. justify-content: space-between;
  521. padding: 0 20px;
  522. }
  523. .empty-block {
  524. position: relative;
  525. min-height: 60px;
  526. line-height: 60px;
  527. text-align: center;
  528. width: 262%;
  529. font-size: 14px;
  530. color: #606266;
  531. }
  532. /*表格信息*/
  533. .my-table-out {
  534. white-space: nowrap;
  535. overflow-y: scroll;
  536. overflow-x: hidden;
  537. text-overflow: ellipsis;
  538. width: 100%;
  539. max-height: 800px;
  540. margin: 0 10px;
  541. min-height: 480px !important;
  542. background: #fff;
  543. }
  544. .my-table {
  545. width: 100%;
  546. margin-bottom: 40px;
  547. background: #fff;
  548. border-collapse: collapse;
  549. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  550. Microsoft YaHei, Arial, sans-serif;
  551. font-size: 14px;
  552. font-bold: 700;
  553. .bg-order {
  554. background: #fafafa;
  555. }
  556. thead {
  557. th {
  558. padding: 10px 0;
  559. border: 1px solid #ebeef5;
  560. border-collapse: collapse;
  561. color: #909399;
  562. }
  563. th.shoplist-header {
  564. padding: 10px 20px;
  565. display: flex;
  566. flex-direction: row;
  567. flex-wrap: nowrap;
  568. justify-content: space-between;
  569. align-items: center;
  570. }
  571. }
  572. tbody {
  573. margin-top: 10px;
  574. td {
  575. border: 1px solid #ebeef5;
  576. border-collapse: collapse;
  577. text-align: center;
  578. padding: 0;
  579. }
  580. td:first-child {
  581. text-align: left;
  582. }
  583. td:not(:first-child) {
  584. padding: 3px;
  585. }
  586. td.shoplist-content-out {
  587. padding-left: 20px;
  588. }
  589. /*商品信息*/
  590. p.shoplist-content:not(:last-child) {
  591. border-bottom: 1px solid #ebeef5;
  592. border-collapse: collapse;
  593. }
  594. p.shoplist-content {
  595. margin: 0;
  596. padding: 0 20px;
  597. box-sizing: padding-box;
  598. display: flex;
  599. flex-direction: row;
  600. flex-wrap: nowrap;
  601. justify-content: space-between;
  602. align-items: center;
  603. .goods-info {
  604. display: flex;
  605. flex-direction: row;
  606. flex-wrap: nowrap;
  607. justify-content: flex-start;
  608. align-items: center;
  609. padding: 10px 0;
  610. img {
  611. display: block;
  612. margin-right: 10px;
  613. }
  614. a {
  615. display: block;
  616. color: #409eff;
  617. }
  618. }
  619. }
  620. div.order-money {
  621. display: flex;
  622. flex-direction: column;
  623. flex-wrap: nowrap;
  624. justify-content: center;
  625. align-items: center;
  626. span {
  627. display: inline-block;
  628. padding: 5px;
  629. }
  630. span.order-amount {
  631. color: red;
  632. }
  633. }
  634. }
  635. /* 商品图片 */
  636. .goods-image {
  637. width: 50px;
  638. height: 50px;
  639. }
  640. /** 交易快照 */
  641. .trade-record {
  642. display: inline-block;
  643. margin-right: 50px;
  644. }
  645. }
  646. /*分页信息*/
  647. section > div {
  648. position: relative;
  649. }
  650. .el-pagination {
  651. text-align: right;
  652. width: 100%;
  653. background: #ffffff;
  654. height: 100px;
  655. padding: 5px 20px;
  656. margin: 0 10px;
  657. }
  658. .exprot-tip {
  659. margin-left: 5px;
  660. color: red;
  661. font-size: 12px;
  662. }
  663. </style>