index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <div>
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 选项卡切换 -->
  5. <a-tabs v-model="activeKey" @change="callback" :tabBarStyle="{'background':'#fff'}">
  6. <a-tab-pane :key="item.id" :tab="item.name" v-for="item in tabsList">
  7. </a-tab-pane>
  8. </a-tabs>
  9. <a-card size="small">
  10. <!-- 搜索条件 -->
  11. <div class="table-page-search-wrapper newTableSearchName" ref="tableSearch">
  12. <a-form-model
  13. id="dayReportList-form"
  14. ref="ruleForm"
  15. class="form-model-con"
  16. layout="inline"
  17. :rules="rules"
  18. :model="queryParam"
  19. @keyup.enter.native="handleSearch">
  20. <a-row :gutter="15">
  21. <a-col :md="6" :sm="24">
  22. <a-form-model-item label="月份" prop="month">
  23. <a-month-picker
  24. placeholder="请选择月份"
  25. locale="zh-cn"
  26. id="dayReportList-month"
  27. v-model="queryParam.month"
  28. @change="onChange"
  29. :disabled-date="disabledDate"
  30. style="width: 100%;"/>
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  34. <a-button type="primary" @click="handleSearch" :disabled="disabled" id="dayReportList-refresh">查询</a-button>
  35. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="dayReportList-reset">重置</a-button>
  36. <a-button
  37. style="margin-left: 5px"
  38. type="primary"
  39. class="button-warning"
  40. @click="handleExport"
  41. :disabled="disabled"
  42. :loading="exportLoading"
  43. id="dayReportList-export">导出</a-button>
  44. </a-col>
  45. </a-row>
  46. </a-form-model>
  47. </div>
  48. </a-card>
  49. <!-- 列表 -->
  50. <a-card size="small" style="margin-top:4px!important">
  51. <table0
  52. v-if="activeKey == 0"
  53. ref="table0"
  54. :month="queryParam.month"
  55. :columns="columns"
  56. :tableData="tableData"
  57. :nowDate="nowDate"
  58. ></table0>
  59. <table1
  60. v-if="activeKey == 1"
  61. ref="table1"
  62. :month="queryParam.month"
  63. :columns="columns"
  64. :tableData="tableData"
  65. :nowDate="nowDate"
  66. ></table1>
  67. <table2
  68. v-if="activeKey == 2"
  69. ref="table2"
  70. :month="queryParam.month"
  71. :columns="columns"
  72. :tableData="tableData"
  73. :nowDate="nowDate"
  74. ></table2>
  75. <table3
  76. v-if="activeKey == 3"
  77. ref="table3"
  78. :month="queryParam.month"
  79. :columns="columns"
  80. :tableData="tableData"
  81. :nowDate="nowDate"
  82. ></table3>
  83. </a-card>
  84. </a-spin>
  85. </div>
  86. </template>
  87. <script>
  88. import { commonMixin } from '@/utils/mixin'
  89. import XLSX from 'xlsx-js-style'
  90. // 组件
  91. import rangeDate from '@/views/common/rangeDate.vue'
  92. import moment from 'moment'
  93. import table0 from './table0'
  94. import table1 from './table1'
  95. import table2 from './table2'
  96. import table3 from './table3'
  97. // 接口
  98. import { salesReportDailyList } from '@/api/reportData.js'
  99. export default {
  100. name: 'RegionTypeSalesReportList',
  101. mixins: [commonMixin],
  102. components: { rangeDate, table0, table1, table2, table3 },
  103. data () {
  104. return {
  105. spinning: false,
  106. activeKey: 0, // 切换显示页面值 0 各分区品类实售明细 1各区域品类实售明细
  107. advanced: true, // 高级搜索 展开/关闭
  108. disabled: false, // 查询、重置按钮是否可操作
  109. exportLoading: false, // 导出按钮加载状态
  110. tableHeight: 0, // 表格高度
  111. tabsList: [{ id: 0, name: '全国销售日报' }, { id: 1, name: '项目销售日报1' }, { id: 2, name: '项目销售日报2' }, { id: 3, name: '分区销售日报' }], // tab切换data
  112. columns: [], // 表头数据
  113. tableData: [], // 表格数据
  114. totalNums: 0, // 总条数
  115. // 查询参数
  116. queryParam: {
  117. month: moment().format('YYYY-MM') // 月份默认值
  118. },
  119. rules: {
  120. 'month': [{ required: true, message: '请选择月份', trigger: 'change' }]
  121. },
  122. nowDate: ''
  123. }
  124. },
  125. methods: {
  126. // 月份 change
  127. onChange (date, dateString) {
  128. this.queryParam.month = dateString
  129. },
  130. // 月份选择范围
  131. disabledDate (current) {
  132. return current && current > moment().endOf('day')
  133. },
  134. // tabs切换 change时间
  135. callback (key) {
  136. this.activeKey = key
  137. const _this = this
  138. _this.$nextTick(() => {
  139. this.resetSearchForm()
  140. })
  141. },
  142. // 查询
  143. handleSearch () {
  144. const _this = this
  145. this.$refs.ruleForm.validate(valid => {
  146. if (valid) {
  147. _this.getTableData()
  148. } else {
  149. _this.$message.error('请选择月份')
  150. return false
  151. }
  152. })
  153. },
  154. // 重置
  155. resetSearchForm () {
  156. this.$refs.ruleForm.resetFields()
  157. this.queryParam.time = []
  158. this.$refs.rangeDate.resetDate(this.queryParam.time)
  159. this.tableData = []
  160. },
  161. exportTable (dom, title) {
  162. const zim = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z‌'.split('、')
  163. var ws = XLSX.utils.table_to_sheet(dom)
  164. var wb = XLSX.utils.book_new()
  165. console.log(ws)
  166. // 设置样式
  167. Object.keys(ws).forEach(cell => {
  168. if (cell[0] !== '!') {
  169. ws[cell].s = {
  170. alignment: {
  171. horizontal: 'center',
  172. vertical: 'center'
  173. }
  174. }
  175. }
  176. })
  177. // 表格1
  178. if (this.activeKey == 1) {
  179. const cols = zim[this.columns.length - 1]
  180. Array(this.totalNums).fill().forEach((item, i) => {
  181. const a = ws[cols + (i + 2)]
  182. console.log(cols + (i + 2))
  183. if (a) {
  184. a.z = (a.v * 100) + '%' // 设置单元格格式为百分比
  185. }
  186. })
  187. }
  188. // 4. 设置列宽
  189. ws['!cols'] = Array(this.columns.length).fill().map(() => ({ wch: 35 }))
  190. XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  191. XLSX.writeFile(wb, this.queryParam.month + title + '.xlsx')
  192. },
  193. // 导出
  194. handleExport () {
  195. const excelTitle = this.tabsList.find(item => item.id == this.activeKey)
  196. if (this.$refs.table0 && this.activeKey == 0) {
  197. this.exportTable(this.$refs.table0.getTable(), excelTitle.name)
  198. } else if (this.$refs.table1 && this.activeKey == 1) {
  199. this.totalNums = this.$refs.table1.list.length
  200. this.exportTable(this.$refs.table1.getTable(), excelTitle.name)
  201. } else if (this.$refs.table2 && this.activeKey == 2) {
  202. this.exportTable(this.$refs.table2.getTable(), excelTitle.name)
  203. } else if (this.$refs.table3 && this.activeKey == 3) {
  204. this.exportTable(this.$refs.table3.getTable(), excelTitle.name)
  205. }
  206. },
  207. // 获取表格数据
  208. async getTableData () {
  209. const url = [salesReportDailyList, salesReportDailyList, salesReportDailyList, salesReportDailyList]
  210. const reportType = ['DailyPL', 'DailyPL', 'DailyPL', 'DailyPL'][this.activeKey]
  211. const reportDate = this.queryParam.month + '-01 00:00:00'
  212. this.nowDate = moment().format('DD日HH点mm分')
  213. this.spinning = true
  214. const data = await url[this.activeKey]({ reportType, reportDate }).then(res => res.data)
  215. if (data) {
  216. this.tableData = data
  217. this.columns = this.getColumns()
  218. this.spinning = false
  219. }
  220. },
  221. getColumns () {
  222. const row = this.tableData[0]
  223. const ret = []
  224. if (row) {
  225. row.detailList[0].forEach(item => {
  226. ret.push(item)
  227. })
  228. ret.push(row.bymb)
  229. ret.push(row.wcl)
  230. }
  231. return ret
  232. },
  233. // 初始化
  234. pageInit () {
  235. this.activeKey = 0
  236. this.tableData = []
  237. }
  238. },
  239. mounted () {
  240. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  241. this.pageInit()
  242. }
  243. },
  244. activated () {
  245. // 如果是新页签打开,则重置当前页面
  246. if (this.$store.state.app.isNewTab) {
  247. this.pageInit()
  248. }
  249. },
  250. beforeRouteEnter (to, from, next) {
  251. next(vm => {})
  252. }
  253. }
  254. </script>
  255. <style lang="less" scoped>
  256. </style>