three-trees-ui 1.0.99 → 1.1.1

package/packages/PostSelector/src/main.vue

@@ -16,23 +16,33 @@
       @click="showDialog"
     >
       <div
-        v-if="inputWriteable"
-        class="el-input el-input--suffix"
-        :class="{ 'custom-selector-mobile': isMobile }"
+        ref="tagSpans"
+        style="width: calc(100% - 25px);"
+        :class="{
+          'el-select__tags_readonly': !inputWriteable,
+          'el-select__tags': inputWriteable,
+        }"
       >
-        <div v-if="isMobile" class="custom-selector-mobile-box">
-          <div
+        <span class="tag-wrap">
+          <span
             v-for="(item, index) in selectors"
             :key="index"
-            class="common-selector-tag"
+            class="el-tag el-tag--info el-tag--small"
+            @click.stop
           >
-            <span>{{ item.name }}</span>
-            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
-          </div>
-        </div>
+            <span class="el-select__tags-text">{{ item.name }}</span>
+            <i
+              v-if="inputWriteable"
+              class="el-tag__close el-icon-close"
+              @click="handleRemove(item)"
+            ></i>
+          </span>
+        </span>
+      </div>
+      <div v-if="inputWriteable" class="el-input el-input--suffix">
         <input
           ref="inputEl"
-          v-model="calcInputValue"
+          v-model="value"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -40,6 +50,10 @@
           autocomplete="off"
           class="el-input__inner"
           :placeholder="placeholder"
+          :style="{
+            height: inputSuffixHeight + 'px',
+            lineHeight: inputSuffixHeight + 'px',
+          }"
         />
         <span class="el-input__suffix">
           <span class="el-input__suffix-inner">
@@ -48,55 +62,50 @@
           </span>
         </span>
       </div>
-      <div v-else class="el-select__tags_readonly">
-        <span>{{ calcInputValue }}</span>
-      </div>
     </div>
     <ht-field-tail :field-name="inputName" :input-value="value" />
-    <template v-if="isDialogShow">
-      <post-selector-dialog
-        v-if="!isMobile"
-        ref="postSelectorDialog"
-        v-model="selectors"
-        :title="title"
-        :append-to-body="appendToBody"
-        :data="data"
-        :pagination="pagination"
-        :select-label="selectLabel"
-        :quick-search-props="quickSearchProps"
-        :single="single"
-        :search-placeholder="searchPlaceholder"
-        :primary-field="primaryField"
-        :mode="mode"
-        @filter-type-change="(type) => $emit('filter-type-change', type)"
-        @search="(word) => $emit('search', word)"
-        @reset="() => $emit('reset')"
-        @row-click="(row) => $emit('row-click', row)"
-        @select-data="(data) => $emit('select-data', data)"
-        @page-change="(page) => $emit('page-change', page)"
-        @size-change="(size) => $emit('size-change', size)"
-        @load-org-post="(org) => $emit('load-org-post', org)"
-        @load-policy-post="(policy) => $emit('load-policy-post', policy)"
-      />
-      <post-selector-mobile-dialog
-        v-else
-        ref="postSelectorMobileDialog"
-        v-model="selectors"
-        :title="title"
-        :append-to-body="appendToBody"
-        :data="data"
-        :pagination="pagination"
-        :select-label="selectLabel"
-        :single="single"
-        :search-placeholder="searchPlaceholder"
-        :primary-field="primaryField"
-        @search="(word) => $emit('search', word)"
-        @reset="() => $emit('reset')"
-        @row-click="(row) => $emit('row-click', row)"
-        @select-data="(data) => $emit('select-data', data)"
-        @page-change="(page) => $emit('page-change', page)"
-      />
-    </template>
+    <post-selector-dialog
+      v-if="!isMobile"
+      ref="postSelectorDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      :mode="mode"
+      @filter-type-change="(type) => $emit('filter-type-change', type)"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
+      @load-org-post="(org) => $emit('load-org-post', org)"
+      @load-policy-post="(policy) => $emit('load-policy-post', policy)"
+    />
+    <post-selector-mobile-dialog
+      v-else
+      ref="postSelectorMobileDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+    />
   </div>
 </template>
 <script>
