list.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  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="10">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="下单时间">
  10. <rangeDate style="width: 100%;" ref="orderDate" :value="orderTime" @change="orderDateChange" />
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-model-item label="货架名称" prop="shelfSn">
  15. <shelfSList style="width: 100%;" v-model="queryParam.shelfSn"></shelfSList>
  16. </a-form-model-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="8" :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-model></div>
  85. <div class="table-operator" v-if="statisticsObj">
  86. <a-alert type="info">
  87. <div slot="message" class="total-bar">
  88. <div>
  89. 货架数量:<strong>{{ statisticsObj.shelfCount }}</strong>;
  90. 铺货数量合计:<strong>{{ statisticsObj.totalShelfMaxQty }}</strong>;
  91. 铺货金额合计:<strong>{{ statisticsObj&&(statisticsObj.totalShelfMaxCost||statisticsObj.totalShelfMaxCost==0)?toThousands(statisticsObj.totalShelfMaxCost,2):'--' }}</strong>;
  92. 货架取货数量合计:<strong>{{ statisticsObj.totalOrderQty }}</strong>;
  93. 货架取货金额合计:<strong>{{ statisticsObj&&(statisticsObj.totalOrderAmount||statisticsObj.totalOrderAmount==0)?toThousands(statisticsObj.totalOrderAmount,2):'--' }}</strong>;
  94. </div>
  95. <div>
  96. 急送数量合计:<strong>{{ statisticsObj.tempOrderQty }}</strong>;
  97. 急送金额合计:<strong>{{ statisticsObj&&(statisticsObj.tempOrderAmount||statisticsObj.tempOrderAmount==0)?toThousands(statisticsObj.tempOrderAmount,2):'--' }}</strong>;
  98. 销售数量合计:<strong>{{ statisticsObj.saleOrderQty }}</strong>;
  99. 销售金额合计:<strong>{{ statisticsObj&&(statisticsObj.saleOrderAmount||statisticsObj.saleOrderAmount==0)?toThousands(statisticsObj.saleOrderAmount,2) :'--' }}</strong>;
  100. </div>
  101. </div>
  102. </a-alert>
  103. </div>
  104. <s-table
  105. class="sTable fixPagination"
  106. ref="table"
  107. :style="{ height: tableHeight+84.5+'px', wordBreak: 'break-all' }"
  108. size="small"
  109. :rowKey="(record)=>record.shelfSn"
  110. rowKeyName="shelfSn"
  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. toThousands,
  143. spinning: false,
  144. // advanced: false,
  145. tableHeight: 0,
  146. time: [],
  147. orderTime: [],
  148. // 查询参数
  149. queryParam: {
  150. shelfSn: undefined,
  151. beginDate: '',
  152. endDate: ''
  153. // qhslMin: undefined,
  154. // qhslMax: undefined,
  155. // xsslMin: undefined,
  156. // xsslMax: undefined
  157. },
  158. exportLoading: false,
  159. showModal: false,
  160. itemData: null, // 编辑行数据
  161. openStatusModal: false, // 货架状态弹窗初始状态
  162. statisticsObj: null,
  163. // 表头
  164. columns: [
  165. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  166. { title: '货架名称', dataIndex: 'shelfName', width: '30%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  167. {
  168. slots: { title: 'customTitle' },
  169. children: [
  170. { title: '铺货数量', dataIndex: 'totalShelfMaxQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  171. { title: '铺货金额', dataIndex: 'totalShelfMaxCost', width: '8%', align: 'right', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  172. ]
  173. },
  174. {
  175. title: '货架订单',
  176. children: [
  177. { title: '取货数量', dataIndex: 'totalOrderQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  178. { title: '取货金额', dataIndex: 'totalOrderAmount', width: '8%', align: 'right', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  179. ]
  180. },
  181. {
  182. title: '急送订单',
  183. children: [
  184. { title: '急送数量', dataIndex: 'tempOrderQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  185. { title: '急送金额', dataIndex: 'tempOrderAmount', width: '8%', align: 'right', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  186. ]
  187. },
  188. {
  189. title: '销售单',
  190. children: [
  191. { title: '销售数量', dataIndex: 'saleOrderQty', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  192. { title: '销售金额', dataIndex: 'saleOrderAmount', width: '8%', align: 'right', customRender: function (text) { return (text || text == 0) ? toThousands(text, 2) : '--' } }
  193. ]
  194. }
  195. ],
  196. rules: {
  197. 'shelfSn': [{ required: true, message: '请选择货架', trigger: 'change' }]
  198. },
  199. // 加载数据方法 必须为 Promise 对象
  200. loadData: parameter => {
  201. this.spinning = true
  202. return queryShelfOrderReportPage(Object.assign(parameter, this.queryParam)).then(res => {
  203. let data
  204. if (res.status == 200) {
  205. data = res.data
  206. const no = (data.pageNo - 1) * data.pageSize
  207. for (let i = 0; i < data.list.length; i++) {
  208. const _item = data.list[i]
  209. _item.no = no + i + 1
  210. }
  211. }
  212. this.getStatistics(this.queryParam)
  213. this.spinning = false
  214. return data
  215. })
  216. }
  217. }
  218. },
  219. methods: {
  220. handleBack () {
  221. this.$router.go(-1)
  222. },
  223. // 下单时间 change
  224. orderDateChange (date) {
  225. this.queryParam.beginDate = date[0]
  226. this.queryParam.endDate = date[1]
  227. },
  228. // 重置
  229. reset () {
  230. this.queryParam = {
  231. shelfSn: undefined,
  232. beginDate: '',
  233. endDate: ''
  234. // qhslMin: undefined,
  235. // qhslMax: undefined,
  236. // xsslMin: undefined,
  237. // xsslMax: undefined
  238. }
  239. this.$refs.orderDate.resetDate()
  240. this.$refs.table.refresh(true)
  241. },
  242. pageInit () {
  243. const _this = this
  244. this.$nextTick(() => { // 页面渲染完成后的回调
  245. _this.setTableH()
  246. })
  247. },
  248. setTableH () {
  249. const tableSearchH = this.$refs.tableSearch.offsetHeight
  250. this.tableHeight = window.innerHeight - tableSearchH - 250
  251. },
  252. getStatistics (ajaxData) { // 统计
  253. queryShelfOrderTotalReport(ajaxData).then(res => {
  254. if (res.status == 200) {
  255. this.statisticsObj = res.data
  256. } else {
  257. this.$message.error(res.message)
  258. }
  259. })
  260. },
  261. // 导出
  262. handleExport () {
  263. const _this = this
  264. const params = _this.queryParam
  265. _this.exportLoading = true
  266. _this.spinning = true
  267. exportShelfOrderReport(params).then(res => {
  268. downloadExcel(res, '客户分析表')
  269. _this.exportLoading = false
  270. _this.spinning = false
  271. })
  272. }
  273. },
  274. watch: {
  275. // advanced (newValue, oldValue) {
  276. // const _this = this
  277. // this.$nextTick(() => { // 页面渲染完成后的回调
  278. // _this.setTableH()
  279. // })
  280. // },
  281. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  282. this.setTableH()
  283. }
  284. },
  285. mounted () {
  286. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  287. this.pageInit()
  288. this.reset()
  289. }
  290. },
  291. activated () {
  292. // 如果是新页签打开,则重置当前页面
  293. if (this.$store.state.app.isNewTab) {
  294. this.pageInit()
  295. this.reset()
  296. }
  297. }
  298. }
  299. </script>
  300. <style lang="less">
  301. .userd-baseInfo{
  302. .userd-back{
  303. margin-bottom: 6px;
  304. }
  305. }
  306. .ant-select{
  307. max-width: 300px !important;
  308. }
  309. </style>