@liuqiongqiong/vue-pages

长护险管理系统业务页面组件库 - 包含结算管理、客户管理、护理管理等完整业务模块

📦 安装

npm install @liuqiongqiong/vue-pages
# 或
yarn add @liuqiongqiong/vue-pages
# 或
pnpm add @liuqiongqiong/vue-pages

🔨 使用方法

1. 完整引入（不推荐）

import Vue from 'vue'
import ChanghuxianPages from '@liuqiongqiong/vue-pages'

// 这会注册所有页面组件和通用组件
Vue.use(ChanghuxianPages)

2. 按需引入（推荐）

在路由中引入页面组件

import Vue from 'vue'
import Router from 'vue-router'

// 按需导入所需的页面组件
import {
  SettlementIndex,
  PreSettlementIndex,
  CustomerIndex,
  CarePlanIndex
} from '@liuqiongqiong/vue-pages'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/settlement',
      name: 'Settlement',
      component: SettlementIndex
    },
    {
      path: '/pre-settlement',
      name: 'PreSettlement',
      component: PreSettlementIndex
    },
    {
      path: '/customer',
      name: 'Customer',
      component: CustomerIndex
    },
    {
      path: '/care-plan',
      name: 'CarePlan',
      component: CarePlanIndex
    }
  ]
})

使用通用组件

<template>
  <div>
    <!-- 分页组件 -->
    <pagination
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
    
    <!-- 文件预览组件 -->
    <preview-file
      :file-url="fileUrl"
      :visible.sync="previewVisible"
    />
  </div>
</template>

<script>
import { Pagination, PreviewFile } from '@liuqiongqiong/vue-pages'

export default {
  components: {
    Pagination,
    PreviewFile
  },
  data() {
    return {
      total: 100,
      listQuery: {
        pageNo: 1,
        size: 20
      },
      fileUrl: '',
      previewVisible: false
    }
  },
  methods: {
    getList() {
      // 获取列表数据
    }
  }
}
</script>

使用工具函数

import { utils } from '@liuqiongqiong/vue-pages'

// 使用认证相关工具
const token = utils.getToken()
utils.setToken('your-token')
utils.removeToken()

// 使用表单验证工具
const isValidEmail = utils.validEmail('[email protected]')
const isValidURL = utils.validURL('https://example.com')

// 使用滚动工具
utils.scrollTo(0, 800)

📚 可用页面组件

结算管理模块

| 组件名 | 说明 | 导出名称 | |--------|------|----------| | 结算管理 | 结算单管理页面 | SettlementIndex | | 预结算 | 预结算管理页面 | PreSettlementIndex | | 对账管理 | 对账单管理页面 | ReconciliationIndex |

使用示例：

import { SettlementIndex, PreSettlementIndex } from '@liuqiongqiong/vue-pages'

export default {
  routes: [
    { path: '/settlement', component: SettlementIndex },
    { path: '/pre-settlement', component: PreSettlementIndex }
  ]
}

客户管理模块

| 组件名 | 说明 | 导出名称 | |--------|------|----------| | 客户管理 | 客户信息管理页面 | CustomerIndex | | 护理计划 | 护理计划管理页面 | CarePlanIndex |

护理项目模块

| 组件名 | 说明 | 导出名称 | |--------|------|----------| | 护理项目 | 护理项目配置页面 | NursingProjectsIndex | | 护理套餐 | 护理套餐配置页面 | NursingPackageIndex |

护理员管理模块

| 组件名 | 说明 | 导出名称 | |--------|------|----------| | 护理员管理 | 护理员信息管理页面 | NurseIndex |

机构管理模块

| 组件名 | 说明 | 导出名称 | |--------|------|----------| | 机构管理 | 机构信息管理页面 | InstitutionIndex |

系统管理模块

| 组件名 | 说明 | 导出名称 | |--------|------|----------| | 用户管理 | 系统用户管理页面 | SysUserIndex | | 角色管理 | 角色权限管理页面 | SysRoleIndex |

🧩 通用组件

Pagination - 分页组件

高度封装的分页组件，支持自动滚动、自定义样式等功能。

