lw-cdp-ui 1.3.49 → 1.3.51

package/README.md

@@ -1,425 +1,90 @@
-# 使用
 
-> 组件库与脚手架项目相互依赖
+# lw-ui 组件库文档
 
-- 脚手架地址: https://gitlabcode.lianwei.com.cn/dmcs/imf/ui/lw-ui.git  分支 3.1.x
-- 代码说明文档可能更新不及时， 可直接查看源码，获取所有功能。路径： node_modules\lw-cdp-ui\dist\components
+## 项目简介
 
+lw-ui是一套基于Vue.js的企业级中后台UI组件库，提供丰富的业务组件和工具，帮助开发者快速构建中后台管理系统。
 
-## 组件库
-```javascript
+## 主要特性
+
+- 🏗️ **丰富的业务组件**：包含表单、表格、图表、流程设计等业务场景组件
+- 🎨 **主题定制**：支持灵活的主题配置和样式覆盖
+- 🚀 **开箱即用**：提供完整的安装指南和示例代码
+- 📦 **按需加载**：支持组件级按需引入
+- 🌍 **国际化**：内置多语言支持
+
+## 快速开始
+
+### 安装
+
+```bash
 npm install lw-cdp-ui
-// or
+# 或
 yarn add lw-cdp-ui
 ```
 
-### 重点说明
-> src\components 在这个目录下添加组件并且在src\index.js中进行导出
+### 引入组件
 
-#### src\index.js 全局挂载
 ```javascript
-// 前置在组件库前面的全局变量无需注入 手动注入以便于在组件中使用脚手架项目定义内容
-	if (options) {
-		for (const key in options) {
-			if (options.hasOwnProperty(key)) {
-				app.config.globalProperties[`$${key.toUpperCase()}`] = options[key]
-			}
-		}
-	}
-```
-#### vite.config.js 打包配置
-> 理论上组件库是不引用其余组件库 只有在初始化时使用了必要外部组件库，并且打包排除在外，后面尽量定义干净的组件无外部引入
-```js
-    rollupOptions: {
-			external: ['vue', 'jsencrypt', 'vuedraggable', 'dayjs', 'element-plus', '@logicflow/core', '@logicflow/extension'], // 外部依赖
-			output: {
-				exports: 'named',
-				globals: {
-					vue: 'Vue',
-					jsencrypt: 'JSEncrypt',
-					vuedraggable: 'Vuedraggable',
-					dayjs: 'dayjs',
-					'element-plus': 'ElementPlus',
-					'@logicflow/core': 'LogicFlowCore',
-					'@logicflow/extension': 'LogicFlowExtension'
-				},
-				assetFileNames: (assetInfo) => {
-					if (assetInfo.name === 'style.css') {
-						return 'style.css'
-					}
-					return assetInfo.name
-				}
-			}
-		}
+// 全局引入
+import lwCdpUi from 'lw-cdp-ui';
+import 'lw-cdp-ui/dist/style.css';
+Vue.use(lwCdpUi);
 
+// 按需引入
+import { lwTable, lwForm } from 'lw-cdp-ui';
 ```
 
-#### package.json 版本管理
-```js
-"version": "1.0.9",                      // 每次打包发布需要升级版本
-"type": "module",
-"main": "dist/lw-cdp-ui.umd.js",
-"module": "dist/lw-cdp-ui.esm.js",
-"exports": {                             // 导出必要的文件
-  ".": {
-    "import": "./dist/lw-cdp-ui.esm.js",
-    "require": "./dist/lw-cdp-ui.umd.js"
-  },
-  "./style.css": "./dist/style.css"
-},
-```
+### 使用示例
 
-## 通用方法
-### 关闭当前页面跳转
-```js
-	const store = useStore()
-	/**
-    *lw-cdp-ui >= 1.0.61
-    * path 跳转路径
-    * keep 需要刷新缓存刷新的页面的 name
-    */
-  store.state.viewTags.closeTagAndJump('/demo', 'DemoList')
-```
-### 按钮权限
 ```vue
