lw-cdp-ui 1.0.7 → 1.0.8

package/dist/components/lwLayout/components/NavMenu.vue

@@ -0,0 +1,36 @@
+<template>
+	<div v-if="navMenus.length<=0" style="padding:20px;">
+		<el-alert title="无子集菜单" center type="info" :closable="false"></el-alert>
+	</div>
+	<template v-for="navMenu in navMenus" v-bind:key="navMenu">
+		<el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.path">
+			<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='()=>{}'></a>
+			<el-icon v-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
+			<template #title>
+				<span>{{navMenu.meta.title}}</span>
+			</template>
+		</el-menu-item>
+		<el-sub-menu v-else :index="navMenu.path">
+			<template #title>
+				<el-icon v-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
+				<span>{{navMenu.meta.title}}</span>
+			</template>
+			<NavMenu :navMenus="navMenu.children"></NavMenu>
+		</el-sub-menu>
+	</template>
+</template>
+
+<script>
+	export default {
+		name: 'NavMenu',
+		props: ['navMenus'],
+		data() {
+			return {}
+		},
+		methods: {
+			hasChildren(item) {
+				return item.children && !item.children.every(item => item.meta.hidden)
+			}
+		}
+	}
+</script>

package/dist/components/lwLayout/components/aside.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="layout-aside">
+
+    <img class="logo"
+         :src="logo"
+         alt="">
+
+    <el-popover placement="right"
+                :width="180"
+                trigger="click"
+                :show-arrow="false"
+                :offset="3"
+                popper-class="app-popper"
+                ref="popoverRef">
+      <template #reference>
+        <p>
+          <el-icon class="menu-btn">
+            <component is="el-icon-grid" />
+          </el-icon>
+        </p>
+      </template>
+      <div class="app-content">
+        <div class="app-title">
+          应用中心
+          <el-icon class="iconClose"
+                   @click="closePopover">
+            <el-icon-close />
+          </el-icon>
+        </div>
+        <el-divider style="margin: 5px 0;" />
+        <template v-if="grantedApplications.length > 0">
+          <div class="menu-item"
+               @click="switchMenu(item)"
+               v-for="item in grantedApplications"
+               :key="item.resourceId">
+            <i class="iconfont"
+               :class="item.icon"
+               style="margin-right: 5px;"></i>
+            {{ item.name}}
+          </div>
+        </template>
+
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import logo from 'https://saas.lianwei.com.cn/static/images/logo.jpg';
+export default {
+  name: 'layoutAside',
+  props: {
+  },
+  data() {
+    return {
+      logo,
+      popVisible: false,
+      grantedApplications: [],
+    };
+  },
+  mounted() {
+    let { grantedApplications } = this.$TOOL.data.get('userAuthInfo');
+    this.grantedApplications = grantedApplications
+    document.addEventListener('click', this.handleDocumentClick);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
+  },
+  methods: {
+    handleDocumentClick(ev) {
+      let popover = document.getElementById('popover');
+      if (this.popVisible && (ev.target !== popover) && !popover.contains(ev.target)) {
+        this.popVisible = false;
+      }
+    },
+    switchMenu(menuItem) {
+      window.location.href = menuItem.url;
+    },
+    closePopover() {
+      this.$refs.popoverRef.hide(); // 关闭 popover
+    },
+  }
+};
+</script>
+<style lang="scss">
+.layout-aside {
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid var(--el-mask-color-extra-light);
+  .logo {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .menu-btn {
+    font-size: 24px;
+    color: #95989d;
+  }
+  .el-tooltip__trigger {
+    text-align: center;
+    padding: 10px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--el-menu-hover-bg-color);
+      .menu-btn {
+        color: var(--el-menu-active-color);
+      }
+    }
+  }
+
+  .menu-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    width: inherit;
+
+    .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: inherit;
+      height: 50px;
+      cursor: pointer;
+      margin: 0;
+      padding: 0;
+    }
+
+    .fixed-menu-list {
+      flex: 1;
+      width: inherit;
+      height: 100%;
+    }
+    .app-box {
+      width: 50px;
+      height: 50px;
+      color: #95989d;
+    }
+    .app-box:hover {
+      background: #eeeefc;
+      color: #3d3ad9;
+    }
+  }
+
+  .menu-container,
+  .footer {
+    p {
+      width: 50px;
+      height: 50px;
+      margin: auto;
+      line-height: 50px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .iconfont {
+      color: inherit;
+      font-size: 18px;
+      padding: 15px;
+    }
+  }
+
+  .setting {
+    transform: rotate(180deg);
+    cursor: pointer;
+  }
+}
+
+.pop-menu {
+  min-width: 104px;
+  height: fit-content;
+  padding: 10px 0;
+  overflow-y: auto;
+  border: 1px solid #eaeaeb;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(39, 40, 42, 0.15);
+
+  // &.side-popover {
+  //     top: 50px !important;
+  //     left: 50px !important;
+  //     max-height: calc(100vh - 80px);
+  // }
+
+  // &.header-popover {
+  //     top: 35px !important;
+  //     right: 76px !important;
+  //     left: auto !important;
+  //     max-height: calc(100vh - 80px);
+  // }
+}
+
+.menu-item {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  color: #6a6d73;
+  cursor: pointer;
+
+  &.fixed {
+    color: #27282a;
+    font-weight: bold;
+
+    .iconfont {
+      color: #3d3ad9;
+      font-weight: normal;
+    }
+
+    .iconfont.iconMinus-Circle {
+      color: #ccccf5;
+    }
+  }
+
+  &:hover {
+    background: #eeeefc;
+    color: #3d3ad9;
+
+    &.fixed .iconfont.iconFixed {
+      display: none !important;
+    }
+
+    .iconfont {
+      display: block !important;
+
+      color: #3d3ad9;
+    }
+  }
+
+  .iconfont {
+    width: 16px;
+    height: 16px;
+    color: #95989d;
+    line-height: 15px;
+
+    &.iconFixed {
+      display: none;
+      color: #9a98eb;
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    &.iconDrag1 {
+      display: none;
+      margin-left: 8px;
+      color: #9a98eb;
+      font-size: 14px;
+      cursor: grab;
+    }
+  }
+
+  .name {
+    flex: 1;
+    margin-left: 8px;
+    overflow: hidden;
+    color: inherit;
+    font-size: 12px;
+    line-height: 32px;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.app-popper {
+  padding: 10px 0 !important;
+  top: 50px !important;
+  .app-title {
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 19px;
+    height: 19px;
+    padding: 0 10px 2px;
+    .iconClose {
+      position: absolute;
+      top: 10px;
+      right: 8px;
+      color: #d5d6d8;
+      font-weight: normal;
+      cursor: pointer;
+      font-size: 16px;
+      &:hover {
+        color: #3d3ad9;
+      }
+    }
+  }
+}
+
+.icon-mmc-s {
+  margin-right: 10px !important;
+  margin-left: -4px;
+}
+</style>
+

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="screen panel-item hidden-sm-and-down"
+       @click="screen">
+
+    <el-dropdown @command="changeBusinessUnit">
+      <div class="bu-list">
+        <el-icon><el-icon-help /></el-icon>{{buName}}
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="item in buList"
+                            :key="item.id"
+                            :command="item.code">{{item.name}}</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      buName: '',
+      buList: [],
+    }
+  },
+  methods: {
+    async changeBusinessUnit(command) {
+      this.buName = command
+      let item = this.buList.find(item => item.code === command)
+      this.$TOOL.data.set('buCode', command)
+      this.$TOOL.data.set('tenantId', item.tenantId)
+      // 检验是否初始化
+      let initialized = await this.$API.auth.initialized.get()
+      this.$TOOL.data.set('zoneInitialized', initialized)
+      if (!initialized) {
+        this.$router.push('/initialization');
+      }
+    }
+  },
+  created() {
+    this.buList = this.$TOOL.data.get('buList')
+
+    let buCode = this.$TOOL.data.get('buCode')
+    let item = this.buList.find(item => item.code === buCode)
+    this.buName = item ? item.name : ''
+    this.changeBusinessUnit(buCode)
+  }
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-dropdown){
+  height: 100%;
+}
+.bu-list{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 100%;
+}
+</style>

