419 lines
13 KiB
Vue
419 lines
13 KiB
Vue
<template>
|
||
<!-- 首页 -->
|
||
<div v-if="isMainPage" style="height: 100%">
|
||
<ns-view-list-table v-bind="tableConfig" :scroll="{ x: 750 }" :model="data" ref="mainRef" />
|
||
</div>
|
||
<!-- 填报页 -->
|
||
<div v-if="fillInPage" style="height: 100%">
|
||
<fillIn
|
||
:reportId="reportId"
|
||
:year="year"
|
||
:startTime="startTime"
|
||
:endTime="endTime"
|
||
:standard="standard"
|
||
@change-data="updateData" />
|
||
</div>
|
||
<!-- 新增报告弹窗 -->
|
||
<a-drawer
|
||
:width="500"
|
||
:visible="visible"
|
||
:body-style="{ paddingBottom: '80px' }"
|
||
:footer-style="{ textAlign: 'right' }"
|
||
destroyOnClose
|
||
@close="onClose">
|
||
<div class="ns-form-title"
|
||
><div class="title">{{ text }}</div></div
|
||
>
|
||
<a-spin :spinning="spinning">
|
||
<a-form
|
||
ref="formRef"
|
||
:model="formState"
|
||
:rules="rules"
|
||
:label-col="labelCol"
|
||
:wrapper-col="wrapperCol">
|
||
<a-form-item ref="name" label="报告名称" name="reportName">
|
||
<a-input
|
||
v-model:value="formState.reportName"
|
||
:maxlength="15"
|
||
@keydown="handleKeyDown"
|
||
placeholder="请输入报告名称" />
|
||
</a-form-item>
|
||
<a-form-item ref="name" label="报告年度" name="reportYear">
|
||
<a-date-picker v-model:value="formState.reportYear" picker="year" valueFormat="YYYY" />
|
||
</a-form-item>
|
||
<a-form-item ref="name" label="适用标准" name="genericStandard">
|
||
<a-input
|
||
v-model:value="formState.genericStandard"
|
||
:maxlength="20"
|
||
@keydown="handleKeyDown"
|
||
placeholder="请输入适用标准" />
|
||
</a-form-item>
|
||
<a-form-item label="报告周期" name="reportPeriod">
|
||
<a-select
|
||
v-model:value="formState.reportPeriod"
|
||
placeholder="请选择报告周期"
|
||
@change="selectChange">
|
||
<a-select-option value="1">年度</a-select-option>
|
||
<a-select-option value="2">月度</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item ref="name" label="报告范围" name="reportScope">
|
||
<a-range-picker
|
||
v-model:value="formState.reportScope"
|
||
picker="month"
|
||
:disabledDate="disabledDate"
|
||
valueFormat="YYYY-MM" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-spin>
|
||
<template #footer>
|
||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
||
<a-button type="primary" @click="onSubmit">确定</a-button>
|
||
</template>
|
||
</a-drawer>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, toRaw, watch, nextTick, createVNode, defineComponent } from 'vue';
|
||
import { http } from '/nerv-lib/util/http';
|
||
import { carbonInventoryCheck } from '/@/api/carbonEmissionFactorLibrary';
|
||
import fillIn from './fillInPage/index.vue';
|
||
import { message, Modal } from 'ant-design-vue';
|
||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
import dayjs, { Dayjs } from 'dayjs';
|
||
defineOptions({ name: 'CarbonInventoryCheck' });
|
||
const orgId = ref('');
|
||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||
orgId.value = result;
|
||
const fetch = (api, params = { orgId }, config) => {
|
||
return http.post(api, params, config);
|
||
};
|
||
// 判断展示哪个页面
|
||
const isMainPage = ref(true);
|
||
const fillInPage = ref(false);
|
||
// 新增相关数据
|
||
const visible = ref(false);
|
||
const formState = ref({});
|
||
const formRef = ref();
|
||
const labelCol = { span: 4 };
|
||
const wrapperCol = { span: 20 };
|
||
const text = ref('新增报告');
|
||
const disabledDate = (current: moment.Moment | null) => {
|
||
if (formState.value.reportPeriod === '2') {
|
||
const year = current.year();
|
||
return year === Number(formState.value.reportYear) ? false : true;
|
||
}
|
||
};
|
||
const selectChange = (value) => {
|
||
formState.value.reportScope = '';
|
||
};
|
||
// const defaultPickerValue = ref([]);
|
||
// const open = ref(false);
|
||
// const openChange = (status) => {
|
||
// debugger;
|
||
// open.value = status;
|
||
// if (formState.value.reportYear) {
|
||
// defaultPickerValue.value = [
|
||
// dayjs(formState.value.reportYear),
|
||
// dayjs(formState.value.reportYear),
|
||
// ];
|
||
// open.value = false;
|
||
// nextTick(() => {
|
||
// open.value = status; // 重新打开日期选择框
|
||
// });
|
||
// }
|
||
// };
|
||
// 定义form表单的必填
|
||
const rules: Record<string, Rule[]> = {
|
||
reportName: [{ required: true, message: '请输入报告名称', trigger: 'change' }],
|
||
reportYear: [{ required: true, message: '请选择报告年度', trigger: 'change' }],
|
||
genericStandard: [{ required: true, message: '请输入适用标准', trigger: 'change' }],
|
||
reportPeriod: [{ required: true, message: '请选择排放类型', trigger: 'change' }],
|
||
reportScope: [{ required: true, message: '请选择报告范围', trigger: 'change' }],
|
||
};
|
||
// 关闭新增抽屉
|
||
const onClose = () => {
|
||
visible.value = false;
|
||
formState.value = {};
|
||
formRef.value.resetFields();
|
||
};
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
// Check if the pressed key is a space
|
||
if (event.code === 'Space') {
|
||
event.preventDefault();
|
||
}
|
||
};
|
||
const spinning = ref(false);
|
||
// 点击确定提交
|
||
const onSubmit = () => {
|
||
formRef.value
|
||
.validate()
|
||
.then(() => {
|
||
console.log('values', formState, toRaw(formState));
|
||
formState.value.orgId = orgId.value;
|
||
formState.value.startTime = formState.value.reportScope[0];
|
||
formState.value.endTime = formState.value.reportScope[1];
|
||
if (text.value === '新增报告') {
|
||
spinning.value = true;
|
||
fetch(carbonInventoryCheck.createOrUpdate, formState.value).then((res) => {
|
||
visible.value = false;
|
||
mainRef.value?.nsTableRef.reload();
|
||
spinning.value = false;
|
||
});
|
||
} else {
|
||
if (
|
||
oldStartTime.value === formState.value.startTime &&
|
||
oldEndTime.value === formState.value.endTime
|
||
) {
|
||
spinning.value = true;
|
||
fetch(carbonInventoryCheck.createOrUpdate, formState.value).then((res) => {
|
||
visible.value = false;
|
||
mainRef.value?.nsTableRef.reload();
|
||
spinning.value = false;
|
||
});
|
||
} else {
|
||
Modal.confirm({
|
||
title: '修改日期会导致已有数据丢失，是否继续修改？',
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
onOk() {
|
||
spinning.value = true;
|
||
fetch(carbonInventoryCheck.createOrUpdate, formState.value)
|
||
.then((res) => {
|
||
visible.value = false;
|
||
mainRef.value?.nsTableRef.reload();
|
||
spinning.value = false;
|
||
})
|
||
.catch((error) => {
|
||
message.error(error ? error : '保存失败！');
|
||
});
|
||
},
|
||
onCancel() {
|
||
console.log('Cancel');
|
||
},
|
||
class: 'test',
|
||
});
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log('error', error);
|
||
});
|
||
};
|
||
// 表格相关数据
|
||
const data = ref([]);
|
||
const mainRef = ref();
|
||
const reportId = ref();
|
||
const startTime = ref();
|
||
const endTime = ref();
|
||
const standard = ref();
|
||
const year = ref();
|
||
const oldStartTime = ref();
|
||
const oldEndTime = ref();
|
||
const tableConfig = ref({
|
||
title: '数据库',
|
||
api: carbonInventoryCheck.carbonInventoryList,
|
||
params: {
|
||
orgId,
|
||
},
|
||
headerActions: [
|
||
{
|
||
label: '新增',
|
||
name: 'userAdd',
|
||
type: 'primary',
|
||
handle: () => {
|
||
text.value = '新增报告';
|
||
visible.value = true;
|
||
},
|
||
},
|
||
],
|
||
columns: [
|
||
{
|
||
title: '序号',
|
||
width: 50,
|
||
customRender: (text: any) => {
|
||
return text.index + 1;
|
||
},
|
||
},
|
||
{
|
||
title: '企业名称',
|
||
width: 130,
|
||
dataIndex: 'enterpriseName',
|
||
},
|
||
{
|
||
title: '报告名称',
|
||
width: 100,
|
||
dataIndex: 'reportName',
|
||
},
|
||
{
|
||
title: '报告年度',
|
||
width: 70,
|
||
dataIndex: 'reportYear',
|
||
},
|
||
{
|
||
title: '适用标准',
|
||
width: 100,
|
||
dataIndex: 'genericStandard',
|
||
},
|
||
{
|
||
title: '更新人',
|
||
width: 100,
|
||
dataIndex: 'updateUser',
|
||
},
|
||
{
|
||
title: '更新时间',
|
||
width: 100,
|
||
dataIndex: 'updateTime',
|
||
},
|
||
],
|
||
columnActions: {
|
||
title: '操作',
|
||
width: 100,
|
||
actions: [
|
||
{
|
||
label: '编辑',
|
||
name: 'userEdit',
|
||
handle: (record: any) => {
|
||
text.value = '编辑报告';
|
||
visible.value = true;
|
||
fetch(carbonInventoryCheck.findById, { id: record.id }).then((res) => {
|
||
formState.value = res.data;
|
||
formState.value.reportScope = [res.data.startTime, res.data.endTime];
|
||
formState.value.oldStartTime = res.data.startTime;
|
||
formState.value.oldEndTime = res.data.endTime;
|
||
oldStartTime.value = res.data.startTime;
|
||
oldEndTime.value = res.data.endTime;
|
||
});
|
||
},
|
||
},
|
||
{
|
||
label: '填报',
|
||
name: 'fillIn',
|
||
handle: (record: any) => {
|
||
isMainPage.value = false;
|
||
fillInPage.value = true;
|
||
reportId.value = record.id;
|
||
year.value = record.reportYear;
|
||
startTime.value = record.startTime;
|
||
endTime.value = record.endTime;
|
||
standard.value = record.genericStandard;
|
||
},
|
||
},
|
||
{
|
||
label: '下载',
|
||
name: 'download',
|
||
handle: (record: any) => {
|
||
const deleteId = ref(new FormData());
|
||
deleteId.value.append('id', record.id);
|
||
const config = {
|
||
responseType: 'blob',
|
||
};
|
||
fetch(carbonInventoryCheck.downloadZip, deleteId.value, config)
|
||
.then((res) => {
|
||
if (res.type === 'application/json') {
|
||
handlerResponseError(res);
|
||
} else {
|
||
// 创建一个 URL 对象，指向图片数据的 blob
|
||
const url = window.URL.createObjectURL(new Blob([res]));
|
||
// 创建一个 <a> 标签，用于触发下载
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.setAttribute('download', '碳盘查凭证.zip'); // 设置下载的文件名
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
|
||
// 清理 URL 对象
|
||
window.URL.revokeObjectURL(url);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.error('下载图片失败：', error);
|
||
});
|
||
},
|
||
},
|
||
{
|
||
label: '删除',
|
||
name: 'userDelete',
|
||
dynamicParams: { id: 'id' },
|
||
confirm: true,
|
||
isReload: true,
|
||
api: carbonInventoryCheck.delete,
|
||
},
|
||
],
|
||
},
|
||
formConfig: {
|
||
schemas: [
|
||
{
|
||
field: 'reportName',
|
||
label: '报告名称',
|
||
component: 'NsInput',
|
||
componentProps: {
|
||
placeholder: '请输入报告名称',
|
||
maxLength: 20,
|
||
},
|
||
},
|
||
{
|
||
field: 'reportYear',
|
||
label: '报告年度',
|
||
component: 'NsRangePicker',
|
||
fieldMap: ['startYear', 'endYear'],
|
||
componentProps: {
|
||
valueFormat: 'YYYY',
|
||
placeholder: ['报告年度', '报告年度'],
|
||
picker: 'year',
|
||
},
|
||
},
|
||
],
|
||
params: {},
|
||
},
|
||
rowKey: 'id',
|
||
});
|
||
const handlerResponseError = (data) => {
|
||
const fileReader = new FileReader();
|
||
fileReader.onload = function () {
|
||
try {
|
||
const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
|
||
console.log('后台返回的信息', jsonData.data);
|
||
message.warning(jsonData.data);
|
||
// dosomething……
|
||
} catch (err) {
|
||
// 解析成对象失败，说明是正常的文件流
|
||
console.log('success...');
|
||
}
|
||
};
|
||
fileReader.readAsText(data);
|
||
};
|
||
// 填报页点击返回
|
||
const updateData = (newDataOne, newDataTwo) => {
|
||
isMainPage.value = newDataOne;
|
||
fillInPage.value = newDataTwo;
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.ns-form-title {
|
||
font-weight: bold;
|
||
user-select: text;
|
||
margin-bottom: 16px;
|
||
}
|
||
.title {
|
||
text-align: left;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
font-weight: bold;
|
||
user-select: text;
|
||
position: relative;
|
||
padding-left: 9px;
|
||
}
|
||
.title::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: 13px;
|
||
width: 3px;
|
||
border-radius: 1px;
|
||
background-color: #2778ff;
|
||
}
|
||
</style>
|