-  <el-button type="primary"
-                     icon="el-icon-plus"
-                     v-auth="'ec.goods.locate'">单一权限</el-button>
-  <el-button type="primary"
-              icon="el-icon-plus"
-              v-auth="['ec.goods.locate', 'ec.goods.create']">组合权限</el-button>
-```
-### 更新菜单自定义菜单内容
-```js
-import { getCurrentInstance } from 'vue'
-import { useRouter } from 'vue-router'
-export default {
-	setup() {
-		const router = useRouter()
-		const {
-			proxy: { $bus }
-		} = getCurrentInstance()
-		// 添加菜单
-		const addMenu = () => {
-			let menu = router.sc_getMenu()
-
-			// 处理自己的业务
-			menu.push({
-				name: 'demoId',
-				path: '/demo/2222',
-				component: 'demo/list',
-				meta: {
-					icon: 'el-icon-tickets',
-					type: 'menu',
-					title: '测试新增菜单1'
-				},
-				sort: 0
-			})
-
-			// 发布
-			$bus.$emit('setMenu', menu)
-		}
-	}
-}
-
+<template>
+  <lw-table :data="tableData" :columns="columns" />
+</template>
 ```
-## 脚手架
-> 暂时通过git获取，后期可以打包成cli
-
-### 项目结构
 
-```csharp
-├─public               # 公共资源目录，通常包含不会被 Webpack 等工具处理的静态文件
-│  └─images            # 静态图片文件，用于存放组件库lw-cdp-ui中所需要的资源
-└─src                  
-    ├─api              
-    │  └─model         # API 模块中的文件自动引入
-    ├─assets           
-    │  ├─images        # 项目中使用的图片资源
-    │  ├─scss          # SCSS 样式文件所有样式统一在index.scss引入
-    │  └─svgIcon       # SVG 图标文件目录，与lwSvgIcon组件配合使用
-    ├─config           # 配置文件
-    ├─directives       # 自定义指令目录，存放 Vue.js 的自定义指令
-    ├─layout           # 布局组件目录直接使用 lwLayout 组件
-    │  └─other         # 其他布局相关的子组件或布局配置
-    ├─locales          # 国际化文件目录，每种语言统一在 zh-cn.js 定义 统一翻译成其他语言
-    │  └─lang          
-    ├─router           # 路由配置目录
-    ├─store            # 状态管理目录
-    │  └─modules       # Vuex 模块目录，存放各个功能模块的状态管理逻辑
-    ├─utils            # 工具函数目录
-    └─views            # 视图组件目录
-        ├─demo         # 示例页面，通常用于演示项目功能或组件使用
-        ├─initialization  # 初始化页面，可能用于系统初始化或首次加载时的页面
-        ├─login        # 登录页面，使用 lwLogin 组件
-        └─service      # 示例页面，通常用于演示项目功能或组件使用
+## 文档目录
 
 ```
-
-### 关键文件说明
-
-#### src/api 接口
-- 说明
-  ```js
-import config from '@/config'
-import request from '@/utils/request'
-
-export default {
-	// 分页
-	page: async (params) => {
-		let url = `${config.API_URL}/platform-tenant/tenant_business_unit`
-		return await request.get(url, params)
-	},
-	// 列表
-	list: async (params) => {
-		let url = `${config.API_URL}/platform-tenant/tenant_business_unit/list`
-		return await request.get(url, params)
-	},
-	// 详情
-	info: async (params) => {
-		let url = `${config.API_URL}/platform-tenant/tenant_business_unit/${params.id}`
-		return await request.get(url)
-	},
-	// 修改
-	edit: async (data = {}) => {
-		let url = `${config.API_URL}/platform-tenant/tenant_business_unit`
-		return await request.put(url, data)
-	},
-	// 新增
-	add: async (data = {}) => {
-		let url = `${config.API_URL}/platform-tenant/tenant_business_unit`
-		return await request.post(url, data)
-	},
-	// 删除
-	delete: async (id) => {
-		let url = `${config.API_URL}/platform-tenant/tenant_business_unit/${id}`
-		return await request.delete(url)
-	}
-}
-
-  ```
-- 直接在文件中定义方法会自定引入到全局
-- 全局使用时 直接this.$api.mock.page()  mock文件夹名称  page方法名称
-
-#### src/assets 静态配置
-- svgIcon直接将要的svg文件放在里面
-  ```vue
-  <!-- 项目中使用 -->
-  <lwSvgIcon name="这里就是svg文件名称" />
-  ```
-
-#### src/config 配置
-```js
-// 在这里合并动态的APP_CONFIG  可根据项目需求定义更多环境类型
-if (process.env.NODE_ENV === 'production') {
-	Object.assign(DEFAULT_CONFIG, APP_CONFIG)
-}
-
+docs/
+├── components/          # 组件文档
+│   ├── bi-chart/       # 图表组件
+│   ├── flow/           # 流程设计器
+│   ├── form/           # 表单组件
+│   └── table/          # 表格组件
+└── guide/             # 使用指南
+    ├── theme.md       # 主题定制
+    └── i18n.md        # 国际化
 ```
 
+## 开发环境
 
-#### src/locales 国际化配置
-```js
-import sysConfig from '@/config'
-import tool from '@/utils/tool'
-import { createI18n } from 'vue-i18n'
-import store from '@/store'
-import el_zh_cn from 'element-plus/es/locale/lang/zh-cn'
-import el_en from 'element-plus/es/locale/lang/en'
-
-// 静态加载的基础翻译文件
-import zh_cn from './lang/zh-cn.js'
-import en_us from './lang/en-us.js'
-
-// 挂载在线组件库国际化内容
-import { uiI18n } from 'lw-cdp-ui'
+- Node.js 12+
+- Vue 2.6+
+- Webpack 4+
+- npm/yarn
 
