After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 812 KiB |
After Width: | Height: | Size: 494 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 812 KiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 494 KiB |
After Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 25 KiB |
@ -0,0 +1,114 @@ |
|||||||
|
<template> |
||||||
|
<a-modal :confirm-loading="uploading" v-model:visible="isModalShow" |
||||||
|
title="图片上传" @ok="handleOk" @cancel="handleCancel"> |
||||||
|
<!-- <a-form--> |
||||||
|
<!-- name="basic"--> |
||||||
|
<!-- :label-col="{ span: 4}"--> |
||||||
|
<!-- :wrapper-col="{ span: 19 }"--> |
||||||
|
<!-- autocomplete="off"--> |
||||||
|
<!-- style="margin-top: 20px"--> |
||||||
|
<!-- >--> |
||||||
|
<!-- <a-form-item label="作品名称:">--> |
||||||
|
<!-- <a-input placeholder="请输入作品名称"--> |
||||||
|
<!-- v-model:value.lazy="workName"/>--> |
||||||
|
<!-- </a-form-item>--> |
||||||
|
<!-- </a-form>--> |
||||||
|
<a-upload-dragger |
||||||
|
:fileList="readyUploadFileList" |
||||||
|
:multiple="true" |
||||||
|
:beforeUpload="workCustomUpload" |
||||||
|
accept="image/png" |
||||||
|
@remove="handleRemove" |
||||||
|
> |
||||||
|
<p class="ant-upload-drag-icon"> |
||||||
|
<inbox-outlined></inbox-outlined> |
||||||
|
</p> |
||||||
|
<p class="ant-upload-text">点击或拖拽文件到此处进行上传</p> |
||||||
|
<!-- <p class="ant-upload-hint">--> |
||||||
|
<!-- 可以同时上传多个文件,请一次性将作品中的所有文件进行上传</p>--> |
||||||
|
</a-upload-dragger> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import {ref} from 'vue'; |
||||||
|
import {InboxOutlined} from '@ant-design/icons-vue'; |
||||||
|
import {message, UploadProps} from "ant-design-vue"; |
||||||
|
import {loginPageImageUpload} from "/@/views/UpfilePersion/UpfilePersion.api"; |
||||||
|
|
||||||
|
const isModalShow = ref(false) |
||||||
|
const uploading = ref(false) |
||||||
|
const annualCompId = ref('') |
||||||
|
const readyUploadFileList = ref<UploadProps['fileList']>([]); |
||||||
|
const workName = ref('') |
||||||
|
const flag = ref('') |
||||||
|
let reloadData: Function; |
||||||
|
// const modalShow = (show: boolean, id: string, reload: Function) => { |
||||||
|
// readyUploadFileList.value = <UploadProps['fileList']>[] |
||||||
|
// annualCompId.value = id |
||||||
|
// uploading.value = false |
||||||
|
// workName.value = '' |
||||||
|
// isModalShow.value = show |
||||||
|
// reloadData = reload |
||||||
|
// } |
||||||
|
|
||||||
|
const modalShow = (show: boolean, id: string, reload: Function) => { |
||||||
|
readyUploadFileList.value = <UploadProps['fileList']>[] |
||||||
|
// annualCompId.value = id |
||||||
|
uploading.value = false |
||||||
|
workName.value = '' |
||||||
|
flag.value = id |
||||||
|
isModalShow.value = show |
||||||
|
reloadData = reload |
||||||
|
} |
||||||
|
|
||||||
|
async function handleOk() { |
||||||
|
// 未选择文件则禁止上传 |
||||||
|
if (readyUploadFileList.value.length !=1) { |
||||||
|
return message.error('请选择一个.png文件'); |
||||||
|
} |
||||||
|
// 定义作品上传所需的参数 |
||||||
|
const formData: FormData = new FormData(); |
||||||
|
// 作品列表 |
||||||
|
readyUploadFileList.value.forEach(file => formData.append("files", file)) |
||||||
|
formData.append('flag', flag.value) |
||||||
|
// 作品名称 |
||||||
|
// formData.append('flag', workName.value) |
||||||
|
uploading.value = true |
||||||
|
let resp = await loginPageImageUpload(formData) |
||||||
|
uploading.value = false |
||||||
|
if (resp) { |
||||||
|
// 隐藏作品上传对话框 |
||||||
|
isModalShow.value = false |
||||||
|
annualCompId.value = '' |
||||||
|
readyUploadFileList.value = [] |
||||||
|
workName.value = '' |
||||||
|
// reloadData() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function handleCancel() { |
||||||
|
// 隐藏作品上传对话框 |
||||||
|
isModalShow.value = false |
||||||
|
annualCompId.value = '' |
||||||
|
uploading.value = false |
||||||
|
readyUploadFileList.value = [] |
||||||
|
workName.value = '' |
||||||
|
} |
||||||
|
|
||||||
|
function workCustomUpload(file) { |
||||||
|
readyUploadFileList.value = [...(readyUploadFileList.value || []), file]; |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
const handleRemove: UploadProps['onRemove'] = file => { |
||||||
|
const index = readyUploadFileList.value.indexOf(file); |
||||||
|
const newFileList = readyUploadFileList.value.slice(); |
||||||
|
newFileList.splice(index, 1); |
||||||
|
readyUploadFileList.value = newFileList; |
||||||
|
}; |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
modalShow |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
@ -0,0 +1,220 @@ |
|||||||
|
<template> |
||||||
|
<!-- <PageWrapper title="上传">--> |
||||||
|
<a-alert message="首页图片配置"/> |
||||||
|
<div> |
||||||
|
<br/> |
||||||
|
<a-space size="small"> |
||||||
|
<a-button class="my-5" style="margin-right: 10px;" type="primary" @click="handleUploadImage('LOGO')"> |
||||||
|
上传LOGO |
||||||
|
</a-button> |
||||||
|
<a-button class="my-5" style="margin-right: 10px;" type="primary" @click="handleUploadImage('BG')"> |
||||||
|
上传背景图片 |
||||||
|
</a-button> |
||||||
|
<a-button class="my-5" style="margin-right: 10px;" type="primary" @click="handleUploadImage('AD')"> |
||||||
|
上传公司图片 |
||||||
|
</a-button> |
||||||
|
</a-space> |
||||||
|
</div> |
||||||
|
<!-- </PageWrapper>--> |
||||||
|
<WorkUpload ref="workUploadRef"/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" name="upfile_persion-upfilePersion" setup> |
||||||
|
import {reactive, ref} from 'vue'; |
||||||
|
import {useUserStore} from '/@/store/modules/user'; |
||||||
|
import {useRoute} from 'vue-router'; |
||||||
|
import WorkUpload from '/@/views/system/loginPage/components/Upload4Logo.vue'; |
||||||
|
import {useGlobSetting} from '/@/hooks/setting'; |
||||||
|
|
||||||
|
const globalSetting = useGlobSetting(); |
||||||
|
const formRef = ref(); |
||||||
|
const queryParam = reactive<any>({}); |
||||||
|
const toggleSearchStatus = ref<boolean>(false); |
||||||
|
const registerModal = ref(); |
||||||
|
const workUploadRef = ref(); |
||||||
|
const userStore = useUserStore(); |
||||||
|
// 路由信息 |
||||||
|
const route = useRoute(); |
||||||
|
|
||||||
|
async function handleUploadImage(flag) { |
||||||
|
console.log("---上传图片flag",flag); |
||||||
|
// isCanUpload.value = false; |
||||||
|
// await canUpload({ annualCompPointId: route.query.annualCompPointId }); |
||||||
|
// isCanUpload.value = true; |
||||||
|
// if (isCanUpload.value) { |
||||||
|
// workUploadRef.value.modalShow(true, route.query.annualCompPointId, reload); |
||||||
|
workUploadRef.value.modalShow(true,flag); |
||||||
|
// } |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.jeecg-basic-table-form-container { |
||||||
|
.table-page-search-submitButtons { |
||||||
|
display: block; |
||||||
|
margin-bottom: 24px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.query-group-cust { |
||||||
|
width: calc(50% - 15px); |
||||||
|
min-width: 100px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.query-group-split-cust { |
||||||
|
width: 30px; |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<!--<style lang="less" scoped>--> |
||||||
|
<!--.user-setting-top {--> |
||||||
|
<!-- padding-top: 40px;--> |
||||||
|
<!-- width: 100%;--> |
||||||
|
<!-- border-bottom: 1px solid @border-color-base;--> |
||||||
|
<!-- display: flex;--> |
||||||
|
<!-- padding-bottom: 40px;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-avatar {--> |
||||||
|
<!-- align-items: center;--> |
||||||
|
<!-- display: flex;--> |
||||||
|
<!-- margin-right: 30px;--> |
||||||
|
<!-- flex: 1;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.change-avatar {--> |
||||||
|
<!-- img {--> |
||||||
|
<!-- display: block;--> |
||||||
|
<!-- margin-bottom: 15px;--> |
||||||
|
<!-- border-radius: 50%;--> |
||||||
|
<!-- }--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-right {--> |
||||||
|
<!-- margin-left: 25px !important;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.font-size-15 {--> |
||||||
|
<!-- font-size: 15px;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.font-size-17 {--> |
||||||
|
<!-- font-size: 17px;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.pointer {--> |
||||||
|
<!-- cursor: pointer;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-name {--> |
||||||
|
<!-- white-space: nowrap;--> |
||||||
|
<!-- overflow: hidden;--> |
||||||
|
<!-- width: 200px;--> |
||||||
|
<!-- text-overflow: ellipsis;--> |
||||||
|
<!-- line-height: 32px !important;--> |
||||||
|
<!-- /*begin 兼容暗夜模式*/--> |
||||||
|
<!-- color: @text-color;--> |
||||||
|
<!-- /*end 兼容暗夜模式*/--> |
||||||
|
<!-- font-weight: 500;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.gray-bd {--> |
||||||
|
<!-- color: #bdbdbd--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-icon {--> |
||||||
|
<!-- margin-left: 4px;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-data {--> |
||||||
|
<!-- width: 100% !important;--> |
||||||
|
<!-- display: flex;--> |
||||||
|
<!-- min-width: 0;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-detail {--> |
||||||
|
<!-- width: 40%;--> |
||||||
|
<!-- display: flex;--> |
||||||
|
<!-- flex-direction: column;--> |
||||||
|
<!-- padding: 40px 0;--> |
||||||
|
|
||||||
|
<!-- .item-label {--> |
||||||
|
<!-- display: inline-block;--> |
||||||
|
<!-- text-align: left;--> |
||||||
|
<!-- width: 80px;--> |
||||||
|
<!-- }--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.font-bold {--> |
||||||
|
<!-- font-weight: 700 !important;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.margin-bottom-10 {--> |
||||||
|
<!-- margin-bottom: 10px;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--/*begin 兼容暗夜模式*/--> |
||||||
|
<!--.gray-75 {--> |
||||||
|
<!-- color: @text-color !important;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.gray-3 {--> |
||||||
|
<!-- color: @text-color;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--/*end 兼容暗夜模式*/--> |
||||||
|
|
||||||
|
<!--.account-info {--> |
||||||
|
<!-- width: 60%;--> |
||||||
|
<!-- display: flex;--> |
||||||
|
<!-- flex-direction: column;--> |
||||||
|
<!-- padding: 40px 0;--> |
||||||
|
<!-- box-sizing: border-box;--> |
||||||
|
<!-- margin-left: 10px;--> |
||||||
|
|
||||||
|
<!-- .item-label {--> |
||||||
|
<!-- display: inline-block;--> |
||||||
|
<!-- text-align: left;--> |
||||||
|
<!-- width: 80px;--> |
||||||
|
<!-- }--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.nowarp {--> |
||||||
|
<!-- overflow: hidden;--> |
||||||
|
<!-- white-space: nowrap;--> |
||||||
|
<!-- text-overflow: ellipsis;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.account-padding {--> |
||||||
|
<!-- padding-left: 20px !important;--> |
||||||
|
<!-- padding-right: 40px !important;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.use-day {--> |
||||||
|
<!-- /*begin 兼容暗夜模式*/--> |
||||||
|
<!-- color: @text-color;--> |
||||||
|
<!-- /*end 兼容暗夜模式*/--> |
||||||
|
<!-- margin-top: 10px;--> |
||||||
|
<!-- font-size: 13px;--> |
||||||
|
|
||||||
|
<!-- span {--> |
||||||
|
<!-- color: #1e88e5;--> |
||||||
|
<!-- margin-left: 5px;--> |
||||||
|
<!-- }--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--.font-size-13 {--> |
||||||
|
<!-- font-size: 13px;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--/*begin 兼容暗夜模式*/--> |
||||||
|
<!--.font-color-gray {--> |
||||||
|
<!-- color: @text-color;--> |
||||||
|
<!--}--> |
||||||
|
|
||||||
|
<!--/*end 兼容暗夜模式*/--> |
||||||
|
<!--</style>--> |