GoodsCouponUserView.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <template>
  2. <div class="back-form-container">
  3. <div>
  4. <el-form :model="query" label-width="80px" :inline="true">
  5. <el-form-item label="用户id" prop="userId"> <el-text class="mx-1">{{query.userId}}</el-text>
  6. </el-form-item>
  7. <el-form-item label="优惠券id" prop="couponId"> <el-text class="mx-1">{{query.couponId}}</el-text>
  8. </el-form-item>
  9. <el-form-item label="领取时间" prop="collectionTime"> <el-text class="mx-1">{{query.collectionTime}}</el-text>
  10. </el-form-item>
  11. <el-form-item label="状态,已使用2,未使用1,已过期0" prop="state"> <el-text class="mx-1">{{query.state}}</el-text>
  12. </el-form-item>
  13. </el-form>
  14. </div>
  15. <div class="back-table-handler">
  16. <el-row :gutter="10" class="mb8">
  17. <el-col :span="1.5">
  18. <el-button type="primary" plain size="small" @click="getList(pageNum)">
  19. <el-icon>
  20. <RefreshLeft/>
  21. </el-icon>
  22. <span>刷新</span>
  23. </el-button>
  24. </el-col>
  25. <el-col :span="1.5">
  26. <el-button type="primary" plain size="small" @click="openDialog('save', GoodsCouponUser.Create())">
  27. <el-icon>
  28. <Plus/>
  29. </el-icon>
  30. <span>新增</span>
  31. </el-button>
  32. </el-col>
  33. <el-col :span="1.5">
  34. <el-button type="danger" plain size="small" @click="deleteByIds()">
  35. <el-icon>
  36. <Delete/>
  37. </el-icon>
  38. <span>删除</span>
  39. </el-button>
  40. </el-col>
  41. </el-row>
  42. </div>
  43. <div class="back-table">
  44. <el-table v-loading="listLoading" :data="list" @selection-change="selected" border :key="ListKey">
  45. <el-table-column type="selection" width="40" align="center"/>
  46. <el-table-column label="id" align="center" prop="id"/>
  47. <el-table-column label="用户id" align="center" prop="userId"/>
  48. <el-table-column label="优惠券id" align="center" prop="couponId"/>
  49. <el-table-column label="领取时间" align="center" prop="collectionTime"/>
  50. <el-table-column label="状态,已使用2,未使用1,已过期0" align="center" prop="state"/>
  51. <el-table-column label="操作" align="center" fixed="right">
  52. <template #default="scope">
  53. <el-button link type="primary" @click="openDialog('update', scope.row)">修改</el-button>
  54. <el-button link type="danger" @click="deleteById(scope.row.id)">删除</el-button>
  55. </template>
  56. </el-table-column>
  57. </el-table>
  58. <div class="pagination-container">
  59. <el-pagination
  60. background
  61. :current-page="pageNum"
  62. @current-change="getList"
  63. :page-size="pageSize"
  64. :page-sizes="[10, 20, 30, 50,100]"
  65. :total="total"
  66. @size-change="SetPageSized"
  67. layout="total, sizes, prev, pager, next"
  68. />
  69. </div>
  70. <!-- 添加或修改参数配置对话框 -->
  71. <el-dialog :title="dialogType=='update'?'更改字典类型':'新增字典类型'" v-model="open" width="500px" append-to-body>
  72. <el-form ref="dictRef" :model="dialogForm" label-width="80px">
  73. <el-form-item label="用户id" prop="userId"> <el-text class="mx-1">{{dialogForm.userId}}</el-text>
  74. </el-form-item>
  75. <el-form-item label="优惠券id" prop="couponId"> <el-text class="mx-1">{{dialogForm.couponId}}</el-text>
  76. </el-form-item>
  77. <el-form-item label="领取时间" prop="collectionTime"> <el-text class="mx-1">{{dialogForm.collectionTime}}</el-text>
  78. </el-form-item>
  79. <el-form-item label="状态,已使用2,未使用1,已过期0" prop="state"> <el-text class="mx-1">{{dialogForm.state}}</el-text>
  80. </el-form-item>
  81. </el-form>
  82. <template #footer>
  83. <div class="dialog-footer">
  84. <el-button type="primary" @click="submitForm()">确 定</el-button>
  85. <el-button @click="open=false">取 消</el-button>
  86. </div>
  87. </template>
  88. </el-dialog>
  89. </div>
  90. </div>
  91. </template>
  92. <script setup lang="ts">
  93. import {ref} from "vue";
  94. import {
  95. DeleteBaseGoodsCouponUserById,
  96. GetBaseGoodsCouponUserListByGoodsCouponUser,
  97. SaveBaseGoodsCouponUser,
  98. UpdateBaseGoodsCouponUser,
  99. GoodsCouponUser,
  100. GoodsCouponUserQuery
  101. } from "../../../api/back/BaseBackApi.ts";
  102. import {ElMessage} from "element-plus";
  103. import {Delete, Plus, RefreshLeft} from "@element-plus/icons-vue";
  104. import router from "../../../router";
  105. import {store} from "../../../state/TokenState.ts";
  106. import DictTag from "../../../components/dict/DictTag.vue";
  107. import MultipleTag from "../../../components/MultipleTag/MultipleTag.vue";
  108. import ImageUpload from "../../../components/ImageUpload/ImageUpload.vue";
  109. let listLoading = ref(true)
  110. let total = ref(0)
  111. let pageNum = ref(1)
  112. let pageSize = ref(10)
  113. let list = ref<GoodsCouponUser[]>([])
  114. let ListKey = ref(0)
  115. //搜索用
  116. //let search = ref<GoodsCouponUser>(GoodsCouponUser.Create())
  117. //修改,添加用
  118. let open = ref(false)
  119. let dialogType = ref("")//save添加,update修改
  120. let dialogForm = ref<GoodsCouponUser>(null)
  121. let query = ref<GoodsCouponUserQuery>(GoodsCouponUserQuery.Create())
  122. let selectItems = ref<GoodsCouponUser[]>([])
  123. const selected = (arr: GoodsCouponUser[]) => {
  124. selectItems.value = arr
  125. }
  126. getList()
  127. const SetPageSized = (val: number) => {
  128. pageSize.value = val
  129. getList(pageNum.value)
  130. }
  131. function openDialog(type: string, row: GoodsCouponUser) {
  132. open.value = true
  133. dialogType.value = type
  134. if (type==="save"){
  135. dialogForm.value = GoodsCouponUser.Create()
  136. return
  137. }
  138. //深拷贝,不会影响数据
  139. dialogForm.value = JSON.parse(JSON.stringify(row))
  140. }
  141. function deleteByIds() {
  142. for (let i = 0; i < selectItems.value.length; i++) {
  143. deleteById(selectItems[i].id)
  144. }
  145. }
  146. function deleteById(id) {
  147. DeleteBaseGoodsCouponUserById(id).then(response => {
  148. if (response.code == 200) {
  149. ElMessage.success("删除成功,id:" + id)
  150. getList()
  151. } else {
  152. ElMessage.error("删除失败,id:" + id)
  153. }
  154. })
  155. }
  156. function getList(pn = 1) {
  157. pageNum.value = pn
  158. GetBaseGoodsCouponUserListByGoodsCouponUser(query.value, pageNum.value, pageSize.value).then(response => {
  159. let data = response.data
  160. total.value = data.total
  161. list.value = response.data.list
  162. ListKey.value++
  163. listLoading.value = false
  164. })
  165. }
  166. function submitForm() {
  167. switch (dialogType.value) {
  168. case "update":
  169. UpdateBaseGoodsCouponUser(dialogForm.value, dialogForm.value.id).then(response => {
  170. if (response.code == 200) {
  171. open.value = false
  172. getList()
  173. ElMessage.success("修改成功")
  174. } else {
  175. ElMessage.error("修改失败")
  176. }
  177. })
  178. break
  179. case "save":
  180. SaveBaseGoodsCouponUser(dialogForm.value).then(response => {
  181. if (response.code == 200) {
  182. open.value = false
  183. getList()
  184. ElMessage.success("添加成功")
  185. } else {
  186. ElMessage.error("添加失败")
  187. }
  188. })
  189. break
  190. default:
  191. break
  192. }
  193. }
  194. </script>