lab_qyk 发布系统代码

app_Web/src/components/app-breadcrumb/app-breadcrumb.vue

@@ -9,7 +9,7 @@
         :key="item.path"
       >
         <span
-          v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
+          v-if="index === breadcrumbs.length-1"
           class="no-redirect"
         >{{  $t(item.meta.caption) }}</span>
         <a
@@ -22,64 +22,57 @@
 </template>
 
 <script lang="ts">
-import { compile } from 'path-to-regexp'
 import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
 import { RouteRecord, Route } from 'vue-router'
 
 @Component({
-  name: 'Breadcrumb'
 })
-export default class extends Vue {
-  private breadcrumbs: RouteRecord[] = []
+export default class Breadcrumb extends Vue {
 
+  private breadcrumbs: RouteRecord[] = [];  //面包屑列表
   
-  @Prop() public defPSAppView?: any;
+  @Prop() public defPSAppView: any; //默认视图
 
+  /**
+   * 监听路由
+   *
+   * @memberof Breadcrumb
+   */
   @Watch('$route')
   private onRouteChange(route: Route) {
-    // if you go to the redirect page, do not update the breadcrumbs
-    if (route.path.startsWith('/redirect/')) {
-      return
-    }
     this.getBreadcrumb()
   }
 
+  /**
+   * vue  生命周期
+   *
+   * @memberof Breadcrumb
+   */
   created() {
     this.getBreadcrumb()
   }
 
+  /**
+   * 获取面包屑数据
+   * 
+   * @memberof Breadcrumb
+   */
   private getBreadcrumb() {
-    let matched = this.$route.matched.filter((item) => item.meta && item.meta.caption)
-    const first = matched[0]
-    if (!this.isDashboard(first)) {
-      matched = [{ path: "/index/:index?", meta: { 
-                caption: 'app.views.index.caption',
-                viewType: 'APPINDEX',
-                parameters: [
-                    { pathName: 'index', parameterName: 'index' },
-                ],
-                requireAuth: true, } } as RouteRecord].concat(matched)
-    }
-    this.breadcrumbs = matched.filter((item) => {
-      return item.meta && item.meta.caption && item.meta.breadcrumb !== false
+    this.breadcrumbs = this.$route.matched.filter((item) => {
+        return item.meta && item.meta.caption
       })
+    if(this.defPSAppView){
+      /**如果配置了默认视图,给面包屑第一级赋值默认视图为首页 */
     }
-
-  private isDashboard(route: RouteRecord) {
-    const name = route && route.meta.parameters[0].pathName;
-    if (!name) {
-      return false
-    }
-    return name.trim().toLocaleLowerCase() === 'index'.toLocaleLowerCase()
-  }
-
-  private pathCompile(item: any) {
-    const { params, path, query } = item;
-    return { params, path, query };
   }
 
+  /**
+   * 单机面包屑
+   * 
+   * @memberof Breadcrumb
+   */
   private handleLink(item: any) {
-    this.$router.push(this.pathCompile(item)).catch(err => {
+    this.$router.push(item).catch(err => {
       console.warn(err);
     });
   }

app_Web/src/components/tab-page-exp/tab-page-exp.less

@@ -87,28 +87,96 @@
 //     opacity: 0;
 // }
 .ibiz-page-tag {
+    position: relative;
+    .contextmenu {
+        margin: 0;
+        background: #fff;
+        z-index: 3000;
+        position: absolute;
+        list-style-type: none;
+        padding: 5px 0;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #333;
+        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    
+        li {
+          margin: 0;
+          padding: 7px 16px;
+          cursor: pointer;
+    
+          &:hover {
+            background: #eee;
+          }
+        }
+      }
+    .left{
+        .el-tabs__header{
+            padding-right:120px;
+        }
+    }
+    .right{
+        position: absolute;
+        right:0px;
+        top:0px;
+        width:120px;
+        margin:5px 0px;
+        display: flex;
+        justify-content: center;
+    }
+    >.tag-tabs{
+        background-color: #F0F0F0 !important;
         .el-tabs{
+            .el-tabs__nav-scroll{
+            }
             .el-tabs__nav{
                 padding:0px 10px;
                 border:none;
             }
+            .el-tabs__active-bar{
+                background-color: transparent !important;
+            }
             .el-tabs__item{
-            color:#ccc;
-            border:none;
+                height: 32px;
+                line-height: 32px;
+                border: 1px solid #e8eaec!important;
+                color: #515a6e!important;
+                background: #fff!important;
+                padding: 0 12px;
+                display: inline-block;
+                margin: 4px 4px 4px 0;
+                border-radius: 3px;
+                font-size: 12px;
+                vertical-align: middle;
+                opacity: 1;
+                overflow: hidden;
+                .ivu-tag-dot-inner{
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    margin-right: 8px;
+                    border-radius: 50%;
+                    background: #e8eaec;
+                    position: relative;
+                    top: 1px;
+                }
             }
             .el-tabs__item:hover{
                 color:#409eff;
             }
             .is-active{
                 color:#409eff;
-            border-bottom:2px solid #409eff !important;    
+                .ivu-tag-dot-inner{
+                    background-color:#409eff !important;
                 }
-        .el-tabs__nav-scroll{
-            background-color: white;
+                border-bottom:2px solid transparent !important; 
             }
             .el-tabs__header{
                 box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
                 margin:0 0 1 0;
             }
         }
+    }
+   
 }
\ No newline at end of file

app_Web/src/components/tab-page-exp/tab-page-exp.vue

 <template>
   <div class="ibiz-page-tag">
+    <div class="tag-tabs left">
       <el-tabs
         type="card"
         @tab-click="changePage"
         v-model="editableTabsValue"
         closable 
         @tab-remove="onClose"
+        @contextmenu.prevent.native="openMenu($event)"
       >
         <el-tab-pane
           v-for="(meta, index) of $store.state.pageMetas"
-        :label="getCaption(meta.caption, meta.info)"
           :name="index+''"
           :key="index+''"
-      ></el-tab-pane>
+         
+        >
+        <span slot="label"><span class="ivu-tag-dot-inner"></span>{{ getCaption(meta.caption, meta.info) }}</span>
+        </el-tab-pane>
       </el-tabs>
     </div>
+    <ul
+      v-show="visible"
+      :style="{left: left+'px', top: top+'px'}"
+      class="contextmenu"
+    >
+      <li v-for="(item,index) in actions" @click="handlerClose(item)">
+        {{ $t(item.text) }}
+      </li>
+    </ul>
+    <div v-show="$store.state.pageMetas.length > 0" class="right">
+      <el-dropdown @command="handlerClose">
+        <el-button size="mini" type="primary">
+          更多<i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item :command="item" v-for="(item,index) in actions">{{ $t(item.text) }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -23,16 +47,49 @@ import { Environment } from "../../environments/environment";
 
 @Component({})
 export default class TabPageExp extends Vue {
+
   @Provide()
   public styleLeft: number = 0;
 
+  private visible = false;  //右键菜单显示状态
+
+  private top = 0;  //菜单距离顶部位置
+
+  private left = 0; //菜单距离左侧位置
+
   @Provide()
   public actions: any[] = [
     { text: "app.tabpage.closeall", value: "closeAll" },
     { text: "app.tabpage.closeother", value: "closeOther" }
   ];
 
-  public editableTabsValue: any = "";
+  /**
+   * 关闭tab页方法
+   */
+  public handlerClose(item: any){
+    this.visible = false;
+    this.doTagAction(item.value);
+  }
+
+  /**
+   * 打开右键菜单
+   */
+  private openMenu(e: MouseEvent) {
+    const menuMinWidth = 105;
+    const offsetLeft = this.$el.getBoundingClientRect().left;
+    const offsetWidth = (this.$el as HTMLElement).offsetWidth;
+    const maxLeft = offsetWidth - menuMinWidth;
+    const left = e.clientX - offsetLeft - 15;
+    if (left > maxLeft) {
+      this.left = maxLeft;
+    } else {
+      this.left = left;
+    }
+    this.top = e.clientY - 45;
+    this.visible = true;
+  }
+
+  public editableTabsValue: any = ""; //tabs页绑定值
 
   @Watch("$route")
   public onRouteChange(newVal: any) {

app_Web/src/engine/view/edit-view-engine.ts

@@ -101,7 +101,7 @@ export default class EditViewEngine extends ViewEngine {
      * @memberof EditViewEngine
      */
     public onFormLoad(arg: any): void {
-        this.view.model.dataInfo = Object.is(arg.srfuf, '1') ? arg.srfmajortext : '新建';
+        this.view.model.dataInfo = Object.is(arg.srfuf, '1') ? (this.majorPSDEField?arg[this.majorPSDEField]:arg.srfmajortext) : this.view.$t('app.local.new');
 
         this.setTabCaption(this.view.model.dataInfo);
         const newdata: boolean = !Object.is(arg.srfuf, '1');
@@ -115,7 +115,7 @@ export default class EditViewEngine extends ViewEngine {
      * @memberof EditViewEngine
      */
     public onFormSave(arg: any): void {
-        this.view.model.dataInfo = Object.is(arg.srfuf, '1') ? arg.srfmajortext : '新建';
+        this.view.model.dataInfo = Object.is(arg.srfuf, '1') ? (this.majorPSDEField?arg[this.majorPSDEField]:arg.srfmajortext) : this.view.$t('app.local.new');
 
         this.setTabCaption(this.view.model.dataInfo);
         const newdata: boolean = !Object.is(arg.srfuf, '1');
@@ -248,7 +248,7 @@ export default class EditViewEngine extends ViewEngine {
     public setTabCaption(info: string): void {
         let viewdata: any = this.view.model;
         if (viewdata  && info && !Object.is(info, '') && this.view.$tabPageExp && (viewdata.srfTitle.indexOf(" - ") === -1)) {
-            this.view.$tabPageExp.setCurPageCaption(viewdata.srfCaption, viewdata.srfTitle, info);
+            this.view.$tabPageExp.setCurPageCaption(viewdata.srfTitle, viewdata.srfTitle, info);
             this.view.model.srfTitle = `${this.view.$t(viewdata.srfTitle)} - ${viewdata.dataInfo}`;
         }
     }

app_Web/src/locale/index.ts

@@ -26,7 +26,8 @@ vueApp.locale = () => { };
 
 const i18n = new VueI18n({
     locale: lang,
-    messages
+    messages,
+    silentTranslationWarn:true
 });
 
 export default i18n;

app_Web/src/locale/lang/en-US.ts

@@ -25,6 +25,9 @@ export default {
             ok: 'OK',
             cancel: 'Cancel',
         },
+        local:{
+            new: 'New'
+        },
         gridpage: {
             choicecolumns: 'Choice columns',
             refresh: 'refresh',

app_Web/src/locale/lang/zh-CN.ts

@@ -25,6 +25,9 @@ export default {
             ok: '确认',
             cancel: '取消',
         },
+        local:{
+            new: '新建'
+        },
         gridpage: {
             choicecolumns: '选择列',
             refresh: '刷新',