@newview/file-ui 0.0.0

package/src/UploadFile/UploadFile.vue

@@ -0,0 +1,239 @@
+<!--
+功能名称：上传文件
+创 建 人：弋强
+日    期：2023/02/14 09:42:54
+-->
+<template>
+  <div class="uploadFile">
+    <template v-if="!single">
+      <Card dis-hover v-for="groupName in groups" style="margin-bottom: 8px">
+        <template #title v-if="groupName != '默认'">{{ groupName }}</template>
+        <!-- 文件列表 -->
+        <div
+          v-for="(item, index) in getGroupFiles(groupName)"
+          :class="
+            isImage(item)
+              ? 'file-upload-list file-upload-list-bs'
+              : 'file-upload-list'
+          "
+        >
+          <div
+            class="file-upload-list-content"
+            @click="doView(item)"
+            :title="item.FileName"
+          >
+            <Image
+              :src="getThumbnailUrl(item)"
+              fit="cover"
+              width="100%"
+              height="100%"
+            />
+
+            <div class="file-upload-list-cover">
+              <Space>
+                <Icon
+                  type="md-download"
+                  @click.stop="doDwonload(item)"
+                  title="下载"
+                ></Icon>
+                <Icon
+                  v-if="!readonly"
+                  type="md-trash"
+                  @click.stop="doRemove(item)"
+                  title="删除"
+                ></Icon>
+              </Space>
+            </div>
+          </div>
+        </div>
+        <!-- 文件列表 END -->
+
+        <!-- 上传组件 -->
+        <Upload
+          v-if="!readonly"
+          ref="uploadRef"
+          type="drag"
+          name="FormFile"
+          :multiple="multiple"
+          :show-upload-list="false"
+          :format="format"
+          :max-size="maxSize"
+          :action="action"
+          :headers="headers"
+          :data="uploadFilePos[groupName]"
+          :on-success="doSuccess"
+          :on-format-error="doFormatError"
+          :on-exceeded-size="doMaxSize"
+          :before-upload="doBeforeUpload"
+          style="display: inline-block; width: 78px"
+        >
+          <div class="file-upload-btn">
+            <Icon type="ios-camera" size="20"></Icon>
+          </div>
+        </Upload>
+        <!-- 上传组件 END -->
+
+        <!-- 无附件信息且只读状态提示 -->
+        <div
+          v-if="readonly && fileList.length == 0"
+          class="nv-flex"
+          style="color: #949494; border: 1px dashed #dcdee2;height: 60px;padding: 0 20px;font-size: 16px;justify-content: center;"
+        >
+          <i class="nv-flex" style="width: 40px;margin-right: 6px;"><svg t="1706683071705" class="icon" viewBox="0 0 1566 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4559" style="fill: currentColor;"><path d="M156.661991 699.757959h21.096999a10.443999 10.443999 0 0 1 10.235999 10.443999c0 5.765-4.491 10.443999-10.235999 10.444h-21.096999v21.097999a10.443999 10.443999 0 0 1-10.444 10.234999 10.276999 10.276999 0 0 1-10.443999-10.234999v-21.097999h-21.096999a10.443999 10.443999 0 0 1-10.234999-10.444c0-5.765 4.49-10.443999 10.234999-10.443999h21.096999v-21.096999a10.443999 10.443999 0 0 1 10.443999-10.234999c5.765 0 10.443999 4.49 10.444 10.234999v21.096999z m1378.627919-83.552995v-21.096999a10.276999 10.276999 0 0 0-10.443999-10.234999 10.443999 10.443999 0 0 0-10.444 10.234999v21.096999h-21.096998a10.276999 10.276999 0 0 0-10.235 10.443999c0 5.598 4.595 10.443999 10.235 10.444h21.096998v21.096998c0 5.745 4.679 10.235999 10.444 10.236a10.443999 10.443999 0 0 0 10.443999-10.236v-21.096998h21.097999c5.744 0 10.234999-4.679 10.234999-10.444a10.443999 10.443999 0 0 0-10.234999-10.443999h-21.097999zM776.459955 960.861944H250.596985a20.804999 20.804999 0 0 1-20.825998-20.887999c0-11.529999 9.462999-20.888999 20.825998-20.888999h94.727995a83.009995 83.009995 0 0 1-11.112-41.671997v-605.969965a83.489995 83.489995 0 0 1 83.636996-83.447995h62.580996v-20.992999a83.489995 83.489995 0 0 1 83.636995-83.448995h501.151971a83.448995 83.448995 0 0 1 83.636995 83.448995v605.969965c0 15.184999-4.053 29.409998-11.134 41.671997h115.553994c11.551999 0 20.909999 9.273999 20.909998 20.887999 0 11.529999-9.295999 20.887999-20.888998 20.887999h-250.659986v20.992999c0 15.185999-4.052 29.409998-11.132999 41.671997h11.195999c11.488999 0 20.825999 9.274999 20.825999 20.888999 0 11.529999-9.462999 20.887999-20.825999 20.887999H892.807948a41.657998 41.657998 0 0 1-6.413 50.862997 41.671998 41.671998 0 0 1-59.071996 0l-50.862997-50.862997z m76.367995-41.776998h66.423996c22.977999 0 41.609998-18.589999 41.609998-41.879997V270.460984c0-22.559999-18.047999-40.689998-40.313998-40.689997H416.303976c-22.266999 0-40.314998 18.213999-40.314998 40.689997v606.741965c0 23.123999 18.799999 41.880998 41.589998 41.880997h317.083981l-10.736999-10.756999a41.692998 41.692998 0 0 1-10.862-40.376998l-19.718999-19.739999a146.259991 146.259991 0 0 1-190.980988-220.516987 146.217991 146.217991 0 0 1 220.517987 190.980989l19.738998 19.739999a41.629998 41.629998 0 0 1 40.376998 10.839999l69.829996 69.829996z m149.809991-104.440994h62.852997a41.796998 41.796998 0 0 0 41.589997-41.776997v-605.759965c0-23.144999-18.632999-41.776998-41.589997-41.776997H563.774967a41.796998 41.796998 0 0 0-41.566998 41.775997v20.888999h396.793977a83.448995 83.448995 0 0 1 83.636995 83.448995v543.199968zM266.326984 46.998997h31.122999c8.773999 0 15.875999 6.955 15.875999 15.665999 0 8.647999-7.102 15.665999-15.875999 15.665999h-31.122999v31.123999c0 8.772999-6.956 15.874999-15.665999 15.874999a15.769999 15.769999 0 0 1-15.666999-15.874999V78.329995H203.869988a15.728999 15.728999 0 0 1-15.874999-15.665999c0-8.647999 7.102-15.665999 15.874999-15.665999h31.122998V15.874999C234.992986 7.102 241.949986 0 250.659985 0c8.646999 0 15.665999 7.102 15.665999 15.874999V46.999997zM20.887999 939.973945c0-11.529999 9.462999-20.888999 20.825999-20.888999h125.454992c11.488999 0 20.825999 9.274999 20.825999 20.888999 0 11.529999-9.462999 20.887999-20.825999 20.887999H41.713998a20.804999 20.804999 0 0 1-20.825999-20.887999z m658.733961-135.021992A104.441994 104.441994 0 1 0 531.899969 657.229961a104.441994 104.441994 0 0 0 147.721991 147.721992z m-220.079987-491.626971a20.887999 20.887999 0 0 1 20.867999-20.888999h229.791986a20.887999 20.887999 0 1 1 0 41.776997H480.430972a20.825999 20.825999 0 0 1-20.887999-20.887998z m0 104.440994c0-11.529999 9.295999-20.887999 20.742999-20.887999H814.789952c11.446999 0 20.741999 9.273999 20.741999 20.887999 0 11.529999-9.294999 20.887999-20.741999 20.887998H480.284972a20.762999 20.762999 0 0 1-20.741999-20.887998z m0 104.441993c0-11.529999 9.316999-20.888999 20.846999-20.888998h146.301991c11.509999 0 20.845999 9.274999 20.845999 20.888998 0 11.529999-9.315999 20.887999-20.845999 20.887999H480.388972a20.804999 20.804999 0 0 1-20.845999-20.887999zM62.665996 396.877977a62.664996 62.664996 0 1 1 0-125.329993 62.664996 62.664996 0 0 1 0 125.329993z m0-31.332998a31.331998 31.331998 0 1 0 0-62.664997 31.331998 31.331998 0 0 0 0 62.664997z m1295.074924-93.996995a62.664996 62.664996 0 1 1 0-125.329993 62.664996 62.664996 0 0 1 0 125.329993z m0-31.332998a31.331998 31.331998 0 1 0 0-62.663996 31.331998 31.331998 0 0 0 0 62.663996z" p-id="4560"></path></svg></i>
+          <div>{{ nullMsg }}</div>
+        </div>
+        <!-- 无附件信息且只读状态提示 END -->
+      </Card>
+    </template>
+    <template v-else>
+      <div
+        v-if="getFirstFile(groups[0])"
+        class="file-upload-list-content"
+        @click="doView(getFirstFile(groups[0]))"
+        style="width: 100%; height: 100%"
+      >
+        <Image
+          :src="getThumbnailUrl(getFirstFile(groups[0]))"
+          fit="fill"
+          width="100%"
+          height="100%"
+        />
+
+        <div class="file-upload-list-cover">
+          <Space>
+            <Icon
+              type="md-download"
+              @click.stop="doDwonload(getFirstFile(groups[0]))"
+              title="下载"
+            ></Icon>
+            <Icon
+              v-if="!readonly"
+              type="md-trash"
+              @click.stop="doRemove(getFirstFile(groups[0]))"
+              title="删除"
+            ></Icon>
+          </Space>
+        </div>
+      </div>
+
+      <Card
+        dis-hover
+        style="margin-bottom: 8px"
+        v-if="!readonly && !getSingle(groups[0])"
+      >
+        <Upload
+          ref="uploadRef"
+          type="drag"
+          name="FormFile"
+          :multiple="multiple"
+          :show-upload-list="false"
+          :format="format"
+          :max-size="maxSize"
+          :action="action"
+          :headers="headers"
+          :data="uploadFilePos[groups[0]]"
+          :on-success="doSuccess"
+          :on-format-error="doFormatError"
+          :on-exceeded-size="doMaxSize"
+          :before-upload="doBeforeUpload"
+          style="display: inline-block; width: 78px"
+        >
+          <div class="file-upload-btn">
+            <Icon type="ios-camera" size="20"></Icon>
+          </div>
+        </Upload>
+      </Card>
+    </template>
+
+    <Spin fix v-if="uploading"></Spin>
+
+    <!-- 预览组件 -->
+    <filePreview
+      v-model="previewVisible"
+      :preview-list="previewList"
+      :preview-index="previewIndex"
+      :file-info="previewFileInfo"
+    />
+    <!-- 预览组件 END -->
+  </div>
+</template>
+
+<script lang="ts" src="./UploadFile.ts"></script>
+
+<style scoped lang="scss">
+.uploadFile {
+  :deep(.ivu-upload-drag) {
+    border: 1px dashed #dcdee2;
+    border-radius: 2px;
+  }
+
+  :deep(.ivu-upload-drag:hover) {
+    border: 1px dashed #2d8cf0;
+    border-radius: 2px;
+    color: #2d8cf0;
+  }
+
+  :deep(.ivu-card-body) {
+    padding: 0;
+  }
+
+  .file-upload-btn {
+    width: 78px;
+    height: 78px;
+    line-height: 78px;
+    text-align: center;
+  }
+
+  .file-upload-list-bs {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  }
+
+  .file-upload-list {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    text-align: center;
+    line-height: 80px;
+    overflow: hidden;
+    background: #fff;
+    margin-right: 12px;
+    border-radius: 4px;
+  }
+
+  .file-upload-list-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .file-upload-list-cover {
+    display: none;
+    background: rgba(0, 0, 0, 0.7);
+    position: absolute;
+    top: 0;
+    left: 0px;
+    right: 0px;
+    line-height: 18px;
+  }
+
+  .file-upload-list-content:hover .file-upload-list-cover {
+    display: block;
+  }
+
+  .file-upload-list-cover i {
+    color: #ccc;
+    font-size: 18px;
+    cursor: pointer;
+  }
+
+  .file-upload-list-cover i:hover {
+    color: #fff;
+  }
+}
+</style>

