lw-cdp-ui 1.4.9 → 1.4.11

package/dist/components/lwFormJson/index.vue

@@ -1,22 +1,14 @@
 <template>
   <el-container :style="{ maxHeight }">
-    <el-aside v-if="!hideModule"
-              width="200px"
-              class="form-json-body">
+    <el-aside v-if="!hideModule" width="200px" class="form-json-body">
       <div class="menu-list">
         <el-collapse v-model="activeNames">
-          <el-collapse-item v-for="item in menuList"
-                            :title="item.title"
-                            :name="item.title"
-                            class="menu-list-title">
-            <draggable class="menu-list-group"
-                       :list="item.list"
-                       :group="{ name: 'people', pull: 'clone', put: false }"
-                       :clone="cloneItem"
-                       item-key="name">
+          <el-collapse-item v-for="item in menuList" :title="item.title" :name="item.title" :key="item.title"
+            class="menu-list-title">
+            <draggable class="menu-list-group" :list="item.list" :group="{ name: 'people', pull: 'clone', put: false }"
+              :clone="cloneItem" item-key="name">
               <template #item="{ element }">
-                <div v-if="!element?.hide"
-                     class="list-group-item">
+                <div v-if="!element?.hide" class="list-group-item">
                   {{ element.label }}
                 </div>
               </template>
@@ -29,25 +21,14 @@
     <el-container>
       <!-- <el-header v-if="hideTool">暂未开发工具栏</el-header> -->
       <el-main class="form-json-body">
-        <el-form ref="form"
-                 @click.capture="back(config)"
-                 :model="form"
-                 :label-width="config.labelWidth"
-                 :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition"
-                 v-loading="loading"
-                 :disabled="isView"
-                 element-loading-text="Loading...">
+        <el-form ref="form" @click.capture="back(config)" :model="form" :label-width="config.labelWidth"
+          :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition" v-loading="loading"
+          :disabled="isView" element-loading-text="Loading...">
           <el-row :gutter="10">
-            <JsonItem :formItems="config.formItems"
-                      :hideBorder="hideBorder"
-                      :form="form"
-                      :custom="custom"
-                      @curClick="selectItem">
-              <template v-for="item in custom"
-                        v-slot:[item.component]="{ itemCur, formCur }">
-                <slot :name="item.component"
-                      :itemCur="itemCur"
-                      :formCur="formCur"></slot>
+            <JsonItem :formItems="config.formItems" :hideBorder="hideBorder" :form="form" :custom="custom"
+              @curClick="selectItem">
+              <template v-for="item in custom" v-slot:[item.component]="{ itemCur, formCur }">
+                <slot :name="item.component" :itemCur="itemCur" :formCur="formCur"></slot>
               </template>
             </JsonItem>
           </el-row>
@@ -56,11 +37,8 @@
       </el-main>
     </el-container>
 
-    <el-aside v-if="!hideConfig"
-              width="300px"
-              class="aside-right">
-      <StatsConfig :item="curItem"
-                   :config="config" />
+    <el-aside v-if="!hideConfig" width="300px" class="aside-right">
+      <StatsConfig :item="curItem" :config="config" />
     </el-aside>
   </el-container>
 </template>
@@ -103,7 +81,7 @@ export default {
      *         label: '选项2'
      *       }]
      *     }
-     *     ...  
+     *     ...
      *   }]
      *   labelWidth: '100px', // 表单域标签的宽度
      *   labelPosition: 'top', // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
@@ -326,6 +304,7 @@ export default {
     border-top: 0;
     background-color: var(--color-white);
   }
+
   .menu-list-title {
     :deep(.el-collapse-item__header) {
       font-weight: bold;
@@ -333,14 +312,17 @@ export default {
       background-color: var(--el-menu-bg-color);
     }
   }
+
   :deep(.el-collapse-item__content) {
     padding-bottom: 10px;
   }
+
   .menu-list-group {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     padding: 10px;
+
     .list-group-item {
       width: calc(50% - 5px);
       background-color: var(--el-fill-color-light);
@@ -358,8 +340,9 @@ export default {
   border-left: 1px solid var(--el-border-color-light);
   background-color: var(--color-white);
 }
+
 .form-json-body {
   max-height: calc(100vh - 137px);
   background-color: var(--color-white);
 }
-</style>
+</style>

package/dist/components/lwLayout/components/tags.vue

@@ -1,34 +1,32 @@
 <template>
   <div class="adminui-tags">
-    <draggable v-model="$store.state.viewTags.viewTags"
-               @change="changeTages"
-               class="context-menu-list"
-               ref="tags"
-               itemKey="name">
-      <template #item="{element: tag, index}"
-                keyName="tag">
-        <li v-bind:key="tag"
-            :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]"
-            @contextmenu.prevent="openContextMenu($event, tag)">
+    <!-- 左滚动箭头 -->
+    <div v-if="iconVisible" class="scroll-arrow left" @click="scrollLeft">
+      <el-icon><el-icon-arrow-left /></el-icon>
+    </div>
+    <draggable v-model="$store.state.viewTags.viewTags" @change="changeTages" class="context-menu-list" ref="tags"
+      itemKey="name">
+      <template #item="{ element: tag, index }" keyName="tag">
+        <li v-bind:key="tag" :class="[isActive(tag) ? 'active' : '', tag.meta.affix ? 'affix' : '']"
+          @contextmenu.prevent="openContextMenu($event, tag)">
           <router-link :to="tag">
             <span>{{ getIdName(tag) }}</span>
-            <el-icon v-if="!tag.meta.affix"
-                     @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close /></el-icon>
+            <el-icon v-if="!tag.meta.affix" @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close /></el-icon>
           </router-link>
         </li>
       </template>
     </draggable>
+    <!-- 右滚动箭头 -->
+    <div v-if="iconVisible" class="scroll-arrow right" @click="scrollRight">
+      <el-icon><el-icon-arrow-right /></el-icon>
+    </div>
   </div>
 
   <transition name="el-zoom-in-top">
-    <ul v-if="contextMenuVisible"
-        :style="{left:left+'px',top:top+'px'}"
-        class="contextmenu"
-        id="contextmenu">
+    <ul v-if="contextMenuVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu" id="contextmenu">
       <li @click="refreshTab()"><el-icon><el-icon-refresh /></el-icon>刷新</li>
       <hr>
-      <li @click="closeTabs()"
-          :class="contextMenuItem.meta.affix?'disabled':''">
+      <li @click="closeTabs()" :class="contextMenuItem.meta.affix ? 'disabled' : ''">
         <el-icon><el-icon-close /></el-icon>关闭标签
       </li>
       <li @click="closeOtherTabs()">
@@ -57,6 +55,7 @@ export default {
       contextMenuItem: null,
       left: 0,
       top: 0,
+      iconVisible: false,
       tipVisible: false,
       tipDisplayed: false,
       menu: this.$router.sc_getMenu()
@@ -112,6 +111,10 @@ export default {
 
     // 将方法挂载到全局
     this.$store.state.viewTags.closeTagAndJump = this.closeTagAndJump
+
+    window.addEventListener('resize', () => {
+      this.changeLeftRight()
+    })
   },
   mounted() {
     this.scrollInit()
@@ -157,6 +160,9 @@ export default {
         this.$tool.data.set('RouteTags', this.$store.state.viewTags.viewTags)
       }
 
+      this.changeLeftRight()
+    },
+    changeLeftRight() {
       //判断标签容器是否出现滚动条
       this.$nextTick(() => {
         const tags = document.querySelector(".context-menu-list")
@@ -168,6 +174,9 @@ export default {
           if (!this.tipDisplayed) {
             this.tipVisible = true
           }
+          this.iconVisible = true
+        } else {
+          this.iconVisible = false
         }
       })
     },
@@ -181,7 +190,7 @@ export default {
       if (item.children) {
         item = item.children[0]
       }
-      
+
       // 兼容合并菜单
       if (item.meta?.code && item.meta?.code != this.$config.APP_NAME.toLowerCase()) {
         item.path = `/i/${item.name}`
@@ -203,6 +212,8 @@ export default {
           this.$router.push({ path: item.path })
         }
       }
+
+      this.changeLeftRight()
     },
     //tag右键
     openContextMenu(e, tag) {
@@ -338,7 +349,27 @@ export default {
         return tag.meta.title
       }
 
-    }
+    },
+    // 左滚动
+    scrollLeft() {
+      this.scroll(-200);
+    },
+
+    // 右滚动
+    scrollRight() {
+      this.scroll(200);
+    },
+
+    // 执行滚动
+    scroll(offset) {
+      const container = document.querySelector('.context-menu-list');
+      if (container) {
+        container.scrollBy({
+          left: offset,
+          behavior: 'smooth'
+        });
+      }
+    },
   }
 }
 </script>
