Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

.env.develop

@@ -1 +1,2 @@
+ENV=develop
 VITE_APP_BASE_API=/api

.env.production

@@ -1 +1,2 @@
+ENV=production
 VITE_APP_BASE_API=/api

plugin/optimize.ts

@@ -0,0 +1,49 @@
+import fs from 'fs'
+import path from 'path'
+
+const rootPath = path.resolve(__dirname, '../')
+
+function optimizeAntdComponents(moduleName: string): string[] {
+  const moduleESPath = `${moduleName}/es`
+  const nodeModulePath = `./node_modules/${moduleESPath}`
+  const includes: string[] = [moduleESPath]
+
+  const folders = fs.readdirSync(
+    path.resolve(rootPath, nodeModulePath)
+  )
+
+  folders.map(name => {
+    const folderName = path.resolve(
+      rootPath,
+      nodeModulePath,
+      name
+    )
+    let stat = fs.lstatSync(folderName)
+    if (stat.isDirectory()) {
+      let styleFolder = path.resolve(folderName, 'style')
+      if (fs.existsSync((styleFolder))) {
+        let _stat = fs.lstatSync(styleFolder)
+        if (_stat.isDirectory()) {
+          includes.push(`${moduleESPath}/${name}/style`)
+        }
+      }
+    }
+  })
+
+  return includes
+}
+
+export function optimizeDeps() {
+  return {
+    name: "optimizeDeps",
+    configResolved: async (config) => {
+      const components = [
+          ...optimizeAntdComponents('ant-design-vue'),
+        ...optimizeAntdComponents('jetlinks-ui-components')
+      ]
+      let concat = config.optimizeDeps.include.concat(components)
+      config.optimizeDeps.include = Array.from(new Set(concat))
+      console.log(config.optimizeDeps.include)
+    }
+  }
+}

src/App.vue

@@ -1,8 +1,13 @@
 <template>
-  <router-view />
+  <ConfigProvider :locale='zhCN'>
+    <router-view />
+  </ConfigProvider>
 </template>
 
 <script setup lang="ts">
+import { ConfigProvider } from 'jetlinks-ui-components'
+import zhCN from 'jetlinks-ui-components/es/locale/zh_CN';
+
 </script>
 
 <style scoped>

src/components/BadgeStatus/color.ts

@@ -0,0 +1,17 @@
+
+const color = {
+  'processing': '64, 169, 255',
+  'error': '247, 79, 70',
+  'success': '74, 234, 220',
+  'warning': '250, 178, 71',
+  'default': '63, 73, 96'
+}
+export const getHexColor = (code: string, pe: number = 0.3) => {
+  const _color = color[code] || color.default
+  if (code === 'default') {
+    pe = 0.1
+  }
+  return `rgba(${_color}, ${pe})`
+}
+
+export default color

src/components/BadgeStatus/index.vue

@@ -1,12 +1,13 @@
 <template>
     <j-badge
-        :status="statusNames ? statusNames[status] : 'default'"
+        :color="_color"
         :text="text"
     ></j-badge>
 </template>
 
 <script setup lang="ts">
 // import { StatusColorEnum } from '@/utils/consts.ts';
+import { getHexColor } from './color'
 const props = defineProps({
     text: {
         type: String,
@@ -26,6 +27,18 @@ const props = defineProps({
      *   0: 'error'
      * }
      */
-    statusNames: { type: Object },
+    statusNames: {
+      type: Object,
+      default: () => ({
+        'success': 'success',
+        'warning': 'warning',
+        'error': 'error',
+        'default': 'default',
+      })
+    },
 });
+
+const _color = computed(() => {
+  return getHexColor(props.statusNames[props.status], 1)
+})
 </script>

src/components/CardBox/index.vue

@@ -29,7 +29,9 @@
                 <div
                     v-if="showStatus"
                     class="card-state"
-                    :class="statusNames ? statusNames[status] : ''"
+                    :style='{
+                      backgroundColor: getHexColor(statusNames[status])
+                    }'
                 >
                     <div class="card-state-content">
                         <BadgeStatus
@@ -68,9 +70,10 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name='CardBox'>
 import BadgeStatus from '@/components/BadgeStatus/index.vue';
-import type { ActionsType } from '@/components/Table/index.vue';
+import { getHexColor } from '../BadgeStatus/color'
+import type { ActionsType } from '@/components/Table';
 import { PropType } from 'vue';
 
 type EmitProps = {

src/components/Search/Search.vue

@@ -5,6 +5,7 @@
     :request='saveSearchHistory'
     :historyRequest='getSearchHistory'
     :columns='columns'
+    :class='props.class'
     @search='searchSubmit'
   />
 </template> 

src/components/Upload/index.vue

@@ -54,7 +54,7 @@
     </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name='JProUpload'>
 import { message, UploadChangeParam, UploadProps } from 'ant-design-vue';
 import { FILE_UPLOAD } from '@/api/comm';
 import { TOKEN_KEY } from '@/utils/variable';

src/components/ValueItem/index.vue

@@ -1,6 +1,6 @@
 <!-- 参数类型输入组件 -->
 <template>
-    <div class="wrapper">
+    <div class="value-item-warp">
         <j-select
             v-if="typeMap.get(itemType) === 'select'"
             v-model:value="myValue"
@@ -92,7 +92,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name='ValueItem'>
 import { PropType } from 'vue';
 import { UploadChangeParam, UploadFile } from 'ant-design-vue';
 import { DefaultOptionType } from 'ant-design-vue/lib/select';
@@ -102,6 +102,7 @@ import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
 import { ItemData, ITypes } from './types';
 import { FILE_UPLOAD } from '@/api/comm';
+import { Upload } from 'jetlinks-ui-components'
 
 type Emits = {
     (e: 'update:modelValue', data: string | number | boolean): void;

src/components/index.ts

@@ -8,7 +8,7 @@ import CardBox from './CardBox/index.vue';
 import Search from './Search'
 import NormalUpload from './NormalUpload/index.vue'
 import FileFormat from './FileFormat/index.vue'
-import JProUpload from './JUpload/index.vue'
+import JProUpload from './Upload/index.vue'
 import { BasicLayoutPage, BlankLayoutPage } from './Layout'
 import { PageContainer, AIcon } from 'jetlinks-ui-components'
 import Ellipsis from './Ellipsis/index.vue'

src/main.ts

@@ -4,13 +4,14 @@ import store from './store'
 import components from './components'
 import router from './router'
 import './style.less'
-// import jComponents from 'jetlinks-ui-components'
+
-// import 'jetlinks-ui-components/es/style.js'
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+dayjs.locale('zh-cn');
 
 const app = createApp(App)
 
 app.use(store)
   .use(router)
   .use(components)
-  // .use(jComponents)
   .mount('#app')

src/views/device/Instance/Detail/ChildDevice/EdgeMap/PatchMapping.vue

@@ -178,6 +178,8 @@ const handleClick = async () => {
                         _emits('save');
                     }
                 }
+            } else {
+                message.error('暂无对应属性的映射');
             }
         }
     }

src/views/device/Instance/Detail/ChildDevice/EdgeMap/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-spin :spinning="loading" v-if="_metadata">
+    <a-spin :spinning="loading" v-if="_metadata.length">
         <a-card :bordered="false">
             <template #title>
                 <TitleComponent data="点位映射"></TitleComponent>
@@ -7,7 +7,7 @@
             <template #extra>
                 <a-space>
                     <a-button @click="showModal">批量映射</a-button>
-                    <a-button type="primary" @click="onSave">保存</a-button>
+                    <a-button type="primary" @click="onSave">保存并应用</a-button>
                 </a-space>
             </template>
             <a-form ref="formRef" :model="modelRef">
@@ -114,7 +114,7 @@
         />
     </a-spin>
     <a-card v-else>
-        <JEmpty description="暂无数据，请配置物模型" style="margin: 10% 0" />
+    <JEmpty description="暂无数据，请配置物模型" style="margin: 10% 0" />
     </a-card>
 </template>
 
@@ -174,7 +174,7 @@ const form = ref();
 const filterOption = (input: string, option: any) => {
     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
-const  props = defineProps(['productList']);
+const props = defineProps(['productList']);
 const _emit = defineEmits(['close']);
 const instanceStore = useInstanceStore();
 let _metadata = ref();
@@ -203,31 +203,33 @@ const getChannel = async () => {
 
 const handleSearch = async () => {
     loading.value = true;
-    modelRef.dataSource = _metadata;
     getChannel();
-    if (_metadata && _metadata.length) {
+    modelRef.dataSource = _metadata.value;
-        const resp: any = await getEdgeMap(instanceStore.current?.orgId || '', {
+    console.log(modelRef.dataSource);
-            deviceId: instanceStore.current.id,
+    // if (_metadata.value && _metadata.value.length) {
-            query: {},
+    //     console.log(1234);
-        }).catch(() => {
+    //     const resp: any = await getEdgeMap(instanceStore.current?.orgId || '', {
-            modelRef.dataSource = _metadata;
+    //         deviceId: instanceStore.current.id,
-            loading.value = false;
+    //         query: {},
-        });
+    //     }).catch(() => {
-        if (resp.status === 200) {
+    //         modelRef.dataSource = _metadata;
-            const array = resp.result?.[0].reduce((x: any, y: any) => {
+    //         loading.value = false;
-                const metadataId = _metadata.find(
+    //     });
-                    (item: any) => item.metadataId === y.metadataId,
+    //     if (resp.status === 200) {
-                );
+    //         const array = resp.result?.[0].reduce((x: any, y: any) => {
-                if (metadataId) {
+    //             const metadataId = _metadata.find(
-                    Object.assign(metadataId, y);
+    //                 (item: any) => item.metadataId === y.metadataId,
-                } else {
+    //             );
-                    x.push(y);
+    //             if (metadataId) {
-                }
+    //                 Object.assign(metadataId, y);
-                return x;
+    //             } else {
-            }, _metadata);
+    //                 x.push(y);
-            modelRef.dataSource = array;
+    //             }
-        }
+    //             return x;
-    }
+    //         }, _metadata);
+    //         modelRef.dataSource = array;
+    //     }
+    // }
     loading.value = false;
 };
 
@@ -251,17 +253,13 @@ const onPatchBind = () => {
     visible.value = false;
     _emit('close');
 };
-
-onMounted(() => {
-    handleSearch();
-});
-
 watchEffect(() => {
     if (instanceStore.current?.metadata) {
         _metadata.value = instanceStore.current?.metadata;
     } else {
         _metadata.value = {};
     }
+    handleSearch();
 });
 const onSave = async () => {
     form.value = await validate();

src/views/device/Instance/Detail/ChildDevice/SaveChild/index.vue

@@ -70,9 +70,61 @@ const getProductList = async () => {
     });
     if (res.status === 200) {
         productList.value = res.result;
+        if (props.childData?.id) {
+            current.value.parentId = props.childData.id;
+            form.name = props.childData?.name;
+            form.productId = props.childData?.productId;
+            selectChange(form.productId);
+            if (current.value.metadata) {
+                const metadata = current.value.metadata;
+                if (metadata && metadata.length !== 0) {
+                    getEdgeMap(current.value.id, {
+                        deviceId: props.childData.id,
+                        query: {},
+                    }).then((res) => {
+                        if (res.status === 200) {
+                            // console.log(res.result)
+                            //合并物模型
+                            const array = res.result[0]?.reduce(
+                                (x: any, y: any) => {
+                                    const metadataId = metadata.find(
+                                        (item: any) =>
+                                            item.metadataId === y.metadataId,
+                                    );
+                                    if (metadataId) {
+                                        Object.assign(metadataId, y);
+                                    } else {
+                                        x.push(y);
+                                    }
+                                    return x;
+                                },
+                                metadata,
+                            );
+                            //删除物模型
+                            const items = array.filter(
+                                (item: any) => item.metadataName,
+                            );
+                            current.value.metadata = items;
+                            const delList = array
+                                .filter((a: any) => !a.metadataName)
+                                .map((b: any) => b.id);
+                            //删除后解绑
+                            if (delList && delList.length !== 0) {
+                                removeEdgeMap(current.value.id, {
+                                    deviceId: props.childData.id,
+                                    idList: [...delList],
+                                });
+                            }
+                        }
+                    });
+                }
+            }
+            visible.value = true;
+        } else {
+            current.value.parentId = '';
+        }
     }
 };
-getProductList();
 const selectChange = (e: any) => {
     if (e) {
         visible.value = true;
@@ -88,64 +140,8 @@ const selectChange = (e: any) => {
     );
     current.value.metadata = array;
 };
-watchEffect(() => {
+onMounted(() => {
-    if (props.childData?.id) {
+    getProductList();
-        current.value.parentId = props.childData.id;
-        form.name = props.childData?.name;
-        form.productId = props.childData?.productId;
-        if (props.childData.deriveMetadata) {
-            const metadata = JSON.parse(
-                props.childData?.deriveMetadata || {},
-            )?.properties?.map((item: any) => ({
-                metadataId: item.id,
-                metadataName: `${item.name}(${item.id})`,
-                metadataType: 'property',
-                name: item.name,
-            }));
-            if (metadata && metadata.length !== 0) {
-                getEdgeMap(current.value.id, {
-                    deviceId: props.childData.id,
-                    query: {},
-                }).then((res) => {
-                    if (res.status === 200) {
-                        // console.log(res.result)
-                        //合并物模型
-                        const array = res.result[0]?.reduce(
-                            (x: any, y: any) => {
-                                const metadataId = metadata.find(
-                                    (item: any) =>
-                                        item.metadataId === y.metadataId,
-                                );
-                                if (metadataId) {
-                                    Object.assign(metadataId, y);
-                                } else {
-                                    x.push(y);
-                                }
-                                return x;
-                            },
-                            metadata,
-                        );
-                        //删除物模型
-                        const items = array.filter(
-                            (item: any) => item.metadataName,
-                        );
-                        current.value.metadata = items;
-                        const delList = array
-                            .filter((a: any) => !a.metadataName)
-                            .map((b: any) => b.id);
-                        //删除后解绑
-                        if (delList && delList.length !== 0) {
-                            removeEdgeMap(current.value.id, {
-                                deviceId: props.childData.id,
-                                idList: [...delList],
-                            });
-                        }
-                    }
-                });
-            }
-        }
-        visible.value = true;
-    }
 });
 
 const validate = async () => {

src/views/device/Instance/Detail/ChildDevice/index.vue

@@ -3,7 +3,7 @@
         <SaveChild
             v-if="childVisible"
             @close-child-save="closeChildSave"
-            :childData="current"
+            :childData="_current"
         />
         <div v-else>
             <Search
@@ -43,7 +43,7 @@
                             "
                             hasPermission="device/Instance:update"
                             @click="
-                                current = {};
+                                _current = {};
                                 childVisible = true;
                             "
                             >新增并绑定</PermissionButton
@@ -123,7 +123,7 @@ import { usePermissionStore } from '@/store/permission';
 import SaveChild from './SaveChild/index.vue';
 
 const instanceStore = useInstanceStore();
-const { detail  } = storeToRefs(instanceStore);
+const { detail } = storeToRefs(instanceStore);
 const router = useRouter();
 const childVisible = ref(false);
 const permissionStore = usePermissionStore();
@@ -139,7 +139,7 @@ const childDeviceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
 const visible = ref<boolean>(false);
-const current = ref({});
+const _current = ref({});
 
 const columns = [
     {
@@ -252,7 +252,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
             },
             icon: 'EditOutlined',
             onClick: () => {
-                current.value = data;
+                _current.value = data;
                 childVisible.value = true;
             },
         },

src/views/device/Instance/Detail/EdgeMap/index.vue

@@ -202,6 +202,7 @@ const handleSearch = async () => {
         metadataType: 'property',
         name: item.name,
     }));
+    console.log(metadata);
     if (_metadata && _metadata.length) {
         const resp: any = await getEdgeMap(instanceStore.current?.parentId || '', {
             deviceId: instanceStore.current.id,

src/views/notice/Config/SyncUser/index.vue

@@ -34,65 +34,72 @@
                     <j-empty v-if="!deptTreeData.length" />
                 </j-col>
                 <j-col :span="20">
-                    <JProTable
+                    <j-button type="primary" @click="handleAutoBind">
+                        自动绑定
+                    </j-button>
+                    <JTable
                         ref="tableRef"
                         :columns="columns"
                         :dataSource="dataSource"
                         :loading="tableLoading"
-                        model="table"
+                        :pagination="{
-                        noPagination
+                            total: dataSource.length,
+                            current: current,
+                            pageSize: pageSize,
+                            pageSizeOptions: ['12', '24', '48', '96'],
+                            showSizeChanger: true,
+                            showTotal: (total: number, range: number) => `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`,
+                        }"
+                        @change="handleTableChange"
                     >
-                        <template #headerTitle>
+                        <template #bodyCell="{ column, record, index }">
-                            <j-button type="primary" @click="handleAutoBind">
+                            <template v-if="column.dataIndex === 'status'">
-                                自动绑定
+                                <j-space>
-                            </j-button>
+                                    <j-badge
-                        </template>
+                                        :status="record.status.value"
-                        <template #status="slotProps">
+                                        :text="record.status.text"
-                            <j-space>
+                                    ></j-badge>
-                                <j-badge
+                                </j-space>
-                                    :status="slotProps.status.value"
+                            </template>
-                                    :text="slotProps.status.text"
+                            <template v-if="column.dataIndex === 'action'">
-                                ></j-badge>
+                                <j-space :size="16">
-                            </j-space>
+                                    <j-tooltip
-                        </template>
+                                        v-for="i in getActions(record, 'table')"
-                        <template #action="slotProps">
+                                        :key="i.key"
-                            <j-space :size="16">
+                                        v-bind="i.tooltip"
-                                <j-tooltip
-                                    v-for="i in getActions(slotProps, 'table')"
-                                    :key="i.key"
-                                    v-bind="i.tooltip"
-                                >
-                                    <j-popconfirm
-                                        v-if="i.popConfirm"
-                                        v-bind="i.popConfirm"
-                                        :disabled="i.disabled"
                                     >
-                                        <j-button
+                                        <j-popconfirm
+                                            v-if="i.popConfirm"
+                                            v-bind="i.popConfirm"
                                             :disabled="i.disabled"
+                                        >
+                                            <j-button
+                                                :disabled="i.disabled"
+                                                style="padding: 0"
+                                                type="link"
+                                                ><AIcon :type="i.icon"
+                                            /></j-button>
+                                        </j-popconfirm>
+                                        <j-button
                                             style="padding: 0"
                                             type="link"
-                                            ><AIcon :type="i.icon"
+                                            v-else
-                                        /></j-button>
+                                            @click="
-                                    </j-popconfirm>
+                                                i.onClick && i.onClick(record)
-                                    <j-button
+                                            "
-                                        style="padding: 0"
+                                        >
-                                        type="link"
+                                            <j-button
-                                        v-else
+                                                :disabled="i.disabled"
-                                        @click="
+                                                style="padding: 0"
-                                            i.onClick && i.onClick(slotProps)
+                                                type="link"
-                                        "
+                                                ><AIcon :type="i.icon"
-                                    >
+                                            /></j-button>
-                                        <j-button
+                                        </j-button>
-                                            :disabled="i.disabled"
+                                    </j-tooltip>
-                                            style="padding: 0"
+                                </j-space>
-                                            type="link"
+                            </template>
-                                            ><AIcon :type="i.icon"
-                                        /></j-button>
-                                    </j-button>
-                                </j-tooltip>
-                            </j-space>
                         </template>
-                    </JProTable>
+                    </JTable>
                 </j-col>
             </j-row>
         </j-modal>
@@ -184,23 +191,10 @@ const getDepartment = async () => {
         );
     }
 
-    // deptTreeData.value = arrayToTree(_result, _result[0]?.parentId);
     deptTreeData.value = _result;
     deptId.value = _result[0]?.id;
 };
 
-/**
- * 扁平数据转树形结构
- */
-// const arrayToTree = (arr: any, pid: string | number) => {
-//     return arr
-//         .filter((item: any) => item.parentId === pid)
-//         .map((item: any) => ({
-//             ...item,
-//             children: arrayToTree(arr, item.id),
-//         }));
-// };
-
 /**
  * 部门点击
  */
@@ -230,6 +224,7 @@ const columns = [
     },
     {
         title: '操作',
+        dataIndex: 'action',
         key: 'action',
         scopedSlots: true,
     },
@@ -285,7 +280,7 @@ const handleAutoBind = () => {
                 thirdPartyUserId: i.thirdPartyUserId,
             };
         });
-    // console.log('arr: ', arr);
+
     configApi.dingTalkBindUser(arr, props.data.id).then(() => {
         message.success('操作成功');
         getTableData();
@@ -346,8 +341,8 @@ const dataSource = ref<any>([]);
 const tableLoading = ref(false);
 const getTableData = () => {
     tableLoading.value = true;
-    Promise.all<any>([getDeptUsers(), getBindUsers(), getAllUsers()]).then(
+    Promise.all<any>([getDeptUsers(), getBindUsers(), getAllUsers()])
-        (res) => {
+        .then((res) => {
             dataSource.value = [];
             const [deptUsers, bindUsers, unBindUsers] = res;
             (deptUsers || []).forEach((deptUser: any) => {
@@ -379,9 +374,20 @@ const getTableData = () => {
                 });
             });
             // console.log('dataSource.value: ', dataSource.value);
-        },
+        })
-    );
+        .finally(() => {
-    tableLoading.value = false;
+            tableLoading.value = false;
+        });
+};
+
+/**
+ * 前端分页
+ */
+const current = ref(1);
+const pageSize = ref(12);
+const handleTableChange = (pagination: any) => {
+    current.value = pagination.current;
+    pageSize.value = pagination.pageSize;
 };
 
 watch(
@@ -475,5 +481,8 @@ const handleCancel = () => {
 .model-body {
     height: 600px;
     overflow-y: auto;
+    &:deep(.ant-pagination-item) {
+        display: none;
+    }
 }
 </style>

src/views/rule-engine/Alarm/Configuration/index.vue

@@ -80,10 +80,6 @@
                         </template>
                         <template #actions="item">
                             <PermissionButton
-                                v-if="
-                                    item.key != 'tigger' ||
-                                    slotProps.sceneTriggerType == 'manual'
-                                "
                                 :disabled="item.disabled"
                                 :popConfirm="item.popConfirm"
                                 :tooltip="{ ...item.tootip }"
@@ -146,10 +142,6 @@
                             :key="i.key"
                         >
                             <PermissionButton
-                                v-if="
-                                    i.key != 'tigger' ||
-                                    slotProps.sceneTriggerType == 'manual'
-                                "
                                 :disabled="i.disabled"
                                 :popConfirm="i.popConfirm"
                                 :tooltip="{
@@ -439,7 +431,9 @@ const getActions = (
             icon: 'DeleteOutlined',
         },
     ];
-    return actions;
+    return actions.filter((item)=>
+        item.key != 'tigger' || data.sceneTriggerType == 'manual'
+    );
 };
 const add = () => {
     menuStory.jumpPage('rule-engine/Alarm/Configuration/Save');

src/views/rule-engine/Scene/Save/components/DropdownButton/Time.vue

@@ -1,12 +1,11 @@
 <template>
   <div class='dropdown-time-picker'>
     <j-time-picker
-      v-if='type === "time"'
+      v-if='!_type'
       open
-      class='manual-time-picker'
       v-model:value='myValue'
+      class='manual-time-picker'
       :format='myFormat'
-      :valueFormat='myFormat'
       :getPopupContainer='getPopupContainer'
       popupClassName='manual-time-picker-popup'
       @change='change'
@@ -17,7 +16,6 @@
       class='manual-time-picker'
       v-model:value='myValue'
       :format='myFormat'
-      :valueFormat='myFormat'
       :getPopupContainer='getPopupContainer'
       popupClassName='manual-time-picker-popup'
       @change='change'
@@ -26,7 +24,7 @@
 </template>
 
 <script setup lang='ts' name='DropdownTime'>
-import dayjs from 'dayjs'
+import dayjs, { Dayjs } from 'dayjs'
 
 type Emit = {
   (e: 'update:value', value: string) : void
@@ -44,23 +42,26 @@ const props = defineProps({
   },
   format: {
     type: String,
-    default: ''
+    default: undefined
   }
 })
 
 const emit = defineEmits<Emit>()
 const myFormat = props.format || ( props.type === 'time' ? 'HH:mm:ss' : 'YYYY-MM-DD HH:mm:ss')
-const myValue = ref(props.value || dayjs(new Date()).format(myFormat))
+const myValue = ref<Dayjs>(dayjs(props.value || new Date(), myFormat))
 
 const getPopupContainer = (trigger: HTMLElement) => {
   return trigger?.parentNode || document.body
 }
 
-const change = (e: string) => {
+const change = (e: Dayjs) => {
-  myValue.value = e
+  emit('update:value', e.format(myFormat))
-  emit('update:value', e)
+  emit('change', e.format(myFormat))
-  emit('change', e)
 }
+
+const _type = computed(() => {
+  return props.value?.includes('-')
+})
 </script>
 
 <style lang='less'>

src/views/rule-engine/Scene/Save/components/DropdownButton/util.ts

@@ -11,7 +11,7 @@ export const getComponent = (type: string): string => {
     case 'long':
     case 'float':
     case 'double':
-      return 'number'
+      return type
     case 'metric':
     case 'enum':
     case 'boolean':

src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue

@@ -28,7 +28,7 @@
                 @change='timeChange'
               />
               <DropdownMenus
-                v-if='["select","enum", "boolean"].includes(item.component)'
+                v-else-if='["select","enum", "boolean"].includes(item.component)'
                 :options='["metric", "upper"].includes(item.key) ?  metricOption : options'
                 @click='onSelect'
               />
@@ -54,7 +54,7 @@
               <ValueItem
                 v-else
                 v-model:modelValue='myValue'
-                :itemType='getComponent(item.component)'
+                :itemType='item.component'
                 :options='item.key === "upper" ?  metricOption : options'
                 @change='valueItemChange'
               />

src/vite-env.d.ts

@@ -1,6 +1,7 @@
 interface ImportMetaEnv {
     readonly VITE_APP_BASE_API: string;
     readonly VITE_APP_WS_URL: string;
+    readonly MODE: string;
 }
 
 interface ImportMeta {

tsconfig.json

@@ -21,6 +21,7 @@
       "layouts/*": ["./src/layouts/*"],
       "store/*": ["./src/store/*"],
       "style/*": ["./src/style/*"],
+      "jetlinks-ui-components/es": ["./node_modules/jetlinks-ui-components/es/*"]
     },
     "types": ["ant-design-vue/typings/global", "vite/client"],
     "suppressImplicitAnyIndexErrors": true

vite.config.ts

@@ -12,12 +12,13 @@ import * as path from 'path'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 // import { JetlinksVueResolver } from 'jetlinks-ui-components/lib/plugin/resolve'
 import { JetlinksVueResolver } from './plugin/jetlinks'
+import { optimizeDeps } from './plugin/optimize'
 import copy from 'rollup-plugin-copy';
 
-
 // https://vitejs.dev/config/
 export default defineConfig(({ mode}) => {
   const env: Partial<ImportMetaEnv> = loadEnv(mode, process.cwd());
+
   return {
       base: './',
       resolve: {
@@ -53,6 +54,7 @@ export default defineConfig(({ mode}) => {
           vue(),
           monacoEditorPlugin({}),
           vueJsx(),
+          optimizeDeps(),
           Components({
               resolvers: [JetlinksVueResolver({ importStyle: 'less' }), VueAmapResolver()],
               directoryAsNamespace: true
@@ -110,6 +112,9 @@ export default defineConfig(({ mode}) => {
                   javascriptEnabled: true,
               }
           }
+      },
+      optimizeDeps: {
+          include: ['pinia', 'vue-router', 'axios', 'lodash-es', '@vueuse/core', 'echarts', 'dayjs'],
       }
   }
 })