zp_axl_rose/JM-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

轮播图和文章

Browse Source
This commit is contained in:
阿怪
2023-10-27 00:09:58 +08:00
parent 064652cfe9
commit 38bb6eb7d8
11 changed files with 40521 additions and 7251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/view/lbtManage/index.vue
View File

@@ -3,7 +3,7 @@
import api from '@/api/lbt'
// import { toSQLLine } from '@/utils/stringFun'
import WarningBar from '@/components/warningBar/warningBar.vue'
import {ref,onMounted } from 'vue'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
@@ -11,28 +11,28 @@ const route = useRoute()
const dialogFormVisible = ref(false)
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
import {parseTime} from '@/utils'
import { parseTime } from '@/utils'
// 变量
const path = ref(import.meta.env.VITE_BASE_API)
const queryParams = ref({
page:1,
pageSize:10
page: 1,
pageSize: 10
})
const deleteVisible = ref(false)
const lbt_ids = ref([])
const dialogTitle = ref('')
const form = ref({status:'1'})
const form = ref({ status: '1' })
const lbtType_options = ref([
{
label:'首页',
value:1
label: '首页',
value: 1
}
])
const rules = ref({
lbtName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
lbtUrl: [{ required: true, message: '请选择素材', trigger: 'blur' }],
lbtSkipUrl:[{ required: true, message: '请填写跳转链接', trigger: 'blur' }],
lbtType:[{ required: true, message: '请选择展示位置', trigger: 'blur' }]
// lbtName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
imgUrl: [{ required: true, message: '请选择素材', trigger: 'blur' }],
link: [{ required: true, message: '请填写跳转链接', trigger: 'blur' }],
// lbtType: [{ required: true, message: '请选择展示位置', trigger: 'blur' }]
})
const ruleFormRef = ref(null)
const tableData = ref([])
@@ -44,8 +44,8 @@ onMounted(() => {
// 方法
async function getLbtList() {
const res = await api.getLbtManageList(queryParams.value)
if(res.code === 0) {
tableData.value = res.data.records
if (res.code === 0) {
tableData.value = res.data.list
total.value = res.data.total
}
}
@@ -54,10 +54,10 @@ function openDialog(type) {
switch (type) {
case 'add':
dialogTitle.value = '新增轮播图'
break;
break
case 'edit':
dialogTitle.value = '编辑轮播图'
break;
break
}
}
async function onDelete() {
@@ -77,11 +77,11 @@ async function onDelete() {
}
function closeDialog() {
dialogFormVisible.value = false
form.value = {status:'1'}
form.value = { status: '1' }
}
function handleAvatarSuccess(res) {
console.log(res)
form.value.lbtUrl = res.data.file.url
form.value.imgUrl = res.data.file.url
}
function beforeAvatarUpload(file) {
const isLt05M = file.size / 1024 / 1024 < 20
@@ -98,7 +98,7 @@ function enterDialog() {
console.log(form.value)
submitForm(ruleFormRef.value)
}
const submitForm = async (formEl) => {
const submitForm = async(formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
@@ -110,23 +110,26 @@ const submitForm = async (formEl) => {
})
}
async function saveForm() {
let func_name = ''
if(form.value.banner_id){ // 编辑
func_name = 'editLbtManage'
form.value.status = parseInt(form.value.status)
form.value.linkType = parseInt(form.value.linkType)
form.value.lbtType = parseInt(form.value.lbtType)
const params = { // 新参数
imgUrl: form.value.imgUrl,
link: form.value.link
}
else{
let func_name = ''
if (form.value.ID) { // 编辑
func_name = 'editLbtManage'
params.id = form.value.ID
} else {
func_name = 'addLbtManage'
}
form.value.status = parseInt(form.value.status)
form.value.lbtSkipUrlType = parseInt(form.value.lbtSkipUrlType)
form.value.lbtType = parseInt(form.value.lbtType)
const res = await api[func_name](form.value)
if(res.code === 0)
{
ElMessage({
type: 'success',
message: '操作成功!'
})
const res = await api[func_name](params)
if (res.code === 0) {
ElMessage({
type: 'success',
message: '操作成功!'
})
getLbtList()
closeDialog()
}
@@ -144,23 +147,23 @@ function delLbtFunc(item) {
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
console.log(1)
const res = await api.delLbt({
ids:[item.banner_id]
})
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!'
.then(async() => {
const res = await api.delLbt({
// ids: [item.ID]
id: item.ID
})
// if (tableData.value.length === 1 && page.value > 1) {
// page.value--
// }
getLbtList()
}
},() => {
})
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!'
})
// if (tableData.value.length === 1 && page.value > 1) {
// page.value--
// }
getLbtList()
}
}, () => {
})
}
function handleCurrentChange(val) {
queryParams.value.page = val
@@ -183,32 +186,32 @@ function handleSizeChange(val) {
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<!-- <template #reference>
<el-button icon="delete" size="small" type="danger" :disabled="!lbt_ids.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
</template>
</template> -->
</el-popover>
</div>
<!-- 数据列表-->
<el-table border :data="tableData" @selection-change="handleSelectionChange">
<el-table-column
<!-- <el-table-column
type="selection"
width="55"
/>
<el-table-column align="left" label="名称" min-width="150" prop="lbtName" />
<el-table-column align="left" label="缩略图" min-width="150" prop="lbtUrl">
/> -->
<!-- <el-table-column align="left" label="名称" min-width="150" prop="lbtName" /> -->
<el-table-column align="left" label="缩略图" min-width="150" prop="imgUrl">
<template #default="scope">
<img class="lbt-thumb" :src="scope.row.lbtUrl" alt="">
<img class="lbt-thumb" :src="scope.row.imgUrl" alt="">
</template>
</el-table-column>
<el-table-column align="left" label="是否启用" min-width="150" prop="status" >
<el-table-column align="left" label="是否启用" min-width="150" prop="status">
<template #default="scope">
{{scope.row.status == '1'?'启用':'禁用'}}
{{ scope.row.status == '1'?'启用':'禁用' }}
</template>
</el-table-column>
<el-table-column align="left" label="说明" min-width="150" prop="lbtIntroduction" />
<!-- <el-table-column align="left" label="说明" min-width="150" prop="lbtIntroduction" /> -->
<el-table-column align="left" label="更新时间" min-width="150" prop="UpdatedAt">
<template #default="scope">
{{parseTime(scope.row.UpdatedAt)}}
{{ parseTime(scope.row.UpdatedAt) }}
</template>
</el-table-column>
<el-table-column align="left" label="操作" min-width="150" prop="status">
@@ -245,10 +248,10 @@ function handleSizeChange(val) {
<!--新增、编辑 窗口-->
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="名称" prop="lbtName">
<!-- <el-form-item label="名称" prop="lbtName">
<el-input v-model="form.lbtName" placeholder="请输入名称" autocomplete="off" />
</el-form-item>
<el-form-item label="素材" prop="lbtUrl">
</el-form-item> -->
<el-form-item label="素材" prop="imgUrl">
<el-upload
class="avatar-uploader"
:action="`${path}/fileUploadAndDownload/upload`"
@@ -257,23 +260,23 @@ function handleSizeChange(val) {
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="form.lbtUrl" :src="form.lbtUrl" class="img-container" />
<img v-if="form.imgUrl" :src="form.imgUrl" class="img-container">
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="说明" prop="lbtIntroduction">
<!-- <el-form-item label="说明" prop="lbtIntroduction">
<el-input v-model="form.lbtIntroduction" placeholder="说明" autocomplete="off" />
</el-form-item>
<el-form-item label="链接状态" prop="method">
<el-switch v-model="form.lbtSkipUrlType" :active-value="1" :inactive-value="2" active-text="外链" inactive-text="内链" />
<el-switch v-model="form.linkType" :active-value="1" :inactive-value="2" active-text="外链" inactive-text="内链" />
</el-form-item> -->
<el-form-item label="链接地址" prop="link">
<el-input v-model="form.link" placeholder="链接地址" autocomplete="off" />
</el-form-item>
<el-form-item label="链接地址" prop="lbtSkipUrl">
<el-input v-model="form.lbtSkipUrl" placeholder="链接地址" autocomplete="off" />
</el-form-item>
<el-form-item label="启用状态" prop="status">
<!-- <el-form-item label="启用状态" prop="status">
<el-switch v-model="form.status" :active-value="1" :inactive-value="2" active-text="启用" inactive-text="禁用" />
</el-form-item>
<el-form-item label="展示位置" prop="lbtType">
</el-form-item> -->
<!-- <el-form-item label="展示位置" prop="lbtType">
<el-select v-model="form.lbtType" class="m-2" placeholder="请选择">
<el-option
v-for="item in lbtType_options"
@@ -282,7 +285,7 @@ function handleSizeChange(val) {
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item style="display: none">
<el-button type="primary" @click="submitForm(ruleFormRef)">
Create