large-model-component 1.0.1 → 1.0.3

package/packages/upload/src/upload-dragger.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="el-upload-dragger"
+    :class="{
+      'is-dragover': dragover
+    }"
+    @drop.prevent="onDrop"
+    @dragover.prevent="onDragover"
+    @dragleave.prevent="dragover = false"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElUploadDrag',
+    props: {
+      disabled: Boolean
+    },
+    inject: {
+      uploader: {
+        default: ''
+      }
+    },
+    data() {
+      return {
+        dragover: false
+      };
+    },
+    methods: {
+      onDragover() {
+        if (!this.disabled) {
+          this.dragover = true;
+        }
+      },
+      onDrop(e) {
+        if (this.disabled || !this.uploader) return;
+        const accept = this.uploader.accept;
+        this.dragover = false;
+        if (!accept) {
+          this.$emit('file', e.dataTransfer.files);
+          return;
+        }
+        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
+          const { type, name } = file;
+          const extension = name.indexOf('.') > -1
+            ? `.${ name.split('.').pop() }`
+            : '';
+          const baseType = type.replace(/\/.*$/, '');
+          return accept.split(',')
+            .map(type => type.trim())
+            .filter(type => type)
+            .some(acceptedType => {
+              if (/\..+$/.test(acceptedType)) {
+                return extension === acceptedType;
+              }
+              if (/\/\*$/.test(acceptedType)) {
+                return baseType === acceptedType.replace(/\/\*$/, '');
+              }
+              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
+                return type === acceptedType;
+              }
+              return false;
+            });
+        }));
+      }
+    }
+  };
+</script>
+

package/packages/upload/src/upload-list.vue

@@ -0,0 +1,94 @@
+<template>
+  <transition-group
+    tag="ul"
+    :class="['el-upload-list', 'el-upload-list--' + listType, { 'is-disabled': disabled }]"
+    name="el-list"
+  >
+    <li
+      v-for="file in files"
+      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
+      :key="file.uid"
+      tabindex="0"
+      @keydown.delete="!disabled && $emit('remove', file)"
+      @focus="focusing = true"
+      @blur="focusing = false"
+      @click="focusing = false"
+    >
+      <slot :file="file">
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
+          :src="file.url"
+          alt=""
+        />
+        <a class="el-upload-list__item-name" @click="handleClick(file)">
+          <i class="el-icon-document"></i>{{ file.name }}
+        </a>
+        <label class="el-upload-list__item-status-label">
+          <i
+            :class="{
+              'el-icon-upload-success': true,
+              'el-icon-circle-check': listType === 'text',
+              'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1,
+            }"
+          ></i>
+        </label>
+        <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
+        <i class="el-icon-close-tip" v-if="!disabled">按delete删除</i>
+        <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
+        <el-progress
+          v-if="file.status === 'uploading'"
+          :type="listType === 'picture-card' ? 'circle' : 'line'"
+          :stroke-width="listType === 'picture-card' ? 6 : 2"
+          :percentage="parsePercentage(file.percentage)"
+        >
+        </el-progress>
+        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
+          <span
+            class="el-upload-list__item-preview"
+            v-if="handlePreview && listType === 'picture-card'"
+            @click="handlePreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span v-if="!disabled" class="el-upload-list__item-delete" @click="$emit('remove', file)">
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </slot>
+    </li>
+  </transition-group>
+</template>
+<script>
+export default {
+  name: 'ElUploadList',
+  data() {
+    return {
+      focusing: false,
+    };
+  },
+
+  props: {
+    files: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    handlePreview: Function,
+    listType: String,
+  },
+  methods: {
+    parsePercentage(val) {
+      return parseInt(val, 10);
+    },
+    handleClick(file) {
+      this.handlePreview && this.handlePreview(file);
+    },
+  },
+};
+</script>

package/packages/upload/src/upload.vue

@@ -0,0 +1,274 @@
+<script>
+import ajax from './ajax';
+import UploadDragger from './upload-dragger.vue';
+import SparkMD5 from 'spark-md5';
+function getFileMD5(file) {
+  return new Promise((resolve, reject) => {
+    const spark = new SparkMD5.ArrayBuffer();
+    const fileReader = new FileReader();
+    fileReader.onload = (e) => {
+      spark.append(e.target.result);
+      resolve(spark.end());
+    };
+    fileReader.onerror = () => {
+      reject('');
+    };
+    fileReader.readAsArrayBuffer(file);
+  });
+}
+
+export default {
+  inject: ['uploader'],
+  components: {
+    UploadDragger,
+  },
+  props: {
+    type: String,
+    action: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'file',
+    },
+    data: Object,
+    chunkSize: Number,
+    thread: Number,
+    headers: Object,
+    withCredentials: Boolean,
+    multiple: Boolean,
+    accept: String,
+    onStart: Function,
+    onProgress: Function,
+    onSuccess: Function,
+    onError: Function,
+    beforeUpload: Function,
+    drag: Boolean,
+    onPreview: {
+      type: Function,
+      default: function () {},
+    },
+    onRemove: {
+      type: Function,
+      default: function () {},
+    },
+    fileList: Array,
+    autoUpload: Boolean,
+    listType: String,
+    httpRequest: {
+      type: Function,
+      default: ajax,
+    },
+    disabled: Boolean,
+    limit: Number,
+    onExceed: Function,
+  },
+
+  data() {
+    return {
+      mouseover: false,
+      reqs: {},
+    };
+  },
+
+  methods: {
+    isImage(str) {
+      return str.indexOf('image') !== -1;
+    },
+    handleChange(ev) {
+      const files = ev.target.files;
+
+      if (!files) return;
+      this.uploadFiles(files);
+    },
+    uploadFiles(files) {
+      if (this.limit && this.fileList.length + files.length > this.limit) {
+        this.onExceed && this.onExceed(files, this.fileList);
+        return;
+      }
+
+      let postFiles = Array.prototype.slice.call(files);
+      if (!this.multiple) {
+        postFiles = postFiles.slice(0, 1);
+      }
+
+      if (postFiles.length === 0) {
+        return;
+      }
+
+      postFiles.forEach((rawFile) => {
+        this.onStart(rawFile);
+        if (this.autoUpload) this.upload(rawFile);
+      });
+    },
+    upload(rawFile) {
+      this.$refs.input.value = null;
+
+      if (!this.beforeUpload) {
+        return this.post(rawFile);
+      }
+
+      const before = this.beforeUpload(rawFile);
+      if (before && before.then) {
+        before.then(
+          (processedFile) => {
+            const fileType = Object.prototype.toString.call(processedFile);
+
+            if (fileType === '[object File]' || fileType === '[object Blob]') {
+              if (fileType === '[object Blob]') {
+                processedFile = new File([processedFile], rawFile.name, {
+                  type: rawFile.type,
+                });
+              }
+              for (const p in rawFile) {
+                if (rawFile.hasOwnProperty(p)) {
+                  processedFile[p] = rawFile[p];
+                }
+              }
+              this.post(processedFile);
+            } else {
+              this.post(rawFile);
+            }
+          },
+          () => {
+            this.onRemove(null, rawFile);
+          },
+        );
+      } else if (before !== false) {
+        this.post(rawFile);
+      } else {
+        this.onRemove(null, rawFile);
+      }
+    },
+    abort(file) {
+      const { reqs } = this;
+      if (file) {
+        let uid = file;
+        if (file.uid) uid = file.uid;
+        if (reqs[uid]) {
+          // reqs[uid].abort();
+          reqs[uid].forEach((item) => {
+            item.abort();
+          });
+        }
+      } else {
+        Object.keys(reqs).forEach((uid) => {
+          if (reqs[uid]) {
+            // reqs[uid].abort();
+            reqs[uid].forEach((item) => {
+              item.abort();
+            });
+          }
+          delete reqs[uid];
+        });
+      }
+    },
+    async post(rawFile) {
+      //计算整个大文件hash
+      let fileHash = await getFileMD5(rawFile);
+      //大文件切片后的数组
+      let chunkList = [];
+      //开始切片
+      for (let i = 0; i < rawFile.size; i = i + this.chunkSize) {
+        const tmp = rawFile.slice(i, Math.min(i + this.chunkSize, rawFile.size));
+        chunkList.push(tmp);
+      }
+      // 计算每个切换的hash
+      const chunkHashList = await Promise.all(
+        chunkList.map(async (item) => {
+          return await getFileMD5(item);
+        }),
+      );
+
+      const { uid } = rawFile;
+      const options = {
+        headers: this.headers,
+        withCredentials: this.withCredentials,
+        file: rawFile,
+        data: this.data,
+        filename: this.name,
+        action: this.action,
+        fileHash: fileHash,
+        chunkList: chunkList,
+        chunkHashList: chunkHashList,
+        chunkSize: this.chunkSize,
+        thread: this.thread,
+        onProgress: (e) => {
+          this.onProgress(e, rawFile);
+        },
+        onSuccess: (res) => {
+          this.onSuccess(res, rawFile);
+          delete this.reqs[uid];
+        },
+        onError: (err) => {
+          this.onError(err, rawFile);
+          delete this.reqs[uid];
+        },
+      };
+      const req = this.httpRequest(options);
+      this.reqs[uid] = req;
+      if (req && req.then) {
+        req.then(options.onSuccess, options.onError);
+      }
+    },
+    handleClick() {
+      if (!this.disabled) {
+        this.$refs.input.value = null;
+        this.$refs.input.click();
+      }
+    },
+    handleKeydown(e) {
+      if (e.target !== e.currentTarget) return;
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        this.handleClick();
+      }
+    },
+  },
+
+  render(h) {
+    let {
+      handleClick,
+      drag,
+      name,
+      handleChange,
+      multiple,
+      accept,
+      listType,
+      uploadFiles,
+      disabled,
+      handleKeydown,
+    } = this;
+    const data = {
+      class: {
+        'el-upload': true,
+      },
+      on: {
+        click: handleClick,
+        keydown: handleKeydown,
+      },
+    };
+    data.class[`el-upload--${listType}`] = true;
+    return (
+      <div {...data} tabindex="0">
+        {drag ? (
+          <upload-dragger disabled={disabled} on-file={uploadFiles}>
+            {this.$slots.default}
+          </upload-dragger>
+        ) : (
+          this.$slots.default
+        )}
+        <input
+          class="el-upload__input"
+          type="file"
+          ref="input"
+          name={name}
+          on-change={handleChange}
+          multiple={multiple}
+          accept={accept}
+        ></input>
+      </div>
+    );
+  },
+};
+</script>