-// 获取本地语言并初始化 i18n 实例
-const localMessages = tool.data.get(`${sysConfig.APP_NAME}Message`) || {}
+## 构建项目
 
-// 初始化静态翻译内容
-const messages = {
-	'zh-cn': {
-		el: el_zh_cn,
-		...localMessages['zh_cn'],
-		...zh_cn
-	},
-	'en-us': {
-		el: el_en,
-		...localMessages['en_us'],
-		...en_us
-	}
-}
+```bash
+# 开发模式
+npm run dev
 
-// 使用 import.meta.globEager 进行静态导入
-const locales = import.meta.globEager('../views/**/locale/*.js')
+# 生产构建
+npm run build
 
-// 遍历所有翻译文件并按语言合并内容
-Object.keys(locales).forEach((path) => {
-	const matched = path.match(/locale\/([a-z-]+)\.js$/)
-	if (matched && matched[1]) {
-		const locale = matched[1].toLowerCase()
-		if (!messages[locale]) {
-			messages[locale] = {}
-		}
-		Object.assign(messages[locale], locales[path].default)
-	}
-})
-
-// 合并深层对象
-const deepMerge = (target, source) => {
-	for (const key in source) {
-		if (source.hasOwnProperty(key)) {
-			if (source[key] instanceof Object && target[key] instanceof Object) {
-				target[key] = deepMerge({ ...target[key] }, source[key])
-			} else {
-				target[key] = source[key]
-			}
-		}
-	}
-	return target
-}
-
-const allMessages = deepMerge(messages, uiI18n)
-tool.data.set(`${sysConfig.APP_NAME}Message`, allMessages)
-store.commit('setRouteShow', false)
-
-// 创建 i18n 实例
-const i18n = createI18n({
-	locale: tool.data.get('APP_LANG') || sysConfig.LANG, // 默认语言
-	fallbackLocale: 'en', // 回退语言
-	globalInjection: true, // 允许在全局使用 $t 函数
-	messages: allMessages // 合并后的翻译内容
-})
-
-export default i18n
-
-
-```
-
-- 使用
-  - js 中使用
-    ```js
-    import { getCurrentInstance} from 'vue'
-
-    export default {
-      name: 'DemoList',
-      setup() {
-        const {
-          proxy: { t }
-        } = getCurrentInstance()
-
-        let typeObject = {
-          increase: t('demoList.eventTypes.increase'),
-        }
-      }
-    }
-    ```
-  - html 中使用
-    ```vue
-      <el-tooltip :content="$t('lwTable.tools.fullScreen')">
-        <el-icon class="icon-fullscreen"
-                  @click="tableToggleFullScreen"><el-icon-full-screen /></el-icon>
-      </el-tooltip>
-    ```
-
-
-#### src/router 路由配置
-```
-    ├─router             
-    │  └─index.js           # 统一处理
-    │  └─route.js           # 页面路由  挂载在layout上
-    │  └─scrollBehavior.js  # tag 标签页处理
-    │  └─systemRouter.js    # 系统路由  一级路由
-```
-- 1、index.js 具体细节
-  - 判断当前挂载项目是否是入口项目  不是的化将页面挂载在一级路由上 以便于嵌入入口项目中
-    ```js
-    menuRouter.forEach((item) => {
-			// 判断是否需要挂载在UI框架上
-			let MENUCOMBINEDNMAE = tool.data.get('MENUCOMBINEDNMAE')
-			if (MENUCOMBINEDNMAE == config.APP_NAME) {
-				router.addRoute('layout', item)
-			} else {
-				router.addRoute(item)
-			}
-		})
-    ```
-  - 挂载外部链接 主要有将多个项目菜单集成在一起显示
-    ```js
-    if (item.meta.type === 'iframe') {
-			item.meta.url = item.path
-			item.path = `/i/${item.name}`
-		}
-    ```
-- 2、route.js 参数说明
-```js
-name: 'demo',
-path: '/demo',
-component: 'demo',
-meta: {
-  icon: 'el-icon-monitor',       // 现在使用的是element官方图标库
-  type: 'menu',                  // 默认menu 菜单   iframe 外链
-  title: 'menu.demo',            // 国际化 对应locales/lang/zh-cn.js的数据结构
-  roles: ['task.subedit.modify'] // 权限标志  不写这个参数默认显示 写了就会鉴别对应权限
-  hidden: true                   // 是否显示在左侧菜单上
-}
+# 文档构建
+npm run docs:build
 ```
 
