feat: 分组管理

hx-ai-intelligent/src/view/equipmentManage/group/config.ts

@@ -41,7 +41,8 @@ const doWnload = (url) => {
 };
 
 const mockData = ref(data.listData);
-export const tableConfig = {
+export const tableConfig = (el, elGroup, elFormula) => {
+  return {
     title: '设备台账',
     // api: '/carbon_emission/device/getDeviceList',
     value: mockData.value,
@@ -51,18 +52,14 @@ export const tableConfig = {
         return Promise.resolve(data);
       },
     },
-  rowSelection: () => {
+
-    return {
-      columnWidth: 30,
-    };
-  },
     headerActions: [
       {
         label: '编辑',
         name: 'groupEdit',
         type: 'primary',
         handle: (a, b) => {
-        console.log(a, b);
+          el.value.toggle();
         },
       },
       {
@@ -120,11 +117,17 @@ export const tableConfig = {
         label: '批量分组',
         name: 'groupTemDownload',
         type: 'primary',
+        handle: () => {
+          elGroup.value.toggle();
+        },
       },
       {
         label: '公式编辑',
         name: 'groupTemDownload',
         type: 'primary',
+        handle: () => {
+          elFormula.value.toggle();
+        },
       },
     ],
     columns: tableKeyMap,
@@ -207,3 +210,13 @@ export const tableConfig = {
     // pagination: { pageSizeOptions: false },
     rowKey: 'id',
   };
+};
+
+export const treeConfig = {
+  defaultExpandAll: true,
+  defaultSelectedKeys: ['A008'],
+  resultField: 'insertData',
+  api: () => {
+    return Promise.resolve(data);
+  },
+};

hx-ai-intelligent/src/view/equipmentManage/group/edit.vue

@@ -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>

hx-ai-intelligent/src/view/equipmentManage/group/editFormula.vue

@@ -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>

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>

hx-ai-intelligent/src/view/equipmentManage/group/index.vue

@@ -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>

hx-ai-intelligent/src/view/equipmentManage/group/mock.json

@@ -39,6 +39,38 @@
       ]
     }
   ],
+  "insertData":[   
+    {
+      "title": "北京公司",
+      "key": "A001"
+    },
+    {
+      "title": "广州公司",
+      "key": "A002"
+    },
+    {
+      "title": "南京公司",
+      "key": "A004"
+    },
+    {
+      "title": "上海公司",
+      "key": "A008",
+      "children": [
+        {
+          "title": "上海长宁",
+          "key": "A009"
+        },
+        {
+          "title": "上海徐汇",
+          "key": "A010"
+        },
+        {
+          "title": "上海浦东",
+          "key": "A011"
+        }
+      ]
+    }
+],
   "listData":[
     {
       "id": "d4",
@@ -84,7 +116,6 @@
       "devicePointList": null,
       "insertUser": null
     }
-  
   ]
   
 }

lib/component/drawer/drawer.vue

@@ -6,22 +6,27 @@
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
     <template #footer>
-      <a-button>取消</a-button>
+      <a-space>
+        <a-button v-if="cancel" @click="cancel">取消</a-button>
+        <a-button type="primary" @click="ok">确定</a-button>
+      </a-space>
     </template>
   </a-drawer>
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, toRefs } from 'vue';
+  import { computed, defineComponent, getCurrentInstance, toRefs } from 'vue';
   import { drawerProps } from 'ant-design-vue/es/drawer';
 
   export default defineComponent({
     name: 'NsDrawer',
     props: {
       ...drawerProps(),
+      ok: Function,
+      cancel: Function,
     },
     setup(props, { attrs, emit, slots }) {
-      console.log(props, slots);
+      console.log(props, getCurrentInstance());
 
       const getBindValue = computed(() => ({
         ...attrs,

lib/component/form/form/child-form.vue

@@ -110,7 +110,7 @@
     font-size: 16px;
     font-weight: bold;
     line-height: 24px;
-    padding: 32px 0 24px 0;
+    padding: 16px 0;
   }
   .ns-child-form-divider {
     margin: 8px 0 0 0;

lib/component/form/form/form-item.vue

@@ -99,7 +99,7 @@
 
       const formItemProps = computed(() => {
         const {
-          schema: { field, rules, label, component, autoLink, formItemProps, extra },
+          schema: { field, rules, label, component, autoLink, formItemProps, extra, style },
         } = props;
         const tableComponent = ['nsTable'];
         let nsClass = '';
@@ -111,6 +111,7 @@
           label: label,
           autoLink: autoLink || true,
           extra: extra,
+          style,
           ...formItemProps,
           ...validateRef.value,
         };

lib/component/form/form/form.d.ts

@@ -1,5 +1,3 @@
-
-
 import type { RuleObject } from 'ant-design-vue/es/form/interface';
 declare global {
   type Rule = RuleObject & {
@@ -33,5 +31,7 @@ declare global {
     class?: String; //添加额外样式
     autoSubmit: Boolean; //是否操作后提交表单
     format: Function;
+    extra: string;
+    style: Object;
   }
 }

lib/component/table/table.vue

@@ -332,7 +332,7 @@
               tableState.selectedRows = selectedRows;
             },
           },
-          rowSelection,
+          isFunction(rowSelection) ? rowSelection(tableState) : rowSelection,
         );
       });
 
@@ -392,6 +392,8 @@
             }
             return total;
           }
+          console.log('current', (current >= 0 ? current : 0) + props.pageFieldOffset);
+
           return {
             showQuickJumper: true,
             showLessItems: true,

lib/component/tree/tree-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <ns-tree v-if="treeData.length" v-bind="getBindValue">
+  <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
     <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
@@ -20,6 +20,7 @@
     resultField?: string;
     defaultExpandAll?: boolean;
     blockNode?: boolean;
+    defaultSelectedKeys?: Array<string>;
   }
   defineOptions({
     name: 'NsTreeApi',
@@ -31,6 +32,7 @@
     transform: (data) => data,
   });
   const treeData = ref<TreeDataItem[]>([]);
+  const selectedKeys = ref(props.defaultSelectedKeys || []);
   const { httpRequest } = useApi();
   const requestConfig: AxiosRequestConfig = { method: 'get' };
   const route = useRoute();
@@ -55,6 +57,8 @@
     }).then((res) => {
       let data = [];
       data = get(res, resultField);
+      console.log('sdfasfasf', res);
+
       treeData.value = transform(data);
     });
   };

lib/saas/config/table.config.ts

@@ -5,7 +5,7 @@ export const tableConfig = {
   listField: 'data.records', // 数据集合
   totalField: 'data.total', // 数据总数
 
-  pageFieldOffset: 0, //前端页码1开始，后端0 偏移量 1
+  pageFieldOffset: 1, //前端页码1开始，后端0 偏移量 1
   pageSizeOptions: ['10', '20', '40'], // 分页设置种类
   defaultPageSize: 10, // 默认每页数量
   paramsPageSizeField: 'pageSize',