From 0667f45cd45e348abe66e18a87eb46bc403cf32b Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期四, 02 一月 2025 09:15:37 +0800
Subject: [PATCH] 1. 修改aod数据导入和监测数据导入页面覆盖旧数据复选框的展示位置 2. 修改 将用来控制dialog展示的按钮放在 aod数据导入和监测数据导入 页面内 3. 新增loading并修改aod数据导入和监测数据导入页面按钮的loading样式
---
src/views/satellitetelemetry/component/SatelliteImport.vue | 287 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 215 insertions(+), 72 deletions(-)
diff --git a/src/views/satellitetelemetry/component/SatelliteImport.vue b/src/views/satellitetelemetry/component/SatelliteImport.vue
index eb962bd..9ed5ba6 100644
--- a/src/views/satellitetelemetry/component/SatelliteImport.vue
+++ b/src/views/satellitetelemetry/component/SatelliteImport.vue
@@ -1,47 +1,123 @@
<template>
- <CardDialog title="鐩戞祴鏁版嵁瀵煎叆" :model-value="modelValue" :width="420" @changed="handleChange">
+ <el-button
+ type="primary"
+ class="el-button-custom p-events-auto satellite-right-top"
+ @click="modelValue = !modelValue"
+ >
+ 鐩戞祴鏁版嵁瀵煎叆
+ </el-button>
+ <CardDialog
+ title="鐩戞祴鏁版嵁瀵煎叆"
+ v-model="modelValue"
+ :width="420"
+ @changed="handleChange"
+ destroy-on-close
+ :before-close="init"
+ >
<div class="download">
- <el-button @click="downloadTemplate" type="primary" class="el-button-custom" size="small"
- v-loading="downloadLoading">涓嬭浇妯℃澘</el-button>
+ <el-button
+ @click="downloadTemplate"
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ :loading="downloadLoading"
+ >涓嬭浇妯℃澘</el-button
+ >
</div>
- <el-form :model="formObj" :rules="rules" ref="formRef" label-position="right" label-width="60px">
+ <el-form
+ :model="formObj"
+ :rules="rules"
+ ref="formRef"
+ label-position="right"
+ label-width="60px"
+ >
<el-form-item label="鍖哄煙">
- <OptionLocation2 :level="3" :initValue="true" :checkStrictly="false" :allOption="true" v-model="location"
- width="200">
+ <OptionLocation2
+ :level="3"
+ :initValue="true"
+ :checkStrictly="false"
+ :allOption="true"
+ v-model="location"
+ width="200"
+ >
</OptionLocation2>
</el-form-item>
<OptionGridGroup ref="gridGroupRef" v-model="gridGroup"></OptionGridGroup>
<el-form-item label="鏃堕棿" prop="dateTime">
- <el-date-picker v-model="formObj.dateTime" type="date" placeholder="閫夋嫨鏃堕棿" size="small" :clearable="false"/>
+ <el-date-picker
+ v-model="formObj.dateTime"
+ type="date"
+ placeholder="閫夋嫨鏃堕棿"
+ size="small"
+ :clearable="false"
+ />
</el-form-item>
<el-form-item label="">
<el-row>
- <el-col>
- <label><el-checkbox v-model="formObj.update" label="" size="small"
- :disabled="hasGridData == undefined || hasGridData == false" />鍚屾剰</label>
- </el-col>
- <el-col>
- <el-text class="mx-1" type="danger" v-if="hasGridData == true">褰撴棩閬ユ祴鏁版嵁宸插瓨鍦紝璇峰嬀閫夊悓鎰忓悗杩涜鏁版嵁鏇存柊瑕嗙洊</el-text>
- <el-text class="mx-1" type="success" v-else-if="hasGridData == false">褰撴棩閬ユ祴鏃犳暟鎹紝鍙柊澧炲鍏�</el-text>
+ <el-col
+ v-loading="tipTextLoading"
+ v-if="!formObj.file || (formObj.file && formObj.file.length == 0)"
+ >
+ <el-text class="mx-1" type="danger" v-if="hasGridData == true"
+ >褰撴棩閬ユ祴鏁版嵁宸插瓨鍦紝璇峰嬀閫�
+ <el-checkbox
+ v-model="formObj.update"
+ label="鍚屾剰"
+ size="small"
+ :disabled="hasGridData == undefined || hasGridData == false"
+ />鍚庤繘琛屾暟鎹洿鏂拌鐩�</el-text
+ >
+ <el-text
+ class="mx-1"
+ type="success"
+ v-else-if="hasGridData == false"
+ >褰撴棩閬ユ祴鏃犳暟鎹紝鍙柊澧炲鍏�</el-text
+ >
</el-col>
</el-row>
</el-form-item>
<el-form-item>
- <el-upload v-model:file-list="formObj.file" accept=".xlsx" :limit="1" :auto-upload="false" ref="uploadRef"
- :on-exceed="handleUploadExceed" :on-change="handleUploadChange">
+ <el-upload
+ v-model:file-list="formObj.file"
+ accept=".xlsx"
+ :limit="1"
+ :auto-upload="false"
+ ref="uploadRef"
+ :on-exceed="handleUploadExceed"
+ :on-change="handleUploadChange"
+ >
<template #trigger>
- <el-button :disabled="formObj.update == undefined || (hasGridData == true && formObj.update == false)"
- type="primary" class="el-button-custom select-file-button" size="small" accept=".xlsx">閫夋嫨鏂囦欢</el-button>
+ <el-button
+ :disabled="
+ formObj.update == undefined ||
+ (hasGridData == true && formObj.update == false)
+ "
+ type="primary"
+ class="el-button-custom select-file-button"
+ size="small"
+ accept=".xlsx"
+ >閫夋嫨鏂囦欢</el-button
+ >
</template>
- <el-button @click="onSubmit" type="primary" class="el-button-custom import-button" size="small" :disabled="!formObj.file || formObj.file.length == 0"
- v-loading="loading">
+ <el-button
+ @click="onSubmit"
+ type="primary"
+ class="el-button-custom import-button"
+ size="small"
+ :disabled="!formObj.file || formObj.file.length == 0"
+ :loading="loading"
+ >
瀵煎叆
</el-button>
</el-upload>
</el-form-item>
<el-form-item>
- <el-text class="mx-1" type="danger">{{ errorTipMsg }}</el-text>
- <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text>
+ <el-text class="mx-1" type="danger" truncated>{{
+ errorTipMsg
+ }}</el-text>
+ <el-text class="mx-1" type="success" truncated>{{
+ successTipMsg
+ }}</el-text>
</el-form-item>
</el-form>
</CardDialog>
@@ -54,7 +130,7 @@
const gridGroupRef = ref(null);
const uploadRef = ref(null);
-// 鏄惁鏈夋暟鎹竷灏旂被鍨� 榛樿涓虹┖
+// 鏄惁鏈夋暟鎹竷灏旂被鍨� 榛樿涓虹┖
const hasGridData = ref(null);
const location = ref({});
const gridGroup = ref({});
@@ -62,19 +138,30 @@
const loading = ref(false);
// 涓嬭浇妯℃澘鏃跺睍绀哄湪涓嬭浇鎸夐挳涓婄殑鍔犺浇
const downloadLoading = ref(false);
+// 鎻愮ず褰撴棩缃戞牸缁勬槸鍚︽湁鏁版嵁鐨刲oading
+const tipTextLoading = ref(false);
// 鍦ㄥ鍏ユ寜閽笅鏂癸紙鐣岄潰鐨勪笅闈級閿欒鍜屾纭俊鎭�
const errorTipMsg = ref('');
const successTipMsg = ref('');
const rules = {
- dateTime: [{ required: true, message: '鏃堕棿涓嶈兘涓虹┖', trigger: 'blur' }],
+ dateTime: [{ required: true, message: '鏃堕棿涓嶈兘涓虹┖', trigger: 'blur' }]
};
-const props = defineProps({
- modelValue: Boolean
-});
+const modelValue = ref(false);
+
+
+const init = (done) => {
+ loading.value = false
+ downloadLoading.value = false
+ tipTextLoading.value = false
+ hasGridData.value = undefined
+ formObj.value.dateTime = undefined
+ resetApiTipMsg()
+ done()
+}
const resetApiTipMsg = () => {
- successTipMsg.value = ''
- errorTipMsg.value = ''
+ successTipMsg.value = '';
+ errorTipMsg.value = '';
};
const emit = defineEmits(['update:modelValue']);
@@ -84,23 +171,42 @@
};
const downloadTemplate = () => {
- downloadLoading.value = true
- gridApi.downloadTemplate().then(res => {
- downloadLoading.value = false
- }).catch(e => {
- downloadLoading.value = false
- });
+ downloadLoading.value = true;
+ gridApi
+ .downloadTemplate()
+ .then((res) => {
+ downloadLoading.value = false;
+ })
+ .catch((e) => {
+ downloadLoading.value = false;
+ });
};
// 閫氳繃缃戞牸缁勫拰鏃堕棿 鏌ヨ 鍦ㄨ繖涓や釜鍙傛暟鏉′欢涓嬫槸鍚︽湁缃戞牸鏁版嵁锛屽苟鎻愮ず鍦ㄧ晫闈腑鏈夋垨鑰呮病鏈�
const checkEmpty = () => {
- gridApi.fetchGridData(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => {
- if (res.data && res.data.length > 0) {
- hasGridData.value = true;
- } else {
- formObj.value.update = false
- hasGridData.value = false;
- }
- })
+ tipTextLoading.value = true;
+ gridApi
+ .fetchGridData(
+ gridGroup.value.id,
+ dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')
+ )
+ .then((res) => {
+ // 寤惰繜100ms缁撴潫loading鐘舵��
+ setTimeout(() => {
+ tipTextLoading.value = false;
+ }, 100);
+ if (res.data && res.data.length > 0) {
+ hasGridData.value = true;
+ } else {
+ formObj.value.update = false;
+ hasGridData.value = false;
+ }
+ })
+ .catch((e) => {
+ // 寤惰繜100ms缁撴潫loading鐘舵��
+ setTimeout(() => {
+ tipTextLoading.value = false;
+ }, 100);
+ });
};
const handleImportClick = () => {
loading.value = true;
@@ -112,7 +218,9 @@
const reader = new FileReader();
reader.readAsArrayBuffer(formObj.value.file[0].raw);
reader.onload = async (theFile) => {
- const binary = new Blob([theFile.target.result], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+ const binary = new Blob([theFile.target.result], {
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ });
formData.append('excel', binary);
formData.append('groupId', gridGroup.value.id);
formData.append('type', type);
@@ -124,53 +232,60 @@
gridApi
.importData(formData)
.then((res) => {
- resetApiTipMsg()
+ resetApiTipMsg();
loading.value = false;
if (res && res.success == true) {
// 瀵煎叆鎴愬姛锛�1.瀵煎叆鎴栬�呰鐩栨垚鍔燂紝鏄惁涓虹┖鐘舵�佹敼鍙樹簡锛岄噸鏂版鏌�
- checkEmpty()
- successTipMsg.value = res.data.result
+ checkEmpty();
+ // 鏍规嵁褰撳墠鎿嶄綔鏄彃鍏ヨ繕鏄洿鏂板睍绀烘垚鍔熸秷鎭�
+ if (isUpdate) {
+ successTipMsg.value = '瑕嗙洊鎴愬姛';
+ }else {
+ successTipMsg.value = '瀵煎叆鎴愬姛';
+ }
} else {
- errorTipMsg.value = res.message
+ errorTipMsg.value = res.message;
}
- }).catch(e => {
- loading.value = false;
- errorTipMsg.value = e
})
- }
+ .catch((e) => {
+ loading.value = false;
+ errorTipMsg.value = e;
+ });
+ };
};
// 褰撻�夋嫨鏂囦欢鍚庯細 1. 閲嶇疆鎻愮ず淇℃伅锛岄槻姝㈣瀵� 2.瀵规枃浠剁被鍨嬬殑妫�鏌�
const handleUploadChange = (file, files) => {
- resetApiTipMsg()
+ resetApiTipMsg();
const fileType = file.raw.type;
// 妫�鏌ユ枃浠剁被鍨嬫槸鍚︿负 'xlsx'
- if (fileType !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+ if (
+ fileType !==
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ ) {
ElMessage({
message: '鏂囦欢绫诲瀷閿欒锛岃閲嶆柊涓婁紶xlsx绫诲瀷鏂囦欢',
type: 'error'
- })
+ });
files.splice(0, 1); // 闃绘涓婁紶
}
};
// 鏂伴�夋嫨鏂囦欢鏇挎崲鏃ф枃浠�
const handleUploadExceed = (files) => {
- const file = files[0]
- uploadRef.value.clearFiles()
- uploadRef.value.handleStart(file)
+ const file = files[0];
+ uploadRef.value.clearFiles();
+ uploadRef.value.handleStart(file);
};
const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
submit: {
do: handleImportClick
},
cancel: {
- do: () => {
-
- }
+ do: () => {}
}
});
watch(location, (nv, ov) => {
if (nv != ov) {
- resetApiTipMsg()
+ resetApiTipMsg();
const area = {
provinceCode: nv.pCode,
provinceName: nv.pName,
@@ -185,17 +300,30 @@
}
});
// 褰撶綉鏍肩粍鍜屾椂闂撮兘涓嶄负绌� 骞朵笖 鏈変竴涓潯浠舵敼鍙樺悗閲嶆柊妫�鏌ユ槸鍚︽湁缃戞牸鏁版嵁
-watch(gridGroup, (nv) => {
- if (nv && Object.keys(nv).length === 0 && formObj.value.dateTime && Object.keys(formObj.value.dateTime).length === 0) {
- checkEmpty()
- }
-}, { deep: true });
+watch(
+ gridGroup,
+ (nv) => {
+ if (
+ nv &&
+ Object.keys(nv).length === 0 &&
+ formObj.value.dateTime &&
+ Object.keys(formObj.value.dateTime).length === 0
+ ) {
+ checkEmpty();
+ }
+ },
+ { deep: true }
+);
-watch(formObj, (nv) => {
- if (nv.dateTime && gridGroup.value) {
- checkEmpty()
- }
-}, { deep: true });
+watch(
+ formObj,
+ (nv) => {
+ if (nv.dateTime && gridGroup.value) {
+ checkEmpty();
+ }
+ },
+ { deep: true }
+);
</script>
<style scoped>
.download {
@@ -222,4 +350,19 @@
::v-deep .el-select {
width: 200px !important;
}
+
+::v-deep .el-checkbox.el-checkbox--small .el-checkbox__label {
+ font-size: 15px !important;
+}
+
+::v-deep .el-upload-list__item-file-name {
+ color: white;
+ overflow: visible;
+}
+
+.satellite-right-top {
+ width: 120px;
+ position: absolute;
+ right: 0px;
+}
</style>
--
Gitblit v1.9.3