xuziqiang
4 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> |
|||
<ns-view-list-table v-bind="tableConfig" /> |
|||
<editDrawer ref="editDrawerRef" /> |
|||
<editGroup ref="editGroupRef" /> |
|||
<editFormula ref="editFormulaRef" /> |
|||
<ns-view-list-table v-bind="config" /> |
|||
</template> |
|||
<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> |
|||
<style lang="less" scoped></style> |
|||
|
|||
Loading…
Reference in new issue