@liuqiongqiong/vue-pages 1.0.0

package/README.md

@@ -0,0 +1,345 @@
+# @changhuxian/vue-pages
+
+> 长护险管理系统业务页面组件库 - 包含结算管理、客户管理、护理管理等完整业务模块
+
+## 📦 安装
+
+```bash
+npm install @changhuxian/vue-pages
+# 或
+yarn add @changhuxian/vue-pages
+# 或
+pnpm add @changhuxian/vue-pages
+```
+
+## 🔨 使用方法
+
+### 1. 完整引入（不推荐）
+
+```javascript
+import Vue from 'vue'
+import ChanghuxianPages from '@changhuxian/vue-pages'
+
+// 这会注册所有页面组件和通用组件
+Vue.use(ChanghuxianPages)
+```
+
+### 2. 按需引入（推荐）
+
+#### 在路由中引入页面组件
+
+```javascript
+import Vue from 'vue'
+import Router from 'vue-router'
+
+// 按需导入所需的页面组件
+import {
+  SettlementIndex,
+  PreSettlementIndex,
+  CustomerIndex,
+  CarePlanIndex
+} from '@changhuxian/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 '@changhuxian/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 '@changhuxian/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 '@changhuxian/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 '@changhuxian/vue-pages'
+
+// 获取token
+const token = utils.getToken()
+
+// 设置token
+utils.setToken('your-token')
+
+// 移除token
+utils.removeToken()
+```
+
+### Validate 表单验证
+
+```javascript
+import { utils } from '@changhuxian/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 '@changhuxian/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
+
+# 开发模式（监听文件变化）
+npm run dev
+
+# 构建生产版本
+npm run build
+```
+
+## 📝 发布到npm
+
+```bash
+# 1. 登录npm账号
+npm login
+
+# 2. 发布包
+npm publish --access public
+```
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 License
+
+MIT License
+
+## 👥 维护者
+
+ChangHuXian Development Team
+
+## 🔗 相关链接
+
+- [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接口使用
+
+**更新日志：** 查看 [CHANGELOG.md](./CHANGELOG.md)