<pagination
  :total="total"
  :page.sync="listQuery.pageNo"
  :limit.sync="listQuery.size"
  :page-sizes="[10, 20, 50, 100]"
  layout="total, sizes, prev, pager, next, jumper"
  @pagination="handlePagination"
/>

Props:

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | total | 总条目数 | Number | - | | page | 当前页数 | Number | 1 | | limit | 每页显示条目个数 | Number | 20 | | pageSizes | 每页显示个数选择器的选项设置 | Array | [10, 20, 30, 50] | | layout | 组件布局 | String | 'total, sizes, prev, pager, next, jumper' | | background | 是否为分页按钮添加背景色 | Boolean | true | | autoScroll | 分页后是否自动滚动到顶部 | Boolean | true |

PreviewFile - 文件预览组件

支持预览Word、PDF等多种文件格式。

<preview-file
  :file-url="fileUrl"
  :visible.sync="dialogVisible"
  title="文件预览"
/>

🛠️ 工具函数

Auth 认证相关

import { utils } from '@liuqiongqiong/vue-pages'

// 获取token
const token = utils.getToken()

// 设置token
utils.setToken('your-token')

// 移除token
utils.removeToken()

Validate 表单验证

import { utils } from '@liuqiongqiong/vue-pages'

// 邮箱验证
utils.validEmail('[email protected]') // true/false

// URL验证
utils.validURL('https://example.com') // true/false

// 字符串验证
utils.isString('hello') // true
utils.isArray([1, 2, 3]) // true

ScrollTo 页面滚动

import { utils } from '@liuqiongqiong/vue-pages'

// 滚动到顶部，动画时长800ms
utils.scrollTo(0, 800)

// 滚动到指定位置，带回调
utils.scrollTo(500, 1000, () => {
  console.log('滚动完成')
})

📋 依赖要求

本组件库依赖以下库，请确保您的项目中已安装：

• Vue 2.6+
• Element UI 2.13+
• Vue Router 3.0+
• Vuex 3.1+

🚀 快速开始

第一步：安装依赖

npm install @liuqiongqiong/vue-pages vue@^2.6.0 element-ui@^2.13.0 vue-router@^3.0.0 vuex@^3.1.0

第二步：配置 main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

第三步：在路由中使用页面组件

import { SettlementIndex } from '@liuqiongqiong/vue-pages'

const routes = [
  {
    path: '/settlement',
    component: SettlementIndex
  }
]

🔧 开发

# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 构建生产版本
npm run build

📝 发布到npm

# 1. 登录npm账号
npm login

# 2. 构建项目
npm run build

# 3. 发布包（首次发布需要添加 --access public）
npm publish --access public

# 后续版本发布
npm publish

📦 版本更新

# 更新补丁版本（1.0.0 -> 1.0.1）
npm version patch

# 更新次版本（1.0.0 -> 1.1.0）
npm version minor

# 更新主版本（1.0.0 -> 2.0.0）
npm version major

# 发布新版本
npm publish

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT License

👥 维护者

• 作者: liuqiongqiong
• 团队: ChangHuXian Development Team

🔗 相关链接

• NPM包地址
• Gitee仓库
• 问题反馈
• Element UI文档

📮 联系方式

如有问题请提Issue或联系维护团队。

⚠️ 注意事项

1. 本组件库是业务页面组件库，包含完整的业务逻辑
2. 使用前请确保已配置好API接口地址
3. 强烈建议按需引入，避免打包体积过大
4. 页面组件需要配合相应的API接口使用
5. 确保项目中已安装并配置 Element UI

📊 包信息

• 包名: @liuqiongqiong/vue-pages
• 版本: 1.0.0
• 包大小: ~451 KB (压缩后)
• 解压后大小: ~2.3 MB
• 总文件数: 45

🆕 更新日志

v1.0.0 (2025-12-08)

• 🎉 首次发布
• ✨ 包含结算管理、客户管理、护理管理等完整业务模块
• 📦 导出 Pagination、PreviewFile 等通用组件
• 🛠️ 提供 auth、validate、scrollTo 等工具函数

感谢使用 @liuqiongqiong/vue-pages！