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

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

Browse Source 
安环管理-环保管理-废气处理-加药记录-导入添加传参接口
dev-scheduling
ysn 4 hours 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
Split 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>
<el-dialog :title="title" append-to-body :modelValue="importBox" width="555px" @close="closeDialog">
<avue-form :option="importOption" 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>
<el-dialog
:title="title"
append-to-body
:modelValue="importBox"
width="555px"
@close="closeDialog"
>
<avue-form
:option="importOption"
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>
<script>
@ -17,160 +27,171 @@ import website from '@/config/website';
import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util';
export default {
props: {
title:{
type:String,
default:'导入'
},
isShow:{
type:Boolean,
default:false
},
templateUrl:{
type:String,
default:''
},
templateName:{
type:String,
default:'模板'
},
importUrl:{
type:String,
default:''
},
showTips:{
type:String,
default:'请上传 .xls,.xlsx 标准格式文件'
}
props: {
title: {
type: String,
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',
},
tip: this.showTips,
action: this.importUrl,
},
{
label: '模板下载',
prop: 'excelTemplate',
formslot: true,
span: 24,
},
],
}
}
isShow: {
type: Boolean,
default: false,
},
watch: {
isShow(newVal) {
this.importBox = newVal;
}
templateUrl: {
type: String,
default: '',
},
mounted(){
console.log('isShowImport=================',this.isShow)
this.importBox = this.isShow
templateName: {
type: String,
default: '模板',
},
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);
importUrl: {
type: String,
default: '',
},
showTips: {
type: String,
default: '请上传 .xls,.xlsx 标准格式文件',
},
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 => {
console.log('API返回状态:', res.status);
console.log('res.data类型:', typeof res.data);
console.log('res.data instanceof Blob:', res.data instanceof Blob);
console.log('res.data size:', res.data?.size);
console.log('res.data type:', res.data?.type);
exportBlob(url)
.then(res => {
console.log('API返回状态:', res.status);
console.log('res.data类型:', typeof res.data);
console.log('res.data instanceof Blob:', res.data instanceof Blob);
console.log('res.data size:', res.data?.size);
console.log('res.data type:', res.data?.type);
if (!res.data || res.data.size === 0) {
this.$message.error('下载失败，文件内容为空');
return;
}
if (!res.data || res.data.size === 0) {
this.$message.error('下载失败，文件内容为空');
return;
}
// 验证文件内容是否是有效的Excel文件
this.validateExcelBlob(res.data).then(isValid => {
if (!isValid) {
console.error('下载的文件不是有效的Excel文件');
this.$message.error('下载的文件格式不正确');
return;
}
// 验证文件内容是否是有效的Excel文件
this.validateExcelBlob(res.data)
.then(isValid => {
if (!isValid) {
console.error('下载的文件不是有效的Excel文件');
this.$message.error('下载的文件格式不正确');
return;
}
// 确保文件名有正确的扩展名
let fileName = this.templateName;
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
fileName += '.xlsx';
}
// 确保文件名有正确的扩展名
let fileName = this.templateName;
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
fileName += '.xlsx';
}
console.log('开始下载文件:', fileName);
downloadXls(res.data, fileName);
this.$message.success('模板下载成功');
}).catch(error => {
console.error('验证文件失败:', error);
// 即使验证失败也尝试下载
let fileName = this.templateName;
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
fileName += '.xlsx';
}
downloadXls(res.data, fileName);
this.$message.success('模板下载成功');
});
}).catch(error => {
console.error('下载模板失败:', error);
this.$message.error('下载失败，请检查网络或稍后重试');
console.log('开始下载文件:', fileName);
downloadXls(res.data, fileName);
this.$message.success('模板下载成功');
})
.catch(error => {
console.error('验证文件失败:', error);
// 即使验证失败也尝试下载
let fileName = this.templateName;
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
fileName += '.xlsx';
}
downloadXls(res.data, fileName);
this.$message.success('模板下载成功');
});
},
validateExcelBlob(blob) {
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);
})
.catch(error => {
console.error('下载模板失败:', error);
this.$message.error('下载失败，请检查网络或稍后重试');
});
},
validateExcelBlob(blob) {
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
const isXlsx = header.startsWith('50 4b 03 04');
// 检查XLS: D0 CF 11 E0 A1 B1 1A E1
const isXls = header.toLowerCase().startsWith('d0 cf 11 e0 a1 b1 1a e1');
// 检查XLSX (ZIP格式): 50 4B 03 04
const isXlsx = header.startsWith('50 4b 03 04');
// 检查XLS: 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('是XLS格式:', isXls);
console.log('是XLSX格式:', isXlsx);
console.log('是XLS格式:', isXls);
resolve(isXlsx || isXls);
};
reader.onerror = () => resolve(true); // 如果读取失败，假设文件是有效的
reader.readAsArrayBuffer(blob.slice(0, 8));
});
},
uploadAfter(res, done, loading, column) {
this.closeDialog(true)
done();
},
uploadError(error, column){
console.log('error-------------',error)
this.closeDialog()
}
}
}
resolve(isXlsx || isXls);
};
reader.onerror = () => resolve(true); // 如果读取失败，假设文件是有效的
reader.readAsArrayBuffer(blob.slice(0, 8));
});
},
uploadAfter(res, done, loading, column) {
this.closeDialog(true);
done();
},
uploadError(error, column) {
console.log('error-------------', error);
this.closeDialog();
},
},
};
</script>
<style>
</style>

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

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

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

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

Write Preview
Loading…
Cancel
Save