20260730231110

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

@@ -1,8 +1,10 @@
 <script setup>
-import { h, shallowRef } from "vue";
+import { h, ref, shallowRef } from "vue";
 import { message } from "antdv-next";
 import { Input, InputNumber, Select } from "antdv-next";
+import FmsSelect from "@/components/FmsSelect.vue";
 import FmsTable from "@/components/fms-table/FmsTable.vue";
+import { FileViewer, withFullViewerOptions } from "@file-viewer/vue3-full";
 
 const COLUMN_COUNT = 20;
 const ROW_COUNT = 4000;
@@ -47,6 +49,9 @@ function buildData() {
 }
 
 const dataSource = shallowRef(buildData());
+const selectedLocale = ref("");
+const selectedLocaleLabel = ref("");
+const selectedLocaleRecord = shallowRef(null);
 
 // 当前编辑行 key；进入编辑时留存快照，取消可还原
 const editingKey = shallowRef(null);
@@ -170,6 +175,35 @@ function regenerate() {
 function rowClassName(row) {
   return row.id === editingKey.value ? "fms-row-editing" : "";
 }
+
+function onLocaleChange(record) {
+  selectedLocaleRecord.value = record;
+}
+
+// ── 文件预览 Demo（@file-viewer/vue3-full） ──
+const fvOptions = withFullViewerOptions();
+const viewerVisible = ref(false);
+const viewerFile = ref(null);
+const viewerUrl = ref("");
+const viewerUrlInput = ref("");
+const viewerKey = ref(0);
+
+function openViewer() {
+  viewerVisible.value = true;
+}
+function onPickFile(file) {
+  viewerFile.value = file;
+  viewerUrl.value = "";
+  viewerKey.value += 1;
+  return false; // 阻止 antdv 实际上传，仅取本地 File
+}
+function applyUrl() {
+  const u = viewerUrlInput.value.trim();
+  if (!u) return;
+  viewerUrl.value = u;
+  viewerFile.value = null;
+  viewerKey.value += 1;
+}
 </script>
 
 <template>
@@ -187,9 +221,31 @@ function rowClassName(row) {
         <a-button :disabled="editingKey == null" type="primary" @click="saveEdit">保存</a-button>
         <a-button :disabled="editingKey == null" @click="cancelEdit">取消</a-button>
         <a-button @click="regenerate">重新生成</a-button>
+        <a-button @click="openViewer">文件预览</a-button>
       </div>
     </header>
 
+    <section class="select-demo">
+      <div class="select-demo__field">
+        <label class="select-demo__label">FmsSelect 远程选择</label>
+        <FmsSelect
+          v-model="selectedLocale"
+          v-model:label="selectedLocaleLabel"
+          view-name="b_i18n_type"
+          label-key="b_name"
+          value-key="b_code"
+          order-by="b_code ASC"
+          :page-size="10"
+          @change="onLocaleChange"
+        />
+      </div>
+      <div class="select-demo__value">
+        <span>当前值：{{ selectedLocale || "-" }}</span>
+        <span>显示文本：{{ selectedLocaleLabel || "-" }}</span>
+        <span>记录编码：{{ selectedLocaleRecord?.b_code || "-" }}</span>
+      </div>
+    </section>
+
     <section class="table-demo__body">
       <FmsTable
         v-model:columns="columns"
@@ -200,10 +256,45 @@ function rowClassName(row) {
         @row-click="onRowClick"
       />
     </section>
+
+    <a-modal
+      v-model:open="viewerVisible"
+      title="文件预览（@file-viewer/vue3-full）"
+      :width="960"
+      :footer="null"
+    >
+      <div class="fv-demo">
+        <div class="fv-bar">
+          <a-upload :show-upload-list="false" :before-upload="onPickFile" accept="*">
+            <a-button type="primary">选择本地文件</a-button>
+          </a-upload>
+          <a-input
+            v-model:value="viewerUrlInput"
+            placeholder="或粘贴文件 URL，如 https://example.com/demo.pdf"
+            style="width: 380px"
+            @press-enter="applyUrl"
+          />
+          <a-button @click="applyUrl">预览 URL</a-button>
+        </div>
+        <div class="fv-body">
+          <FileViewer
+            v-if="viewerFile || viewerUrl"
+            :key="viewerKey"
+            :file="viewerFile || undefined"
+            :url="viewerUrl || undefined"
+            :options="fvOptions"
+          />
+          <div v-else class="fv-empty">请选择本地文件或输入文件 URL 进行预览</div>
+        </div>
+        <p class="fv-tip">
+          支持图片 / PDF / Office / Markdown / 文本 / 音视频等；PDF、Office 等格式由浏览器端 WASM 渲染，无需服务端转换。
+        </p>
+      </div>
+    </a-modal>
   </main>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .table-demo {
   display: flex;
   flex-direction: column;
@@ -254,7 +345,72 @@ function rowClassName(row) {
   padding: 12px 16px 16px;
 }
 
+.select-demo {
+  display: flex;
+  flex: none;
+  align-items: flex-end;
+  gap: 16px;
+  padding: 12px 16px 0;
+}
+
+.select-demo__field {
+  width: 320px;
+}
+
+.select-demo__label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+}
+
+.select-demo__value {
+  display: flex;
+  min-width: 0;
+  gap: 16px;
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+  line-height: 32px;
+}
+
 :deep(.fms-row-editing) {
   background: rgba(22, 119, 255, 0.08) !important;
 }
+
+// ── 文件预览 Demo ──
+.fv-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fv-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.fv-body {
+  height: 560px;
+  border: 1px solid var(--fms-border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.fv-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fms-text-secondary);
+  font-size: 13px;
+}
+
+.fv-tip {
+  margin: 0;
+  color: var(--fms-text-secondary);
+  font-size: 12px;
+}
 </style>