ui-process-h5 0.1.36 → 0.1.40

package/vite.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import * as compiler from '@vue/compiler-sfc'
+import vue3 from '@vitejs/plugin-vue'
+import path from 'path'
+import { getLibDir } from './build/scripts/utils.mjs'
+import { isVue2, version } from 'vue-demi'
+import { baseConfig } from './src/assets/js/utils.js'
+import copy from 'rollup-plugin-copy'
+import relaxedUnit from 'postcss-relaxed-unit'
+console.log({ version })
+const resolve = (str) => {
+  return path.resolve(__dirname, str)
+}
+let isVueCode = 1
+if (version.startsWith('2.7.')) isVueCode = 2
+else if (version.startsWith('2.')) isVueCode = 1
+else isVueCode = 3
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve('src'),
+      vue: isVueCode === 1 ? path.resolve('./node_modules/vue2')
+        : isVueCode === 2 ? path.resolve('./node_modules/vue2.7')
+          : path.resolve('./node_modules/vue3'),
+      '@vue/composition-api': resolve('./node_modules/@vue/composition-api')
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve('./src/packages/index.js'),
+      name: 'ui-process-h5',
+      fileName: 'ui-process-h5'
+    },
+    cssTarget: 'chrome61',
+    rollupOptions: {
+      // external: ['vue-demi', 'vue'],
+      external: ['vue'],
+      output: {
+        dir: getLibDir(version),
+        globals: {
+          vue: 'Vue',
+          // 'vue-demi': 'VueDemi'
+        }
+      }
+    }
+  },
+  optimizeDeps: {
+    // exclude: ['vue-demi']
+  },
+  plugins: [
+    isVue2 ? createVuePlugin() : vue3({ compiler: compiler }),
+    copy({
+      targets: [
+        { src: './build/configure/*', dest: './ui-process-h5' },
+        { src: './build/scripts/*', dest: './ui-process-h5/scripts' },
+      ]
+    })
+  ],
+  css: {
+    postcss: {                          // 配置自定义组件插件
+      plugins: [
+        relaxedUnit({ rules: { rpx: "div(2).unit(px)" } }),
+      ]
+    }
+  },
+  server: {
+    proxy: {
+      [baseConfig.apiUrl]: {
+        target: process.env.domain || `http://59.53.91.231:2100`,
+        changeOrigin: true,
+        //rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+})

package/packages/components/process/index.js

@@ -1,8 +0,0 @@
-import TopProcess from "./src/process.vue";
-
-TopProcess.install = function (app) {
-    // 组件注册，按需引入
-    app.component(TopProcess.name, TopProcess);
-    return app;
-};
-export default TopProcess;

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

@@ -1,585 +0,0 @@
-<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>