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/AODImport.vue | 282 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 208 insertions(+), 74 deletions(-)
diff --git a/src/views/satellitetelemetry/component/AODImport.vue b/src/views/satellitetelemetry/component/AODImport.vue
index 34167b4..830436b 100644
--- a/src/views/satellitetelemetry/component/AODImport.vue
+++ b/src/views/satellitetelemetry/component/AODImport.vue
@@ -1,47 +1,119 @@
<template>
- <CardDialog title="AOD鏁版嵁瀵煎叆" :model-value="modelValue" :width="420" @changed="handleChange">
+ <el-button
+ type="primary"
+ class="el-button-custom p-events-auto aod-right-top"
+ @click="modelValue = !modelValue"
+ >
+ AOD鏁版嵁瀵煎叆
+ </el-button>
+ <CardDialog
+ title="AOD鏁版嵁瀵煎叆"
+ 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="hasGridAod == undefined || hasGridAod == false" />鍚屾剰</label>
- </el-col>
- <el-col>
- <el-text class="mx-1" type="danger" v-if="hasGridAod == true">褰撴棩AOD鏁版嵁宸插瓨鍦紝璇峰嬀閫夊悓鎰忓悗杩涜鏁版嵁鏇存柊瑕嗙洊</el-text>
- <el-text class="mx-1" type="success" v-else-if="hasGridAod == false">褰撴棩AOD鏃犳暟鎹紝鍙柊澧炲鍏�</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="hasGridAod == true"
+ >褰撴棩AOD鏁版嵁宸插瓨鍦紝璇峰嬀閫�<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="hasGridAod == false"
+ >褰撴棩AOD鏃犳暟鎹紝鍙柊澧炲鍏�</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 || (hasGridAod == 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 ||
+ (hasGridAod == 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 +126,7 @@
const gridGroupRef = ref(null);
const uploadRef = ref(null);
-// 鏄惁鏈夋暟鎹竷灏旂被鍨� 榛樿涓虹┖
+// 鏄惁鏈夋暟鎹竷灏旂被鍨� 榛樿涓虹┖
const hasGridAod = ref(null);
const location = ref({});
const gridGroup = ref({});
@@ -62,6 +134,8 @@
const loading = ref(false);
// 涓嬭浇妯℃澘鏃跺睍绀哄湪涓嬭浇鎸夐挳涓婄殑鍔犺浇
const downloadLoading = ref(false);
+// 鎻愮ず褰撴棩缃戞牸缁勬槸鍚︽湁鏁版嵁鐨刲oading
+const tipTextLoading = ref(false);
// 鍦ㄥ鍏ユ寜閽笅鏂癸紙鐣岄潰鐨勪笅闈級閿欒鍜屾纭俊鎭�
const errorTipMsg = ref('');
const successTipMsg = ref('');
@@ -69,9 +143,17 @@
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
+ hasGridAod.value = undefined
+ formObj.value.dateTime = undefined
+ resetApiTipMsg()
+ done()
+}
const emit = defineEmits(['update:modelValue']);
@@ -80,24 +162,43 @@
};
const downloadTemplate = () => {
- downloadLoading.value = true
- gridApi.downloadAODTemplate().then(res => {
- downloadLoading.value = false
- }).catch(e => {
- downloadLoading.value = false
- });
+ downloadLoading.value = true;
+ gridApi
+ .downloadAODTemplate()
+ .then((res) => {
+ downloadLoading.value = false;
+ })
+ .catch((e) => {
+ downloadLoading.value = false;
+ });
};
// 閫氳繃缃戞牸缁勫拰鏃堕棿 鏌ヨ 鍦ㄨ繖涓や釜鍙傛暟鏉′欢涓嬫槸鍚︽湁缃戞牸鏁版嵁锛屽苟鎻愮ず鍦ㄧ晫闈腑鏈夋垨鑰呮病鏈�
const checkEmpty = () => {
- gridApi.fetchGridAod(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => {
- if (res.data && res.data.length > 0) {
- hasGridAod.value = true;
- } else {
- formObj.value.update = false
- hasGridAod.value = false;
- }
- })
+ tipTextLoading.value = true;
+ gridApi
+ .fetchGridAod(
+ 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) {
+ hasGridAod.value = true;
+ } else {
+ formObj.value.update = false;
+ hasGridAod.value = false;
+ }
+ })
+ .catch((e) => {
+ // 寤惰繜100ms缁撴潫loading鐘舵��
+ setTimeout(() => {
+ tipTextLoading.value = false;
+ }, 100);
+ });
};
const handleImportClick = () => {
loading.value = true;
@@ -108,7 +209,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(
@@ -119,60 +222,65 @@
gridApi
.importAOD(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;
+ });
+ };
};
const resetApiTipMsg = () => {
- successTipMsg.value = ''
- errorTipMsg.value = ''
+ successTipMsg.value = '';
+ errorTipMsg.value = '';
};
// 褰撻�夋嫨鏂囦欢鍚庯細 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,
@@ -187,17 +295,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.value, (nv) => {
- if (nv.dateTime && gridGroup.value) {
- checkEmpty()
- }
-}, { deep: true });
+watch(
+ formObj.value,
+ (nv) => {
+ if (nv.dateTime && gridGroup.value) {
+ checkEmpty();
+ }
+ },
+ { deep: true }
+);
</script>
<style scoped>
.download {
@@ -224,4 +345,17 @@
::v-deep .el-select {
width: 200px !important;
}
-</style>
\ No newline at end of file
+
+::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;
+}
+.aod-right-top {
+ position: absolute;
+ right: 124px;
+}
+</style>
--
Gitblit v1.9.3