ui-process-h5 0.1.32 → 0.1.36

package/package.json

@@ -2,13 +2,8 @@
   "name": "ui-process-h5",
   "private": false,
   "description": "流程组件",
-  "version": "0.1.32",
+  "version": "0.1.36",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
-  },
   "files": [
     "packages/*",
     "Readme.md",
@@ -17,56 +12,18 @@
   "publicConfig": {
     "registry": "http://registry.npmjs.org/"
   },
-  "main": "./packages/index.ts",
-  "module": "./packages/index.ts",
+  "main": "./packages/index.js",
+  "module": "./packages/index.js",
   "exports": {
     ".": {
-      "import": "./packages/index.ts",
-      "require": "./packages/index.ts"
+      "import": "./packages/index.js",
+      "require": "./packages/index.js"
     }
   },
   "dependencies": {
-    "axios": "^1.3.6",
-    "dayjs": "^1.11.7",
-    "less-loader": "^11.1.0",
-    "sass": "^1.62.0",
-    "vue": "^3.2.47",
     "vue-demi": "^0.14.0"
   },
-  "devDependencies": {
-    "@commitlint/cli": "^17.0.0",
-    "@commitlint/config-conventional": "^17.0.0",
-    "@types/node": "^18.15.12",
-    "@types/sass": "^1.43.1",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.0",
-    "axios": "^1.3.5",
-    "chalk": "^4.1.2",
-    "commitizen": "^4.2.4",
-    "cross-env": "^7.0.3",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.17.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-define-config": "^1.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.1.0",
-    "good-storage": "^1.1.1",
-    "husky": "^8.0.1",
-    "js-cookie": "^3.0.1",
-    "prettier": "^2.6.2",
-    "rimraf": "^3.0.2",
-    "sass": "^1.49.7",
-    "standard-version": "^9.5.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0",
-    "vite-plugin-dts": "^1.2.0",
-    "vite-plugin-md": "^0.15.0",
-    "vue": "^3.2.47",
-    "vue-tsc": "^1.2.0"
-  },
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

package/packages/components/process/{index.ts → index.js}

@@ -1,7 +1,6 @@
-import { App } from "vue-demi";
-import TopProcess from "./src/index.vue";
+import TopProcess from "./src/process.vue";
 
-TopProcess.install = function (app: App) {
+TopProcess.install = function (app) {
     // 组件注册，按需引入
     app.component(TopProcess.name, TopProcess);
     return app;

package/packages/components/process/src/attchlist-upload.vue

@@ -0,0 +1,585 @@
+<template>
+    <div class="attch-upload">
+        <div class="attch-upload-mask" v-if="buttonLoading"></div>
+        <div class="attch-upload-body">
+            <div class="upload-header">
+                <div class="upload-header-title">
+                    附件
+                    <span v-if="require" class="upload-header-title--re"
+                        >*</span
+                    >
+                </div>
+                <div class="upload-header-upload">
+                    <div
+                        v-if="!onlyShow"
+                        class="upload-header-upload--item"
+                        id="inputfile"
+                        @click="handleClick"
+                    >
+                        <!-- <input
+                            v-if="haveCount > 0"
+                            class="upload-input"
+                            type="file"
+                            multiple
+                            @change="handleSelect($event, item)"
+                        /> -->
+                        <img src="../theme/img/add-file.png" />上传附件
+                    </div>
+                </div>
+            </div>
+
+            <div class="upload-body">
+                <div class="upload-list" v-if="filesArr.length > 0">
+                    <div
+                        class="list-items"
+                        v-for="(v, i) of filesArr"
+                        :key="v.uuid"
+                    >
+                        <div class="list-items-icon">
+                            <img
+                                v-if="
+                                    xlsIcon.includes(
+                                        v.name.substring(
+                                            v.name.lastIndexOf('.') + 1
+                                        )
+                                    )
+                                "
+                                class="icon-img"
+                                src="../theme/img/xls.png"
+                            />
+                            <img
+                                v-else-if="
+                                    imgIcon.includes(
+                                        v.name.substring(
+                                            v.name.lastIndexOf('.') + 1
+                                        )
+                                    )
+                                "
+                                class="icon-img"
+                                src="../theme/img/image.png"
+                            />
+                            <img
+                                v-else-if="
+                                    v.name.substring(
+                                        v.name.lastIndexOf('.') + 1
+                                    ) == 'pdf'
+                                "
+                                class="icon-img"
+                                src="../theme/img/pdf.png"
+                            />
+                            <img
+                                v-else-if="
+                                    docIcon.includes(
+                                        v.name.substring(
+                                            v.name.lastIndexOf('.') + 1
+                                        )
+                                    )
+                                "
+                                class="icon-img"
+                                src="../theme/img/doc.png"
+                            />
+                            <img
+                                v-else-if="
+                                    zipIcon.includes(
+                                        v.name.substring(
+                                            v.name.lastIndexOf('.') + 1
+                                        )
+                                    )
+                                "
+                                class="icon-img"
+                                src="../theme/img/zip.png"
+                            />
+                            <img
+                                v-else
+                                class="icon-img"
+                                src="../theme/img/file.png"
+                            />
+                        </div>
+                        <div class="list-items-info">
+                            <div class="info-name">
+                                {{ v.originFileName }}
+                            </div>
+                            <div class="info-attribute">
+                                <span class="info-attribute-size"
+                                    >{{
+                                        v.fileSize < 1024
+                                            ? v.fileSize
+                                            : v.fileSize / 1024 > 1024
+                                            ? parseFloat(
+                                                  (
+                                                      v.fileSize /
+                                                      1024 /
+                                                      1024
+                                                  ).toFixed(2)
+                                              )
+                                            : parseFloat(
+                                                  (v.fileSize / 1024).toFixed(2)
+                                              )
+                                    }}{{
+                                        v.fileSize < 1024
+                                            ? "b"
+                                            : parseFloat(
+                                                  (v.fileSize / 1024).toFixed(2)
+                                              ) < 1024
+                                            ? "kb"
+                                            : "M"
+                                    }}
+                                </span>
+                                <span
+                                    class="info-attribute-views"
+                                    @click="viewFile(v, i)"
+                                >
+                                    预览
+                                </span>
+                            </div>
+                        </div>
+                        <div class="list-items-operation" v-if="!onlyShow">
+                            <div
+                                @click="handleDel(i, v)"
+                                class="list-items-operation-img"
+                            >
+                                <img src="../theme/img/del.png" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+/* props */
+export default {
+    name: "attchViews",
+    props: {
+        api: {
+            type: Object,
+            defalut: () => {},
+        },
+        // 最大上传数
+        limit: {
+            type: Number | String,
+            default: 4,
+        },
+        //返回上传数据url
+        changeFn: {
+            type: Function,
+            default: null,
+        },
+        require: {
+            default: false,
+        },
+        inComing: {
+            type: Array,
+            defalut: () => [],
+        },
+        deletFn: {
+            type: Function,
+        },
+        onlyShow: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            // 列表展示  已选择文件列表
+            lists: [],
+            filesArr: [],
+            imgIcon: ["jpg", "jpeg", "png", "gif"],
+            docIcon: ["doc", "docx"],
+            xlsIcon: ["xls", "xlsx"],
+            zipIcon: ["zip", "rar", "7z"],
+            extension: [
+                "bmp",
+                "gif",
+                "jpg",
+                "jpeg",
+                "png",
+                "doc",
+                "docx",
+                "xls",
+                "xlsx",
+                "ppt",
+                "pptx",
+                "html",
+                "htm",
+                "txt",
+                "wps",
+                "rar",
+                "zip",
+                "gz",
+                "bz2",
+                "mp4",
+                "avi",
+                "rmvb",
+                "pdf",
+            ],
+            // ----
+            current: "",
+
+            buttonLoading: false,
+            handleCloseType: true,
+            uploadState: true,
+        };
+    },
+
+    watch: {
+        inComing: {
+            handler(val, preval) {
+                if (val) {
+                    // 传入附件列表前预处理  originFileName  fileSize , name与 size 无法渲染
+                    this.filesArr = [].concat(val);
+                    this.emitView();
+                }
+            },
+
+            //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+            //那么首次执行，val为默认值,preVal为undefined
+            immediate: true,
+            //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+            deep: true,
+        },
+    },
+
+    computed: {
+        haveCount() {
+            if (this.limit == -1) return 100;
+            return this.limit - this.filesArr.length;
+        },
+    },
+
+    mounted() {
+        // 兼容uni(uni编译会修改input属性,在点击上传时创建dom) upload-header-upload--item
+        let input = document.createElement("input");
+        input.type = "file";
+        input.className = "upload-input";
+        input.style = "opacity: 0;position: absolute;";
+        input.multiple = true
+        input.addEventListener("change", this.handleSelect);
+        document.getElementById("inputfile").appendChild(input);
+    },
+
+    methods: {
+        // 拦截
+        handleClick() {
+            console.log("拦截", this.haveCount, this.limit);
+            if (this.haveCount <= 0) {
+                // Toast(`最多上传${props.limit}个文件`);
+                return;
+            }
+            if (
+                "undefined" != typeof nativeMethod &&
+                nativeMethod.vueSelectFile
+            ) {
+                nativeMethod.vueSelectFile(2, "*", this.limit || 1);
+            }
+        },
+        // 上传选择
+        async handleSelect(value, items) {
+            // loadingToast("loading");
+            const files = Array.from(value.target.files);
+            let num = 0;
+            let numLength =
+                this.haveCount > files.length ? files.length : this.haveCount;
+            try {
+                for (let i = 0; i < numLength; i++) {
+                    if (
+                        this.extension.includes(
+                            files[i].name.substring(
+                                files[i].name.lastIndexOf(".") + 1
+                            )
+                        )
+                    ) {
+                        const formData = new FormData();
+                        formData.append("file", files[i]);
+                        const res = await this.api.upload(formData);
+                        if (res.code === 200) {
+                            if (this.filesArr.length > 0) {
+                                for (
+                                    let indexs = 0;
+                                    indexs < this.filesArr.length;
+                                    indexs++
+                                ) {
+                                    // 导入文件是否重名
+                                    if (
+                                        res.originFileName ==
+                                        this.filesArr[indexs].originFileName
+                                    ) {
+                                        num++;
+                                    }
+
+                                    // 导入文件已存在重名
+                                    if (
+                                        this.filesArr[
+                                            indexs
+                                        ].originFileName.includes(`(${num})`)
+                                    ) {
+                                        num++;
+                                    }
+
+                                    if (num > 0) {
+                                        let nameIndex = res.originFileName.lastIndexOf(
+                                            "."
+                                        );
+                                        res.originFileName = `${res.originFileName.substring(
+                                            0,
+                                            nameIndex
+                                        )} (${num}) .${res.originFileName.substring(
+                                            res.originFileName.lastIndexOf(
+                                                "."
+                                            ) + 1
+                                        )}`;
+                                    }
+                                }
+                            }
+
+                            this.filesArr.push(res.data);
+                        } else {
+                            // loadingToast("fail");
+                            this.viewImage();
+                            return;
+                        }
+                    } else {
+                        // Toast.clear();
+                        // Toast.fail(`文件${files[i].name}格式错误,请重新上传`);
+                        return;
+                    }
+                }
+                // loadingToast("success");
+                this.viewImage();
+                console.log("当前已上传", this.filesArr);
+                this.emitView();
+            } catch (err) {
+                // console.log("失败", err);
+                // loadingToast("fail");
+            }
+        },
+        // 删除节点
+        handleDel(index, items) {
+            let delet;
+            if (this.deletFn) {
+                let delet = this.deletFn(items);
+                if (delet === false) {
+                    // Toast.fail("删除失败");
+                    return;
+                }
+                this.filesArr.splice(index, 1);
+                this.emitView();
+            } else {
+                this.filesArr.splice(index, 1);
+                this.emitView();
+            }
+        },
+        // 预览
+        viewFile(data, index) {
+            console.log("data", data);
+            /* if (
+                this.imgIcon.includes(
+                    data.name.substring(data.name.lastIndexOf(".") + 1)
+                )
+            ) {
+                ImagePreview({
+                    images: this.lists,
+                    startPosition: this.lists.indexOf(data.url),
+                });
+            } else {
+                if (data.url) {
+                    // router.push(`/webview?src=${data.url}`);
+                }
+            } */
+        },
+        // 预览图片 数组生成
+        viewImage() {
+            this.lists = [];
+            let arr = [];
+            this.filesArr.map((v, i) => {
+                if (
+                    this.imgIcon.includes(
+                        v.name.substring(v.name.lastIndexOf(".") + 1)
+                    )
+                ) {
+                }
+            });
+            arr = this.filesArr.filter((value) => {
+                return this.imgIcon.includes(
+                    value.name.substring(value.name.lastIndexOf(".") + 1)
+                );
+            });
+            arr.forEach((v, i) => {
+                this.lists.push(v.url);
+            });
+        },
+        // 加载中
+        loadingToast(type, text) {
+            if (type == "loading") {
+                /* Toast.loading({
+                    message: "文件上传中",
+                    forbidClick: true,
+                    duration: 0,
+                }); */
+            } else if (type == "success") {
+                /* Toast.clear();
+                Toast.success("上传成功"); */
+            } else if (type == "fail") {
+                /* Toast.clear();
+                Toast.fail("上传失败"); */
+            }
+        },
+        // 发送数据
+        emitView() {
+            console.log("已发送数据:", this.filesArr);
+            this.$emit("getValue", this.filesArr);
+        },
+        // clear node
+        clearData() {
+            this.filesArr = [];
+            console.log("clear!!!!!");
+        },
+    },
+};
+
+/* defineEmits */
+// const emit = defineEmits(["getValue"]);
+
+// defineExpose({ clearData });
+</script>
+<style scoped>
+.attch-upload-mask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #999;
+    opacity: 0.5;
+    overflow-x: hidden;
+}
+.attch-upload-body {
+    width: 100%;
+    position: relative;
+}
+.upload-close {
+    box-sizing: border-box;
+    width: 100%;
+    height: 20px;
+    padding: 5px;
+    text-align: right;
+}
+.upload-close-img {
+    width: 18px;
+    height: 18px;
+}
+.upload-header {
+    width: 100%;
+    /* position: fixed;
+            top: 0; */
+    height: 44px;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    align-items: center;
+    overflow-x: hidden;
+}
+
+.upload-header-title--re {
+    color: #ee0000;
+}
+
+.upload-header-close {
+    width: 18px;
+    height: 18px;
+}
+
+.upload-header-upload {
+    height: 18px;
+
+    font-size: 14px;
+    color: #1389ff;
+}
+
+.upload-input {
+    opacity: 0;
+    position: absolute;
+}
+.upload-header-upload--item {
+    display: flex;
+    align-items: center;
+}
+
+.upload-header-upload--item img {
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+}
+
+.upload-list {
+    padding-bottom: 20px;
+}
+.list-items {
+    display: flex;
+    margin-top: 18px;
+}
+
+.list-items-icon {
+    width: 36px;
+    height: 40px;
+    margin-right: 10px;
+    line-height: 44px;
+}
+.icon-img {
+    width: 100%;
+    height: 100%;
+}
+
+.list-items-info {
+    width: 225px;
+}
+
+.info-name {
+    width: 100%;
+    font-size: 15px;
+    color: #333;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+.info-attribute {
+    color: #999;
+    font-size: 13px;
+}
+.info-attribute-time {
+    margin-right: 10px;
+}
+.info-attribute-views {
+    color: #1389ff;
+}
+
+.list-items-operation {
+    flex: 1;
+}
+.list-items-operation-img {
+    width: 18px;
+    height: 18px;
+    margin-left: auto;
+    line-height: 44px;
+}
+.list-items-operation-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.upload-footer {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+}
+
+.attchlist-wrap {
+    width: 100%;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+}
+</style>