order-list.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!-- 订单 -->
  2. <template>
  3. <div class="order-list" >
  4. <div class="my-title" v-if="!detailVisible">订单追溯</div>
  5. <div v-show="!detailVisible">
  6. <template>
  7. <el-table
  8. :data="dataList"
  9. border
  10. v-loading="dataListLoading"
  11. @selection-change="selectionChangeHandle"
  12. style="width: 100%;">
  13. <el-table-column
  14. label="序号"
  15. type="index"
  16. width="50"
  17. align="center">
  18. </el-table-column>
  19. <el-table-column
  20. prop="orderCode"
  21. header-align="center"
  22. align="center"
  23. min-width="180"
  24. :show-tooltip-when-overflow="true"
  25. label="订单编码">
  26. </el-table-column>
  27. <el-table-column
  28. prop="customerName"
  29. header-align="center"
  30. align="center"
  31. min-width="180"
  32. :show-overflow-tooltip="true"
  33. label="客户名称">
  34. </el-table-column>
  35. <el-table-column
  36. prop="cusOrderCode"
  37. header-align="center"
  38. align="center"
  39. min-width="120"
  40. :show-tooltip-when-overflow="true"
  41. label="客户订单编号">
  42. </el-table-column>
  43. <el-table-column
  44. prop="createTime"
  45. header-align="center"
  46. align="center"
  47. min-width="160"
  48. label="下单时间">
  49. </el-table-column>
  50. <el-table-column
  51. prop="contactDate"
  52. header-align="center"
  53. align="center"
  54. min-width="160"
  55. label="合同交期">
  56. </el-table-column>
  57. <!-- <el-table-column
  58. prop="-"
  59. header-align="center"
  60. align="center"
  61. :formatter="formatState"
  62. label="审批状态">
  63. </el-table-column> -->
  64. <el-table-column
  65. prop="-"
  66. header-align="center"
  67. align="center"
  68. :formatter="formatOrderState"
  69. label="当前状态">
  70. </el-table-column>
  71. <el-table-column
  72. prop="notes"
  73. header-align="center"
  74. align="center"
  75. min-width="180"
  76. :show-overflow-tooltip="true"
  77. label="备注">
  78. </el-table-column>
  79. <el-table-column
  80. fixed="right"
  81. header-align="center"
  82. align="center"
  83. width="120"
  84. label="操作">
  85. <template slot-scope="scope">
  86. <el-button type="text" v-if="isAuth('trace:search:order:detail')" size="small" @click="detailHandle(scope.row.orderId)">查看</el-button>
  87. <!-- <el-button v-if="isAuth('order:ctl:deliver') && Number(scope.row.orderState) === 3" type="text" size="small" @click="deliverHandle(scope.row.orderId)">发货</el-button>-->
  88. <!-- <el-button v-if="isAuth('order:ctl:arrived') && Number(scope.row.orderState) === 4 " type="text" size="small" @click="arrivedHandle(scope.row)">送达</el-button>-->
  89. </template>
  90. </el-table-column>
  91. </el-table>
  92. <el-pagination
  93. @size-change="sizeChangeHandle"
  94. @current-change="currentChangeHandle"
  95. :current-page="pageIndex"
  96. :page-sizes="[10, 20, 50, 100]"
  97. :page-size="pageSize"
  98. :total="totalPage"
  99. layout="total, sizes, prev, pager, next, jumper">
  100. </el-pagination>
  101. <span slot="footer" class="dialog-footer">
  102. <el-button @click="onChose">返回</el-button>
  103. </span>
  104. </template>
  105. </div>
  106. <!-- 弹窗, 新增 / 修改 -->
  107. <detail v-if="detailVisible" ref="detail" @onChose="onChildClose"/>
  108. </div>
  109. </template>
  110. <script>
  111. import Detail from './order-detail'
  112. import { getOrderByCode } from '@/api/trace'
  113. export default {
  114. name: 'order-list',
  115. components: {
  116. Detail
  117. },
  118. props: {
  119. // 默认第一页的数据
  120. defaultList: {
  121. type: Array,
  122. default: []
  123. },
  124. // 订单编码
  125. orderCode: {
  126. type: String,
  127. default: ''
  128. },
  129. defaultTotalPage: {
  130. type: [Number, String],
  131. default: 0
  132. }
  133. },
  134. created () {
  135. },
  136. data () {
  137. return {
  138. detailVisible: false,
  139. arrivedVisible: false,
  140. dataList: this.defaultList,
  141. pageIndex: 1,
  142. pageSize: 10,
  143. totalPage: Number(this.defaultTotalPage),
  144. dataListLoading: false,
  145. dataListSelections: [],
  146. optionsOrderState: [
  147. {
  148. code: '1', value: '未开始'
  149. },
  150. {
  151. code: '2', value: '进行中'
  152. },
  153. {
  154. code: '3', value: '已完成'
  155. },
  156. {
  157. code: '4', value: '已发货'
  158. },
  159. {
  160. code: '5', value: '已送达'
  161. }
  162. ],
  163. optionsCustomer: []
  164. }
  165. },
  166. methods: {
  167. onChose () {
  168. this.$emit('onChose')
  169. },
  170. onChildClose () {
  171. this.detailVisible = false
  172. },
  173. // 查询
  174. queryData () {
  175. this.pageIndex = 1
  176. this.getDataList()
  177. },
  178. // 获取数据列表
  179. getDataList () {
  180. this.dataListLoading = true
  181. let params = {
  182. 'current': this.pageIndex,
  183. 'size': this.pageSize,
  184. 'orderCode': this.orderCode
  185. }
  186. console.log(params)
  187. getOrderByCode(params).then(({data}) => {
  188. if (data && data.code === '200') {
  189. this.dataList = data.data.records
  190. this.totalPage = Number(data.data.total)
  191. } else {
  192. this.dataList = []
  193. this.totalPage = 0
  194. }
  195. this.dataListLoading = false
  196. })
  197. },
  198. // 每页数
  199. sizeChangeHandle (val) {
  200. this.pageSize = val
  201. this.pageIndex = 1
  202. this.getDataList()
  203. },
  204. // 当前页
  205. currentChangeHandle (val) {
  206. this.pageIndex = val
  207. this.getDataList()
  208. },
  209. // 多选
  210. selectionChangeHandle (val) {
  211. this.dataListSelections = val
  212. },
  213. // 转换属性“订单状态”
  214. formatOrderState (row) {
  215. if (!row.orderState) return ''
  216. const item1 = this.optionsOrderState.find((item) => item.code === row.orderState.toString())
  217. return item1 ? item1.value : ''
  218. },
  219. // 详情
  220. detailHandle (id) {
  221. this.detailVisible = true
  222. this.$nextTick(() => {
  223. this.$refs.detail.init(id)
  224. })
  225. }
  226. }
  227. }
  228. </script>
  229. <style scoped>
  230. </style>