296 lines
13 KiB
HTML
296 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>图片上传</title>
|
||
<!-- <script src="https://unpkg.com/vue@next"></script>-->
|
||
<script src="js/vue.js"></script>
|
||
<!-- import CSS -->
|
||
<!-- <link rel="stylesheet" href="https://unpkg.com/element-plus@1.2.0-beta.5/dist/index.css">-->
|
||
<link rel="stylesheet" href="css/element-plus@1.2.0-beta.5.index.css">
|
||
|
||
<link rel="stylesheet" href="css/index.css">
|
||
</link>
|
||
|
||
<!-- import JavaScript -->
|
||
<!-- <script src="https://unpkg.com/element-plus@1.2.0-beta.5"></script>-->
|
||
<script src="js/element-plus@1.2.0-beta.5.dist.index.full.js"></script>
|
||
|
||
<script src="js/axios@0.26.0.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="upload">
|
||
<div class="upload-content">
|
||
<el-upload ref="uploadRef" v-if="!readonly" class="upload-body" :action="actionpath" :multiple="false"
|
||
:limit="1" :on-success="clearFile" :on-change="changeImage" :auto-upload="false" :file-list="fileList"
|
||
:before-remove="removeFile" :on-error="uploadFailFn">
|
||
|
||
<template #trigger>
|
||
<el-button size="medium" color="#EBF2FC" style="color:#629FE6;" round> + 选择文件</el-button>
|
||
|
||
</template>
|
||
|
||
<div class="form-container">
|
||
<span class="input-label">凭证名称:</span>
|
||
<el-input name="filename" label="凭证名称" size="medium" v-model="filename" style="width:240px;"
|
||
placeholder="请输入凭证名称" @blur="jugeInput"></el-input>
|
||
<el-button size="medium" type="primary" color="#EBF2FC" style="color:#629FE6;" round
|
||
@click="submitUpload">保存单据</el-button>
|
||
</div>
|
||
</el-upload>
|
||
<div class="upload-footer footer-tip" style="padding: 10px 0">
|
||
注意：上传文件大小小于4M, 上传文件格式：jpg、png、gif
|
||
</div>
|
||
|
||
<div class="image-list" v-loading="loading">
|
||
<el-empty description="还未上传凭证" v-if="!loading && !imageList.length"></el-empty>
|
||
<el-upload list-type="picture-card" :auto-upload="false" :file-list="imageList" action="#"
|
||
v-if="!loading && imageList.length">
|
||
<template #default>
|
||
<el-icon>
|
||
<plus />
|
||
</el-icon>
|
||
</template>
|
||
<template #file="{ file }" :key="file.ImageId">
|
||
<div class="image-box">
|
||
<img class="el-upload-list__item-thumbnail" :src="file.ImageUrl" alt="" />
|
||
<span class="el-upload-list__item-actions">
|
||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||
<svg t="1646800324230" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3120" width="20" height="20">
|
||
<path
|
||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z"
|
||
p-id="3121" fill="#ffffff"></path>
|
||
<path
|
||
d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||
p-id="3122" fill="#ffffff"></path>
|
||
</svg>预览
|
||
</span>
|
||
|
||
<span class="el-upload-list__item-delete" @click="handleRemove(file)" v-if="!readonly">
|
||
|
||
<svg t="1646799675443" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="2158" width="20" height="18">
|
||
<path
|
||
d="M768 384c-19.2 0-32 12.8-32 32l0 377.6c0 25.6-19.2 38.4-38.4 38.4L326.4 832c-25.6 0-38.4-19.2-38.4-38.4L288 416C288 396.8 275.2 384 256 384S224 396.8 224 416l0 377.6c0 57.6 44.8 102.4 102.4 102.4l364.8 0c57.6 0 102.4-44.8 102.4-102.4L793.6 416C800 396.8 787.2 384 768 384z"
|
||
p-id="2159" fill="#ffffff"></path>
|
||
<path
|
||
d="M460.8 736l0-320C460.8 396.8 448 384 435.2 384S396.8 396.8 396.8 416l0 320c0 19.2 12.8 32 32 32S460.8 755.2 460.8 736z"
|
||
p-id="2160" fill="#ffffff"></path>
|
||
<path
|
||
d="M627.2 736l0-320C627.2 396.8 608 384 588.8 384S563.2 396.8 563.2 416l0 320C563.2 755.2 576 768 588.8 768S627.2 755.2 627.2 736z"
|
||
p-id="2161" fill="#ffffff"></path>
|
||
<path
|
||
d="M832 256l-160 0L672 211.2C672 166.4 633.6 128 588.8 128L435.2 128C390.4 128 352 166.4 352 211.2L352 256 192 256C172.8 256 160 268.8 160 288S172.8 320 192 320l640 0c19.2 0 32-12.8 32-32S851.2 256 832 256zM416 211.2C416 198.4 422.4 192 435.2 192l153.6 0c12.8 0 19.2 6.4 19.2 19.2L608 256l-192 0L416 211.2z"
|
||
p-id="2162" fill="#ffffff"></path>
|
||
</svg>
|
||
删除
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div class="image-title">{{file.ImageName}}</div>
|
||
</template>
|
||
</el-upload>
|
||
</div>
|
||
|
||
<el-image style="width: 0px;height: 0px;" ref="showPreviewRef" :src="url && url[previewIndex]"
|
||
:preview-src-list="url" :initial-index="previewIndex">
|
||
</el-image>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function getreqstr(e) {
|
||
const keyValue = location.search.substr(1)
|
||
const reg = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i")
|
||
const matchValue = keyValue.match(reg)
|
||
if (matchValue) {
|
||
return matchValue[2]
|
||
|
||
}
|
||
return ''
|
||
}
|
||
|
||
const {
|
||
defineComponent,
|
||
ref,
|
||
nextTick
|
||
} = Vue;
|
||
const {
|
||
ElMessage, Delete
|
||
} = ElementPlus
|
||
// const { Plus, ZoomIn, Download, Delete } = ElementPlusIcons
|
||
const upload = {
|
||
|
||
setup() {
|
||
const tableId = getreqstr('id');
|
||
const tableName = getreqstr('tablename');
|
||
const tableType = getreqstr('tabletype');
|
||
const deleteType = getreqstr('deletetype');
|
||
const readonly = getreqstr('readonly') ? true : false;
|
||
const actions = 'https://ahyd.eshangtech.com/EShangApiMain'
|
||
let uploadRef = ref(null)
|
||
let showPreviewRef = ref(null)
|
||
let filename = ref('')
|
||
let fileList = ref([])
|
||
let imageList = ref([])
|
||
let actionpath = ref('')
|
||
let fileType = ref('')
|
||
let previewIndex = ref(0)
|
||
let loading = ref(true)
|
||
let url = ref([])
|
||
|
||
|
||
const submitUpload = () => {
|
||
|
||
if (fileList.value.length > 0) {
|
||
const file = fileList.value[0].raw
|
||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' ||
|
||
file.type === 'image/jpg' || file.type === 'image/gif'
|
||
// const isLt2M = file.size / 1024 / 1024 < 2
|
||
|
||
if (!isJPG) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '请选择图片!'
|
||
})
|
||
|
||
return
|
||
}
|
||
// ElMessage({
|
||
// type: 'info',
|
||
// message: '正在上传...'
|
||
// })
|
||
uploadRef.value.submit()
|
||
}
|
||
}
|
||
// 改变图片
|
||
let changeImage = (file, files) => {
|
||
|
||
fileList.value = files
|
||
filename.value = file.name || ''
|
||
fileType.value = file.name ? '.' + file.name.split('.')[1] : ''
|
||
actionpath.value = actions + '/Picture/UploadPicture?TableId=' + tableId +
|
||
'&TableName=' + tableName + '&TableType=' + tableType + '&imagename=' + filename.value
|
||
}
|
||
// 监听票据名称
|
||
let jugeInput = () => {
|
||
|
||
if (filename.value && filename.value.indexOf(fileType.value) == -1) {
|
||
|
||
filename.value = filename.value + fileType.value
|
||
}
|
||
actionpath.value = actions + '/Picture/UploadPicture?TableId=' + tableId +
|
||
'&TableName=' + tableName + '&TableType=' + tableType + '&imagename=' + filename.value
|
||
|
||
|
||
}
|
||
// 预览图片
|
||
|
||
const handlePictureCardPreview = (file) => {
|
||
const index = url.value.findIndex(n => n === file.ImageUrl)
|
||
previewIndex.value = index
|
||
|
||
nextTick(() => {
|
||
showPreviewRef.value.showViewer = true
|
||
})
|
||
|
||
|
||
}
|
||
const removeFile = (file) => {
|
||
filename.value = ''
|
||
}
|
||
const uploadFailFn = () => {
|
||
|
||
}
|
||
const clearFile = () => {
|
||
|
||
nextTick(() => {
|
||
filename.value = ''
|
||
})
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '上传成功!'
|
||
})
|
||
loading.value = true
|
||
imageList.value = []
|
||
uploadRef.value.clearFiles()
|
||
getImages(tableId)
|
||
}
|
||
// 删除图片
|
||
const handleRemove = (file) => {
|
||
var msg = "您真的确定要删除吗？\n\n请确认！";
|
||
if (confirm(msg)) {
|
||
loading.value = true
|
||
// const index = url.value.findIndex(n => n === file.ImageUrl)
|
||
axios.get(actions + '/Picture/DeletePicture?imageid=' + file.ImageId + '&TableName=' +
|
||
tableName + '&TableType=' + deleteType + '&ImagePath=' + file.ImagePath).then(res => {
|
||
const data = res.data
|
||
imageList.value = []
|
||
if (data.Result_Code === 100) {
|
||
getImages(tableId)
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 获取图片列表
|
||
const getImages = (id) => {
|
||
|
||
axios.get(actions + '/Picture/GetPictureList?TableId=' + id + '&TableName=' +
|
||
tableName + '&TableType=' + tableType)
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.Result_Code === 100) {
|
||
imageList.value = data.Result_Data.List
|
||
url.value = data.Result_Data.List.map(n => n.ImageUrl)
|
||
filename.value = ''
|
||
}
|
||
console.log(imageList.value)
|
||
setTimeout(() => {
|
||
|
||
loading.value = false
|
||
}, 200)
|
||
})
|
||
}
|
||
|
||
getImages(tableId)
|
||
|
||
return {
|
||
uploadRef,
|
||
filename,
|
||
readonly,
|
||
showPreviewRef,
|
||
fileList,
|
||
imageList,
|
||
previewIndex,
|
||
loading,
|
||
url,
|
||
jugeInput,
|
||
actionpath,
|
||
submitUpload,
|
||
changeImage,
|
||
handlePictureCardPreview,
|
||
handleRemove,
|
||
removeFile,
|
||
clearFile
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
const app = Vue.createApp(upload)
|
||
app.use(ElementPlus)
|
||
app.mount('#upload');
|
||
</script>
|
||
</body>
|
||
|
||
</html> |