From 07ffc364bf90b369eac610627a33b973bf0dc260 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期三, 10 四月 2024 11:54:14 +0800 Subject: [PATCH] 查看提取码字体大小、居中调整 --- src/views/index.vue | 283 +++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 216 insertions(+), 67 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index cb759dd..2a94d71 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,73 +1,103 @@ <template> <div class="p-2"> - <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> - <div class="mb-[10px]" v-show="showSearch"> - <el-card shadow="hover"> - <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> + <!-- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">--> + <!-- <div class="mb-[10px]" v-show="showSearch">--> + <!-- <el-card shadow="hover">--> + <!-- <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">--> - <el-form-item label="鍘熷悕" prop="originalName"> - <el-input v-model="queryParams.originalName" placeholder="璇疯緭鍏ュ師鍚�" clearable style="width: 200px" @keyup.enter="handleQuery" /> - </el-form-item> + <!-- <el-form-item label="鍘熷悕" prop="originalName">--> + <!-- <el-input v-model="queryParams.originalName" placeholder="璇疯緭鍏ュ師鍚�" clearable style="width: 200px" @keyup.enter="handleQuery" />--> + <!-- </el-form-item>--> - <el-form-item> - <el-button type="primary" icon="search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> - </el-card> - </div> - </transition> + <!-- <el-form-item>--> + <!-- <el-button type="primary" icon="search" @click="handleQuery">鎼滅储</el-button>--> + <!-- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>--> + <!-- </el-form-item>--> + <!-- </el-form>--> + <!-- </el-card>--> + <!-- </div>--> + <!-- </transition>--> <el-card shadow="hover"> <template #header> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button type="primary" plain icon="Upload" @click="handleFile" v-if="isContains(useUserStore().permissions, 'system:oss:upload')">涓婁紶鏂囦欢</el-button> + <el-row style="text-align: center"> + <el-col style="display:flex;justify-content: center;align-items: center;min-height: calc(100vh - 160px)"> + <div style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center" class="input-col"> + <el-input + v-model="input1" + placeholder="璇疯緭鍏ユ彁鍙栫爜" + style="min-height: 5rem;min-width: 21rem;font-size: 2rem;border-radius: 40px;max-width: 21rem;" + > + </el-input> + <el-button + style="min-height: 5rem;min-width: 21rem;font-size: 2rem;border-radius: 40px;margin-top: 2rem" + type="primary" + @click="downloadFile" + >涓嬭浇</el-button + > + </div> + <div style="flex: 1;margin-top: 6rem" v-if="isContains(useUserStore().permissions, 'system:oss:upload')"> + <el-button + style="min-height: 5rem;min-width: 21rem;font-size: 2rem;border-radius: 40px;flex: 1;margin-top: 2rem" + type="primary" + icon="Upload" + @click="handleFile" + v-if="isContains(useUserStore().permissions, 'system:oss:upload')" + >涓婁紶鏂囦欢</el-button + > + </div> </el-col> - <el-col :span="1.5"> - <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-if="isContains(useUserStore().permissions, 'system:oss:remove')"> - 鍒犻櫎 - </el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + <!-- <el-col :span="1.5">--> + <!-- <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-if="isContains(useUserStore().permissions, 'system:oss:remove')">--> + <!-- 鍒犻櫎--> + <!-- </el-button>--> + <!-- </el-col>--> + <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>--> </el-row> </template> - <el-table - v-loading="loading" - :data="ossList" - @selection-change="handleSelectionChange" - :header-cell-class-name="handleHeaderClass" - @header-click="handleHeaderCLick" - v-if="showTable" - > - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="鍘熷悕" align="center" prop="originalName" /> - <el-table-column label="涓婁紶浜�" align="center" prop="createByName" /> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="鏌ョ湅鎻愬彇鐮�" placement="top"> - <el-button link type="primary" icon="Search" @click="handleCode(scope.row)" v-if="isContains(useUserStore().permissions, 'system:oss:view')"></el-button> - </el-tooltip> - <el-tooltip content="涓嬭浇" placement="top"> - <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)" v-if="isContains(useUserStore().permissions, 'system:oss:download')"></el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-if="isContains(useUserStore().permissions, 'system:oss:remove')"></el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> + <!-- <el-table--> + <!-- v-loading="loading"--> + <!-- :data="ossList"--> + <!-- @selection-change="handleSelectionChange"--> + <!-- :header-cell-class-name="handleHeaderClass"--> + <!-- @header-click="handleHeaderCLick"--> + <!-- v-if="showTable"--> + <!-- >--> + <!-- <el-table-column type="index" />--> + <!--<!– <el-table-column type="selection" width="55" align="center" />–>--> + <!-- <el-table-column label="鍘熷悕" align="center" prop="originalName" />--> + <!-- <el-table-column label="涓婁紶鏃堕棿" align="center" prop="createTime" />--> + <!-- <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">--> + <!-- <template #default="scope">--> + <!-- <el-tooltip content="鏌ョ湅鎻愬彇鐮�" placement="top">--> + <!-- <el-button link type="primary" icon="Search" @click="handleCode(scope.row)" v-if="isContains(useUserStore().permissions, 'system:oss:view')"></el-button>--> + <!-- </el-tooltip>--> + <!-- <el-tooltip content="涓嬭浇" placement="top">--> + <!-- <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)" v-if="isContains(useUserStore().permissions, 'system:oss:download')"></el-button>--> + <!-- </el-tooltip>--> + <!-- <el-tooltip content="鍒犻櫎" placement="top">--> + <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-if="isContains(useUserStore().permissions, 'system:oss:remove')"></el-button>--> + <!-- </el-tooltip>--> + <!-- </template>--> + <!-- </el-table-column>--> + <!-- </el-table>--> - <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> + <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />--> </el-card> <!-- 娣诲姞鎴栦慨鏀筄SS瀵硅薄瀛樺偍瀵硅瘽妗� --> <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> <el-form ref="ossFormRef" :model="form" :rules="rules" label-width="80px"> <el-form-item label="鏂囦欢鍚�"> - <fileUpload ref="childFile" @closePopup="getList()" v-model="form.file" v-if="type === 0" /> + <fileUpload + ref="childFile" + @closePopup="getList();lookPawsd($event)" + @openPopup="lookPawsd($event)" + v-model="form.file" + v-if="type === 0" + /> <imageUpload v-model="form.file" v-if="type === 1" /> - <video-upload v-model="form.file" v-if="type === 2" />" + <video-upload v-model="form.file" v-if="type === 2" /> </el-form-item> </el-form> <template #footer> @@ -78,15 +108,49 @@ </template> </el-dialog> <el-dialog :title="titleDownload" v-model="visibleCode" width="500px" append-to-body> - <span v-show="titleDownload=='鏌ョ湅鎻愬彇鐮�'">{{testtxt}}</span> - <el-input style="margin: 10px 0" ref="inputRef" :style="inputSty" v-show="titleDownload!='鏌ョ湅鎻愬彇鐮�'" v-model="pasTxt" v-if="isContains(useUserStore().permissions, 'system:oss:download')" placeholder="璇疯緭鍏ユ枃浠舵彁鍙栫爜"></el-input> - <el-button link type="primary" v-show="titleDownload!='鏌ョ湅鎻愬彇鐮�'" icon="Download" @click="handleDownloadFile()" v-if="isContains(useUserStore().permissions, 'system:oss:download')">涓嬭浇</el-button> + <div style="width: 100%;text-align: center"> + <p style="color: red; font-size: 20px">鎻愬彇鐮佸皢浼氬湪24灏忔椂鍚庡け鏁堣灏藉揩涓嬭浇!</p> + <span v-show="titleDownload=='鏌ョ湅鎻愬彇鐮�'" style="font-size: 80px;">{{testtxt}}</span> + </div> + <el-input + style="margin: 10px 0" + ref="inputRef" + :style="inputSty" + v-show="titleDownload=='杈撳叆鎻愬彇鐮�'" + v-model="pasTxt" + v-if="isContains(useUserStore().permissions, 'system:oss:download')" + placeholder="璇疯緭鍏ユ枃浠舵彁鍙栫爜" + ></el-input> + <el-input + style="margin: 10px 0" + ref="inputRef" + :style="inputSty" + v-show="titleDownload=='璇疯緭鍏ユ彁鍙栫爜'" + v-model="pasTxt" + placeholder="璇疯緭鍏ユ枃浠舵彁鍙栫爜" + ></el-input> + <!-- <el-button link type="primary" v-show="titleDownload=='杈撳叆鎻愬彇鐮�'" icon="Download" @click="handleDownloadFile()" v-if="isContains(useUserStore().permissions, 'system:oss:download')">涓嬭浇</el-button>--> + <!-- <el-button link type="primary" v-show="titleDownload=='璇疯緭鍏ユ彁鍙栫爜'" icon="Delete" @click="delFile()" >鍒犻櫎</el-button>--> <template #footer> <div class="dialog-footer"> - <el-button type="primary" @click="visibleCode = false">纭� 瀹�</el-button> - <el-button @click="visibleCode = false">鍙� 娑�</el-button> + <el-button + link + type="primary" + v-show="titleDownload=='杈撳叆鎻愬彇鐮�'" + icon="Download" + @click="handleDownloadFile()" + v-if="isContains(useUserStore().permissions, 'system:oss:download')" + >涓嬭浇</el-button + > + <el-button link type="primary" v-show="titleDownload=='璇疯緭鍏ユ彁鍙栫爜'" icon="Delete" @click="delFile()">鍒犻櫎</el-button> + <el-button type="primary" @click="visibleCode = false">纭� 瀹�</el-button> </div> </template> + </el-dialog> + <el-dialog v-model="dialogVisible" title="" width="37%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"> + <span @closePopup1="lookPawsd1()"> + <el-progress type="dashboard" :percentage="percentage2" style="display: flex;justify-content: center" :color="colors" /> + </span> </el-dialog> </div> </template> @@ -100,6 +164,7 @@ import usePermissionStore from "@/store/modules/permission"; import { isHttp } from "@/utils/validate"; import router from '@/router'; +import { ref } from "vue"; const { proxy } = getCurrentInstance() as ComponentInternalInstance; const ossList = ref<OssVO[]>([]); @@ -115,6 +180,13 @@ const previewListResource = ref(true); const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']); const visibleCode = ref(false); +const colors = [ + { color: '#f56c6c', percentage: 20 }, + { color: '#e6a23c', percentage: 40 }, + { color: '#5cb87a', percentage: 60 }, + { color: '#1989fa', percentage: 80 }, + { color: '#6f7ad3', percentage: 100 }, +] const dialog = reactive<DialogOption>({ visible: false, title: '' @@ -126,13 +198,16 @@ const inputRef = ref<any>() const inputSty =ref<any>() const currentIp = ref('') +const input1 = ref('') const childFile = ref<any>() +const figType = ref<any>() // 榛樿鎺掑簭 const defaultSort = ref({ prop: 'createTime', order: 'ascending' }); const ossFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>(); - +const dialogVisible = ref(false) +const percentage2 = ref(0) const initFormData = { file: undefined, } @@ -257,6 +332,7 @@ /** 浠诲姟鏃ュ織鍒楄〃鏌ヨ */ /** 鏂囦欢鎸夐挳鎿嶄綔 */ const handleFile = () => { + percentage2.value = 0; reset(); type.value = 0; dialog.visible = true; @@ -281,13 +357,47 @@ await childFile.value.handleCilck() dialog.visible = false; } +const state = reactive({ + mytime:0,//瀹氫箟瀹氭椂鍣� +}) +watch(percentage2, (new1,new2) => { + console.log(new1,new2) + if(new1 == 95){ + clearInterval(state.mytime); + state.mytime = 0; + } +}) +const lookPawsd1 = async () => { + dialogVisible.value = true; +} +const lookPawsd = async (row: any) => { + console.log(row, row.ossId); + clearInterval(state.mytime); + state.mytime = 0; + if(row == '123123'){ + dialogVisible.value = true; + state.mytime = setInterval(() => { + percentage2.value = (percentage2.value % 100) + 5 + }, 500) + } + else{ + dialogVisible.value = false; + clearInterval(state.mytime); + state.mytime = 0; + testtxt.value = row.password; + titleDownload.value = '鏌ョ湅鎻愬彇鐮�' + pasTxt.value = '' + visibleCode.value = true + } + +} const handleCode = async (row: OssVO) => { console.log(row, row.ossId); await examineIds(row.ossId).then(res => { console.log(res); if (res.code == 200) { - testtxt.value = res.msg; + testtxt.value = res.data.password titleDownload.value = '鏌ョ湅鎻愬彇鐮�' pasTxt.value = '' // inputSty.value ={ @@ -314,6 +424,13 @@ downIds.value = ref(row.ossId) console.log(toRaw(downIds.value.value)); } +const delFile=async () => { + let oss = figType.value+'/'+ pasTxt.value; + await delOss(oss).finally(() => loading.value = false); + await getList(); + proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + visibleCode.value = false +} const handleDownloadFile = ()=>{ console.log(downIds.value); if (pasTxt.value){ @@ -325,17 +442,27 @@ } // inputRef.value.style.border = '1px solid red' } - + visibleCode.value=false } /** 鐢ㄦ埛鐘舵�佷慨鏀� */ /** 鍒犻櫎鎸夐挳鎿嶄綔 */ const handleDelete = async (row?: OssVO) => { - const ossIds = row?.ossId || ids.value; - await proxy?.$modal.confirm('鏄惁纭鍒犻櫎OSS瀵硅薄瀛樺偍缂栧彿涓�"' + ossIds + '"鐨勬暟鎹」?'); - loading.value = true; - await delOss(ossIds).finally(() => loading.value = false); - await getList(); - proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + let ossIds = row?.ossId || ids.value; + titleDownload.value = '璇疯緭鍏ユ彁鍙栫爜' + pasTxt.value = '' + inputSty.value ={ + border: '1px solid blue', + borderRadius: '5px' + } + visibleCode.value = true + figType.value = ossIds + console.log(figType); + // await proxy?.$modal.confirm('鏄惁纭鍒犻櫎OSS瀵硅薄瀛樺偍缂栧彿涓�"' + ossIds + '"鐨勬暟鎹」?'); + // loading.value = true; + // ossIds = ossIds+'/'+pasTxt.value; + // await delOss(ossIds).finally(() => loading.value = false); + // await getList(); + // proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); } const refreshPage = async () => { const accessRoutes = await usePermissionStore().generateRoutes(); @@ -397,17 +524,39 @@ // } }) +const downloadFile = ()=>{ + console.log(input1.value); + if (input1.value){ + proxy?.$download.ossDown("12345678",input1.value) + }else { + inputSty.value ={ + border: '1px solid red' + } + // inputRef.value.style.border = '1px solid red' + } + visibleCode.value=false +} onMounted(async () => { console.log('绗簩aaaaaaa',useUserStore().permissions); // 绛夊緟 useUserStore() 鏂规硶鐨� getInfo() 鏂规硶杩斿洖缁撴灉骞惰祴鍊肩粰 err 鍙橀噺 // const [err] = await tos(useUserStore().getInfo()); if (getToken()){ + console.log('鏈塼oken'); await getList(); }else { + console.log('鏃爐oken'); + router.push('/login') } // 璋冪敤 getList() 鏂规硶 }) - </script> +<style lang="scss" scoped> +.input-col{ + :deep(.el-input__wrapper) { + border-radius: 40px!important; + padding-left: 3rem; + } +} +</style> -- Gitblit v1.8.0