From 790ef691ffccd8998670f4ad2beb1e722da5bd1c Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期二, 07 十一月 2023 16:16:02 +0800 Subject: [PATCH] 修改视频专网 --- src/views/index.vue | 40 +++--- src/layout/components/Navbar.vue | 2 src/assets/logo/logo.png | 0 src/components/FileUpload/index.vue | 164 +++++++++++++++++---------- src/views/monitor/operlog/index.vue | 112 +++++++++--------- 5 files changed, 181 insertions(+), 137 deletions(-) diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png index 3f919d8..06d74f1 100644 --- a/src/assets/logo/logo.png +++ b/src/assets/logo/logo.png Binary files differ diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue index bd9f099..681185a 100644 --- a/src/components/FileUpload/index.vue +++ b/src/components/FileUpload/index.vue @@ -3,16 +3,14 @@ <el-upload multiple :action="uploadFileUrl" - :before-upload="handleBeforeUpload" - :file-list="fileList" - :limit="limit" - :on-error="handleUploadError" - :on-exceed="handleExceed" :on-success="handleUploadSuccess" - :show-file-list="false" + :limit="limit" + :on-progress="handleUploadProgress" + :show-file-list="true" :headers="headers" class="upload-file-uploader" ref="fileUploadRef" + :auto-upload="false" > <!-- 涓婁紶鎸夐挳 --> <el-button type="primary">閫夊彇鏂囦欢</el-button> @@ -20,25 +18,23 @@ <!-- 涓婁紶鎻愮ず --> <div class="el-upload__tip" v-if="showTip"> 璇蜂笂浼� - <template v-if="fileSize"> - 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> - </template> - <template v-if="fileType"> - 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> - </template> - 鐨勬枃浠� +<!-- <template v-if="fileSize">--> +<!-- 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b>--> +<!-- </template>--> + + 鏂囦欢 </div> <!-- 鏂囦欢鍒楄〃 --> - <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> - <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList"> - <el-link :href="`${file.url}`" :underline="false" target="_blank"> - <span class="el-icon-document"> {{ getFileName(file.name) }} </span> - </el-link> - <div class="ele-upload-list__item-content-action"> - <el-link :underline="false" @click="handleDelete(index)" type="danger">鍒犻櫎</el-link> - </div> - </li> - </transition-group> +<!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">--> +<!-- <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">--> +<!-- <el-link :href="`${file.url}`" :underline="false" target="_blank">--> +<!-- <span class="el-icon-document"> {{ getFileName(file.name) }} </span>--> +<!-- </el-link>--> +<!-- <div class="ele-upload-list__item-content-action">--> +<!-- <el-link :underline="false" @click="handleDelete(index)" type="danger">鍒犻櫎</el-link>--> +<!-- </div>--> +<!-- </li>--> +<!-- </transition-group>--> </div> </template> @@ -46,11 +42,12 @@ import { listByIds, delOss } from "@/api/system/oss"; import { propTypes } from '@/utils/propTypes'; import { globalHeaders } from "@/utils/request"; - +import { LoadingInstance } from 'element-plus/es/components/loading/src/loading'; +let downloadLoadingInstance: LoadingInstance; const props = defineProps({ modelValue: [String, Object, Array], // 鏁伴噺闄愬埗 - limit: propTypes.number.def(5), + limit: propTypes.number.def(10), // 澶у皬闄愬埗(MB) fileSize: propTypes.number.def(5), // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] @@ -60,7 +57,7 @@ }); const { proxy } = getCurrentInstance() as ComponentInternalInstance; -const emit = defineEmits(['update:modelValue']); +const emit = defineEmits(['update:modelValue','closePopup']); const number = ref(0); const uploadList = ref<any[]>([]); @@ -70,49 +67,85 @@ const fileList = ref<any[]>([]); const showTip = computed( - () => props.isShowTip && (props.fileType || props.fileSize) + () => props.isShowTip && (props.fileSize) ); const fileUploadRef = ref<ElUploadInstance>(); -watch(() => props.modelValue, async val => { - if (val) { - let temp = 1; - // 棣栧厛灏嗗�艰浆涓烘暟缁� - let list = []; - if (Array.isArray(val)) { - list = val; - } else { - const res = await listByIds(val as string) - list = res.data.map((oss) => { - const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId }; - return data; - }); - } - // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� - fileList.value = list.map(item => { - item = { name: item.name, url: item.url, ossId: item.ossId }; - item.uid = item.uid || new Date().getTime() + temp++; - return item; - }); - } else { - fileList.value = []; - return []; - } -}, { deep: true, immediate: true }); +// watch(() => props.modelValue, async val => { +// console.log(val,props.modelValue); +// if (val) { +// let temp = 1; +// // 棣栧厛灏嗗�艰浆涓烘暟缁� +// let list = []; +// if (Array.isArray(val)) { +// list = val; +// } else { +// const res = await listByIds(val as string) +// list = res.data.map((oss) => { +// const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId }; +// return data; +// }); +// } +// // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� +// fileList.value = list.map(item => { +// item = { name: item.name, url: item.url, ossId: item.ossId }; +// item.uid = item.uid || new Date().getTime() + temp++; +// return item; +// }); +// } else { +// fileList.value = []; +// return []; +// } +// }, { deep: true, immediate: true }); +// const fileUploadRef = ref<UploadInstance>() +const handleCilck = async () => { + console.log('瀛愮粍浠舵柟娉�'); + await fileUploadRef.value!.submit() + + + // let val = props.modelValue + // if (val) { + // let temp = 1; + // // 棣栧厛灏嗗�艰浆涓烘暟缁� + // let list = []; + // if (Array.isArray(val)) { + // list = val; + // } else { + // const res = await listByIds(val as string) + // list = res.data.map((oss) => { + // const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId }; + // return data; + // }); + // } + // // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� + // fileList.value = list.map(item => { + // item = { name: item.name, url: item.url, ossId: item.ossId }; + // item.uid = item.uid || new Date().getTime() + temp++; + // return item; + // }); + // } else { + // fileList.value = []; + // return []; + // } +} +// 绗簩閮細鏆撮湶鏂规硶 +defineExpose({ + handleCilck +}) // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏� const handleBeforeUpload = (file: any) => { // 鏍℃鏂囦欢绫诲瀷 - if (props.fileType.length) { - const fileName = file.name.split('.'); - const fileExt = fileName[fileName.length - 1]; - const isTypeOk = props.fileType.indexOf(fileExt) >= 0; - if (!isTypeOk) { - proxy?.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${props.fileType.join("/")}鏍煎紡鏂囦欢!`); - return false; - } - } + // if (props.fileType.length) { + // const fileName = file.name.split('.'); + // const fileExt = fileName[fileName.length - 1]; + // const isTypeOk = props.fileType.indexOf(fileExt) >= 0; + // if (!isTypeOk) { + // proxy?.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${props.fileType.join("/")}鏍煎紡鏂囦欢!`); + // return false; + // } + // } // 鏍℃鏂囦欢澶у皬 if (props.fileSize) { const isLt = file.size / 1024 / 1024 < props.fileSize; @@ -135,10 +168,16 @@ const handleUploadError = () => { proxy?.$modal.msgError("涓婁紶鏂囦欢澶辫触"); } - +const handleUploadProgress=(e: any) => { + downloadLoadingInstance = ElLoading.service({ text: '姝e湪涓婁紶鏂囦欢锛岃绋嶅��', background: 'rgba(0, 0, 0, 0.7)' }); +} // 涓婁紶鎴愬姛鍥炶皟 const handleUploadSuccess = (res: any, file: UploadFile) => { if (res.code === 200) { + emit('closePopup') + console.log('璋冪敤鐖剁粍浠�'); + fileUploadRef.value!.clearFiles() + downloadLoadingInstance.close(); uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId }); uploadedSuccessfully(); } else { @@ -147,6 +186,7 @@ proxy?.$modal.msgError(res.msg); fileUploadRef.value?.handleRemove(file); uploadedSuccessfully(); + downloadLoadingInstance.close(); } } diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 96e6212..9cae2ac 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -4,7 +4,7 @@ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /> <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> - <div class="right-menu flex align-center"> + <div class="right-menu flex align-center" style="display:none;"> <template v-if="appStore.device !== 'mobile'"> <!-- <el-select--> <!-- v-model="companyName"--> diff --git a/src/views/index.vue b/src/views/index.vue index 33c0ed7..5574922 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -10,9 +10,9 @@ <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="fileSuffix"> - <el-input v-model="queryParams.fileSuffix" placeholder="璇疯緭鍏ユ枃浠跺悗缂�" clearable style="width: 200px" @keyup.enter="handleQuery" /> - </el-form-item> +<!-- <el-form-item label="鏂囦欢鍚庣紑" prop="fileSuffix">--> +<!-- <el-input v-model="queryParams.fileSuffix" placeholder="璇疯緭鍏ユ枃浠跺悗缂�" clearable style="width: 200px" @keyup.enter="handleQuery" />--> +<!-- </el-form-item>--> <!-- <el-form-item label="鍒涘缓鏃堕棿">--> <!-- <el-date-picker--> <!-- v-model="dateRangeCreateTime"--> @@ -42,12 +42,12 @@ <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-col> - <el-col :span="1.5"> - <el-button type="primary" plain icon="Upload" @click="handleImage" v-if="isContains(useUserStore().permissions, 'system:oss:upload')">涓婁紶鍥剧墖</el-button> - </el-col> - <el-col :span="1.5"> - <el-button type="primary" plain icon="Upload" @click="handleVideo" v-if="isContains(useUserStore().permissions, 'system:oss:upload')">涓婁紶瑙嗛</el-button> - </el-col> +<!-- <el-col :span="1.5">--> +<!-- <el-button type="primary" plain icon="Upload" @click="handleImage" v-if="isContains(useUserStore().permissions, 'system:oss:upload')">涓婁紶鍥剧墖</el-button>--> +<!-- </el-col>--> +<!-- <el-col :span="1.5">--> +<!-- <el-button type="primary" plain icon="Upload" @click="handleVideo" v-if="isContains(useUserStore().permissions, 'system:oss:upload')">涓婁紶瑙嗛</el-button>--> +<!-- </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')"> 鍒犻櫎 @@ -83,7 +83,7 @@ <!-- <el-table-column label="瀵硅薄瀛樺偍涓婚敭" align="center" prop="ossId" v-if="true" />--> <!-- <el-table-column label="鏂囦欢鍚�" align="center" prop="fileName" />--> <el-table-column label="鍘熷悕" align="center" prop="originalName" /> - <el-table-column label="鏂囦欢鍚庣紑" align="center" prop="fileSuffix" /> +<!-- <el-table-column label="鏂囦欢鍚庣紑" align="center" prop="fileSuffix" />--> <!-- <el-table-column label="鏂囦欢灞曠ず" align="center" prop="url">--> <!-- <template #default="scope">--> <!-- <ImagePreview--> @@ -96,11 +96,11 @@ <!-- <span v-text="scope.row.url" v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource" />--> <!-- </template>--> <!-- </el-table-column>--> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180" sortable="custom"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> - </template> - </el-table-column> +<!-- <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180" sortable="custom">--> +<!-- <template #default="scope">--> +<!-- <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>--> +<!-- </template>--> +<!-- </el-table-column>--> <el-table-column label="涓婁紶浜�" align="center" prop="createByName" /> <!-- <el-table-column label="鏈嶅姟鍟�" align="center" prop="service" sortable="custom" />--> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> @@ -124,7 +124,7 @@ <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 v-model="form.file" v-if="type === 0" /> + <fileUpload ref="childFile" @closePopup="getList()" 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" />" </el-form-item> @@ -189,6 +189,7 @@ const inputRef = ref<any>() const inputSty =ref<any>() const currentIp = ref('') +const childFile = ref<any>() // 榛樿鎺掑簭 const defaultSort = ref({ prop: 'createTime', order: 'ascending' }); @@ -341,9 +342,12 @@ dialog.title = "涓婁紶瑙嗛"; } /** 鎻愪氦鎸夐挳 */ -const submitForm = () => { + +const submitForm = async () => { + await childFile.value.handleCilck() dialog.visible = false; - getList(); + // setTimeout(() =>{ getList();},1000) + } const handleCode = async (row: OssVO) => { console.log(row, row.ossId); diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue index 9a6d9fc..9653e41 100644 --- a/src/views/monitor/operlog/index.vue +++ b/src/views/monitor/operlog/index.vue @@ -7,33 +7,33 @@ <el-form-item label="鎿嶄綔鍦板潃" prop="operIp"> <el-input v-model="queryParams.operIp" placeholder="璇疯緭鍏ユ搷浣滃湴鍧�" clearable style="width: 240px;" @keyup.enter="handleQuery"/> </el-form-item> - <el-form-item label="绯荤粺妯″潡" prop="title"> - <el-input v-model="queryParams.title" placeholder="璇疯緭鍏ョ郴缁熸ā鍧�" clearable style="width: 240px;" @keyup.enter="handleQuery" /> - </el-form-item> - <el-form-item label="鎿嶄綔浜哄憳" prop="operName"> - <el-input v-model="queryParams.operName" placeholder="璇疯緭鍏ユ搷浣滀汉鍛�" clearable style="width: 240px;" @keyup.enter="handleQuery" /> - </el-form-item> - <el-form-item label="绫诲瀷" prop="businessType"> - <el-select v-model="queryParams.businessType" placeholder="鎿嶄綔绫诲瀷" clearable style="width: 240px"> - <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" /> - </el-select> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="鎿嶄綔鐘舵��" clearable style="width: 240px"> - <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" /> - </el-select> - </el-form-item> - <el-form-item label="鎿嶄綔鏃堕棿" style="width: 308px"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD HH:mm:ss" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" - ></el-date-picker> - </el-form-item> +<!-- <el-form-item label="绯荤粺妯″潡" prop="title">--> +<!-- <el-input v-model="queryParams.title" placeholder="璇疯緭鍏ョ郴缁熸ā鍧�" clearable style="width: 240px;" @keyup.enter="handleQuery" />--> +<!-- </el-form-item>--> +<!-- <el-form-item label="鎿嶄綔浜哄憳" prop="operName">--> +<!-- <el-input v-model="queryParams.operName" placeholder="璇疯緭鍏ユ搷浣滀汉鍛�" clearable style="width: 240px;" @keyup.enter="handleQuery" />--> +<!-- </el-form-item>--> +<!-- <el-form-item label="绫诲瀷" prop="businessType">--> +<!-- <el-select v-model="queryParams.businessType" placeholder="鎿嶄綔绫诲瀷" clearable style="width: 240px">--> +<!-- <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />--> +<!-- </el-select>--> +<!-- </el-form-item>--> +<!-- <el-form-item label="鐘舵��" prop="status">--> +<!-- <el-select v-model="queryParams.status" placeholder="鎿嶄綔鐘舵��" clearable style="width: 240px">--> +<!-- <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />--> +<!-- </el-select>--> +<!-- </el-form-item>--> +<!-- <el-form-item label="鎿嶄綔鏃堕棿" style="width: 308px">--> +<!-- <el-date-picker--> +<!-- v-model="dateRange"--> +<!-- value-format="YYYY-MM-DD HH:mm:ss"--> +<!-- type="daterange"--> +<!-- range-separator="-"--> +<!-- start-placeholder="寮�濮嬫棩鏈�"--> +<!-- end-placeholder="缁撴潫鏃ユ湡"--> +<!-- :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"--> +<!-- ></el-date-picker>--> +<!-- </el-form-item>--> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> @@ -77,15 +77,15 @@ <dict-tag :options="sys_oper_type" :value="scope.row.businessType" /> </template> </el-table-column> - <el-table-column - label="鎿嶄綔浜哄憳" - align="center" - width="110" - prop="operName" - :show-overflow-tooltip="true" - sortable="custom" - :sort-orders="['descending', 'ascending']" - /> +<!-- <el-table-column--> +<!-- label="鎿嶄綔浜哄憳"--> +<!-- align="center"--> +<!-- width="110"--> +<!-- prop="operName"--> +<!-- :show-overflow-tooltip="true"--> +<!-- sortable="custom"--> +<!-- :sort-orders="['descending', 'ascending']"--> +<!-- />--> <el-table-column label="鎿嶄綔鍦板潃" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" /> <el-table-column label="鎿嶄綔鐘舵��" align="center" prop="status"> <template #default="scope"> @@ -97,26 +97,26 @@ <span>{{ parseTime(scope.row.operTime) }}</span> </template> </el-table-column> - <el-table-column - label="娑堣�楁椂闂�" - align="center" - prop="costTime" - width="110" - :show-overflow-tooltip="true" - sortable="custom" - :sort-orders="['descending', 'ascending']" - > - <template #default="scope"> - <span>{{ scope.row.costTime }}姣</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" fixed="right" align="center" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="璇︾粏" placement="top"> - <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:operlog:query']"> </el-button> - </el-tooltip> - </template> - </el-table-column> +<!-- <el-table-column--> +<!-- label="娑堣�楁椂闂�"--> +<!-- align="center"--> +<!-- prop="costTime"--> +<!-- width="110"--> +<!-- :show-overflow-tooltip="true"--> +<!-- sortable="custom"--> +<!-- :sort-orders="['descending', 'ascending']"--> +<!-- >--> +<!-- <template #default="scope">--> +<!-- <span>{{ scope.row.costTime }}姣</span>--> +<!-- </template>--> +<!-- </el-table-column>--> +<!-- <el-table-column label="鎿嶄綔" fixed="right" align="center" class-name="small-padding fixed-width">--> +<!-- <template #default="scope">--> +<!-- <el-tooltip content="璇︾粏" placement="top">--> +<!-- <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:operlog:query']"> </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" /> -- Gitblit v1.8.0