xuziqiang
6 months ago
14 changed files with 578 additions and 151 deletions
@ -0,0 +1,96 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
size="large" |
||||
|
class="custom-class" |
||||
|
title="编辑" |
||||
|
:ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<div class="drawerContainer"> |
||||
|
<ns-tree-api v-bind="treeConfig" @select="treeSelect" /> |
||||
|
<a-transfer |
||||
|
v-model:target-keys="targetKeys" |
||||
|
:data-source="mockData" |
||||
|
style="height: 100%; width: 66%" |
||||
|
:listStyle="listStyle" |
||||
|
show-search |
||||
|
:filter-option="filterOption" |
||||
|
:render="(item) => item.title" /> |
||||
|
</div> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { onMounted, ref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/component'; |
||||
|
import { treeConfig } from './config'; |
||||
|
|
||||
|
const visible = ref(false); |
||||
|
const mockData = ref([]); |
||||
|
|
||||
|
const listStyle = { |
||||
|
height: '100%', |
||||
|
width: '100%', |
||||
|
}; |
||||
|
const targetKeys = ref<string[]>([]); |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getMock('上海公司'); |
||||
|
}); |
||||
|
|
||||
|
const filterOption = (inputValue: string, option: MockData) => { |
||||
|
return option.description.indexOf(inputValue) > -1; |
||||
|
}; |
||||
|
|
||||
|
const btnClick = () => { |
||||
|
visible.value = false; |
||||
|
NsMessage.success('编辑成功'); |
||||
|
}; |
||||
|
function treeSelect( |
||||
|
selectedKeys: never[], |
||||
|
e: { |
||||
|
selected: boolean; |
||||
|
selectedNodes: { props: { dataRef: any } }[]; |
||||
|
node: any; |
||||
|
event: any; |
||||
|
}, |
||||
|
) { |
||||
|
console.log(selectedKeys, e); |
||||
|
const { |
||||
|
dataRef: { title }, |
||||
|
} = e.node; |
||||
|
|
||||
|
getMock(title); |
||||
|
} |
||||
|
const getMock = (company) => { |
||||
|
const keys = []; |
||||
|
const mData = []; |
||||
|
for (let i = 0; i < 60; i++) { |
||||
|
const data = { |
||||
|
key: i.toString(), |
||||
|
title: `A00${i + 1}总用电量(${company})`, |
||||
|
description: `description of content${i + 1}`, |
||||
|
chosen: Math.random() * 2 > 1, |
||||
|
}; |
||||
|
if (data.chosen) { |
||||
|
keys.push(data.key); |
||||
|
} |
||||
|
mData.push(data); |
||||
|
} |
||||
|
mockData.value = mData; |
||||
|
targetKeys.value = keys; |
||||
|
}; |
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.drawerContainer { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,116 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
width="520" |
||||
|
title="公式编辑" |
||||
|
:ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<ns-form :schemas="schemas" :model="model" formLayout="vertical" /> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/component'; |
||||
|
|
||||
|
const visible = ref(false); |
||||
|
const model = ref({}); |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
}; |
||||
|
|
||||
|
const mockDataSource = ref([ |
||||
|
{ |
||||
|
groupName: '1号厂区', |
||||
|
}, |
||||
|
{ |
||||
|
groupName: '2号厂区', |
||||
|
}, |
||||
|
{ |
||||
|
groupName: '3号厂区', |
||||
|
}, |
||||
|
]); |
||||
|
const schemas = [ |
||||
|
{ |
||||
|
field: 'basicInfo', |
||||
|
label: '', |
||||
|
displayFormItem: false, |
||||
|
class: 'ns-form-item-full', |
||||
|
component: 'NsChildForm', |
||||
|
componentProps: { |
||||
|
title: '公式编辑', |
||||
|
schemas: [ |
||||
|
{ |
||||
|
label: '', |
||||
|
field: 'formula', |
||||
|
component: 'NsTextarea', |
||||
|
defaultValue: '(A+B)*2', |
||||
|
style: { width: '450px' }, |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
autosize: { |
||||
|
minRows: 6, |
||||
|
maxRows: 6, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'list', |
||||
|
label: '', |
||||
|
displayFormItem: false, |
||||
|
class: 'ns-form-item-full', |
||||
|
component: 'NsChildForm', |
||||
|
componentProps: { |
||||
|
title: '分组列表', |
||||
|
schemas: [ |
||||
|
{ |
||||
|
label: '', |
||||
|
field: 'NsBasicTable', |
||||
|
component: 'NsBasicTable', |
||||
|
componentProps: { |
||||
|
disabled: true, |
||||
|
placeholder: '请输入', |
||||
|
dataSource: mockDataSource.value, |
||||
|
style: { width: '450px' }, |
||||
|
pagination: false, |
||||
|
rowKey: (record) => record.groupName, |
||||
|
columns: [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'name', |
||||
|
customRender: ({ index }) => index + 1, |
||||
|
width: 80, |
||||
|
align: 'center', |
||||
|
}, |
||||
|
{ |
||||
|
title: '分组名称', |
||||
|
dataIndex: 'groupName', |
||||
|
align: 'center', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const btnClick = () => { |
||||
|
visible.value = false; |
||||
|
NsMessage.success('操作成功'); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.drawerContainer { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,145 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
width="520" |
||||
|
title="分组编辑" |
||||
|
:ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<ns-form :schemas="schemas" :model="model" formLayout="vertical" /> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { createVNode, onMounted, ref, unref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/component'; |
||||
|
import { DeleteOutlined } from '@ant-design/icons-vue'; |
||||
|
const visible = ref(false); |
||||
|
const model = ref({}); |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
}; |
||||
|
const deleteRow = (index) => { |
||||
|
console.log(index); |
||||
|
mockDataSource.value.splice(index, 1); |
||||
|
}; |
||||
|
const addRow = () => { |
||||
|
console.log(model); |
||||
|
if (model.value?.groupName) mockDataSource.value.push(unref(model) as any); |
||||
|
}; |
||||
|
const mockDataSource = ref([ |
||||
|
{ |
||||
|
groupName: '1号厂区', |
||||
|
}, |
||||
|
{ |
||||
|
groupName: '2号厂区', |
||||
|
}, |
||||
|
{ |
||||
|
groupName: '3号厂区', |
||||
|
}, |
||||
|
]); |
||||
|
const schemas = [ |
||||
|
{ |
||||
|
field: 'basicInfo', |
||||
|
label: '', |
||||
|
displayFormItem: false, |
||||
|
class: 'ns-form-item-full', |
||||
|
component: 'NsChildForm', |
||||
|
componentProps: { |
||||
|
title: '分组信息', |
||||
|
schemas: [ |
||||
|
{ |
||||
|
label: '分组编号', |
||||
|
field: 'groupCode', |
||||
|
component: 'NsInput', |
||||
|
defaultValue: 'WDIFHSUNGNDOR', |
||||
|
componentProps: { |
||||
|
disabled: true, |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '分组名称', |
||||
|
field: 'groupName', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
addonAfter: createVNode( |
||||
|
'div', |
||||
|
{ style: { cursor: 'pointer' }, onclick: addRow }, |
||||
|
'新增', |
||||
|
), |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'list', |
||||
|
label: '', |
||||
|
displayFormItem: false, |
||||
|
class: 'ns-form-item-full', |
||||
|
component: 'NsChildForm', |
||||
|
componentProps: { |
||||
|
title: '分组列表', |
||||
|
schemas: [ |
||||
|
{ |
||||
|
label: '', |
||||
|
field: 'NsBasicTable', |
||||
|
component: 'NsBasicTable', |
||||
|
componentProps: { |
||||
|
disabled: true, |
||||
|
placeholder: '请输入', |
||||
|
dataSource: mockDataSource.value, |
||||
|
style: { width: '450px' }, |
||||
|
rowSelection: { type: 'radio' }, |
||||
|
pagination: false, |
||||
|
rowKey: (record) => record.groupName, |
||||
|
columns: [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'name', |
||||
|
customRender: ({ index }) => index + 1, |
||||
|
width: 80, |
||||
|
align: 'center', |
||||
|
}, |
||||
|
{ |
||||
|
title: '分组名称', |
||||
|
dataIndex: 'groupName', |
||||
|
align: 'center', |
||||
|
}, |
||||
|
{ |
||||
|
title: '删除', |
||||
|
dataIndex: 'delete', |
||||
|
width: 80, |
||||
|
align: 'center', |
||||
|
customRender: ({ index }) => |
||||
|
createVNode(DeleteOutlined, { |
||||
|
style: { color: 'red', cursor: 'pointer' }, |
||||
|
onClick: () => deleteRow(index), |
||||
|
}), |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const btnClick = () => { |
||||
|
visible.value = false; |
||||
|
NsMessage.success('操作成功'); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.drawerContainer { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
</style> |
||||
@ -1,7 +1,21 @@ |
|||||
<template> |
<template> |
||||
<ns-view-list-table v-bind="tableConfig" /> |
<editDrawer ref="editDrawerRef" /> |
||||
|
<editGroup ref="editGroupRef" /> |
||||
|
<editFormula ref="editFormulaRef" /> |
||||
|
<ns-view-list-table v-bind="config" /> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { tableConfig } from './config'; |
import { createVNode, onMounted, ref } from 'vue'; |
||||
|
import { tableConfig, treeConfig } from './config'; |
||||
|
import { useParams } from '/nerv-lib/use'; |
||||
|
import editDrawer from './edit.vue'; |
||||
|
import editGroup from './editGroup.vue'; |
||||
|
import editFormula from './editFormula.vue'; |
||||
|
|
||||
|
const { getParams } = useParams(); |
||||
|
const editDrawerRef = ref(); |
||||
|
const editGroupRef = ref(); |
||||
|
const editFormulaRef = ref(); |
||||
|
const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef); |
||||
</script> |
</script> |
||||
<style lang="less" scoped></style> |
<style lang="less" scoped></style> |
||||
|
|||||
Loading…
Reference in new issue