swordpass-ui 1.0.0

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('cl.file.sort')"
+          >
+            <i class="el-icon-rank"></i>
+          </span>
+          <span
+            v-if="previewable"
+            class="el-upload-list__item-preview"
+            :title="t('cl.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('cl.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',
+          },
+        ]"
+      >
+        <cl-icon v-if="sortable && inputWriteable" name="sort" class="handle" />
+        <cl-icon name="file" class="file_icon" />
+        <p
+          class="file__name"
+          :class="{ 'done-subject': previewable }"
+          :title="file.name"
+          @click="$emit('preview', file)"
+        >
+          {{ file.name }}
+        </p>
+        <el-progress
+          v-if="file.status == 'uploading'"
+          class="el-progress--line"
+          :stroke-width="4"
+          :percentage="Math.floor(file.percentage)"
+        />
+        <cl-icon
+          v-if="downloadable && file.status == 'success'"
+          class="file-hover__icon"
+          name="arrow"
+          scale="0.9"
+          :title="t('cl.file.download')"
+          @click="$emit('download', file)"
+        />
+        <el-popconfirm
+          v-if="inputWriteable"
+          title="确定要删除吗？"
+          @confirm="$emit('remove', file)"
+        >
+          <cl-icon
+            slot="reference"
+            name="close"
+            class="file-hover__icon"
+            :title="t('cl.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>

package/packages/File/src/FileTable.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-table
+    :data="data"
+    row-key="uid"
+    border
+    class="file__upload-table"
+    :size="size"
+  >
+    <el-table-column
+      label="序号"
+      align="center"
+      type="index"
+      width="50"
+    ></el-table-column>
+    <el-table-column label="附件名称" min-width="150" align="center">
+      <template slot-scope="scope">
+        <span
+          :class="{ 'done-subject': previewable }"
+          @click="$emit('preview', scope.row)"
+        >
+          {{ scope.row.name }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-if="calColumnShow.fileType"
+      prop="type"
+      align="center"
+      lalign="center"
+      width="100"
+      label="附件类型"
+    ></el-table-column>
+    <el-table-column
+      v-if="calColumnShow.fileSize"
+      align="center"
+      lalign="center"
+      width="100"
+      label="附件大小"
+    >
+      <template slot-scope="scope">
+        {{ scope.row.size | computerSize }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="上传人"
+      width="120"
+      prop="username"
+    ></el-table-column>
+    <el-table-column
+      v-if="inputWriteable"
+      align="center"
+      label="状态"
+      width="80"
+    >
+      <template slot-scope="scope">
+        <el-progress
+          type="circle"
+          :width="25"
+          :stroke-width="2"
+          :percentage="scope.row.percentage"
+          :status="getProgressStatus(scope.row.state)"
+        ></el-progress>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-for="con in propConfList"
+      :key="con.name"
+      :prop="con.name"
+      :label="con.desc"
+      width="200"
+      align="center"
+    >
+      <template slot-scope="scope">
+        <cl-input
+          v-model="data[scope.$index][con.name]"
+          :name="con.desc"
+          :permission="
+            permission == 'w' || permission == 'b'
+              ? con.requried
+                ? 'b'
+                : 'w'
+              : permission
+          "
+        ></cl-input>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-if="inputWriteable || downloadable"
+      align="center"
+      label="操作"
+      :width="operateWidth"
+    >
+      <template slot-scope="scope">
+        <el-button
+          v-if="sortable && inputWriteable"
+          size="small"
+          icon="el-icon-arrow-up"
+          plain
+          @click="$emit('move', scope.row, 'up')"
+        ></el-button>
+        <el-button
+          v-if="sortable && inputWriteable"
+          size="small"
+          icon="el-icon-arrow-down"
+          plain
+          @click="$emit('move', scope.row, 'down')"
+        ></el-button>
+        <el-button
+          v-if="downloadable"
+          :disabled="scope.row.status !== 'success'"
+          size="small"
+          icon="el-icon-download"
+          plain
+          @click="$emit('download', scope.row)"
+        ></el-button>
+        <el-popconfirm
+          v-if="inputWriteable"
+          class="table-delete__button"
+          title="确定要删除吗？"
+          @confirm="$emit('remove', scope.row)"
+        >
+          <el-button
+            slot="reference"
+            plain
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+          ></el-button>
+        </el-popconfirm>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script>
+  import Locale from '@/mixins/locale'
+
+  export default {
+    name: 'FileTable',
+    mixins: [Locale],
+    props: {
+      data: {
+        type: Array,
+      },
+      size: {
+        type: String,
+        default: 'small',
+        validator: function(value) {
+          return ['medium', 'small', 'mini'].indexOf(value) !== -1
+        },
+      },
+      permission: {
+        type: String,
+        default: 'w',
+        validator: function(value) {
+          return ['b', 'w', 'r', 'n'].indexOf(value) !== -1
+        },
+      },
+      previewable: {
+        type: Boolean,
+        default: true,
+      },
+      columnShow: {
+        type: Object,
+      },
+      propConf: [Array, String],
+      inputWriteable: {
+        type: Boolean,
+        default: true,
+      },
+      downloadable: {
+        type: Boolean,
+        default: true,
+      },
+      sortable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      operateWidth() {
+        return !this.inputWriteable ? '70' : this.sortable ? '260' : '130'
+      },
+      calColumnShow: function() {
+        let defaultSetting = { fileType: true, fileSize: true }
+        return { ...defaultSetting, ...this.columnShow }
+      },
+
+      propConfList() {
+        const filePropConf =
+          typeof this.propConf === 'string' && this.propConf
+            ? JSON.parse(this.propConf)
+            : this.propConf
+        return filePropConf.filter((item) => item.desc) || []
+      },
+    },
+    methods: {
+      //附件状态转换为progress的状态
+      getProgressStatus(status) {
+        return status == 'success'
+          ? 'success'
+          : status == 'fail'
+          ? 'exception'
+          : 'warning'
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .file__upload-table {
+    .el-button + .table-delete__button {
+      margin-left: 10px;
+    }
+
+    .done-subject {
+      cursor: pointer;
+    }
+
+    .done-subject:hover {
+      color: $base-color-blue;
+    }
+  }
+</style>