list.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <template>
  2. <a-card size="small" :bordered="false" class="accountManagementList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="货架名称">
  10. <shelfList ref="shelfList" @change="shelfChange" :itemSn="queryParam.shelfSn"></shelfList>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="关联客户">
  15. <custList ref="custList" @change="custChange" :itemSn="queryParam.customerSn" :isEnabled="true"></custList>
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-form-item label="结算方式">
  20. <v-select code="SHELF_SETTLE_TYPE" v-model="queryParam.settleType" allowClear placeholder="请选择状态"></v-select>
  21. </a-form-item>
  22. </a-col>
  23. <template v-if="advanced">
  24. <a-col :md="6" :sm="24">
  25. <a-form-item label="待结金额">
  26. <a-input-group>
  27. <a-row>
  28. <a-col :span="11">
  29. <a-input-number
  30. v-model="queryParam.beginAmount"
  31. placeholder="起始金额"
  32. :precision="2"
  33. :min="0"
  34. :max="999999"
  35. style="width: 100%;display: inline-block;"/>
  36. </a-col>
  37. <a-col :span="2"><span style="display: block;text-align: center;line-height: 32px;">至</span></a-col>
  38. <a-col :span="11">
  39. <a-input-number
  40. placeholder="截止金额"
  41. :precision="2"
  42. :min="0"
  43. :max="999999"
  44. v-model="queryParam.endAmount"
  45. style="width: 100%;display: inline-block;"/>
  46. </a-col>
  47. </a-row>
  48. </a-input-group>
  49. </a-form-item>
  50. </a-col>
  51. </template>
  52. <a-col :md="6" :sm="24">
  53. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="outboundOrderList-refresh" >查询</a-button>
  54. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="outboundOrderList-reset">重置</a-button>
  55. <a @click="advanced=!advanced" style="margin-left: 5px">
  56. {{ advanced ? '收起' : '展开' }}
  57. <a-icon :type="advanced ? 'up' : 'down'"/>
  58. </a>
  59. </a-col>
  60. </a-row>
  61. </a-form>
  62. </div>
  63. <a-alert type="info" style="margin:10px 0">
  64. <div slot="message" style="display: flex;align-items: center;padding: 2px 0;">
  65. 共:<strong>{{ count }}</strong>条记录;
  66. 待结算金额合计¥<strong>{{ toThousands(total,2) }}</strong>
  67. </div>
  68. </a-alert>
  69. <s-table
  70. class="sTable fixPagination"
  71. ref="table"
  72. :style="{ height: tableHeight+77+'px' }"
  73. size="small"
  74. :rowKey="(record) => record.id"
  75. :columns="columns"
  76. :data="loadData"
  77. :scroll="{ y:tableHeight }"
  78. :defaultLoadData="true"
  79. bordered>
  80. <template slot="action" slot-scope="text,record">
  81. <a-button
  82. size="small"
  83. type="link"
  84. class="button-primary"
  85. @click="handleUndetail(record)"
  86. id="shelfMonitoringList-warehousing-btn">待结明细</a-button>
  87. <a-button
  88. size="small"
  89. type="link"
  90. class="button-primary"
  91. @click="handleDetail(record)"
  92. id="shelfMonitoringList-warehousing-btn">结算历史</a-button>
  93. </template>
  94. </s-table>
  95. </a-spin>
  96. </a-card>
  97. </template>
  98. <script>
  99. import { commonMixin } from '@/utils/mixin'
  100. import { toThousands } from '@/libs/tools.js'
  101. import moment from 'moment'
  102. import { STable, VSelect } from '@/components'
  103. import shelfList from '@/views/common/shelfList.vue'
  104. import custList from '@/views/common/custList.vue'
  105. import { queryShelfSettleRulePage, queryShelfSettleRuleCount } from '@/api/merchant'
  106. export default {
  107. components: { STable, shelfList, custList, VSelect },
  108. mixins: [commonMixin],
  109. data () {
  110. return {
  111. toThousands,
  112. advanced: true, // 高级搜索 展开/关闭
  113. spinning: false,
  114. disabled: false,
  115. tableHeight: 0,
  116. showModal: false,
  117. currentData: null,
  118. total: 0,
  119. count: 0,
  120. time: [],
  121. queryParam: {
  122. shelfSn: undefined,
  123. settleType: undefined,
  124. beginAmount: '',
  125. endAmount: ''
  126. },
  127. columns: [
  128. { title: '序号', dataIndex: 'no', width: '10%', align: 'center' },
  129. { title: '货架名称', dataIndex: 'shelfName', width: '25%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  130. { title: '关联客户', dataIndex: 'dealerName', width: '25%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  131. { title: '结算方式', dataIndex: 'settleTypeDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  132. { title: '待结金额', dataIndex: 'waitSettleAmount', width: '15%', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } },
  133. { title: '操作', width: '15%', align: 'left', scopedSlots: { customRender: 'action' } }
  134. ],
  135. // 加载数据方法 必须为 Promise 对象
  136. loadData: parameter => {
  137. const _this = this
  138. _this.disabled = true
  139. _this.spinning = true
  140. const paramsPage = Object.assign(parameter, this.queryParam) // 有分页
  141. if (this.checkValueRange()) {
  142. return queryShelfSettleRulePage(paramsPage).then(res => {
  143. let data
  144. if (res.status == 200) {
  145. data = res.data
  146. this.getCount(paramsPage)
  147. const no = (data.pageNo - 1) * data.pageSize
  148. for (var i = 0; i < data.list.length; i++) {
  149. data.list[i].no = no + i + 1
  150. }
  151. this.disabled = false
  152. }
  153. this.spinning = false
  154. return data
  155. })
  156. } else {
  157. const _this = this
  158. this.disabled = true
  159. this.spinning = true
  160. return new Promise(function (resolve, reject) {
  161. const data = []
  162. _this.disabled = false
  163. _this.spinning = false
  164. resolve(data)
  165. })
  166. }
  167. }
  168. }
  169. },
  170. methods: {
  171. // 客户 change
  172. custChange (obj) {
  173. this.queryParam.customerSn = obj.key || undefined
  174. },
  175. // 货架 change
  176. shelfChange (obj) {
  177. this.queryParam.shelfSn = obj.key || undefined
  178. },
  179. // 禁止选择今天之后的日期
  180. disabledDate (current) {
  181. return current && current > moment().endOf('day')
  182. },
  183. // 校验待结金额数值范围
  184. checkValueRange () {
  185. const isONull = this.queryParam.beginAmount === null || this.queryParam.beginAmount === undefined
  186. const isOEmpty = this.queryParam.beginAmount === ''
  187. const isOZero = this.queryParam.beginAmount === 0
  188. const isTNull = this.queryParam.endAmount === null || this.queryParam.endAmount === undefined
  189. const isTEmpty = this.queryParam.endAmount === ''
  190. const isTZero = this.queryParam.endAmount === 0
  191. // 第一个为空(可为null可为空字符)第二个不为空
  192. // 第一个不为空第二个为空(可为null可为空字符)
  193. // 第一个大于第二个
  194. if ((isONull || isOEmpty) && (this.queryParam.endAmount || isTZero)) {
  195. this.$message.info('请输入正确的待结金额查询范围!')
  196. return false
  197. }
  198. if ((this.queryParam.beginAmount || isOZero) && (isTNull || isTEmpty)) {
  199. this.$message.info('请输入正确的待结金额查询范围!')
  200. return false
  201. }
  202. if (this.queryParam.beginAmount > this.queryParam.endAmount) {
  203. this.$message.info('请输入正确的待结金额查询范围!')
  204. return false
  205. }
  206. this.queryParam.beginAmount = this.queryParam.beginAmount > 999999999 ? 999999999 : this.queryParam.beginAmount
  207. this.queryParam.endAmount = this.queryParam.endAmount > 999999999 ? 999999999 : this.queryParam.endAmount
  208. return true
  209. },
  210. // 重置
  211. resetSearchForm () {
  212. this.time = []
  213. this.queryParam = {
  214. shelfSn: undefined,
  215. settleType: undefined,
  216. beginAmount: '',
  217. endAmount: ''
  218. }
  219. this.$refs.table.refresh(true)
  220. },
  221. // 合计
  222. getCount (val) {
  223. queryShelfSettleRuleCount(val).then(res => {
  224. if (res.status == 200) {
  225. this.count = res.data.size || 0
  226. this.total = res.data.waitSettleAmount || 0
  227. }
  228. })
  229. },
  230. // 待结明细
  231. handleUndetail (row) {
  232. this.$router.push({ name: 'unSettlementDetail', params: { shelfSn: row.shelfSn, settleType: row.settleType, shelfName: row.shelfName } })
  233. // this.$router.push({ path: `/numsGoodsShelves/settlementManagement/warehouseDetail/${row.shelfPlaceSn}/${row.productSn}` })
  234. },
  235. // 结算历史
  236. handleDetail (row) {
  237. this.$router.push({ name: 'settlementDetail', params: { shelfSn: row.shelfSn, shelfName: row.shelfName } })
  238. },
  239. setTableH () {
  240. const tableSearchH = this.$refs.tableSearch.offsetHeight
  241. this.tableHeight = window.innerHeight - tableSearchH - 265
  242. },
  243. pageInit () {
  244. const _this = this
  245. this.$nextTick(() => { // 页面渲染完成后的回调
  246. _this.setTableH()
  247. })
  248. }
  249. },
  250. mounted () {
  251. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  252. this.pageInit()
  253. this.resetSearchForm()
  254. }
  255. },
  256. watch: {
  257. advanced (newValue, oldValue) {
  258. const _this = this
  259. setTimeout(() => {
  260. _this.setTableH()
  261. }, 400)
  262. },
  263. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  264. this.setTableH()
  265. }
  266. },
  267. activated () {
  268. // 如果是新页签打开,则重置当前页面
  269. if (this.$store.state.app.isNewTab) {
  270. this.pageInit()
  271. this.resetSearchForm()
  272. }
  273. // 仅刷新列表,不重置页面
  274. if (this.$store.state.app.updateList) {
  275. this.pageInit()
  276. this.$refs.table.refresh()
  277. }
  278. },
  279. beforeRouteEnter (to, from, next) {
  280. next(vm => {})
  281. }
  282. }
  283. </script>
  284. <style lang="less">
  285. .accountManagementList-wrap{
  286. }
  287. </style>