package/src/App.vue

@@ -1,21 +1,251 @@
 <template>
   <div id="app">
+    <iipHeader :userName="'111'" :columns="columns" :showWorkBench="true" :token="'4ac43982-671d-45e5-8942-4f3d69b6a83c'"> </iipHeader>
+    <div class="content">
+      <!-- <iipUpload
+        class="upload-demo"
+        action="http://10.221.19.220:9922/file/part"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :before-remove="beforeRemove"
+        multiple
+        :limit="3"
+        :on-exceed="handleExceed"
+        :file-list="fileList"
+      >
+        <button size="small" type="primary">点击上传</button>
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      </iipUpload> -->
+
+      <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
+    </div>
     <largeModel />
+
+    <iipFooter apiHost="https://ips.inspuriip.com" :apiPath="`/gateway/site`"></iipFooter>
   </div>
 </template>
 
 <script>
-import largeModel from "../packages/largeModel/index.vue";
+import HelloWorld from './components/HelloWorld.vue';
+import iipHeader from '../packages/header/header.vue';
+import iipFooter from '../packages/footer/footer.vue';
+import iipUpload from '../packages/upload/index.js';
+import largeModel from '../packages/model/model.vue'
 export default {
   name: 'App',
   components: {
-    largeModel
+    HelloWorld,
+    iipHeader,
+    iipFooter,
+    iipUpload,
+    largeModel,
   },
   data() {
     return {
+      logoUrl: 'https://uoc.oss.cn-north-3.inspurcloudoss.com/uoc/1692862054225974.svg',
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+      ],
+      userInfo: {},
+      columns: [
+        {
+          id: '17125390210365hp8af54mvj',
+          tenantId: '1739891443916546049',
+          columnName: '金融服务',
+          columnLink: 'https://sdsc.inspuriip.com/financial-service',
+          child: [],
+          sequence: '9',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17049758382557lzl57j150f',
+          tenantId: '1739891443916546049',
+          columnName: '政策服务',
+          columnLink: 'https://sdsc.inspuriip.com/content-web/domain/industry_policy/',
+          child: [],
+          sequence: '8',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17049741097141gmr2ov64r3',
+          tenantId: '1739891443916546049',
+          columnName: '产品方案',
+          columnLink: 'https://sdsc.inspuriip.com/service-web/product',
+          child: [
+            {
+              id: '1712538588667wndje2xe77',
+              tenantId: '1739891443916546049',
+              columnName: '解决方案',
+              columnLink: 'https://sdsc.inspuriip.com/service-web/scheme',
+              child: [],
+              sequence: '7',
+              runType: '1',
+              parentId: '17049741097141gmr2ov64r3',
+              isShow: '1',
+              columnType: '1',
+              clientId: '894283562298114048',
+              updateTime: '2024-04-08 09:17:14',
+              createUser: '942046827627151360',
+              updateUser: '942046827627151360',
+              createTime: '2024-04-08 09:17:14',
+            },
+            {
+              id: '1712538578330f2m7x85ajww',
+              tenantId: '1739891443916546049',
+              columnName: '服务产品',
+              columnLink: 'https://sdsc.inspuriip.com/service-web/product',
+              child: [],
+              sequence: '6',
+              runType: '1',
+              parentId: '17049741097141gmr2ov64r3',
+              isShow: '1',
+              columnType: '1',
+              clientId: '894283562298114048',
+              updateTime: '2024-04-08 09:17:14',
+              createUser: '942046827627151360',
+              updateUser: '942046827627151360',
+              createTime: '2024-04-08 09:17:14',
+            },
+          ],
+          sequence: '5',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '1704975259913hgxqsu10yz4',
+          tenantId: '1739891443916546049',
+          columnName: '供需对接',
+          columnLink: 'https://sdsc.inspuriip.com/demand-web/',
+          child: [],
+          sequence: '4',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17125384397583zghuz9qp7u',
+          tenantId: '1739891443916546049',
+          columnName: '场景体验',
+          columnLink: 'https://sdsc.inspuriip.com/service-web/case',
+          child: [],
+          sequence: '3',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '171253840393102xwb7411gne',
+          tenantId: '1739891443916546049',
+          columnName: '企业诊断',
+          columnLink: 'https://sdsc.inspuriip.com/digital-diagosis-web/',
+          child: [],
+          sequence: '2',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17125387536464kv0s0k1s29',
+          tenantId: '1739891443916546049',
+          columnName: '人才培训',
+          columnLink: 'https://sdsc.inspuriip.com/lecture-theatre/',
+          child: [],
+          sequence: '10',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17049572082266uwn25bp1tn',
+          tenantId: '1739891443916546049',
+          columnName: '首页',
+          columnLink: 'https://sdsc.inspuriip.com/',
+          child: [],
+          sequence: '1',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+      ],
     };
   },
   methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`,
+      );
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
   },
 };
 </script>
@@ -25,6 +255,14 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  .content {
+    text-align: center;
+    color: #2c3e50;
+    height: 1000px;
+    width: 100%;
+    background: #2c3e50;
+  }
 }
 .column {
   padding-left: 10px;