fks-xuxinyue
4 months ago
5 changed files with 774 additions and 443 deletions
@ -0,0 +1,401 @@ |
|||
<!-- @format --> |
|||
|
|||
<template> |
|||
<div class="main"> |
|||
<div class="left"> |
|||
<div class="top"> |
|||
<a-form style="width: 100%;margin: 0 auto;"> |
|||
<div class="ns-form-title"><span>排放分类</span></div> |
|||
<div style="padding: 0 16px !important;width: 100%;"> |
|||
<a-row> |
|||
<a-col :span="24" style="margin-bottom: 16px;"> |
|||
<a-input-search |
|||
v-model:value="selectTreeDataValue" |
|||
placeholder="请输入关键词" |
|||
@search="onSearchTreeData" |
|||
/> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
</a-form> |
|||
<a-tree |
|||
v-if="gData && gData.length > 0" |
|||
class="draggable-tree" |
|||
style="padding: 0 16px !important;" |
|||
show-line |
|||
block-node |
|||
:tree-data="gData" |
|||
:checkedKeys="checkedTreeNodeKeys" |
|||
:selectedKeys="selectedKeys" |
|||
@check="checkTreeNode" |
|||
@select="onSelect" |
|||
:expanded-keys="expandedKeys" |
|||
:auto-expand-parent="autoExpandParent" |
|||
@expand="onExpand"> |
|||
<template #title="{ emissionName }"> |
|||
<span v-if="emissionName && selectTreeDataValue && emissionName.indexOf(selectTreeDataValue) > -1"> |
|||
{{ emissionName.substring(0, emissionName.indexOf(selectTreeDataValue)) }} |
|||
<span style="color: #f50">{{ selectTreeDataValue }}</span> |
|||
{{ emissionName.substring(emissionName.indexOf(selectTreeDataValue) + selectTreeDataValue.length) }} |
|||
</span> |
|||
<span v-else>{{ emissionName }}</span> |
|||
</template> |
|||
</a-tree> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<a-table :columns="columns" :data-source="tableData" bordered :pagination="false"> |
|||
<template #bodyCell="{ column, text }"> |
|||
<template v-if="column.dataIndex === 'name'"> |
|||
<a>{{ text }}</a> |
|||
</template> |
|||
</template> |
|||
<template #title>Header</template> |
|||
</a-table> |
|||
</div> |
|||
<!-- 新增树节点 --> |
|||
<ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel"> |
|||
<ns-input |
|||
v-model:value="addTreeNode" |
|||
class="input" |
|||
placeholder="请输入排放类型"/> |
|||
</ns-modal> |
|||
<!-- 新增数据库数据 --> |
|||
<a-drawer |
|||
:width="500" |
|||
:visible="visible" |
|||
:body-style="{ paddingBottom: '80px' }" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
destroyOnClose |
|||
@close="onClose"> |
|||
<ns-form |
|||
ref="formRef" |
|||
:model="formData" |
|||
class="form" |
|||
:wrapperCol="{ span: 20 }" |
|||
formLayout="vertical" /> |
|||
<template #footer> |
|||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button> |
|||
<a-button type="primary" @click="onEdit">确定</a-button> |
|||
</template> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { Modal } from 'ant-design-vue'; |
|||
import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
import { NsMessage, NsModal } from '/nerv-lib/component'; |
|||
import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary'; |
|||
import type { |
|||
AntTreeNodeDragEnterEvent, |
|||
AntTreeNodeDropEvent, |
|||
TreeProps, |
|||
} from 'ant-design-vue/es/tree'; |
|||
import { log } from 'node:console'; |
|||
|
|||
defineOptions({ name: 'QuickCalculation' }); |
|||
const selectTreeDataValue = ref<string>(''); |
|||
const data = reactive({}); |
|||
let formData = ref({}); |
|||
const formRef = ref(); |
|||
const visible = ref(false); |
|||
const searchValue = ref<string>(''); |
|||
const searchValue2 = ref<string>(''); |
|||
const disabled = ref(false); |
|||
const treeNodeAdd = ref<boolean>(false); |
|||
const operationTree = ref<string>('新增'); |
|||
|
|||
const opMap: any = ref({ |
|||
type: 'add', |
|||
fuc: () => {}, |
|||
record: {}, |
|||
}); |
|||
watchEffect(() => { |
|||
disabled.value = opMap.value.type === 'edit'; |
|||
}); |
|||
const casData = ref([]); |
|||
const treeData = ref([]); |
|||
const userAuthList = ref([]); |
|||
const orgId = ref(''); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
orgId.value = result; |
|||
const dynamicDisabled = computed(() => { |
|||
return formRef.value?.validateResult && userAuthList.value?.length; |
|||
}); |
|||
const fetch = (api, params = { orgId }) => { |
|||
return http.post(api, params); |
|||
}; |
|||
|
|||
// 树结构 |
|||
const x = 3; |
|||
const y = 2; |
|||
const z = 1; |
|||
const genData: TreeProps['treeData'] = []; |
|||
|
|||
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => { |
|||
const preKey = _preKey || '0'; |
|||
const tns = _tns || genData; |
|||
|
|||
const children = []; |
|||
for (let i = 0; i < x; i++) { |
|||
const key = `${preKey}-${i}`; |
|||
tns.push({ title: key, key }); |
|||
if (i < y) { |
|||
children.push(key); |
|||
} |
|||
} |
|||
if (_level < 0) { |
|||
return tns; |
|||
} |
|||
const level = _level - 1; |
|||
children.forEach((key, index) => { |
|||
tns[index].children = []; |
|||
return generateData(level, key, tns[index].children); |
|||
}); |
|||
}; |
|||
generateData(z); |
|||
type TreeDataItem = TreeProps['treeData'][number]; |
|||
const gData = ref<TreeProps['treeData']>(genData); |
|||
const dataList: TreeProps['treeData'] = []; |
|||
const generateList = (data: TreeProps['treeData']) => { |
|||
for (let i = 0; i < data.length; i++) { |
|||
const node = data[i]; |
|||
const key = node.key; |
|||
dataList.push({ key, title: key }); |
|||
if (node.children) { |
|||
generateList(node.children); |
|||
} |
|||
} |
|||
}; |
|||
generateList(genData); |
|||
|
|||
const getParentKey = ( |
|||
key: string | number, |
|||
tree: TreeProps['treeData'], |
|||
): string | number | undefined => { |
|||
let parentKey; |
|||
for (let i = 0; i < tree.length; i++) { |
|||
const node = tree[i]; |
|||
if (node.children) { |
|||
if (node.children.some(item => item.key === key)) { |
|||
parentKey = node.key; |
|||
} else if (getParentKey(key, node.children)) { |
|||
parentKey = getParentKey(key, node.children); |
|||
} |
|||
} |
|||
} |
|||
return parentKey; |
|||
}; |
|||
const expandedKeys = ref<(string | number)[]>([]); |
|||
const autoExpandParent = ref<boolean>(true); |
|||
|
|||
const onExpand = (keys: string[]) => { |
|||
expandedKeys.value = keys; |
|||
autoExpandParent.value = false; |
|||
}; |
|||
watch(selectTreeDataValue, value => { |
|||
const expanded = dataList |
|||
.map((item: TreeProps['treeData'][number]) => { |
|||
if (item.title.indexOf(value) > -1) { |
|||
return getParentKey(item.key, gData.value); |
|||
} |
|||
return null; |
|||
}) |
|||
.filter((item, i, self) => item && self.indexOf(item) === i); |
|||
expandedKeys.value = expanded; |
|||
selectTreeDataValue.value = value; |
|||
autoExpandParent.value = true; |
|||
}); |
|||
// 筛选树结构中的数据 |
|||
const onSearchTreeData = (selectTreeDataValue: string) => { |
|||
console.log('use value', selectTreeDataValue); |
|||
console.log('or use this.value', value.value); |
|||
}; |
|||
// 点击数据点的复选框 |
|||
const checkedIds = ref([]) |
|||
const emissionType = ref() |
|||
const checkTreeNode = (checkedKeys, info) => { |
|||
checkedIds.value = [] |
|||
info.checkedNodes.forEach(item=>{ |
|||
checkedIds.value.push(item.id) |
|||
}) |
|||
sessionStorage.setItem('checkedTreeNode', checkedIds.value); |
|||
emissionType.value = checkedIds.value.join(',') |
|||
} |
|||
// 新增/编辑树节点点击确定 |
|||
const addTreeNode =ref() |
|||
const handleOk = (e: MouseEvent) => { |
|||
editTreeNode.value.emissionName = addTreeNode.value |
|||
http.post(carbonEmissionFactorLibrary.creat,editTreeNode.value).then(() => { |
|||
getOrgTree() |
|||
NsMessage.success('操作成功'); |
|||
addTreeNode.value = '' |
|||
treeNodeAdd.value = false; |
|||
}); |
|||
}; |
|||
const handleCancel = () => { |
|||
addTreeNode.value = '' |
|||
treeNodeAdd.value = false; |
|||
}; |
|||
// 获取排放分类树 |
|||
const getOrgTree = (params?) => { |
|||
fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => { |
|||
gData.value = res.data |
|||
// 找到匹配的节点数据 |
|||
const selectedNodes = []; |
|||
checkedTreeNodeKeys.value.forEach(key => { |
|||
const [parentId, childId] = key.split('-').map(Number); |
|||
if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) { |
|||
selectedNodes.push(gData.value[parentId]); |
|||
} |
|||
}); |
|||
}); |
|||
}; |
|||
getOrgTree(); |
|||
// 被选中的树节点 |
|||
const editTreeNode = ref({}) |
|||
const onSelect = (selectedKeys: string[], info: any) => { |
|||
if(info.selected){ |
|||
editTreeNode.value = { |
|||
id:info.selectedNodes[0].id, |
|||
level:info.selectedNodes[0].level, |
|||
dataNumber:info.selectedNodes[0].dataNumber, |
|||
sortNumber:info.selectedNodes[0].sortNumber, |
|||
parentEmissionId:info.selectedNodes[0].parentEmissionId, |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const onSearch = () => { |
|||
console.log(searchValue.value); |
|||
getOrgTree({ orgName: searchValue.value, orgId }); |
|||
}; |
|||
|
|||
const tableFetch = (params) => { |
|||
console.log(params, 'sdfasfasdfasdfasdf'); |
|||
|
|||
setTimeout(() => { |
|||
mainRef.value?.nsTableRef.reload(); |
|||
}, 100); |
|||
}; |
|||
|
|||
const handleSelect = (selectedKeys: any, info: any) => { |
|||
fetch(carbonEmissionFactorLibrary.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => { |
|||
treeData2.value = res.data; |
|||
}); |
|||
tableFetch({ orgId: info.node?.orgInfo.orgId }); |
|||
}; |
|||
const columns = [ |
|||
{ |
|||
title: 'Name', |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: 'Cash Assets', |
|||
className: 'column-money', |
|||
dataIndex: 'money', |
|||
}, |
|||
{ |
|||
title: 'Address', |
|||
dataIndex: 'address', |
|||
}, |
|||
]; |
|||
|
|||
const tableData = [ |
|||
{ |
|||
key: '1', |
|||
name: 'John Brown', |
|||
money: '￥300,000.00', |
|||
address: 'New York No. 1 Lake Park', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
name: 'Jim Green', |
|||
money: '￥1,256,000.00', |
|||
address: 'London No. 1 Lake Park', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
name: 'Joe Black', |
|||
money: '￥120,000.00', |
|||
address: 'Sidney No. 1 Lake Park', |
|||
}, |
|||
]; |
|||
|
|||
const onClose = () => { |
|||
visible.value = false; |
|||
formData.value = {}; |
|||
userAuthList.value.splice(0); |
|||
}; |
|||
|
|||
const onEdit = () => { |
|||
formRef.value?.triggerSubmit().then(() => { |
|||
console.log(formData.value, 'formData.value'); |
|||
// if (!userAuthList.value.length) { |
|||
// NsMessage.error('请添加用户权限'); |
|||
// return; |
|||
// } |
|||
|
|||
opMap.value.fuc && |
|||
opMap.value.fuc({ ...formData.value }); |
|||
}); |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.main { |
|||
background-color: @ns-content-bg; |
|||
display: flex; |
|||
height: 100%; |
|||
} |
|||
.left { |
|||
width: 300px; |
|||
// max-height: calc(100vh - 96px); |
|||
margin-right: @ns-gap; |
|||
min-width: fit-content; |
|||
> div { |
|||
background-color: @white; |
|||
// box-shadow: @ns-content-box-shadow; |
|||
flex: 1; |
|||
} |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
.top{ |
|||
position: relative; |
|||
.addTreeNode{ |
|||
width: 100%; |
|||
padding: 16px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
::v-deep .ant-table-container{ |
|||
padding: 0px 16px; |
|||
} |
|||
.top { |
|||
overflow: auto; |
|||
// height: 50%; |
|||
// border-bottom: 5px solid rgb(229, 235, 240); |
|||
// overflow-y: auto; |
|||
} |
|||
.ns-form-title{ |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding: 16px; |
|||
margin-bottom: 16px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
th.column-money, |
|||
td.column-money { |
|||
text-align: right !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue