adtec-core-package 0.2.8 → 0.3.0

package/src/components/Search/ElSearch.vue

@@ -1,132 +1,149 @@
-<template>
-  <el-flex
-    @keypress="keypress"
-    :height="height"
-    style="background: #ffffff; /*border-radius: 4px;*/ padding: 15px 10px 15px 15px;"
-  >
-    <el-flex style="overflow: hidden">
-      <div ref="ref_content" style="width: 100%; overflow: hidden" :style="{ height: height }">
-        <div ref="ref_div">
-          <slot></slot>
-        </div>
-      </div>
-    </el-flex>
-
-    <el-flex
-      width="240px"
-      justify="flex-end"
-      align="flex-start"
-      style="padding-top: 30px"
-    >
-      <el-button @click="reset">重置</el-button>
-      <el-button type="primary" @click="search" :class="getRouteName + '_search'">查询</el-button>
-      <el-button type="text" @click="retract" v-show="is_retract">
-        <el-icon
-          ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
-            v-show="retractval === '收起'" /></el-icon
-        >{{ retractval }}</el-button
-      >
-    </el-flex>
-  </el-flex>
-</template>
-<script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
-import { useWindowSize } from '@vueuse/core'
-import { useRouter } from 'vue-router'
-import ElFlex from '../ElFlex/ElFlex.vue'
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
-
-const router = useRouter()
-const getRouteName = computed(() => {
-  return router.currentRoute.value.name as string
-})
-const ref_content = ref()
-const retractval = ref('展开')
-const height = ref('95px')
-const is_retract = ref(false)
-const ref_div = ref()
-const windowContent = useWindowSize()
-const collapsed = inject<boolean>('collapsed')
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-expect-error
-watch(collapsed, () => {
-  calculation()
-})
-watch(windowContent.width, () => {
-  calculation()
-})
-const calculation = () => {
-  setTimeout(() => {
-    if (!(ref_div.value.offsetHeight > 95)) {
-      if (ref_div.value.offsetHeight !== 0) {
-        is_retract.value = false
-        height.value = ref_div.value.offsetHeight + 15 + 'px'
-        retractval.value = '收起'
-      } else {
-        calculation()
-      }
-    } else {
-      is_retract.value = true
-      height.value = '95px'
-      retractval.value = '展开'
-    }
-  }, 100)
-}
-watch(windowContent.height, () => {
-  calculation()
-})
-const retract = () => {
-  if (height.value === '95px') {
-    height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
-    retractval.value = '收起'
-  } else {
-    height.value = '95px'
-    retractval.value = '展开'
-  }
-}
-const reset = () => {
-  emit('reset')
-}
-const search = () => {
-  emit('search')
-}
-const keypress = () => {
-  // if (e.key === 'Enter') {
-  //   emit('search')
-  // }
-}
-const emit = defineEmits<{
-  (event: 'reset'): void
-  (event: 'search'): void
-}>()
-onMounted(() => {
-  nextTick(() => {
-    if (!(ref_content.value.children[0].scrollHeight > 95)) {
-      is_retract.value = false
-      height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
-      retractval.value = '收起'
-    } else {
-      is_retract.value = true
-      height.value = '95px'
-      retractval.value = '展开'
-    }
-  })
-})
-
-// onKeyStroke(['d', 'D', 'ArrowRight'], () => {
-//   translateX.value += 10
-// }, { dedupe: true })
-</script>
-<style scoped lang="scss">
-.elementSelect {
-  border: 2px dashed #1a67f8 !important;
-}
-
-.demo-form-inline .el-input {
-  --el-input-width: 220px;
-}
-
-.demo-form-inline .el-select {
-  --el-select-width: 220px;
-}
-</style>
+<template>
+  <el-flex
+    @keypress="keypress"
+    :height="height"
+    style="background: #ffffff; /*border-radius: 4px;*/ padding: 15px 10px 15px 15px;"
+  >
+    <el-flex style="overflow: hidden">
+      <div ref="ref_content" style="width: 100%; overflow: hidden" :style="{ height: height }">
+        <div ref="ref_div">
+          <slot></slot>
+        </div>
+      </div>
+    </el-flex>
+    <el-flex
+      width="240px"
+      justify="flex-end"
+      align="flex-start"
+      style="padding-top: 30px"
+    >
+      <el-button @click="reset">重置</el-button>
+      <el-button type="primary" @click="search" :class="getRouteName + '_search'">查询</el-button>
+      <el-button type="text" @click="retract" v-show="is_retract">
+        <el-icon
+        ><ArrowDown v-show="retractval === '展开'" /><ArrowUp
+          v-show="retractval === '收起'" /></el-icon
+        >{{ retractval }}</el-button
+      >
+    </el-flex>
+  </el-flex>
+</template>
+<script setup lang="ts">
+import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { useRouter } from 'vue-router'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import ElFlex from '../ElFlex/ElFlex.vue'
+const router = useRouter()
+const getRouteName = computed(() => {
+  return router.currentRoute.value.name as string
+})
+const ref_content = ref()
+const retractval = ref('展开')
+const height = ref('95px')
+const is_retract = ref(false)
+const ref_div = ref()
+const windowContent = useWindowSize()
+const collapsed = inject<boolean>('collapsed')
+const collapsedSearch=ref<boolean|undefined>(false)
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-expect-error
+watch(collapsed, () => {
+  collapsedSearch.value = collapsed
+})
+watch(collapsedSearch, () => {
+  calculation()
+})
+watch(windowContent.width, () => {
+  calculation()
+})
+const calculation = () => {
+  nextTick(()=>{
+    setTimeout(() => {
+      if(ref_div.value.children.length>0) {
+        if (!(ref_div.value.children[0].offsetHeight > 95)) {
+          if (ref_div.value.children[0].offsetHeight !== 0) {
+            is_retract.value = false
+            height.value = ref_div.value.children[0].offsetHeight + 15 + 'px'
+            retractval.value = '收起'
+          } else {
+            calculation()
+          }
+        }else if(ref_div.value.children[0].offsetHeight<=95){
+          is_retract.value = false
+        }
+        else {
+          is_retract.value = true
+          height.value = '95px'
+          retractval.value = '展开'
+        }
+      }
+    }, 200)
+  })
+}
+watch(windowContent.height, () => {
+  calculation()
+})
+const retract = () => {
+  if (height.value === '95px') {
+    height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
+    retractval.value = '收起'
+  } else {
+    height.value = '95px'
+    retractval.value = '展开'
+  }
+}
+const reset = () => {
+  emit('reset')
+}
+const search = () => {
+  emit('search')
+}
+const keypress = () => {
+  // if (e.key === 'Enter') {
+  //   emit('search')
+  // }
+}
+const emit = defineEmits<{
+  (event: 'reset'): void
+  (event: 'search'): void
+}>()
+onMounted(() => {
+  collapsedSearch.value = collapsed
+  //@ts-ignore
+  window.$wujie?.bus.$on("collapsedChangeBus", (val:boolean) => {
+    collapsedSearch.value=val
+  });
+  nextTick(() => {
+    if (!(ref_content.value.children[0].scrollHeight > 95)) {
+      is_retract.value = false
+      height.value = ref_content.value.children[0].scrollHeight + 15 + 'px'
+      retractval.value = '收起'
+    } else {
+      is_retract.value = true
+      height.value = '95px'
+      retractval.value = '展开'
+    }
+  })
+})
+onUnmounted(()=>{
+  //@ts-ignore
+  window.$wujie?.bus.$off("collapsedChangeBus")
+})
+// onKeyStroke(['d', 'D', 'ArrowRight'], () => {
+//   translateX.value += 10
+// }, { dedupe: true })
+</script>
+<style scoped lang="scss">
+.elementSelect {
+  border: 2px dashed #1a67f8 !important;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>