fks-xuxinyue
4 months ago
6 changed files with 362 additions and 126 deletions
@ -0,0 +1,251 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-table |
||||
|
:columns="tableColumns" |
||||
|
:data-source="data" |
||||
|
bordered |
||||
|
:pagination="false" |
||||
|
:scroll="{ x: 2000 }"> |
||||
|
<template #bodyCell="{ column, text }"> |
||||
|
<template v-if="column.key === 'action'"> |
||||
|
<span> |
||||
|
<a>编辑</a> |
||||
|
<a-divider type="vertical" /> |
||||
|
<a>删除</a> |
||||
|
</span> |
||||
|
</template> |
||||
|
</template> |
||||
|
<template #title> |
||||
|
<a-date-picker v-model:value="selectYear" picker="year" /> |
||||
|
<div class="buttonGroup"> |
||||
|
<a-button type="primary" @click="addNewData">新增</a-button> |
||||
|
<a-button type="primary">导入</a-button> |
||||
|
<a-button type="primary">导出</a-button> |
||||
|
<a-button type="primary">模板下载</a-button> |
||||
|
<a-button type="primary">上传凭证</a-button> |
||||
|
<a-button type="primary">凭证下载</a-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
<a-pagination |
||||
|
:current="current" |
||||
|
:page-size="pageSize" |
||||
|
:total="0" |
||||
|
:show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`" /> |
||||
|
<!-- 新增数据库数据 --> |
||||
|
<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="name"> |
||||
|
<a-input v-model:value="formState.name" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="计量单位"> |
||||
|
<a-cascader v-model:value="value" :options="options" placeholder="Please select" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="自动采集节点"> |
||||
|
<a-tree-select |
||||
|
v-model:value="treeValue" |
||||
|
style="width: 300px" |
||||
|
placeholder="Please select" |
||||
|
:tree-line="true" |
||||
|
:tree-data="treeData" |
||||
|
tree-node-filter-prop="title" |
||||
|
> |
||||
|
<template #title="{ value: val, title }"> |
||||
|
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b> |
||||
|
<template v-else>{{ title }}</template> |
||||
|
</template> |
||||
|
</a-tree-select> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="计算碳排" name="resource"> |
||||
|
<a-radio-group v-model:value="formState.resource"> |
||||
|
<a-radio value="1">是</a-radio> |
||||
|
<a-radio value="2">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="排放类型" name="region"> |
||||
|
<a-select v-model:value="formState.region" placeholder="请选择排放类型"> |
||||
|
<a-select-option value="shanghai">Zone one</a-select-option> |
||||
|
<a-select-option value="beijing">Zone two</a-select-option> |
||||
|
</a-select> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="1月" name="delivery"> |
||||
|
<a-switch v-model:checked="formState.delivery" /> |
||||
|
</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> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { ref,reactive, toRaw } from 'vue'; |
||||
|
import type { UnwrapRef } from 'vue'; |
||||
|
import type { Rule } from 'ant-design-vue/es/form'; |
||||
|
import type { CascaderProps,TreeSelectProps } from 'ant-design-vue'; |
||||
|
import type { Dayjs } from 'dayjs'; |
||||
|
import { http } from '/nerv-lib/util/http'; |
||||
|
import { tableColumns } from '../config'; |
||||
|
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary'; |
||||
|
defineOptions({ |
||||
|
name: 'EnergyConsumption', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
|
||||
|
const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId; |
||||
|
const fetch = (api, params = { orgId }) => { |
||||
|
return http.post(api, params); |
||||
|
}; |
||||
|
const selectYear = ref<Dayjs>(); |
||||
|
const current = ref<number>(1); |
||||
|
const pageSize = ref<number>(10); |
||||
|
const visible = ref(false); |
||||
|
const value = ref<string[]>([]); |
||||
|
const data = ref([]); |
||||
|
interface FormState { |
||||
|
name: string; |
||||
|
region: string | undefined; |
||||
|
delivery: boolean; |
||||
|
resource: string; |
||||
|
} |
||||
|
const formRef = ref(); |
||||
|
const labelCol = { span: 5 }; |
||||
|
const wrapperCol = { span: 13 }; |
||||
|
const formState: UnwrapRef<FormState> = reactive({ |
||||
|
name: '', |
||||
|
region: undefined, |
||||
|
delivery: false, |
||||
|
resource: '', |
||||
|
}); |
||||
|
// 定义form表单的必填 |
||||
|
const rules: Record<string, Rule[]> = { |
||||
|
name: [ |
||||
|
{ required: true, message: '请输入能源种类', trigger: 'change' }, |
||||
|
], |
||||
|
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }], |
||||
|
}; |
||||
|
// 定义计量单位级联选择的变量 |
||||
|
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', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
]; |
||||
|
// 定义自动采集节点数的变量 |
||||
|
const treeValue = ref<string>(); |
||||
|
const treeData = ref<TreeSelectProps['treeData']>([ |
||||
|
{ |
||||
|
title: 'parent 1', |
||||
|
value: 'parent 1', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: 'parent 1-0', |
||||
|
value: 'parent 1-0', |
||||
|
children: [ |
||||
|
{ |
||||
|
title: 'my leaf', |
||||
|
value: 'leaf1', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'your leaf', |
||||
|
value: 'leaf2', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
title: 'parent 1-1', |
||||
|
value: 'parent 1-1', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
]); |
||||
|
// 获取表格数据 |
||||
|
const getTableList = () => { |
||||
|
fetch(energyConsumption.pageList).then((res) => { |
||||
|
console.log(res,'aaaaaa'); |
||||
|
}); |
||||
|
}; |
||||
|
getTableList() |
||||
|
// 点击确定提交 |
||||
|
const onSubmit = () => { |
||||
|
formRef.value |
||||
|
.validate() |
||||
|
.then(() => { |
||||
|
console.log('values', formState, toRaw(formState)); |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.log('error', error); |
||||
|
}); |
||||
|
}; |
||||
|
const resetForm = () => { |
||||
|
formRef.value.resetFields(); |
||||
|
}; |
||||
|
// 点击新增按钮 |
||||
|
const addNewData = () => { |
||||
|
visible.value = true |
||||
|
} |
||||
|
// 关闭新增抽屉 |
||||
|
const onClose = () => { |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
::v-deep .ant-table-title{ |
||||
|
display: flex; |
||||
|
} |
||||
|
::v-deep .ant-table-container{ |
||||
|
padding: 0px 16px; |
||||
|
} |
||||
|
.buttonGroup{ |
||||
|
margin-left: 1vw; |
||||
|
width: 30vw; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped> |
||||
|
th.column-money, |
||||
|
td.column-money { |
||||
|
text-align: right !important; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue