feat：自定义指令

README.md

@@ -1,3 +1,25 @@
 #things-ui
 
 
+
+## MicroComponents
+
+对组件进行封装，有了更加简洁的使用方式
+
+### SelectTsx
+
+[^对a-select组件进行封装]: 
+
+props：
+
+| modelValue | string | 绑定的值      |
+| ---------- | ------ | ------------- |
+| request    | string | 快捷请求的api |
+
+request：
+
+| name  | select的label |
+| ----- | ------------- |
+| value | select的value |
+| key   | select的key   |
+

public/index.html

@@ -22,7 +22,8 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
 
-    <div id="app"></div>
+    <div id="app">
+    </div>
     <!-- built files will be auto injected -->
   </body>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>\ -->

src/App.vue

@@ -6,6 +6,7 @@
       }"
     >
       <router-view/>
+      <button ></button>
     </a-config-provider>
 </template>
 <script setup lang="ts" >

src/components/FormPro/components/indext.tsx

@@ -44,8 +44,6 @@ export const SelectTsx = defineComponent({
       value: any,
       key: string
     }[]) => {
-      console.log('select-tsx:', r)
-
       list.value = r
     })
 

src/components/MicroComponents/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons-vue'
 
 /* 此代码导出一个名为“ReloadIconTsx”的 Vue
@@ -83,3 +83,44 @@ export const IconTsx = defineComponent({
     )
   }
 })
+
+export const SelectTsx = defineComponent({
+  name: 'select-tsx',
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    request: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, context) {
+    const list = ref<{
+      name: string,
+      value: any,
+      key: string
+    }[]>([])
+
+    props.request().then((r: {
+      name: string,
+      value: any,
+      key: string
+    }[]) => {
+      list.value = r
+    })
+
+    const onInput = (value: string) => context.emit('update:modelValue', value)
+
+    return () => (
+      <a-select value={props.modelValue} onChange={(value: string) => onInput(value)}>
+       {
+        list.value.map(item => <a-select-option key={item.key} value={item.value}>{item.name}</a-select-option>)
+       }
+      </a-select>
+    )
+  }
+})

src/directives/index.ts

@@ -0,0 +1,18 @@
+import { Directive, onUnmounted, DirectiveBinding } from 'vue'
+
+export const keyboard: Directive = {
+  mounted (el, binding: DirectiveBinding) {
+    const handleKeyPress = (event) => {
+      if (event.key === 'Enter') {
+        binding.value() // 执行绑定的方法
+      }
+    }
+
+    el.addEventListener('keypress', handleKeyPress)
+
+    // 在组件卸载时移除事件监听器
+    onUnmounted(() => {
+      el.removeEventListener('keypress', handleKeyPress)
+    })
+  }
+}

src/layout/components/Sidebar/index.vue

@@ -57,8 +57,6 @@ watch(
   () => route.path,
   () => {
     sidebarRoute.value = router.getRoutes().find(item => item.path === route.matched[0].path)?.children
-    console.log('route.matched.', route.matched)
-    console.log(openKeys)
     selectedKeys.value = [route.path]
     openKeys.value = [route.matched[1].path]
   },

src/layout/layout.vue

@@ -1,9 +1,6 @@
 <template>
-  <!-- style="height: 100vh"  -->
     <a-layout class="a-layout" >
-
       <SiderBar />
-      <!-- style="overflow: hidden;overflow-y: scroll; " -->
       <a-layout >
         <Navbar />
         <span style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >

src/main.ts

@@ -9,6 +9,7 @@ import { assets } from '@/utils/static'
 import cronAnt from '@vue-js-cron/ant'
 import '@vue-js-cron/ant/dist/ant.css'
 import 'normalize.css'
+import { keyboard } from '@/directives/index'
 
 const pinia = createPinia()
 
@@ -18,5 +19,6 @@ createApp(App)
   .use(antd)
   .use(UsePro)
   .use(cronAnt)
+  .directive('keyboard', keyboard)
   .provide('useStaticImg', assets)
   .mount('#app')

src/pages/Iot/device/index.vue

@@ -21,8 +21,15 @@
     <a-row justify="space-between" >
       <a-col :span="20"  >
         <a-form layout="inline" >
-          <a-form-item label="设备名称" >
-            <a-input v-model:value="searchState.deviceStatus" placeholder="请输入设备名称"/>
+          <a-form-item label="设备状态"  >
+            <a-select  allowClear style="width: 176px;"  v-model:value="searchState.deviceStatus" placeholder="请输入设备状态">
+              <a-select-option
+                v-for="item in DeviceContriller.deviceStatus"
+                :key="item.key"
+                :value="item.key"
+              >{{item.name}}</a-select-option>
+            </a-select>
+            <!-- <a-input v-model:value="searchState.deviceStatus" placeholder="请输入设备状态"/> -->
           </a-form-item>
           <a-form-item style="width: 400px;">
             <a-input-group compact >

src/pages/Iot/task/manage.vue

@@ -1,7 +1,7 @@
 <template>
   <StatisticsTemplate
-        title="规则统计"
-        :list="state.TaskCount"
+      title="规则统计"
+      :list="state.TaskCount"
   />
 <a-card style="margin-top: 20px;" >
   <a-row justify="space-between" >
@@ -12,6 +12,7 @@
           </a-form-item>
           <a-form-item  label='任务状态' >
             <a-select
+              allowClear
               style="width: 170px"
               v-model:value="queryParamsState.status"
             >
@@ -240,8 +241,7 @@ const useForm = Form.useForm
 
 const statusList = [
   { key: true, label: '开启' },
-  { key: false, label: '关闭' },
-  { key: true, label: '' }
+  { key: false, label: '关闭' }
 ]
 
 const queryParamsState = reactive({

src/shims-vue.d.ts

@@ -1,6 +1,15 @@
 /* eslint-disable */
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent, DirectiveBinding  } from 'vue'
+  interface CustomDirectiveOptions {
+    'v-enter': (el: HTMLElement, binding: DirectiveBinding) => void;
+  }
+
+  interface GlobalComponents {
+    [key: string]: CustomDirectiveOptions;
+  }
+
   const component: DefineComponent<{}, {}, any>
+
   export default component
 }