main.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <el-dialog width="840px" :visible.sync="dialogVisible" :append-to-body="false" :modal-append-to-body="false"
  3. :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @closed="handleClose"
  4. class="order-picker">
  5. <div class="order-picker__body">
  6. <div class="order-picker__filter">
  7. <div class="filter-item">
  8. <el-input v-model="searchParams.sn" clearable placeholder="输入订单编号" style="width: 160px" />
  9. </div>
  10. <div class="filter-item">
  11. <el-button type="primary" @click="handleSearch">搜索 </el-button>
  12. </div>
  13. </div>
  14. <el-table ref="orderTable" v-loading="loading" :data="orderData.data" border row-key="order_id"
  15. @selection-change="handleSelectionChange" @row-click="handleRowClick" :row-class-name="rowClassName" max-height="400" style="width: 100%; min-height: 400px">
  16. <el-table-column v-if="limit === 1" label="选择" width="55" align="center">
  17. <template slot-scope="scope">
  18. <el-radio v-model="radioGuide" :label="scope.row"
  19. >&nbsp;</el-radio>
  20. </template>
  21. </el-table-column>
  22. <el-table-column v-else type="selection" label="选择" width="55" :selectable="checkDisable" reserve-selection
  23. align="center" />
  24. <el-table-column v-for="column in columns" v-if="column.prop !== 'create_time'" :key="column.label" align="center"
  25. v-bind="column" />
  26. <el-table-column v-for="column in columns" v-if="column.prop === 'create_time'" :key="column.label" align="center"
  27. v-bind="column">
  28. <template slot-scope="scope">{{ scope.row.create_time | unixToDate }}</template>
  29. </el-table-column>
  30. </el-table>
  31. <div class="order-picker__tools">
  32. <div class="tools">
  33. </div>
  34. <el-pagination v-if="orderData.data_total" background :page-sizes="[10, 30, 50, 100]"
  35. :total="orderData.data_total" layout="total, sizes, prev, next, pager, jumper" @size-change="handleSizeChange"
  36. @current-change="handleCurrentChange" />
  37. </div>
  38. </div>
  39. <span slot="footer" class="dialog-footer">
  40. <el-button @click="handleCancel">取 消</el-button>
  41. <el-button type="primary" @click="handleConfirm">确 定</el-button>
  42. </span>
  43. </el-dialog>
  44. </template>
  45. <script>
  46. import * as DefaultOptions from './defaultOptions'
  47. import request from '@/utils/request'
  48. export default {
  49. name: 'EnPickerOrder',
  50. props: {
  51. ...DefaultOptions.props
  52. },
  53. data() {
  54. return {
  55. ...DefaultOptions.data,
  56. dialogVisible: false,
  57. selected: [],
  58. radioGuide: '',
  59. orderParams: {
  60. page_no: 1,
  61. page_size: 10,
  62. },
  63. searchParams: {
  64. orderSn: ''
  65. },
  66. orderData: {
  67. data: [],
  68. data_total: 0
  69. },
  70. // 加载订单列表
  71. loading: false
  72. }
  73. },
  74. mounted() {
  75. this.getGoodsList()
  76. },
  77. watch: {
  78. show: {
  79. immediate: true,
  80. handler(newVal) {
  81. this.$nextTick(() => {
  82. this.dialogVisible = newVal
  83. })
  84. }
  85. }
  86. },
  87. methods: {
  88. checkDisable(row, index) {
  89. return this.selectedIds.some(v => v === row.order_id) ? 0 : 1
  90. },
  91. isDisabledSku(row) {
  92. return this.selectedIds.some(v => v === row.order_id) ? 1 : 0
  93. },
  94. rowClassName({ row }) {
  95. return this.isDisabledSku(row) ? 'hide' : ''
  96. },
  97. // 关闭
  98. handleClose() {
  99. this.$nextTick(this.close)
  100. this.dialogVisible = false
  101. this.$emit('closed')
  102. },
  103. // 取消
  104. handleCancel() {
  105. this.dialogVisible = false
  106. this.$emit('cancel')
  107. typeof this.reject === 'function' && this.reject('取消了')
  108. },
  109. // 确认
  110. handleConfirm() {
  111. if (this.limit === 1) {
  112. if (!this.radioGuide) return this.$message.error('请选择订单')
  113. } else {
  114. if (!this.selected.length) return this.$message.error('请选择订单')
  115. }
  116. this.dialogVisible = false
  117. let orders = this.limit === 1 ? [this.radioGuide] : this.selected
  118. orders = JSON.parse(JSON.stringify(orders))
  119. this.$emit('confirm', orders)
  120. typeof this.resolve === 'function' && this.resolve(orders)
  121. this.$emit('close')
  122. },
  123. // 选择
  124. handleSelectionChange(val) {
  125. this.selected = val
  126. },
  127. // 分页大小发生改变
  128. handleSizeChange(size) {
  129. this.orderParams.page_size = size
  130. this.getGoodsList()
  131. },
  132. // 当前页数发生改版
  133. handleCurrentChange(current) {
  134. this.orderParams.page_no = current
  135. this.getGoodsList()
  136. },
  137. // 搜索
  138. handleSearch() {
  139. this.orderParams.page_no = 1
  140. this.orderParams = {
  141. ...this.orderParams,
  142. ...this.searchParams
  143. }
  144. this.getGoodsList()
  145. },
  146. // 点击了某行
  147. handleRowClick(row) {
  148. if (this.isDisabledSku(row)) return
  149. if (this.limit === 1) {
  150. this.radioGuide = row
  151. } else {
  152. this.$refs.orderTable.toggleRowSelection(row)
  153. }
  154. },
  155. // 获取订单列表
  156. async getGoodsList() {
  157. this.loading = true
  158. const params = JSON.parse(JSON.stringify(this.orderParams))
  159. request({
  160. url: this.orderApi,
  161. method: 'get',
  162. loading: false,
  163. params: {
  164. ...params,
  165. ...this.orderApiParams,
  166. }
  167. }).then(response => {
  168. /* const list=response.data.map(el=>{
  169. if(el.status!=='SALE_AFTER_END'&&el.status!=='SALE_AFTER_CANCEL'){
  170. console.log(el);
  171. return el
  172. }
  173. }) */
  174. const fruits = response.data
  175. .filter(item => item.status!=='SALE_AFTER_END')
  176. .map(fruit => {
  177. return { ...fruit}; // 假设水果价格翻倍
  178. });
  179. console.log(fruits);
  180. this.loading = false
  181. this.orderData = response
  182. this.orderData.data=fruits
  183. })
  184. }
  185. }
  186. }
  187. </script>
  188. <style lang="scss" scoped>
  189. .order-picker {
  190. clear: both;
  191. .order-picker__filter {
  192. float: right;
  193. }
  194. /deep/ {
  195. .el-dialog__body {
  196. padding-top: 20px;
  197. padding-bottom: 20px;
  198. }
  199. .el-dialog__header {
  200. padding: 9px 20px 10px;
  201. border-bottom: 1px solid #e5e5e5;
  202. text-shadow: 0 1px 0 #fff;
  203. background-color: #efefef;
  204. }
  205. .el-dialog__footer {
  206. border-top: solid 1px #e5e5e5;
  207. background: #f5f5f5;
  208. }
  209. .el-table .el-table__body-wrapper .el-table__row {
  210. cursor: pointer;
  211. }
  212. .el-table__row.hide {
  213. td:is([rowspan="1"]) {
  214. background-color: #f2f2f2 !important;
  215. }
  216. }
  217. }
  218. &__filter {
  219. display: flex;
  220. align-items: center;
  221. background-color: #fff;
  222. border-right: none;
  223. position: relative;
  224. margin-bottom: 10px;
  225. .filter-item {
  226. display: flex;
  227. align-items: center;
  228. }
  229. .filter-item+.filter-item {
  230. margin-left: 10px;
  231. }
  232. .filter-item:last-child {
  233. flex: 1;
  234. margin-left: 20px;
  235. /deep/ .el-button {
  236. width: 100%;
  237. max-width: 120px;
  238. font-weight: bold;
  239. }
  240. }
  241. }
  242. &__body {
  243. max-height: 650px;
  244. overflow: hidden auto;
  245. }
  246. &__tools {
  247. display: flex;
  248. align-items: center;
  249. justify-content: space-between;
  250. margin-top: 10px;
  251. .tools {
  252. display: flex;
  253. }
  254. }
  255. }
  256. </style>