feat: 分组管理

2024-05-29 16:29:22 +08:00
parent f7ebb4bd60
commit 4614c8699f
14 changed files with 584 additions and 157 deletions
--- a/hx-ai-intelligent/src/view/equipmentManage/group/editGroup.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/editGroup.vue
@@ -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>