wip: rename directory

@@ -4,32 +4,30 @@
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { Tooltip } from 'ant-design-vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  enum MoreEvent {
-    EDIT = 'edit',
-    COPY = 'copy',
-    DELETE = 'delete',
-  }
+  import { MoreActionEvent } from '../../config/config';
+
+  const emit = defineEmits(['action']);
 
   const dropMenuList: DropMenu[] = [
     {
       text: '编辑组件',
-      event: MoreEvent.EDIT,
+      event: MoreActionEvent.EDIT,
       icon: 'ant-design:edit-outlined',
     },
     {
       text: '复制组件',
-      event: MoreEvent.COPY,
+      event: MoreActionEvent.COPY,
       icon: 'ant-design:copy-outlined',
     },
     {
       text: '删除组件',
-      event: MoreEvent.DELETE,
+      event: MoreActionEvent.DELETE,
       icon: 'ant-design:delete-outlined',
     },
   ];
 
   const handleMenuEvent = (event: DropMenu) => {
-    console.log(event);
+    emit('action', event);
   };
 </script>
 

+export enum MoreActionEvent {
+  EDIT = 'edit',
+  COPY = 'copy',
+  DELETE = 'delete',
+}

+<script lang="ts" setup>
+  import { CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import { Tooltip, Button } from 'ant-design-vue';
+  import { useForm } from '/@/components/Form';
+  import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  import { ref, unref } from 'vue';
+
+  const dataSource = ref([{ id: 1 }]);
+
+  const [basicRegister, basicMethod] = useForm({
+    schemas: basicSchema,
+    showActionButtonGroup: false,
+    labelWidth: 96,
+  });
+
+  const [dataSourceRegister, dataSourceMethod] = useForm({
+    schemas: dataSourceSchema,
+    showActionButtonGroup: false,
+    layout: 'inline',
+    labelCol: {
+      span: 0,
+    },
+    baseColProps: {
+      span: 4,
+    },
+  });
+
+  const handleCopy = (data: Recordable) => {
+    unref(dataSource).push({
+      id: data.id + 1,
+    });
+  };
+
+  const handleDelete = (data: Recordable) => {
+    const index = unref(dataSource).findIndex((item) => item.id === data.id);
+
+    ~index && unref(dataSource).splice(index, 1);
+  };
+
+  const handleAdd = () => {
+    unref(dataSource).push({
+      id: Math.random(),
+    });
+  };
+</script>
+
+<template>
+  <section>
+    <h3 class="w-24 text-right pr-2 my-4">基础信息</h3>
+    <div class="w-3/4">
+      <BasicForm @register="basicRegister" />
+    </div>
+    <h3 class="w-24 text-right pr-2 my-4">选择数据源</h3>
+    <div v-for="item in dataSource" :key="item.id" class="flex">
+      <div class="w-24 text-right">选择设备</div>
+      <div class="pl-2 flex-auto">
+        <BasicForm @register="dataSourceRegister" />
+      </div>
+      <div class="flex justify-center gap-3 w-12">
+        <Tooltip title="复制">
+          <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg" />
+        </Tooltip>
+        <Tooltip title="删除">
+          <DeleteOutlined @click="handleDelete(item)" class="cursor-pointer text-lg" />
+        </Tooltip>
+      </div>
+    </div>
+    <div class="text-center">
+      <Button type="primary" @click="handleAdd">添加数据源</Button>
+    </div>
+  </section>
+</template>

+<script lang="ts" setup>
+  import { Tabs } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import BasicConfiguration from './BasicConfiguration.vue';
+  import VisualConfiguration from './VisualConfiguration.vue';
+  import VisualOptions from './VisualOptions.vue';
+  const activeKey = ref('1');
+</script>
+
+<template>
+  <BasicModal v-bind="$attrs" title="自定义组件" width="70%">
+    <section>
+      <Tabs type="card" v-model:activeKey="activeKey">
+        <Tabs.TabPane key="1" tab="基础配置">
+          <BasicConfiguration />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="2" tab="可视化配置">
+          <VisualConfiguration />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="3" tab="可视化选项">
+          <VisualOptions />
+        </Tabs.TabPane>
+      </Tabs>
+    </section>
+  </BasicModal>
+</template>

+<script lang="ts" setup>
+  import {} from 'ant-design-vue';
+</script>
+
+<template>
+  <section> 可视化配置 </section>
+</template>

+<script lang="ts" setup></script>
+
+<template>
+  <section> 可视化选项 </section>
+</template>

+import { FormSchema } from '/@/components/Form';
+
+export const basicSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '组件名称',
+    component: 'Input',
+  },
+  {
+    field: 'remake',
+    label: '组件备注',
+    component: 'InputTextArea',
+  },
+];
+
+export const dataSourceSchema: FormSchema[] = [
+  {
+    field: 'org',
+    component: 'TreeSelect',
+    label: '组织',
+    colProps: { span: 6 },
+    componentProps: {
+      placeholder: '请选择组织',
+    },
+  },
+  {
+    field: 'device',
+    component: 'Select',
+    label: '设备',
+    colProps: { span: 5 },
+    componentProps: {
+      placeholder: '请选择设备',
+    },
+  },
+  {
+    field: 'attr',
+    component: 'Select',
+    label: '属性',
+    colProps: { span: 5 },
+    componentProps: {
+      placeholder: '请选择属性',
+    },
+  },
+  {
+    field: 'deviceRename',
+    component: 'Input',
+    label: '设备',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '设备重命名',
+    },
+  },
+  {
+    field: 'attrRename',
+    component: 'Input',
+    label: '属性',
+    colProps: { span: 4 },
+    componentProps: {
+      placeholder: '属性重命名',
+    },
+  },
+];

