wip: data board component

@@ -42,12 +42,12 @@ async function genreateIcon() {
 
   const iconNameList = Array.from(string.matchAll(groupReg)).map(([string]) => {
     const [, , name] = string.match(getIdReg) || [];
-    return name;
+    return name.replace('iconfont-', '');
   });
 
   await fs.writeFileSync(
     join(output, outputFileName),
-    `export default ${JSON.stringify({ icons: iconNameList }, null, 2)}`
+    `export default ${JSON.stringify({ prefix: 'iconfont', icons: iconNameList }, null, 2)}`
   );
 
   global.console.log(

@@ -32,6 +32,7 @@ import ApiRadioGroup from './components/ApiRadioGroup.vue';
 import JAddInput from './externalCompns/components/JAddInput.vue';
 import { JEasyCron } from './externalCompns/components/JEasyCron';
 import ColorPicker from './components/ColorPicker.vue';
+import IconDrawer from './components/IconDrawer.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -71,6 +72,7 @@ componentMap.set('Upload', BasicUpload);
 componentMap.set('JAddInput', JAddInput);
 componentMap.set('JEasyCron', JEasyCron);
 componentMap.set('ColorPicker', ColorPicker);
+componentMap.set('IconDrawer', IconDrawer);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<script lang="ts" setup>
+  import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
+  import IconData from '/@/components/Icon/data/iconfont.data';
+  import { SvgIcon } from '/@/components/Icon';
+  import { computed } from '@vue/reactivity';
+  import { onMounted, unref } from 'vue';
+
+  const props = defineProps<{
+    value?: string;
+    color?: string;
+  }>();
+  const emit = defineEmits(['update:value']);
+  const iconList = IconData.icons;
+  const [register, { openDrawer, closeDrawer }] = useDrawer();
+  const getIcon = computed(() => {
+    return props.value || 'temperature';
+  });
+
+  const getColor = computed(() => {
+    return props.color || '#377DFF';
+  });
+
+  const handleOpenDrawer = () => {
+    openDrawer();
+  };
+
+  const handleClick = (icon: string) => {
+    emit('update:value', icon);
+    closeDrawer();
+  };
+
+  onMounted(() => {
+    emit('update:value', unref(getIcon));
+  });
+</script>
+
+<template>
+  <SvgIcon
+    :name="getIcon"
+    :icon="getIcon"
+    prefix="iconfont"
+    class="cursor-pointer !w-6 !h-6"
+    :style="{ color: getColor }"
+    @click="handleOpenDrawer"
+  />
+  <BasicDrawer @register="register" v-bind="$attrs" title="选择图标" width="300px">
+    <section class="flex flex-wrap justify-start">
+      <SvgIcon
+        class="!h-6 cursor-pointer mb-3"
+        style="flex: 0 0 25%"
+        v-for="item in iconList"
+        :key="item"
+        :icon="item"
+        :name="item"
+        prefix="iconfont"
+        @click="handleClick(item)"
+      />
+    </section>
+  </BasicDrawer>
+</template>
+
+<style scoped></style>

@@ -113,4 +113,5 @@ export type ComponentType =
   | 'Slider'
   | 'JAddInput'
   | 'Rate'
-  | 'ColorPicker';
+  | 'ColorPicker'
+  | 'IconDrawer';

 export default {
-  icons: [
-    'iconfont-offline',
-    'iconfont-online',
-    'iconfont-wind-speed',
-    'iconfont-temperature',
-    'iconfont-CO2',
-    'iconfont-wind-speed-1',
-  ],
+  prefix: 'iconfont',
+  icons: ['offline', 'online', 'wind-speed', 'temperature', 'CO2', 'wind-speed-1'],
 };

@@ -3,3 +3,5 @@ export enum MoreActionEvent {
   COPY = 'copy',
   DELETE = 'delete',
 }
+
+// export enum

@@ -7,8 +7,11 @@
   import { ref, unref } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
+  import { buildUUID } from '/@/utils/uuid';
 
-  const dataSource = ref([{ id: 1 }]);
+  const props = defineProps();
+
+  const dataSource = ref([{ id: 'string' }]);
 
   const [basicRegister, basicMethod] = useForm({
     schemas: basicSchema,
@@ -48,7 +51,7 @@
 
   const handleAdd = () => {
     unref(dataSource).push({
-      id: Math.random(),
+      id: buildUUID(),
     });
   };
 </script>
@@ -70,7 +73,7 @@
           <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg" />
         </Tooltip>
         <Tooltip title="设置">
-          <SettingOutlined @click="handleSetting(item)" class="cursor-pointer text-lg" />
+          <SettingOutlined @click="handleSetting()" class="cursor-pointer text-lg" />
         </Tooltip>
         <Tooltip title="删除">
           <DeleteOutlined @click="handleDelete(item)" class="cursor-pointer text-lg" />

 <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 VisualOptionsModal from './VisualOptionsModal.vue';
-  const activeKey = ref('1');
+  import { ref } from 'vue';
+
+  const componentId = ref('');
+
+  interface SettingOption {
+    color?: string;
+  }
+
+  const handleSettingUpdate = (value: SettingOption) => {};
 </script>
 
 <template>
   <BasicModal v-bind="$attrs" title="自定义组件" width="70%">
     <section>
-      <Tabs type="card" v-model:activeKey="activeKey">
+      <Tabs type="card">
         <Tabs.TabPane key="1" tab="基础配置">
-          <BasicConfiguration />
+          <BasicConfiguration @change="handleSettingUpdate" />
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="可视化配置">
-          <VisualConfiguration />
-        </Tabs.TabPane>
-        <Tabs.TabPane key="3" tab="可视化选项">
-          <VisualOptionsModal />
+          <VisualConfiguration v-model:value="componentId" />
         </Tabs.TabPane>
       </Tabs>
     </section>

 <script lang="ts" setup>
   import { Tabs, List } from 'ant-design-vue';
-  import { ref } from 'vue';
   import VisualWidgetSelect from './VisualWidgetSelect.vue';
   import TextComponent from '../../components/TextComponent/TextComponent.vue';
   import { textComponentConfig } from '../../components/TextComponent/config';
-  const checkedId = ref('1');
+  const props = defineProps<{
+    value: string;
+  }>();
+  const emit = defineEmits(['update:value']);
 
   const handleCheck = (checked: string) => {
-    checkedId.value = checked;
+    emit('update:value', checked);
   };
 </script>
 
@@ -15,11 +17,14 @@
   <section>
     <Tabs>
       <Tabs.TabPane key="1" tab="文本组件">
-        <List :grid="{ gutter: 10, column: 3 }" :data-source="textComponentConfig">
+        <List
+          :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }"
+          :data-source="textComponentConfig"
+        >
           <template #renderItem="{ item }">
             <List.Item>
               <VisualWidgetSelect
-                :checked-id="checkedId"
+                :checked-id="props.value"
                 :control-id="item.id"
                 @change="handleCheck"
               >

 <script lang="ts" setup>
-  import { modeOne } from '../config/visualOptions';
+  import { modeOne, modeTwo, modeThree, modeFour } from '../config/visualOptions';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+
   const [registerForm, method] = useForm({
-    schemas: modeOne,
+    schemas: modeTwo,
     showActionButtonGroup: false,
     labelWidth: 120,
     baseColProps: {
@@ -11,17 +12,21 @@
     },
   });
 
-  const [registerModal, { closeModal }] = useModalInner();
+  const [register, { closeModal }] = useModalInner();
 
   const handleGetValue = () => {
     const value = method.getFieldsValue();
     console.log(value);
   };
+
+  const handleClose = () => {
+    handleGetValue();
+    closeModal();
+  };
 </script>
 
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" title="" width="60%">
+  <BasicModal v-bind="$attrs" @register="register" @ok="handleClose" title="选项" width="60%">
     <BasicForm @register="registerForm" />
-    <button @click="handleGetValue">啊按钮</button>
   </BasicModal>
 </template>

+import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
 
 export const basicSchema: FormSchema[] = [
@@ -16,11 +17,19 @@ export const basicSchema: FormSchema[] = [
 export const dataSourceSchema: FormSchema[] = [
   {
     field: 'org',
-    component: 'TreeSelect',
+    component: 'ApiTreeSelect',
     label: '组织',
     colProps: { span: 6 },
-    componentProps: {
-      placeholder: '请选择组织',
+    componentProps() {
+      return {
+        placeholder: '请选择组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          return data;
+        },
+
+        onChange() {},
+      };
     },
   },
   {

@@ -29,7 +29,7 @@ export const modeOne: FormSchema[] = [
 
 export const modeTwo: FormSchema[] = [
   {
-    field: visualOptionField.UNIT,
+    field: visualOptionField.FONT_COLOR,
     label: '数值字体颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
@@ -51,7 +51,14 @@ export const modeTwo: FormSchema[] = [
   {
     field: visualOptionField.ICON,
     label: '图标',
-    component: 'Input',
+    component: 'IconDrawer',
+    changeEvent: 'update:value',
+    componentProps({ formModel }) {
+      const color = formModel[visualOptionField.ICON_COLOR];
+      return {
+        color,
+      };
+    },
   },
 ];
 

@@ -180,7 +180,7 @@
           :w="item.w"
           :h="item.h"
           :i="item.i"
-          style="display: flex; flex-wrap: wrap"
+          :style="{ display: 'flex', flexWrap: 'wrap' }"
           class="grid-item-layout"
           @resized="itemResized"
           @resize="itemResized"
@@ -189,7 +189,7 @@
         >
           <WidgetWrapper
             :key="item.i"
-            :ref="(el) => setComponentRef(el, item)"
+            :ref="(el: Element) => setComponentRef(el, item)"
             :data-source="item.chart"
           >
             <template #header>

@@ -58,7 +58,7 @@
   ];
 
   const handleMenuEvent = (event: DropMenu) => {
-    if (event.event === MoreEvent.EDIT) {
+    if (event.event === MoreActionEvent.EDIT) {
       handleEdit();
     }
   };