package/src/UploadFile/index.ts

@@ -0,0 +1,3 @@
+import UploadFile from "./UploadFile.vue"
+import FilePreview from "./FilePreview.vue"
+export { UploadFile, FilePreview };

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./UploadFile"
+export * from "./ComFormUp"
+export * from "./TextEditor"

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "noImplicitAny": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/types/ComFormUp.d.ts

@@ -0,0 +1,27 @@
+import type { DefineComponent } from 'vue';
+
+export declare const NvComFormUp: DefineComponent<{
+    /**
+    * 保存文本
+    */
+    saveTextData(): void;
+
+    /**
+     * 删除文本
+     */
+    deleteTextData(): void;
+
+    /**
+     * 清空长文本
+     */
+    clearTextData(): void;
+
+    /**
+    * 删除文本
+    */
+    deleteTextDataByToken(Token: string): void;
+    /**
+   * 获取长文本
+   */
+    getText(): void;
+}>

package/types/FilePreview.d.ts

@@ -0,0 +1,5 @@
+import type { DefineComponent } from 'vue';
+
+export declare const FilePreview: DefineComponent<{
+    
+}>

package/types/FilePreviewInstance.d.ts

@@ -0,0 +1,9 @@
+import { BaseInstance } from "@newview/base-vue";
+
+export declare class FilePreviewInstance extends BaseInstance {
+    /**
+     * 关闭预览
+     * @param value 
+     */
+    doClose(value: boolean): void;
+}