+## 贡献指南
 
-#### src/utils 工具
-- request.js 请求封装
-  ```js
-    // 替换请求路径中的占位符
-		const tenantId = tool.data.get('tenantId')
-		const buCode = tool.data.get('buCode')
-		if (tenantId) {
-			config.url = config.url.replace(/{tenantId}/g, tenantId)
-		}
-		if (buCode) {
-			config.url = config.url.replace(/{buCode}/g, buCode)
-		}
-  ```
-
-#### src/lwui.js入口配置
-```javascript
-import config from './config'
-import api from './api'
-import tool from './utils/tool'
-import bus from './utils/bus'
-import http from './utils/request'
-import { expression } from './utils/common'
-
-import 'virtual:svg-icons-register'
+欢迎提交Pull Request或Issue。在提交前请确保：
 
-import * as elIcons from '@element-plus/icons'
-// 挂载在线组件库  需要放在全局对象后 便于注入全局状态
-import lwCdpUi from 'lw-cdp-ui'
-import 'lw-cdp-ui/style.css'
-// 挂载本地组件库
-// import lwCdpUi from '@/lw-ui/src/index'
-// import '@/lw-ui/src/assets/scss/index'
+1. 通过ESLint检查
+2. 添加相应的单元测试
+3. 更新相关文档
 
-export default {
-	install(app) {
-		//挂载全局对象
-		app.config.globalProperties.$config = config
-		app.config.globalProperties.$tool = tool
-		app.config.globalProperties.$http = http
-		app.config.globalProperties.$api = api
-		app.config.globalProperties.$bus = bus
-		app.config.globalProperties.$expression = expression
-
-		// 注册私有组件库
-		app.use(lwCdpUi)
-
-		//统一注册el-icon图标
-		for (let icon in elIcons) {
-			app.component(`ElIcon${icon}`, elIcons[icon])
-		}
-	}
-}
-
-
-```
+## 许可证
 
