three-trees-ui 1.0.99 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-trees-ui",
-  "version": "1.0.99",
+  "version": "1.1.1",
   "publicPath": "/ui",
   "author": "hotent",
   "private": false,
@@ -33,9 +33,8 @@
   ],
   "dependencies": {
     "element-resize-detector": "^1.2.3",
-    "v-viewer": "^1.7.4",
-    "vee-validate": "2.1.7",
-    "viewerjs": "^1.11.7"
+    "v-viewer": "1.6.4",
+    "vee-validate": "2.1.7"
   },
   "peerDependencies": {
     "axios": "^0.21.1",
@@ -64,9 +63,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.0",
-    "@babel/runtime-corejs3": "^7.19.0",
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.19.0",
+    "@babel/runtime-corejs3": "^7.19.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-plugin-unit-jest": "^4.0.5",

package/packages/Collapse/src/HtCollapse.vue

@@ -1,8 +1,8 @@
 <template>
   <el-collapse
     ref="collapse"
-    v-model="openDefaultArr"
     :accordion="accordion"
+    :value="openDefaultArr"
     @change="handleChange"
   >
     <slot></slot>
@@ -15,7 +15,6 @@
     name: 'HtCollapse',
     mixins: [regionValidator],
     props: {
-      value: Array,
       accordion: {
         type: Boolean,
         default: false,
@@ -41,8 +40,6 @@
       openDefaultArr: {
         handler(val) {
           this.$root.$emit('collapse-active-names', val)
-          console.log('zlc val', val)
-          this.$emit('input', val)
         },
         deep: true,
       },

package/packages/CustomDialog/src/customDialog.vue

@@ -363,7 +363,7 @@
             </div>
             <el-scrollbar
               v-if="selectsCount > 0"
-              class="selector-selected-height"
+              class="selector-selected__scroll"
             >
               <draggable
                 v-model="selects"
@@ -2678,21 +2678,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    .el-dialog {
-      height: calc(100vh - 60px);
-    }
     .el-dialog__body {
       overflow: hidden;
     }
     .hotent-custom-scrollbar {
       height: 100%;
-      .el-scrollbar__view {
-        display: flex;
-        height: 100%;
-      }
-    }
-    .el-container {
-      flex-basis: min-content;
+      display: flex;
     }
 
     #container {
@@ -2716,21 +2707,13 @@
     }
     #right {
       order: 2;
-      width: 310px;
-      padding: 24px;
-      height: auto;
-      box-sizing: border-box;
-      .el-card {
-        height: 100%;
-        margin: 0;
-      }
-      .el-card__body {
-        box-sizing: border-box;
-        height: calc(100% - 48px);
-      }
-      .selector-selected-height {
-        height: 100%;
-      }
+      width: 250px;
+      padding-left: 24px;
+    }
+    .el-card__body {
+      height: calc(var(--customHeight) - 130px - 48px - 25px - 24px);
+      overflow: auto;
+      @include base-scrollbar;
     }
     .el-card__header {
       height: 48px;

package/packages/CustomDialog/src/main.vue

@@ -12,51 +12,62 @@
       <div
         v-if="inputWriteable"
         style="width: 100%"
-        :class="{ 'has-value': value, 'custom-selector-mobile': isMobile }"
-        @click="showEditInput"
+        class="el-select"
+        :class="{ 'has-value': value }"
       >
-        <div v-if="value && isSrcColor && !isMobile" class="custom-jump">
-          <span v-for="(item, index) in inputVal" :key="index">
-            <span class="src-color" @click.stop="jumpUrl(item)">
-              {{ item.value }}
-            </span>
-            <span v-if="index != inputVal.length - 1">,</span>
-          </span>
-        </div>
-        <div class="el-input el-input--suffix">
-          <div v-if="isMobile" class="custom-selector-mobile-box">
-            <div
+        <div
+          ref="tagSpans"
+          class="el-select__tags"
+          :style="{ width: 'calc(100% - 10px - ' + inputSuffixWidth + 'px)' }"
+          @click="showEditInput"
+        >
+          <span class="tag-wrap">
+            <span
               v-for="(item, index) in inputVal"
-              :key="index"
-              class="common-selector-tag"
+              :key="item.value"
+              class="el-tag el-tag--info el-tag--small no-background"
+              @click.stop="jumpUrl(item)"
             >
               <span
+                class="el-select__tags-text"
                 :class="{ 'src-color': isSrcColor }"
-                @click.stop="jumpUrl(item)"
               >
                 {{ item.value }}
               </span>
-              <i class="el-icon-error" @click.stop="removeSelectOrg(index)"></i>
-            </div>
-          </div>
+              <i
+                class="el-tag__close el-icon-close"
+                @click.stop="removeSelectOrg(index)"
+              ></i>
+            </span>
+          </span>
+        </div>
+        <div class="el-input el-input--suffix">
           <input
             ref="inputEl"
-            v-model="calcInputValue"
+            v-model="inputVal"
             v-validate="inputValidate"
             type="text"
-            readonly
+            readonly="readonly"
             :name="inputName"
             autocomplete="off"
             class="el-input__inner"
-            :placeholder="placeholder || '请选择'"
+            :placeholder="placeholder"
+            :style="{ height: inputSuffixHeight + 'px' }"
+            @click="showEditInput"
           />
           <!-- 允许手动输入时 -->
           <el-input
             v-if="isAllowCustom && isEditInputShow"
             ref="editInputRef"
             v-model="customValue"
+            clearable
             class="edit-input"
             size="mini"
+            :style="{
+              right: inputSuffixWidth - 1 + 'px',
+              width: 'auto!important',
+              height: inputSuffixHeight - 4 + 'px',
+            }"
             @blur="editInputBlur"
           ></el-input>
           <span ref="inputSuffix" class="el-input__suffix" @click="showDialog">
@@ -65,11 +76,23 @@
               :class="{ 'has-clear-all': value }"
             >
               <i
-                v-if="value"
                 class="el-icon-circle-close clear-icon"
                 @click.stop="clear"
               ></i>
-              <i class="el-icon-search"></i>
+              <el-button slot="append" type="info" size="mini">
+                <i
+                  :class="
+                    custdialog.icon
+                      ? 'el-input__icon ' + custdialog.icon
+                      : 'el-input__icon icon-duihuakuang'
+                  "
+                  :style="{
+                    fontSize: '17px',
+                    lineHeight: inputSuffixHeight + 'px',
+                  }"
+                ></i>
+                {{ custdialog.name }}
+              </el-button>
             </span>
           </span>
         </div>
