|
@@ -0,0 +1,214 @@
|
|
|
|
+<template>
|
|
|
|
+ <ContentWrap>
|
|
|
|
+
|
|
|
|
+ <el-form :model="queryParams" ref="queryFormRef" class="-mb-15px" :inline="true" label-width="68px">
|
|
|
|
+
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button @click="handleQuery">
|
|
|
|
+ <Icon class="mr-5px" icon="ep:search" />
|
|
|
|
+ 搜索
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button @click="resetQuery">
|
|
|
|
+ <Icon class="mr-5px" icon="ep:refresh" />
|
|
|
|
+ 重置
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-hasPermi="['shop:banner:add']"
|
|
|
|
+ plain
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="openForm('create')"
|
|
|
|
+ >
|
|
|
|
+ <Icon class="mr-5px" icon="ep:plus" />
|
|
|
|
+ 新增
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-hasPermi="['shop:banner:export']"
|
|
|
|
+ :loading="exportLoading"
|
|
|
|
+ plain
|
|
|
|
+ type="success"
|
|
|
|
+ @click="handleExport"
|
|
|
|
+ >
|
|
|
|
+ <Icon class="mr-5px" icon="ep:download" />
|
|
|
|
+ 导出
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </ContentWrap>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <ContentWrap>
|
|
|
|
+ <el-table v-loading="loading" :data="list">
|
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
|
+ <el-table-column label="轮播位置" align="center" prop="position" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{$selectDictLabel(positionOptions,scope.row.position,"id","label")}}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="轮播状态" align="center" prop="state" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <show-tag :data="stateOptions" :value="scope.row.state" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="轮播图片地址" align="center" prop="image" />
|
|
|
|
+ <el-table-column label="轮播类型" align="center" prop="mode" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{$selectDictLabel(modeOptions,scope.row.mode,"id","label")}}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="跳转地址" align="center" prop="url" />
|
|
|
|
+ <el-table-column label="排序权重" align="center" prop="sort" />
|
|
|
|
+ <el-table-column label="更新人" align="center" prop="updateBy" />
|
|
|
|
+ <el-table-column label="最后修改时间" align="center" prop="updateTime" width="180">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <span>{{ $formatTime(scope.row.updateTime,'YYYY-MM-DD HH:mm:ss')}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="轮播终端类型" align="center" prop="terminal" >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{$selectDictLabel(terminalOptions,scope.row.terminal,"id","label")}}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-button
|
|
|
|
+ size="mini"
|
|
|
|
+ type="text"
|
|
|
|
+ icon="el-icon-edit"
|
|
|
|
+ @click="openForm('update', scope.row.id)"
|
|
|
|
+ v-hasPermi="['shop:banner:edit']"
|
|
|
|
+ >修改</el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ size="mini"
|
|
|
|
+ type="text"
|
|
|
|
+ icon="el-icon-delete"
|
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
|
+ v-hasPermi="['shop:banner:remove']"
|
|
|
|
+ >删除</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+
|
|
|
|
+ <Pagination
|
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
|
+ v-model:page="queryParams.pageNo"
|
|
|
|
+ :total="total"
|
|
|
|
+ @pagination="getList"
|
|
|
|
+ />
|
|
|
|
+ </ContentWrap>
|
|
|
|
+
|
|
|
|
+ <BannerForm ref="formRef" @success="getList" />
|
|
|
|
+</template>
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
|
|
|
+import { dateFormatter } from '@/utils/formatTime'
|
|
|
|
+import download from '@/utils/download'
|
|
|
|
+import BannerForm from './BannerForm.vue'
|
|
|
|
+import * as BannerApi from '@/api/shop/banner'
|
|
|
|
+defineOptions({ name: 'Banner' })
|
|
|
|
+/**变量*/
|
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
|
+const total = ref(0) // 列表的总页数
|
|
|
|
+const list = ref([]) // 列表的数据
|
|
|
|
+const queryParams = reactive({
|
|
|
|
+ pageNo: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ createTime: []
|
|
|
|
+})
|
|
|
|
+//轮播位置本地数据
|
|
|
|
+
|
|
|
|
+let positionOptions = [
|
|
|
|
+ {id:1,label:"首页",color:"#F5F5F5"},
|
|
|
|
+ {id:2,label:"商品列表页",color:"#6495ED"},
|
|
|
|
+ {id:3,label:"商品详情页",color:" #43CD80"}]
|
|
|
|
+
|
|
|
|
+//轮播状态本地数据
|
|
|
|
+
|
|
|
|
+let stateOptions = [
|
|
|
|
+ {id:1,label:"禁用",color:"#F5F5F5"},
|
|
|
|
+ {id:2,label:"启用",color:"#6495ED"}]
|
|
|
|
+
|
|
|
|
+//轮播类型本地数据
|
|
|
|
+
|
|
|
|
+let modeOptions = [
|
|
|
|
+ {id:1,label:"图片",color:"#F5F5F5"},
|
|
|
|
+ {id:2,label:"视频",color:"#6495ED"},
|
|
|
|
+ {id:3,label:"文字",color:" #43CD80"}]
|
|
|
|
+
|
|
|
|
+//轮播终端类型本地数据
|
|
|
|
+
|
|
|
|
+let terminalOptions = [
|
|
|
|
+ {id:1,label:"pc",color:"#F5F5F5"},
|
|
|
|
+ {id:2,label:"2html5",color:"#6495ED"},
|
|
|
|
+ {id:3,label:"app",color:" #43CD80"},
|
|
|
|
+ {id:4,label:"微信小程序",color:"#FF4040"},
|
|
|
|
+ {id:5,label:"其它",color:"#6495ED"}]
|
|
|
|
+
|
|
|
|
+/**窗体*/
|
|
|
|
+const queryFormRef = ref() // 搜索的表单
|
|
|
|
+/** 添加/修改操作窗体 */
|
|
|
|
+const formRef = ref()
|
|
|
|
+const exportLoading = ref(false) // 导出的加载中
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+/** 查询列表 */
|
|
|
|
+const getList = async () => {
|
|
|
|
+ loading.value = true
|
|
|
|
+ try {
|
|
|
|
+ const data = await BannerApi.getBannerPage(queryParams)
|
|
|
|
+ list.value = data.list
|
|
|
|
+ total.value = data.total
|
|
|
|
+ } finally {
|
|
|
|
+ loading.value = false
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 搜索按钮操作 */
|
|
|
|
+const handleQuery = () => {
|
|
|
|
+ queryParams.pageNo = 1
|
|
|
|
+ getList()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 重置按钮操作 */
|
|
|
|
+const resetQuery = () => {
|
|
|
|
+ queryFormRef.value.resetFields()
|
|
|
|
+ handleQuery()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+/** 删除按钮操作 */
|
|
|
|
+const handleDelete = async (row: number) => {
|
|
|
|
+ try {
|
|
|
|
+ // 删除的二次确认
|
|
|
|
+ await message.delConfirm()
|
|
|
|
+ // 发起删除
|
|
|
|
+ await BannerApi.deleteBanner([row.id])
|
|
|
|
+ message.success(t('common.delSuccess'))
|
|
|
|
+ // 刷新列表
|
|
|
|
+ await getList()
|
|
|
|
+ } catch {}
|
|
|
|
+}
|
|
|
|
+const openForm = (type: string, id?: number) => {
|
|
|
|
+ formRef.value.open(type, id)
|
|
|
|
+}
|
|
|
|
+/** 导出按钮操作 */
|
|
|
|
+const handleExport = async () => {
|
|
|
|
+ try {
|
|
|
|
+ // 导出的二次确认
|
|
|
|
+ await message.exportConfirm()
|
|
|
|
+ // 发起导出
|
|
|
|
+ exportLoading.value = true
|
|
|
|
+ const data = await BannerApi.exportBanner(queryParams)
|
|
|
|
+ download.excel(data, '角色列表.xls')
|
|
|
|
+ } catch {
|
|
|
|
+ } finally {
|
|
|
|
+ exportLoading.value = false
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/** 初始化 **/
|
|
|
|
+onMounted(() => {
|
|
|
|
+ getList()
|
|
|
|
+})
|
|
|
|
+</script>
|