1264 lines
34 KiB
Vue
1264 lines
34 KiB
Vue
<template>
|
||
<div class="Tmerclub page-picture-manager">
|
||
<div class="file-group">
|
||
<div class="upload-btn">
|
||
<div class="up-btn">
|
||
<el-button
|
||
v-permission="['resource:img:uploadImg']"
|
||
type="primary"
|
||
plain
|
||
@click="uploadFileBtn"
|
||
>
|
||
<el-icon class="el-icon">
|
||
<Top />
|
||
</el-icon>
|
||
上传图片
|
||
</el-button>
|
||
<el-button
|
||
v-permission="['resource:img:saveImgGroup']"
|
||
plain
|
||
@click="selectOrCreateGroup(1)"
|
||
>
|
||
<el-icon class="el-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
新建分组
|
||
</el-button>
|
||
</div>
|
||
<!-- 搜索 -->
|
||
<!-- native modifier has been removed, please confirm whether the function has been affected -->
|
||
<el-form
|
||
:inline="true"
|
||
:model="dataForm"
|
||
class="demo-form-inline form"
|
||
@submit.prevent
|
||
>
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="fileName"
|
||
:placeholder="$t('biz.imgbox.picName')"
|
||
style="width: 200px !important"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
@click="searchImg(true)"
|
||
>
|
||
{{ $t("table.search") }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="img-group-box">
|
||
<!-- 左侧栏 -->
|
||
<div class="left-sidebar">
|
||
<div class="group-list">
|
||
<div :class="['group-item', dataForm.attachFileGroupId===0?'active':'']">
|
||
<span
|
||
class="group-name"
|
||
@click="clickOneGroup(0)"
|
||
>全部图片</span>
|
||
</div>
|
||
<div
|
||
v-for="(gItem, gIdx) in groupList"
|
||
:key="gIdx"
|
||
:class="['group-item', dataForm.attachFileGroupId===gItem.attachFileGroupId?'active':'']"
|
||
>
|
||
<span
|
||
class="group-name"
|
||
@click="clickOneGroup(gItem.attachFileGroupId)"
|
||
>{{ gItem.name }}</span>
|
||
<span class="sidebar-operate">
|
||
<el-icon
|
||
v-permission="['resource:img:editImgGroup']"
|
||
class="el-icon-edit"
|
||
@click="selectOrCreateGroup(1,gItem.attachFileGroupId,gIdx)"
|
||
><EditPen />
|
||
</el-icon>
|
||
<el-icon
|
||
v-permission="['resource:img:deleteImgGroup']"
|
||
class="el-icon-delete"
|
||
@click="onDeleteFileGroup(gItem.attachFileGroupId)"
|
||
>
|
||
<Delete />
|
||
</el-icon>
|
||
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片列表 -->
|
||
<div
|
||
v-if="options.activeTab==='pick'"
|
||
class="pick-block"
|
||
>
|
||
<div class="elx-main elx-img-list">
|
||
<div
|
||
v-if="isLoading"
|
||
class="elx-img-list-loading"
|
||
>
|
||
<el-icon class="is-loading">
|
||
<Loading />
|
||
</el-icon>
|
||
</div>
|
||
<div class="batch">
|
||
<span class="text">
|
||
<el-checkbox
|
||
v-model="checkedAll"
|
||
:indeterminate="isIndeterminate"
|
||
@change="AllImgs"
|
||
>
|
||
全选
|
||
</el-checkbox>
|
||
</span>
|
||
<span
|
||
v-permission="['resource:img:deleteImgs']"
|
||
class="text"
|
||
@click="delectImgs"
|
||
>删除</span>
|
||
<span
|
||
v-permission="['resource:img:moveImgs']"
|
||
class="text"
|
||
@click="showMoveImgs"
|
||
>移动</span>
|
||
</div>
|
||
<div
|
||
v-for="(img, itemIndex) in imgRes"
|
||
:key="itemIndex"
|
||
class="img-item"
|
||
>
|
||
<div
|
||
class="thumb-wp"
|
||
@click="onClickListImage(img)"
|
||
>
|
||
<ImgShow :src="img.filePath" />
|
||
</div>
|
||
<div
|
||
class="title"
|
||
@click="onClickListImage(img)"
|
||
>
|
||
{{ img.fileName }}
|
||
</div>
|
||
<div class="operate">
|
||
<el-link
|
||
v-permission="['resource:img:editImg']"
|
||
type="info"
|
||
class="edit"
|
||
@click="changeName(img)"
|
||
>
|
||
{{ $t("table.edit") }}
|
||
</el-link>
|
||
<el-link
|
||
v-permission="['resource:img:deleteImg']"
|
||
type="danger"
|
||
class="del"
|
||
@click="delectImg(img.fileName, img.fileId)"
|
||
>
|
||
{{ $t("table.delete") }}
|
||
</el-link>
|
||
</div>
|
||
<span
|
||
v-if="img.selected"
|
||
class="selected"
|
||
@click="onClickListImage(img)"
|
||
>
|
||
<el-icon class="icon"><Check /></el-icon>
|
||
</span>
|
||
</div>
|
||
<div
|
||
v-if="!imgRes.length"
|
||
class="empty"
|
||
>
|
||
暂无图片
|
||
</div>
|
||
</div>
|
||
|
||
<el-pagination
|
||
layout="->,total, prev, pager, next"
|
||
:current-page="pageQuery.current"
|
||
:page-size="pageQuery.size"
|
||
:total="pageQuery.total"
|
||
@current-change="onPageNumChange"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 上传图片 -->
|
||
<div
|
||
v-if="options.activeTab==='upload'"
|
||
class="upload-block"
|
||
>
|
||
<div class="elx-main">
|
||
<div class="upload-title">
|
||
选择图片分组：
|
||
</div>
|
||
<div class="file-gropu-btn">
|
||
<span>分组：</span>
|
||
<el-select
|
||
v-model="groupForm.attachFileGroupId"
|
||
class="select-array"
|
||
placeholder="选择图片分组"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.attachFileGroupId"
|
||
:label="item.name"
|
||
:value="item.attachFileGroupId"
|
||
/>
|
||
</el-select>
|
||
<el-button
|
||
v-if="!selectGroupName"
|
||
v-permission="['resource:img:saveImgGroup']"
|
||
style="margin-left: 10px"
|
||
type="primary"
|
||
link
|
||
@click="selectOrCreateGroup(1)"
|
||
>
|
||
新建分组
|
||
</el-button>
|
||
</div>
|
||
<div class="upload-title">
|
||
{{ $t("biz.imgbox.selectLocalPic") }}
|
||
</div>
|
||
<el-upload
|
||
ref="uploadRef"
|
||
class="upload-img-preview"
|
||
list-type="picture-card"
|
||
accept=".jpg,.png,.gif"
|
||
action=""
|
||
:http-request="httpRequest"
|
||
:multiple="true"
|
||
:auto-upload="false"
|
||
:limit="uploadNumberLimit()"
|
||
:before-upload="beforeUpload"
|
||
:on-success="onUploadSuccess"
|
||
:on-error="onUploadError"
|
||
:on-exceed="onUploadExceedTip"
|
||
:on-change="onUploadChange"
|
||
:before-remove="beforeRemove"
|
||
:on-remove="onRemove"
|
||
:class="{hide: hideUploadEdit}"
|
||
>
|
||
<el-icon>
|
||
<Plus />
|
||
</el-icon>
|
||
</el-upload>
|
||
|
||
<div class="upload-tip">
|
||
{{ uploadTips() }}
|
||
</div>
|
||
|
||
<div class="elx-foot">
|
||
<el-button
|
||
type="primary"
|
||
@click="onUploadConfirm"
|
||
>
|
||
{{ $t("biz.imgbox.confirmUpload") }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择/创建/修改分组 -->
|
||
<el-dialog
|
||
v-model="showGroupVisible"
|
||
:title="showGroupType.value===0 ? '选择分组'
|
||
:showGroupType.value===1?'新建分组':'修改分组名称'"
|
||
:append-to-body="showGroupVisible"
|
||
:close-on-click-modal="false"
|
||
width="600px"
|
||
class="group-box"
|
||
>
|
||
<!-- native modifier has been removed, please confirm whether the function has been affected -->
|
||
<el-form
|
||
ref="groupFormRef"
|
||
:model="groupForm"
|
||
:rules="rules"
|
||
label-width="90px"
|
||
style="width:500px"
|
||
@submit.prevent
|
||
>
|
||
<el-form-item
|
||
v-if="showGroupType!== 0"
|
||
:label="`分组名称`"
|
||
prop="name"
|
||
>
|
||
<!-- native modifier has been removed, please confirm whether the function has been affected -->
|
||
<el-input
|
||
v-model="groupForm.name"
|
||
:placeholder="`请输入分组名称`"
|
||
maxlength="20"
|
||
show-word-limit
|
||
@keyup.enter="groupFormSubmit()"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="showGroupType.value ===0"
|
||
:label="`选择分组`"
|
||
>
|
||
<el-select
|
||
v-model="groupForm.attachFileGroupId"
|
||
:placeholder="`请选择`"
|
||
>
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.attachFileGroupId"
|
||
:label="item.name"
|
||
:value="item.attachFileGroupId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
plain
|
||
@click="showGroupVisible = false"
|
||
>
|
||
{{ $t('table.cancel') }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="groupFormSubmit()"
|
||
>
|
||
{{ $t('table.confirm') }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<!-- 修改图片名称 -->
|
||
<el-dialog
|
||
v-model="changeNameVisible"
|
||
:title="$t('biz.imgbox.revisePicName')"
|
||
:close-on-click-modal="false"
|
||
top="160px"
|
||
:append-to-body="visible"
|
||
width="500px"
|
||
class="changebox"
|
||
>
|
||
<!-- native modifier has been removed, please confirm whether the function has been affected -->
|
||
<el-form
|
||
v-if="changeNameVisible"
|
||
ref="imgDataFormRef"
|
||
:model="imageObject"
|
||
label-width="90px"
|
||
@submit.prevent
|
||
>
|
||
<el-form-item :label="`图片`">
|
||
<ImgShow
|
||
:src="imageObject.filePath"
|
||
:class-list="['changebox-img']"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('biz.imgbox.oldName')">
|
||
<span class="old-name">{{ imageObject.fileName }}</span>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('biz.imgbox.revName')">
|
||
<el-input
|
||
v-model="newImgName"
|
||
maxlength="20"
|
||
:placeholder="$t('biz.imgbox.inputNewName')"
|
||
clearable
|
||
style="width:350px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="`分组`">
|
||
<el-select
|
||
v-model="groupForm.attachFileGroupId"
|
||
:placeholder="`请选择`"
|
||
>
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.attachFileGroupId"
|
||
:label="item.name"
|
||
:value="item.attachFileGroupId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button
|
||
plain
|
||
@click="changeNameVisible = false"
|
||
>{{ $t("table.cancel") }}</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="submitImgName()"
|
||
>{{ $t("table.confirm") }}</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- /修改图片名称 -->
|
||
|
||
<!-- 移动分组 -->
|
||
<el-dialog
|
||
v-model="changeNameVisible1"
|
||
:title="'移动分组'"
|
||
:close-on-click-modal="false"
|
||
top="160px"
|
||
:append-to-body="visible"
|
||
width="500px"
|
||
class="changebox"
|
||
>
|
||
<!-- native modifier has been removed, please confirm whether the function has been affected -->
|
||
<el-form
|
||
v-if="changeNameVisible1"
|
||
ref="imgDataFormRef"
|
||
:model="groupForm"
|
||
label-width="90px"
|
||
@submit.prevent
|
||
>
|
||
<el-form-item :label="`分组`">
|
||
<el-select
|
||
v-model="groupForm.attachFileGroupId"
|
||
clearable
|
||
:placeholder="`请选择`"
|
||
>
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.attachFileGroupId"
|
||
:label="item.name"
|
||
:value="item.attachFileGroupId"
|
||
/>
|
||
</el-select>
|
||
<el-button
|
||
style="margin-left:10px"
|
||
type="primary"
|
||
link
|
||
@click="selectOrCreateGroup(1)"
|
||
>
|
||
新建分组
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button
|
||
plain
|
||
@click="changeNameVisible1 = false"
|
||
>{{ $t("table.cancel") }}</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="MoveImgs()"
|
||
>{{ $t("table.confirm") }}</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- /移动分组 -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { getCurrentInstance } from 'vue'
|
||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||
import { getBatchPreSignUrl, pageFileGroup, saveFileGroup, updateFileGroup, deleteFileGroup, awsImgUpdate } from '@/api/biz/oss'
|
||
import { save, page, updateFileName, deleteFile } from '@/api/biz/attach-file'
|
||
import { batchDeleteImgs, batchMoveImgs } from '@/api/resource/picture-store'
|
||
import ImageCompressor from 'compressorjs'
|
||
import { Debounce } from '@/utils/debounce'
|
||
|
||
let images = [] // 已选图片
|
||
let fileIds = [] // 已选图片的fileId
|
||
let sizeFlag = ref(0) // 避免错误提示重复弹出
|
||
const uploadRef = ref(null)
|
||
const groupFormRef = ref(null)
|
||
const dataForm = reactive({
|
||
policy: '',
|
||
signature: '',
|
||
key: '',
|
||
ossaccessKeyId: '',
|
||
dir: '',
|
||
host: '',
|
||
attachFileGroupId: 0
|
||
})
|
||
const groupList = ref([]) // 分组列表
|
||
const hideUploadEdit = ref(false) // 上传按钮显示
|
||
let attachFiles = ref([])
|
||
const showGroupVisible = ref(false) // 选择/创建分组弹窗
|
||
const showGroupType = ref(0) // 0选择分组 1创建分组 2修改分组
|
||
const groupForm = ref({
|
||
attachFileGroupId: '', // 选择分组的值
|
||
name: '' // 分组名称
|
||
})
|
||
const fileType = ref(1) // 文件类型
|
||
const selectGroupName = ref('') // 选中的分组名称
|
||
let oriImgName = null // 图片原名称
|
||
const options = reactive({
|
||
multiple: true, // 是否支持选取多个图片
|
||
limit: 20, // 最多可选择图片数量
|
||
maxSize: 512, // 最大尺寸（kb）
|
||
activeTab: 'pick',
|
||
enableUpload: false, // 是否启用图片上传
|
||
callback: null
|
||
})
|
||
const newImgName = ref('')
|
||
let ossList = ref([])
|
||
const isTrue = ref(true)
|
||
const changeNameVisible = ref(false)
|
||
const changeNameVisible1 = ref(false)
|
||
const type = ref(2)
|
||
const fileName = ref('')
|
||
const isLoading = ref(true)
|
||
const visible = ref(false)
|
||
const disabled = ref(false)
|
||
const notImg = ref(false)
|
||
const imgRes = ref([])
|
||
const checkedAll = ref(false)
|
||
const pageQuery = reactive({
|
||
current: 1,
|
||
size: 18,
|
||
total: 0
|
||
})
|
||
const fileNum = ref(0)
|
||
const limit = ref(0)
|
||
const creatingGroup = ref(false) // 正在新建分组
|
||
const fileIndex = ref(0) // 图片位置索引，用于获取文件数组中当前上传文件的位置
|
||
const completeCount = ref(0) // 传输完成数量，用于控制文件全部上传成功才进入onSuccess方法
|
||
const uploadDisabled = ref(false)
|
||
const uploadSubmitFlag = ref(false)
|
||
const showPicUploadSuccessMessage = ref(true)// 是否提示上传成功
|
||
|
||
const isIndeterminate = computed(() => {
|
||
const someRes = imgRes.value.some(imgItem => imgItem.selected)
|
||
const everyRes = imgRes.value.every(imgItem => imgItem.selected)
|
||
return someRes && !everyRes
|
||
})
|
||
const rules = reactive({
|
||
name: [
|
||
{ required: true, message: '分组名称不能为空', trigger: 'blur' },
|
||
{ min: 1, max: 20, message: '长度在1-20个字符', trigger: 'blur' }
|
||
]
|
||
})
|
||
onMounted(() => {
|
||
loadImageGroup()
|
||
loadListImage()
|
||
})
|
||
/**
|
||
* 加载图片分组列表
|
||
*/
|
||
const loadImageGroup = () => {
|
||
pageFileGroup({ type: fileType.value }).then((responeseData) => {
|
||
groupList.value = responeseData
|
||
groupForm.value.attachFileGroupId = null
|
||
if (changeNameVisible1.value || options.activeTab === 'upload') {
|
||
responeseData.forEach(item => {
|
||
if (groupForm.value.name === item.name) {
|
||
groupForm.value.attachFileGroupId = item.attachFileGroupId
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 点击图片分组item
|
||
*/
|
||
const clickOneGroup = (id) => {
|
||
pageQuery.current = 1
|
||
dataForm.attachFileGroupId = id
|
||
options.activeTab = 'pick'
|
||
loadListImage()
|
||
}
|
||
/**
|
||
* 打开选择/新建分组
|
||
* st 0选择分组 1创建/修改分组
|
||
* showGroupType 0选择分组 1创建分组 2修改分组
|
||
*/
|
||
const selectOrCreateGroup = (st, groupId, gIdx) => {
|
||
showGroupType.value = st
|
||
if (!groupId) {
|
||
groupForm.value.attachFileGroupId = ''
|
||
groupForm.value.name = ''
|
||
}
|
||
|
||
// 修改分组
|
||
if (st && groupId) {
|
||
if (st === 0 || st === 1) {
|
||
nextTick(() => {
|
||
groupFormRef.value?.validate(valid => {
|
||
if (!valid) { /* empty */ }
|
||
}
|
||
)
|
||
})
|
||
}
|
||
if (st === 1) {
|
||
groupForm.value.name = groupList.value[gIdx].name
|
||
groupForm.value.attachFileGroupId = groupId
|
||
showGroupType.value = 2 // 修改分组名称
|
||
}
|
||
}
|
||
if (st === 0) { // 选择分组
|
||
if (!groupList.value.length) {
|
||
ElMessage({
|
||
message: '当前暂无分组可选择，请先创建分组',
|
||
duration: 1500
|
||
})
|
||
showGroupVisible.value = false
|
||
return
|
||
}
|
||
}
|
||
showGroupVisible.value = true
|
||
}
|
||
/**
|
||
* 提交选择/创建/修改分组
|
||
*/
|
||
const groupFormSubmit = () => {
|
||
groupFormRef.value?.validate(valid => {
|
||
if (!valid) {
|
||
return
|
||
}
|
||
if (!groupForm.value.name.trim()) {
|
||
ElMessage({
|
||
message: '分组名称不能为空格',
|
||
type: 'warning',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
if (showGroupType.value === 0) {
|
||
if (!groupForm.value.attachFileGroupId) {
|
||
ElMessage({
|
||
message: '请选择分组',
|
||
type: 'warning',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
groupList.value.forEach(el => {
|
||
if (groupForm.value.attachFileGroupId === el.attachFileGroupId) {
|
||
groupForm.value.name = el.name
|
||
selectGroupName.value = el.name
|
||
}
|
||
})
|
||
showGroupVisible.value = false
|
||
return
|
||
}
|
||
if (showGroupType.value !== 0) {
|
||
if (!groupForm.value.name) {
|
||
ElMessage({
|
||
message: '分组名称不能为空',
|
||
type: 'warning',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
const flag = groupList.value.some(item => {
|
||
return item.name === groupForm.value.name
|
||
})
|
||
if (flag && !groupForm.value.attachFileGroupId) {
|
||
ElMessage({
|
||
message: '分组已存在',
|
||
type: 'warning',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
if (creatingGroup.value) {
|
||
return
|
||
}
|
||
creatingGroup.value = true
|
||
const param = {
|
||
attachFileGroupId: groupForm.value.attachFileGroupId,
|
||
name: groupForm.value.name,
|
||
type: fileType.value
|
||
}
|
||
const request = groupForm.value.attachFileGroupId ? updateFileGroup(param) : saveFileGroup(param)
|
||
request.then(() => {
|
||
loadImageGroup()
|
||
groupForm.value.attachFileGroupId = ''
|
||
showGroupVisible.value = false
|
||
ElMessage({
|
||
message: $t('table.actionSuccess'),
|
||
type: 'success',
|
||
duration: 800,
|
||
onClose: () => {
|
||
creatingGroup.value = false
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
creatingGroup.value = false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 删除分组
|
||
*/
|
||
const onDeleteFileGroup = (groupId) => {
|
||
ElMessageBox.confirm($t('table.sureToDelete'), $t('table.tips'), {
|
||
confirmButtonText: $t('table.confirm'),
|
||
cancelButtonText: $t('table.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
const data = {
|
||
attachFileGroupId: groupId
|
||
}
|
||
deleteFileGroup(data).then(() => {
|
||
dataForm.attachFileGroupId = 0
|
||
loadImageGroup()
|
||
searchImg()
|
||
ElMessage({
|
||
message: $t('table.actionSuccess'),
|
||
type: 'success',
|
||
duration: 800,
|
||
onClose: () => {
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
// 保存上次点击查询的请求条件
|
||
let tempSearchForm = null
|
||
/**
|
||
* 加载图片列表数据
|
||
*/
|
||
const loadListImage = (newData = false) => {
|
||
if (newData || !tempSearchForm) {
|
||
tempSearchForm = {
|
||
pageNum: pageQuery.current ? pageQuery.current : 1,
|
||
pageSize: pageQuery.size,
|
||
fileName: fileName.value || null,
|
||
attachFileGroupId: dataForm.attachFileGroupId || '',
|
||
type: fileType.value,
|
||
sysType: 3
|
||
}
|
||
} else {
|
||
tempSearchForm.pageNum = pageQuery.current ? pageQuery.current : 1
|
||
tempSearchForm.pageSize = pageQuery.size
|
||
tempSearchForm.attachFileGroupId = dataForm.attachFileGroupId || ''
|
||
tempSearchForm.type = fileType.value
|
||
}
|
||
isLoading.value = true
|
||
page(tempSearchForm).then(response => {
|
||
imgRes.value = response.list
|
||
checkedAll.value = true
|
||
checkedAll.value = imgRes.value.length === 0 ? false : checkedAll.value
|
||
imgRes.value.forEach(img => {
|
||
// img.selected = false
|
||
if (!isExist(img)) {
|
||
img.selected = false
|
||
checkedAll.value = false
|
||
} else {
|
||
img.selected = true
|
||
}
|
||
})
|
||
pageQuery.pages = response.pages
|
||
pageQuery.total = response.total
|
||
isLoading.value = false
|
||
})
|
||
}
|
||
|
||
let imageObject = null
|
||
/**
|
||
* 修改图片名称
|
||
*/
|
||
const changeName = (img) => {
|
||
isTrue.value = true
|
||
changeNameVisible.value = true
|
||
imageObject = img
|
||
oriImgName = img.fileName
|
||
if (img.attachFileGroupId) {
|
||
groupForm.value.attachFileGroupId = img.attachFileGroupId
|
||
} else {
|
||
groupForm.value.attachFileGroupId = ''
|
||
}
|
||
newImgName.value = ''
|
||
}
|
||
/**
|
||
* 提交修改后的图片名称
|
||
*/
|
||
const submitImgName = () => {
|
||
if (!isTrue.value) {
|
||
return false
|
||
}
|
||
isTrue.value = false
|
||
const data = {
|
||
fileId: imageObject.fileId,
|
||
fileName: newImgName.value || oriImgName,
|
||
attachFileGroupId: groupForm.value.attachFileGroupId,
|
||
sysType: 3
|
||
}
|
||
updateFileName(data).then(() => {
|
||
newImgName.value = ''
|
||
isTrue.value = true
|
||
changeNameVisible.value = false
|
||
ElMessage({
|
||
message: '保存成功',
|
||
type: 'success',
|
||
duration: 1500
|
||
})
|
||
loadListImage()
|
||
}).catch(() => {
|
||
isTrue.value = true
|
||
})
|
||
}
|
||
/**
|
||
* 全选
|
||
*/
|
||
const AllImgs = () => {
|
||
if (!checkedAll.value) {
|
||
imgRes.value.forEach(img => {
|
||
img.selected = false
|
||
})
|
||
images = []
|
||
fileIds = []
|
||
} else {
|
||
imgRes.value.forEach(img => {
|
||
images.push(JSON.parse(JSON.stringify(img)))
|
||
fileIds.push(img.fileId)
|
||
img.selected = true
|
||
})
|
||
}
|
||
}
|
||
// 保存图片全选状态
|
||
const isExist = (img) => {
|
||
for (let i = 0; i < images.length; i++) {
|
||
if (img.fileId === images[i].fileId) {
|
||
return true
|
||
}
|
||
}
|
||
return false
|
||
}
|
||
/**
|
||
* 批量移动分组
|
||
*/
|
||
const imgDataFormRef = ref(null)
|
||
const showMoveImgs = () => {
|
||
if (images.length === 0 || fileIds.length === 0) {
|
||
return message('请选择图片')
|
||
}
|
||
changeNameVisible1.value = true
|
||
groupForm.value = {
|
||
attachFileGroupId: '', // 选择分组的值
|
||
name: '' // 分组名称
|
||
}
|
||
}
|
||
const MoveImgs = () => {
|
||
batchMoveImgs(groupForm.value.attachFileGroupId, fileIds).then(() => {
|
||
images = []
|
||
fileIds = []
|
||
changeNameVisible1.value = false
|
||
ElMessage.success($t('table.actionSuccess'))
|
||
searchImg()
|
||
})
|
||
}
|
||
/**
|
||
* 批量删除图片
|
||
*/
|
||
const delectImgs = () => {
|
||
if (images.length === 0 || fileIds.length === 0) {
|
||
return message('请选择图片')
|
||
}
|
||
ElMessageBox.confirm('确定要删除图片吗？', $t('table.tips'), {
|
||
confirmButtonText: $t('table.confirm'),
|
||
cancelButtonText: $t('table.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
batchDeleteImgs(fileIds).then(() => {
|
||
images = []
|
||
fileIds = []
|
||
ElMessage({
|
||
message: '批量删除成功',
|
||
type: 'success',
|
||
duration: 1500
|
||
})
|
||
searchImg()
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 删除图片
|
||
*/
|
||
const delectImg = (fileName, fileId) => {
|
||
ElMessageBox.confirm('确定要删除图片“' + fileName + '”吗？', $t('table.tips'), {
|
||
confirmButtonText: $t('table.confirm'),
|
||
cancelButtonText: $t('table.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
const data = {
|
||
fileId
|
||
}
|
||
deleteFile(data).then(() => {
|
||
images = []
|
||
ElMessage({
|
||
message: '删除成功',
|
||
type: 'success',
|
||
duration: 1500
|
||
})
|
||
searchImg()
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 点击上传图片按钮
|
||
*/
|
||
const uploadFileBtn = () => {
|
||
options.activeTab = 'upload'
|
||
images = []
|
||
fileIds = []
|
||
disabled.value = false
|
||
groupForm.value.attachFileGroupId = dataForm.attachFileGroupId || null
|
||
}
|
||
|
||
const instance = getCurrentInstance()
|
||
/**
|
||
* 点击图片时选中或取消选中图片
|
||
* @param img object
|
||
*/
|
||
const onClickListImage = (img) => {
|
||
// 多选图片-如果已选中则取消选中
|
||
const imgIndex = selectedImageIndex(img)
|
||
if (img.selected) {
|
||
// 取消图片已选状态
|
||
img.selected = false
|
||
images.splice(imgIndex, 1)
|
||
fileIds.splice(imgIndex, 1)
|
||
checkedAll.value = images.length !== imgRes.value.length
|
||
instance.proxy.$forceUpdate()
|
||
return
|
||
}
|
||
if (!type && images.length >= limit.value) {
|
||
message($t('biz.imgbox.superiorLimit'))
|
||
return false
|
||
}
|
||
|
||
images.push(JSON.parse(JSON.stringify(img)))
|
||
fileIds.push(img.fileId)
|
||
|
||
img.selected = true
|
||
checkedAll.value = images.length !== imgRes.value.length
|
||
instance.proxy.$forceUpdate()
|
||
}
|
||
|
||
/**
|
||
* 按图片名称搜索图片
|
||
*/
|
||
const searchImg = (newData = false) => {
|
||
pageQuery.current = 1
|
||
loadListImage(newData)
|
||
}
|
||
|
||
/**
|
||
* 图片已选则返回下标，未选则返回-1
|
||
*/
|
||
const selectedImageIndex = (img) => {
|
||
for (let i = 0; i < images.length; i++) {
|
||
const selectedImg = images[i]
|
||
if (selectedImg.fileId === img.fileId) {
|
||
return i
|
||
}
|
||
}
|
||
return -1
|
||
}
|
||
|
||
/**
|
||
* 分页页面变化时刷新数据
|
||
* @param page
|
||
*/
|
||
const onPageNumChange = (page) => {
|
||
pageQuery.current = page
|
||
loadListImage()
|
||
}
|
||
|
||
/**
|
||
* 获取上传图片数据
|
||
*/
|
||
const onUploadConfirm = Debounce(() => {
|
||
uploadSubmitFlag.value = true
|
||
const time = setTimeout(() => {
|
||
uploadSubmitFlag.value = false
|
||
clearTimeout(time)
|
||
}, 1000)
|
||
// 重置文件索引位置和完成文件记录数
|
||
fileIndex.value = 0
|
||
completeCount.value = 0
|
||
ossList.value = []
|
||
attachFiles.value = []
|
||
sizeFlag.value = 0
|
||
if (fileNum.value === 0) {
|
||
return ElMessage({
|
||
message: $t('product.plePictureToUpload'),
|
||
type: 'warning'
|
||
})
|
||
}
|
||
getBatchPreSignUrl(fileNames).then(response => {
|
||
ossList = response
|
||
notImg.value = true
|
||
nextTick(() => {
|
||
uploadRef.value?.submit()
|
||
})
|
||
})
|
||
}, 1500)
|
||
|
||
/**
|
||
* 上传图片
|
||
*/
|
||
const httpRequest = (event) => {
|
||
if (sizeFlag.value !== 0) {
|
||
return
|
||
}
|
||
// 获取本次上传文件的位置
|
||
const currentIndex = fileIndex.value++
|
||
|
||
const file = event.file
|
||
const typeArray = file.type.split('/')
|
||
if (typeArray[1] === 'jpeg') {
|
||
typeArray[1] = 'jpg'
|
||
} else {
|
||
typeArray[1] = ''
|
||
}
|
||
const attachFile = Object.assign({
|
||
attachFileGroupId: file.attachFileGroupId,
|
||
fileType: typeArray[1],
|
||
fileName: file.name,
|
||
fileSize: file.size,
|
||
type: 1
|
||
})
|
||
const uploadSuccess = () => {
|
||
if (showPicUploadSuccessMessage.value) {
|
||
showPicUploadSuccessMessage.value = false
|
||
ElMessage({
|
||
message: '上传成功',
|
||
type: 'success',
|
||
duration: 1500,
|
||
onClose: () => {
|
||
showPicUploadSuccessMessage.value = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
if (ossList.length <= 0) {
|
||
message('数据异常，请刷新后重试')
|
||
}
|
||
// 文件上传
|
||
attachFile.filePath = '/' + ossList[currentIndex].dir + ossList[currentIndex].fileName
|
||
awsImgUpdate(ossList[currentIndex].preSignUrl, file, event).then(() => {
|
||
attachFiles.value.push(attachFile)
|
||
completeCount.value++
|
||
if (completeCount.value === ossList.length) {
|
||
event.onSuccess()
|
||
}
|
||
uploadSuccess()
|
||
}).catch(() => {
|
||
message($t('biz.imgbox.uploadBefore') + (currentIndex + 1) + $t('biz.imgbox.uploadAfter'), true)
|
||
completeCount.value++
|
||
if (completeCount.value === ossList.length) {
|
||
event.onSuccess()
|
||
}
|
||
})
|
||
}
|
||
// 图片预上传
|
||
// eslint-disable-next-line no-unused-vars
|
||
let fileNames = []
|
||
const onUploadChange = (file, fileList) => {
|
||
fileNames = fileList?.map((item) => {
|
||
return item.name
|
||
}).join(',')
|
||
if (fileList.length >= 20) {
|
||
hideUploadEdit.value = true
|
||
}
|
||
fileNum.value = fileList.length
|
||
}
|
||
// eslint-disable-next-line no-unused-vars
|
||
const onRemove = (file, fileList) => {
|
||
fileNum.value = fileList.length
|
||
const time = setTimeout(() => {
|
||
hideUploadEdit.value = false
|
||
clearTimeout(time)
|
||
}, 1000)
|
||
if (uploadSubmitFlag.value) {
|
||
uploadDisabled.value = false
|
||
} else {
|
||
uploadDisabled.value = true
|
||
const time1 = setTimeout(() => {
|
||
uploadDisabled.value = false
|
||
clearTimeout(time1)
|
||
}, 1000)
|
||
}
|
||
}
|
||
const beforeRemove = () => {
|
||
// 防止用户频繁点击导致删除过多
|
||
return !uploadDisabled.value
|
||
}
|
||
/**
|
||
* 上传图片前检查合法性
|
||
* @param file
|
||
* @returns {boolean}
|
||
*/
|
||
const beforeUpload = async (file) => {
|
||
const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
|
||
const isSize = file.size / 1024 < options.maxSize
|
||
if (!isImage) {
|
||
if (sizeFlag === 0) {
|
||
message($t('biz.imgbox.onlyPictures'), true)
|
||
sizeFlag += 1
|
||
}
|
||
notImg.value = false
|
||
return Promise().reject()
|
||
}
|
||
if (!isSize) {
|
||
// 0.5m~5m，从0.8开始循环。5m~10m，从0.6开始循环。10m以上就直接0.4。
|
||
// 最低使用0.4
|
||
let quality
|
||
if (file.size / 1024 / 1024 < 5) {
|
||
quality = 0.8
|
||
} else if (file.size / 1024 / 1024 < 10) {
|
||
quality = 0.6
|
||
} else {
|
||
quality = 0.4
|
||
}
|
||
try {
|
||
let resultBlob
|
||
let index = true
|
||
while (index) {
|
||
resultBlob = await ImageCompressorFn(file, quality)
|
||
if (resultBlob.size / 1024 < 512 || quality <= 0.4) {
|
||
index = false
|
||
} else {
|
||
quality = (quality * 10 - 2) / 10
|
||
}
|
||
}
|
||
return new File([resultBlob], file.name, {
|
||
type: file.type
|
||
})
|
||
} catch (error) {
|
||
return Promise().reject()
|
||
}
|
||
}
|
||
return true
|
||
}
|
||
|
||
const ImageCompressorFn = (file, quality) => {
|
||
return new Promise((resolve, reject) => {
|
||
// eslint-disable-next-line no-new
|
||
new ImageCompressor(file, {
|
||
quality, // 压缩大小
|
||
convertSize: 512000,
|
||
success (result) {
|
||
resolve(result)
|
||
},
|
||
error (err) {
|
||
reject(err)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const uploadNumberLimit = () => {
|
||
if (!options.multiple) {
|
||
return 1
|
||
}
|
||
|
||
return options.limit - images.length
|
||
}
|
||
|
||
const uploadTypeTip = () => {
|
||
return $t('biz.imgbox.onlySupported') + ' jpg/png/gif ' + $t('biz.imgbox.pic')
|
||
}
|
||
|
||
// const uploadSizeTip = () => {
|
||
// return $t('biz.imgbox.notExceed') + '2M'
|
||
// }
|
||
|
||
const uploadTips = () => {
|
||
const tips = [uploadTypeTip()]
|
||
if (!options.multiple) {
|
||
return tips.join('，')
|
||
}
|
||
|
||
if (fileNum.value > 0) {
|
||
tips.push($t('biz.imgbox.alreadyExist') + fileNum.value + $t('biz.imgbox.unit'))
|
||
}
|
||
if (fileNum.value > 0) {
|
||
tips.push($t('biz.imgbox.soonUpload') + fileNum.value + $t('biz.imgbox.unit'))
|
||
}
|
||
|
||
tips.push($t('biz.imgbox.remainder') + (options.limit - fileNum.value) + $t('biz.imgbox.unit') + $t('biz.imgbox.upload'))
|
||
|
||
return tips.join('，')
|
||
}
|
||
|
||
/**
|
||
* 上传错误处理
|
||
* @param err
|
||
*/
|
||
const onUploadError = (err) => {
|
||
message($t('biz.imgbox.requestError'), true)
|
||
throw err
|
||
}
|
||
|
||
/**
|
||
* 上传成功处理，并提交图片数据
|
||
* @param response
|
||
* @param file
|
||
* @param fileList
|
||
* @returns {boolean}
|
||
*/
|
||
// eslint-disable-next-line no-unused-vars
|
||
const onUploadSuccess = (response, file, fileList) => {
|
||
const filesNames = []
|
||
fileList.forEach(file => {
|
||
filesNames.push(file.name)
|
||
})
|
||
const uploadFile = []
|
||
attachFiles.value.forEach(file => {
|
||
if (filesNames.indexOf(file.fileName) !== -1) {
|
||
file.sysType = 3
|
||
file.attachFileGroupId = groupForm.value.attachFileGroupId
|
||
uploadFile.push(file)
|
||
}
|
||
})
|
||
if (uploadFile.length > 0) {
|
||
save(uploadFile).then(() => {
|
||
attachFiles = []
|
||
options.activeTab = 'pick'
|
||
dataForm.attachFileGroupId = 0
|
||
loadListImage()
|
||
})
|
||
}
|
||
disabled.value = true
|
||
if (uploadRef) {
|
||
uploadRef.value?.clearFiles()
|
||
}
|
||
pageQuery.current = 1
|
||
groupForm.value.name = ''
|
||
groupForm.value.attachFileGroupId = ''
|
||
selectGroupName.value = ''
|
||
setTimeout(() => {
|
||
hideUploadEdit.value = false
|
||
}, 1000)
|
||
}
|
||
|
||
/**
|
||
* 选择上传文件超过限制文件个数提示
|
||
*/
|
||
const onUploadExceedTip = () => {
|
||
message($t('biz.imgbox.maxSelect') + uploadNumberLimit() + $t('biz.imgbox.unit') + $t('biz.imgbox.upload'))
|
||
hideUploadEdit.value = false
|
||
}
|
||
const message = (msg, isInfo) => {
|
||
let type = 'error'
|
||
if (isInfo) {
|
||
type = 'info'
|
||
}
|
||
ElMessage({
|
||
message: msg,
|
||
type,
|
||
duration: 1500
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@use './index.scss';
|
||
</style>
|