npm package: @liuqiongqiong/vue-pages
Description: 长护险管理系统业务页面组件库 - 包含结算管理、客户管理、护理管理等完整业务模块
Author: ChangHuXian Team
Latest version: 1.2.7

# @liuqiongqiong/vue-pages

> 长护险管理系统业务页面组件库 - 包含结算管理、客户管理、护理管理等完整业务模块

[![npm version](https://img.shields.io/npm/v/@liuqiongqiong/vue-pages.svg)](https://www.npmjs.com/package/@liuqiongqiong/vue-pages)
[![license](https://img.shields.io/npm/l/@liuqiongqiong/vue-pages.svg)](https://www.npmjs.com/package/@liuqiongqiong/vue-pages)

## 📦 安装

```bash
npm install @liuqiongqiong/vue-pages
# 或
yarn add @liuqiongqiong/vue-pages
# 或
pnpm add @liuqiongqiong/vue-pages
```

## 🔨 使用方法

### 1. 完整引入（不推荐）

```javascript
import Vue from 'vue'
import ChanghuxianPages from '@liuqiongqiong/vue-pages'

// 这会注册所有页面组件和通用组件
Vue.use(ChanghuxianPages)
```

### 2. 按需引入（推荐）

#### 在路由中引入页面组件

```javascript
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
    }
  ]
})
```

#### 使用通用组件

```vue
<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>
```

#### 使用工具函数

```javascript
import { utils } from '@liuqiongqiong/vue-pages'

// 使用认证相关工具
const token = utils.getToken()
utils.setToken('your-token')
utils.removeToken()

// 使用表单验证工具
const isValidEmail = utils.validEmail('test@example.com')
const isValidURL = utils.validURL('https://example.com')

// 使用滚动工具
utils.scrollTo(0, 800)
```

## 📚 可用页面组件

### 结算管理模块

| 组件名 | 说明 | 导出名称 |
|--------|------|----------|
| 结算管理 | 结算单管理页面 | `SettlementIndex` |
| 预结算 | 预结算管理页面 | `PreSettlementIndex` |
| 对账管理 | 对账单管理页面 | `ReconciliationIndex` |

**使用示例：**

```javascript
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 - 分页组件

高度封装的分页组件，支持自动滚动、自定义样式等功能。

```vue
<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等多种文件格式。

```vue
<preview-file
  :file-url="fileUrl"
  :visible.sync="dialogVisible"
  title="文件预览"
/>
```

## 🛠️ 工具函数

### Auth 认证相关

```javascript
import { utils } from '@liuqiongqiong/vue-pages'

// 获取token
const token = utils.getToken()

// 设置token
utils.setToken('your-token')

// 移除token
utils.removeToken()
```

### Validate 表单验证

```javascript
import { utils } from '@liuqiongqiong/vue-pages'

// 邮箱验证
utils.validEmail('test@example.com') // true/false

// URL验证
utils.validURL('https://example.com') // true/false

// 字符串验证
utils.isString('hello') // true
utils.isArray([1, 2, 3]) // true
```

### ScrollTo 页面滚动

```javascript
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+

## 🚀 快速开始

### 第一步：安装依赖

```bash
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

```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
```

### 第三步：在路由中使用页面组件

```javascript
import { SettlementIndex } from '@liuqiongqiong/vue-pages'

const routes = [
  {
    path: '/settlement',
    component: SettlementIndex
  }
]
```

## 🔧 开发

```bash
# 安装依赖
npm install

# 开发模式（监听文件变化）
npm run dev

# 构建生产版本
npm run build
```

## 📝 发布到npm

```bash
# 1. 登录npm账号
npm login

# 2. 构建项目
npm run build

# 3. 发布包（首次发布需要添加 --access public）
npm publish --access public

# 后续版本发布
npm publish
```

## 📦 版本更新

```bash
# 更新补丁版本（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包地址](https://www.npmjs.com/package/@liuqiongqiong/vue-pages)
- [Gitee仓库](https://gitee.com/VueAppDemo/changhuxian-vue-components)
- [问题反馈](https://gitee.com/VueAppDemo/changhuxian-vue-components/issues)
- [Element UI文档](https://element.eleme.cn/)

## 📮 联系方式

如有问题请提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！**