three-trees-ui 1.0.0

package/packages/FieldTail/src/main.vue

@@ -0,0 +1,188 @@
+<template>
+  <span class="field-tail__wrap">
+    <small v-if="hasErrors" class="el-form-item__error">
+      {{ errorMessage }}
+    </small>
+    <div v-if="readonly && tagFormatValue.length == 0" class="field-tail">
+      <div v-if="isReadonlyTextarea">
+        <div v-for="(item, index) in formatInputValue" :key="index">
+          <p v-if="item" class="readonly_p">
+            <slot name="prefix" class="el-input-group__append"></slot>
+            <slot name="suffix" class="el-input-group__append"></slot>
+            <slot name="prepend" class="el-input-group__append"></slot>
+            {{ item }}
+            <slot name="append" class="el-input-group__append"></slot>
+          </p>
+          <br v-else />
+        </div>
+      </div>
+      <el-input
+        v-else-if="$readonlyInput"
+        v-model="inputValue"
+        disabled
+      ></el-input>
+      <span v-else>
+        <slot name="prefix" class="el-input-group__append"></slot>
+        <slot name="suffix" class="el-input-group__append"></slot>
+        <slot name="prepend" class="el-input-group__append"></slot>
+        {{ currentShowValue }}
+        <template v-if="company && !filterCurrency">{{ company }}</template>
+        <slot name="append" class="el-input-group__append"></slot>
+      </span>
+    </div>
+    <template
+      v-if="
+        readonly &&
+          tagFormatValue.constructor == Array &&
+          tagFormatValue.length > 0
+      "
+    >
+      <template v-for="(label, index) in tagFormatValue">
+        <el-tooltip
+          :key="index"
+          class="tooltip-item"
+          effect="dark"
+          :content="label"
+          placement="top-start"
+        >
+          <el-tag class="field-tail-tag">
+            {{ label }}
+          </el-tag>
+        </el-tooltip>
+      </template>
+    </template>
+  </span>
+</template>
+<script>
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'HtFieldTail',
+    props: {
+      fieldName: {
+        type: String,
+        required: true,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      inputValue: {
+        type: [String, Number, Object, Array, Boolean],
+      },
+      tagFormatValue: {
+        type: [Array],
+        default() {
+          return []
+        },
+      },
+      writeable: {
+        type: Boolean,
+        default: true,
+      },
+      company: String,
+      filterCurrency: {
+        type: Boolean,
+        default: false,
+      },
+      filterthousandBit: {
+        type: Boolean,
+        default: false,
+      },
+      type: String,
+      precision: Number,
+    },
+    data() {
+      return {
+        scopeName: null,
+      }
+    },
+    computed: {
+      fieldScopePath: function() {
+        let path = this.fieldName
+        if (this.scopeName) {
+          path = `${this.scopeName}.${this.fieldName}`
+        }
+        return path
+      },
+      hasErrors: function() {
+        return this.errors && this.errors.has(this.fieldScopePath)
+      },
+      errorMessage: function() {
+        return this.errors.first(this.fieldScopePath)
+      },
+      formatInputValue() {
+        let value = []
+        if (this.readonly && typeof this.inputValue === 'string') {
+          if (this.inputValue.includes('↵')) {
+            value = this.inputValue.split('↵')
+          } else if (this.inputValue.includes('\n')) {
+            value = this.inputValue.split('\n')
+          } else {
+            value = [this.inputValue]
+          }
+        }
+        return value
+      },
+      isReadonlyTextarea() {
+        return typeof this.inputValue === 'string'
+          ? this.inputValue.includes('↵') || this.inputValue.includes('\n')
+          : false
+      },
+      currentShowValue() {
+        const isFormat = this.filterthousandBit || this.filterCurrency
+        return this.type === 'number' && !isFormat
+          ? Number(this.inputValue).toFixed(this.precision)
+          : this.inputValue
+      },
+    },
+    mounted() {
+      this.scopeName = utils.getSomeAttributeFromParentElement(
+        this.$el.parentElement,
+        'data-vv-scope'
+      )
+      const { subScopeEl } = utils.getSubScopeElAndIndex(this.$el.parentElement)
+      if (subScopeEl) {
+        if (
+          subScopeEl.getAttribute('row_readonly') == 'true' ||
+          subScopeEl.getAttribute('row_readonly') === true
+        ) {
+          this.$emit('update:writeable', false)
+        } else {
+          const className = Array.prototype.find.call(
+            subScopeEl.classList,
+            (item) => item.startsWith('row_readonly__')
+          )
+          if (className && className == 'row_readonly__true') {
+            this.$emit('update:writeable', false)
+          }
+        }
+      }
+    },
+    created() {
+      this.$validator = this.$root.$validator
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .field-tail {
+    display: block;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+  .el-tag + .el-tag {
+    margin-left: 5px;
+  }
+  td .el-form-item__error,
+  th .el-form-item__error {
+    transform: scale(0.9);
+  }
+  td .el-form-item__error,
+  th .el-form-item__error {
+    top: calc(100% - 3px);
+  }
+  .readonly_p {
+    margin: 0;
+  }
+</style>

package/packages/File/index.js

@@ -0,0 +1,7 @@
+import File from './src/main.vue'
+
+File.install = function(Vue) {
+  Vue.component(File.name, File)
+}
+
+export default File

package/packages/File/src/FileCard.vue

@@ -0,0 +1,169 @@
+<template>
+  <draggable
+    v-model="dataVal"
+    class="el-upload-list el-upload-list--picture-card"
+    tag="ul"
+    v-bind="dragOptions"
+    handle=".handle"
+    @start="isDragging = true"
+    @end="isDragging = false"
+  >
+    <transition-group type="transition" name="flip-list">
+      <li
+        v-for="file in dataVal"
+        :key="file.uid"
+        :class="[
+          'file-item',
+          'el-upload-list__item',
+          {
+            'is-success': file.status == 'success',
+            'is-uploading': file.status == 'uploading',
+          },
+        ]"
+      >
+        <img
+          v-if="file.status == 'success'"
+          class="el-upload-list__item-thumbnail"
+          :src="thumbnailComp(file, actionUrl)"
+          @error="defaultImg"
+        />
+        <!-- <label
+          v-if="cardBadge && file.status == 'success'"
+          class="el-upload-list__item-status-label"
+        >
+          <i class="el-icon-upload-success el-icon-check"></i>
+        </label> -->
+        <el-progress
+          v-else-if="file.status == 'uploading'"
+          type="circle"
+          :percentage="Math.floor(file.percentage)"
+        ></el-progress>
+        <span
+          v-if="inputWriteable || previewable"
+          class="el-upload-list__item-actions"
+        >
+          <span
+            v-if="sortable && inputWriteable"
+            class="handle"
+            :title="t('ht.file.sort')"
+          >
+            <i class="el-icon-rank"></i>
+          </span>
+          <span
+            v-if="previewable"
+            class="el-upload-list__item-preview"
+            :title="t('ht.file.preview')"
+            @click="$emit('preview', file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <el-popconfirm
+            v-if="inputWriteable"
+            title="确定要删除吗？"
+            @confirm="$emit('remove', file)"
+          >
+            <span
+              slot="reference"
+              class="el-upload-list__item-delete"
+              :title="t('ht.common.remove')"
+            >
+              <i class="el-icon-delete"></i>
+            </span>
+          </el-popconfirm>
+        </span>
+      </li>
+    </transition-group>
+  </draggable>
+</template>
+<script>
+  import Locale from '@/mixins/locale'
+  import { extract } from '@/util/path'
+  const draggable = require('vuedraggable')
+  const defaultThumbnailUrl = require('@/assets/icon_found_img.png')
+
+  export default {
+    name: 'FileCard',
+    components: { draggable },
+    mixins: [Locale],
+    props: {
+      data: {
+        type: Array,
+      },
+      headers: {
+        type: Object,
+      },
+      actionUrl: {
+        type: String,
+      },
+      previewable: {
+        type: Boolean,
+        default: true,
+      },
+      inputWriteable: {
+        type: Boolean,
+        default: true,
+      },
+      downloadable: {
+        type: Boolean,
+        default: true,
+      },
+      sortable: {
+        type: Boolean,
+        default: true,
+      },
+      cardBadge: {
+        type: Boolean,
+        default: true,
+      },
+      thumbnail: {
+        type: Function,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        isDragging: false,
+      }
+    },
+    computed: {
+      dataVal: {
+        get() {
+          return this.data
+        },
+        set(val) {
+          // 只有在拖拽排序时才通过inputVal对value进行更新
+          if (this.isDragging && val.constructor == Array && val.length > 0) {
+            this.$emit('sort', val)
+          }
+        },
+      },
+      dragOptions() {
+        return {
+          animation: 0,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost',
+        }
+      },
+      thumbnailComp() {
+        return this.thumbnail
+          ? this.thumbnail
+          : this.$requestConfig.thumbnail
+          ? this.$requestConfig.thumbnail
+          : (file, actionUrl) => {
+              const path = extract(actionUrl)
+              return file.response && file.response.fileId
+                ? `${path}/file/onlinePreviewController/v1/getFileById_${file.response.fileId}`
+                : defaultThumbnailUrl
+            }
+      },
+    },
+    methods: {
+      defaultImg(event) {
+        const img = event.srcElement
+        img.src = defaultThumbnailUrl
+        img.onerror = null
+      },
+    },
+  }
+</script>

package/packages/File/src/FileList.vue

@@ -0,0 +1,180 @@
+<template>
+  <draggable
+    v-model="dataVal"
+    class="file-list__wrap"
+    tag="ul"
+    v-bind="dragOptions"
+    handle=".handle"
+    @start="isDragging = true"
+    @end="isDragging = false"
+  >
+    <transition-group type="transition" name="flip-list">
+      <li
+        v-for="file in dataVal"
+        :key="file.uid"
+        :class="[
+          'file-item',
+          'el-upload-list__item',
+          {
+            'is-success': file.status == 'success',
+            'is-uploading': file.status == 'uploading',
+          },
+        ]"
+      >
+        <ht-icon v-if="sortable && inputWriteable" name="sort" class="handle" />
+        <ht-icon name="file" class="file_icon" />
+        <p
+          class="file__name"
+          :class="{ 'done-subject': previewable }"
+          :title="file.name"
+          @click="$emit('preview', file)"
+        >
+          {{ file.name || (file.response && file.response.fileName) }}
+        </p>
+        <el-progress
+          v-if="file.status == 'uploading'"
+          class="el-progress--line"
+          :stroke-width="4"
+          :percentage="Math.floor(file.percentage)"
+        />
+        <ht-icon
+          v-if="downloadable && file.status == 'success'"
+          class="file-hover__icon"
+          name="arrow"
+          scale="0.9"
+          :title="t('ht.file.download')"
+          @click="$emit('download', file)"
+        />
+        <el-popconfirm
+          v-if="inputWriteable"
+          title="确定要删除吗？"
+          @confirm="$emit('remove', file)"
+        >
+          <ht-icon
+            slot="reference"
+            name="close"
+            class="file-hover__icon"
+            :title="t('ht.common.remove')"
+          />
+        </el-popconfirm>
+      </li>
+    </transition-group>
+  </draggable>
+</template>
+<script>
+  import Locale from '@/mixins/locale'
+  const draggable = require('vuedraggable')
+
+  export default {
+    name: 'FileList',
+    components: { draggable },
+    mixins: [Locale],
+    props: {
+      data: {
+        type: Array,
+      },
+      previewable: {
+        type: Boolean,
+        default: true,
+      },
+      inputWriteable: {
+        type: Boolean,
+        default: true,
+      },
+      downloadable: {
+        type: Boolean,
+        default: true,
+      },
+      sortable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data() {
+      return {
+        isDragging: false,
+      }
+    },
+    computed: {
+      dataVal: {
+        get() {
+          return this.data
+        },
+        set(val) {
+          // 只有在拖拽排序时才通过inputVal对value进行更新
+          if (this.isDragging && val.constructor == Array && val.length > 0) {
+            this.$emit('sort', val)
+          }
+        },
+      },
+      dragOptions() {
+        return {
+          animation: 0,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost',
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
+
+  .file-list__wrap {
+    list-style: none;
+    width: 100%;
+    padding-left: 0;
+    .file-item {
+      padding: 0 6px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .el-progress--line {
+        width: calc(100% - 10px);
+      }
+
+      .file__name {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: calc(100% - 60px);
+        margin: 0;
+      }
+
+      &:hover {
+        .file-hover__icon {
+          visibility: visible;
+        }
+        .file__name {
+          color: $base-color-blue;
+          cursor: pointer;
+        }
+        .handle {
+          display: initial;
+        }
+        .handle + .file_icon {
+          display: none;
+        }
+      }
+      svg {
+        margin-right: 5px;
+      }
+      .handle {
+        display: none;
+        cursor: move;
+      }
+      .file-hover__icon {
+        visibility: hidden;
+      }
+      .file-hover__icon:hover {
+        color: $base-color-blue;
+        cursor: pointer;
+      }
+    }
+  }
+</style>