ui-process-h5 2.1.0-beta → 2.1.1-beta

package/src/packages/attchUpload/index.js

@@ -1,375 +0,0 @@
-import { defineComponent } from "vue-demi";
-import TopTips from "../tip/index.vue";
-import PreviewImage from "../previewImage/index.vue";
-import PreView from "../preview/index.vue";
-import TopPopup from "../popup/index.vue";
-
-import addFile from "@/assets/img/add-file.png";
-import del from "@/assets/img/del.png";
-import doc from "@/assets/img/doc.png";
-import file from "@/assets/img/file.png";
-import image from "@/assets/img/image.png";
-import pdf from "@/assets/img/pdf.png";
-import xls from "@/assets/img/xls.png";
-import zip from "@/assets/img/zip.png";
-
-export default defineComponent({
-    name: "attchViews",
-    components: {
-        TopTips,
-        PreviewImage,
-        PreView,
-        TopPopup,
-    },
-    props: {
-        // axios接口信息
-        request: {
-            type: Function,
-            defalut: () => {},
-        },
-        // 最大上传数
-        limit: {
-            type: Number | String,
-            default: 4,
-        },
-        //返回上传数据url
-        changeFn: {
-            type: Function,
-            default: null,
-        },
-        // 是否必填
-        requires: {
-            default: false,
-        },
-        // 已上传数据列表 (用于表单修改或者列表展示)
-        inComing: {
-            type: Array,
-            defalut: () => [],
-        },
-        // 组件本身提供静态删除功能,动态删除需传入相应方法
-        deletFn: {
-            type: Function,
-        },
-        // 列表模式开启(开启后关闭上传,删除功能)
-        onlyShow: {
-            type: Boolean,
-            default: false,
-        },
-        linkUrl: {
-            type: Function,
-            defalut: null,
-        },
-    },
-
-    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,
-
-            textTips: "",
-            statusTips: false,
-            typeTips: "success",
-
-            visible: false,
-            indexd: 0,
-
-            visibleS: false,
-            fileUrl: "",
-        };
-    },
-
-    watch: {
-        inComing: {
-            handler(val, preval) {
-                if (val) {
-                    // 传入附件列表前预处理  name  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;
-        },
-        addFile() {
-            return addFile;
-        },
-        del() {
-            return del;
-        },
-        doc() {
-            return doc;
-        },
-        file() {
-            return file;
-        },
-        image() {
-            return image;
-        },
-        pdf() {
-            return pdf;
-        },
-        xls() {
-            return xls;
-        },
-        zip() {
-            return zip;
-        },
-    },
-
-    mounted() {
-        // 兼容uni(uni编译会修改input属性,渲染完成后创建dom) upload-header-upload--item  兼容ios低版本,外部点击触发input事件
-
-        this.$nextTick(() => {
-            let input = document.createElement("input");
-            input.type = "file";
-            input.className = "upload-input";
-            input.style =
-                "opacity: 0;position: absolute;width:100%;height:100%;visibility: hidden;";
-            input.multiple = true;
-            input.id = "fileUp";
-            input.addEventListener("change", this.handleSelect);
-            document.getElementById("inputfile").appendChild(input);
-        });
-    },
-
-    methods: {
-        // 拦截
-        handleClick() {
-            // console.log("拦截", this.haveCount, this.limit);
-            if (
-                "undefined" != typeof nativeMethod &&
-                nativeMethod.vueSelectFile
-            ) {
-                nativeMethod.vueSelectFile(2, "*", this.limit || 1);
-            }
-            if (this.haveCount <= 0) {
-                this.handleTips(
-                    `最多上传${this.limit}个文件`,
-                    false,
-                    "success"
-                );
-                return;
-            }
-
-            document.getElementById("fileUp").click();
-            /* console.log("click:::",document.getElementById("fileUp")) */
-        },
-        // 上传选择
-        async handleSelect(value, items) {
-            this.handleTips("上传中", true, "loading");
-            // console.log("formData", value.target.files);
-            const files = Array.from(value.target.files);
-            document.getElementById("fileUp").value = "";
-            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.request.post(
-                            "/file/upload",
-                            formData,
-                            {
-                                headers: {
-                                    "Content-Type": "multipart/form-data",
-                                },
-                            }
-                        );
-                        if (res.code === 200) {
-                            if (this.filesArr.length > 0) {
-                                for (
-                                    let indexs = 0;
-                                    indexs < this.filesArr.length;
-                                    indexs++
-                                ) {
-                                    // 导入文件是否重名
-                                    if (
-                                        res.name ==
-                                        this.filesArr[indexs].name
-                                    ) {
-                                        num++;
-                                    }
-
-                                    // 导入文件已存在重名
-                                    if (
-                                        this.filesArr[
-                                            indexs
-                                        ].name.includes(`(${num})`)
-                                    ) {
-                                        num++;
-                                    }
-
-                                    if (num > 0) {
-                                        let nameIndex = res.name.lastIndexOf(
-                                            "."
-                                        );
-                                        res.name = `${res.name.substring(
-                                            0,
-                                            nameIndex
-                                        )} (${num}) .${res.name.substring(
-                                            res.name.lastIndexOf(
-                                                "."
-                                            ) + 1
-                                        )}`;
-                                    }
-                                }
-                            }
-                            this.filesArr.push(res.data);
-                        } else {
-                            this.handleTips("上传失败", true, "error");
-                            this.viewImage();
-                            return;
-                        }
-                    } else {
-                        this.handleTips(
-                            `文件${files[i].name}格式错误,请重新上传`,
-                            true,
-                            "error"
-                        );
-                        return;
-                    }
-                }
-                this.handleTips("上传成功", true, "success");
-                this.viewImage();
-                // console.log("当前已上传", this.filesArr);
-                this.emitView();
-            } catch (err) {
-                this.handleTips("上传失败", true, "error");
-                this.emitView();
-            }
-        },
-        // 删除节点
-        handleDel(index, items) {
-            let delet;
-            if (this.deletFn) {
-                let delet = this.deletFn(items);
-                if (delet === false) {
-                    this.handleTips("删除失败", true, "error");
-                    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)
-                        .toLowerCase()
-                )
-            ) {
-                this.indexd = this.lists.indexOf(data.url);
-                this.visible = true;
-            } else {
-                if (data.url) {
-                    this.fileUrl = data.url;
-                    this.visibleS = true;
-                }
-            }
-        },
-        // 预览图片 数组生成
-        viewImage() {
-            this.lists = [];
-            let arr = [];
-            this.filesArr.map((v, i) => {
-                if (
-                    this.imgIcon.includes(
-                        v.name.substring(v.name.lastIndexOf(".") + 1).toLowerCase()
-                    )
-                ) {
-                }
-            });
-            arr = this.filesArr.filter((value) => {
-                return this.imgIcon.includes(
-                    value.name.substring(value.name.lastIndexOf(".") + 1).toLowerCase()
-                );
-            });
-            arr.forEach((v, i) => {
-                this.lists.push(v.url);
-            });
-        },
-        // 发送数据
-        emitView() {
-            this.$emit("getValue", this.filesArr);
-        },
-        // clear node
-        clearData() {
-            this.filesArr = [];
-            // console.log("clear!!!!!");
-        },
-
-        // tips
-        handleTips(text, status, type) {
-            this.textTips = text;
-            this.statusTips = status;
-            this.typeTips = type;
-            this.$refs.topTips.handleOpen();
-        },
-    },
-});
-
-/* defineEmits */
-// const emit = defineEmits(["getValue"]);
-
-// defineExpose({ clearData });

package/src/packages/attchUpload/index.scss

@@ -1,143 +0,0 @@
-.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%;
-}
-.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-title {
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.upload-header-close {
-    width: 18px;
-    height: 18px;
-}
-
-.upload-header-upload {
-    height: 100%;
-
-    font-size: 14px;
-    color: #1389ff;
-}
-
-.upload-input {
-    opacity: 0;
-    position: absolute;
-}
-.upload-header-upload--item {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    position: relative;
-}
-
-.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;
-}

package/src/packages/attchUpload/index.vue

@@ -1,173 +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="requires" 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 && !VueVersion"
-                            class="upload-input"
-                            type="file"
-                            multiple
-                            @change="handleSelect($event, item)"
-                        /> -->
-                        <img :src="addFile" />上传附件
-                    </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
-                                        ).toLowerCase()
-                                    )
-                                "
-                                class="icon-img"
-                                :src="xls"
-                            />
-                            <img
-                                v-else-if="
-                                    imgIcon.includes(
-                                        v.name.substring(
-                                            v.name.lastIndexOf('.') + 1
-                                        ).toLowerCase()
-                                    )
-                                "
-                                class="icon-img"
-                                :src="image"
-                            />
-                            <img
-                                v-else-if="
-                                    v.name.substring(
-                                        v.name.lastIndexOf('.') + 1
-                                    ).toLowerCase() == 'pdf'
-                                "
-                                class="icon-img"
-                                :src="pdf"
-                            />
-                            <img
-                                v-else-if="
-                                    docIcon.includes(
-                                        v.name.substring(
-                                            v.name.lastIndexOf('.') + 1
-                                        ).toLowerCase()
-                                    )
-                                "
-                                class="icon-img"
-                                :src="doc"
-                            />
-                            <img
-                                v-else-if="
-                                    zipIcon.includes(
-                                        v.name.substring(
-                                            v.name.lastIndexOf('.') + 1
-                                        ).toLowerCase()
-                                    )
-                                "
-                                class="icon-img"
-                                :src="zip"
-                            />
-                            <img v-else class="icon-img" :src="file" />
-                        </div>
-                        <div class="list-items-info">
-                            <div class="info-name">
-                                {{ v.name }}
-                            </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="del" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <TopTips
-            ref="topTips"
-            :text="textTips"
-            :statusTips="statusTips"
-            :type="typeTips"
-        />
-        <!-- :visible.sync="visible" -->
-        <PreviewImage
-            :images="lists"
-            v-bind:visible="visible"
-            v-on:update:visible="(val) => (visible = val)"
-            :indexd="indexd"
-        />
-
-        <TopPopup
-            v-bind:visible="visibleS"
-            v-on:update:visible="(val) => (visibleS = val)"
-            ref="TopPopup"
-            titleText="附件预览"
-            isDrawer
-            :isIndex="99"
-        >
-            <PreView v-if="visibleS" :file="fileUrl" />
-        </TopPopup>
-    </div>
-</template>
-<script src="./index.js"></script>
-<style lang="scss" scoped>
-@import "./index.scss";
-</style>