list.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <a-card size="small" :bordered="false">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <div ref="tableSearch" class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="活动名称">
  9. <a-input id="redPacket-shelfName" allowClear v-model.trim="queryParam.ruleName" placeholder="请输入活动名称"/>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="4" :sm="24">
  13. <a-form-item label="活动状态">
  14. <v-select id="redPacket-state" code="REWARD_RULE_STATUS" v-model="queryParam.ruleStatus" allowClear placeholder="请选择状态"></v-select>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  18. <a-button type="primary" @click="$refs.table.refresh(true)" id="redPacket-search">查询</a-button>
  19. <a-button type="" @click="reset" id="redPacket-reset" style="margin-left: 10px;">重置</a-button>
  20. </a-col>
  21. </a-row>
  22. </a-form>
  23. </div>
  24. <div class="table-operator">
  25. <a-button type="primary" class="button-error" @click="handleEdit()" id="redPacket-handleEdit">新增红包活动</a-button>
  26. </div>
  27. <s-table
  28. class="sTable fixPagination"
  29. ref="table"
  30. :style="{ height: tableHeight+84.5+'px', wordBreak: 'break-all' }"
  31. size="small"
  32. rowKey="id"
  33. :columns="columns"
  34. :data="loadData"
  35. :scroll="{ y: tableHeight }"
  36. :defaultLoadData="false"
  37. bordered>
  38. <template slot="shelf" slot-scope="text, record">
  39. 共 <a title="查看参与货架" @click="viewShelf(record)">{{ text }}</a> 个货架
  40. </template>
  41. <template slot="action" slot-scope="text, record">
  42. <a-button v-if="record.ruleStatus == 'wait'" size="small" type="link" class="button-info" @click="handlePublish(record)">发布</a-button>
  43. <a-button v-if="record.ruleStatus == 'release'" size="small" type="link" class="button-info" @click="handleEnd(record)">终止</a-button>
  44. <a-button v-if="record.ruleStatus == 'wait'||record.ruleStatus == 'release'" size="small" type="link" class="button-info" @click="handleEdit(record)">编辑</a-button>
  45. <a-button v-if="record.ruleStatus == 'wait'" size="small" type="link" class="button-error" @click="handleDelete(record)">删除</a-button>
  46. <a-button size="small" type="link" class="button-info" @click="handleDetail(record)">详情</a-button>
  47. </template>
  48. </s-table>
  49. </a-spin>
  50. <shelfDetail ref="shelfDetail" :itemData="itemData" :visible="showModal" @close="closeModal"></shelfDetail>
  51. </a-card>
  52. </template>
  53. <script>
  54. import { STable, VSelect } from '@/components'
  55. import { rewardRuleList, rewardRuleRelease, rewardRuleDelete, rewardRuleClose } from '@/api/redPacket.js'
  56. import dealerList from '@/views/common/dealerList.vue'
  57. import storeList from '@/views/common/storeList.vue'
  58. import shelfDetail from './shelfDetail.vue'
  59. export default {
  60. name: 'UserList',
  61. components: { STable, VSelect, storeList, dealerList, shelfDetail },
  62. data () {
  63. return {
  64. spinning: false,
  65. advanced: false,
  66. tableHeight: 0,
  67. // 查询参数
  68. queryParam: {
  69. ruleName: '', // 活动名称
  70. ruleStatus: undefined // 状态
  71. },
  72. showModal: false,
  73. itemData: null, // 编辑行数据
  74. // 表头
  75. columns: [
  76. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  77. { title: '活动名称', dataIndex: 'ruleName', width: '17%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  78. { title: '活动发布时间', dataIndex: 'releaseDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  79. { title: '活动截止时间', dataIndex: 'expireDate', width: '10%', align: 'center', customRender: function (text, record) { return record.neverExpireFlag == 1 ? '永久' : text } },
  80. { title: '参与货架', dataIndex: 'joinNum', width: '8%', align: 'center', scopedSlots: { customRender: 'shelf' } },
  81. { title: '活动范围', dataIndex: 'bizTypes', width: '8%', align: 'center', customRender: function (text) { return '货架订单' } },
  82. { title: '活动状态', dataIndex: 'ruleStatusDictValue', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
  83. { title: '备注', dataIndex: 'remarks', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  84. { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  85. { title: '操作', width: '12%', align: 'center', scopedSlots: { customRender: 'action' } }
  86. ],
  87. // 加载数据方法 必须为 Promise 对象
  88. loadData: parameter => {
  89. this.spinning = true
  90. return rewardRuleList(Object.assign(parameter, this.queryParam)).then(res => {
  91. let data
  92. if (res.status == 200) {
  93. data = res.data
  94. const no = (data.pageNo - 1) * data.pageSize
  95. for (let i = 0; i < data.list.length; i++) {
  96. const _item = data.list[i]
  97. _item.no = no + i + 1
  98. }
  99. }
  100. this.spinning = false
  101. return data
  102. })
  103. }
  104. }
  105. },
  106. methods: {
  107. // 重置
  108. reset () {
  109. this.queryParam = {
  110. ruleName: '', // 活动名称
  111. ruleStatus: undefined // 状态
  112. }
  113. this.$refs.table.refresh(true)
  114. },
  115. // 编辑/新增
  116. handleEdit (row) {
  117. const _this = this
  118. if (row) { // 编辑
  119. this.$confirm({
  120. title: '提示',
  121. content: '确认要编辑吗?',
  122. centered: true,
  123. onOk () {
  124. _this.$router.push({ name: 'redPacketEdit', params: { sn: row.rewardRuleSn } })
  125. }
  126. })
  127. } else {
  128. this.$router.push({ name: 'redPacketAdd' })
  129. }
  130. },
  131. // 详情
  132. handleDetail (row) {
  133. this.$router.push({ name: 'redPacketDetail', params: { sn: row.rewardRuleSn } })
  134. },
  135. // 查看参与货架详细
  136. viewShelf (row) {
  137. this.showModal = true
  138. this.itemData = row
  139. },
  140. closeModal () {
  141. this.showModal = false
  142. this.itemData = null
  143. },
  144. // 发布
  145. handlePublish (row) {
  146. const _this = this
  147. this.$confirm({
  148. title: '提示',
  149. content: '确认要发布吗?',
  150. centered: true,
  151. onOk () {
  152. _this.spinning = true
  153. rewardRuleRelease({ rewardRuleSn: row.rewardRuleSn }).then(res => {
  154. if (res.status == 200) {
  155. _this.$message.success(res.message)
  156. _this.$refs.table.refresh()
  157. }
  158. _this.spinning = false
  159. })
  160. }
  161. })
  162. },
  163. // 终止
  164. handleEnd (row) {
  165. const _this = this
  166. this.$confirm({
  167. title: '提示',
  168. content: '确认要终止吗?',
  169. centered: true,
  170. onOk () {
  171. _this.spinning = true
  172. rewardRuleClose({ rewardRuleSn: row.rewardRuleSn }).then(res => {
  173. if (res.status == 200) {
  174. _this.$message.success(res.message)
  175. _this.$refs.table.refresh()
  176. }
  177. _this.spinning = false
  178. })
  179. }
  180. })
  181. },
  182. // 删除
  183. handleDelete (row) {
  184. const _this = this
  185. this.$confirm({
  186. title: '提示',
  187. content: '确认要删除吗?',
  188. centered: true,
  189. onOk () {
  190. _this.spinning = true
  191. rewardRuleDelete({ rewardRuleSn: row.rewardRuleSn }).then(res => {
  192. if (res.status == 200) {
  193. _this.$message.success(res.message)
  194. _this.$refs.table.refresh()
  195. _this.spinning = false
  196. } else {
  197. _this.spinning = false
  198. }
  199. })
  200. }
  201. })
  202. },
  203. pageInit () {
  204. const _this = this
  205. _this.$refs.table.refresh()
  206. this.$nextTick(() => { // 页面渲染完成后的回调
  207. _this.setTableH()
  208. })
  209. },
  210. setTableH () {
  211. const tableSearchH = this.$refs.tableSearch.offsetHeight
  212. this.tableHeight = window.innerHeight - tableSearchH - 215
  213. }
  214. },
  215. watch: {
  216. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  217. this.setTableH()
  218. }
  219. },
  220. mounted () {
  221. this.pageInit()
  222. this.reset()
  223. },
  224. beforeRouteEnter (to, from, next) {
  225. next(vm => {
  226. if (from.name == 'redPacketEdit' || from.name == 'redPacketAdd') {
  227. vm.$refs.table.refresh()
  228. } else {
  229. vm.reset()
  230. }
  231. })
  232. }
  233. }
  234. </script>