+MIT © 2023 lw-ui团队

package/dist/components/lwFormMini/FormComponent.vue

@@ -0,0 +1,142 @@
+<template>
+  <!-- 动态组件 -->
+  <component :is="componentMap[item.component]"
+             v-model="defaultValue"
+             @change="handleChange"
+             :size="size"
+             :disabled="disabled"
+             v-bind="getComponentProps(item)">
+    <!-- 处理组件插槽 -->
+    <template v-if="item.component === 'select'">
+      <el-option v-for="option in item.options.items"
+                 :key="option.value"
+                 :disabled="option.disabled"
+                 :label="option.label"
+                 :value="option.value" />
+    </template>
+    <template v-if="item.component === 'checkboxGroup'">
+      <el-checkbox v-for="_item in item.options.items"
+                   :key="_item.value"
+                   :label="_item.value">{{_item.label}}</el-checkbox>
+    </template>
+    <template v-if="item.component === 'number' && item?.options?.suffix"
+              #suffix>
+      {{ item.options.suffix }}
+    </template>
+    <template v-if="item.component === 'input' && item?.options?.prepend"
+              #prepend>
+      {{ item.options.prepend }}
+    </template>
+    <template v-if="item.component === 'input' && item?.options?.append"
+              #append>
+      {{ item.options.append }}
+    </template>
+  </component>
+
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: null,
+      default: ''
+    },
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      defaultValue: '',
+      // 组件映射表
+      componentMap: {
+        input: 'el-input',
+        checkbox: 'el-checkbox',
+        checkboxGroup: 'el-checkbox-group',
+        switch: 'el-switch',
+        select: 'el-select',
+        cascader: 'el-cascader',
+        date: 'el-date-picker',
+        number: 'el-input-number',
+        radio: 'el-radio-group',
+        color: 'el-color-picker',
+        rate: 'el-rate',
+        slider: 'el-slider'
+      }
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(val) {
+        this.defaultValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChange(value) {
+      this.$emit('update:modelValue', value)
+    },
+    // 获取组件属性
+    getComponentProps(item) {
+      let props = {}
+      if (item?.options) {
+        // 通用属性
+        props.placeholder = item.options.placeholder || ''
+        props.clearable = item.options.clearable || true
+        if (item.options.type) props.type = item.options.type
+        if (item.options?.maxlength) {
+          props.maxlength = item.options.maxlength
+          props.showWordLimit = true // 正确启用字数统计
+        }
+        if (item.options?.activeText) {
+          props.maxlength = item.options.maxlength
+          props.inlinePrompt = true
+        }
+
+        // 组件特有属性
+        switch (item.component) {
+          case 'select':
+            props.filterable = true
+            break
+          case 'date':
+            props.type = item.options.type || 'date'
+            props.startPlaceholder = item.options.startPlaceholder || '开始日期'
+            props.endPlaceholder = item.options.endPlaceholder || '结束日期'
+            break
+          case 'number':
+            props.controlsPosition = item.options.controlsPosition || 'right'
+            break
+          case 'treeSelect':
+            props.data = item?.options?.items || []
+            break
+          case 'treeSelect':
+            props.options = item?.options?.items || []
+            break
+        }
+      }
+
+      props = {
+        ...item.options,
+        ...props
+      }
+      // 清除
+      delete props.disabled
+      return props
+    }
+  }
+}
+</script>
+
+<style>
+</style>