20260810172235

code/fms/fms-vue/src/views/dashboard/index.vue

@@ -1,8 +1,80 @@
 <script setup lang="ts">
+import { ref } from "vue"
+import FmsSelect from "@/components/FmsSelect.vue"
+import FmsAutoComplete from "@/components/FmsAutoComplete.vue"
+
+// FmsSelect demo
+const localeCode = ref("")
+const localeLabel = ref("")
+const localeRecord = ref<Record<string, any> | null>(null)
+
+function onLocaleChange(record: Record<string, any> | null) {
+  localeRecord.value = record
+}
+
+// FmsAutoComplete demo
+const autoValue = ref("")
+const autoRecord = ref<Record<string, any> | null>(null)
+
+function onAutoChange(record: Record<string, any> | null) {
+  autoRecord.value = record
+}
 </script>
 
 <template>
-  <div class="flex h-full items-center justify-center">
+  <div class="flex h-full flex-col items-center gap-8 p-8">
     <h1 class="text-2xl font-bold text-muted-foreground">Dashboard</h1>
+
+    <div class="grid w-full max-w-2xl gap-8">
+      <!-- FmsSelect demo -->
+      <div class="rounded-lg border p-6 space-y-3">
+        <h2 class="text-sm font-semibold">FmsSelect（多语言类型）</h2>
+        <p class="text-xs text-muted-foreground">
+          v-model + v-model:label 双绑定，支持远程搜索、滚动分页、清除、未匹配值回显
+        </p>
+        <div class="w-64">
+          <FmsSelect
+            v-model="localeCode"
+            v-model:label="localeLabel"
+            view-name="b_i18n_type"
+            label-key="b_name"
+            value-key="b_code"
+            order-by="b_code ASC"
+            :page-size="10"
+            allow-clear
+            placeholder="选择语言类型..."
+            @change="onLocaleChange"
+          />
+        </div>
+        <div class="text-xs text-muted-foreground space-y-0.5">
+          <div>value（b_code）：<code class="text-foreground">{{ localeCode || '-' }}</code></div>
+          <div>label（b_name）：<code class="text-foreground">{{ localeLabel || '-' }}</code></div>
+          <div>record：<code class="text-foreground">{{ localeRecord || '-' }}</code></div>
+        </div>
+      </div>
+
+      <!-- FmsAutoComplete demo -->
+      <div class="rounded-lg border p-6 space-y-3">
+        <h2 class="text-sm font-semibold">FmsAutoComplete（语言类型搜索）</h2>
+        <p class="text-xs text-muted-foreground">
+          单 v-model 绑定文本，回车/选中后拿到完整记录
+        </p>
+        <div class="w-64">
+          <FmsAutoComplete
+            v-model="autoValue"
+            view-name="b_i18n_type"
+            label-key="b_name"
+            value-key="b_code"
+            order-by="b_code ASC"
+            placeholder="输入语言关键字..."
+            @change="onAutoChange"
+          />
+        </div>
+        <div class="text-xs text-muted-foreground space-y-0.5">
+          <div>v-model：<code class="text-foreground">{{ autoValue || '-' }}</code></div>
+          <div>record：<code class="text-foreground">{{ autoRecord || '-' }}</code></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>