list.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. <template>
  2. <a-spin :spinning="spinning" tip="Loading...">
  3. <div class="productInfoList-wrap">
  4. <div ref="tableSearch" class="table-page-search-wrapper newTableSearchName">
  5. <a-form-model layout="inline" ref="ruleForm" :rules="rules" :model="newQueryParam">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-model-item label="销售审核日期" prop="salesDate">
  9. <rangeDate ref="rangeDate" :value="newQueryParam.salesDate" @change="salesDateChange" />
  10. </a-form-model-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <!-- :disabledDate="disabledDate" -->
  14. <a-form-model-item label="促销时间">
  15. <a-range-picker
  16. style="width:100%"
  17. v-model="time"
  18. :format="dateFormat"
  19. :placeholder="['开始时间', '结束时间']"
  20. @change="dateChange"></a-range-picker>
  21. </a-form-model-item>
  22. </a-col>
  23. <a-col :md="6" :sm="24">
  24. <a-form-model-item label="促销名称">
  25. <a-input
  26. id="promotionSalesRealTimeReport-title"
  27. v-model.trim="newQueryParam.promoRuleReport.title"
  28. allowClear
  29. placeholder="请输入促销名称" />
  30. </a-form-model-item>
  31. </a-col>
  32. <template v-if="advanced">
  33. <a-col :md="6" :sm="24">
  34. <a-form-model-item label="促销类型">
  35. <v-select
  36. v-model="newQueryParam.promoRuleReport.promotionRuleType"
  37. ref="ruleType"
  38. id="promotionSalesRealTimeReport-ruleType"
  39. code="PROMOTION_RULE_TYPE"
  40. placeholder="请选择促销类型"
  41. allowClear></v-select>
  42. </a-form-model-item>
  43. </a-col>
  44. <a-col :md="6" :sm="24">
  45. <a-form-model-item label="规则">
  46. <a-input
  47. id="promotionSalesRealTimeReport-description"
  48. v-model.trim="newQueryParam.promoRuleReport.description"
  49. allowClear
  50. placeholder="请输入规则关键字" />
  51. </a-form-model-item>
  52. </a-col>
  53. <a-col :md="6" :sm="24">
  54. <a-form-model-item label="销售单号">
  55. <a-input
  56. id="promotionSalesRealTimeReport-salesBillNo"
  57. v-model.trim="newQueryParam.salesBillNo"
  58. allowClear
  59. placeholder="请输入销售单号" />
  60. </a-form-model-item>
  61. </a-col>
  62. <a-col :md="6" :sm="24">
  63. <a-form-model-item label="客户级别">
  64. <v-select
  65. v-model="newQueryParam.buyerLevel"
  66. ref="buyerLevel"
  67. id="promotionSalesRealTimeReport-buyerLevel"
  68. code="DEALER_LEVEL"
  69. placeholder="请选择客户级别"
  70. allowClear></v-select>
  71. </a-form-model-item>
  72. </a-col>
  73. <a-col :md="6" :sm="24">
  74. <a-form-model-item label="客户名称">
  75. <a-input
  76. id="promotionSalesRealTimeReport-buyerName"
  77. v-model.trim="newQueryParam.buyerName"
  78. allowClear
  79. placeholder="请输入客户名称" />
  80. </a-form-model-item>
  81. </a-col>
  82. <a-col :md="6" :sm="24">
  83. <a-form-model-item label="所在区域">
  84. <subarea ref="subarea" id="promotionSalesRealTimeReport-subarea" @change="subareaChange"></subarea>
  85. </a-form-model-item>
  86. </a-col>
  87. <a-col :md="6" :sm="24">
  88. <a-form-model-item label="地区">
  89. <AreaList id="promotionSalesRealTimeReport-areaList" changeOnSelect ref="areaList" @change="areaChange" defValKey="id"></AreaList>
  90. </a-form-model-item>
  91. </a-col>
  92. </template>
  93. <a-col :md="6" :sm="24">
  94. <span class="table-page-search-submitButtons">
  95. <a-button type="primary" :disabled="disabled" @click="testForm('search')">查询</a-button>
  96. <a-button style="margin-left: 8px" :disabled="disabled" @click="resetSearchForm">重置</a-button>
  97. <a-button
  98. style="margin-left: 10px"
  99. type="primary"
  100. class="button-warning"
  101. @click="testForm('export')"
  102. :disabled="disabled"
  103. :loading="exportLoading"
  104. v-if="$hasPermissions('B_promotionSalesExport')">导出</a-button>
  105. <a @click="advanced=!advanced" style="margin-left: 8px">
  106. {{ advanced ? '收起' : '展开' }}
  107. <a-icon :type="advanced ? 'up' : 'down'" />
  108. </a>
  109. </span>
  110. </a-col>
  111. </a-row>
  112. </a-form-model>
  113. </div>
  114. <!-- 列表 -->
  115. <s-table
  116. class="sTable"
  117. ref="table"
  118. size="small"
  119. :rowKey="(record) => record.no"
  120. rowKeyName="no"
  121. :columns="columns"
  122. :data="loadData"
  123. :style="{ height: tableHeight+84.5+'px' }"
  124. :scroll="{ y: tableHeight-40,x:1890}"
  125. :defaultLoadData="false"
  126. bordered>
  127. <!-- 促销时间 -->
  128. <template slot="promotionTime" slot-scope="text, record">
  129. <span>{{ record.promotion.promotionDateStart }}-{{ record.promotion.promotionDateEnd }}</span>
  130. </template>
  131. <!-- 地区 -->
  132. <template slot="addressInfo" slot-scope="text, record">
  133. <span>{{ record.provinceName }}{{ record.cityName?'/'+record.cityName:'' }}{{ record.districtName?'/'+record.districtName :'' }}</span>
  134. </template>
  135. <template slot="footer">
  136. <a-row>
  137. <a-col span="24">
  138. <a-row>
  139. <a-col
  140. span="3">实时数量(非促):{{ (totalData && (totalData.notGiftQty || totalData.notGiftQty==0)) ? totalData.notGiftQty : '--' }}</a-col>
  141. <a-col
  142. span="3">实时数量(促):{{ (totalData && (totalData.giftQty || totalData.giftQty==0)) ? toThousands(totalData.giftQty) : '--' }}</a-col>
  143. <a-col
  144. span="3">实时实售金额:{{ (totalData && (totalData.totalRealAmount || totalData.totalRealAmount==0)) ?totalData.totalRealAmount : '--' }}</a-col>
  145. <a-col
  146. span="3">实时开单金额:{{ (totalData && (totalData.totalAmount || totalData.totalAmount==0)) ? toThousands(totalData.totalAmount) : '--' }}</a-col>
  147. <a-col
  148. span="3">实时成本金额:{{ (totalData && (totalData.totalRealCost || totalData.totalRealCost==0)) ? totalData.totalRealCost : '--' }}</a-col>
  149. <a-col
  150. span="4">实时损失费用(成本):{{ (totalData && (totalData.lossCost || totalData.lossCost==0)) ? toThousands(totalData.lossCost) : '--' }}</a-col>
  151. <a-col
  152. span="5">实时损失费用(开单):{{ (totalData && (totalData.lossAmount || totalData.lossAmount==0)) ? toThousands(totalData.lossAmount) : '--' }}</a-col>
  153. </a-row>
  154. </a-col>
  155. </a-row>
  156. </template>
  157. </s-table>
  158. </div>
  159. </a-spin>
  160. </template>
  161. <script>
  162. import {
  163. commonMixin
  164. } from '@/utils/mixin'
  165. import {
  166. salesPromoRealReportList,
  167. salesPromoRealReportCount,
  168. exportSalesPromoRealReport
  169. } from '@/api/reportData'
  170. import {
  171. hdExportExcel
  172. } from '@/libs/exportExcel'
  173. import {
  174. STable,
  175. VSelect
  176. } from '@/components'
  177. import reportModal from '@/views/common/reportModal.vue'
  178. import rangeDate from '@/views/common/rangeDate.vue'
  179. import subarea from '@/views/common/subarea.js'
  180. import AreaList from '@/views/common/areaList.js'
  181. import getDate from '@/libs/getDate.js'
  182. export default {
  183. name: 'QueryPart',
  184. mixins: [commonMixin],
  185. components: {
  186. STable,
  187. VSelect,
  188. reportModal,
  189. AreaList,
  190. rangeDate,
  191. subarea
  192. },
  193. data () {
  194. const _this = this
  195. return {
  196. advanced: true, // 高级搜索 展开/关闭
  197. time: undefined,
  198. spinning: false,
  199. disabled: false,
  200. tableHeight: 0,
  201. newQueryParam: { // 查询条件
  202. salesDate: [
  203. getDate.getCurrMonthDays().starttime,
  204. getDate.getCurrMonthDays().endtime
  205. ],
  206. beginAuditDate: getDate.getCurrMonthDays().starttime, // 审核开始时间
  207. endAuditDate: getDate.getCurrMonthDays().endtime, // 审核结束时间
  208. promoRuleReport: {
  209. promotionDateStart: undefined, // 促销时间-开始
  210. promotionDateEnd: undefined, // 促销时间-结束
  211. title: '', // 促销名称
  212. promotionRuleType: undefined, // 促销类型
  213. description: '' // 规则
  214. },
  215. salesBillNo: '', // 销售单号
  216. buyerLevel: undefined, // 客户级别
  217. buyerName: '', // 客户名称
  218. subareaArea: {
  219. subareaSn: '',
  220. subareaAreaSn: ''
  221. },
  222. dealerProvinceSn: undefined, // 省份编码
  223. dealerCitySn: undefined, // 城市编码
  224. dealerDistrictSn: undefined // 区域编码
  225. },
  226. rules: {
  227. salesDate: [{
  228. required: true,
  229. message: '请选择销售审核日期',
  230. trigger: 'change'
  231. }]
  232. },
  233. dateFormat: 'YYYY-MM-DD',
  234. totalData: null, // 合计
  235. exportLoading: false,
  236. showExport: false,
  237. columns: [{
  238. title: '促销名称',
  239. dataIndex: 'promotion.title',
  240. width: '160px',
  241. align: 'center',
  242. customRender: function (text) {
  243. return text || '--'
  244. },
  245. fixed: 'left',
  246. ellipsis: true
  247. },
  248. {
  249. title: '促销时间',
  250. scopedSlots: {
  251. customRender: 'promotionTime'
  252. },
  253. width: '130px',
  254. align: 'center',
  255. fixed: 'left'
  256. },
  257. {
  258. title: '费用所属部门',
  259. dataIndex: 'departmentName',
  260. width: '180px',
  261. align: 'center',
  262. customRender: function (text) {
  263. return text || '--'
  264. },
  265. ellipsis: true,
  266. fixed: 'left'
  267. },
  268. {
  269. title: '促销类型',
  270. dataIndex: 'promotionRule.promotionRuleTypeDictValue',
  271. width: '100px',
  272. align: 'center',
  273. customRender: function (text) {
  274. return text || '--'
  275. },
  276. fixed: 'left'
  277. },
  278. {
  279. title: '规则',
  280. dataIndex: 'promotionRule.description',
  281. width: '160px',
  282. align: 'center',
  283. customRender: function (text) {
  284. return text || '--'
  285. },
  286. fixed: 'left'
  287. },
  288. {
  289. title: '销售单号',
  290. dataIndex: 'salesBillNo',
  291. width: '120px',
  292. align: 'center',
  293. customRender: function (text) {
  294. return text || '--'
  295. },
  296. fixed: 'left'
  297. },
  298. {
  299. title: '区域',
  300. dataIndex: 'subareaArea.subareaName',
  301. width: '80px',
  302. align: 'center',
  303. customRender: function (text) {
  304. return text || '--'
  305. }
  306. },
  307. {
  308. title: '分区',
  309. dataIndex: 'subareaArea.subareaAreaName',
  310. width: '80px',
  311. align: 'center',
  312. customRender: function (text) {
  313. return text || '--'
  314. }
  315. },
  316. {
  317. title: '地区',
  318. dataIndex: 'provinceName',
  319. width: '160px',
  320. align: 'center',
  321. scopedSlots: { customRender: 'addressInfo' }
  322. },
  323. {
  324. title: '客户名称',
  325. dataIndex: 'buyerName',
  326. width: '100px',
  327. align: 'center',
  328. customRender: function (text) {
  329. return text || '--'
  330. },
  331. ellipsis: true
  332. },
  333. {
  334. title: '客户级别',
  335. dataIndex: 'buyerLevelDictValue',
  336. width: '80px',
  337. align: 'center',
  338. customRender: function (text) {
  339. return text || '--'
  340. }
  341. },
  342. {
  343. title: '销售审核日期',
  344. dataIndex: 'auditDate',
  345. width: '120px',
  346. align: 'center',
  347. customRender: function (text) {
  348. return text || '--'
  349. }
  350. },
  351. {
  352. title: '实时数量(非促)',
  353. dataIndex: 'notGiftQty',
  354. width: '100px',
  355. align: 'center',
  356. customRender: function (text) {
  357. return ((text || text == 0) ? text : '--')
  358. }
  359. },
  360. {
  361. title: '实时数量(促)',
  362. dataIndex: 'giftQty',
  363. width: '100px',
  364. align: 'center',
  365. customRender: function (text) {
  366. return ((text || text == 0) ? text : '--')
  367. }
  368. },
  369. {
  370. title: '实时实售金额',
  371. dataIndex: 'totalRealAmount',
  372. width: '100px',
  373. align: 'center',
  374. customRender: function (text) {
  375. return ((text || text == 0) ? _this.toThousands(text) : '--')
  376. }
  377. },
  378. {
  379. title: '实时开单金额',
  380. dataIndex: 'totalAmount',
  381. width: '100px',
  382. align: 'center',
  383. customRender: function (text) {
  384. return ((text || text == 0) ? _this.toThousands(text) : '--')
  385. }
  386. },
  387. {
  388. title: '实时成本金额',
  389. dataIndex: 'totalRealCost',
  390. width: '100px',
  391. align: 'center',
  392. customRender: function (text) {
  393. return ((text || text == 0) ? _this.toThousands(text) : '--')
  394. }
  395. },
  396. {
  397. title: '实时损失成本',
  398. dataIndex: 'lossCost',
  399. width: '100px',
  400. align: 'center',
  401. customRender: function (text) {
  402. return ((text || text == 0) ? _this.toThousands(text) : '--')
  403. }
  404. },
  405. {
  406. title: '实时损失费用',
  407. dataIndex: 'lossAmount',
  408. width: '100px',
  409. align: 'center',
  410. customRender: function (text) {
  411. return ((text || text == 0) ? _this.toThousands(text) : '--')
  412. }
  413. }
  414. ],
  415. // 加载数据方法 必须为 Promise 对象
  416. loadData: parameter => {
  417. this.spinning = true
  418. this.disabled = true
  419. const params = Object.assign(parameter, this.newQueryParam)
  420. return salesPromoRealReportList(params).then(res => {
  421. let data
  422. if (res.status == 200) {
  423. data = res.data
  424. for (var i = 0; i < data.length; i++) {
  425. data[i].no = i + 1
  426. }
  427. this.disabled = false
  428. }
  429. this.spinning = false
  430. return data
  431. })
  432. }
  433. }
  434. },
  435. watch: {
  436. advanced (newValue, oldValue) {
  437. const _this = this
  438. this.$nextTick(() => { // 页面渲染完成后的回调
  439. _this.setTableH()
  440. })
  441. },
  442. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  443. this.setTableH()
  444. }
  445. },
  446. methods: {
  447. salesDateChange (date) {
  448. if (date[0] && date[1]) {
  449. this.newQueryParam.salesDate = date
  450. } else {
  451. this.newQueryParam.salesDate = []
  452. }
  453. this.newQueryParam.beginAuditDate = date[0] || ''
  454. this.newQueryParam.endAuditDate = date[1] || ''
  455. },
  456. areaChange (val) {
  457. this.newQueryParam.dealerProvinceSn = val[0] ? val[0] : ''
  458. this.newQueryParam.dealerCitySn = val[1] ? val[1] : ''
  459. this.newQueryParam.dealerDistrictSn = val[2] ? val[2] : ''
  460. },
  461. dateChange (date, dateString) {
  462. this.time = date
  463. if (dateString[0] != '' && dateString[1] != '') {
  464. this.newQueryParam.promoRuleReport.promotionDateStart = dateString[0] + ' 00:00:00'
  465. this.newQueryParam.promoRuleReport.promotionDateEnd = dateString[1] + ' 23:59:59'
  466. }
  467. },
  468. subareaChange (val) {
  469. this.newQueryParam.subareaArea.subareaSn = val[0] ? val[0] : undefined
  470. this.newQueryParam.subareaArea.subareaAreaSn = val[1] ? val[1] : undefined
  471. },
  472. // 查询
  473. testForm (type) {
  474. const _this = this
  475. if (!_this.newQueryParam.salesDate && (!_this.newQueryParam.salesDate[0] || !_this.newQueryParam.salesDate[1])) {
  476. _this.$message.error('请选择销售审核日期')
  477. return
  478. }
  479. _this.$refs.ruleForm.validate(valid => {
  480. if (valid) {
  481. if (type == 'search') {
  482. _this.resetCurForm()
  483. } else {
  484. _this.handleExport()
  485. }
  486. } else {
  487. _this.$message.error('请选择销售审核日期')
  488. return false
  489. }
  490. })
  491. },
  492. // 统计
  493. getCount (params) {
  494. salesPromoRealReportCount(params).then(res => {
  495. if (res.status == 200) {
  496. this.totalData = res.data
  497. } else {
  498. this.totalData = null
  499. }
  500. })
  501. },
  502. // 刷新当前页面
  503. resetCurForm () {
  504. const params = JSON.parse(JSON.stringify(this.newQueryParam))
  505. delete params.salesDate
  506. this.$nextTick(() => {
  507. this.getCount(params)
  508. this.$refs.table.refresh()
  509. })
  510. },
  511. // 导出
  512. handleExport () {
  513. const _this = this
  514. const params = this.newQueryParam
  515. _this.exportLoading = true
  516. _this.spinning = true
  517. hdExportExcel(exportSalesPromoRealReport, params, '促销销售单实时报表导出', function () {
  518. _this.exportLoading = false
  519. _this.spinning = false
  520. _this.showExport = true
  521. })
  522. },
  523. resetSearchForm () {
  524. this.$refs.ruleForm.resetFields()
  525. this.newQueryParam = {
  526. beginAuditDate: getDate.getCurrMonthDays().starttime, // 审核开始时间
  527. endAuditDate: getDate.getCurrMonthDays().endtime, // 审核结束时间
  528. promoRuleReport: {
  529. promotionDateStart: undefined, // 促销时间-开始
  530. promotionDateEnd: undefined, // 促销时间-结束
  531. title: '', // 促销名称
  532. promotionRuleType: undefined, // 促销类型
  533. description: '' // 规则
  534. },
  535. salesBillNo: '', // 销售单号
  536. buyerLevel: undefined, // 客户级别
  537. buyerName: '', // 客户名称
  538. subareaArea: {
  539. subareaSn: '',
  540. subareaAreaSn: ''
  541. },
  542. dealerProvinceSn: undefined, // 省份编码
  543. dealerCitySn: undefined, // 城市编码
  544. dealerDistrictSn: undefined // 区域编码
  545. }
  546. this.$set(this.newQueryParam, 'salesDate', [
  547. getDate.getCurrMonthDays().starttime,
  548. getDate.getCurrMonthDays().endtime
  549. ])
  550. this.time = undefined
  551. this.$refs.subarea.clearData()
  552. this.$refs.areaList.clearData()
  553. this.$refs.rangeDate.resetDate(this.newQueryParam.salesDate)
  554. this.$refs.table.clearTable()
  555. },
  556. pageInit () {
  557. const _this = this
  558. this.$nextTick(() => { // 页面渲染完成后的回调
  559. _this.setTableH()
  560. })
  561. },
  562. setTableH () {
  563. const tableSearchH = this.$refs.tableSearch.offsetHeight
  564. this.tableHeight = window.innerHeight - tableSearchH - 260
  565. }
  566. },
  567. mounted () {
  568. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  569. this.pageInit()
  570. }
  571. },
  572. activated () {
  573. // 如果是新页签打开,则重置当前页面
  574. if (this.$store.state.app.isNewTab) {
  575. this.pageInit()
  576. }
  577. }
  578. }
  579. </script>
  580. <style lang="less" scoped>
  581. .productInfoList-wrap {
  582. .ellipsisCon {
  583. display: flex;
  584. justify-content: space-between;
  585. align-items: center;
  586. .ellipsisText {
  587. width: 100%;
  588. overflow: hidden;
  589. text-overflow: ellipsis;
  590. display: box;
  591. display: -webkit-box;
  592. -webkit-line-clamp: 1;
  593. -webkit-box-orient: vertical;
  594. }
  595. }
  596. }
  597. </style>