bearerList.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <template>
  2. <a-card>
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <div class="table-page-search-wrapper">
  5. <a-form-model
  6. id="returnGoodsPresentationList-form"
  7. ref="ruleForm"
  8. class="form-model-con"
  9. layout="inline"
  10. :rules="rules"
  11. :model="queryParam"
  12. @keyup.enter.native="handleSearch">
  13. <a-row :gutter="15">
  14. <a-col :md="6" :sm="24">
  15. <a-form-model-item label="统计月份" prop="months">
  16. <months v-model="queryParam.months" placeholder="请选择月份(多选)" mode="multiple" style="width: 100%;"/>
  17. </a-form-model-item>
  18. </a-col>
  19. <a-col :md="6" :sm="24">
  20. <a-form-model-item label="费用承担方类型" prop="targetType">
  21. <v-select
  22. code="EXPENSE_ACCOUNT_DETAIL_SPLIT_OBJ_TYPE"
  23. allowClear
  24. style="width: 100%;"
  25. v-model="queryParam.targetType"
  26. @change="targetChange"
  27. placeholder="请选择费用承担方类型"
  28. ></v-select>
  29. </a-form-model-item>
  30. </a-col>
  31. <a-col :md="6" :sm="24">
  32. <a-form-model-item label="费用承担方名称" prop="targetSn">
  33. <!-- 部门 -->
  34. <department v-show="queryParam.targetType=='DEPARTMENT'" style="width: 100%;" placeholder="请选择费用承担方名称" v-model="queryParam.targetSn"></department>
  35. <!-- 经销商 -->
  36. <custList
  37. v-show="queryParam.targetType=='CUSTOMER'"
  38. ref="custList"
  39. cooperateFlag="1"
  40. @change="custChange"
  41. placeholder="请选择经销商(输入名称搜索)"></custList>
  42. <a-select v-if="!queryParam.targetType" placeholder="请选择费用承担方名称"></a-select>
  43. </a-form-model-item>
  44. </a-col>
  45. <a-col :md="6" :sm="24">
  46. <a-button type="primary" @click="handleSearch" :disabled="disabled" id="returnGoodsPresentationList-refresh">查询</a-button>
  47. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="returnGoodsPresentationList-reset">重置</a-button>
  48. <a-button
  49. style="margin-left: 5px"
  50. type="primary"
  51. class="button-warning"
  52. @click="handleExport"
  53. :disabled="disabled"
  54. v-if="$hasPermissions('B_expenseCollectExportByTarget')"
  55. :loading="exportLoading"
  56. id="returnGoodsPresentationList-export">导出</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. :defaultLoadData="false"
  67. :rowKey="(record) => record.id"
  68. :columns="columns"
  69. :showPagination="false"
  70. :data="loadData"
  71. bordered>
  72. <template slot="footer">
  73. <table v-if="totalData">
  74. <tr>
  75. <th colspan="5" width="42%" style="text-align: right;">汇总:</th>
  76. <th v-for="item in totalMData" width="6%" style="text-align: center;">{{ item }}</th>
  77. <th width="6%" style="text-align: center;">{{ totalData['COUNT_PRICE'] }}</th>
  78. </tr>
  79. </table>
  80. </template>
  81. </s-table>
  82. </a-spin>
  83. <!-- 导出提示框 -->
  84. <reportModal :visible="showExport" @close="showExport=false"></reportModal>
  85. </a-card>
  86. </template>
  87. <script>
  88. import { commonMixin } from '@/utils/mixin'
  89. import { STable, VSelect } from '@/components'
  90. import months from '@/views/common/months'
  91. import { hdExportExcel } from '@/libs/exportExcel'
  92. import reportModal from '@/views/common/reportModal.vue'
  93. import department from '@/views/expenseManagement/expenseReimbursement/department.js'
  94. import custList from '@/views/common/custList.vue'
  95. import { expenseCollectReportQueryPageByTarget, expenseCollectReportQueryCountByTarget, expenseCollectReportExportByTarget } from '@/api/reportData'
  96. export default {
  97. name: 'AllCountryCostReportList',
  98. mixins: [commonMixin],
  99. components: { STable, VSelect, months, department, custList, reportModal },
  100. data () {
  101. return {
  102. spinning: false,
  103. open: false,
  104. year: '',
  105. showExport: false, // 导出弹窗初始值
  106. queryParam: {
  107. months: undefined,
  108. targetType: undefined,
  109. targetSn: undefined
  110. },
  111. addrProvinceList: [], // 省下拉
  112. disabled: false, // 查询、重置按钮是否可操作
  113. exportLoading: false,
  114. rules: {
  115. 'months': [{ required: true, message: '请选择月份', trigger: 'change' }],
  116. 'targetType': [{ required: true, message: '请选择费用承担方类型', trigger: 'change' }],
  117. 'targetSn': [{ required: true, message: '请选择费用承担方名称', trigger: 'change' }]
  118. },
  119. columns: [],
  120. // 加载数据方法 必须为 Promise 对象
  121. loadData: parameter => {
  122. const _this = this
  123. _this.disabled = true
  124. _this.spinning = true
  125. const paramsPage = Object.assign(parameter, this.queryParam) // 有分页
  126. return expenseCollectReportQueryPageByTarget(paramsPage).then(res => {
  127. let data
  128. if (res.status == 200) {
  129. data = res.data
  130. const no = (data.pageNo - 1) * data.pageSize
  131. for (var i = 0; i < data.list.length; i++) {
  132. data.list[i].no = no + i + 1
  133. }
  134. }
  135. this.spinning = false
  136. this.getCount(paramsPage)
  137. return data
  138. })
  139. },
  140. totalData: null,
  141. totalMData: []
  142. }
  143. },
  144. methods: {
  145. getColumns () {
  146. const arr = [
  147. {
  148. title: '单据类型',
  149. dataIndex: 'BILL_TYPE',
  150. width: '8%',
  151. align: 'center',
  152. customRender: function (text) {
  153. return text || '--'
  154. }
  155. },
  156. {
  157. title: '费用类型',
  158. dataIndex: 'COST_TYPE_NAME',
  159. align: 'center',
  160. customRender: function (text) {
  161. return text || '--'
  162. },
  163. width: '8%',
  164. ellipsis: true
  165. },
  166. {
  167. title: '费用承担方类型',
  168. dataIndex: 'TARGET_TYPE',
  169. width: '10%',
  170. align: 'center',
  171. customRender: function (text) {
  172. return ((text || text == 0) ? text : '--')
  173. }
  174. },
  175. {
  176. title: '费用承担方名称',
  177. dataIndex: 'TARGET_NAME',
  178. width: '10%',
  179. align: 'center',
  180. customRender: function (text) {
  181. return ((text || text == 0) ? text : '--')
  182. }
  183. },
  184. {
  185. title: '区域',
  186. dataIndex: 'SUBAREA_NAME',
  187. width: '6%',
  188. align: 'center',
  189. customRender: function (text) {
  190. return ((text || text == 0) ? text : '--')
  191. }
  192. }
  193. ]
  194. if (this.queryParam.months) {
  195. // 月份排序
  196. this.queryParam.months.sort((a, b) => {
  197. return a.split('-')[1] - b.split('-')[1]
  198. })
  199. for (let i = 0; i < this.queryParam.months.length; i++) {
  200. const item = this.queryParam.months[i]
  201. arr.push({
  202. title: item.replace('-', '年') + '月',
  203. dataIndex: 'M_' + item.replace('-', '_'),
  204. width: '6%',
  205. align: 'center',
  206. customRender: function (text) {
  207. return ((text || text == 0) ? text : '--')
  208. }
  209. })
  210. }
  211. }
  212. arr.push({
  213. title: '总计',
  214. dataIndex: 'COUNT_PRICE',
  215. width: '6%',
  216. align: 'center',
  217. customRender: function (text) {
  218. return ((text || text == 0) ? text : '--')
  219. }
  220. })
  221. this.columns = arr
  222. },
  223. targetChange (v) {
  224. // 清空费用承担方名称
  225. this.queryParam.targetSn = undefined
  226. this.$refs.custList.resetForm()
  227. },
  228. custChange (v, obj, id) {
  229. this.queryParam.targetSn = v.key
  230. this.$refs.ruleForm.validateField('targetSn')
  231. },
  232. // 查询
  233. handleSearch () {
  234. const _this = this
  235. this.$refs.ruleForm.validate(valid => {
  236. if (valid) {
  237. _this.getColumns()
  238. _this.$refs.table.refresh(true)
  239. } else {
  240. return false
  241. }
  242. })
  243. },
  244. getCount (params) {
  245. this.totalData = null
  246. this.totalMData = []
  247. expenseCollectReportQueryCountByTarget(params).then(res => {
  248. this.totalData = res.data
  249. for (var key in res.data) {
  250. if (key.indexOf('M_') >= 0) {
  251. this.totalMData.push(res.data[key])
  252. }
  253. }
  254. })
  255. },
  256. // 重置
  257. resetSearchForm () {
  258. this.queryParam = {
  259. months: undefined,
  260. targetType: undefined,
  261. targetSn: undefined
  262. }
  263. this.totalData = null
  264. this.totalMData = []
  265. this.$refs.ruleForm.resetFields()
  266. this.$refs.table.clearTable()
  267. this.getColumns()
  268. },
  269. // 导出
  270. handleExport () {
  271. const _this = this
  272. this.$refs.ruleForm.validate(valid => {
  273. if (valid) {
  274. _this.showExport = true
  275. const params = _this.queryParam
  276. _this.exportLoading = true
  277. _this.spinning = true
  278. hdExportExcel(expenseCollectReportExportByTarget, params, '费用汇总报表(按承担方)', function () {
  279. _this.exportLoading = false
  280. _this.spinning = false
  281. })
  282. } else {
  283. return false
  284. }
  285. })
  286. },
  287. pageInit () {
  288. this.getColumns()
  289. }
  290. },
  291. mounted () {
  292. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  293. this.pageInit()
  294. }
  295. },
  296. activated () {
  297. // 如果是新页签打开,则重置当前页面
  298. if (this.$store.state.app.isNewTab) {
  299. this.pageInit()
  300. }
  301. },
  302. beforeRouteEnter (to, from, next) {
  303. next(vm => {})
  304. }
  305. }
  306. </script>
  307. <style style="less">
  308. .regionTypeSalesReportList-wrap{
  309. }
  310. </style>