删除不需要的代码
This commit is contained in:
jacky
parent
fde7ad7a67
commit
c143ba52d9
|
|
@ -1,365 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div v-if="!multiple" class="update-image" :style="{
|
|
||||||
'background-image': `url(${getUrl(model)})`,
|
|
||||||
'position': 'relative',
|
|
||||||
}">
|
|
||||||
<el-icon v-if="isVideoExt(model || '')" :size="32" class="video video-icon" style="">
|
|
||||||
<VideoPlay />
|
|
||||||
</el-icon>
|
|
||||||
<video v-if="isVideoExt(model || '')" class="avatar video-avatar video" muted preload="metadata" style=""
|
|
||||||
@click="openChooseImg">
|
|
||||||
<source :src="getUrl(model) + '#t=1'">
|
|
||||||
</video>
|
|
||||||
<span v-if="model" class="update" style="position: absolute;" @click="openChooseImg">
|
|
||||||
<el-icon>
|
|
||||||
<delete />
|
|
||||||
</el-icon>
|
|
||||||
删除</span>
|
|
||||||
<span v-else class="update text-gray-600" @click="openChooseImg">
|
|
||||||
<el-icon>
|
|
||||||
<plus />
|
|
||||||
</el-icon>
|
|
||||||
上传</span>
|
|
||||||
</div>
|
|
||||||
<div v-else class="multiple-img">
|
|
||||||
<div v-for="(item, index) in multipleValue" :key="index" class="update-image" :style="{
|
|
||||||
'background-image': `url(${getUrl(item)})`,
|
|
||||||
'position': 'relative',
|
|
||||||
}">
|
|
||||||
<el-icon v-if="isVideoExt(item || '')" :size="32" class="video video-icon">
|
|
||||||
<VideoPlay />
|
|
||||||
</el-icon>
|
|
||||||
<video v-if="isVideoExt(item || '')" class="avatar video-avatar video" muted preload="metadata"
|
|
||||||
@click="deleteImg(index)">
|
|
||||||
<source :src="getUrl(item) + '#t=1'">
|
|
||||||
</video>
|
|
||||||
<span class="update" style="position: absolute;" @click="deleteImg(index)">
|
|
||||||
<el-icon>
|
|
||||||
<delete />
|
|
||||||
</el-icon>
|
|
||||||
删除</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="!maxUpdateCount || maxUpdateCount > multipleValue.length" class="add-image">
|
|
||||||
<span class="update text-gray-600" @click="openChooseImg">
|
|
||||||
<el-icon>
|
|
||||||
<Plus />
|
|
||||||
</el-icon>
|
|
||||||
上传</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-drawer v-model="drawer" title="媒体库" size="740px" direction="ltr">
|
|
||||||
<div class="gva-btn-list" style="width:100%">
|
|
||||||
<upload-common :image-common="imageCommon" class="upload-btn-media-library" @on-success="getImageList"
|
|
||||||
:category="props.category" />
|
|
||||||
<upload-image :image-url="imageUrl" :file-size="512" :max-w-h="1080" class="upload-btn-media-library"
|
|
||||||
:category="props.category" @on-success="getImageList" />
|
|
||||||
<el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" clearable style="width: 390px;" />
|
|
||||||
<el-button type="primary" icon="search" @click="getImageList">查询</el-button>
|
|
||||||
</div>
|
|
||||||
<warning-bar title="点击“文件名/备注”可以编辑文件名或者备注内容。" style="width: 680px" />
|
|
||||||
<div class="gva-media-card">
|
|
||||||
<div v-for="(item, key) in picList" :key="key" class="media-box">
|
|
||||||
<div class="header-img-box-list">
|
|
||||||
<el-image :key="key" :src="getUrl(item.url)" fit="contain" style="width: 100%;height: 100%;"
|
|
||||||
@click="chooseImg(item.url)">
|
|
||||||
<template #error>
|
|
||||||
<el-icon v-if="isVideoExt(item.url || '')" :size="32" class="video video-icon">
|
|
||||||
<VideoPlay />
|
|
||||||
</el-icon>
|
|
||||||
<video v-if="isVideoExt(item.url || '')" class="avatar video-avatar video" muted preload="metadata"
|
|
||||||
@click="chooseImg(item.url)">
|
|
||||||
<source :src="getUrl(item.url) + '#t=1'">
|
|
||||||
您的浏览器不支持视频播放
|
|
||||||
</video>
|
|
||||||
<div v-else class="header-img-box-list">
|
|
||||||
<el-icon class="lost-image">
|
|
||||||
<icon-picture />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
<div class="img-title" @click="editFileNameFunc(item)">{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-pagination :current-page="page" :page-size="pageSize" :total="total" :style="{ 'justify-content': 'center' }"
|
|
||||||
layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange"
|
|
||||||
@size-change="handleSizeChange" />
|
|
||||||
</el-drawer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
import { getUrl, isVideoExt } from '@/utils/image'
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import { getFileList, editFileName } from '@/api/mediaFile'
|
|
||||||
import UploadImage from '@/components/upload/image.vue'
|
|
||||||
import UploadCommon from '@/components/upload/common.vue'
|
|
||||||
import WarningBar from '@/components/warningBar/warningBar.vue'
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
import { Delete, Plus, Picture as IconPicture } from '@element-plus/icons-vue'
|
|
||||||
|
|
||||||
const imageUrl = ref('')
|
|
||||||
const imageCommon = ref('')
|
|
||||||
|
|
||||||
const search = ref({})
|
|
||||||
const page = ref(1)
|
|
||||||
const total = ref(0)
|
|
||||||
const pageSize = ref(30)
|
|
||||||
|
|
||||||
const model = defineModel({ type: [String, Array] })
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
fileType: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
maxUpdateCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
category: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const multipleValue = ref([])
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.multiple) {
|
|
||||||
multipleValue.value = model.value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const deleteImg = (index) => {
|
|
||||||
multipleValue.value.splice(index, 1)
|
|
||||||
model.value = multipleValue.value
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
const handleSizeChange = (val) => {
|
|
||||||
pageSize.value = val
|
|
||||||
getImageList()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrentChange = (val) => {
|
|
||||||
page.value = val
|
|
||||||
getImageList()
|
|
||||||
}
|
|
||||||
const editFileNameFunc = async (row) => {
|
|
||||||
ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
inputPattern: /\S/,
|
|
||||||
inputErrorMessage: '不能为空',
|
|
||||||
inputValue: row.name
|
|
||||||
}).then(async ({ value }) => {
|
|
||||||
row.name = value
|
|
||||||
// console.log(row)
|
|
||||||
const res = await editFileName(row)
|
|
||||||
if (res.code === 0) {
|
|
||||||
ElMessage({
|
|
||||||
type: 'success',
|
|
||||||
message: '编辑成功!',
|
|
||||||
})
|
|
||||||
getImageList()
|
|
||||||
}
|
|
||||||
}).catch(() => {
|
|
||||||
ElMessage({
|
|
||||||
type: 'info',
|
|
||||||
message: '取消修改'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const drawer = ref(false)
|
|
||||||
const picList = ref([])
|
|
||||||
|
|
||||||
const imageTypeList = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp']
|
|
||||||
const videoTyteList = ['mp4', 'avi', 'rmvb', 'rm', 'asf', 'divx', 'mpg', 'mpeg', 'mpe', 'wmv', 'mkv', 'vob']
|
|
||||||
|
|
||||||
const listObj = {
|
|
||||||
image: imageTypeList,
|
|
||||||
video: videoTyteList
|
|
||||||
}
|
|
||||||
|
|
||||||
const chooseImg = (url) => {
|
|
||||||
if (props.fileType) {
|
|
||||||
const typeSuccess = listObj[props.fileType].some(item => {
|
|
||||||
if (url.includes(item)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (!typeSuccess) {
|
|
||||||
ElMessage({
|
|
||||||
type: 'error',
|
|
||||||
message: '当前类型不支持使用'
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (props.multiple) {
|
|
||||||
multipleValue.value.push(url)
|
|
||||||
model.value = multipleValue.value
|
|
||||||
} else {
|
|
||||||
model.value = url
|
|
||||||
}
|
|
||||||
drawer.value = false
|
|
||||||
}
|
|
||||||
const openChooseImg = async () => {
|
|
||||||
if (model.value && !props.multiple) {
|
|
||||||
model.value = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
await getImageList()
|
|
||||||
drawer.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const getImageList = async () => {
|
|
||||||
const res = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
|
|
||||||
if (res.code === 0) {
|
|
||||||
picList.value = res.data.list
|
|
||||||
total.value = res.data.total
|
|
||||||
page.value = res.data.page
|
|
||||||
pageSize.value = res.data.pageSize
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.multiple-img {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
width: 100%;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-image {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
line-height: 120px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px dashed #ccc;
|
|
||||||
background-size: cover;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.update-image {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
line-height: 120px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(to bottom,
|
|
||||||
rgba(255, 255, 255, 0.15) 0%,
|
|
||||||
rgba(0, 0, 0, 0.15) 100%),
|
|
||||||
radial-gradient(at top center,
|
|
||||||
rgba(255, 255, 255, 0.4) 0%,
|
|
||||||
rgba(0, 0, 0, 0.4) 120%) #989898;
|
|
||||||
background-blend-mode: multiply, multiply;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
.update {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: calc(50% - 16px);
|
|
||||||
top: calc(50% - 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
object-fit: cover;
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.update {
|
|
||||||
height: 120px;
|
|
||||||
width: 120px;
|
|
||||||
text-align: center;
|
|
||||||
color: transparent;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.media-box {
|
|
||||||
width: 120px;
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.img-title {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
line-height: 36px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-img-box-list {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 120px;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.el-image__inner {
|
|
||||||
max-width: 120px;
|
|
||||||
max-height: 120px;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: unset;
|
|
||||||
height: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: calc(50% - 16px);
|
|
||||||
top: calc(50% - 16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
object-fit: cover;
|
|
||||||
max-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,232 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<warning-bar title="在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示" />
|
|
||||||
<div class="gva-table-box">
|
|
||||||
<div class="gva-btn-list">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
icon="plus"
|
|
||||||
@click="openDialog"
|
|
||||||
>新增</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
ref="multipleTable"
|
|
||||||
:data="tableData"
|
|
||||||
style="width: 100%"
|
|
||||||
tooltip-effect="dark"
|
|
||||||
row-key="ID"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="55"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="接入日期"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<span>{{ formatDate(scope.row.CreatedAt) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="姓名"
|
|
||||||
prop="customerName"
|
|
||||||
width="120"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="电话"
|
|
||||||
prop="customerPhoneData"
|
|
||||||
width="120"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="接入人ID"
|
|
||||||
prop="sysUserId"
|
|
||||||
width="120"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="操作"
|
|
||||||
min-width="160"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
icon="edit"
|
|
||||||
@click="updateCustomer(scope.row)"
|
|
||||||
>变更</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
icon="delete"
|
|
||||||
@click="deleteCustomer(scope.row)"
|
|
||||||
>删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="gva-pagination">
|
|
||||||
<el-pagination
|
|
||||||
:current-page="page"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:page-sizes="[10, 30, 50, 100]"
|
|
||||||
:total="total"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialogFormVisible"
|
|
||||||
:before-close="closeDialog"
|
|
||||||
title="客户"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
:inline="true"
|
|
||||||
:model="form"
|
|
||||||
label-width="80px"
|
|
||||||
>
|
|
||||||
<el-form-item label="客户名">
|
|
||||||
<el-input
|
|
||||||
v-model="form.customerName"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客户电话">
|
|
||||||
<el-input
|
|
||||||
v-model="form.customerPhoneData"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button @click="closeDialog">取 消</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="enterDialog"
|
|
||||||
>确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
createExaCustomer,
|
|
||||||
updateExaCustomer,
|
|
||||||
deleteExaCustomer,
|
|
||||||
getExaCustomer,
|
|
||||||
getExaCustomerList
|
|
||||||
} from '@/api/customer'
|
|
||||||
import WarningBar from '@/components/warningBar/warningBar.vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
import { formatDate } from '@/utils/format'
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'Customer'
|
|
||||||
})
|
|
||||||
|
|
||||||
const form = ref({
|
|
||||||
customerName: '',
|
|
||||||
customerPhoneData: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const page = ref(1)
|
|
||||||
const total = ref(0)
|
|
||||||
const pageSize = ref(10)
|
|
||||||
const tableData = ref([])
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
const handleSizeChange = (val) => {
|
|
||||||
pageSize.value = val
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrentChange = (val) => {
|
|
||||||
page.value = val
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询
|
|
||||||
const getTableData = async() => {
|
|
||||||
const table = await getExaCustomerList({ page: page.value, pageSize: pageSize.value })
|
|
||||||
if (table.code === 0) {
|
|
||||||
tableData.value = table.data.list
|
|
||||||
total.value = table.data.total
|
|
||||||
page.value = table.data.page
|
|
||||||
pageSize.value = table.data.pageSize
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getTableData()
|
|
||||||
|
|
||||||
const dialogFormVisible = ref(false)
|
|
||||||
const type = ref('')
|
|
||||||
const updateCustomer = async(row) => {
|
|
||||||
const res = await getExaCustomer({ ID: row.ID })
|
|
||||||
type.value = 'update'
|
|
||||||
if (res.code === 0) {
|
|
||||||
form.value = res.data.customer
|
|
||||||
dialogFormVisible.value = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const closeDialog = () => {
|
|
||||||
dialogFormVisible.value = false
|
|
||||||
form.value = {
|
|
||||||
customerName: '',
|
|
||||||
customerPhoneData: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const deleteCustomer = async(row) => {
|
|
||||||
ElMessageBox.confirm('确定要删除吗?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(async() => {
|
|
||||||
const res = await deleteExaCustomer({ ID: row.ID })
|
|
||||||
if (res.code === 0) {
|
|
||||||
ElMessage({
|
|
||||||
type: 'success',
|
|
||||||
message: '删除成功'
|
|
||||||
})
|
|
||||||
if (tableData.value.length === 1 && page.value > 1) {
|
|
||||||
page.value--
|
|
||||||
}
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const enterDialog = async() => {
|
|
||||||
let res
|
|
||||||
switch (type.value) {
|
|
||||||
case 'create':
|
|
||||||
res = await createExaCustomer(form.value)
|
|
||||||
break
|
|
||||||
case 'update':
|
|
||||||
res = await updateExaCustomer(form.value)
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
res = await createExaCustomer(form.value)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
if (res.code === 0) {
|
|
||||||
closeDialog()
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const openDialog = () => {
|
|
||||||
type.value = 'create'
|
|
||||||
dialogFormVisible.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|
@ -1,247 +0,0 @@
|
||||||
<template>
|
|
||||||
<div v-loading.fullscreen.lock="fullscreenLoading">
|
|
||||||
<div class="gva-table-box">
|
|
||||||
<warning-bar
|
|
||||||
title="点击“文件名/备注”可以编辑文件名或者备注内容。"
|
|
||||||
/>
|
|
||||||
<div class="gva-btn-list">
|
|
||||||
<upload-common
|
|
||||||
:image-common="imageCommon"
|
|
||||||
@on-success="getTableData"
|
|
||||||
/>
|
|
||||||
<upload-image
|
|
||||||
:image-url="imageUrl"
|
|
||||||
:file-size="512"
|
|
||||||
:max-w-h="1080"
|
|
||||||
@on-success="getTableData"
|
|
||||||
/>
|
|
||||||
<el-input
|
|
||||||
v-model="search.keyword"
|
|
||||||
class="keyword"
|
|
||||||
placeholder="请输入文件名或备注"
|
|
||||||
/>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
icon="search"
|
|
||||||
@click="getTableData"
|
|
||||||
>查询</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-table :data="tableData">
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="预览"
|
|
||||||
width="100"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<CustomPic
|
|
||||||
pic-type="file"
|
|
||||||
:pic-src="scope.row.url"
|
|
||||||
preview
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="日期"
|
|
||||||
prop="UpdatedAt"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<div>{{ formatDate(scope.row.UpdatedAt) }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="文件名/备注"
|
|
||||||
prop="name"
|
|
||||||
width="180"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<div
|
|
||||||
class="name"
|
|
||||||
@click="editFileNameFunc(scope.row)"
|
|
||||||
>{{ scope.row.name }}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="链接"
|
|
||||||
prop="url"
|
|
||||||
min-width="300"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="标签"
|
|
||||||
prop="tag"
|
|
||||||
width="100"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag
|
|
||||||
:type="scope.row.tag === 'jpg' ? 'info' : 'success'"
|
|
||||||
disable-transitions
|
|
||||||
>{{ scope.row.tag }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="操作"
|
|
||||||
width="160"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
icon="download"
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="downloadFile(scope.row)"
|
|
||||||
>下载</el-button>
|
|
||||||
<el-button
|
|
||||||
icon="delete"
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
@click="deleteFileFunc(scope.row)"
|
|
||||||
>删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="gva-pagination">
|
|
||||||
<el-pagination
|
|
||||||
:current-page="page"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:page-sizes="[10, 30, 50, 100]"
|
|
||||||
:style="{ float: 'right', padding: '20px' }"
|
|
||||||
:total="total"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { getFileList, deleteFile, editFileName } from '@/api/fileUploadAndDownload'
|
|
||||||
import { downloadImage } from '@/utils/downloadImg'
|
|
||||||
import CustomPic from '@/components/customPic/index.vue'
|
|
||||||
import UploadImage from '@/components/upload/image.vue'
|
|
||||||
import UploadCommon from '@/components/upload/common.vue'
|
|
||||||
import { formatDate } from '@/utils/format'
|
|
||||||
import WarningBar from '@/components/warningBar/warningBar.vue'
|
|
||||||
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'Upload',
|
|
||||||
})
|
|
||||||
|
|
||||||
const path = ref(import.meta.env.VITE_BASE_API)
|
|
||||||
|
|
||||||
const imageUrl = ref('')
|
|
||||||
const imageCommon = ref('')
|
|
||||||
|
|
||||||
const page = ref(1)
|
|
||||||
const total = ref(0)
|
|
||||||
const pageSize = ref(10)
|
|
||||||
const search = ref({})
|
|
||||||
const tableData = ref([])
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
const handleSizeChange = (val) => {
|
|
||||||
pageSize.value = val
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrentChange = (val) => {
|
|
||||||
page.value = val
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询
|
|
||||||
const getTableData = async() => {
|
|
||||||
const table = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
|
|
||||||
if (table.code === 0) {
|
|
||||||
tableData.value = table.data.list
|
|
||||||
total.value = table.data.total
|
|
||||||
page.value = table.data.page
|
|
||||||
pageSize.value = table.data.pageSize
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getTableData()
|
|
||||||
|
|
||||||
const deleteFileFunc = async(row) => {
|
|
||||||
ElMessageBox.confirm('此操作将永久删除文件, 是否继续?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(async() => {
|
|
||||||
const res = await deleteFile(row)
|
|
||||||
if (res.code === 0) {
|
|
||||||
ElMessage({
|
|
||||||
type: 'success',
|
|
||||||
message: '删除成功!',
|
|
||||||
})
|
|
||||||
if (tableData.value.length === 1 && page.value > 1) {
|
|
||||||
page.value--
|
|
||||||
}
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
ElMessage({
|
|
||||||
type: 'info',
|
|
||||||
message: '已取消删除',
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const downloadFile = (row) => {
|
|
||||||
if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
|
|
||||||
downloadImage(row.url, row.name)
|
|
||||||
} else {
|
|
||||||
debugger
|
|
||||||
downloadImage(path.value + '/' + row.url, row.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 编辑文件名或者备注
|
|
||||||
* @param row
|
|
||||||
* @returns {Promise<void>}
|
|
||||||
*/
|
|
||||||
const editFileNameFunc = async(row) => {
|
|
||||||
ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
inputPattern: /\S/,
|
|
||||||
inputErrorMessage: '不能为空',
|
|
||||||
inputValue: row.name
|
|
||||||
}).then(async({ value }) => {
|
|
||||||
row.name = value
|
|
||||||
// console.log(row)
|
|
||||||
const res = await editFileName(row)
|
|
||||||
if (res.code === 0) {
|
|
||||||
ElMessage({
|
|
||||||
type: 'success',
|
|
||||||
message: '编辑成功!',
|
|
||||||
})
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
}).catch(() => {
|
|
||||||
ElMessage({
|
|
||||||
type: 'info',
|
|
||||||
message: '取消修改'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.name {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue