three-trees-ui 1.0.99 → 1.1.1

package/packages/DimensionSelector/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 demensions"
             :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,13 +62,9 @@
           </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" />
     <el-dialog
-      v-if="dialogVisible"
       title="选择维度"
       :visible.sync="dialogVisible"
       class="dialog-selector__wrapper"
@@ -206,10 +216,6 @@
       mode: {
         type: String,
       },
-      formInputsDisplay: {
-        type: String,
-        default: 'inline',
-      },
     },
     data() {
       return {
@@ -221,17 +227,6 @@
       }
     },
     computed: {
-      calcInputValue: function() {
-        let name = ''
-        if (this.demensions) {
-          name = this.demensions
-            .map((k) => {
-              return k.name
-            })
-            .join(',')
-        }
-        return name
-      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -290,8 +285,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)
       },
@@ -370,13 +371,14 @@
           this.demensions = tmpAry
         }
       },
-      async showDialog() {
+      showDialog() {
         if (!this.inputWriteable) {
           return
         }
         this.dialogVisible = true
-        await this.$nextTick()
-        this.$refs.selector.onShow()
+        setTimeout(() => {
+          this.$refs.selector.onShow()
+        })
       },
       handleClose(done) {
         this.$refs.selector.onHide()
@@ -399,12 +401,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
+        }
       },
     },
   }
@@ -425,10 +427,7 @@
     position: relative;
     top: 50%;
   }
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-  }
+
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;
   }

package/packages/File/src/main.vue

@@ -96,9 +96,29 @@
       @remove="removeFile"
       @sort="handleSort"
     />
+    <!-- 图片预览组件 -->
+    <el-image
+      v-if="!isMobile"
+      v-show="false"
+      ref="previewImage"
+      :preview-src-list="[imgPreviewUrl]"
+    ></el-image>
+    <!-- 移动端图片 -->
+    <viewer
+      v-if="isMobile"
+      ref="viewerRef"
+      class="images"
+      :options="viewerOptions"
+      :images="imgList"
+      @inited="inited"
+    >
+      <img v-for="src in imgList" v-show="false" :key="src" :src="src" />
+    </viewer>
   </div>
 </template>
 <script>
+  import { component as viewer } from 'v-viewer'
+  import 'viewerjs/dist/viewer.css'
   import utils from '@/utils.js'
   import permission from '@/mixins/permission.js'
   import inputName from '@/mixins/inputName.js'
