anytrek-front-public-component 1.11.7 → 1.11.9

package/README.md

@@ -765,6 +765,10 @@ const curPicWH = ref<any>({
   imgW: 800,
   imgH: 600,
 });
+const showImageDisplay = () => {
+  imageDisplayRef.value?.loadImageListFun();
+  visible.value = true;
+}
 const fetchImgList = async (successFun: Function) => { 
   /* 请求图片列表 */ 
   const res = await getImgList();
@@ -856,4 +860,138 @@ const onToHistory = (data: any) => {
 ### 📋 Methods Reference (通过 ref 调用)
 | 方法名 | 描述 | 参数 |
 | --- | --- | --- |
-| `loadImageListFun` | 请求图片列表,它会调传进来的getImgList方法 | — |
+| `loadImageListFun` | 请求图片列表,它会调传进来的getImgList方法 | — |
+
+
+
+## 🧩 Component: `<SelectList>`
+列表选择
+
+```vue
+<SelectList
+  v-model:visible="isShowAllList"
+  v-model:selected="selectedIds"
+  :items="allTagsList"
+  id-key="id"
+  name-key="name"
+  :search-placeholder="placeholderText"
+  :batch-mode="hasMoreInput"
+  :single-mode-label="
+    eleType === 'vehicle' ? t('vehicleName') : t('device')
+  "
+  :batch-mode-label="t('batchDeviceID')"
+  batch-match-field="deviceUpid"
+  :create-label="wordAboutAdd"
+  @confirm="handleConfirm"
+  @jump="handleJumpEdit"
+  @create="handleClickAdd"
+>
+  <template #item-icon="{ item }">
+    <anSvgIcon
+      :name="
+        addtagType === 'vehicle'
+          ? getVehicleIconById(item.id)
+          : setTagSvg(addtagType, item)
+      "
+      font-size="24"
+    />
+  </template>
+</SelectList>
+```
+
+### 🔧 Example Setup
+```ts
+import { ref, computed } from 'vue';
+
+// 面板控制
+const isShowAllList = ref(false);
+const selectedIds = ref<any[]>([]);
+
+// 数据源（示例：标签列表）
+const allTagsList = ref([
+  { id: 1, name: '标签A' },
+  { id: 2, name: '标签B' },
+]);
+
+// 搜索 & 输入模式
+const placeholderText = ref('搜索标签');
+const hasMoreInput = ref(false);
+const eleType = ref('tag');
+const addtagType = ref('tag');
+const wordAboutAdd = ref('新建标签');
+
+// 确认选中
+function handleConfirm(items: any[]) {
+  // 将选中的 items 合并到表单数据
+}
+
+// 跳转编辑
+function handleJumpEdit(item: any) {
+  console.log('edit', item);
+}
+
+// 新建
+function handleClickAdd() {
+  console.log('create');
+}
+```
+```ts
+// 图标辅助函数（按项目类型返回对应 SVG）
+function setTagSvg(type: string) {
+  return type === 'landmark'
+    ? 'landmarkIcon'
+    : type === 'vehicle'
+      ? 'vehicleIcon'
+      : 'tagIcon';
+}
+
+function getVehicleIconById(id: number) {
+  const vehicle = allVehicles.value.find((v: any) => v.id === id);
+  return vehicle ? 'vehicle-' + vehicle.content.newIcon : 'vehicleIcon';
+}
+```
+
+## 📋 Props Reference
+| 参数名称 | 描述 | 数据类型 | 默认值 | 必填 |
+| --- | --- | --- | --- | --- |
+| `visible` | 控制面板显隐 | `Boolean` | — | ✅ |
+| `selected` | 已选中项的 ID 数组（双向绑定） | `Array<string \| number>` | `[]` | — |
+| `items` | 数据源列表；tag时，需要过滤掉当前tag | `Array` | `[]` | — |
+| `idKey` | 唯一标识字段名 | `String` | `"id"` | — |
+| `nameKey` | 显示名称字段名 | `String` | `"name"` | — |
+| `searchable` | 是否显示搜索框 | `Boolean` | `true` | — |
+| `searchPlaceholder` | 搜索框占位文本，不传时默认使用多语言 | `String` | `""` | — |
+| `batchMode` | 是否启用"单个/批量"输入模式切换 | `Boolean` | `false` | — |
+| `singleModeLabel` | 单个输入模式的标签文字 | `String` | `""` | — |
+| `batchModeLabel` | 批量输入模式的标签文字 | `String` | `""` | — |
+| `batchMatchField` | 批量模式下精确匹配的字段名，默认取 `idKey`；对于车辆和设备，需要传入deviceUpid字段，值为userPackageId | `String` | `""` | — |
+| `showSelectAll` | 是否显示全选行 | `Boolean` | `true` | — |
+| `showJump` | 是否显示每项的跳转编辑按钮 | `Boolean` | `true` | — |
+| `showCreate` | 是否显示底部新建按钮 | `Boolean` | `true` | — |
+| `createLabel` | 新建按钮文字 | `String` | `""` | — |
+| `virtual` | 是否启用虚拟滚动（大数据量推荐开启） | `Boolean` | `true` | — |
+| `itemHeight` | 虚拟滚动单项高度（px） | `Number` | `44` | — |
+| `maxHeight` | 列表最大高度（px） | `Number` | `320` | — |
+| `top` | 面板 CSS `top` 定位值 | `String` | `"50%"` | — |
+| `right` | 面板 CSS `right` 定位值 | `String` | `"525px"` | — |
+| `zIndex` | 面板 CSS `z-index` 层级 | `Number` | `1000` | — |
+
+### 📤 Events
+| 事件名 | 参数 | 描述 |
+| --- | --- | --- |
+| `update:visible` | `Boolean` | 面板显隐状态变化 |
+| `update:selected` | `Array` | 选中项 ID 数组变化 |
+| `confirm` | `Array` | 点击确认按钮，返回当前选中的完整 item 数组 |
+| `jump` | `item` | 点击某项的跳转编辑按钮，返回当前 item |
+| `create` | — | 点击底部新建按钮 |
+
+### 🧩 Slots
+| 插槽名 | 作用域 | 描述 |
+| --- | --- | --- |
+| `header-left` | — | 头部左侧区域，默认显示已选数量 |
+| `header-actions` | — | 头部右侧操作按钮区域 |
+| `item-icon` | `{ item }` | 每项左侧图标 |
+| `item-label` | `{ item }` | 每项显示文本，默认取 `item[nameKey]` |
+| `item-right` | `{ item }` | 每项右侧额外内容 |
+| `empty` | — | 列表为空时的占位内容 |
+| `footer` | — | 底部自定义区域，会覆盖默认的新建按钮 |