lw-cdp-ui 1.3.39 → 1.3.41

package/README.md

@@ -1,5 +1,425 @@
-# Vue 3 + Vite
+# 使用
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+> 组件库与脚手架项目相互依赖
+
+- 脚手架地址: https://gitlabcode.lianwei.com.cn/dmcs/imf/ui/lw-ui.git  分支 3.1.x
+- 代码说明文档可能更新不及时， 可直接查看源码，获取所有功能。路径： node_modules\lw-cdp-ui\dist\components
+
+
+## 组件库
+```javascript
+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
+				}
+			}
+		}
+
+```
+
+#### 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)
+		}
+	}
+}
+
+```
+## 脚手架
+> 暂时通过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)
+}
+
+```
+
+
+#### 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'
+
+// 获取本地语言并初始化 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
+	}
+}
+
+// 使用 import.meta.globEager 进行静态导入
+const locales = import.meta.globEager('../views/**/locale/*.js')
+
+// 遍历所有翻译文件并按语言合并内容
+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                   // 是否显示在左侧菜单上
+}
+```
+
+
+#### 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'
+
+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'
+
+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])
+		}
+	}
+}
+
+
+```
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/dist/components/lwFormJson/JsonItem.vue

@@ -197,7 +197,7 @@ export default {
   }
   &.showBorder {
     border: 1px dashed var(--el-border-color-light);
-    background-color: rgba($color: #000000, $alpha: 0.01);
+    background-color: rgba($color: #fff, $alpha: 1);
   }
 }
 // :deep(.el-form-item__content){
@@ -208,7 +208,7 @@ export default {
   // margin: 0 5px;
   padding: 15px 10px;
   background-color: #fff;
-  box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
+  // box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
 }
 
 :deep(.el-col) {
@@ -219,7 +219,7 @@ export default {
   width: 100%;
   padding: 15px 10px;
   background-color: #fff;
-  box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
+  // box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.1);
   margin-bottom: 10px;
   position: relative;
   .remove-btn {

package/dist/components/lwFormJson/TreeItem.vue

@@ -106,8 +106,6 @@ export default {
   backdrop-filter: blur(10px);
   color: var(--el-text-color-regular);
   cursor: move;
-  .list-item {
-  }
   .form-item {
     padding: 8px 0 8px 10px;
     border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);

package/dist/components/lwFormJson/index.vue

@@ -355,8 +355,10 @@ export default {
 .aside-right {
   border-right: 0;
   border-left: 1px solid var(--el-border-color-light);
+  background-color: #fff;
 }
 .form-json-body {
   max-height: calc(100vh - 137px);
+  background-color: #fff;
 }
 </style>

package/dist/components/lwLayout/components/bu.vue

@@ -47,6 +47,8 @@ export default {
         this.$tool.data.set('zoneInitialized', initialized)
         if (!initialized) {
           this.$router.push(this.$config.INIT_URL);
+        } else {
+          this.$router.push('/')
         }
 
       }