suojin
/
jonhon-mes-web
24
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

安环管理-环保管理-废水处理-加药记录-导入添加传参接口

Browse Source 
安环管理-环保管理-废气处理-加药记录-导入添加传参接口
dev-scheduling
ysn 3 days ago
parent 04053cb61e
commit d23899c818
3 changed files with 230 additions and 197 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 321
      src/components/basic-import/main.vue
  2. 101
      src/views/safetyManagement/wasteGasSet/components/dosingRecord.vue
  3. 5
      src/views/safetyManagement/wastewater/components/dosingRecord.vue

321
src/components/basic-import/main.vue
Unescape View File

@ -1,14 +1,24 @@
<template> <template>
<el-dialog :title="title" append-to-body :modelValue="importBox" width="555px" @close="closeDialog"> <el-dialog
<avue-form :option="importOption" v-model="importForm" :upload-after="uploadAfter" :title="title"
:upload-error="uploadError"> append-to-body
<template #excelTemplate> :modelValue="importBox"
<el-button type="primary" @click="handleTemplate"> width="555px"
点击下载<i class="el-icon-download el-icon--right"></i> @close="closeDialog"
</el-button> >
</template> <avue-form
</avue-form> :option="importOption"
</el-dialog> v-model="importForm"
:upload-after="uploadAfter"
:upload-error="uploadError"
>
<template #excelTemplate>
<el-button type="primary" @click="handleTemplate">
点击下载<i class="el-icon-download el-icon--right"></i>
</el-button>
</template>
</avue-form>
</el-dialog>
</template> </template>
<script> <script>
@ -17,160 +27,171 @@ import website from '@/config/website';
import { getToken } from '@/utils/auth'; import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util'; import { downloadXls } from '@/utils/util';
export default { export default {
props: { props: {
title:{ title: {
type:String, type: String,
default:'导入' default: '导入',
},
isShow:{
type:Boolean,
default:false
},
templateUrl:{
type:String,
default:''
},
templateName:{
type:String,
default:'模板'
},
importUrl:{
type:String,
default:''
},
showTips:{
type:String,
default:'请上传 .xls,.xlsx 标准格式文件'
}
}, },
data(){ isShow: {
return{ type: Boolean,
importBox:false, default: false,
importForm:{},
importOption:{
submitBtn: false,
emptyBtn: false,
column: [
{
label: '模板上传',
prop: 'excelFile',
type: 'upload',
drag: true,
loadText: '模板上传中，请稍等',
span: 24,
propsHttp: {
res: 'data',
},
tip: this.showTips,
action: this.importUrl,
},
{
label: '模板下载',
prop: 'excelTemplate',
formslot: true,
span: 24,
},
],
}
}
}, },
watch: { templateUrl: {
isShow(newVal) { type: String,
this.importBox = newVal; default: '',
}
}, },
mounted(){ templateName: {
console.log('isShowImport=================',this.isShow) type: String,
this.importBox = this.isShow default: '模板',
}, },
methods:{ importUrl: {
closeDialog(val) { type: String,
this.importBox = false; default: '',
this.$emit('closeDialog',val); },
}, showTips: {
handleTemplate() { type: String,
const url = `${this.templateUrl}?${this.website.tokenHeader}=${getToken()}`; default: '请上传 .xls,.xlsx 标准格式文件',
console.log('下载模板URL:', url); },
console.log('模板文件名:', this.templateName); basicImportSearch: {
type: Object,
default: () => {},
},
},
data() {
return {
importBox: false,
importForm: {},
importOption: {
submitBtn: false,
emptyBtn: false,
column: [
{
label: '模板上传',
prop: 'excelFile',
type: 'upload',
drag: true,
loadText: '模板上传中，请稍等',
span: 24,
propsHttp: {
res: 'data',
},
// 传递参数
data: this.basicImportSearch,
tip: this.showTips,
action: this.importUrl,
},
{
label: '模板下载',
prop: 'excelTemplate',
formslot: true,
span: 24,
},
],
},
};
},
watch: {
isShow(newVal) {
this.importBox = newVal;
},
},
mounted() {
console.log('isShowImport=================', this.isShow);
this.importBox = this.isShow;
},
methods: {
closeDialog(val) {
this.importBox = false;
this.$emit('closeDialog', val);
},
handleTemplate() {
const url = `${this.templateUrl}?${this.website.tokenHeader}=${getToken()}`;
console.log('下载模板URL:', url);
console.log('模板文件名:', this.templateName);
exportBlob(url).then(res => { exportBlob(url)
console.log('API返回状态:', res.status); .then(res => {
console.log('res.data类型:', typeof res.data); console.log('API返回状态:', res.status);
console.log('res.data instanceof Blob:', res.data instanceof Blob); console.log('res.data类型:', typeof res.data);
console.log('res.data size:', res.data?.size); console.log('res.data instanceof Blob:', res.data instanceof Blob);
console.log('res.data type:', res.data?.type); console.log('res.data size:', res.data?.size);
console.log('res.data type:', res.data?.type);
if (!res.data || res.data.size === 0) { if (!res.data || res.data.size === 0) {
this.$message.error('下载失败，文件内容为空'); this.$message.error('下载失败，文件内容为空');
return; return;
} }
// 验证文件内容是否是有效的Excel文件 // 验证文件内容是否是有效的Excel文件
this.validateExcelBlob(res.data).then(isValid => { this.validateExcelBlob(res.data)
if (!isValid) { .then(isValid => {
console.error('下载的文件不是有效的Excel文件'); if (!isValid) {
this.$message.error('下载的文件格式不正确'); console.error('下载的文件不是有效的Excel文件');
return; this.$message.error('下载的文件格式不正确');
} return;
}
// 确保文件名有正确的扩展名 // 确保文件名有正确的扩展名
let fileName = this.templateName; let fileName = this.templateName;
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) { if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
fileName += '.xlsx'; fileName += '.xlsx';
} }
console.log('开始下载文件:', fileName); console.log('开始下载文件:', fileName);
downloadXls(res.data, fileName); downloadXls(res.data, fileName);
this.$message.success('模板下载成功'); this.$message.success('模板下载成功');
}).catch(error => { })
console.error('验证文件失败:', error); .catch(error => {
// 即使验证失败也尝试下载 console.error('验证文件失败:', error);
let fileName = this.templateName; // 即使验证失败也尝试下载
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) { let fileName = this.templateName;
fileName += '.xlsx'; if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
} fileName += '.xlsx';
downloadXls(res.data, fileName); }
this.$message.success('模板下载成功'); downloadXls(res.data, fileName);
}); this.$message.success('模板下载成功');
}).catch(error => {
console.error('下载模板失败:', error);
this.$message.error('下载失败，请检查网络或稍后重试');
}); });
}, })
validateExcelBlob(blob) { .catch(error => {
return new Promise((resolve) => { console.error('下载模板失败:', error);
const reader = new FileReader(); this.$message.error('下载失败，请检查网络或稍后重试');
reader.onloadend = (e) => { });
const arr = new Uint8Array(e.target.result); },
const header = Array.from(arr.slice(0, 8)).map(b => b.toString(16).padStart(2, '0')).join(' '); validateExcelBlob(blob) {
console.log('文件头 (前8字节):', header); return new Promise(resolve => {
const reader = new FileReader();
reader.onloadend = e => {
const arr = new Uint8Array(e.target.result);
const header = Array.from(arr.slice(0, 8))
.map(b => b.toString(16).padStart(2, '0'))
.join(' ');
console.log('文件头 (前8字节):', header);
// 检查XLSX (ZIP格式): 50 4B 03 04 // 检查XLSX (ZIP格式): 50 4B 03 04
const isXlsx = header.startsWith('50 4b 03 04'); const isXlsx = header.startsWith('50 4b 03 04');
// 检查XLS: D0 CF 11 E0 A1 B1 1A E1 // 检查XLS: D0 CF 11 E0 A1 B1 1A E1
const isXls = header.toLowerCase().startsWith('d0 cf 11 e0 a1 b1 1a e1'); const isXls = header.toLowerCase().startsWith('d0 cf 11 e0 a1 b1 1a e1');
console.log('是XLSX格式:', isXlsx); console.log('是XLSX格式:', isXlsx);
console.log('是XLS格式:', isXls); console.log('是XLS格式:', isXls);
resolve(isXlsx || isXls); resolve(isXlsx || isXls);
}; };
reader.onerror = () => resolve(true); // 如果读取失败，假设文件是有效的 reader.onerror = () => resolve(true); // 如果读取失败，假设文件是有效的
reader.readAsArrayBuffer(blob.slice(0, 8)); reader.readAsArrayBuffer(blob.slice(0, 8));
}); });
}, },
uploadAfter(res, done, loading, column) { uploadAfter(res, done, loading, column) {
this.closeDialog(true) this.closeDialog(true);
done(); done();
}, },
uploadError(error, column){ uploadError(error, column) {
console.log('error-------------',error) console.log('error-------------', error);
this.closeDialog() this.closeDialog();
} },
} },
} };
</script> </script>
<style> <style>
</style> </style>

