index.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <div id="index">
  3. <el-row>
  4. <el-col
  5. :span="24"
  6. class="main animate__animated animate__backInRight"
  7. v-loading="loadings"
  8. element-loading-text="拼命加载中"
  9. element-loading-spinner="el-icon-loading"
  10. >
  11. <span v-show="view === 'list'">
  12. <el-col :span="24" style="margin: 0 0 10px 0">
  13. <el-col :span="2"><el-button type="primary" size="mini" @click="toBack()">返回</el-button></el-col>
  14. </el-col>
  15. <el-col :span="24" class="one"> <span>订单管理</span> </el-col>
  16. <el-col :span="24" class="four">
  17. <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
  18. <el-tab-pane name="1" label="待付款"> </el-tab-pane>
  19. <el-tab-pane name="2" label="待发货"> </el-tab-pane>
  20. <el-tab-pane name="3" label="待收货"> </el-tab-pane>
  21. <el-tab-pane name="4" label="已收货"> </el-tab-pane>
  22. <el-tab-pane name="5" label="取消订单"> </el-tab-pane>
  23. <!-- 待发货 -->
  24. <el-col :span="24" v-if="activeName == '2'">
  25. <card-2 :statusList="statusList" @toDetails="toDetail_t" @toSaless="toSaless_t"></card-2>
  26. </el-col>
  27. <el-col :span="24" v-else-if="activeName != '2'">
  28. <el-col :span="24" class="one">
  29. <search-1
  30. :form="searchForm"
  31. :shopList="shopList"
  32. :goodsList="goodsList"
  33. @onSubmit="toSearch"
  34. @querySearch="querySearch"
  35. @toReset="toClose"
  36. @goodsSearch="goodsSearch"
  37. >
  38. </search-1>
  39. </el-col>
  40. <data-table ref="dataTable" :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @detail="toDetails" @sales="toSaless">
  41. <template #is_afterSale="{ row }">
  42. <span :style="{ color: row.is_afterSale === true ? 'red' : '' }">
  43. {{ row.is_afterSale === true ? '该订单有商品申请售后' : '未申请售后' }}
  44. </span>
  45. </template>
  46. </data-table>
  47. </el-col>
  48. </el-tabs>
  49. </el-col>
  50. </span>
  51. <group_order v-if="view === 'card_detail'" :id="order_id" @toBack="toBack"></group_order>
  52. <group_sales v-else-if="view === 'card_sales'" :id="sales_id" :status="status" @toBack="toBack"></group_sales>
  53. </el-col>
  54. </el-row>
  55. </div>
  56. </template>
  57. <script>
  58. const _ = require('lodash');
  59. import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
  60. const { mapActions: dictData } = createNamespacedHelpers('dictData');
  61. const { mapActions: shop } = createNamespacedHelpers('shop');
  62. const { mapActions: goods } = createNamespacedHelpers('goods');
  63. const { mapActions } = createNamespacedHelpers('groupOrder');
  64. export default {
  65. name: 'index',
  66. props: {},
  67. components: {
  68. card2: () => import('@/components/orderParts/card/card-4.vue'),
  69. group_order: () => import('@/components/orderParts/detail/group_order.vue'),
  70. group_sales: () => import('@/components/orderParts/detail/group_sales.vue'),
  71. search1: () => import('@/components/orderParts/search/search-3.vue'),
  72. },
  73. data: function () {
  74. return {
  75. loadings: true,
  76. view: 'list',
  77. activeName: '2',
  78. // 类型列表
  79. statusList: [],
  80. // 店铺列表
  81. shopList: [],
  82. // 商品列表
  83. goodsList: [],
  84. // 规格列表
  85. // specList: [],
  86. order_id: '',
  87. sales_id: '',
  88. status: '',
  89. searchForm: {},
  90. list: [],
  91. total: 0,
  92. opera: [
  93. { label: '详情', method: 'detail' },
  94. { label: '售后', method: 'sales', type: 'danger', display: (i) => this.activeName == '1' || this.activeName == '3' || this.activeName == '4' },
  95. ],
  96. fields: [
  97. { label: '订单号', model: 'no', showTip: false },
  98. { label: '下单时间', model: 'buy_time' },
  99. { label: '顾客', model: 'customer' },
  100. { label: '收货人', model: 'address', showTip: false, format: (i) => this.getAddress(i) },
  101. { label: '商品名称', model: 'goods' },
  102. { label: '规格名称', model: 'spec' },
  103. { label: '支付金额', model: 'pay' },
  104. { label: '购买数量', model: 'num' },
  105. { label: '是否售后', model: 'is_afterSale', format: (i) => (i === true ? '该订单有商品申请售后' : '未申请售后'), custom: true },
  106. ],
  107. // 查询条件
  108. searchQuery: {},
  109. };
  110. },
  111. async created() {
  112. await this.searchOther();
  113. await this.search();
  114. },
  115. methods: {
  116. ...dictData({ dictQuery: 'query' }),
  117. ...shop({ shopQuery: 'query' }),
  118. ...goods({ goodsQuery: 'query' }),
  119. ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
  120. toSearch() {
  121. this.$refs.dataTable.resetPage();
  122. let res = this.$refs.dataTable.getPageConfig();
  123. this.search(res);
  124. },
  125. // 查询
  126. async search({ skip = 0, limit = this.$limit, ...info } = {}) {
  127. let condition = _.cloneDeep(this.searchForm);
  128. if (condition.buy_time) {
  129. condition[`buy_time@start`] = _.head(condition.buy_time);
  130. condition[`buy_time@end`] = _.last(condition.buy_time);
  131. delete condition.buy_time;
  132. }
  133. if (this.$route.query.source_id) {
  134. let data = { _id: this.source_id };
  135. this.toDetails({ data });
  136. }
  137. if (this.activeName == '1') info.status = '0';
  138. else if (this.activeName == '2') info.status = '1';
  139. else if (this.activeName == '3') info.status = '2';
  140. else if (this.activeName == '4') info.status = '3';
  141. else if (this.activeName == '5') info.status = '-1';
  142. let query = { skip, limit, ...info };
  143. if (Object.keys(condition).length > 0) query = { ...query, ...condition };
  144. let res = await this.query(query);
  145. if (this.$checkRes(res)) {
  146. this.$set(this, 'list', res.data);
  147. this.$set(this, 'total', res.total);
  148. this.$set(this, `searchQuery`, query);
  149. }
  150. this.loadings = false;
  151. },
  152. // 待收货,已收货
  153. toDetails({ data }) {
  154. this.$set(this, `order_id`, data._id);
  155. this.$set(this, `view`, 'card_detail');
  156. },
  157. toSaless({ data }) {
  158. this.$set(this, `sales_id`, data._id);
  159. this.$set(this, `status`, data.status);
  160. this.$set(this, `view`, 'card_sales');
  161. },
  162. // 待发货
  163. toDetail_t(data) {
  164. this.$set(this, `order_id`, data);
  165. this.$set(this, `view`, 'card_detail');
  166. },
  167. toSaless_t(data) {
  168. this.$set(this, `sales_id`, data.id);
  169. this.$set(this, `status`, data.status);
  170. this.$set(this, `view`, 'card_sales');
  171. },
  172. handleClick(tab) {
  173. this.loadings = true;
  174. this.search();
  175. },
  176. toBack() {
  177. if (this.$route.query.source_id) window.history.go('-1');
  178. else this.view = 'list';
  179. },
  180. getAddress(i) {
  181. let name = i.name + ',' + i.phone;
  182. return name;
  183. },
  184. // 店铺名称
  185. getShopName(i) {
  186. let shopname = i.map((e) => e.shop_name);
  187. return shopname.join(',');
  188. },
  189. // 重置
  190. toClose() {
  191. this.searchForm = {};
  192. this.search();
  193. },
  194. // 店铺名称远程查询
  195. async querySearch(value) {
  196. let res = await this.shopQuery({ name: value });
  197. if (this.$checkRes(res)) this.$set(this, 'shopList', res.data);
  198. },
  199. //商品名称远程查询
  200. async goodsSearch(value) {
  201. let res = await this.goodsQuery({ name: value });
  202. if (this.$checkRes(res)) this.$set(this, 'goodsList', res.data);
  203. },
  204. // 查询其他信息
  205. async searchOther() {
  206. let res;
  207. // 类型
  208. res = await this.dictQuery({ code: 'order_process' });
  209. if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
  210. },
  211. },
  212. computed: {
  213. ...mapState(['user']),
  214. source_id() {
  215. return this.$route.query.source_id;
  216. },
  217. },
  218. metaInfo() {
  219. return { title: this.$route.meta.title };
  220. },
  221. watch: {
  222. test: {
  223. deep: true,
  224. immediate: true,
  225. handler(val) {},
  226. },
  227. },
  228. };
  229. </script>
  230. <style lang="less" scoped>
  231. .main {
  232. .one {
  233. margin: 0 0 10px 0;
  234. span:nth-child(1) {
  235. font-size: 20px;
  236. font-weight: 700;
  237. margin-right: 10px;
  238. }
  239. }
  240. .two {
  241. margin: 0 0 10px 0;
  242. }
  243. .thr {
  244. margin: 0 0 10px 0;
  245. }
  246. }
  247. .el-col {
  248. margin: 10px 0;
  249. }
  250. </style>