cloud-web-corejs 1.0.54-dev.630 → 1.0.54-dev.632

package/src/components/xform/form-designer/form-widget/field-widget/status-widget.vue

@@ -1,27 +1,43 @@
 <template>
-  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
-                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
-                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex"
-                     :sub-form-row-id="subFormRowId">
-    <template v-for="(item,index) in field.options.statusParam">
-      <template v-if="fieldModel===item[valueField]">
-        <span v-if="field.options.formScriptEnabled || field.options.commonAttributeEnabled"  :key="index" >{{ getI18nLabel(item[labelField]) }}</span>
-        <span v-else :key="index" class="list-tag" :class="item.type">{{ getI18nLabel(item[labelField]) }}</span>
+  <form-item-wrapper
+    :designer="designer"
+    :field="field"
+    :rules="rules"
+    :design-state="designState"
+    :parent-widget="parentWidget"
+    :parent-list="parentList"
+    :index-of-parent-list="indexOfParentList"
+    :sub-form-row-index="subFormRowIndex"
+    :sub-form-col-index="subFormColIndex"
+    :sub-form-row-id="subFormRowId"
+  >
+    <template v-for="(item, index) in field.options.statusParam">
+      <template v-if="fieldModel === item[valueField]">
+        <span
+          v-if="
+            field.options.formScriptEnabled ||
+            field.options.commonAttributeEnabled
+          "
+          :key="index"
+          >{{ getI18nLabel(item[labelField]) }}</span
+        >
+        <span v-else :key="index" class="list-tag" :class="item.type">{{
+          getI18nLabel(item[labelField])
+        }}</span>
       </template>
     </template>
   </form-item-wrapper>
 </template>
 
 <script>
-import emitter from '../../../../../components/xform/utils/emitter'
+import emitter from "../../../../../components/xform/utils/emitter";
 import i18n from "../../../../../components/xform/utils/i18n";
 import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
