lotterySettings.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <template>
  2. <a-card :bordered="false" class="lotterySet-page-info">
  3. <!-- 搜索框 -->
  4. <div class="lotterySet-search">
  5. <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="20">
  7. <a-col :span="6">
  8. <a-form-item label="活动名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  9. <a-input
  10. allowClear
  11. v-model="searchData.activeName"
  12. :maxLength="30"
  13. placeholder="请输入活动名称"
  14. id="lotterySet-name" />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="4">
  18. <a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  19. <v-select
  20. code="ENABLE_FLAG"
  21. v-model="searchData.state"
  22. allowClear
  23. placeholder="请选择状态"
  24. id="lotterySet-enable-state"></v-select>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :span="6">
  28. <a-button class="handle-btn serach-btn" style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="lotterySet-refresh">查询</a-button>
  29. <a-button class="handle-btn" @click="resetForm" id="lotterySet-resetForm">重置</a-button>
  30. </a-col>
  31. </a-row>
  32. </a-form>
  33. </div>
  34. <div class="add">
  35. <a-button
  36. type="primary"
  37. icon="plus"
  38. class="addBtn"
  39. @click="showModal"
  40. id="lotterySet-showModal"
  41. >新增</a-button>
  42. </div>
  43. <!-- table列表 -->
  44. <s-table
  45. ref="table"
  46. size="default"
  47. :rowKey="(record) => record.id"
  48. :columns="columns"
  49. :data="loadData"
  50. bordered>
  51. <span slot="action" slot-scope="text, record">
  52. <a-icon
  53. :type="record.state==1?'eye':'edit'"
  54. id="lotterySet-handleEdit"
  55. :title="record.state==1?'查看':'编辑'"
  56. class="actionBtn icon-blues"
  57. @click="handleEdit(record)" />
  58. <a-icon
  59. v-if="record.participantsNum===0 && record.state==0"
  60. type="delete"
  61. id="lotterySet-handleDel"
  62. title="删除"
  63. class="actionBtn icon-red"
  64. @click="handleDel(record)" />
  65. </span>
  66. <span slot="actime" slot-scope="text, record">
  67. {{ record.activeStartTime }} 至 {{ record.activeEndTime }}
  68. </span>
  69. <span slot="state" slot-scope="text, record">
  70. <a-switch
  71. checkedChildren="启用"
  72. unCheckedChildren="禁用"
  73. id="lotterySet-changeFlagHandle"
  74. :checked="record.state == 1 ? true : false"
  75. @change="changeFlagHandle(text, record)" />
  76. <!-- <span v-if="!$hasPermissions('B_lotterySet_enable')">--</span> -->
  77. </span>
  78. </span>
  79. </s-table>
  80. <addlotterySetModal
  81. :itemId="itemId"
  82. :showEditModal="showEditModal"
  83. @refresh="$refs.table.refresh(true)"
  84. @close="cancel"></addlotterySetModal>
  85. </a-card>
  86. </template>
  87. <script>
  88. import {
  89. Upload,
  90. STable,
  91. VSelect
  92. } from '@/components'
  93. import addlotterySetModal from './addlotterySetModal.vue'
  94. import {
  95. getLuckyDrawList, enableLuckyDraw, deleteLuckyDraw
  96. } from '@/api/luckyDraw.js'
  97. export default {
  98. components: {
  99. STable,
  100. Upload,
  101. VSelect,
  102. addlotterySetModal
  103. },
  104. data () {
  105. return {
  106. formItemLayout: {
  107. labelCol: { span: 7 },
  108. wrapperCol: { span: 17 }
  109. },
  110. searchData: {
  111. activeName: '',
  112. state: undefined
  113. },
  114. showEditModal: false, // 默认关闭弹窗
  115. itemId: null, // 编辑行id
  116. // 表头
  117. columns: [{
  118. title: '序号',
  119. dataIndex: 'no',
  120. width: 60,
  121. align: 'center'
  122. },
  123. {
  124. title: '创建时间',
  125. width: 100,
  126. dataIndex: 'createDate',
  127. align: 'center'
  128. },
  129. {
  130. title: '活动名称',
  131. width: 100,
  132. dataIndex: 'activeName',
  133. align: 'center'
  134. },
  135. {
  136. title: '活动时间',
  137. width: 100,
  138. align: 'center',
  139. scopedSlots: {
  140. customRender: 'actime'
  141. }
  142. },
  143. {
  144. title: '状态',
  145. width: 100,
  146. dataIndex: 'state',
  147. align: 'center',
  148. scopedSlots: {
  149. customRender: 'state'
  150. }
  151. },
  152. {
  153. title: '操作',
  154. align: 'center',
  155. width: 100,
  156. scopedSlots: {
  157. customRender: 'action'
  158. }
  159. }
  160. ],
  161. // 加载数据方法 必须为 Promise 对象
  162. loadData: parameter => {
  163. return getLuckyDrawList(
  164. Object.assign(parameter, this.searchData)
  165. ).then(res => {
  166. const no = (res.data.pageNo - 1) * res.data.pageSize
  167. if (res.status == 200) {
  168. for (let i = 0; i < res.data.list.length; i++) {
  169. const _item = res.data.list[i]
  170. _item.no = no + i + 1
  171. }
  172. return res.data
  173. }
  174. })
  175. }
  176. }
  177. },
  178. methods: {
  179. showModal () {
  180. this.itemId = null
  181. this.showEditModal = true
  182. },
  183. // 编辑
  184. handleEdit (record) {
  185. this.itemId = record.id
  186. this.showEditModal = true
  187. },
  188. // 删除
  189. handleDel (record) {
  190. this.$confirm({
  191. title: '警告',
  192. centered: true,
  193. content: '删除后无法恢复,确认删除?',
  194. okText: '确定',
  195. cancelText: '取消',
  196. onOk: () => {
  197. deleteLuckyDraw({
  198. id: record.id
  199. }).then(res => {
  200. if (res.status == 200) {
  201. this.$message.success(res.message)
  202. this.$refs.table.refresh()
  203. }
  204. })
  205. }
  206. })
  207. },
  208. // 查看
  209. handleView (record) {
  210. },
  211. // 重置
  212. resetForm () {
  213. this.searchData.activeName = ''
  214. this.searchData.state = ''
  215. this.$refs.table.refresh(true)
  216. },
  217. // 取消添加编辑
  218. cancel () {
  219. this.itemId = null
  220. this.showEditModal = false
  221. this.resetForm()
  222. },
  223. // 更改启用禁用状态
  224. changeFlagHandle (text, record) {
  225. const _this = this
  226. const _data = {
  227. id: record.id,
  228. state: record.state == 1 ? '0' : '1'
  229. }
  230. enableLuckyDraw(_data).then(res => {
  231. if (res.status == 200) {
  232. _this.$message.success(res.message)
  233. _this.$refs.table.refresh()
  234. } else {
  235. record.state = !record.state
  236. }
  237. })
  238. },
  239. beforeRouteEnter (to, from, next) {
  240. next(vm => {
  241. vm.resetForm()
  242. })
  243. }
  244. }
  245. }
  246. </script>
  247. <style lang="less">
  248. .lotterySet-page-info{
  249. .lotterySet-search{
  250. .ant-form-inline .ant-form-item{
  251. width: 100%;
  252. }
  253. // 搜索框的下间距
  254. .ant-form-item {
  255. margin-bottom: 10px;
  256. }
  257. .handle-btn{
  258. margin-top: 4px;
  259. }
  260. .serach-btn{
  261. margin-right: 10px;
  262. }
  263. }
  264. .addBtn {
  265. margin-bottom: 20px;
  266. }
  267. }
  268. </style>