101
src/views/safetyManagement/wasteGasSet/components/dosingRecord.vue
Unescape View File

@ -23,7 +23,7 @@
</el-button> --> </el-button> -->
</template> </template>
<template #menu-right> <template #menu-right>
<el-button type="primary" @click="handleImport">导入 </el-button> <el-button type="primary" @click="handleImport">导入 </el-button>
</template> </template>
</avue-crud> </avue-crud>
<!-- 导入 --> <!-- 导入 -->
@ -35,36 +35,47 @@
templateName="废气加药记录导入模板.xls" templateName="废气加药记录导入模板.xls"
importUrl="/blade-desk/bsDosingRec/importExcel" importUrl="/blade-desk/bsDosingRec/importExcel"
@closeDialog="closeImportDialog" @closeDialog="closeImportDialog"
:basicImportSearch="search"
></basic-import> ></basic-import>
<!-- 新增 --> <!-- 新增 -->
<addEditDialogDosingRecord <addEditDialogDosingRecord
v-if="addOpen" v-if="addOpen"
:showDialog="addOpen" :showDialog="addOpen"
@closeDialog="closeDialog" @closeDialog="closeDialog"
:moldAddMore="moldAddMore" :moldAddMore="moldAddMore"
:dosingManList="dosingManList" :dosingManList="dosingManList"
@submitData="handleSubmitData"> @submitData="handleSubmitData"
>
</addEditDialogDosingRecord> </addEditDialogDosingRecord>
</div> </div>
</template> </template>
<script> <script>
import basicImport from '@/components/basic-import/main.vue'; import basicImport from '@/components/basic-import/main.vue';
import addEditDialogDosingRecord from './addEditDialogDosingRecord.vue'; import addEditDialogDosingRecord from './addEditDialogDosingRecord.vue';
import { getList , remove , add , update , getDosingManList } from '@/api/safetyManagement/dosingRecord.js'; import {
getList,
remove,
add,
update,
getDosingManList,
} from '@/api/safetyManagement/dosingRecord.js';
export default { export default {
components: { components: {
basicImport, basicImport,
addEditDialogDosingRecord addEditDialogDosingRecord,
}, },
data() { data() {
return { return {
dosingManList:[], dosingManList: [],
addOpen: false, //新增弹窗 addOpen: false, //新增弹窗
moldAddMore: false, moldAddMore: false,
isShowImport: false, isShowImport: false,
loading: false, loading: false,
selectionList: [], selectionList: [],
search: {
dorType: 1,
},
option: { option: {
addBtn: false, addBtn: false,
height: 'auto', height: 'auto',
@ -165,7 +176,7 @@ export default {
sortable: true, sortable: true,
filter: true, filter: true,
hide: true, hide: true,
editDisplay:false, editDisplay: false,
type: 'datetime', type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss',
@ -204,7 +215,7 @@ export default {
searchLabelWidth: 60, searchLabelWidth: 60,
sortable: true, sortable: true,
filter: true, filter: true,
type: "select", type: 'select',
dicData: [], dicData: [],
rules: [ rules: [
{ {
@ -214,8 +225,8 @@ export default {
}, },
], ],
props: { props: {
label: 'name', label: 'name',
value: 'id' value: 'id',
}, },
}, },
{ {
@ -224,7 +235,6 @@ export default {
search: false, search: false,
sortable: true, sortable: true,
filter: true, filter: true,
}, },
], ],
}, },
@ -237,7 +247,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.fetchDosingManList() this.fetchDosingManList();
}, },
methods: { methods: {
// 加药人 // 加药人
@ -245,27 +255,27 @@ export default {
getDosingManList({ getDosingManList({
current: 1, current: 1,
size: 10000000, size: 10000000,
roleId: '2008474700619563009' roleId: '2008474700619563009',
}).then(res => { }).then(res => {
const result = res.data.data.records const result = res.data.data.records;
this.dosingManList = result this.dosingManList = result;
console.log("加药人result", result) console.log('加药人result', result);
this.option.column.forEach(col => { this.option.column.forEach(col => {
if (col.prop === 'dosingMan') { if (col.prop === 'dosingMan') {
col.dicData = this.dosingManList; col.dicData = this.dosingManList;
} }
}); });
}) });
}, },
// 新增 // 新增
moldAddFn(row, flag) { moldAddFn(row, flag) {
this.addOpen = true this.addOpen = true;
this.moldAddMore = flag this.moldAddMore = flag;
}, },
//关闭弹窗 //关闭弹窗
closeDialog() { closeDialog() {
this.addOpen = false; this.addOpen = false;
this.onLoad(this.page); this.onLoad(this.page);
}, },
// 关闭导入弹窗 // 关闭导入弹窗
@ -273,7 +283,7 @@ export default {
this.isShowImport = false; this.isShowImport = false;
this.onLoad(this.page); this.onLoad(this.page);
}, },
//更新 //更新
rowUpdate(row, index, done, loading) { rowUpdate(row, index, done, loading) {
update(row).then( update(row).then(
() => { () => {
@ -290,15 +300,15 @@ export default {
} }
); );
}, },
// 处理子组件提交的数据 // 处理子组件提交的数据
handleSubmitData(data) { handleSubmitData(data) {
add(data).then( add(data).then(
res => { res => {
this.onLoad(this.page); this.onLoad(this.page);
this.$message({ this.$message({
type: 'success', type: 'success',
message: '操作成功!', message: '操作成功!',
}); });
this.addOpen = false; this.addOpen = false;
done(); done();
}, },
@ -307,11 +317,10 @@ export default {
loading(); loading();
} }
); );
},
},
// 点击导入按钮 // 点击导入按钮
handleImport() { handleImport() {
this.isShowImport = true this.isShowImport = true;
}, },
//刷新 //刷新
refreshChange() { refreshChange() {
@ -353,23 +362,21 @@ export default {
searchChange(params, done) { searchChange(params, done) {
this.query = params; this.query = params;
this.page.currentPage = 1; this.page.currentPage = 1;
this.onLoad(this.page, params) this.onLoad(this.page, params);
done() done();
}, },
// 搜索重置 // 搜索重置
searchReset() { searchReset() {
this.query = {} this.query = {};
this.onLoad(this.page) this.onLoad(this.page);
}, },
// 加载页面数据 // 加载页面数据
onLoad(page, params = {}) { onLoad(page, params = {}) {
this.loading = true; this.loading = true;
this.query = { ...this.query, dorType: 1 } //类型：1、废气加药；2、废水加药 this.query = { ...this.query, dorType: 1 }; //类型：1、废气加药；2、废水加药
const requestParams = Object.assign({}, params, this.query); const requestParams = Object.assign({}, params, this.query);
// 后端要字符串类型 // 后端要字符串类型
if (requestParams.queryDosingTime && Array.isArray(requestParams.queryDosingTime)) { if (requestParams.queryDosingTime && Array.isArray(requestParams.queryDosingTime)) {
requestParams.queryDosingTime = requestParams.queryDosingTime.join(','); requestParams.queryDosingTime = requestParams.queryDosingTime.join(',');
} }
getList(page.currentPage, page.pageSize, requestParams) getList(page.currentPage, page.pageSize, requestParams)

5
src/views/safetyManagement/wastewater/components/dosingRecord.vue
Unescape View File

@ -16,6 +16,7 @@
@size-change="sizeChange" @size-change="sizeChange"
@refresh-change="refreshChange" @refresh-change="refreshChange"
@on-load="onLoad" @on-load="onLoad"
:search.sync="search"
> >
<template #menu-left> <template #menu-left>
<el-button type="primary" icon="el-icon-plus" @click="moldAddFn(null, true)" <el-button type="primary" icon="el-icon-plus" @click="moldAddFn(null, true)"
@ -45,6 +46,7 @@
templateName="废水加药记录导入模板.xls" templateName="废水加药记录导入模板.xls"
importUrl="/blade-desk/bsDosingRec/importExcel" importUrl="/blade-desk/bsDosingRec/importExcel"
@closeDialog="closeImportDialog" @closeDialog="closeImportDialog"
:basicImportSearch="search"
></basic-import> ></basic-import>
</div> </div>
</template> </template>
@ -71,6 +73,9 @@ export default {
loading: false, loading: false,
selectionList: [], selectionList: [],
dosingManList: [], dosingManList: [],
search: {
dorType: 2,
},
option: { option: {
addBtn: false, addBtn: false,
height: 'auto', height: 'auto',

Write Preview
Loading…
Cancel
Save