114 lines
4.0 KiB
Markdown
114 lines
4.0 KiB
Markdown
## GVA 图库功能
|
||
|
||
### 手动安装方法
|
||
|
||
1.解压zip获得picturelibrary文件夹
|
||
2.将 picturelibrary/web/plugin/picturelibrary 放置在web/plugin下
|
||
3.将 picturelibrary/server/plugin/picturelibrary 放置在server/plugin下
|
||
|
||
#### 执行如下注册方法
|
||
|
||
### 注册（手动自动都需要）
|
||
|
||
#### 1. 前往GVA主程序下的initialize/router.go 在Routers 方法最末尾按照你需要的及安全模式添加本插件
|
||
PluginInit(PrivateGroup, picturelibrary.CreatePictureLibraryPlug())
|
||
到gva系统，角色管理，分配角色的api权限即可，插件会自动注册api，需要手动分配。
|
||
注：会生成一个表：sys_attachment_category，表exa_file_upload_and_downloads会新增一个cat_id字段
|
||
### 2. 配置说明
|
||
|
||
#### 2-1 全局配置结构体说明
|
||
|
||
无配置
|
||
|
||
#### 2-2 使用说明
|
||
|
||
在你需要图片选择的前端页面引入图库组件，如下：
|
||
<div class="selected-images">
|
||
<div class="selected-image" v-for="image in selectedImages" :key="image">
|
||
<el-image v-if="fileTypeList.includes(image.tag) === true" :src="image.url" style="width: 100%; height: 100%; object-fit: cover;margin-right: 10px;"></el-image>
|
||
<video v-else controls style="width: 100%; height: 100%;">
|
||
<source :src="image.url" />
|
||
</video>
|
||
<span class="remove-icon" @click="removeSelectedImage(image)"><el-icon><circle-close></circle-close></el-icon></span>
|
||
</div>
|
||
<el-icon v-if="isMultiple || selectedImages.length === 0" class="avatar-uploader-icon" @click="openImageLibrary"><Plus /></el-icon>
|
||
</div>
|
||
|
||
图库弹窗：
|
||
<el-dialog v-model="isDialogVisible" title="图片库" width="950px" destroy-on-close>
|
||
<ImageLibrary @select="handleImageSelect" :multiple="isMultiple"/>
|
||
</el-dialog>
|
||
|
||
js代码：
|
||
import {CircleClose, Plus} from '@element-plus/icons-vue'
|
||
import ImageLibrary from "@/plugin/picturelibrary/view/components/imageLibrary.vue";
|
||
|
||
const isDialogVisible = ref(false)
|
||
const isMultiple = ref(false) // 设置是否允许多选
|
||
const selectedImages = ref([])
|
||
|
||
const openImageLibrary = () => {
|
||
isDialogVisible.value = true
|
||
}
|
||
const fileTypeList = ['png', 'jpg', 'jpeg', 'gif']
|
||
const handleImageSelect = (images) => {
|
||
if (isMultiple.value) {
|
||
selectedImages.value = [...selectedImages.value, ...images]
|
||
} else {
|
||
selectedImages.value = Array.isArray(images) ? images : [images]
|
||
}
|
||
|
||
// 此处是测试项目里上传头像的参数，根据实际情况进行修改
|
||
formData.value.avatar = selectedImages.value[0]
|
||
isDialogVisible.value = false
|
||
}
|
||
|
||
const removeSelectedImage = (image) => {
|
||
const index = selectedImages.value.indexOf(image)
|
||
if (index !== -1) {
|
||
selectedImages.value.splice(index, 1)
|
||
}
|
||
}
|
||
|
||
style代码：
|
||
.selected-images {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.selected-image {
|
||
position: relative;
|
||
margin-right: 10px;
|
||
margin-bottom:10px;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.selected-image .remove-icon {
|
||
position: absolute;
|
||
top: 0; /* 微调位置 */
|
||
right: 0; /* 微调位置 */
|
||
color: black;
|
||
padding: 5px;
|
||
cursor: pointer;
|
||
font-size: 22px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 100px;
|
||
height: 100px;
|
||
text-align: center;
|
||
border: 1px dashed #d4d9e1;
|
||
}
|
||
|
||
#### 2-3 参数说明
|
||
isMultiple 是控制能不能选择多张图的参数，false:只能选一张；true:可以选择多张
|
||
### 3. 方法API
|
||
无
|
||
|