index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <ContentWrap>
  3. <!-- 搜索工作栏 -->
  4. <el-form
  5. class="-mb-15px"
  6. :model="queryParams"
  7. ref="queryFormRef"
  8. :inline="true"
  9. label-width="68px"
  10. >
  11. <el-form-item label="店铺名称" prop="name">
  12. <el-input
  13. v-model="queryParams.name"
  14. placeholder="请输入店铺名称"
  15. clearable
  16. @keyup.enter="handleQuery"
  17. class="!w-240px"
  18. />
  19. </el-form-item>
  20. <el-form-item label="店铺状态" prop="status">
  21. <el-select
  22. v-model="queryParams.status"
  23. placeholder="请选择店铺状态"
  24. clearable
  25. class="!w-240px"
  26. >
  27. <el-option label="请选择字典生成" value="" />
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="商户id" prop="merchantId">
  31. <el-input
  32. v-model="queryParams.merchantId"
  33. placeholder="请输入商户id"
  34. clearable
  35. @keyup.enter="handleQuery"
  36. class="!w-240px"
  37. />
  38. </el-form-item>
  39. <el-form-item label="创建时间" prop="createTime">
  40. <el-date-picker
  41. v-model="queryParams.createTime"
  42. value-format="YYYY-MM-DD HH:mm:ss"
  43. type="daterange"
  44. start-placeholder="开始日期"
  45. end-placeholder="结束日期"
  46. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  47. class="!w-240px"
  48. />
  49. </el-form-item>
  50. <el-form-item>
  51. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  52. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  53. <el-button
  54. type="primary"
  55. plain
  56. @click="openForm('create')"
  57. v-hasPermi="['sale:shop:create']"
  58. >
  59. <Icon icon="ep:plus" class="mr-5px" /> 新增
  60. </el-button>
  61. <el-button
  62. type="success"
  63. plain
  64. @click="handleExport"
  65. :loading="exportLoading"
  66. v-hasPermi="['sale:shop:export']"
  67. >
  68. <Icon icon="ep:download" class="mr-5px" /> 导出
  69. </el-button>
  70. </el-form-item>
  71. </el-form>
  72. </ContentWrap>
  73. <!-- 列表 -->
  74. <ContentWrap>
  75. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  76. <el-table-column label="店铺id" align="center" prop="id" />
  77. <el-table-column label="店铺名称" align="center" prop="name" />
  78. <el-table-column label="店铺状态" align="center" prop="status" />
  79. <el-table-column label="商户id" align="center" prop="merchantId" />
  80. <el-table-column
  81. label="创建时间"
  82. align="center"
  83. prop="createTime"
  84. :formatter="dateFormatter"
  85. width="180px"
  86. />
  87. <el-table-column label="操作" align="center">
  88. <template #default="scope">
  89. <el-button
  90. link
  91. type="primary"
  92. @click="openForm('update', scope.row.id)"
  93. v-hasPermi="['sale:shop:update']"
  94. >
  95. 编辑
  96. </el-button>
  97. <el-button
  98. link
  99. type="danger"
  100. @click="handleDelete(scope.row.id)"
  101. v-hasPermi="['sale:shop:delete']"
  102. >
  103. 删除
  104. </el-button>
  105. </template>
  106. </el-table-column>
  107. </el-table>
  108. <!-- 分页 -->
  109. <Pagination
  110. :total="total"
  111. v-model:page="queryParams.pageNo"
  112. v-model:limit="queryParams.pageSize"
  113. @pagination="getList"
  114. />
  115. </ContentWrap>
  116. <!-- 表单弹窗:添加/修改 -->
  117. <ShopForm ref="formRef" @success="getList" />
  118. </template>
  119. <script setup lang="ts">
  120. import { dateFormatter } from '@/utils/formatTime'
  121. import download from '@/utils/download'
  122. import { ShopApi, ShopVO } from '@/api/system/sale/shop'
  123. import ShopForm from './ShopForm.vue'
  124. /** 店铺 列表 */
  125. defineOptions({ name: 'Shop' })
  126. const message = useMessage() // 消息弹窗
  127. const { t } = useI18n() // 国际化
  128. const loading = ref(true) // 列表的加载中
  129. const list = ref<ShopVO[]>([]) // 列表的数据
  130. // 列表的总页数
  131. const total = ref(0)
  132. const queryParams = reactive({
  133. pageNo: 1,
  134. pageSize: 10,
  135. name: undefined,
  136. status: undefined,
  137. merchantId: undefined,
  138. createTime: []
  139. })
  140. const queryFormRef = ref() // 搜索的表单
  141. const exportLoading = ref(false) // 导出的加载中
  142. /** 查询列表 */
  143. const getList = async () => {
  144. loading.value = true
  145. try {
  146. const data = await ShopApi.getShopPage(queryParams)
  147. list.value = data.list
  148. total.value = data.total
  149. } finally {
  150. loading.value = false
  151. }
  152. }
  153. /** 搜索按钮操作 */
  154. const handleQuery = () => {
  155. queryParams.pageNo = 1
  156. getList()
  157. }
  158. /** 重置按钮操作 */
  159. const resetQuery = () => {
  160. queryFormRef.value.resetFields()
  161. handleQuery()
  162. }
  163. /** 添加/修改操作 */
  164. const formRef = ref()
  165. const openForm = (type: string, id?: number) => {
  166. formRef.value.open(type, id)
  167. }
  168. /** 删除按钮操作 */
  169. const handleDelete = async (id: number) => {
  170. try {
  171. // 删除的二次确认
  172. await message.delConfirm()
  173. // 发起删除
  174. await ShopApi.deleteShop(id)
  175. message.success(t('common.delSuccess'))
  176. // 刷新列表
  177. await getList()
  178. } catch {}
  179. }
  180. /** 导出按钮操作 */
  181. const handleExport = async () => {
  182. try {
  183. // 导出的二次确认
  184. await message.exportConfirm()
  185. // 发起导出
  186. exportLoading.value = true
  187. const data = await ShopApi.exportShop(queryParams)
  188. download.excel(data, '店铺.xls')
  189. } catch {
  190. } finally {
  191. exportLoading.value = false
  192. }
  193. }
  194. /** 初始化 **/
  195. onMounted(() => {
  196. getList()
  197. })
  198. </script>