list.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <div class="userd-baseInfo">
  3. <a-card size="small" :bordered="false">
  4. <a-spin :spinning="spinning" tip="Loading...">
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form-model layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-model-item label="货架名称" prop="shelfSn">
  10. <shelfSList v-model="queryParam.shelfSn"></shelfSList>
  11. </a-form-model-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="下单时间">
  15. <rangeDate ref="orderDate" :value="orderTime" @change="orderDateChange" />
  16. </a-form-item>
  17. </a-col>
  18. <!-- <a-col :md="6" :sm="24">
  19. <a-form-item label="货架取货数量">
  20. <a-input-group compact>
  21. <a-input-number
  22. :precision="0"
  23. style=" width: 42%; text-align: center"
  24. v-model.trim="queryParam.qhslMin"
  25. allowClear
  26. placeholder="请输入最小值"/>
  27. <a-input
  28. style=" width: 16%; pointer-events: none; backgroundColor: #fff"
  29. placeholder="~"
  30. disabled
  31. />
  32. <a-input-number
  33. :precision="0"
  34. :min="queryParam.qhslMin"
  35. style=" width: 42%; text-align: center"
  36. v-model.trim="queryParam.qhslMax"
  37. allowClear
  38. placeholder="请输入最大值"/>
  39. </a-input-group>
  40. </a-form-item>
  41. </a-col>
  42. <template v-if="advanced">
  43. <a-col :md="6" :sm="24">
  44. <a-form-item label="销售数量">
  45. <a-input-group compact>
  46. <a-input-number
  47. :precision="0"
  48. style=" width: 42%; text-align: center"
  49. v-model.trim="queryParam.xsslMin"
  50. allowClear
  51. placeholder="请输入最小值"/>
  52. <a-input
  53. style=" width: 16%; pointer-events: none; backgroundColor: #fff"
  54. placeholder="~"
  55. disabled
  56. />
  57. <a-input-number
  58. :precision="0"
  59. :min="queryParam.xsslMin"
  60. style=" width: 42%; text-align: center"
  61. v-model.trim="queryParam.xsslMax"
  62. allowClear
  63. placeholder="请输入最大值"/>
  64. </a-input-group>
  65. </a-form-item>
  66. </a-col>
  67. </template> -->
  68. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  69. <a-button type="primary" @click="$refs.table.refresh(true)" id="userd-refresh">查询</a-button>
  70. <a-button type="" @click="reset" style="margin-left: 10px;" id="userd-reset">重置</a-button>
  71. <a-button
  72. type="primary"
  73. @click="handleExport"
  74. :loading="exportLoading"
  75. class="button-warning"
  76. style="margin-left: 10px;"
  77. id="vinAnaly-export-btn">导出</a-button>
  78. <!-- <a @click="advanced=!advanced" style="margin-left: 8px">
  79. {{ advanced ? '收起' : '展开' }}
  80. <a-icon :type="advanced ? 'up' : 'down'"/>
  81. </a> -->
  82. </a-col>
  83. </a-row>
  84. </a-form>
  85. </a-form-model></div>
  86. <div class="table-operator" v-if="statisticsObj">
  87. <a-alert type="info">
  88. <div slot="message" class="total-bar">
  89. <div>
  90. 货架数量:<strong>{{ statisticsObj.shelfCount }}</strong>;
  91. 铺货数量合计:<strong>{{ statisticsObj.totalShelfMaxQty }}</strong>;
  92. 铺货金额合计:<strong>{{ statisticsObj.totalShelfMaxCost }}</strong>;
  93. 货架取货数量合计:<strong>{{ statisticsObj.totalOrderQty }}</strong>;
  94. 货架取货金额合计:<strong>{{ statisticsObj.totalOrderAmount }}</strong>;
  95. </div>
  96. <div>
  97. 急送数量合计:<strong>{{ statisticsObj.tempOrderQty }}</strong>;
  98. 急送金额合计:<strong>{{ statisticsObj.tempOrderAmount }}</strong>;
  99. 销售数量合计:<strong>{{ statisticsObj.saleOrderQty }}</strong>;
  100. 销售金额合计:<strong>{{ statisticsObj.saleOrderAmount }}</strong>;
  101. </div>
  102. </div>
  103. </a-alert>
  104. </div>
  105. <s-table
  106. class="sTable fixPagination"
  107. ref="table"
  108. :style="{ height: tableHeight+84.5+'px', wordBreak: 'break-all' }"
  109. size="small"
  110. rowKey="id"
  111. :columns="columns"
  112. :data="loadData"
  113. :scroll="{ y: tableHeight }"
  114. :defaultLoadData="false"
  115. bordered>
  116. <span slot="customTitle">
  117. <a-popover>
  118. <template slot="content">
  119. 货架铺货情况为实时数据,<br>与查询条件查询中的下单时间无关
  120. </template>
  121. <a-icon type="question-circle" theme="twoTone" />
  122. </a-popover>
  123. 货架铺货情况
  124. </span>
  125. </s-table>
  126. </a-spin>
  127. </a-card>
  128. </div>
  129. </template>
  130. <script>
  131. import { STable, VSelect } from '@/components'
  132. import rangeDate from '@/views/common/rangeDate.vue'
  133. import shelfSList from '@/views/common/shelfList'
  134. import { toThousands } from '@/libs/tools.js'
  135. import { downloadExcel } from '@/libs/JGPrint.js'
  136. import { queryShelfOrderReportPage, queryShelfOrderTotalReport, exportShelfOrderReport } from '@/api/shelf'
  137. export default {
  138. name: 'UserList',
  139. components: { STable, VSelect, rangeDate, shelfSList },
  140. data () {
  141. return {
  142. spinning: false,
  143. // advanced: false,
  144. tableHeight: 0,
  145. time: [],
  146. orderTime: [],
  147. // 查询参数
  148. queryParam: {
  149. shelfSn: undefined,
  150. beginDate: '',
  151. endDate: ''
  152. // qhslMin: undefined,
  153. // qhslMax: undefined,
  154. // xsslMin: undefined,
  155. // xsslMax: undefined
  156. },
  157. exportLoading: false,
  158. showModal: false,
  159. itemData: null, // 编辑行数据
  160. openStatusModal: false, // 货架状态弹窗初始状态
  161. statisticsObj: null,
  162. // 表头
  163. columns: [
  164. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  165. { title: '货架名称', dataIndex: 'shelfName', width: '30%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  166. {
  167. slots: { title: 'customTitle' },
  168. children: [
  169. { title: '铺货数量', dataIndex: 'totalShelfMaxQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  170. { title: '铺货金额', dataIndex: 'totalShelfMaxCost', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  171. ]
  172. },
  173. {
  174. title: '货架订单',
  175. children: [
  176. { title: '取货数量', dataIndex: 'totalOrderQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  177. { title: '取货金额', dataIndex: 'totalOrderAmount', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  178. ]
  179. },
  180. {
  181. title: '急送订单',
  182. children: [
  183. { title: '急送数量', dataIndex: 'tempOrderQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  184. { title: '急送金额', dataIndex: 'tempOrderAmount', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  185. ]
  186. },
  187. {
  188. title: '销售单',
  189. children: [
  190. { title: '销售数量', dataIndex: 'saleOrderQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  191. { title: '销售金额', dataIndex: 'saleOrderAmount', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  192. ]
  193. }
  194. ],
  195. rules: {
  196. 'shelfSn': [{ required: true, message: '请选择货架', trigger: 'change' }]
  197. },
  198. // 加载数据方法 必须为 Promise 对象
  199. loadData: parameter => {
  200. this.spinning = true
  201. return queryShelfOrderReportPage(Object.assign(parameter, this.queryParam)).then(res => {
  202. let data
  203. if (res.status == 200) {
  204. data = res.data
  205. const no = (data.pageNo - 1) * data.pageSize
  206. for (let i = 0; i < data.list.length; i++) {
  207. const _item = data.list[i]
  208. _item.no = no + i + 1
  209. }
  210. }
  211. this.getStatistics(this.queryParam)
  212. this.spinning = false
  213. return data
  214. })
  215. }
  216. }
  217. },
  218. methods: {
  219. handleBack () {
  220. this.$router.go(-1)
  221. },
  222. // 下单时间 change
  223. orderDateChange (date) {
  224. this.queryParam.beginDate = date[0]
  225. this.queryParam.endDate = date[1]
  226. },
  227. // 重置
  228. reset () {
  229. this.queryParam = {
  230. shelfSn: undefined,
  231. beginDate: '',
  232. endDate: ''
  233. // qhslMin: undefined,
  234. // qhslMax: undefined,
  235. // xsslMin: undefined,
  236. // xsslMax: undefined
  237. }
  238. this.$refs.orderDate.resetDate()
  239. this.$refs.table.refresh(true)
  240. },
  241. pageInit () {
  242. const _this = this
  243. this.$nextTick(() => { // 页面渲染完成后的回调
  244. _this.setTableH()
  245. })
  246. },
  247. setTableH () {
  248. const tableSearchH = this.$refs.tableSearch.offsetHeight
  249. this.tableHeight = window.innerHeight - tableSearchH - 250
  250. },
  251. getStatistics (ajaxData) { // 统计
  252. queryShelfOrderTotalReport(ajaxData).then(res => {
  253. if (res.status == 200) {
  254. this.statisticsObj = res.data
  255. } else {
  256. this.$message.error(res.message)
  257. }
  258. })
  259. },
  260. // 导出
  261. handleExport () {
  262. const _this = this
  263. const params = _this.queryParam
  264. _this.exportLoading = true
  265. _this.spinning = true
  266. exportShelfOrderReport(params).then(res => {
  267. downloadExcel(res, '客户分析表')
  268. _this.exportLoading = false
  269. _this.spinning = false
  270. })
  271. }
  272. },
  273. watch: {
  274. // advanced (newValue, oldValue) {
  275. // const _this = this
  276. // this.$nextTick(() => { // 页面渲染完成后的回调
  277. // _this.setTableH()
  278. // })
  279. // },
  280. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  281. this.setTableH()
  282. }
  283. },
  284. mounted () {
  285. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  286. this.pageInit()
  287. this.reset()
  288. }
  289. },
  290. activated () {
  291. // 如果是新页签打开,则重置当前页面
  292. if (this.$store.state.app.isNewTab) {
  293. this.pageInit()
  294. this.reset()
  295. }
  296. }
  297. }
  298. </script>
  299. <style lang="less">
  300. .userd-baseInfo{
  301. .userd-back{
  302. margin-bottom: 6px;
  303. }
  304. }
  305. .ant-select{
  306. max-width: 300px !important;
  307. }
  308. </style>