-import FormItemWrapper
-  from "../../../../../components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue";
+import FormItemWrapper from "../../../../../components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue";
 
 export default {
   name: "status-widget",
-  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件
   mixins: [emitter, fieldMixin, i18n],
   props: {
     field: Object,
@@ -32,28 +48,26 @@ export default {
 
     designState: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
-    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
-      type: Number,
-      default: -1
+    subFormRowIndex: {
+      /* 子表单组件行索引，从0开始计数 */ type: Number,
+      default: -1,
     },
-    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
-      type: Number,
-      default: -1
+    subFormColIndex: {
+      /* 子表单组件列索引，从0开始计数 */ type: Number,
+      default: -1,
     },
-    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
-      type: String,
-      default: ''
+    subFormRowId: {
+      /* 子表单组件行Id，唯一id且不可变 */ type: String,
+      default: "",
     },
-
   },
   components: {
-    FormItemWrapper
-
+    FormItemWrapper,
   },
-  inject: ['refList', 'globalOptionData', 'globalModel', 'getFormConfig'],
+  inject: ["refList", "globalOptionData", "globalModel", "getFormConfig"],
   data() {
     return {
       oldFieldValue: [], //field组件change之前的值
@@ -62,55 +76,56 @@ export default {
       isH5: false,
       option: {},
       statusParam: [],
-    }
+    };
   },
   computed: {
-    labelField(){
+    labelField() {
       return this.getOptionItemLabelKey();
     },
-    valueField(){
+    valueField() {
       return this.getOptionItemValueKey();
-    }
+    },
   },
   watch: {
     fieldModel(val) {
       this.handleChangeEvent(val);
-    }
+    },
   },
   beforeCreate() {
     /* 这里不能访问方法和属性！！ */
   },
 
   created() {
-
     /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
        需要在父组件created中初始化！！ */
     this.initStatusForDesign();
 
-    this.initFieldModel()
-    this.registerToRefList()
-    this.initEventHandler()
-    this.buildFieldRules()
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
 
-    this.handleOnCreated()
-    this.initOptionItemsHandle()
+    this.handleOnCreated();
+    this.initOptionItemsHandle();
     // this.initStatusParam();
   },
 
   mounted() {
-    this.handleOnMounted()
+    this.handleOnMounted();
   },
 
   beforeDestroy() {
-    this.unregisterFromRefList()
+    this.unregisterFromRefList();
   },
   methods: {
     initStatusForDesign() {
       if (this.designState) {
         let value = null;
         let statusParam = this.field.options.statusParam;
+        let valueField = this.valueField;
         if (statusParam.length) {
-          value = this.field.options.defaultValue ?? (statusParam[0].value ?? 0)
+          value =
+            this.field.options.defaultValue ?? statusParam[0][valueField] ?? 0;
         } else {
           value = 0;
         }
@@ -124,14 +139,18 @@ export default {
     getFieldModelLabel() {
       let label = null;
       let fieldModel = this.fieldModel;
-      let item = this.field.options.statusParam.find(item => item.value === fieldModel)
+      let valueField = this.valueField;
+      let labelField = this.labelField;
+      let item = this.field.options.statusParam.find(
+        (item) => item[valueField] === fieldModel
+      );
       if (item) {
-        label = this.getI18nLabel(item.label);
+        label = this.getI18nLabel(item[labelField]);
       }
       return label;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

package/src/layout/components/Sidebar/default.vue

@@ -1,12 +1,13 @@
 <template>
-  <div :class="{ 'has-logo': showLogo,telescopMenu:!isMenu }">
+  <div :class="{ 'has-logo': showLogo, telescopMenu: !isMenu }">
     <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
 
     <div class="hamburger-box" ref="hamhurger" @click="openUserInfo">
       <!-- <hamburger :is-active="sidebar.opened" @toggleClick="toggleSideBar" /> -->
       <div>
         <p class="name">
-          <i class="iconfont icon-ziyuan"></i><span>{{ userInfo.nickName }}</span>
+          <i class="iconfont icon-ziyuan"></i
+          ><span>{{ userInfo.nickName }}</span>
         </p>
       </div>
     </div>
@@ -57,7 +58,10 @@
           :content="$t1('获取提取码')"
           :placement="direction"
         >
-          <i class="el-icon-setting" @click="showExtractedCodeCreateDialog = true" />
+          <i
+            class="el-icon-setting"
+            @click="showExtractedCodeCreateDialog = true"
+          />
         </el-tooltip>
       </div>
       <div class="item" v-if="isBdAdmin">
@@ -67,7 +71,10 @@
           :content="$t1('查看提取码')"
           :placement="direction"
         >
-          <i class="el-icon-tickets" @click="showExtractedCodeQueryDialog = true" />
+          <i
+            class="el-icon-tickets"
+            @click="showExtractedCodeQueryDialog = true"
+          />
         </el-tooltip>
       </div>
 
@@ -99,7 +106,10 @@
               <i :class="getMenuClass(router2, 2)"></i
               ><span>{{ getMenuName(router2) }}</span>
             </div>
-            <dl v-for="(router3, index3) in router2.children" :key="'router3' + index3">
+            <dl
+              v-for="(router3, index3) in router2.children"
+              :key="'router3' + index3"
+            >
               <div
                 class="item"
                 v-if="!router3.hidden"
@@ -125,8 +135,9 @@
       :collapse="!isMenu"
     >
       <el-scrollbar wrap-class="scrollbar-wrapper" id="menuUl">
-        <el-submenu
+        <component
           v-for="menuModule in menuModules"
+          :is="getMenuType(menuModule)"
           :index="'' + menuModule.id"
           :key="'menuModule' + menuModule.id"
           @click.native="rourteTo(menuModule)"
@@ -135,25 +146,42 @@
             <i :class="getMenuClass(menuModule, 1)"></i>
             <span>{{ getMenuName(menuModule) }}</span>
           </template>
-          <el-menu-item
-            v-for="(router1, index1) in menuModule.children"
+          <component
+            v-for="(router2, index1) in menuModule.children"
+            :is="getMenuType(router2)"
             :key="index1"
-            :index="'' + router1.id"
-            :class="getMenuClass(router1, 2)"
-            @mouseenter.native="showNav(router1, $event)"
+            :index="'' + router2.id"
+            @mouseenter.native="showNav(router2, $event)"
             @mouseleave.native="showNav()"
-            @click="rourteTo(router1)"
+            @click="rourteTo(router2)"
           >
-            {{ getMenuName(router1) }}
-            <i class="el-icon-caret-right" v-if="router1.children.length > 0" />
-          </el-menu-item>
-        </el-submenu>
-        <el-submenu @click.native="openCreateCompanyDialog" index="xx" v-if="isFormDev">
+            <template slot="title">
+              <i :class="getMenuClass(router2, 2)"></i>
+              <span>{{ getMenuName(router2) }}</span>
+            </template>
+            <el-menu-item
+              v-for="(router3, index3) in router2.children"
+              :key="index3"
+              :index="'' + router3.id"
+              @click="rourteTo(router3)"
+            >
+              <template slot="title">
+                <i :class="getMenuClass(router3, 3)"></i>
+                <span>{{ getMenuName(router3) }}</span>
+              </template>
+            </el-menu-item>
+          </component>
+        </component>
+        <el-menu-item
+          @click.native="openCreateCompanyDialog"
+          index="xx"
+          v-if="isFormDev"
+        >
           <template slot="title">
             <i :class="getMenuClass({}, 1)"></i>
             <span>新建企业</span>
           </template>
-        </el-submenu>
+        </el-menu-item>
       </el-scrollbar>
     </el-menu>
     <div class="menu-btn">
@@ -270,8 +298,8 @@ export default {
   props: {
     option: Object,
     isMenu: {
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
   components: {
     userInfo,
@@ -373,6 +401,13 @@ export default {
     this.getBdEnv();
   },
   methods: {
+    getMenuType(item) {
+      if (item.children && item.children.length > 0) {
+        return "el-submenu";
+      } else {
+        return "el-menu-item";
+      }
+    },
     getBdEnv() {
       getBdFlag({
         success: (res) => {
@@ -436,7 +471,10 @@ export default {
       if (match) {
         const customReqUrl = decodeURIComponent(match[1]);
         // 移除匹配到的参数部分
-        const newUrl = url.replace(match[0], match[0].startsWith("?") ? "?" : "");
+        const newUrl = url.replace(
+          match[0],
+          match[0].startsWith("?") ? "?" : ""
+        );
 
         return {
           custom_req_url: customReqUrl,
@@ -602,7 +640,9 @@ export default {
     // 异步树叶子节点懒加载逻辑
     loadNode(node, resolve) {
       let companyCode =
-        node && node.data && node.data.companyCode ? node.data.companyCode || "" : "";
+        node && node.data && node.data.companyCode
+          ? node.data.companyCode || ""
+          : "";
       let url = !companyCode
         ? USER_PREFIX + "/user_company_info/getAllList"
         : USER_PREFIX + "/user_company_info/getChildren";
@@ -730,6 +770,7 @@ export default {
       this.showUserInfoDialog = true;
     },
     showNav(route, event) {
+      if (!this.isMenu) return;
       let id = route && route.id ? route.id : null;
       if (id != null) {
         if (!route.children || !route.children.length) {
@@ -742,7 +783,7 @@ export default {
           let dom = event.target;
           let domAttr = dom.getBoundingClientRect();
           // var sh1 = dom.offsetTop;
-          var sh1 = domAttr.top;
+          var sh1 = domAttr.top + 10;
           let $snav = this.$refs["seconMenus" + id][0];
           let snavAttr = $snav.getBoundingClientRect();
 
@@ -755,10 +796,11 @@ export default {
           if (sh >= 0) {
             $snav.style["margin-top"] = sh1 + "px";
           } else if (sh < 0) {
-            let bd = sh1 + sh;
+            let bd = sh1 + sh ;
 
             $snav.style["margin-top"] = bd + "px";
-            $snav.querySelector(".ico-arrow").style["margin-top"] = sh1 - bd + "px";
+            $snav.querySelector(".ico-arrow").style["margin-top"] =
+              sh1 - bd + "px";
           }
         });
       } else {
@@ -848,7 +890,6 @@ export default {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.65);
 
-
   > div {
     color: #fff;
     font-size: 13px;
@@ -916,7 +957,12 @@ export default {
   text-align: center;
 
   p {
-    margin: 0;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    margin: 0;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
 }
 
@@ -1053,16 +1099,66 @@ export default {
       &.is-opened .el-submenu__title {
         //background-color: rgba(27, 66, 97) !important;
       }
+      .el-submenu .el-menu{display:none}
     }
 
     .el-submenu {
+      &.is-opened{
+        > .el-submenu__title{background-color:rgba(0, 0, 0, 0.29) !important}
+      }
       .el-menu {
         background: rgba(0, 0, 0, 0.35) !important;
         box-shadow: 0px -5px 8px #00000014 inset;
         //padding:4px 0;
+        .el-submenu__title{
+          height: auto;
+          line-height: 1.4;
+          font-size: 12px;
+          opacity: 0.8;
+          margin: 10px 0 10px 14px;
+          padding: 7px 2px 7px 33px !important;
+          border-radius: 8px;
+          text-align: left;
+          min-width: 81px !important;
+          white-space: normal;
+          margin-right: 10px;
+          word-break: break-word;
+          i.iconfont {
+            position: absolute;
+            top: 50%;
+            height: 20px;
+            margin-top: -10px;
+            line-height: 20px;
+            left: 7px;
+            font-size: 18px;
+          }
+
+          [class^="el-icon-"] {
+            font-size: 12px;
+            color: #fff;
+            position: absolute;
+            right: 2px;
+            top: 50%;
+            margin-top: -5px;
+            width: 14px;
+            zoom: 0.8;
+            display: none;
+          }
+          span{height:auto;text-align: left !important;}
+          &:hover,
+          &.on {
+            opacity: 1;
+            background-color: #fbfdfe !important;
+            color: $baseColor !important;
+            i.iconfont{color:$baseColor}
+            .el-icon-arrow-right {
+              color: $baseColor;
+            }
+          }
+        }
       }
 
-      .el-menu-item {
+      .el-menu-item{
         height: auto;
         line-height: 1.4;
         padding-left: 33px !important;
@@ -1077,7 +1173,7 @@ export default {
         margin-right: 10px;
         word-break: break-word;
 
-        &:before {
+        i.iconfont {
           position: absolute;
           top: 50%;
           height: 20px;
@@ -1085,6 +1181,7 @@ export default {
           line-height: 20px;
           left: 7px;
           font-size: 18px;
+          color:#D0D6DB;
         }
 
         [class^="el-icon-"] {
@@ -1097,6 +1194,7 @@ export default {
           width: 14px;
           zoom: 0.8;
           display: none;
+
         }
 
         &:hover,
@@ -1105,7 +1203,7 @@ export default {
           background-color: #fbfdfe !important;
           color: $baseColor !important;
 
-          .el-icon-arrow-right {
+          .el-icon-arrow-right,i.iconfont {
             color: $baseColor;
           }
         }
@@ -1429,4 +1527,51 @@ export default {
 // .el-submenu .el-menu {
 //   height: auto !important;
 // }
+.el-menu--vertical{
+   > .el-menu--popup{overflow: hidden;
+    > .el-submenu,> .el-menu-item{
+      .el-submenu__title{
+        height: auto;
+        line-height: 1.4;
+        opacity: 0.8;
+        margin: 10px 0 10px 14px;
+        padding: 7px 2px 7px 12px !important;
+        border-radius: 8px;
+        text-align: left;
+        min-width: 81px !important;
+        white-space: normal;
+        margin-right: 10px;
+        word-break: break-word;
+        &:hover{
+          background:#FFF;
+          i.iconfont{color:$baseColor}
+        }
+      }
+      &.is-opened{
+        > .el-submenu__title{background-color:#FFF !important;opacity: 1;
+          span{color:$baseColor}
+          i.iconfont{color:$baseColor}
+        }
+      }
+    }
+
+   }
+  .el-submenu,.el-menu-item {
+    .el-submenu__title{
+      height:36px;line-height:36px;
+      .el-submenu__icon-arrow{display:none}
+
+      &:hover{background:#16344D;
+
+      }
+    }
+    &:hover{
+      > i.iconfont{color:$baseColor}
+    }
+    i.iconfont{color:#FFF;margin-right:8px;}
+    &.is-opened{
+      .el-submenu__title{background-color:rgba(0, 0, 0, 0.29) !important}
+    }
+  }
+}
 </style>