fks-xuxinyue
3 weeks ago
14 changed files with 331 additions and 2498 deletions
@ -1,642 +0,0 @@ |
|||
<template> |
|||
<div class="search"> |
|||
<a-card style="border-radius: 12px"> |
|||
<div class="ns-form-title"> |
|||
<div class="title">查询</div> |
|||
<div class="operation"> |
|||
<a-button type="primary" @click="changeParentData"> 返回 </a-button> |
|||
</div> |
|||
</div> |
|||
<a-form layout="inline"> |
|||
<a-form-item> |
|||
<a-select |
|||
v-model:value="queryParams.accountType" |
|||
style="width: 200px" |
|||
placeholder="请输入账户类型"> |
|||
<a-select-option :value="1">全国账户</a-select-option> |
|||
<a-select-option :value="2">地方账户</a-select-option> |
|||
<a-select-option :value="3">CCER</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item> |
|||
<a-cascader |
|||
v-model:value="queryParams.transactionType" |
|||
multiple |
|||
style="width: 200px" |
|||
:options="options" |
|||
placeholder="请选择交易类型" |
|||
suffix-icon="Shopping Around"> |
|||
<template #tagRender="data"> |
|||
<a-tag :key="data.value" color="blue">{{ data.label }}</a-tag> |
|||
</template> |
|||
</a-cascader> |
|||
</a-form-item> |
|||
<a-form-item> |
|||
<a-date-picker |
|||
style="width: 200px" |
|||
v-model:value="queryParams.year" |
|||
placeholder="请选择账期" |
|||
picker="year" |
|||
valueFormat="YYYY" /> |
|||
</a-form-item> |
|||
<a-form-item> |
|||
<a-button type="primary" @click="searchTableList">查询</a-button> |
|||
<a-button html-type="submit" style="margin-left: 6px" @click="reset">重置</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-card> |
|||
</div> |
|||
<div style="display: flex; margin-top: 20px; height: calc(84% - 20px)"> |
|||
<div class="detailTable"> |
|||
<div class="ns-form-title"> |
|||
<div class="title">交易明细</div> |
|||
<div class="operation" style="display: flex"> |
|||
<a-button type="primary" @click="addDetail">新增</a-button> |
|||
<a-upload |
|||
v-model:file-list="importFileList" |
|||
name="file" |
|||
accept=".xlsx" |
|||
:showUploadList="false" |
|||
:custom-request="importFile"> |
|||
<a-button type="primary" style="margin-left: 6px">导入</a-button> |
|||
</a-upload> |
|||
<a-button type="primary" style="margin-left: 6px" @click="exportFile">导出</a-button> |
|||
<a-button |
|||
type="primary" |
|||
style="margin-left: 6px" |
|||
:disabled="selectedRowKeys.length === 0" |
|||
@click="deleteMore" |
|||
>批量删除</a-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<a-table |
|||
:columns="columns" |
|||
:data-source="data" |
|||
rowKey="id" |
|||
@change="onChange" |
|||
:rowSelection="{ |
|||
selectedRowKeys: selectedRowKeys, |
|||
onChange: onSelectionChange, |
|||
}" |
|||
:scroll="{ x: 1500, y: 400 }" |
|||
:pagination="false"> |
|||
<template #bodyCell="{ column, text, record }"> |
|||
<template v-if="column.dataIndex === 'accountType'"> |
|||
<span v-if="record.accountType">{{ record.accountType.label }}</span> |
|||
</template> |
|||
<template v-if="column.key === 'action'"> |
|||
<span> |
|||
<a @click="editData(record)">编辑</a> |
|||
<a-divider type="vertical" /> |
|||
<a @click="delData(record)">删除</a> |
|||
</span> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
<a-pagination |
|||
:current="queryParams.pageNum" |
|||
:total="total" |
|||
:page-size="queryParams.pageSize" |
|||
style="display: flex; justify-content: center; margin-top: 16px" |
|||
:show-size-changer="true" |
|||
:show-quick-jumper="true" |
|||
@change="onChange" /> |
|||
</div> |
|||
<div class="total"> |
|||
<div class="ns-form-title"> |
|||
<div class="title">配额统计</div> |
|||
<div class="operation" style="display: flex; justify-content: space-around; width: 63%"> |
|||
<a-button type="primary" @click="getTotalTable(1)">全国配额</a-button> |
|||
<a-button type="primary" @click="getTotalTable(2)">地方配额</a-button> |
|||
<a-button type="primary" @click="getTotalTable(3)">CCER配额</a-button> |
|||
</div> |
|||
</div> |
|||
<a-table :columns="totalColumns" :data-source="totalData" bordered :pagination="false"> |
|||
<template #bodyCell="{ column, text }"> |
|||
<template v-if="column.dataIndex === 'name'"> |
|||
<a>{{ text }}</a> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
</div> |
|||
<!-- 新增报告弹窗 --> |
|||
<a-drawer |
|||
:width="500" |
|||
:visible="visible" |
|||
:body-style="{ paddingBottom: '80px' }" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
destroyOnClose |
|||
@close="onClose"> |
|||
<div class="ns-form-title" style="display: flex"> |
|||
<div class="title">{{ text }}</div> |
|||
</div> |
|||
<a-form |
|||
ref="formRef" |
|||
:model="formState" |
|||
:rules="rules" |
|||
:label-col="labelCol" |
|||
:wrapper-col="wrapperCol"> |
|||
<a-form-item ref="name" label="账户类型" name="accountType"> |
|||
<a-select v-model:value="formState.accountType" placeholder="请输入账户类型"> |
|||
<a-select-option value="1">全国账户</a-select-option> |
|||
<a-select-option value="2">地方账户</a-select-option> |
|||
<a-select-option value="3">CCER</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item ref="name" label="交易类型" name="transactionType"> |
|||
<a-cascader |
|||
v-model:value="formState.transactionType" |
|||
:options="options" |
|||
placeholder="请选择交易类型" /> |
|||
</a-form-item> |
|||
<a-form-item ref="name" label="交易日期" name="transactionDate"> |
|||
<a-date-picker v-model:value="formState.transactionDate" valueFormat="YYYY-MM-DD" /> |
|||
</a-form-item> |
|||
<a-form-item ref="name" label="交易数量" name="transactionQuantity"> |
|||
<a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" /> |
|||
</a-form-item> |
|||
<a-form-item ref="name" label="发生金额" name="amountIncurred"> |
|||
<a-input v-model:value="formState.amountIncurred" placeholder="请输入发生金额" /> |
|||
</a-form-item> |
|||
<a-form-item ref="name" label="交易对象" name="tradingPartner"> |
|||
<a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" /> |
|||
</a-form-item> |
|||
<a-form-item ref="name" label="交易凭证"> |
|||
<a-upload |
|||
:file-list="fileList" |
|||
name="file" |
|||
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf" |
|||
@remove="handleFileRemove" |
|||
:before-upload="beforeUpload" |
|||
@change="handleChange"> |
|||
<a-button> |
|||
<upload-outlined></upload-outlined> |
|||
上传 |
|||
</a-button> |
|||
</a-upload> |
|||
</a-form-item> |
|||
</a-form> |
|||
<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, defineEmits, toRaw } from 'vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
import { UploadOutlined } from '@ant-design/icons-vue'; |
|||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'; |
|||
import { Pagination, Modal, message } from 'ant-design-vue'; |
|||
import { |
|||
carbonAssets, |
|||
carbonEmissionFactorLibrary, |
|||
uploadPic, |
|||
} from '/@/api/carbonEmissionFactorLibrary'; |
|||
import { log } from 'console'; |
|||
defineOptions({ |
|||
energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效 |
|||
components: { |
|||
'a-pagination': Pagination, |
|||
}, |
|||
}); |
|||
// 父组件id |
|||
const props = defineProps({ |
|||
parentId: { |
|||
type: Number, |
|||
}, |
|||
}); |
|||
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 selectedRowKeys = ref([]); |
|||
const onSelectionChange = (selectedKeys, selectedRows) => { |
|||
selectedRowKeys.value = selectedKeys; |
|||
}; |
|||
const total = ref<number>(); |
|||
const thisYear = ref(new Date().getFullYear().toString()); |
|||
const queryParams = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
orgId: orgId.value, |
|||
accountType: props.parentId, |
|||
year: thisYear.value, |
|||
}); |
|||
const searchTableList = () => { |
|||
getDetailList(); |
|||
}; |
|||
// 获取左侧列表数据 |
|||
const getDetailList = () => { |
|||
fetch(carbonAssets.carbonDetailsList, queryParams.value).then((res) => { |
|||
data.value = res.data.records; |
|||
total.value = res.data.total; |
|||
}); |
|||
}; |
|||
getDetailList(); |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '资产类别', |
|||
dataIndex: 'accountType', |
|||
}, |
|||
{ |
|||
title: '交易方式', |
|||
dataIndex: 'transactionTypeName', |
|||
}, |
|||
{ |
|||
title: '交易日期', |
|||
dataIndex: 'transactionDate', |
|||
sorter: (a, b) => a.transactionDate - b.transactionDate, |
|||
}, |
|||
{ |
|||
title: '本期收入(tCO2)', |
|||
dataIndex: 'income', |
|||
sorter: (a, b) => a.income - b.income, |
|||
}, |
|||
{ |
|||
title: '本期支出(tCO2)', |
|||
dataIndex: 'expenditure', |
|||
sorter: (a, b) => a.expenditure - b.expenditure, |
|||
}, |
|||
{ |
|||
title: '发生金额(￥）', |
|||
dataIndex: 'amountIncurredValue', |
|||
}, |
|||
{ |
|||
title: '交易对象', |
|||
dataIndex: 'tradingPartner', |
|||
}, |
|||
{ |
|||
title: '更新人', |
|||
dataIndex: 'updateUser', |
|||
}, |
|||
{ |
|||
title: '更新时间', |
|||
dataIndex: 'updateTime', |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
key: 'action', |
|||
width: 130, |
|||
}, |
|||
]; |
|||
const data = ref([]); |
|||
const reset = () => { |
|||
queryParams.value = { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
orgId: orgId.value, |
|||
year: new Date().getFullYear(), |
|||
}; |
|||
getDetailList(); |
|||
}; |
|||
const editData = (record) => { |
|||
getDictList(); |
|||
text.value = '编辑'; |
|||
visible.value = true; |
|||
formState.value.id = record.id; |
|||
fetch(uploadPic.select, { bizId: record.id, bizType: 1 }).then((res) => { |
|||
fileList.value = res.data.map((item) => ({ |
|||
uid: item.id.toString(), // 使用文件的id作为唯一标识 |
|||
name: item.fileName, // 文件名 |
|||
status: 'done', // 设置默认状态为已完成 |
|||
type: 'done', |
|||
url: item.filePath, // 文件的URL，这里假设用示例的URL格式 |
|||
})); |
|||
}); |
|||
formState.value = JSON.parse(JSON.stringify(record)); |
|||
if (formState.value.expenditure === 0) { |
|||
formState.value.transactionQuantity = formState.value.income; |
|||
} else { |
|||
formState.value.transactionQuantity = formState.value.expenditure; |
|||
} |
|||
setTimeout(() => { |
|||
let selectDevice = ref([Number(formState.value.transactionType)]); |
|||
findParentIds(options.value, formState.value.transactionType, selectDevice.value); |
|||
formState.value.transactionType = selectDevice; |
|||
formState.value.transactionType = formState.value.transactionType; |
|||
}, 500); |
|||
}; |
|||
// 定义一个递归函数来查找每一级的id 设备类型回显 层级方法 |
|||
function findParentIds(tree: any, targetId: number, result: any) { |
|||
for (let item of tree) { |
|||
if (item.children && item.children.length > 0) { |
|||
if (item.children.some((child: any) => child.value === targetId)) { |
|||
result.unshift(item.value); // 将当前节点的id添加到结果数组的最前面 |
|||
findParentIds(tree, item.value, result); // 递归查找父级节点的id |
|||
break; // 找到后可以退出循环 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
const delData = (record) => { |
|||
const id = [record.id]; |
|||
Modal.confirm({ |
|||
title: '警告', |
|||
content: '确定要删除吗?', |
|||
okText: '确定', |
|||
okType: 'primary', |
|||
cancelText: '取消', |
|||
onOk() { |
|||
fetch(carbonAssets.delete, { ids: id }).then((res) => { |
|||
message.success('操作成功！'); |
|||
getDetailList(); |
|||
}); |
|||
}, |
|||
onCancel() { |
|||
console.log('Cancel'); |
|||
}, |
|||
}); |
|||
}; |
|||
const deleteMore = () => { |
|||
Modal.confirm({ |
|||
title: '警告', |
|||
content: '确定要删除吗?', |
|||
okText: '确定', |
|||
okType: 'primary', |
|||
cancelText: '取消', |
|||
onOk() { |
|||
fetch(carbonAssets.delete, { ids: selectedRowKeys.value }).then((res) => { |
|||
message.success('操作成功！'); |
|||
getDetailList(); |
|||
}); |
|||
}, |
|||
onCancel() { |
|||
console.log('Cancel'); |
|||
}, |
|||
}); |
|||
}; |
|||
// 分页器 |
|||
const onChange = (pageNumber: number, size: number) => { |
|||
queryParams.value.pageNum = pageNumber; |
|||
queryParams.value.pageSize = size; |
|||
getDetailList(); |
|||
}; |
|||
// 新增相关数据 |
|||
const visible = ref(false); |
|||
const text = ref('新增'); |
|||
const formState = ref({ |
|||
orgId: orgId.value, |
|||
}); |
|||
const formRef = ref(); |
|||
const labelCol = { span: 5 }; |
|||
const wrapperCol = { span: 19 }; |
|||
const options = ref([]); |
|||
// 获取字典值 |
|||
const getDictList = () => { |
|||
fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, { grp: 'TRANSACTION_TYPE' }).then( |
|||
(res) => { |
|||
options.value = res.data; |
|||
options.value = options.value.map((item) => ({ |
|||
value: item.id, |
|||
label: item.cnValue, |
|||
children: item.children |
|||
? item.children.map((child) => ({ |
|||
value: child.id, |
|||
label: child.cnValue, |
|||
})) |
|||
: [], |
|||
})); |
|||
}, |
|||
); |
|||
}; |
|||
getDictList(); |
|||
// 点击新增 |
|||
const addDetail = () => { |
|||
text.value = '新增'; |
|||
visible.value = true; |
|||
getDictList(); |
|||
}; |
|||
const importFileList = ref<UploadProps['fileList']>([]); |
|||
const importFile = (options: UploadRequestOption) => { |
|||
const { file, onSuccess, onError } = options; |
|||
const formData = ref(new FormData()); |
|||
formData.value.append('file', file as any); |
|||
formData.value.append('orgId', orgId.value); |
|||
formData.value.append('year', queryParams.value.year); |
|||
fetch(carbonAssets.import, formData.value) |
|||
.then((res) => { |
|||
message.success('操作成功！'); |
|||
getDetailList(); |
|||
}) |
|||
.catch((error) => { |
|||
console.log('error', error); |
|||
}); |
|||
}; |
|||
const exportFile = () => { |
|||
const exportQuery = ref({ |
|||
orgId: orgId.value, |
|||
pageNum: 1, |
|||
pageSize: 999, |
|||
year: queryParams.value.year, |
|||
ids: selectedRowKeys.value, |
|||
}); |
|||
const config = { |
|||
responseType: 'blob', |
|||
}; |
|||
fetch(carbonAssets.export, exportQuery.value, config) |
|||
.then((res) => { |
|||
// 创建一个 URL 对象，指向图片数据的 blob |
|||
const url = window.URL.createObjectURL(new Blob([res])); |
|||
// 创建一个 <a> 标签，用于触发下载 |
|||
const link = document.createElement('a'); |
|||
link.href = url; |
|||
link.setAttribute('download', 'carbonTradeDetails.xlsx'); // 设置下载的文件名 |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
|
|||
// 清理 URL 对象 |
|||
window.URL.revokeObjectURL(url); |
|||
selectedRowKeys.value = []; |
|||
}) |
|||
.catch((error) => { |
|||
console.error('下载失败：', error); |
|||
}); |
|||
}; |
|||
// 上传附件 |
|||
const fileList = ref<UploadProps['fileList']>([]); |
|||
const beforeUpload: UploadProps['beforeUpload'] = (file) => { |
|||
return false; |
|||
}; |
|||
const handleChange = (info: UploadChangeParam) => { |
|||
fileList.value = [...info.fileList]; |
|||
if (info.file.status !== 'uploading') { |
|||
console.log(info.file, info.fileList); |
|||
} |
|||
if (info.file.status === 'done') { |
|||
message.success(`${info.file.name} 文件上传成功`); |
|||
} else if (info.file.status === 'error') { |
|||
message.error(`${info.file.name} 文件上传失败`); |
|||
} |
|||
}; |
|||
const delIds = ref([]); |
|||
const handleFileRemove = (file) => { |
|||
delIds.value.push(file.uid); |
|||
const newFileList = []; |
|||
fileList.value.forEach((item) => { |
|||
if (item.uid !== file.uid) { |
|||
newFileList.push(item); |
|||
} |
|||
}); |
|||
fileList.value = newFileList; |
|||
}; |
|||
const onSubmit = () => { |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
console.log('values', formState, toRaw(formState)); |
|||
if (formState.value.transactionType) { |
|||
formState.value.transactionType = formState.value.transactionType.join(',').split(',')[1]; |
|||
} |
|||
if (formState.value.accountType.value) { |
|||
formState.value.accountType = formState.value.accountType.value; |
|||
} |
|||
fetch(carbonAssets.createOrUpdate, formState.value).then((res) => { |
|||
if (res.data.id && fileList.value.length !== 0) { |
|||
// uploadQuery.value.bizId = res.data.id; |
|||
const formData = ref(new FormData()); |
|||
fileList.value.forEach((file) => { |
|||
if (file.type !== 'done') { |
|||
formData.value.append('files', file.originFileObj); |
|||
} |
|||
}); |
|||
formData.value.append('bizType', 1); |
|||
formData.value.append('bizId', res.data.id); |
|||
delIds.value.forEach((item) => { |
|||
formData.value.append('deleteList', item); |
|||
}); |
|||
fetch(uploadPic.uploadfiles, formData.value) |
|||
.then((res) => { |
|||
message.success('操作成功！'); |
|||
visible.value = false; |
|||
delIds.value = []; |
|||
getDetailList(); |
|||
getTotalTable(); |
|||
}) |
|||
.catch((error) => { |
|||
console.log('error', error); |
|||
}); |
|||
} else { |
|||
message.success('操作成功！'); |
|||
visible.value = false; |
|||
delIds.value = []; |
|||
getDetailList(); |
|||
} |
|||
}); |
|||
}) |
|||
.catch((error) => { |
|||
console.log('error', error); |
|||
}); |
|||
}; |
|||
// 定义form表单的必填 |
|||
const rules: Record<string, Rule[]> = { |
|||
accountType: [{ required: true, message: '请输入账户类型', trigger: 'change' }], |
|||
transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }], |
|||
transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }], |
|||
transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }], |
|||
amountIncurred: [{ required: true, message: '请输入发生金额', trigger: 'change' }], |
|||
tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }], |
|||
}; |
|||
// 关闭新增抽屉 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
delIds.value = []; |
|||
formState.value = {}; |
|||
fileList.value = []; |
|||
formRef.value.resetFields(); |
|||
}; |
|||
// 统计表格 |
|||
const getTotalTable = (type) => { |
|||
if (type) { |
|||
queryParams.value.accountType = type; |
|||
} |
|||
fetch(carbonAssets.quotaStatistics, queryParams.value).then((res) => { |
|||
totalData.value = res.data; |
|||
}); |
|||
}; |
|||
getTotalTable(); |
|||
const totalColumns = [ |
|||
{ |
|||
title: '统计类型', |
|||
dataIndex: 'statisticType', |
|||
}, |
|||
{ |
|||
title: '小计', |
|||
dataIndex: 'subtotal', |
|||
}, |
|||
{ |
|||
title: '合计', |
|||
dataIndex: 'amountTo', |
|||
}, |
|||
]; |
|||
|
|||
const totalData = ref([]); |
|||
// 点击返回 |
|||
const emit = defineEmits(['change-data']); |
|||
const changeParentData = () => { |
|||
emit('change-data', true); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ns-form-title { |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding-bottom: 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.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; |
|||
} |
|||
:deep(.ant-card-body) { |
|||
padding: 16px; |
|||
} |
|||
.search { |
|||
height: 16%; |
|||
} |
|||
.detailTable { |
|||
width: 65%; |
|||
margin-right: 20px; |
|||
height: 100%; |
|||
background: white; |
|||
border-radius: 12px; |
|||
padding: 16px; |
|||
} |
|||
.total { |
|||
width: calc(35% - 20px); |
|||
height: 100%; |
|||
background: white; |
|||
border-radius: 12px; |
|||
padding: 16px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue