zzc/api-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cos upload

Browse Source
This commit is contained in:
zzc
2025-04-30 23:34:59 +08:00
parent 939c43f281
commit 496a0cce52
32 changed files with 475 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/cxshMini/anli/article/index.vue
View File

@@ -2,34 +2,27 @@
<div class="cxshMini-article-container">
<el-button style="margin-bottom: 10px" type="primary" @click="handlePublish">发布</el-button>
<el-form ref="form" label-width="80px" :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model.trim="form.username" autocomplete="off" />
<el-form-item label="标题" prop="title">
<el-input v-model.trim="form.title" autocomplete="off" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model.trim="form.password" autocomplete="off" type="password" />
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model.trim="form.nickname" autocomplete="off" />
</el-form-item>
<el-form-item label="权限" prop="permissions">
<el-select v-model="form.permissions" multiple placeholder="请选择权限">
<el-option v-for="item in permissionList" :key="item.id" :label="item.name" :value="item.id" />
<el-form-item label="分类" prop="categoryId">
<el-select v-model="form.categoryId" placeholder="请选择分类">
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="应用" prop="appId">
<el-select v-model="form.appId" placeholder="请选择应用">
<el-option v-for="item in applicationList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-form-item label="描述" prop="desc">
<el-input v-model.trim="form.desc" autocomplete="off" />
</el-form-item>
<el-form-item label="头像" prop="avatar">
<el-form-item label="封面" prop="coverUrl">
<single-upload
style="width: 100px; height: 100px"
upload-url="http://127.0.0.1:3999/management/api/common/upload"
:value="form.coverUrl"
@upload-success="handleUploadSuccess"
/>
</el-form-item>
</el-form>
<quill-editor v-model="content" :options="editorOptions" />
<quill-editor v-model="form.content" :options="editorOptions" />
</div>
</template>
@@ -37,6 +30,8 @@
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import SingleUpload from '@/components/SingleUpload'
import { getList as getCategoryList } from '@/api/miniAnliCategory'
import { getArticle, doAdd, doEdit } from '@/api/miniAnli'
export default {
name: 'CxshMiniArticle',
@@ -44,22 +39,20 @@
data() {
return {
form: {
username: '',
password: '',
nickname: '',
permissions: '',
appId: '',
avatar: '',
title: '',
categoryId: '',
desc: '',
coverUrl: '',
content: '',
},
permissionList: [],
applicationList: [],
categoryList: [],
rules: {
username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
permissions: [{ required: true, trigger: 'blur', message: '请选择权限' }],
appId: [{ required: true, trigger: 'blur', message: '请选择应用' }],
title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
categoryId: [{ required: true, trigger: 'blur', message: '请选择分类' }],
coverUrl: [{ required: true, trigger: 'blur', message: '请上传封面' }],
content: [{ required: true, trigger: 'blur', message: '请输入内容' }],
},
content: '',
articleId: '',
editorOptions: {
theme: 'snow',
},
@@ -67,15 +60,45 @@
},
created() {
this.fetchData()
this.articleId = this.$route.query.id
if (this.articleId) {
this.fetchArticle()
}
},
methods: {
handlePublish() {
console.log(11111, this.content)
console.log('发布')
if (this.articleId) {
this.$refs['form'].validate(async (valid) => {
if (valid) {
await doEdit(this.articleId, this.form)
this.$baseMessage('编辑成功', 'success')
this.$router.push(`/cxshMini/anli/list`)
} else {
return false
}
})
} else {
this.$refs['form'].validate(async (valid) => {
if (valid) {
await doAdd(this.form)
this.$baseMessage('发布成功', 'success')
this.$router.push(`/cxshMini/anli/list`)
} else {
return false
}
})
}
},
async fetchData() {},
handleUploadSuccess(res) {
this.form.avatar = res.data.url
async fetchData() {
const { data } = await getCategoryList(this.queryForm)
this.categoryList = data.list
},
handleUploadSuccess(url) {
this.form.coverUrl = url
},
async fetchArticle() {
const { data } = await getArticle(this.articleId)
this.form = data
},
},
}

4
src/views/cxshMini/anli/category/components/CxshMiniAnliCategoryEdit.vue
View File

@@ -17,7 +17,7 @@
</template>
<script>
import { doEdit, doAdd } from '@/api/roleManagement'
import { doEdit, doAdd } from '@/api/miniAnliCategory'
export default {
name: 'CxshMiniAnliCategoryEdit',
@@ -59,7 +59,7 @@
save() {
this.$refs['form'].validate(async (valid) => {
if (valid) {
if (this.id) {
if (this.title === '编辑') {
const { msg } = await doEdit(this.id, this.form)
this.$baseMessage(msg, 'success')
} else {

3
src/views/cxshMini/anli/category/index.vue
View File

@@ -20,7 +20,6 @@
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
<el-table-column show-overflow-tooltip type="selection" />
<el-table-column label="名称" prop="name" show-overflow-tooltip />
<el-table-column label="权限码" prop="permission" show-overflow-tooltip />
<el-table-column label="描述" prop="desc" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip width="200">
<template #default="{ row }">
@@ -43,7 +42,7 @@
</template>
<script>
import { doDelete, getList } from '@/api/roleManagement'
import { doDelete, getList } from '@/api/miniAnliCategory'
import Edit from './components/CxshMiniAnliCategoryEdit'
export default {

124
src/views/cxshMini/anli/list/index.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<div class="cxshMini-anli-category-container">
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加案例</el-button>
</vab-query-form-left-panel>
<vab-query-form-right-panel :span="12">
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
<el-form-item>
<el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
</el-form-item>
</el-form>
</vab-query-form-right-panel>
</vab-query-form>
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
<el-table-column show-overflow-tooltip type="selection" />
<el-table-column align="center" label="封面" prop="coverUrl" show-overflow-tooltip>
<template #default="{ row }">
<el-image :src="row.coverUrl" style="width: 100px; height: 100px" />
</template>
</el-table-column>
<el-table-column align="center" label="标题" prop="title" show-overflow-tooltip />
<el-table-column align="center" label="分类" prop="categoryName" show-overflow-tooltip />
<el-table-column align="center" label="作者" prop="authorName" show-overflow-tooltip />
<el-table-column align="center" label="修改时间" show-overflow-tooltip>
<template #default="{ row }">
{{ formatTime(row.updatedAt) }}
</template>
</el-table-column>
<el-table-column align="center" label="操作" show-overflow-tooltip width="200">
<template #default="{ row }">
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:current-page="queryForm.pageNo"
:layout="layout"
:page-size="queryForm.pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</template>
<script>
import { doDelete, getList } from '@/api/miniAnli'
import { formatTime } from '@/utils'
export default {
name: 'CxshMiniAnliList',
data() {
return {
list: null,
listLoading: true,
layout: 'total, sizes, prev, pager, next, jumper',
total: 0,
selectRows: '',
elementLoadingText: '正在加载...',
queryForm: {
pageNo: 1,
pageSize: 10,
permission: '',
},
timeOutID: null,
}
},
created() {
this.fetchData()
},
beforeDestroy() {
clearTimeout(this.timeOutID)
},
methods: {
formatTime,
setSelectRows(val) {
this.selectRows = val
},
handleEdit(row) {
if (row.id) {
this.$router.push(`/cxshMini/anli/article?id=${row.id}`)
} else {
this.$router.push(`/cxshMini/anli/article`)
}
},
handleDelete(row) {
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
const { msg } = await doDelete({ ids: [row.id] })
this.$baseMessage(msg, 'success')
this.fetchData()
})
},
handleSizeChange(val) {
this.queryForm.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.queryForm.pageNo = val
this.fetchData()
},
queryData() {
this.queryForm.pageNo = 1
this.fetchData()
},
async fetchData() {
this.listLoading = true
const { data } = await getList(this.queryForm)
this.list = data.list
this.total = data.totalCount
this.timeOutID = setTimeout(() => {
this.listLoading = false
}, 300)
},
},
}
</script>

39
src/views/cxshMini/lianxi/member/components/AppManagementEdit.vue → src/views/cxshMini/home/banner/components/BannerEdit.vue
View File

@@ -1,23 +1,14 @@
<template>
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
<el-form ref="form" label-width="80px" :model="form" :rules="rules">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" autocomplete="off" />
<el-form-item label="描述" prop="desc">
<el-input v-model="form.desc" autocomplete="off" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择 APP 类型">
<el-option label="小程序" :value="1" />
<el-option label="H5" :value="2" />
<el-option label="后台管理" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" autocomplete="off" />
</el-form-item>
<el-form-item label="APP图标" prop="appIcon">
<el-form-item label="轮播图片" prop="appIcon">
<single-upload
style="width: 100px; height: 100px"
upload-url="http://127.0.0.1:3999/management/api/common/upload"
:value="form.url"
@upload-success="handleUploadSuccess"
/>
</el-form-item>
@@ -31,24 +22,21 @@
</template>
<script>
import { doEdit, doAdd } from '@/api/appManagement'
import { doEdit, doAdd } from '@/api/banner'
import SingleUpload from '@/components/SingleUpload'
export default {
name: 'AppManagementEdit',
name: 'BannerEdit',
components: { SingleUpload },
data() {
return {
id: '',
form: {
name: '',
type: '',
description: '',
icon: '',
desc: '',
url: '',
},
rules: {
name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
type: [{ required: true, trigger: 'blur', message: '请选择类型' }],
url: [{ required: true, trigger: 'blur', message: '请上传 banner' }],
},
title: '',
dialogFormVisible: false,
@@ -57,7 +45,7 @@
created() {},
methods: {
handleUploadSuccess(url) {
this.form.icon = url
this.form.url = url
},
showEdit(row) {
if (!row) {
@@ -65,9 +53,8 @@
} else {
this.title = '编辑'
this.form = {
name: row.name,
description: row.description,
icon: row.icon,
desc: row.desc,
url: row.url,
}
this.id = row.id
}
@@ -81,7 +68,7 @@
save() {
this.$refs['form'].validate(async (valid) => {
if (valid) {
if (this.id) {
if (this.title === '编辑') {
const { msg } = await doEdit(this.id, this.form)
this.$baseMessage(msg, 'success')
} else {

41
src/views/cxshMini/home/banner/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<div class="appManagement-container">
<el-divider content-position="left">
演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
</el-divider>
<div class="banner-container">
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
@@ -22,23 +19,20 @@
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
<el-table-column show-overflow-tooltip type="selection" />
<el-table-column align="center" label="图标" width="100">
<el-table-column align="center" label="顺序" prop="sort" show-overflow-tooltip />
<el-table-column align="center" label="图片" width="100">
<template slot-scope="scope">
<!-- 使用 show-overflow-tooltip 显示图片，并添加 tooltip -->
<el-tooltip class="item" :content="scope.row.name" effect="dark" placement="top">
<img alt="image" :src="scope.row.icon" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
<img alt="image" :src="scope.row.url" style="width: 50px; height: 50px; object-fit: cover" />
</el-tooltip>
</template>
</el-table-column>
<el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
<el-table-column align="center" label="类型" show-overflow-tooltip>
<template #default="{ row }">
{{ row.type === 1 ? '小程序' : row.type === 2 ? 'H5' : '后台管理' }}
</template>
</el-table-column>
<el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip width="200">
<el-table-column align="center" label="描述" prop="desc" show-overflow-tooltip />
<el-table-column align="center" label="操作" show-overflow-tooltip width="200">
<template #default="{ row }">
<el-button :disabled="!row.canUp" type="text" @click="moveUp(row.id)">上移</el-button>
<el-button :disabled="!row.canDown" type="text" @click="moveDown(row.id)">下移</el-button>
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
@@ -58,12 +52,11 @@
</template>
<script>
import { doDelete, getList } from '@/api/appManagement'
import { formatTime } from '@/utils'
import Edit from './components/AppManagementEdit'
import { getList, doDelete, doMoveUp, doMoveDown } from '@/api/banner'
import Edit from './components/BannerEdit.vue'
export default {
name: 'AppManagement',
name: 'Banner',
components: { Edit },
data() {
return {
@@ -141,6 +134,18 @@
this.listLoading = false
}, 300)
},
async moveUp(id) {
console.log('moveUp', id)
await doMoveUp(id)
this.$baseMessage('移动成功', 'success')
this.fetchData()
},
async moveDown(id) {
await doMoveDown(id)
this.$baseMessage('移动成功', 'success')
this.fetchData()
},
},
}
</script>

46
src/views/cxshMini/home/banner/components/AppManagementEdit.vue → src/views/cxshMini/lianxi/member/components/AppMemberEdit.vue
View File

@@ -1,26 +1,23 @@
<template>
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
<el-form ref="form" label-width="80px" :model="form" :rules="rules">
<el-form-item label="名称" prop="name">
<el-form-item label="昵称" prop="name">
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择 APP 类型">
<el-option label="小程序" :value="1" />
<el-option label="H5" :value="2" />
<el-option label="后台管理" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" autocomplete="off" />
</el-form-item>
<el-form-item label="APP图标" prop="appIcon">
<el-form-item label="照片" prop="appIcon">
<single-upload
style="width: 100px; height: 100px"
upload-url="http://127.0.0.1:3999/management/api/common/upload"
:value="form.url"
@upload-success="handleUploadSuccess"
/>
</el-form-item>
<el-form-item label="格言" prop="maxim">
<el-input v-model="form.maxim" autocomplete="off" />
</el-form-item>
<el-form-item label="标签" prop="tags">
<el-input v-model="form.tags" autocomplete="off" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -31,24 +28,26 @@
</template>
<script>
import { doEdit, doAdd } from '@/api/appManagement'
import { doEdit, doAdd } from '@/api/miniMember'
import SingleUpload from '@/components/SingleUpload'
export default {
name: 'AppManagementEdit',
name: 'MemberEdit',
components: { SingleUpload },
data() {
return {
id: '',
form: {
name: '',
type: '',
description: '',
icon: '',
url: '',
maxim: '',
tags: '',
},
rules: {
name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
type: [{ required: true, trigger: 'blur', message: '请选择类型' }],
url: [{ required: true, trigger: 'blur', message: '请上传照片' }],
maxim: [{ required: true, trigger: 'blur', message: '请填写格言' }],
tags: [{ required: true, trigger: 'blur', message: '请填写标签' }],
name: [{ required: true, trigger: 'blur', message: '请填写昵称' }],
},
title: '',
dialogFormVisible: false,
@@ -57,7 +56,7 @@
created() {},
methods: {
handleUploadSuccess(url) {
this.form.icon = url
this.form.url = url
},
showEdit(row) {
if (!row) {
@@ -66,8 +65,9 @@
this.title = '编辑'
this.form = {
name: row.name,
description: row.description,
icon: row.icon,
url: row.url,
tags: row.tags,
maxim: row.maxim,
}
this.id = row.id
}
@@ -81,7 +81,7 @@
save() {
this.$refs['form'].validate(async (valid) => {
if (valid) {
if (this.id) {
if (this.title === '编辑') {
const { msg } = await doEdit(this.id, this.form)
this.$baseMessage(msg, 'success')
} else {

43
src/views/cxshMini/lianxi/member/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<div class="appManagement-container">
<el-divider content-position="left">
演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
</el-divider>
<div class="member-container">
<vab-query-form>
<vab-query-form-left-panel :span="12">
<el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
@@ -22,23 +19,28 @@
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
<el-table-column show-overflow-tooltip type="selection" />
<el-table-column align="center" label="图标" width="100">
<el-table-column align="center" label="顺序" prop="sort" show-overflow-tooltip />
<el-table-column align="center" label="照片" width="100">
<template slot-scope="scope">
<!-- 使用 show-overflow-tooltip 显示图片，并添加 tooltip -->
<el-tooltip class="item" :content="scope.row.name" effect="dark" placement="top">
<img alt="image" :src="scope.row.icon" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
<img alt="image" :src="scope.row.url" style="width: 50px; height: 50px; object-fit: cover" />
</el-tooltip>
</template>
</el-table-column>
<el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
<el-table-column align="center" label="类型" show-overflow-tooltip>
<el-table-column align="center" label="昵称" prop="name" show-overflow-tooltip />
<el-table-column align="center" label="格言" prop="maxim" show-overflow-tooltip />
<el-table-column align="center" label="标签" show-overflow-tooltip>
<template #default="{ row }">
{{ row.type === 1 ? '小程序' : row.type === 2 ? 'H5' : '后台管理' }}
<el-tag v-for="(item, index) in row.tags.split(',')" :key="index">
{{ item }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip width="200">
<el-table-column align="center" label="操作" show-overflow-tooltip width="200">
<template #default="{ row }">
<el-button :disabled="!row.canUp" type="text" @click="moveUp(row.id)">上移</el-button>
<el-button :disabled="!row.canDown" type="text" @click="moveDown(row.id)">下移</el-button>
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
@@ -58,12 +60,11 @@
</template>
<script>
import { doDelete, getList } from '@/api/appManagement'
import { formatTime } from '@/utils'
import Edit from './components/AppManagementEdit'
import { getList, doDelete, doMoveUp, doMoveDown } from '@/api/miniMember'
import Edit from './components/AppMemberEdit'
export default {
name: 'AppManagement',
name: 'Member',
components: { Edit },
data() {
return {
@@ -141,6 +142,18 @@
this.listLoading = false
}, 300)
},
async moveUp(id) {
console.log('moveUp', id)
await doMoveUp(id)
this.$baseMessage('移动成功', 'success')
this.fetchData()
},
async moveDown(id) {
await doMoveDown(id)
this.$baseMessage('移动成功', 'success')
this.fetchData()
},
},
}
</script>