@@ -83,52 +106,49 @@
         style="margin-right: 8px"
         @click.stop="jumpUrl(item)"
       >
-        <span class="el-select__tags-text">
+        <span class="el-select__tags-text" :class="{ 'src-color': isSrcColor }">
           {{ item.value }}
         </span>
       </span>
     </span>
-    <template v-if="isDialogShow">
-      <custom-mobile-dialog
-        v-if="isMobile"
-        ref="customMobileDialogRef"
-        :model-name="modelName"
-        :custdialog="custdialog"
-        :sub-index="subIndex"
-        :sun-index="sunIndex"
-        :sub-path="subPath"
-        :current-sub-data="currentSubData"
-        :dialog-config="dialogConfig"
-        :dialog-type="dialogType"
-        @calacInputSuffixHeight="calacInputSuffixHeight"
-        @updateInput="updateInput"
-      ></custom-mobile-dialog>
-      <custom-dialog
-        v-else
-        ref="customDialogRef"
-        v-model="value"
-        :model-name="modelName"
-        :custdialog="custdialog"
-        :sub-index="subIndex"
-        :sun-index="sunIndex"
-        :sub-path="subPath"
-        :current-sub-data="currentSubData"
-        :is-read-only="!inputWriteable"
-        :dialog-config="dialogConfig"
-        :dialog-type="dialogType"
-        @calacInputSuffixHeight="calacInputSuffixHeight"
-        @updateInput="updateInput"
-      ></custom-dialog>
-    </template>
-
+    <custom-mobile-dialog
+      v-if="isMobile"
+      ref="customMobileDialogRef"
+      :model-name="modelName"
+      :custdialog="custdialog"
+      :sub-index="subIndex"
+      :sun-index="sunIndex"
+      :sub-path="subPath"
+      :current-sub-data="currentSubData"
+      :dialog-config="dialogConfig"
+      :dialog-type="dialogType"
+      @calacInputSuffixHeight="calacInputSuffixHeight"
+      @updateInput="updateInput"
+    ></custom-mobile-dialog>
+    <custom-dialog
+      v-else
+      ref="customDialogRef"
+      v-model="value"
+      :model-name="modelName"
+      :custdialog="custdialog"
+      :sub-index="subIndex"
+      :sun-index="sunIndex"
+      :sub-path="subPath"
+      :current-sub-data="currentSubData"
+      :is-read-only="!inputWriteable"
+      :dialog-config="dialogConfig"
+      :dialog-type="dialogType"
+      @calacInputSuffixHeight="calacInputSuffixHeight"
+      @updateInput="updateInput"
+    ></custom-dialog>
     <span style="display: none">
       <slot name="labeldesc">{{ inputName }}</slot>
     </span>
     <ht-field-tail :field-name="inputName" :input-value="value" />
     <el-dialog
-      v-if="isDialogFormShow"
       title="表单详情"
       :visible.sync="isDialogFormShow"
+      v-if="isDialogFormShow"
       width="100%"
       custom-class="custom-dialog-form"
       fullscreen