@@ -2,9 +2,13 @@
   import { Button, PageHeader } from 'ant-design-vue';
   import { GridItem, GridLayout, Layout } from 'vue3-grid-layout';
   import { nextTick, ref } from 'vue';
-  import WidgetWrapper from '../cpns/WidgetWrapper/WidgetWrapper.vue';
-  import BaseWidgetHeader from '../cpns/WidgetHeader/BaseWidgetHeader.vue';
-  import InformationPanel from '../cpns/InformationPanel.vue';
+  import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
+  import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.vue';
+  import InformationPanel from '../components/InformationPanel.vue';
+  import { DropMenu } from '/@/components/Dropdown';
+  import DataBindModal from './components/DataBindModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { MoreActionEvent } from '../config/config';
   const handleBack = () => {};
 
   interface ChartAttr {
@@ -133,6 +137,12 @@
     if (el && (el as unknown as { update: Fn }).update)
       widgetEl.set(record.i, (el as unknown as { update: Fn }).update);
   };
+
+  const [register, { openModal }] = useModal();
+
+  const handleMoreAction = (event: DropMenu) => {
+    if (event.event === MoreActionEvent.EDIT) openModal(true);
+  };
 </script>
 
 <template>
@@ -184,7 +194,7 @@
           >
             <template #header>
               <!-- <div>header</div> -->
-              <BaseWidgetHeader />
+              <BaseWidgetHeader @action="handleMoreAction" />
             </template>
             <template #controls="{ record, add }">
               <InformationPanel />
@@ -197,6 +207,7 @@
       </GridLayout>
     </section>
   </section>
+  <DataBindModal @register="register" />
 </template>
 
 <style>

@@ -8,6 +8,7 @@
   import { useRouter } from 'vue-router';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
+  import { MoreActionEvent } from './config/config';
   const ListItem = List.Item;
 
   const router = useRouter();
@@ -42,20 +43,16 @@
     clipboardRef.value = '123';
     unref(clipboardRef) && createMessage.success('复制成功');
   };
-  enum MoreEvent {
-    EDIT = 'edit',
-    DELETE = 'DELETE',
-  }
 
   const dropMenuList: DropMenu[] = [
     {
       text: '编辑',
-      event: MoreEvent.EDIT,
+      event: MoreActionEvent.EDIT,
       icon: 'ant-design:edit-outlined',
     },
     {
       text: '删除',
-      event: MoreEvent.DELETE,
+      event: MoreActionEvent.DELETE,
       icon: 'ant-design:delete-outlined',
     },
   ];