list.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <template>
  2. <a-card size="small" :bordered="false" class="nationalCustomerCostStatisticsList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form-model
  6. ref="ruleForm"
  7. class="form-model-con"
  8. layout="inline"
  9. :rules="rules"
  10. :model="queryParam"
  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-select
  21. id="nationalCustomerCostStatisticsList-allocateTypeSn"
  22. v-model="queryParam.allocateTypeSn"
  23. placeholder="请选择区域"
  24. allowClear>
  25. <a-select-option
  26. v-for="item in allocateTypeList"
  27. :key="item.allocateTypeSn"
  28. :value="item.allocateTypeSn">{{ item.name }}</a-select-option>
  29. </a-select>
  30. </a-form-model-item>
  31. </a-col>
  32. <a-col :md="6" :sm="24">
  33. <a-form-model-item label="省份">
  34. <a-select
  35. id="nationalCustomerCostStatisticsList-state"
  36. v-model="queryParam.state"
  37. placeholder="请选择省份"
  38. allowClear>
  39. <a-select-option
  40. v-for="item in allocateTypeList"
  41. :key="item.allocateTypeSn"
  42. :value="item.allocateTypeSn">{{ item.name }}</a-select-option>
  43. </a-select>
  44. </a-form-model-item>
  45. </a-col>
  46. <a-col :md="6" :sm="24">
  47. <a-button
  48. type="primary"
  49. @click="$refs.table.refresh(true)"
  50. :disabled="disabled"
  51. id="nationalCustomerCostStatisticsList-refresh">查询</a-button>
  52. <a-button
  53. style="margin-left: 5px"
  54. @click="resetSearchForm"
  55. :disabled="disabled"
  56. id="nationalCustomerCostStatisticsList-reset">重置</a-button>
  57. </a-col>
  58. </a-row>
  59. </a-form-model>
  60. </div>
  61. <!-- 列表 -->
  62. <s-table
  63. class="sTable"
  64. ref="table"
  65. size="small"
  66. :rowKey="(record) => record.id"
  67. :columns="columns"
  68. :showPagination="false"
  69. :data="loadData"
  70. :scroll="{ x: 2920 }"
  71. :defaultLoadData="false"
  72. bordered>
  73. </s-table>
  74. </a-card>
  75. </template>
  76. <script>
  77. import {
  78. STable,
  79. VSelect
  80. } from '@/components'
  81. import reportData from '@/libs/reportData'
  82. import rangeDate from '@/views/common/rangeDate.vue'
  83. import getDate from '@/libs/getDate.js'
  84. // import { allocateBillList, allocateBillDel, allocateBillAudit, allocateBillExport } from '@/api/allocateBill'
  85. // import { allocateTypeAllList } from '@/api/allocateType'
  86. export default {
  87. components: {
  88. STable,
  89. VSelect,
  90. rangeDate
  91. },
  92. data () {
  93. return {
  94. advanced: false, // 高级搜索 展开/关闭
  95. tableHeight: 0,
  96. queryParam: { // 查询条件
  97. time: [
  98. getDate.getCurrMonthDays().starttime,
  99. getDate.getCurrMonthDays().endtime
  100. ],
  101. beginDate: getDate.getCurrMonthDays().starttime,
  102. endDate: getDate.getCurrMonthDays().endtime,
  103. targetName: '', // 调往对象
  104. allocateTypeSn: undefined, // 调拨类型
  105. state: undefined, // 业务状态
  106. allocateNo: '' // 调拨单号
  107. },
  108. disabled: false, // 查询、重置按钮是否可操作
  109. exportLoading: false,
  110. rules: {
  111. 'time': [{
  112. required: true,
  113. message: '请选择创建时间',
  114. trigger: 'change'
  115. }]
  116. },
  117. columns: [{
  118. title: '序号',
  119. dataIndex: 'no',
  120. width: 80,
  121. align: 'center',
  122. fixed: 'left'
  123. },
  124. {
  125. title: '区域',
  126. dataIndex: 'area',
  127. width: 200,
  128. align: 'center',
  129. customRender: function (text) {
  130. return text || '--'
  131. }
  132. },
  133. {
  134. title: '省份',
  135. dataIndex: 'province',
  136. align: 'center',
  137. customRender: function (text) {
  138. return text || '--'
  139. }
  140. },
  141. {
  142. title: '客户名称',
  143. dataIndex: 'customerName',
  144. align: 'center',
  145. customRender: function (text) {
  146. return text || '--'
  147. },
  148. ellipsis: true
  149. },
  150. {
  151. title: '费用类型',
  152. dataIndex: 'targetName',
  153. width: 120,
  154. align: 'center',
  155. customRender: function (text) {
  156. return ((text || text == 0) ? text : '--')
  157. }
  158. },
  159. {
  160. title: '1月',
  161. dataIndex: 'dealerLevelDictValue',
  162. width: 120,
  163. align: 'center',
  164. customRender: function (text) {
  165. return ((text || text == 0) ? text : '--')
  166. }
  167. },
  168. {
  169. title: '2月',
  170. dataIndex: 'totalQty',
  171. width: 120,
  172. align: 'center',
  173. customRender: function (text) {
  174. return ((text || text == 0) ? text : '--')
  175. }
  176. },
  177. {
  178. title: '3月',
  179. dataIndex: 'totalCost',
  180. width: 120,
  181. align: 'center',
  182. customRender: function (text) {
  183. return ((text || text == 0) ? text : '--')
  184. }
  185. },
  186. {
  187. title: '4月',
  188. dataIndex: 'totalPrice',
  189. width: 120,
  190. align: 'center',
  191. customRender: function (text) {
  192. return ((text || text == 0) ? text : '--')
  193. }
  194. },
  195. {
  196. title: '5月',
  197. dataIndex: 'auditTime',
  198. width: 120,
  199. align: 'center',
  200. customRender: function (text) {
  201. return ((text || text == 0) ? text : '--')
  202. }
  203. },
  204. {
  205. title: '6月',
  206. dataIndex: 'allocateTypeName',
  207. width: 120,
  208. align: 'center',
  209. customRender: function (text) {
  210. return ((text || text == 0) ? text : '--')
  211. }
  212. },
  213. {
  214. title: '7月',
  215. dataIndex: 'stateDictValue',
  216. width: 120,
  217. align: 'center',
  218. customRender: function (text) {
  219. return ((text || text == 0) ? text : '--')
  220. }
  221. },
  222. {
  223. title: '8月',
  224. dataIndex: 'printStateDictValue',
  225. width: 120,
  226. align: 'center',
  227. customRender: function (text) {
  228. return ((text || text == 0) ? text : '--')
  229. }
  230. },
  231. {
  232. title: '9月',
  233. dataIndex: 'printCount',
  234. width: 120,
  235. align: 'center',
  236. customRender: function (text) {
  237. return ((text || text == 0) ? text : '--')
  238. }
  239. },
  240. {
  241. title: '10月',
  242. dataIndex: 'printCounts',
  243. width: 120,
  244. align: 'center',
  245. customRender: function (text) {
  246. return ((text || text == 0) ? text : '--')
  247. }
  248. },
  249. {
  250. title: '11月',
  251. dataIndex: 'printCsounts',
  252. width: 120,
  253. align: 'center',
  254. customRender: function (text) {
  255. return ((text || text == 0) ? text : '--')
  256. }
  257. },
  258. {
  259. title: '12月',
  260. dataIndex: 'printdCounts',
  261. width: 120,
  262. align: 'center',
  263. customRender: function (text) {
  264. return ((text || text == 0) ? text : '--')
  265. }
  266. },
  267. {
  268. title: '1-12月费用合计',
  269. dataIndex: 'prfintCounts',
  270. width: 140,
  271. align: 'center',
  272. customRender: function (text) {
  273. return ((text || text == 0) ? text : '--')
  274. }
  275. },
  276. {
  277. title: '实际销售额合计',
  278. dataIndex: 'printCogunts',
  279. width: 140,
  280. align: 'center',
  281. customRender: (value, row, index) => {
  282. const obj = {
  283. children: value,
  284. attrs: {}
  285. }
  286. if (index === 0) {
  287. obj.attrs.rowSpan = 5
  288. }
  289. if (index === 1) {
  290. obj.attrs.rowSpan = 0
  291. }
  292. if (index === 2) {
  293. obj.attrs.rowSpan = 0
  294. }
  295. if (index === 3) {
  296. obj.attrs.rowSpan = 0
  297. }
  298. if (index === 4) {
  299. obj.attrs.rowSpan = 0
  300. }
  301. if (index === 5) {
  302. obj.attrs.rowSpan = 5
  303. }
  304. if (index === 6) {
  305. obj.attrs.rowSpan = 0
  306. }
  307. if (index === 7) {
  308. obj.attrs.rowSpan = 0
  309. }
  310. if (index === 8) {
  311. obj.attrs.rowSpan = 0
  312. }
  313. if (index === 9) {
  314. obj.attrs.rowSpan = 0
  315. }
  316. if (index === 10) {
  317. obj.attrs.rowSpan = 5
  318. }
  319. if (index === 11) {
  320. obj.attrs.rowSpan = 0
  321. }
  322. if (index === 12) {
  323. obj.attrs.rowSpan = 0
  324. }
  325. if (index === 13) {
  326. obj.attrs.rowSpan = 0
  327. }
  328. if (index === 14) {
  329. obj.attrs.rowSpan = 0
  330. }
  331. return obj
  332. }
  333. },
  334. {
  335. title: '费用占比(%)',
  336. dataIndex: 'phrintCounts',
  337. width: 140,
  338. align: 'center',
  339. customRender: function (text) {
  340. return ((text || text == 0) ? text : '--')
  341. }
  342. },
  343. {
  344. title: '正常费用',
  345. dataIndex: 'printCsountss',
  346. width: 120,
  347. align: 'center',
  348. customRender: function (text) {
  349. return ((text || text == 0) ? text : '--')
  350. }
  351. },
  352. {
  353. title: '特殊申请费用',
  354. dataIndex: 'prinftCounts',
  355. width: 120,
  356. align: 'center',
  357. customRender: function (text) {
  358. return ((text || text == 0) ? text : '--')
  359. }
  360. }
  361. ],
  362. allocateTypeList: [], // 调拨类型
  363. openModal: false, // 新增编辑 弹框
  364. // 加载数据方法 必须为 Promise 对象
  365. loadData: parameter => {
  366. this.disabled = true
  367. // return allocateBillList(Object.assign(parameter, this.queryParam)).then(res => {
  368. // const data = res.data
  369. // const no = (data.pageNo - 1) * data.pageSize
  370. // for (var i = 0; i < data.list.length; i++) {
  371. // data.list[i].no = no + i + 1
  372. // }
  373. // this.disabled = false
  374. // return data
  375. // })
  376. const _this = this
  377. return new Promise(function (resolve, reject) {
  378. const data = {
  379. list: reportData.nationalCustomerCostStatisticsList
  380. }
  381. for (var i = 0; i < data.list.length; i++) {
  382. data.list[i].no = i + 1
  383. }
  384. _this.disabled = false
  385. resolve(data)
  386. })
  387. }
  388. }
  389. },
  390. methods: {
  391. // 创建时间 change
  392. dateChange (date) {
  393. if (date[0] && date[1]) {
  394. this.queryParam.time = date
  395. } else {
  396. this.queryParam.time = []
  397. }
  398. this.queryParam.beginDate = date[0] || ''
  399. this.queryParam.endDate = date[1] || ''
  400. },
  401. // 重置
  402. resetSearchForm () {
  403. this.$refs.rangeDate.resetDate(this.queryParam.time)
  404. this.queryParam.time = [getDate.getCurrMonthDays().starttime,
  405. getDate.getCurrMonthDays().endtime
  406. ]
  407. this.queryParam.beginDate = getDate.getCurrMonthDays().starttime
  408. this.queryParam.endDate = getDate.getCurrMonthDays().endtime
  409. this.queryParam.targetName = ''
  410. this.queryParam.allocateTypeSn = undefined
  411. this.queryParam.state = undefined
  412. this.queryParam.allocateNo = ''
  413. this.$refs.table.refresh(true)
  414. },
  415. pageInit () {
  416. }
  417. },
  418. mounted () {
  419. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  420. this.pageInit()
  421. this.resetSearchForm()
  422. }
  423. },
  424. activated () {
  425. // 如果是新页签打开,则重置当前页面
  426. if (this.$store.state.app.isNewTab) {
  427. this.pageInit()
  428. this.resetSearchForm()
  429. }
  430. },
  431. beforeRouteEnter (to, from, next) {
  432. next(vm => {})
  433. }
  434. }
  435. </script>