package/types/TextEditor.d.ts

@@ -0,0 +1,26 @@
+import type { DefineComponent } from 'vue';
+
+export declare const TextEditor: DefineComponent<{
+
+    /**
+     * 保存文本
+     */
+    saveTextData(): void;
+
+    /**
+     * 删除文本
+     */
+    deleteTextData(): void;
+
+    /**
+     * 清空长文本
+     */
+    clearTextData(): void;
+
+    /**
+    * 删除文本
+    */
+    deleteTextDataByToken(Token: string): void;
+
+
+}>

package/types/UploadFile.d.ts

@@ -0,0 +1,5 @@
+import type { DefineComponent } from 'vue';
+
+export declare const UploadFile: DefineComponent<{
+
+}>

package/types/UploadFileInstance.d.ts

@@ -0,0 +1,5 @@
+import { BaseInstance } from "@newview/base-vue";
+
+export declare class UploadFileInstance extends BaseInstance {
+    
+}

package/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./FilePreviewInstance"
+export * from "./UploadFileInstance"
+
+export * from "./FilePreview"
+export * from "./UploadFile"
+export * from "./ComFormUp"
+export * from "./TextEditor"

package/vite.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, './src/index.ts'),
+      name: 'fileui',
+      fileName: 'file-ui'
+    },
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: [
+        "@newview/base-vue",
+        "@newview/fileservice-api",
+        "@newview/infrastructure",
+        "@newview/tools",
+        "@newview/ui",
+        "sass",
+        "view-ui-plus",
+        "vue",
+        "vue-router"
+      ],
+      output: {
+        globals: {
+          vue: "Vue",
+          'vue-router': 'VueRouter',
+        }
+      }
+    },
+    minify: 'terser',
+    terserOptions: { // 在打包代码时移除 console、debugger 和 注释
+      compress: {
+        /* (default: false) -- Pass true to discard calls to console.* functions.
+          If you wish to drop a specific function call such as console.info and/or
+          retain side effects from function arguments after dropping the function
+          call then use pure_funcs instead
+        */
+        drop_console: true, // 生产环境时移除console
+        drop_debugger: true
+      },
+      format: {
+        comments: false // 删除注释comments
+      }
+    }
+  }
+});