@yxhl/specter-pui-vtk 1.0.75 → 1.0.76

package/src/components/assembly/VtkSearch.vue

@@ -1,226 +1,231 @@
-<template>
-  <div class="search">
-    <VMenu
-      v-model="menu"
-      @update:model-value="obtain"
-      location="bottom end"
-      origin="top end"
-      offset="12"
-      :close-on-content-click="false"
-    >
-      <template v-slot:activator="{ props }">
-        <VTextField
-          v-model="queryParam.condition"
-          :placeholder="$attrs.placeholder || '请输入查询内容'"
-          :style="$attrs.styles"
-          class="box"
-          density="compact"
-          variant="outlined"
-          hide-details
-          @click:append="search"
-          @keyup.enter="search"
-          @click:clear="(queryParam.condition = ''), search()"
-          clearable
-        >
-          <template v-slot:append-inner>
-            <VBadge
-              dot
-              :content="initialIndex"
-              :model-value="initialIndex > 0"
-              color="error"
-              class="advanced-badge"
-            >
-              <span
-                v-bind="props"
-                class="text-blue vtk-cursor-pointer d-inline-flex align-center text-body-2"
-              >
-                高级
-              </span>
-            </VBadge>
-          </template>
-        </VTextField>
-      </template>
-
-      <VCard class="search-panel">
-        <VCardTitle class="pr-3 d-flex justify-space-between align-center pb-5">
-          <span>高级搜索</span>
-          <VBtn class="mx-0" variant="text" icon @click="close" size="small">
-            <VIcon>mdi-close</VIcon>
-          </VBtn>
-        </VCardTitle>
-
-        <VCardText class="search-panel__content" :style="contentStyle">
-          <slot :query-param="queryParam"></slot>
-        </VCardText>
-
-        <VCardActions class="pt-0 px-4 pb-3">
-          <slot name="actions"></slot>
-          <VSpacer />
-          <VBtn @click="search" variant="flat" color="primary">
-            <VIcon class="mr-1">mdi-magnify</VIcon>搜索
-          </VBtn>
-          <VBtn @click="handleResetClick" variant="flat" color="error">
-            <VIcon class="mr-1">mdi-sync</VIcon>重置
-          </VBtn>
-        </VCardActions>
-      </VCard>
-    </VMenu>
-  </div>
-</template>
-
-<script setup>
-import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
-
-defineOptions({
-  name: "VtkSearch"
-});
-
-const props = defineProps({
-  value: {
-    type: Object,
-    default: () => ({})
-  },
-  contentMaxHeight: {
-    type: [Number, String],
-    default: 360
-  }
-});
-
-const emit = defineEmits(['update:value', 'search', 'reset']);
-const instance = getCurrentInstance();
-
-const user = ref({});
-const menu = ref(false);
-const queryParam = ref({ ...props.value });
-const initialQueryParam = ref({ ...props.value });
-
-const initialIndex = computed(() => {
-  return Object.entries(queryParam.value).filter(([key, val]) => {
-    if (key === 'condition') return false;
-    const initVal = initialQueryParam.value[key];
-    if (Array.isArray(val) && Array.isArray(initVal)) {
-      return JSON.stringify(val) !== JSON.stringify(initVal);
-    }
-    return val !== initVal;
-  }).length;
-});
-
-const contentStyle = computed(() => {
-  const value = props.contentMaxHeight;
-  const maxHeight = typeof value === 'number' ? `${value}px` : value;
-
-  return {
-    maxHeight,
-  };
-});
-
-watch(
-  () => props.value,
-  (newVal) => {
-    queryParam.value = { ...newVal };
-  }
-);
-
-onMounted(() => {
-  user.value = JSON.parse(localStorage.getItem("_mis_acis_users") || "{}");
-});
-
-const obtain = () => {};
-
-const close = () => {
-  menu.value = false;
-  obtain();
-};
-
-const filterNull = (obj) => {
-  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== null && v !== undefined));
-};
-
-const search = () => {
-  close();
-  emit('update:value', filterNull(queryParam.value));
-  emit("search");
-};
-
-const reset = () => {
-  queryParam.value = {
-    ...initialQueryParam.value,
-    condition: ''
-  };
-  emit('update:value', filterNull(queryParam.value));
-  emit("search");
-  menu.value = false;
-};
-
-const handleResetClick = () => {
-  const hasParentResetHandler = Boolean(instance?.vnode.props?.onReset);
-
-  if (hasParentResetHandler) {
-    emit('reset', { ...queryParam.value });
-    return;
-  }
-
-  reset();
-};
-
-defineExpose({ search, reset });
-
-</script>
-
-<style lang="scss" scoped>
-.search {
-  position: relative;
-  min-width: 380px;
-  min-height: 40px;
-}
-
-.box {
-  min-width: 380px;
-  min-height: 40px;
-}
-
-.search-panel {
-  width: 380px;
-  margin-right: -16px;
-  display: flex;
-  flex-direction: column;
-}
-
-.search-panel__content {
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: rgb(var(--v-theme-primary)) transparent;
-}
-
-.search-panel__content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.search-panel__content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.search-panel__content::-webkit-scrollbar-thumb {
-  background: rgba(var(--v-theme-primary), 0.8);
-  border-radius: 999px;
-}
-
-.search-panel__content::-webkit-scrollbar-thumb:hover {
-  background: rgb(var(--v-theme-primary));
-}
-
-:deep(.box .v-field__append-inner) {
-  cursor: pointer;
-  padding-left: 16px !important;
-  padding-right: 4px !important;
-  border-left: 1px #cccccc88 solid;
-  min-width: 50px;
-  display: flex;
-  align-items: center;
-}
-
-:deep(.advanced-badge .v-badge__badge) {
-  transform: translate(10px, -2px);
-}
-</style>
+<template>
+  <div class="search">
+    <VMenu
+      v-model="menu"
+      @update:model-value="obtain"
+      location="bottom end"
+      origin="top end"
+      offset="12"
+      :close-on-content-click="false"
+    >
+      <template v-slot:activator="{ props }">
+        <VTextField
+          v-model="queryParam.condition"
+          :placeholder="$attrs.placeholder || '请输入查询内容'"
+          :style="$attrs.styles"
+          class="box"
+          density="compact"
+          variant="outlined"
+          hide-details
+          @click:append="search"
+          @keyup.enter="search"
+          @click:clear="(queryParam.condition = ''), search()"
+          clearable
+        >
+          <template v-slot:append-inner>
+            <VBadge
+              dot
+              :content="initialIndex"
+              :model-value="initialIndex > 0"
+              color="error"
+              class="advanced-badge"
+            >
+              <span
+                v-bind="props"
+                class="text-blue vtk-cursor-pointer d-inline-flex align-center text-body-2"
+              >
+                高级
+              </span>
+            </VBadge>
+          </template>
+        </VTextField>
+      </template>
+
+      <VCard class="search-panel">
+        <VCardTitle class="pr-3 d-flex justify-space-between align-center pb-5">
+          <span>高级搜索</span>
+          <VBtn class="mx-0" variant="text" icon @click="close" size="small">
+            <VIcon>mdi-close</VIcon>
+          </VBtn>
+        </VCardTitle>
+
+        <VCardText class="search-panel__body">
+          <div class="search-panel__content" :style="contentStyle">
+            <slot :query-param="queryParam"></slot>
+          </div>
+        </VCardText>
+
+        <VCardActions class="pt-0 px-4 pb-3">
+          <slot name="actions"></slot>
+          <VSpacer />
+          <VBtn @click="search" variant="flat" color="primary">
+            <VIcon class="mr-1">mdi-magnify</VIcon>搜索
+          </VBtn>
+          <VBtn @click="handleResetClick" variant="flat" color="error">
+            <VIcon class="mr-1">mdi-sync</VIcon>重置
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VMenu>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
+
+defineOptions({
+  name: "VtkSearch"
+});
+
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({})
+  },
+  contentMinHeight: {
+    type: [Number, String],
+    default: 0
+  },
+  contentMaxHeight: {
+    type: [Number, String],
+    default: 360
+  }
+});
+
+const emit = defineEmits(['update:value', 'search', 'reset']);
+const instance = getCurrentInstance();
+
+const user = ref({});
+const menu = ref(false);
+const queryParam = ref({ ...props.value });
+const initialQueryParam = ref({ ...props.value });
+
+const initialIndex = computed(() => {
+  return Object.entries(queryParam.value).filter(([key, val]) => {
+    if (key === 'condition') return false;
+    const initVal = initialQueryParam.value[key];
+    if (Array.isArray(val) && Array.isArray(initVal)) {
+      return JSON.stringify(val) !== JSON.stringify(initVal);
+    }
+    return val !== initVal;
+  }).length;
+});
+
+const contentStyle = computed(() => {
+  const minValue = props.contentMinHeight;
+  const maxValue = props.contentMaxHeight;
+  const minHeight = typeof minValue === 'number' ? `${minValue}px` : minValue;
+  const maxHeight = typeof maxValue === 'number' ? `${maxValue}px` : maxValue;
+
+  return {
+    ...(minValue ? { minHeight } : {}),
+    maxHeight,
+  };
+});
+
+watch(
+  () => props.value,
+  (newVal) => {
+    queryParam.value = { ...newVal };
+  }
+);
+
+onMounted(() => {
+  user.value = JSON.parse(localStorage.getItem("_mis_acis_users") || "{}");
+});
+
+const obtain = () => {};
+
+const close = () => {
+  menu.value = false;
+  obtain();
+};
+
+const filterNull = (obj) => {
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== null && v !== undefined));
+};
+
+const search = () => {
+  close();
+  emit('update:value', filterNull(queryParam.value));
+  emit("search");
+};
+
+const reset = () => {
+  queryParam.value = {
+    ...initialQueryParam.value,
+    condition: ''
+  };
+  emit('update:value', filterNull(queryParam.value));
+  emit("search");
+  menu.value = false;
+};
+
+const handleResetClick = () => {
+  const hasParentResetHandler = Boolean(instance?.vnode.props?.onReset);
+
+  if (hasParentResetHandler) {
+    emit('reset', { ...queryParam.value });
+    return;
+  }
+
+  reset();
+};
+
+defineExpose({ search, reset });
+
+</script>
+
+<style lang="scss" scoped>
+.search {
+  position: relative;
+  min-width: 380px;
+  min-height: 40px;
+}
+
+.box {
+  min-width: 380px;
+  min-height: 40px;
+}
+
+.search-panel {
+  width: 380px;
+  margin-right: -16px;
+  overflow: visible;
+}
+
+.search-panel__body {
+  overflow: visible;
+}
+
+.search-panel__content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-color: rgb(var(--v-theme-primary)) transparent;
+  scrollbar-width: thin;
+}
+
+
+.search-panel__content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.search-panel__content::-webkit-scrollbar-thumb {
+  background: rgb(var(--v-theme-primary));
+}
+
+:deep(.box .v-field__append-inner) {
+  cursor: pointer;
+  padding-left: 16px !important;
+  padding-right: 4px !important;
+  border-left: 1px #cccccc88 solid;
+  min-width: 50px;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.advanced-badge .v-badge__badge) {
+  transform: translate(10px, -2px);
+}
+</style>