ui-process-h5 2.0.7-beta → 2.1.0-beta

package/src/packages/attchUpload/index.js

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

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

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