@yxhl/specter-pui-vtk 1.0.99 → 1.0.101

package/src/components/assembly/VtkSearch.vue

@@ -23,20 +23,28 @@
           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"
+            <VIcon
+              class="search-icon"
+              size="small"
+              @click.stop="search"
+            >mdi-magnify</VIcon>
+            <span class="search-divider"></span>
+            <span class="search-advanced">
+              <VBadge
+                dot
+                :content="initialIndex"
+                :model-value="initialIndex > 0"
+                color="error"
+                class="advanced-badge"
               >
-                高级
-              </span>
-            </VBadge>
+                <span
+                  v-bind="props"
+                  class="pl-1 text-blue vtk-cursor-pointer d-inline-flex align-center text-body-2"
+                >
+                  高级
+                </span>
+              </VBadge>
+            </span>
           </template>
         </VTextField>
       </template>
@@ -93,45 +101,45 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:value', 'search', 'reset']);
-const instance = getCurrentInstance();
-
-const user = ref({});
-const menu = ref(false);
-
-const cloneValue = (val) => {
-  if (Array.isArray(val)) return [...val];
-  if (val && typeof val === 'object') return { ...val };
-  return val;
-};
-
-const cloneQueryParam = (source = {}) => {
-  return Object.fromEntries(Object.entries(source || {}).map(([key, val]) => [key, cloneValue(val)]));
-};
-
-const isSameValue = (a, b) => {
-  if (
-    Array.isArray(a) ||
-    Array.isArray(b) ||
-    (a && typeof a === 'object') ||
-    (b && typeof b === 'object')
-  ) {
-    return JSON.stringify(a) === JSON.stringify(b);
-  }
-
-  return a === b;
-};
-
-const queryParam = ref(cloneQueryParam(props.value));
-const initialQueryParam = ref(cloneQueryParam(props.value));
-const externalQueryParam = ref(cloneQueryParam(props.value));
-
-const initialIndex = computed(() => {
-  return Object.entries(queryParam.value).filter(([key, val]) => {
-    if (key === 'condition') return false;
-    const initVal = initialQueryParam.value[key];
-    return !isSameValue(val, initVal);
-  }).length;
-});
+const instance = getCurrentInstance();
+
+const user = ref({});
+const menu = ref(false);
+
+const cloneValue = (val) => {
+  if (Array.isArray(val)) return [...val];
+  if (val && typeof val === 'object') return { ...val };
+  return val;
+};
+
+const cloneQueryParam = (source = {}) => {
+  return Object.fromEntries(Object.entries(source || {}).map(([key, val]) => [key, cloneValue(val)]));
+};
+
+const isSameValue = (a, b) => {
+  if (
+    Array.isArray(a) ||
+    Array.isArray(b) ||
+    (a && typeof a === 'object') ||
+    (b && typeof b === 'object')
+  ) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
+
+  return a === b;
+};
+
+const queryParam = ref(cloneQueryParam(props.value));
+const initialQueryParam = ref(cloneQueryParam(props.value));
+const externalQueryParam = ref(cloneQueryParam(props.value));
+
+const initialIndex = computed(() => {
+  return Object.entries(queryParam.value).filter(([key, val]) => {
+    if (key === 'condition') return false;
+    const initVal = initialQueryParam.value[key];
+    return !isSameValue(val, initVal);
+  }).length;
+});
 
 const contentStyle = computed(() => {
   const minValue = props.contentMinHeight;
@@ -145,29 +153,29 @@ const contentStyle = computed(() => {
   };
 });
 
-watch(
-  () => props.value,
-  (newVal = {}) => {
-    const nextExternalQueryParam = cloneQueryParam(newVal);
-    const nextQueryParam = { ...queryParam.value };
-
-    Object.entries(nextExternalQueryParam).forEach(([key, val]) => {
-      if (!isSameValue(val, externalQueryParam.value[key])) {
-        nextQueryParam[key] = cloneValue(val);
-      }
-    });
-
-    Object.keys(externalQueryParam.value).forEach((key) => {
-      if (!(key in nextExternalQueryParam)) {
-        delete nextQueryParam[key];
-      }
-    });
-
-    queryParam.value = nextQueryParam;
-    externalQueryParam.value = nextExternalQueryParam;
-  },
-  { deep: true }
-);
+watch(
+  () => props.value,
+  (newVal = {}) => {
+    const nextExternalQueryParam = cloneQueryParam(newVal);
+    const nextQueryParam = { ...queryParam.value };
+
+    Object.entries(nextExternalQueryParam).forEach(([key, val]) => {
+      if (!isSameValue(val, externalQueryParam.value[key])) {
+        nextQueryParam[key] = cloneValue(val);
+      }
+    });
+
+    Object.keys(externalQueryParam.value).forEach((key) => {
+      if (!(key in nextExternalQueryParam)) {
+        delete nextQueryParam[key];
+      }
+    });
+
+    queryParam.value = nextQueryParam;
+    externalQueryParam.value = nextExternalQueryParam;
+  },
+  { deep: true }
+);
 
 onMounted(() => {
   user.value = JSON.parse(localStorage.getItem("_mis_acis_users") || "{}");
@@ -256,9 +264,7 @@ defineExpose({ search, reset });
 
 :deep(.box .v-field__append-inner) {
   cursor: pointer;
-  padding-left: 16px !important;
-  padding-right: 4px !important;
-  border-left: 1px #cccccc88 solid;
+  padding-left: 4px !important;
   min-width: 50px;
   display: flex;
   align-items: center;
@@ -267,4 +273,27 @@ defineExpose({ search, reset });
 :deep(.advanced-badge .v-badge__badge) {
   transform: translate(10px, -2px);
 }
+
+.search-advanced {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.search-divider {
+  width: 1px;
+  align-self: stretch;
+  margin: 0 8px 0 6px;
+  background: #cccccc88;
+  flex-shrink: 0;
+}
+
+.search-icon {
+  cursor: pointer;
+  margin-right: 4px;
+  transition: color 0.2s;
+}
+
+.search-icon:hover {
+  color: rgb(var(--v-theme-primary));
+}
 </style>