list.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <template>
  2. <a-card size="small" :bordered="false" class="shortageStatisticsCList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form-model
  6. id="priceDifferenceDetailReport-form"
  7. layout="inline"
  8. ref="ruleForm"
  9. :model="queryParam"
  10. :rules="rules"
  11. @keyup.enter.native="$refs.table.refresh(true)">
  12. <a-row :gutter="15">
  13. <a-col :md="6" :sm="24">
  14. <a-form-model-item label="日期" prop="time">
  15. <rangeDate ref="rangeDate" :value="queryParam.time" @change="dateChange" />
  16. </a-form-model-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-form-model-item label="单号">
  20. <a-input placeholder="请输入单号" />
  21. </a-form-model-item>
  22. </a-col>
  23. <a-col :md="6" :sm="24">
  24. <a-form-model-item label="客户名称">
  25. <custList ref="custList" id="shortageStatisticsCList-buyerSn" @change="custChange"></custList>
  26. </a-form-model-item>
  27. </a-col>
  28. <template v-if="advanced">
  29. <a-col :md="6" :sm="24">
  30. <a-form-model-item label="客户类型">
  31. <custList ref="custList" id="shortageStatisticsCList-buyerSn" @change="custChange"></custList>
  32. </a-form-model-item>
  33. </a-col>
  34. <a-col :md="6" :sm="24">
  35. <a-form-model-item label="品牌类别">
  36. <a-select placeholder="选择品牌类别">
  37. </a-select>
  38. </a-form-model-item>
  39. </a-col>
  40. <a-col :md="6" :sm="24">
  41. <a-form-model-item label="产品品牌">
  42. <ProductBrand id="productInfoList-productBrandSn" v-model="queryParam.brandSn"></ProductBrand>
  43. </a-form-model-item>
  44. </a-col>
  45. <a-col :md="6" :sm="24">
  46. <a-form-model-item label="二级品类">
  47. <ProductType id="productInfoList-productType" v-model="productType" @change="changeProductType"></ProductType>
  48. </a-form-model-item>
  49. </a-col>
  50. <a-col :md="6" :sm="24">
  51. <a-form-model-item label="所在区域">
  52. <subarea id="shortageStatisticsCList-subarea" v-model="queryParam.subareaSn"></subarea>
  53. </a-form-model-item>
  54. </a-col>
  55. <a-col :md="6" :sm="24">
  56. <a-form-model-item label="省级区域" prop="provinceSn">
  57. <a-select id="supplierInfoEdit-provinceSn" @change="getCityList" v-model="queryParam.provinceSn" placeholder="请选择省">
  58. <a-select-option v-for="item in addrProvinceList" :value="item.areaSn" :key="item.areaSn + 'a'">{{ item.name }}</a-select-option>
  59. </a-select>
  60. </a-form-model-item>
  61. </a-col>
  62. <a-col :md="6" :sm="24">
  63. <a-form-model-item label="类型">
  64. <subarea id="shortageStatisticsCList-subarea" v-model="queryParam.subareaSn"></subarea>
  65. </a-form-model-item>
  66. </a-col>
  67. <a-col :md="6" :sm="24">
  68. <a-form-model-item label="">
  69. <a-checkbox>
  70. 盘点区间日期
  71. </a-checkbox>
  72. </a-form-model-item>
  73. </a-col>
  74. </template>
  75. <a-col :md="6" :sm="24">
  76. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="shortageStatisticsCList-refresh">查询</a-button>
  77. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="shortageStatisticsCList-reset">重置</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>
  85. </div>
  86. <!-- 列表 -->
  87. <s-table
  88. class="sTable"
  89. ref="table"
  90. size="small"
  91. :rowKey="(record) => record.id"
  92. :columns="columns"
  93. :data="loadData"
  94. :scroll="{ x: 2250, y: tableHeight }"
  95. bordered>
  96. <template slot="footer" slot-scope="currentPageData">
  97. <a-row :gutter="15">
  98. <a-col :md="4" :sm="24">
  99. 分公司金额:11175.40
  100. </a-col>
  101. <a-col :md="4" :sm="24">
  102. 加盟商金额:12182.40
  103. </a-col>
  104. <a-col :md="4" :sm="24">
  105. 特约加盟店金额:--
  106. </a-col>
  107. <a-col :md="4" :sm="24">
  108. 直接差价金额:1007.00
  109. </a-col>
  110. <a-col :md="4" :sm="24">
  111. 间接差价金额:0
  112. </a-col>
  113. </a-row>
  114. </template>
  115. </s-table>
  116. </a-card>
  117. </template>
  118. <script>
  119. import moment from 'moment'
  120. import getDate from '@/libs/getDate.js'
  121. import { STable, VSelect } from '@/components'
  122. import rangeDate from '@/views/common/rangeDate.vue'
  123. import custList from '@/views/common/custList.vue'
  124. import subarea from '@/views/common/subarea.js'
  125. import { getArea } from '@/api/data'
  126. import ProductBrand from '@/views/common/productBrand.js'
  127. import ProductType from '@/views/common/productType.js'
  128. // import { oosBuyerList, oosBuyerDetailCount, oosBuyerDetailPageCount, oosDetailExport } from '@/api/oos'
  129. export default {
  130. components: { STable, VSelect, custList, subarea, rangeDate, ProductBrand, ProductType },
  131. data () {
  132. return {
  133. advanced: false, // 高级搜索 展开/关闭
  134. tableHeight: 0,
  135. queryParam: { // 查询条件
  136. time: [
  137. getDate.getCurrMonthDays().starttime,
  138. getDate.getCurrMonthDays().endtime
  139. ],
  140. beginDate: getDate.getCurrMonthDays().starttime,
  141. endDate: getDate.getCurrMonthDays().endtime,
  142. buyerSn: undefined,
  143. subareaSn: undefined, // 区域
  144. provinceSn: undefined,
  145. citySn: undefined,
  146. districtSn: undefined
  147. },
  148. rules: {
  149. 'time': [{ required: true, message: '请选择销售日期', trigger: 'change' }]
  150. },
  151. disabled: false, // 查询、重置按钮是否可操作
  152. exportLoading: false, // 导出loading
  153. addrProvinceList: [], // 省下拉
  154. addrCityList: [], // 市下拉
  155. addrDistrictList: [], // 区下拉
  156. columns: [
  157. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  158. { title: '区域',
  159. dataIndex: 'area',
  160. width: 150,
  161. align: 'center',
  162. customRender: function (text) { return text || '--' }
  163. },
  164. { title: '订单号',
  165. dataIndex: 'orderNo',
  166. width: 150,
  167. align: 'center',
  168. customRender: function (text) { return text || '--' }
  169. },
  170. { title: '日期',
  171. dataIndex: 'creatDate',
  172. width: 200,
  173. align: 'center',
  174. customRender: function (text) { return text || '--' }
  175. },
  176. { title: '省份',
  177. dataIndex: 'provinceName',
  178. width: 100,
  179. align: 'center',
  180. customRender: function (text) { return text || '--' }
  181. },
  182. { title: '直接绑定客户名称',
  183. dataIndex: 'zjCustName',
  184. width: 200,
  185. align: 'center',
  186. customRender: function (text) { return text || '--' }
  187. },
  188. { title: '间接绑定客户名称',
  189. dataIndex: 'djCustName',
  190. width: 200,
  191. align: 'center',
  192. customRender: function (text) { return text || '--' }
  193. },
  194. { title: '客户名称',
  195. dataIndex: 'custName',
  196. width: 200,
  197. align: 'center',
  198. customRender: function (text) { return text || '--' }
  199. },
  200. { title: '客户类型',
  201. dataIndex: 'custType',
  202. width: 150,
  203. align: 'center',
  204. customRender: function (text) { return text || '--' }
  205. },
  206. { title: '品牌',
  207. dataIndex: 'brand',
  208. width: 100,
  209. align: 'center',
  210. customRender: function (text) { return text || '--' }
  211. },
  212. { title: '二级分类',
  213. dataIndex: 'proCls',
  214. width: 100,
  215. align: 'center',
  216. customRender: function (text) { return text || '--' }
  217. },
  218. { title: '数量',
  219. dataIndex: 'nums',
  220. width: 100,
  221. align: 'center',
  222. customRender: function (text) { return text || '--' }
  223. },
  224. { title: '分公司金额', width: 100, dataIndex: 'p1', align: 'center', customRender: function (text) { return text ? ('¥' + text) : '--' } },
  225. { title: '加盟商金额', width: 100, dataIndex: 'p2', align: 'center', customRender: function (text) { return text ? ('¥' + text) : '--' } },
  226. { title: '特约加盟商金额', width: 100, dataIndex: 'p3', align: 'center', customRender: function (text) { return text ? ('¥' + text) : '--' } },
  227. { title: '直接差价', width: 100, dataIndex: 'p4', align: 'center', customRender: function (text) { return text ? ('¥' + text) : '--' } },
  228. { title: '间接差价', width: 100, dataIndex: 'p5', align: 'center', customRender: function (text) { return text ? ('¥' + text) : '--' } },
  229. { title: '类型', width: 100, dataIndex: 'type', align: 'center', customRender: function (text) { return text || '--' } }
  230. ],
  231. // 加载数据方法 必须为 Promise 对象
  232. loadData: parameter => {
  233. // this.disabled = true
  234. // if (this.tableHeight == 0) {
  235. // this.tableHeight = window.innerHeight - 380
  236. // }
  237. // const paramsPage = Object.assign(this.queryParam, { pageNo: parameter.pageNo, pageSize: parameter.pageSize }) // 有分页
  238. // const params = Object.assign(parameter, this.queryParam) // 无分页
  239. // return oosBuyerList(params).then(res => {
  240. // const data = res.data
  241. // const no = (data.pageNo - 1) * data.pageSize
  242. // for (var i = 0; i < data.list.length; i++) {
  243. // data.list[i].no = no + i + 1
  244. // }
  245. // this.disabled = false
  246. // return data
  247. // })
  248. const _this = this
  249. return new Promise(function (resolve, reject) {
  250. const data = {
  251. pageNo: 1,
  252. pageSize: 10,
  253. list: [
  254. {
  255. area: 'A区',
  256. orderNo: 'XS2106210000118',
  257. creatDate: '2021/6/21 19:16:18',
  258. provinceName: '浙江省',
  259. zjCustName: '剪冠汽配杭州金球店',
  260. djCustName: '',
  261. custName: '剪冠汽配丽水龙泉店',
  262. custType: '市级加盟商',
  263. brand: '箭牌',
  264. proCls: '滤清器',
  265. nums: '100',
  266. p1: '700.00',
  267. p2: '780.00',
  268. p3: '',
  269. p4: '80.00',
  270. p5: '0.00',
  271. type: '采购差价'
  272. },
  273. {
  274. area: 'B区/04区',
  275. orderNo: 'XS2106210000168',
  276. creatDate: '2021/6/21 16:23:06',
  277. provinceName: '广西区',
  278. zjCustName: '剪冠汽配南宁兴宁店',
  279. djCustName: '',
  280. custName: '剪冠汽配梧州万秀店',
  281. custType: '市级加盟商',
  282. brand: '冠牌',
  283. proCls: '滤清器',
  284. nums: '44',
  285. p1: '362.00',
  286. p2: '406.00',
  287. p3: '',
  288. p4: '44.00',
  289. p5: '0.00',
  290. type: '采购差价'
  291. },
  292. {
  293. area: 'B区/04区',
  294. orderNo: 'XS2106210000168',
  295. creatDate: '2021/6/21 16:23:06',
  296. provinceName: '广西区',
  297. zjCustName: '剪冠汽配南宁兴宁店',
  298. djCustName: '',
  299. custName: '剪冠汽配梧州万秀店',
  300. custType: '市级加盟商',
  301. brand: '汇箭',
  302. proCls: '蓄电池',
  303. nums: '19',
  304. p1: '3942.40',
  305. p2: '4126.40',
  306. p3: '',
  307. p4: '184.00',
  308. p5: '0.00',
  309. type: '采购差价'
  310. },
  311. {
  312. area: 'B区/04区',
  313. orderNo: 'XS2106210000168',
  314. creatDate: '2021/6/21 16:23:06',
  315. provinceName: '广西区',
  316. zjCustName: '剪冠汽配南宁兴宁店',
  317. djCustName: '',
  318. custName: '剪冠汽配梧州万秀店',
  319. custType: '市级加盟商',
  320. brand: '箭牌',
  321. proCls: '滤清器',
  322. nums: '186',
  323. p1: '1691.00',
  324. p2: '1886.00',
  325. p3: '',
  326. p4: '195.00',
  327. p5: '0.00',
  328. type: '采购差价'
  329. },
  330. {
  331. area: 'D区/06区',
  332. orderNo: 'XS2106210000045',
  333. creatDate: '2021/6/21 16:00:37',
  334. provinceName: '内蒙古',
  335. zjCustName: '剪冠汽配锡林浩特快驰店',
  336. djCustName: '',
  337. custName: '剪冠汽配锡林浩特快驰店1',
  338. custType: '市级加盟商',
  339. brand: '箭牌',
  340. proCls: '滤清器',
  341. nums: '525',
  342. p1: '4480.00',
  343. p2: '4984.00',
  344. p3: '',
  345. p4: '504.00',
  346. p5: '0.00',
  347. type: '采购差价'
  348. }
  349. ],
  350. count: 1
  351. }
  352. for (var i = 0; i < data.list.length; i++) {
  353. data.list[i].no = i + 1
  354. }
  355. _this.disabled = false
  356. resolve(data)
  357. })
  358. },
  359. productType: [],
  360. productTotal: null,
  361. currentTotal: null
  362. }
  363. },
  364. methods: {
  365. // 创建时间 change
  366. dateChange (date) {
  367. this.queryParam.time = date
  368. this.queryParam.beginDate = date[0] || ''
  369. this.queryParam.endDate = date[1] || ''
  370. },
  371. custChange (obj) {
  372. this.queryParam.buyerSn = obj.key
  373. },
  374. // 产品分类 change
  375. changeProductType (val, opt) {
  376. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  377. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  378. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  379. },
  380. // 获取城市列表
  381. getCityList (val) {
  382. const index = this.addrProvinceList.findIndex(item => item.areaSn == val)
  383. if (index >= 0) {
  384. this.queryParam.provinceName = this.addrProvinceList[index].name
  385. }
  386. this.addrCityList = []
  387. this.addrDistrictList = []
  388. this.queryParam.citySn = undefined
  389. this.queryParam.districtSn = undefined
  390. this.queryParam.address = ''
  391. this.getArea('city', val)
  392. },
  393. // 获取区县列表
  394. getAreaList (val) {
  395. const index = this.addrCityList.findIndex(item => item.areaSn == val)
  396. if (index >= 0) {
  397. this.queryParam.cityName = this.addrCityList[index].name
  398. }
  399. this.addrDistrictList = []
  400. this.queryParam.districtSn = undefined
  401. this.queryParam.address = ''
  402. this.getArea('district', val)
  403. },
  404. // 区县变更
  405. areaCharged (val) {
  406. const index = this.addrDistrictList.findIndex(item => item.areaSn == val)
  407. if (index >= 0) {
  408. this.queryParam.districtName = this.addrDistrictList[index].name
  409. }
  410. this.queryParam.address = ''
  411. },
  412. // 省/市/区
  413. getArea (leve, sn) {
  414. let params
  415. if (leve == 'province') {
  416. params = { type: '2' }
  417. } else {
  418. params = { parentId: sn, type: leve == 'city' ? '3' : '4' }
  419. }
  420. getArea(params).then(res => {
  421. if (res.status == 200) {
  422. if (leve == 'province') {
  423. this.addrProvinceList = res.data || []
  424. } else if (leve == 'city') {
  425. this.addrCityList = res.data || []
  426. } else if (leve == 'district') {
  427. this.addrDistrictList = res.data || []
  428. }
  429. } else {
  430. if (leve == 'province') {
  431. this.addrProvinceList = []
  432. } else if (leve == 'city') {
  433. this.addrCityList = []
  434. } else if (leve == 'district') {
  435. this.addrDistrictList = []
  436. }
  437. }
  438. })
  439. },
  440. // 重置
  441. resetSearchForm () {
  442. this.queryParam.time = [
  443. getDate.getCurrMonthDays().starttime,
  444. getDate.getCurrMonthDays().endtime
  445. ]
  446. this.$refs.rangeDate.resetDate(this.queryParam.time)
  447. this.queryParam.beginDate = getDate.getCurrMonthDays().starttime
  448. this.queryParam.endDate = getDate.getCurrMonthDays().endtime
  449. this.queryParam.buyerSn = undefined
  450. this.queryParam.subareaSn = undefined
  451. this.queryParam.productName = ''
  452. this.queryParam.productCode = ''
  453. this.queryParam.productTypeSn1 = ''
  454. this.queryParam.productTypeSn2 = ''
  455. this.queryParam.productTypeSn3 = ''
  456. this.queryParam.salesBillNo = ''
  457. this.productType = []
  458. this.$refs.table.refresh(true)
  459. },
  460. // 详情
  461. handleDetail (row) {
  462. this.$router.push({ name: 'salesDetail', params: { sn: row.salesBillSn } })
  463. },
  464. // 导出
  465. handleExport () {
  466. const params = this.queryParam
  467. if (this.time && this.time.length) {
  468. params.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
  469. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  470. } else {
  471. params.beginDate = ''
  472. params.endDate = ''
  473. }
  474. this.exportLoading = true
  475. oosDetailExport(params).then(res => {
  476. this.exportLoading = false
  477. this.download(res)
  478. })
  479. },
  480. download (data) {
  481. if (!data) { return }
  482. const url = window.URL.createObjectURL(new Blob([data]))
  483. const link = document.createElement('a')
  484. link.style.display = 'none'
  485. link.href = url
  486. const a = moment().format('YYYYMMDDHHmmss')
  487. const fname = '缺货统计(按客户)' + a
  488. link.setAttribute('download', fname + '.xlsx')
  489. document.body.appendChild(link)
  490. link.click()
  491. }
  492. },
  493. beforeRouteEnter (to, from, next) {
  494. next(vm => {
  495. vm.getArea('province')
  496. })
  497. }
  498. }
  499. </script>