@dczy/tie-pc

pnpm add @dczy/tie-pc vue pinia element-plus

import { createApp } from "vue"
import { createPinia } from "pinia"
import DczyTiePc from "@dczy/tie-pc"
import type { DczyPcInstallConfig, UserInfo } from "@dczy/tie-pc"
import App from "./App.vue"
import "element-plus/dist/index.css"
import "@dczy/tie-pc/styles.css"

const app = createApp(App)
// 由项目登录/刷新流程维护，也可替换为已初始化的 Pinia store。
const authStore = { token: "", userInfo: null as UserInfo | null }

app.use(createPinia())
const config: DczyPcInstallConfig = {
  request: {
    base_url: import.meta.env.VITE_API_URL,
    file_url: import.meta.env.VITE_FILE_URL,
    gateway_url: import.meta.env.VITE_GATEWAY_URL,
    abp_url: import.meta.env.VITE_ABP_URL,
    getfile_url: import.meta.env.VITE_GETFILE_URL,
    view_url: import.meta.env.VITE_VIEW_URL,
  },
  userInfo: {
    getToken: () => authStore.token,
    getCurUser: () => authStore.userInfo,
  },
  // 仅使用密码弹窗时可以省略 map。
  map: { baiduAk: "your-baidu-ak" },
}
app.use(DczyTiePc, config)
app.mount("#app")

配置与授权

• 必须先安装 Pinia。根入口导出 DczyPcInstallConfig、PcRequestConfig、PcMapConfig、PcUserInfoConfig 类型。
• request.base_url 是内部请求基础地址；file_url 是文件上传服务地址，getfile_url 是文件访问地址，view_url 是文件查看器地址；gateway_url 是通用网关地址，默认空字符串，并非仅供密码接口使用，也不会全局覆盖 base_url。
• request.abp_url 是 ABP 数据服务地址，供人员选择器机构树、区域公司/公司选择器和新版区域树使用；为空时回退到 gateway_url 和 base_url。
• userInfo.getToken 为同步 () => string，返回不带前缀的原始 token。安装时保存回调，每次内部请求读取最新值；未配置时不会自动读取 localStorage.JsToken。
• userInfo.getCurUser 为同步 () => UserInfo | null，安装时初始化内部用户信息，不订阅回调返回值的后续替换。字段名是 getCurUser，不是 getUserInfo。
• 传入 userInfo 时请同时提供两个回调。业务自行创建的 DcToolsRequest 不受安装配置影响，需单独传入 isJwt: true 和 getToken。
• 异步登录和用户信息获取由宿主负责，回调不支持 Promise。内部 useUserInfoStore 未作为公共 API 导出。

站点地址选择器

<script setup lang="ts">
import { ref } from "vue"
import { DStationAddressSelect } from "@dczy/tie-pc"
import type { StationAddressSelectItem } from "@dczy/tie-pc"

const address = ref("")
const selected = ref<StationAddressSelectItem | null>(null)
</script>

<template>
  <DStationAddressSelect
    v-model:address="address"
    v-model:selected="selected"
    bureau-code="P00"
    :clear-on-focus="false"
    :station-type="['railway', 'waterway']"
  />
</template>

先完成包级安装。 DStationAddressSelect 从根入口和 business 导出。组件自带所需 Element Plus 样式，不依赖全局图标。站点接口地址优先级为 requestHost → request.gateway_url → request.base_url，使用动态 token 和 host store 中的加密配置。

address 是输入文本，新增可选 selected 模型管理有效选择：对象回填以 value 同步文本且不触发 success，修改为不同文本会使对象失效，重置会同时清空两个模型。仅传字符串不会自动查询或恢复有效对象。同批非空对象与文本冲突时对象优先；单独置空已有对象会清空文本，同批置空并更新文本则保留草稿。回填请替换对象而非原地修改字段。

clearOnFocus 默认 true 保留聚焦清空和 clear 事件，编辑场景建议设为 false；普通失焦不清空。bureauCode 为可选铁路局编码，非空时随站点接口的 BureauCode 参数发送，不影响百度地址查询。resetState() 不触发 clear。旧事件接入仍可用，但未绑定 selected 时宿主仍需自行清理业务对象。结果包含与 _id 同值的 id，接口坐标保持字符串，百度坐标为数字。只查铁路/港口不需要地图，address/all 模式需百度 AK。查询失败保留另一来源，百度分支最多等待 8 秒。完整契约和迁移说明见站点地址选择器文档。

