zhc077
11 months ago
parent
cfaee66128
commit
5445d499d8
26 changed files with 440 additions and 14 deletions
|
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>--> |
||||
Loading…
Reference in new issue