@@ -356,6 +387,7 @@ export default {
   list-style-type: none;
   padding: 10px 0;
 }
+
 .contextmenu hr {
   margin: 5px 0;
   border: none;
@@ -363,6 +395,7 @@ export default {
   font-size: 0px;
   background-color: var(--el-border-color-light);
 }
+
 .contextmenu li {
   display: flex;
   align-items: center;
@@ -372,14 +405,17 @@ export default {
   padding: 0 17px;
   color: #606266;
 }
+
 .contextmenu li i {
   font-size: 14px;
   margin-right: 10px;
 }
+
 .contextmenu li:hover {
   background-color: var(--el-color-primary-light-9);
   color: var(--el-color-primary);
 }
+
 .contextmenu li.disabled {
   cursor: not-allowed;
   color: #bbb;
@@ -389,6 +425,7 @@ export default {
 .tags-tip {
   padding: 5px;
 }
+
 .tags-tip p {
   margin-bottom: 10px;
 }

package/dist/components/lwSearch/index.vue

@@ -1,36 +1,23 @@
 <template>
   <div class="lw-search-card">
     <div class="search-content">
-      <el-form ref="searchForm"
-               :model="form"
-               @submit.prevent
-               :label-align="labelAlign"
-               style="width: 100%">
-        <el-row :class="[isExpandRow ? 'expand-row' : '']"
-                :gutter="10">
-          <template v-for="(item, index) in defaultOptions"
-                    :key="item.prop">
+      <el-form ref="searchForm" :model="form" @submit.prevent :label-align="labelAlign" style="width: 100%">
+        <el-row :class="[isExpandRow ? 'expand-row' : '']" :gutter="10">
+          <template v-for="(item, index) in defaultOptions" :key="item.prop">
             <el-col :class="[isDefaultShow(index) ? '' : isExpandStatus ? '' : 'hide']"
-                    :span="item?.span ? item.span : 6">
-              <el-form-item :label-width="hideLabel ? 0 : labelWidth"
-                            :required="item.required"
-                            :label="hideLabel ? '' : $t(item.label)">
+              :span="item?.span ? item.span : 6">
+              <el-form-item :label-width="hideLabel ? 0 : labelWidth" :required="item.required"
+                :label="hideLabel ? '' : $t(item.label)">
 
                 <!-- cascader 组个组件有问题  动态加载下拉文字不会显示 -->
                 <template v-if="item.component == 'cascader'">
-                  <el-cascader v-model="form[item.name]"
-                               style="width: 100%;"
-                               :props="item?.options?.props"
-                               :separator="item?.options?.separator"
-                               :disabled="item?.options?.disabled"
-                               :options="item?.options.items"
-                               clearable></el-cascader>
+                  <el-cascader v-model="form[item.name]" style="width: 100%;" :props="item?.options?.props"
+                    :separator="item?.options?.separator" :disabled="item?.options?.disabled"
+                    :options="item?.options.items" clearable></el-cascader>
                 </template>
                 <!-- 动态组件 -->
                 <template v-else-if="componentType.includes(item.component)">
-                  <FormComponent v-model="form[item.name]"
-                                 :item="item"
-                                 :disabled="item?.options?.disabled" />
+                  <FormComponent v-model="form[item.name]" :item="item" :disabled="item?.options?.disabled" />
                 </template>
               </el-form-item>
             </el-col>
@@ -38,19 +25,14 @@
         </el-row>
 
         <div class="control">
-          <el-button text
-                     bg
-                     type="primary"
-                     @click="resetForm('searchForm')">
-            {{$t('btn.reset')}}
+          <el-button text bg type="primary" @click="resetForm('searchForm')">
+            {{ $t('btn.reset') }}
           </el-button>
-          <el-button type="primary"
-                     @click="submitForm('searchForm')">
-            {{$t('btn.query')}}
+          <el-button type="primary" @click="submitForm('searchForm')">
+            {{ $t('btn.query') }}
           </el-button>
 
-          <div :class="isExpandNumber ? 'expand-button' : 'hidden'"
-               @click="handleExpandStatus()">
+          <div :class="isExpandNumber ? 'expand-button' : 'hidden'" @click="handleExpandStatus()">
             <span>{{ isExpandStatus ? "收起" : "展开" }}</span>
           </div>
         </div>
@@ -190,10 +172,10 @@ export default {
     // 用来兼容旧配置
     defaultOptions() {
       return this.options.map(item => {
-        const {label, span, prop: name, renderType: component, placeholder = label, ...other} = item || {}
-        const componentObj = {label, name, component, span}
+        const { label, span, prop: name, renderType: component, placeholder = label, ...other } = item || {}
+        const componentObj = { label, name, component, span }
 
-        const baseOptions = {placeholder, ...other}
+        const baseOptions = { placeholder, ...other }
 
         switch (component) {
           case 'dateRange':
@@ -213,7 +195,7 @@ export default {
               ...componentObj,
               options: {
                 ...baseOptions,
-                items: item.options.map(x => ({
+                items: item.options?.map(x => ({
                   label: x[item.labelKey || 'label'],
                   value: x[item.valueKey || 'value']
                 }))
@@ -308,6 +290,7 @@ export default {
   width: 100%;
   background: var(--color-bg-2);
   overflow: hidden;
+
   .arco-col {
     margin: 5px 0;
     padding: 0 !important;
@@ -377,7 +360,7 @@ export default {
         padding-right: 5px;
         cursor: pointer;
 
-        & > span {
+        &>span {
           color: #505050;
           font-size: 12px;
         }
@@ -403,13 +386,13 @@ export default {
           width: 84px;
           height: 30px;
 
-          & > span {
+          &>span {
             padding-right: 10px;
             padding-left: 10px;
             border-right: 1px solid #fff;
           }
 
-          & > i {
+          &>i {
             padding-left: 10px;
           }
         }
@@ -428,6 +411,7 @@ export default {
         font-size: 12px;
         user-select: none;
       }
+
       // .arco-select__tags-text {
       //   max-width: 80px !important;
       // }
@@ -435,8 +419,9 @@ export default {
         width: 100%;
 
         .el-select__tags {
+
           // max-width: calc(100% - 0px) !important;
-          & > span {
+          &>span {
             max-width: 100%;
 
             .el-tag--info {
@@ -449,6 +434,7 @@ export default {
               }
 
               &:nth-child(2) {
+
                 // display: none;
                 .arco-select__tags-text {
                   max-width: 100% !important;
@@ -468,7 +454,7 @@ export default {
         display: flex;
         flex-wrap: nowrap;
 
-        & > span {
+        &>span {
           display: flex;
           flex-wrap: nowrap;
         }