@@ -115,13 +135,20 @@
 
   export default {
     name: 'HtFile',
-    components: { HtFieldTail, FileUpload, FileTable, FileList, FileCard },
+    components: {
+      HtFieldTail,
+      FileUpload,
+      FileTable,
+      FileList,
+      FileCard,
+      viewer,
+    },
     mixins: [Locale, permission, inputName, form, mobileMode],
     props: {
       type: {
         type: String,
         default: 'table',
-        validator: function (value) {
+        validator: function(value) {
           return ['table', 'list', 'card'].indexOf(value) !== -1
         },
       },
@@ -223,6 +250,27 @@
     },
     data() {
       return {
+        $viewer: null, // viewer组件实例对象
+        viewerOptions: {
+          backdrop: true, // 是否启用播放模态背景[布尔值/字符串：默认true](不启用时，点击空白处不会退出播放，仅点击右上角关闭按钮才会退出播放)
+          inline: false, // 启用inline模式[布尔值：默认false]
+          button: true, // 显示右上角关闭按钮[布尔值：默认true]
+          navbar: false, // 显示缩略图导航[布尔值/数字：默认true]
+          title: false, // 显示当前图片的标题(显示alt属性或从URL解析出的图片名称)[布尔值/数字/方法/数组：默认true]
+          toolbar: false, // 显示工具栏、自定义工具栏[布尔值/数字/对象：默认true]
+          tooltip: true, // 显示缩放百分比[布尔值：默认true]
+          movable: true, // 图片是否可移动[布尔值：默认true]
+          zoomable: true, // 图片是否可缩放[布尔值：默认true]
+          rotatable: true, // 图片是否可旋转[布尔值：默认true]
+          scalable: true, // 图片是否可翻转[布尔值：默认true]
+          transition: true, // 使用CSS3过渡[布尔值：默认true]
+          fullscreen: true, // 播放时是否全屏[布尔值/全屏配置：默认true]
+          keyboard: true, // 是否支持键盘[布尔值：默认true]
+          url: 'src', // 播放时图片地址 URL 来源。[字符串/方法：默认src](如果是字符串，则应该是每个图像元素的属性之一。 如果是方法，则应该返回一个有效的图像URL)
+        },
+        index: null,
+        imgList: [],
+        imgPreviewUrl: '',
         writeable: true,
         temp: null,
         refreshFileUploadDebounce: _.debounce(this.refreshFileUpload, 200),
@@ -230,7 +278,7 @@
       }
     },
     computed: {
-      typeVal: function () {
+      typeVal: function() {
         return this.isSimple || this.simplicity ? 'list' : this.type
       },
       inputsContainerWidth() {
@@ -238,7 +286,7 @@
           ? { width: 'auto' }
           : {}
       },
-      actionUrlVal: function () {
+      actionUrlVal: function() {
         return this.actionUrl
           ? this.actionUrl
           : this.$requestConfig.uploadUrl
@@ -262,14 +310,14 @@
         }
         return baseUrl
       },
-      headerVal: function () {
+      headerVal: function() {
         return this.header
           ? this.header
           : this.$requestConfig.header
           ? this.$requestConfig.header()
           : null
       },
-      acceptType: function () {
+      acceptType: function() {
         if (this.accept) {
           const ary = []
           this.accept.split(',').forEach((m) => {
@@ -283,10 +331,10 @@
         }
         return null
       },
-      previewableVal: function () {
+      previewableVal: function() {
         return (this.inputWriteable && this.previewable) || this.allowPreview
       },
-      downloadableVal: function () {
+      downloadableVal: function() {
         return (this.inputWriteable && this.downloadable) || this.allowDownload
       },
     },
@@ -311,7 +359,14 @@
         this.inputVal = JSON.parse(this.value)
       }
     },
+    mounted() {},
     methods: {
+      /**
+       * 组件初始化完成，获取组件实例对象
+       */
+      inited(viewer) {
+        this.$viewer = viewer
+      },
       // 上传前做校验
       beforeUploadMethod(file) {
         if (
@@ -466,6 +521,49 @@
             })
         }
       },
+      customPreviewImg(fileId) {
+        this.$requestConfig
+          .request({
+            url: `${window.context.portal}/system/file/v1/preview?fileId=${fileId}`,
+            method: 'get',
+            responseType: 'blob',
+          })
+          .then((response) => {
+            if (response.size > 0) {
+              var blob = response
+              var reader = new FileReader()
+              let that = this
+              reader.readAsDataURL(blob)
+              reader.onload = function(e) {
+                that.imgPreviewUrl = e.target.result
+                if (that.isMobile) {
+                  that.imgList = [that.imgPreviewUrl]
+                  // 2、通过ref获取到对应节点，再通过$viewer属性获取对应的元素信息对象，继而调用方法显示
+                  that.$refs.viewerRef.$viewer.show()
+                  return
+                }
+                that.$refs.previewImage.clickHandler()
+              }
+            }
+          })
+      },
+      isImgFile(fileName) {
+        let fileType = fileName.split('.')[fileName.split('.').length - 1]
+        return [
+          'gif',
+          'jpg',
+          'jpeg',
+          'png',
+          'webp',
+          'svg',
+          'GIF',
+          'JPG',
+          'JPEG',
+          'PNG',
+          'WEBP',
+          'SVG',
+        ].includes(fileType)
+      },
       preview(file) {
         if (file.status !== 'success') {
           this.$message.warning(this.t('ht.file.forbiddenPreview'))
@@ -475,11 +573,21 @@
           // 当前组件未添加preview事件监听 并且 设置了全局预览方法
           if (!this._events.preview && this.$preview) {
             if (this.isMobile) {
-              this.$preview(file)
+              if (this.isImgFile(file.response.fileName)) {
+                this.customPreviewImg(file.response.fileId)
+              } else {
+                this.$preview(file)
+              }
             } else {
-              let token = this.$requestConfig.getToken().replace('Bearer ', '')
-              let url = `${window.context.front}/previewFile/${file.response.fileId}/${file.response.fileName}?token=${token}`
-              window.open(url, '_blank')
+              if (this.isImgFile(file.response.fileName)) {
+                this.customPreviewImg(file.response.fileId)
+              } else {
+                let token = this.$requestConfig
+                  .getToken()
+                  .replace('Bearer ', '')
+                let url = `${window.context.front}/previewFile/${file.response.fileId}/${file.response.fileName}?token=${token}`
+                window.open(url, '_blank')
+              }
             }
           } else {
             this.$emit('preview', file, this.inputVal)

package/packages/JobSelector/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,54 +62,49 @@
           </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">
-      <job-selector-mobile-dialog
-        v-if="isMobile"
-        ref="jobSelectorMobileDialog"
-        v-model="selectors"
-        :search-placeholder="searchPlaceholder"
-        :single="single"
-        :data="data"
-        :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)"
-      />
-      <job-selector-dialog
-        v-else
-        ref="jobSelectorDialog"
-        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"
-        :mode="mode"
-        @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>
+    <job-selector-mobile-dialog
+      v-if="isMobile"
+      ref="jobSelectorMobileDialog"
+      v-model="selectors"
+      :search-placeholder="searchPlaceholder"
+      :single="single"
+      :data="data"
+      :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)"
+    />
+    <job-selector-dialog
+      v-else
+      ref="jobSelectorDialog"
+      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"
+      :mode="mode"
+      @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>
@@ -172,23 +181,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'
@@ -238,8 +235,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)
       },
@@ -293,14 +296,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.jobSelectorMobileDialog.showDialog()
         } else {
@@ -316,12 +315,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
+        }
       },
     },
   }
@@ -336,10 +335,7 @@
     position: relative;
     top: 50%;
   }
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-  }
+
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;
   }