附近站点查询

<script setup lang="ts">
import { ref } from "vue"
import { DNearStationQuery } from "@dczy/tie-pc"
import type { NearStationQueryItem } from "@dczy/tie-pc"

const show = ref(false)
const station = ref<NearStationQueryItem | null>(null)

function handleChange(_stationName: string, payload: NearStationQueryItem) {
  station.value = payload
  show.value = false
}
</script>

<template>
  <el-button type="primary" @click="show = true">查询附近站点</el-button>
  <DNearStationQuery v-model="show" @change="handleChange" />
</template>

DNearStationQuery 支持根入口、business 和 @dczy/tie-pc/near-station-query 按需入口。组件输入地址后通过百度地图定位，并展示站点数据中 50 公里范围内的最近站点；站点列表优先从 OPFS 的 railway_station_data.json 读取，OPFS 不可用时直接请求 request.base_url。确认后 change 返回站点名称和完整记录，弹窗需由调用方更新 v-model 关闭。完整用法见 docs/tie-pc/components/DNearStationQuery.md。

人员选择器

<script setup lang="ts">
import { ref } from "vue"
import { DTableUserSelect } from "@dczy/tie-pc"

const userId = ref<string | null>(null)
const userName = ref("")
</script>

<template>
  <DTableUserSelect
    v-model="userId"
    v-model:label="userName"
    title="选择人员"
    placeholder="请选择人员"
    clearable
  />
</template>

DTableUserSelect 支持单选、多选、远程搜索、机构树、分页和已选回填。人员接口默认使用 request.gateway_url，机构接口默认使用 request.abp_url；也可以在组件上通过 requestHost 和 organizationRequestHost 单独覆盖。完整示例和事件说明见 docs/tie-pc/components/DTableUserSelect.md。

行政区域选择器

<script setup lang="ts">
import { ref } from "vue"
import { DAreaSelect } from "@dczy/tie-pc"
import type { AreaSelectValue } from "@dczy/tie-pc"

const region = ref<AreaSelectValue>(null)
const regionName = ref("")
</script>

<template>
  <DAreaSelect v-model="region" v-model:label="regionName" clearable />
</template>

DAreaSelect 支持新版区域树、旧版区域数据、层级限制、单选和多选。新版接口地址优先使用 request.abp_url，再回退到 gateway_url 和 base_url；旧版数据使用 base_url。区域数据会按数据源和层级缓存到 sessionStorage。完整用法见 docs/tie-pc/components/DAreaSelect.md。

机构选择器

<script setup lang="ts">
import { ref } from "vue"
import { DOrganTreeSelect } from "@dczy/tie-pc"
import type { OrganTreeSelectValue } from "@dczy/tie-pc"

const organizationId = ref<OrganTreeSelectValue>(null)
const organizationName = ref("")
</script>

<template>
  <DOrganTreeSelect
    v-model="organizationId"
    v-model:label="organizationName"
    clearable
    placeholder="请选择机构"
  />
</template>

DOrganTreeSelect 支持单选、多选、名称回显和按权限、启用状态、OA 与职能部门过滤。机构接口使用 base_url 或 gateway_url 时可直接使用，配置 abp_url 后优先使用该地址；单个组件可通过 host 覆盖。完整用法见 docs/tie-pc/components/DOrganTreeSelect.md。

区域公司选择器

<script setup lang="ts">
import { ref } from "vue"
import { DOrgAreaSelect } from "@dczy/tie-pc"
import type { OrgAreaSelectValue } from "@dczy/tie-pc"

const companyId = ref<OrgAreaSelectValue>("")
const companyName = ref("")
</script>

<template>
  <DOrgAreaSelect
    v-model="companyId"
    v-model:label="companyName"
    placeholder="请选择区域公司"
  />
</template>

DOrgAreaSelect 支持权限、常用区域、分组、停用过滤、单选、多选和名称回显。接口优先使用 request.abp_url，再回退 gateway_url 和 base_url；单个组件可通过 host 覆盖。完整用法见 docs/tie-pc/components/DOrgAreaSelect.md。

公司选择器

<script setup lang="ts">
import { ref } from "vue"
import { DCompanySelect } from "@dczy/tie-pc"
import type { CompanySelectItem,  } from "@dczy/tie-pc"

const companyId = ref<string | null>(null)
const company = ref<CompanySelectItem>()
</script>

<template>
  <DCompanySelect
    v-model="companyId"
    placeholder="请选择公司"
    @change="(_value, item) => (company = item)"
  />
</template>

DCompanySelect 支持权限过滤、输入搜索、清空和完整选项回传，可从根入口、@dczy/tie-pc/company-select 或全局注册使用。接口优先使用 request.abp_url，再回退 gateway_url 和 base_url；单个组件可通过 host 覆盖。完整用法见 docs/tie-pc/components/DCompanySelect.md。

文本高亮

<script setup lang="ts">
import { ref } from "vue"
import { DHighlight } from "@dczy/tie-pc"

const keyword = ref("成都")
const clickedKey = ref<string | number | null>(null)
</script>

<template>
  <DHighlight :keys="[keyword, 0]" color="#c63f32" @click="clickedKey = $event">
    成都至重庆，成都站待处理 0 单。
  </DHighlight>
</template>

DHighlight 支持根入口、@dczy/tie-pc/highlight 按需入口和包级全局注册。默认插槽传入普通文本；click 事件回传命中的原始字符串或数字。完整用法见 docs/tie-pc/components/DHighlight.md。

修改密码

安装完成后可以全局使用，也可从根入口具名导入；具名导入不替代安装初始化：

<script setup lang="ts">
import { ref } from "vue"
import { DResetPasswordDialog } from "@dczy/tie-pc"

const show = ref(false)
const modified = ref(false)
function handleModifySuccess() {
  // 按项目策略清理登录态或跳转登录页，不记录事件携带的密码。
  modified.value = true
}
</script>

<template>
  <button type="button" @click="show = true">修改密码</button>
  <DResetPasswordDialog v-model:show="show" @modify-success="handleModifySuccess" />
  <p v-if="modified">密码已修改</p>
</template>

requestHost 可覆盖 request.gateway_url；两者均为空时，请求由 base_url 解析。组件固定 POST /api/BaseData/User/check-pwd 和 /api/BaseData/User/modify-password，表单字段为 pwd，以响应 isSuccessful 判断成功。组件关闭请求加密，请使用 HTTPS。

modifySuccess(newPwd: string) 在修改成功后的提示消息关闭时触发，参数包含明文新密码，不得写入日志、监控或持久化存储。密码强度基于常见弱密码、diceware 与键盘序列词典，仅提示，不作为提交的强制条件。组件未公开 slots 或实例方法。旧具名别名 DczyResetPasswordDialog 保留；全局注册名为 DResetPasswordDialog。

详细说明见仓库文档 docs/tie-pc/index.md 和 docs/tie-pc/components/DResetPasswordDialog.md。

铁路货物选择器

<script setup lang="ts">
import { ref } from "vue"
import { DRailwayGoods } from "@dczy/tie-pc"
import type { RailwayGoodsChange } from "@dczy/tie-pc"

const goodsName = ref("")
const selected = ref<RailwayGoodsChange | null>(null)
</script>

<template>
  <DRailwayGoods
    v-model="goodsName"
    placeholder="请输入货物名称或编码"
    clearable
    @change="selected = $event"
  />
</template>

DRailwayGoods 支持根入口、business 和 @dczy/tie-pc/railway-goods 按需入口。组件挂载时通过 request.base_url 加载货物数据，按名称或编码本地筛选；选择后 change 返回货物编码和三个运价字段。未选中有效货物时失焦会清空输入。完整用法见 docs/tie-pc/components/DRailwayGoods.md。

查询列表与详情

• DLayout 表格查询布局：适合订单、台账等列表页。传入列配置与数据即可展示表格，再通过插槽加入查询表单、工具按钮和编辑表单。
• DTreeLayout 分类树与列表：适合左侧分类、右侧列表的管理页。用户选择分类后，由你的页面更新筛选条件或请求列表。
• DTableColumn 配置化表格列：在 Element Plus 的 ElTable 中使用，以同一份列配置生成表头、单元格和多级表头。
• DDetailsDialog 详情弹窗：适合查看订单、台账或档案详情。使用字段配置展示数据，通过 v-model 控制打开和关闭。

五个组件支持根入口具名导入和全局注册，也分别提供 @dczy/tie-pc/layout、tree-layout、table-column、table-user-select、details-dialog 按需入口。布局组件依赖 Pinia；仅使用本地数据示例不需要登录或接口配置。文档提供页内交互示例及独立预览。

通用弹窗

DComDialog 使用文档提供编辑表单、自定义标题与底部、未保存关闭确认、长内容滚动和全屏工作区示例。使用 v-model 控制状态，保存与校验由页面处理；标题栏关闭遵循 before-close，直接设置模型关闭时需由页面自行检查。支持根入口具名导入和 @dczy/tie-pc/com-dialog 按需导入，文档包含页内 demo 与独立 preview。

预览工具

import { createFilePreview, createImagePreview } from "@dczy/tie-pc"
import type { FilePreviewOptions, ImagePreviewOptions } from "@dczy/tie-pc"

const imageOptions: ImagePreviewOptions = {
  urlList: ["https://files.example.com/contract-1.png"],
  initialIndex: 0,
  onClose() {
    // 预览关闭后的页面状态清理
  },
}

const fileOptions: FilePreviewOptions = {
  fileUri: "https://files.example.com/contract.pdf",
  zIndex: 4000,
  onClose() {
    // 预览关闭后的页面状态清理
  },
}

createImagePreview(imageOptions)
createFilePreview(fileOptions)

createImagePreview 基于 Element Plus ElImageViewer 创建临时图片查看器。createFilePreview 使用 iframe 显示 PDF 等文件，优先按 request.view_url 生成查看器地址，未配置时直接使用 fileUri。两个方法都会在关闭后执行 onClose 并自动卸载、清理容器；它们依赖浏览器 DOM，不提供程序化关闭控制器。文件地址获取和图片/文件类型判断由调用页面负责。完整用法见 预览工具方法。

文件上传

DUploadImage 支持图片选择、上传、预览、下载和删除；DUploadExcel 支持 Excel 拖拽上传和导入确认。两者默认使用 request.file_url，也可通过组件 action 覆盖地址。autoUpload=false 时，DUploadImage 通过实例方法 submit() 触发上传，abort() 和 clearFiles() 分别用于终止与清空。

<script setup lang="ts">
import { ref } from "vue"
import { DUploadImage, DUploadExcel } from "@dczy/tie-pc"
import type { DUploadImageExpose, DUploadImageFile } from "@dczy/tie-pc"
import type { DUploadExcelAttachment } from "@dczy/tie-pc"

const images = ref<DUploadImageFile[]>([])
const excelVisible = ref(false)
const imageUpload = ref<DUploadImageExpose>()
function handleImport(file: DUploadExcelAttachment) {
  // 将 file 交给页面导入请求逻辑。
  console.log(file.FileName)
}
</script>

<template>
  <DUploadImage ref="imageUpload" v-model="images" folder="common" :limit="3" multiple />
  <DUploadExcel v-model="excelVisible" action="transport/import" @submit="handleImport" />
</template>

完整用法见 DUploadImage 和 DUploadExcel。支持根入口、@dczy/tie-pc/upload-image、@dczy/tie-pc/upload-excel 以及包级全局注册。

业务图标配置

DAliIcon 支持独立的业务图标库，组件库内部图标始终使用内置资源。

app.use(DczyTiePc, {
  iconfont: {
    url: "https://example.com/project-icons.js",
    prefixClsName: "project-icon",
  },
})

<DAliIcon icon-name="search" />

iconfont 也支持数组，通过 isDefault: true 指定默认项，其他图标库通过 prefix-cls 选择。根入口导出 DAliIcon、DAliIconProps 和 PcIconFontConfig；也支持 @dczy/tie-pc/ali-icon 按需入口及全局注册。

旧 { url } 配置需补充真实 symbol 前缀 prefixClsName；原 iconfontUrl prop 已移除，改为全局登记地址。无业务默认项时，省略前缀将显示空图标。

完整规则及迁移说明见 DAliIcon 图标。

布局默认列

import { LAYOUT_DEFAULT_COLUMN } from "@dczy/tie-pc/constants"
// 也支持从 @dczy/tie-pc 根入口导入。
const columns = [
  { name: "name", label: "名称" },
  ...LAYOUT_DEFAULT_COLUMN.map(column => ({ ...column })),
]

LAYOUT_DEFAULT_COLUMN 为 DTableColumnItem[]，包含排序、是否作废、创建日期及创建人员四列，传入 DLayout 的 columns 使用。常量不会自动追加到组件列配置；修改前请复制列对象。完整用法见 DLayout。