@@ -186,7 +206,6 @@
     },
     data() {
       return {
-        isDialogShow: false,
         mobileSrc: '',
         isDialogFormShow: false,
         dialogConfig: null, // 对话框配置信息
@@ -219,17 +238,6 @@
       }
     },
     computed: {
-      calcInputValue: function() {
-        let name = ''
-        if (this.inputVal) {
-          name = this.inputVal
-            .map((k) => {
-              return k.value
-            })
-            .join(',')
-        }
-        return name
-      },
       inputVal: function() {
         if (!this.value || this.value == '||[]') {
           return null
@@ -302,10 +310,10 @@
           }
         }
         //获取对话框按钮名称宽度
-        // this.calacInputSuffixWidth()
-        // if (this.value && this.inputWriteable) {
-        //   this.calacInputSuffixHeight()
-        // }
+        this.calacInputSuffixWidth()
+        if (this.value && this.inputWriteable) {
+          this.calacInputSuffixHeight()
+        }
       }, 50)
     },
     methods: {
@@ -386,9 +394,8 @@
       editInputBlur() {
         this.$emit('input', this.customValue)
         this.isEditInputShow = false
-        this.validateInput()
       },
-      async showEditInput() {
+      showEditInput() {
         if (!this.isAllowCustom) {
           this.showDialog()
           return
@@ -399,14 +406,10 @@
           this.$refs.editInputRef.focus()
         })
       },
-      async showDialog() {
+      showDialog() {
         if (!this.inputWriteable) {
           return
         }
-        if (this.isDialogShow === false) {
-          this.isDialogShow = true
-          await this.$nextTick()
-        }
         if (this.isMobile) {
           this.$refs.customMobileDialogRef.showDialog()
         } else {
@@ -426,7 +429,7 @@
           this.clear()
         }
         this.$emit('input', value)
-
+        this.calacInputSuffixHeight()
         if (this.isMobile) {
           this.$refs.customMobileDialogRef.removeSelectOrg(item)
         } else {
@@ -436,38 +439,30 @@
       clear() {
         this.$emit('input', '')
         this.$refs.customDialogRef.clearAll()
-        this.validateInput()
+        this.calacInputSuffixHeight()
       },
       calacInputSuffixHeight() {
         setTimeout(() => {
-          // if (!this.$refs.tagSpans) return
-          // if (this.$refs.tagSpans.offsetHeight) {
-          //   this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
-          // } else {
-          //   this.inputSuffixHeight = 30
-          // }
+          if (!this.$refs.tagSpans) return
+          if (this.$refs.tagSpans.offsetHeight) {
+            this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+          } else {
+            this.inputSuffixHeight = 30
+          }
           // 触发验证
           if (this.$refs.inputEl) {
             this.$validator.validate(this.inputName)
           }
         }, 0)
-        // this.calacInputSuffixWidth()
+        this.calacInputSuffixWidth()
       },
       calacInputSuffixWidth() {
-        // if (this.$refs.inputSuffix) {
-        //   this.inputSuffixWidth = this.$refs.inputSuffix.offsetWidth + 1
-        // }
-      },
-      validateInput() {
-        setTimeout(() => {
-          if (this.$refs.inputEl) {
-            this.$validator.validate(this.inputName)
-          }
-        })
+        if (this.$refs.inputSuffix) {
+          this.inputSuffixWidth = this.$refs.inputSuffix.offsetWidth + 1
+        }
       },
       updateInput(data) {
         this.$emit('input', data)
-        this.validateInput()
       },
     },
   }
@@ -475,17 +470,15 @@
 <style lang="scss" scoped>
   .edit-input {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 30px;
     left: 1px;
-    right: 34px;
     border: none;
-    z-index: 2;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 50;
     display: flex;
     align-items: center;
-    width: auto !important;
     ::v-deep .el-input__inner {
+      height: 100%;
       border: none;
     }
   }
@@ -504,9 +497,20 @@
       color: #c0c4cc;
     }
     .el-input__suffix {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+      position: absolute;
+      height: 100%;
+      right: 0px !important;
+      top: 0;
+      text-align: center;
+      color: #c0c4cc;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      pointer-events: none;
+      z-index: 100;
+      .has-clear-all {
+        display: flex;
+        align-items: center;
+      }
     }
     .el-dialog__body {
       padding: 0;
@@ -540,11 +544,6 @@
       height: 100%;
     }
   }
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-  }
-
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;
   }
@@ -645,7 +644,6 @@
     margin: 8px 0;
   }
   .src-color {
-    font-size: 12px;
     cursor: pointer;
     color: #409eff !important;
   }
@@ -687,58 +685,4 @@
       }
     }
   }
-  .el-select {
-    line-height: normal;
-  }
-  .custom-jump {
-    position: absolute;
-    height: 28px;
-    left: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 32px;
-    display: flex;
-    align-items: center;
-    background-color: #fff;
-    z-index: 1;
-  }
-  .custom-selector-mobile {
-    .custom-selector-mobile-box {
-      display: flex;
-      min-height: 32px;
-      align-items: center;
-      padding: 4px 14px;
-      flex-wrap: wrap;
-      gap: 4px;
-      line-height: 22px;
-      padding-right: 40px;
-      box-sizing: border-box;
-      .el-icon-error {
-        color: #909399;
-      }
-    }
-    .el-input__inner {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      user-select: none;
-      background: none;
-      color: transparent !important;
-      pointer-events: none;
-      height: 100%;
-    }
-    .el-input__suffix-inner {
-      display: flex;
-      align-items: center;
-    }
-    .el-icon-circle-close {
-      margin-right: 3px;
-    }
-    .user-icon,
-    .el-icon-circle-close {
-      display: inline-block !important;
-    }
-  }
 </style>