146 lines
3.7 KiB
Vue
146 lines
3.7 KiB
Vue
|
<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>
|