package/dist/components/lwLayout/components/iframeView.vue

@@ -0,0 +1,57 @@
+<template>
+	<div v-show="$route.meta.type=='iframe'" class="iframe-pages">
+		<iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url==item.meta.url" :src="item.meta.url" frameborder='0'></iframe>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		watch: {
+			$route(e) {
+				this.push(e)
+			},
+		},
+		created() {
+			this.push(this.$route);
+		},
+		computed:{
+			iframeList(){
+				return this.$store.state.iframe.iframeList
+			},
+			ismobile(){
+				return this.$store.state.global.ismobile
+			},
+			layoutTags(){
+				return this.$store.state.global.layoutTags
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			push(route){
+				if(route.meta.type == 'iframe'){
+					if(this.ismobile || !this.layoutTags){
+						this.$store.commit("setIframeList", route)
+					}else{
+						this.$store.commit("pushIframeList", route)
+					}
+				}else{
+					if(this.ismobile || !this.layoutTags){
+						this.$store.commit("clearIframeList")
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.iframe-pages {width:100%;height:100%;background: #fff;}
+	iframe {border:0;width:100%;height:100%;display: block;}
+</style>

package/dist/components/lwLayout/components/lang.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-dropdown trigger="click"
+               placement="bottom-end"
+               @command="configLang">
+    <el-button circle>
+      <svg xmlns="http://www.w3.org/2000/svg"
+           xmlns:xlink="http://www.w3.org/1999/xlink"
+           role="img"
+           width="1em"
+           height="1em"
+           preserveAspectRatio="xMidYMid meet"
+           viewBox="0 0 512 512">
+        <path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
+              fill="currentColor"></path>
+        <path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
+              fill="currentColor"></path>
+      </svg>
+    </el-button>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="item in lang"
+                          :key="item.value"
+                          :command="item"
+                          :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      config: {
+        lang: this.$TOOL.data.get("APP_LANG") || this.$CONFIG.LANG,
+      },
+      lang: [
+        {
+          name: "简体中文",
+          value: "zh-cn",
+        },
+        {
+          name: "English",
+          value: "en",
+        }
+      ],
+    }
+  },
+  watch: {
+    "config.lang"(val) {
+      this.$i18n.locale = val;
+      this.$i18n.fallbackLocale = val;
+      this.$TOOL.data.set("APP_LANG", val);
+    },
+  },
+  methods: {
+    configLang(command) {
+      this.config.lang = command.value;
+    },
+  }
+}
+</script>
+
+<style>
+</style>

package/dist/components/lwLayout/components/search.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="sc-search">
+		<el-input ref="input" v-model="input" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @input="inputChange"/>
+		<div class="sc-search-history" v-if="history.length>0">
+			<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item" @click="historyClick(item)" @close="historyClose(index)">{{item}}</el-tag>
+		</div>
+		<div class="sc-search-result">
+			<div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div>
+			<ul v-else>
+				<el-scrollbar max-height="366px">
+					<li v-for="item in result" :key="item.path" @click="to(item)">
+						<el-icon><component :is="item.icon || 'el-icon-menu'" /></el-icon>
+						<span class="title">{{ item.breadcrumb }}</span>
+					</li>
+				</el-scrollbar>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				input: "",
+				menu: [],
+				result: [],
+				history: []
+			}
+		},
+		mounted() {
+			var searchHistory = this.$TOOL.data.get("SEARCH_HISTORY") || []
+			this.history = searchHistory
+			var menuTree = this.$TOOL.data.get("MENU")
+			this.filterMenu(menuTree)
+			this.$refs.input.focus()
+		},
+		methods: {
+			inputChange(value){
+				if(value){
+					this.result = this.menuFilter(value)
+				}else{
+					this.result = []
+				}
+			},
+			filterMenu(map){
+				map.forEach(item => {
+					if(item.meta.hidden || item.meta.type=="button"){
+						return false
+					}
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`
+					}
+					if(item.children&&item.children.length > 0&&!item.component){
+						this.filterMenu(item.children)
+					}else{
+						this.menu.push(item)
+					}
+				})
+			},
+			menuFilter(queryString){
+				var res = []
+				//过滤菜单树
+				var filterMenu = this.menu.filter((item) => {
+					if((item.meta.title).toLowerCase().indexOf(queryString.toLowerCase()) >= 0){
+						return true
+					}
+					if((item.name).toLowerCase().indexOf(queryString.toLowerCase()) >= 0){
+						return true
+					}
+				})
+				//匹配系统路由
+				var router = this.$router.getRoutes()
+				var filterRouter= filterMenu.map((m) => {
+					if(m.meta.type == "link"){
+						return router.find(r => r.path == '/'+m.path)
+					}else{
+						return router.find(r => r.path == m.path)
+					}
+				})
+				//重组对象
+				filterRouter.forEach(item => {
+					res.push({
+						name: item.name,
+						type: item.meta.type,
+						path: item.meta.type=="link"?item.path.slice(1):item.path,
+						icon: item.meta.icon,
+						title: item.meta.title,
+						breadcrumb: item.meta.breadcrumb.map(v => v.meta.title).join(' - ')
+					})
+				})
+				return res
+			},
+			to(item){
+				if(!this.history.includes(this.input)){
+					this.history.push(this.input)
+					this.$TOOL.data.set("SEARCH_HISTORY", this.history)
+				}
+				if(item.type=="link"){
+					setTimeout(()=>{
+						let a = document.createElement("a")
+							a.style = "display: none"
+							a.target = "_blank"
+							a.href = item.path
+							document.body.appendChild(a)
+							a.click()
+							document.body.removeChild(a)
+					}, 10);
+				}else{
+					this.$router.push({path: item.path})
+				}
+				this.$emit('success', true)
+			},
+			historyClick(text){
+				this.input = text
+				this.inputChange(text)
+			},
+			historyClose(index){
+				this.history.splice(index, 1);
+				if(this.history.length <= 0){
+					this.$TOOL.data.remove("SEARCH_HISTORY")
+				}else{
+					this.$TOOL.data.set("SEARCH_HISTORY", this.history)
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-search {}
+	.sc-search-no-result {text-align: center;margin: 40px 0;color: #999;}
+	.sc-search-history {margin-top: 10px;}
+	.sc-search-history .el-tag {cursor: pointer;}
+	.sc-search-result {margin-top: 15px;}
+	.sc-search-result li {height:56px;padding:0 15px;background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);list-style:none;border-radius: 4px;margin-bottom: 5px;font-size: 14px;display: flex;align-items: center;cursor: pointer;}
+	.sc-search-result li  i {font-size: 20px;margin-right: 15px;}
+	.sc-search-result li:hover {background: var(--el-color-primary);color: #fff;border-color: var(--el-color-primary);}
+</style>