|
|
|
@ -1,12 +1,147 @@ |
|
|
|
<template> |
|
|
|
<div class="detailTable"> |
|
|
|
<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" :model="searchFormState"> |
|
|
|
<a-form-item> |
|
|
|
<a-input |
|
|
|
style="width: 200px" |
|
|
|
v-model:value="searchFormState.value" |
|
|
|
placeholder="请输入账户类型" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item> |
|
|
|
<a-select |
|
|
|
ref="select" |
|
|
|
v-model:value="searchFormState.value1" |
|
|
|
style="width: 200px" |
|
|
|
placeholder="请选择交易类型" |
|
|
|
@focus="focus" |
|
|
|
@change="handleChange"> |
|
|
|
<a-select-option value="jack">Jack</a-select-option> |
|
|
|
<a-select-option value="lucy">Lucy</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item> |
|
|
|
<a-date-picker |
|
|
|
style="width: 200px" |
|
|
|
v-model:value="searchFormState.value5" |
|
|
|
placeholder="请选择账期" |
|
|
|
picker="year" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item> |
|
|
|
<a-button type="primary">查询</a-button> |
|
|
|
<a-button html-type="submit" style="margin-left: 6px">重置</a-button> |
|
|
|
</a-form-item> |
|
|
|
</a-form> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
<div class="total"> </div> |
|
|
|
<div style="display: flex; margin-top: 20px; height: calc(84% - 20px)"> |
|
|
|
<div class="detailTable"> |
|
|
|
<a-card> |
|
|
|
<div class="ns-form-title"> |
|
|
|
<div class="title">交易明细</div> |
|
|
|
<div class="operation"> |
|
|
|
<a-button type="primary">新增</a-button> |
|
|
|
<a-button type="primary" style="margin-left: 6px">导入</a-button> |
|
|
|
<a-button type="primary" style="margin-left: 6px">导出</a-button> |
|
|
|
<a-button type="primary" style="margin-left: 6px">批量删除</a-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-table |
|
|
|
:columns="columns" |
|
|
|
:data-source="data" |
|
|
|
@change="onChange" |
|
|
|
:rowSelection="{ |
|
|
|
selectedRowKeys: selectedRowKeys, |
|
|
|
onChange: onSelectionChange, |
|
|
|
}" |
|
|
|
:scroll="{ x: 1500, y: 400 }"> |
|
|
|
<template #bodyCell="{ column, text, record }"> |
|
|
|
<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-card> |
|
|
|
</div> |
|
|
|
<div class="total"> |
|
|
|
<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"> |
|
|
|
<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" placeholder="请输入账户类型" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item ref="name" label="交易类型" name="reportName"> |
|
|
|
<a-cascader |
|
|
|
v-model:value="formState.value" |
|
|
|
:options="options" |
|
|
|
placeholder="请选择交易类型" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item ref="name" label="交易日期" name="reportName"> |
|
|
|
<a-date-picker v-model:value="formState.value1" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item ref="name" label="交易数量" name="reportName"> |
|
|
|
<a-input v-model:value="formState.reportName" placeholder="请输入交易数量" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item ref="name" label="发生金额" name="reportName"> |
|
|
|
<a-input v-model:value="formState.reportName" placeholder="请输入发生金额" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item ref="name" label="交易对象" name="reportName"> |
|
|
|
<a-input v-model:value="formState.reportName" placeholder="请输入交易对象" /> |
|
|
|
</a-form-item> |
|
|
|
<a-upload |
|
|
|
v-model:file-list="fileList" |
|
|
|
name="file" |
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
|
|
|
:headers="headers" |
|
|
|
@change="handleChange"> |
|
|
|
<a-button> |
|
|
|
<upload-outlined></upload-outlined> |
|
|
|
点击上传凭证 |
|
|
|
</a-button> |
|
|
|
</a-upload> |
|
|
|
</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 } from 'vue'; |
|
|
|
import { ref, defineEmits } from 'vue'; |
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
|
import { UploadOutlined } from '@ant-design/icons-vue'; |
|
|
|
import type { UploadChangeParam } from 'ant-design-vue'; |
|
|
|
defineOptions({ |
|
|
|
energyType: 'carbonAssetsDetail', // 与页面路由name一致缓存才可生效 |
|
|
|
}); |
|
|
|
@ -16,13 +151,229 @@ |
|
|
|
const fetch = (api, params = { orgId }) => { |
|
|
|
return http.post(api, params); |
|
|
|
}; |
|
|
|
// 查询部分变量 |
|
|
|
const searchFormState = ref({}); |
|
|
|
// 详情部分变量 |
|
|
|
const selectedRowKeys = ref([]); |
|
|
|
const onSelectionChange = (selectedKeys, selectedRows) => { |
|
|
|
selectedRowKeys.value = selectedKeys; |
|
|
|
}; |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '序号', |
|
|
|
customRender: (text: any) => { |
|
|
|
return text.index + 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '资产类别', |
|
|
|
dataIndex: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '交易方式', |
|
|
|
dataIndex: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '交易日期', |
|
|
|
dataIndex: 'age', |
|
|
|
sorter: (a, b) => a.age - b.age, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '本期收入(tCO2)', |
|
|
|
dataIndex: 'age', |
|
|
|
sorter: (a, b) => a.age - b.age, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '本期支出(tCO2)', |
|
|
|
dataIndex: 'age', |
|
|
|
sorter: (a, b) => a.age - b.age, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '发生金额(￥）', |
|
|
|
dataIndex: 'address', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '交易对象', |
|
|
|
dataIndex: 'address', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '更新人', |
|
|
|
dataIndex: 'address', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '更新时间', |
|
|
|
dataIndex: 'address', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
key: 'action', |
|
|
|
width: 130, |
|
|
|
}, |
|
|
|
]; |
|
|
|
const data = [ |
|
|
|
{ |
|
|
|
key: '1', |
|
|
|
name: 'John Brown', |
|
|
|
age: 32, |
|
|
|
address: 'New York No. 1 Lake Park', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '2', |
|
|
|
name: 'Jim Green', |
|
|
|
age: 42, |
|
|
|
address: 'London No. 1 Lake Park', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '3', |
|
|
|
name: 'Joe Black', |
|
|
|
age: 32, |
|
|
|
address: 'Sidney No. 1 Lake Park', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '4', |
|
|
|
name: 'Jim Red', |
|
|
|
age: 32, |
|
|
|
address: 'London No. 2 Lake Park', |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
// 新增相关数据 |
|
|
|
const visible = ref(false); |
|
|
|
const formState = ref({}); |
|
|
|
const formRef = ref(); |
|
|
|
const labelCol = { span: 5 }; |
|
|
|
const wrapperCol = { span: 19 }; |
|
|
|
const options: CascaderProps['options'] = [ |
|
|
|
{ |
|
|
|
value: 'zhejiang', |
|
|
|
label: 'Zhejiang', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'hangzhou', |
|
|
|
label: 'Hangzhou', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'xihu', |
|
|
|
label: 'West Lake', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'jiangsu', |
|
|
|
label: 'Jiangsu', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'nanjing', |
|
|
|
label: 'Nanjing', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
value: 'zhonghuamen', |
|
|
|
label: 'Zhong Hua Men', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
]; |
|
|
|
// 定义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 totalColumns = [ |
|
|
|
{ |
|
|
|
title: '统计类型', |
|
|
|
dataIndex: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '小计', |
|
|
|
dataIndex: 'name', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '合计', |
|
|
|
dataIndex: 'name', |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
const totalData = [ |
|
|
|
{ |
|
|
|
key: '1', |
|
|
|
total: '0', |
|
|
|
name: 'John', |
|
|
|
money: '￥300,000.00', |
|
|
|
address: 'New York No. 1 Lake Park', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: '2', |
|
|
|
name: 'Jim', |
|
|
|
money: '￥1,256,000.00', |
|
|
|
address: 'London No. 1 Lake Park', |
|
|
|
}, |
|
|
|
]; |
|
|
|
// 点击返回 |
|
|
|
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 { |
|
|
|
height: 80%; |
|
|
|
width: 65%; |
|
|
|
margin-right: 20px; |
|
|
|
height: 100%; |
|
|
|
background: white; |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
.total { |
|
|
|
height: 20%; |
|
|
|
width: calc(35% - 20px); |
|
|
|
height: 100%; |
|
|
|
background: white; |
|
|
|
border-radius: 12px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
fks-xuxinyue
4 months ago