@@ -176,23 +185,11 @@
     },
     data() {
       return {
-        isDialogShow: false,
         inputSuffixHeight: 30,
         selectors: [],
       }
     },
     computed: {
-      calcInputValue: function() {
-        let name = ''
-        if (this.selectors) {
-          name = this.selectors
-            .map((k) => {
-              return k.name
-            })
-            .join(',')
-        }
-        return name
-      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -251,8 +248,14 @@
         // 通过valueChange事件发布值变更消息
         this.$emit('valueChange', ary.join(','), newVal)
         setTimeout(() => {
+          if (newVal.length > 0) {
+            this.calacInputSuffixHeight()
+          } else {
+            this.inputSuffixHeight = 30
+          }
           if (this.$refs.inputEl) {
-            this.$validator.validate(this.inputName)
+            this.$refs.inputEl.focus()
+            this.$refs.inputEl.blur()
           }
         }, 10)
       },
@@ -318,14 +321,10 @@
           this.selectors = tmpAry
         }
       },
-      async showDialog() {
+      showDialog() {
         if (!this.inputWriteable) {
           return
         }
-        if (this.isDialogShow === false) {
-          this.isDialogShow = true
-          await this.$nextTick()
-        }
         if (this.isMobile) {
           this.$refs.postSelectorMobileDialog.showDialog()
         } else {
@@ -341,12 +340,12 @@
       },
       // 更新当前输入框的高度来适配已选数据的高度
       calacInputSuffixHeight() {
-        // 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
+        }
       },
     },
   }
@@ -357,10 +356,6 @@
     margin-left: 1px;
   }
 
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-  }
   .el-select__tags_readonly {
     position: relative;
     top: 50%;

package/packages/Preview/src/FrameViewer.vue

@@ -6,11 +6,10 @@
         v-else-if="contentType.indexOf('image') > -1"
         class="frame-viewer__img"
       >
-        <el-image
-          style="width: 100px; height: 100px"
+        <img
           :src="dataSrc"
-          :preview-src-list="[dataSrc]"
-        ></el-image>
+          :style="{ height: utils.isMobile() ? 'auto' : '100%' }"
+        />
       </div>
       <iframe
         v-else
@@ -125,12 +124,12 @@
           return
         }
         if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
+          iframe.attachEvent('onload', function() {
             that.setFrameBody(this.contentWindow.document)
             that.watermarkRender()
           })
         } else {
-          iframe.onload = function () {
+          iframe.onload = function() {
             that.setFrameBody(this.contentWindow.document)
             that.watermarkRender()
           }

package/packages/RoleSelector/src/main.vue

@@ -16,23 +16,33 @@
       @click="showDialog"
     >
       <div
-        v-if="inputWriteable"
-        class="el-input el-input--suffix"
-        :class="{ 'custom-selector-mobile': isMobile }"
+        ref="tagSpans"
+        style="width: calc(100% - 25px);"
+        :class="{
+          'el-select__tags_readonly': !inputWriteable,
+          'el-select__tags': inputWriteable,
+        }"
       >
-        <div v-if="isMobile" class="custom-selector-mobile-box">
-          <div
+        <span class="tag-wrap">
+          <span
             v-for="(item, index) in selectors"
             :key="index"
-            class="common-selector-tag"
+            class="el-tag el-tag--info el-tag--small"
+            @click.stop
           >
-            <span>{{ item.name }}</span>
-            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
-          </div>
-        </div>
+            <span class="el-select__tags-text">{{ item.name }}</span>
+            <i
+              v-if="inputWriteable"
+              class="el-tag__close el-icon-close"
+              @click="handleRemove(item)"
+            ></i>
+          </span>
+        </span>
+      </div>
+      <div v-if="inputWriteable" class="el-input el-input--suffix">
         <input
           ref="inputEl"
-          v-model="calcInputValue"
+          v-model="value"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -40,6 +50,10 @@
           autocomplete="off"
           class="el-input__inner"
           :placeholder="placeholder"
+          :style="{
+            height: inputSuffixHeight + 'px',
+            lineHeight: inputSuffixHeight + 'px',
+          }"
         />
         <span class="el-input__suffix">
           <span class="el-input__suffix-inner">
@@ -48,55 +62,50 @@
           </span>
         </span>
       </div>
-      <div v-else class="el-select__tags_readonly">
-        <span>{{ calcInputValue }}</span>
-      </div>
     </div>
     <ht-field-tail :field-name="inputName" :input-value="value" />
-    <template v-if="isDialogShow">
-      <role-selector-mobile-dialog
-        v-if="isMobile"
-        ref="roleSelectorMobileDialog"
-        v-model="selectors"
-        :search-placeholder="searchPlaceholder"
-        :single="single"
-        :data="data"
-        :table-columns="tableColumns"
-        :pagination="pagination"
-        :select-label="selectLabel"
-        :quick-search-props="quickSearchProps"
-        :append-to-body="appendToBody"
-        :title="title"
-        :primary-field="primaryField"
-        @search="(word) => $emit('search', word)"
-        @reset="() => $emit('reset')"
-        @row-click="(row) => $emit('row-click', row)"
-        @select-data="(data) => $emit('select-data', data)"
-        @page-change="(page) => $emit('page-change', page)"
-      />
-      <role-selector-dialog
-        v-else
-        ref="roleSelectorDialog"
-        v-model="selectors"
-        :title="title"
-        :append-to-body="appendToBody"
-        :data="data"
-        :pagination="pagination"
-        :select-label="selectLabel"
-        :quick-search-props="quickSearchProps"
-        :single="single"
-        :search-placeholder="searchPlaceholder"
-        :primary-field="primaryField"
-        :mode="mode"
-        @filter-type-change="(type) => $emit('filter-type-change', type)"
-        @search="(word) => $emit('search', word)"
-        @reset="() => $emit('reset')"
-        @row-click="(row) => $emit('row-click', row)"
-        @select-data="(data) => $emit('select-data', data)"
-        @page-change="(page) => $emit('page-change', page)"
-        @size-change="(size) => $emit('size-change', size)"
-      />
-    </template>
+    <role-selector-mobile-dialog
+      v-if="isMobile"
+      ref="roleSelectorMobileDialog"
+      v-model="selectors"
+      :search-placeholder="searchPlaceholder"
+      :single="single"
+      :data="data"
+      :table-columns="tableColumns"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :append-to-body="appendToBody"
+      :title="title"
+      :primary-field="primaryField"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+    />
+    <role-selector-dialog
+      v-else
+      ref="roleSelectorDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      :mode="mode"
+      @filter-type-change="(type) => $emit('filter-type-change', type)"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
+    />
   </div>
 </template>
 <script>
@@ -173,23 +182,11 @@
     },
     data() {
       return {
-        isDialogShow: false,
         inputSuffixHeight: 30,
         selectors: [],
       }
     },
     computed: {
-      calcInputValue: function() {
-        let name = ''
-        if (this.selectors) {
-          name = this.selectors
-            .map((k) => {
-              return k.name
-            })
-            .join(',')
-        }
-        return name
-      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -248,8 +245,14 @@
         // 通过valueChange事件发布值变更消息
         this.$emit('valueChange', ary.join(','), newVal)
         setTimeout(() => {
+          if (newVal.length > 0) {
+            this.calacInputSuffixHeight()
+          } else {
+            this.inputSuffixHeight = 30
+          }
           if (this.$refs.inputEl) {
-            this.$validator.validate(this.inputName)
+            this.$refs.inputEl.focus()
+            this.$refs.inputEl.blur()
           }
         }, 10)
       },
@@ -314,14 +317,10 @@
           this.selectors = tmpAry
         }
       },
-      async showDialog() {
+      showDialog() {
         if (!this.inputWriteable) {
           return
         }
-        if (this.isDialogShow === false) {
-          this.isDialogShow = true
-          await this.$nextTick()
-        }
         if (this.isMobile) {
           this.$refs.roleSelectorMobileDialog.showDialog()
         } else {
@@ -338,12 +337,12 @@
       },
       // 更新当前输入框的高度来适配已选数据的高度
       calacInputSuffixHeight() {
-        // 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
+        }
       },
     },
   }
@@ -354,11 +353,6 @@
     margin-left: 1px;
   }
 
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-  }
-
   .el-select__tags_readonly {
     position: relative;
     top: 50%;

package/packages/TemplateForm/src/main.vue

@@ -493,7 +493,6 @@
         let _this = this
         _this.reloadOnlineForm = true
         setTimeout(() => {
-          let data = this.data
           eval(rep.diyJs)
         }, 10)
       },