index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649
  1. <template>
  2.  
  3. <div class="app-container">
  4. <el-card class="filter-container" shadow="never">
  5. <div>
  6. <i class="el-icon-search"></i>
  7. <span>筛选搜索</span>
  8. <el-button
  9. style="float: right; "
  10. @click="onExport()"
  11. size="small"
  12. type="danger"
  13. >
  14. 导出
  15. </el-button>
  16. <el-button
  17. style="float: right; margin-right: 15px"
  18. type="primary"
  19. @click="handleSearchList()"
  20. size="small"
  21. >
  22. 查询搜索
  23. </el-button>
  24. <el-button
  25. style="float: right; margin-right: 15px"
  26. @click="handleResetSearch()"
  27. size="small"
  28. >
  29. 重置
  30. </el-button>
  31. </div>
  32. <div style="margin-top: 15px">
  33. <el-form
  34. :inline="true"
  35. :model="listQuery"
  36. size="small"
  37. label-width="140px"
  38. >
  39. <el-form-item label="输入搜索:">
  40. <el-input
  41. v-model="listQuery.orderSn"
  42. class="input-width"
  43. placeholder="订单编号"
  44. ></el-input>
  45. </el-form-item>
  46. <el-form-item label="收货人:">
  47. <el-input
  48. v-model="listQuery.receiverKeyword"
  49. class="input-width"
  50. placeholder="收货人姓名/手机号码"
  51. ></el-input>
  52. </el-form-item>
  53. <el-form-item label="提交时间:">
  54. <el-date-picker
  55. class="input-width"
  56. v-model="listQuery.dateRange"
  57. value-format="yyyy-MM-dd"
  58. type="daterange"
  59. placeholder="请选择时间"
  60. range-separator="~"
  61. start-placeholder="开始日期"
  62. end-placeholder="结束日期"
  63. style="width: 260px;"
  64. >
  65. </el-date-picker>
  66. </el-form-item>
  67. <el-form-item label="订单状态:">
  68. <el-select
  69. v-model="listQuery.status"
  70. class="input-width"
  71. placeholder="全部"
  72. clearable
  73. >
  74. <el-option
  75. v-for="item in statusOptions"
  76. :key="item.value"
  77. :label="item.label"
  78. :value="item.value"
  79. >
  80. </el-option>
  81. </el-select>
  82. </el-form-item>
  83. <el-form-item label="订单分类:">
  84. <el-select
  85. v-model="listQuery.orderType"
  86. class="input-width"
  87. placeholder="全部"
  88. clearable
  89. >
  90. <el-option
  91. v-for="item in orderTypeOptions"
  92. :key="item.value"
  93. :label="item.label"
  94. :value="item.value"
  95. >
  96. </el-option>
  97. </el-select>
  98. </el-form-item>
  99. <el-form-item label="订单来源:">
  100. <el-select
  101. v-model="listQuery.sourceType"
  102. class="input-width"
  103. placeholder="全部"
  104. clearable
  105. >
  106. <el-option
  107. v-for="item in sourceTypeOptions"
  108. :key="item.value"
  109. :label="item.label"
  110. :value="item.value"
  111. >
  112. </el-option>
  113. </el-select>
  114. </el-form-item>
  115. </el-form>
  116. </div>
  117. </el-card>
  118. <el-card class="operate-container" shadow="never">
  119. <i class="el-icon-tickets"></i>
  120. <span>数据列表</span>
  121. </el-card>
  122. <div class="table-container">
  123. <el-table
  124. ref="orderTable"
  125. :data="list"
  126. style="width: 100%"
  127. @selection-change="handleSelectionChange"
  128. v-loading="listLoading"
  129. border
  130. >
  131. <el-table-column
  132. type="selection"
  133. width="60"
  134. align="center"
  135. ></el-table-column>
  136. <el-table-column label="编号" width="80" align="center">
  137. <template slot-scope="scope">{{ scope.row.id }}</template>
  138. </el-table-column>
  139. <el-table-column label="订单编号" width="180" align="center">
  140. <template slot-scope="scope">{{ scope.row.orderSn }}</template>
  141. </el-table-column>
  142. <el-table-column label="提交时间" width="180" align="center">
  143. <template slot-scope="scope">{{
  144. scope.row.createTime | formatCreateTime
  145. }}</template>
  146. </el-table-column>
  147. <el-table-column label="来源" align="center">
  148. <template slot-scope="scope">{{ scope.row.orderFormType | formatOrderFormType }}</template>
  149. </el-table-column>
  150. <el-table-column label="用户类型" align="center">
  151. <template slot-scope="scope">
  152. <p v-if="scope.row.platformType == 'STUDENT'">学生</p>
  153. <p v-else-if="scope.row.platformType == 'TEACHER'">老师</p>
  154. <p v-else-if="scope.row.platformType == 'SCHOOL'">学校</p>
  155. <p v-else>--</p>
  156. </template>
  157. </el-table-column>
  158. <el-table-column label="用户编号" align="center">
  159. <template slot-scope="scope">{{ scope.row.userId }}</template>
  160. </el-table-column>
  161. <el-table-column label="用户名" align="center">
  162. <template slot-scope="scope">{{ scope.row.username }}</template>
  163. </el-table-column>
  164. <el-table-column label="手机号" align="center">
  165. <template slot-scope="scope">{{ scope.row.phone || '-' }}</template>
  166. </el-table-column>
  167. <el-table-column label="订单金额" width="120" align="center">
  168. <template slot-scope="scope">¥{{ scope.row.totalAmount }}</template>
  169. </el-table-column>
  170. <el-table-column label="支付方式" width="120" align="center">
  171. <template slot-scope="scope">{{
  172. scope.row.payType | formatPayType
  173. }}</template>
  174. </el-table-column>
  175. <el-table-column label="订单来源" width="120" align="center">
  176. <template slot-scope="scope">{{
  177. scope.row.sourceType | formatSourceType
  178. }}</template>
  179. </el-table-column>
  180. <el-table-column label="订单状态" width="120" align="center">
  181. <template slot-scope="scope">{{
  182. scope.row.status | formatStatus
  183. }}</template>
  184. </el-table-column>
  185. <el-table-column label="操作" width="200" align="center">
  186. <template slot-scope="scope">
  187. <el-button
  188. size="mini"
  189. @click="handleViewOrder(scope.$index, scope.row)"
  190. >查看订单</el-button
  191. >
  192. <!-- <el-button
  193. size="mini"
  194. @click="handleCloseOrder(scope.$index, scope.row)"
  195. v-show="scope.row.status === 0 || scope.row.status === 6"
  196. >关闭订单</el-button
  197. > -->
  198. <el-button
  199. size="mini"
  200. @click="handleDeliveryOrder(scope.$index, scope.row)"
  201. v-show="scope.row.status === 1"
  202. >订单发货</el-button
  203. >
  204. <!-- <el-button
  205. size="mini"
  206. @click="handleViewLogistics(scope.$index, scope.row)"
  207. v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button> -->
  208. <!-- <el-button
  209. size="mini"
  210. type="danger"
  211. @click="handleDeleteOrder(scope.$index, scope.row)"
  212. v-show="scope.row.status === 4"
  213. >删除订单</el-button
  214. > -->
  215. </template>
  216. </el-table-column>
  217. </el-table>
  218. </div>
  219. <!-- <div class="batch-operate-container">
  220. <el-select size="small" v-model="operateType" placeholder="批量操作">
  221. <el-option
  222. v-for="item in operateOptions"
  223. :key="item.value"
  224. :label="item.label"
  225. :value="item.value"
  226. >
  227. </el-option>
  228. </el-select>
  229. <el-button
  230. style="margin-left: 20px"
  231. class="search-button"
  232. @click="handleBatchOperate()"
  233. type="primary"
  234. size="small"
  235. >
  236. 确定
  237. </el-button>
  238. </div> -->
  239. <div class="pagination-container">
  240. <el-pagination
  241. background
  242. @size-change="handleSizeChange"
  243. @current-change="handleCurrentChange"
  244. layout="total, sizes,prev, pager, next,jumper"
  245. :current-page.sync="listQuery.pageNum"
  246. :page-size="listQuery.pageSize"
  247. :page-sizes="[5, 10, 15]"
  248. :total="total"
  249. >
  250. </el-pagination>
  251. </div>
  252. <el-dialog
  253. title="关闭订单"
  254. :visible.sync="closeOrder.dialogVisible"
  255. width="30%"
  256. >
  257. <el-form :model="closeOrder" label-width="150px" ref="closeOrder">
  258. <el-form-item
  259. label="操作备注:"
  260. prop="content"
  261. :rules="[
  262. { required: true, message: '请填写操作备注', trigger: 'blur' },
  263. ]"
  264. >
  265. <el-input v-model="closeOrder.content" type="textarea" rows="3">
  266. </el-input>
  267. </el-form-item>
  268. </el-form>
  269. <!-- <span style="vertical-align: top">操作备注:</span>
  270. <el-input
  271. style="width: 80%"
  272. type="textarea"
  273. :rows="5"
  274. placeholder="请输入内容"
  275. v-model="closeOrder.content"
  276. >
  277. </el-input> -->
  278. <span slot="footer" class="dialog-footer">
  279. <el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
  280. <el-button type="primary" @click="handleCloseOrderConfirm"
  281. >确 定</el-button
  282. >
  283. </span>
  284. </el-dialog>
  285. <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
  286. </div>
  287. </template>
  288. <script>
  289. import { fetchList, closeOrder, deleteOrder } from "@/api/order";
  290. import { formatDate } from "@/utils/date";
  291. import { Export } from "@/utils/downLoadFile";
  292. import dayjs from 'dayjs'
  293. import LogisticsDialog from "@/views/oms/order/components/logisticsDialog";
  294. const defaultListQuery = {
  295. pageNum: 1,
  296. pageSize: 10,
  297. orderSn: null,
  298. receiverKeyword: null,
  299. status: null,
  300. orderType: null,
  301. sourceType: null,
  302. dateRange: [],
  303. createTime: null,
  304. endTime: null,
  305. };
  306. export default {
  307. name: "orderList",
  308. components: { LogisticsDialog },
  309. data() {
  310. return {
  311. listQuery: Object.assign({}, defaultListQuery),
  312. listLoading: true,
  313. list: null,
  314. total: null,
  315. operateType: null,
  316. multipleSelection: [],
  317. closeOrder: {
  318. dialogVisible: false,
  319. content: null,
  320. orderIds: [],
  321. },
  322. statusOptions: [
  323. {
  324. label: "待付款",
  325. value: 0,
  326. },
  327. {
  328. label: "待发货",
  329. value: 1,
  330. },
  331. {
  332. label: "已发货",
  333. value: 2,
  334. },
  335. {
  336. label: "已完成",
  337. value: 3,
  338. },
  339. {
  340. label: "已关闭",
  341. value: 4,
  342. },
  343. ],
  344. orderTypeOptions: [
  345. {
  346. label: "正常订单",
  347. value: 0,
  348. },
  349. {
  350. label: "秒杀订单",
  351. value: 1,
  352. },
  353. ],
  354. sourceTypeOptions: [
  355. {
  356. label: "PC订单",
  357. value: 0,
  358. },
  359. {
  360. label: "APP订单",
  361. value: 1,
  362. },
  363. ],
  364. operateOptions: [
  365. {
  366. label: "批量发货",
  367. value: 1,
  368. },
  369. {
  370. label: "关闭订单",
  371. value: 2,
  372. },
  373. {
  374. label: "删除订单",
  375. value: 3,
  376. },
  377. ],
  378. logisticsDialogVisible: false,
  379. };
  380. },
  381. created() {
  382. this.getList();
  383. // console.log(this.$route)
  384. if (this.$route.params.status + "") {
  385. this.listQuery.status = this.$route.params.status;
  386. }
  387. if(this.$route.query.orderSn){
  388. this.listQuery.orderSn = this.$route.query.orderSn
  389. }
  390. },
  391. filters: {
  392. formatCreateTime(time) {
  393. let date = new Date(time);
  394. return formatDate(date, "yyyy-MM-dd hh:mm:ss");
  395. },
  396. formatPayType(value) {
  397. if (value === 1) {
  398. return "支付宝";
  399. } else if (value === 2) {
  400. return "微信";
  401. } else if (value === 3) {
  402. return "余额";
  403. }else {
  404. return "未支付";
  405. }
  406. },
  407. formatOrderFormType(value) {
  408. if(value === 'MEC') {
  409. return '管乐迷'
  410. }
  411. },
  412. formatSourceType(value) {
  413. // 0->PC订单;1->app订单 2->学校采购 3 个人订单 4 其他订单")
  414. if(value === 0) {
  415. return "PC订单";
  416. } else if (value === 1) {
  417. return "APP订单";
  418. } else if (value === 2) {
  419. return "学校采购";
  420. } else if (value === 3) {
  421. return "个人订单";
  422. } else {
  423. return "其他订单";
  424. }
  425. },
  426. formatStatus(value) {
  427. if (value === 1) {
  428. return "待发货";
  429. } else if (value === 2) {
  430. return "已发货";
  431. } else if (value === 3) {
  432. return "已完成";
  433. } else if (value === 4) {
  434. return "已关闭";
  435. } else if (value === 5) {
  436. return "无效订单";
  437. } else {
  438. return "待付款";
  439. }
  440. },
  441. },
  442. methods: {
  443. handleResetSearch() {
  444. this.listQuery = Object.assign({}, defaultListQuery);
  445. },
  446. handleSearchList() {
  447. this.listQuery.pageNum = 1;
  448. this.getList();
  449. },
  450. handleSelectionChange(val) {
  451. this.multipleSelection = val;
  452. },
  453. handleViewOrder(index, row) {
  454. this.$router.push({ path: "/oms/orderDetail", query: { id: row.id } });
  455. },
  456. handleCloseOrder(index, row) {
  457. this.closeOrder.dialogVisible = true;
  458. this.closeOrder.content = "";
  459. this.closeOrder.orderIds = [row.id];
  460. },
  461. handleDeliveryOrder(index, row) {
  462. let listItem = this.covertOrder(row);
  463. this.$router.push({
  464. path: "/oms/deliverOrderList",
  465. query: { list: [listItem] },
  466. });
  467. },
  468. handleViewLogistics(index, row) {
  469. this.logisticsDialogVisible = true;
  470. },
  471. handleDeleteOrder(index, row) {
  472. let ids = [];
  473. ids.push(row.id);
  474. this.deleteOrder(ids);
  475. },
  476. handleBatchOperate() {
  477. if (this.multipleSelection == null || this.multipleSelection.length < 1) {
  478. this.$message({
  479. message: "请选择要操作的订单",
  480. type: "warning",
  481. duration: 1000,
  482. });
  483. return;
  484. }
  485. if (this.operateType === 1) {
  486. //批量发货
  487. let list = [];
  488. for (let i = 0; i < this.multipleSelection.length; i++) {
  489. if (this.multipleSelection[i].status === 1) {
  490. list.push(this.covertOrder(this.multipleSelection[i]));
  491. }
  492. }
  493. if (list.length === 0) {
  494. this.$message({
  495. message: "选中订单中没有可以发货的订单",
  496. type: "warning",
  497. duration: 1000,
  498. });
  499. return;
  500. }
  501. this.$router.push({
  502. path: "/oms/deliverOrderList",
  503. query: { list: list },
  504. });
  505. } else if (this.operateType === 2) {
  506. //关闭订单
  507. this.closeOrder.orderIds = [];
  508. for (let i = 0; i < this.multipleSelection.length; i++) {
  509. this.closeOrder.orderIds.push(this.multipleSelection[i].id);
  510. }
  511. this.closeOrder.dialogVisible = true;
  512. } else if (this.operateType === 3) {
  513. //删除订单
  514. let ids = [];
  515. for (let i = 0; i < this.multipleSelection.length; i++) {
  516. ids.push(this.multipleSelection[i].id);
  517. }
  518. this.deleteOrder(ids);
  519. }
  520. },
  521. handleSizeChange(val) {
  522. this.listQuery.pageNum = 1;
  523. this.listQuery.pageSize = val;
  524. this.getList();
  525. },
  526. handleCurrentChange(val) {
  527. this.listQuery.pageNum = val;
  528. this.getList();
  529. },
  530. handleCloseOrderConfirm() {
  531. // if (this.closeOrder.content == null || this.closeOrder.content === "") {
  532. // this.$message({
  533. // message: "操作备注不能为空",
  534. // type: "warning",
  535. // duration: 1000,
  536. // });
  537. // return;
  538. // }
  539. this.$refs.closeOrder.validate((valid) => {
  540. if (valid) {
  541. // let params = new URLSearchParams();
  542. // params.append("ids", this.closeOrder.orderIds);
  543. // params.append("note", this.closeOrder.content);
  544. let obj = {
  545. ids:this.closeOrder.orderIds.join(','),
  546. note: this.closeOrder.content
  547. }
  548. closeOrder(obj).then((response) => {
  549. this.closeOrder.orderIds = [];
  550. // this.closeOrder.dialogVisible = false;
  551. (this.closeOrder = {
  552. dialogVisible: false,
  553. content: null,
  554. orderIds: [],
  555. }),
  556. this.getList();
  557. this.$message({
  558. message: "修改成功",
  559. type: "success",
  560. duration: 1000,
  561. });
  562. });
  563. }
  564. });
  565. },
  566. getList() {
  567. this.listLoading = true;
  568. console.log(this.listQuery, 'listQuery')
  569. let { dateRange, createTime, endTime, ...res } = this.listQuery
  570. if(dateRange && dateRange.length > 0) {
  571. createTime = dayjs(dateRange[0]).format('YYYY-MM-DD')
  572. endTime = dayjs(dateRange[1]).format('YYYY-MM-DD')
  573. }
  574. fetchList({
  575. createTime: createTime,
  576. endTime: endTime,
  577. ...res
  578. }).then((response) => {
  579. this.listLoading = false;
  580. this.list = response.data.list;
  581. this.total = response.data.total;
  582. });
  583. },
  584. deleteOrder(ids) {
  585. this.$confirm("是否要进行该删除操作?", "提示", {
  586. confirmButtonText: "确定",
  587. cancelButtonText: "取消",
  588. type: "warning",
  589. }).then(() => {
  590. // let params = new URLSearchParams();
  591. // params.append("ids", ids);
  592. let obj = {
  593. ids:ids.join(',')
  594. }
  595. deleteOrder(obj).then((response) => {
  596. this.$message({
  597. message: "删除成功!",
  598. type: "success",
  599. duration: 1000,
  600. });
  601. this.getList();
  602. });
  603. });
  604. },
  605. covertOrder(order) {
  606. let address =
  607. order.receiverProvince +
  608. order.receiverCity +
  609. order.receiverRegion +
  610. order.receiverDetailAddress;
  611. let listItem = {
  612. orderId: order.id,
  613. orderSn: order.orderSn,
  614. receiverName: order.receiverName,
  615. receiverPhone: order.receiverPhone,
  616. receiverPostCode: order.receiverPostCode,
  617. address: address,
  618. deliveryCompany: null,
  619. deliverySn: null,
  620. };
  621. return listItem;
  622. },
  623. onExport() {
  624. Export(
  625. this,
  626. {
  627. url: "/api-mall-admin/export/orderDetail",
  628. fileName: "订单列表.xls",
  629. method: "post",
  630. params: { ...this.listQuery },
  631. },
  632. "您确定导出订单列表?"
  633. );
  634. },
  635. },
  636. };
  637. </script>
  638. <style scoped>
  639. .input-width {
  640. width: 203px;
  641. }
  642. </style>