update

src/components/pages/knowledge/fileBox.vue

@@ -0,0 +1,1326 @@
+<template>
+    <div class="f_box">
+        <div class="f_box_top">
+            <div class="f_box_top_left">
+                <div class="btn" @click="addImg($event)" v-if="type == '1'">
+                    上传本地文件
+                    <input type="file" accept="*" style="display: none" multiple="multiple"
+                        @change="beforeUpload($event)" />
+                </div>
+                <div class="btn" @click="addFileToTest()" :style="{opacity: checkArray.length ? 1 : .5}" v-if="type == '2'">
+                    添加至表单
+                </div>
+                <div class="btn2" v-if="checkArray.length && type == '1'" @click="openMoveBox">移动到</div>
+                <div class="btn2" v-if="checkArray.length && type == '1'" @click="downPan">下载</div>
+                <div class="delBtn" v-if="checkArray.length && type == '1'" @click="deleteFile"></div>
+            </div>
+            <div class="f_box_top_right">
+                <div class="input">
+                    <input type="text" v-model="fileName" placeholder="请输入你需要搜索的文件名字" @keyup.enter="serchFile">
+                    <div class="serch" @click="serchFile"></div>
+                </div>
+                <div class="tab">
+                    <div class="list" :class="{ active: stype == '2' }" @click="stype = '2'"></div>
+                    <div class="table" :class="{ active: stype == '1' }" @click="stype = '1'"></div>
+                </div>
+            </div>
+        </div>
+        <div class="none_box" v-if="fileArray.length == 0">
+            暂无上传文件
+        </div>
+        <div class="f_box_file_square" v-if="stype == '1' && fileArray.length" v-loading.body="isLoading">
+            <div class="f_box_file_allCheck" @click="checkAll" v-if="fileArray.length">
+                <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
+                <img :src="checkIsImg" alt="" v-else>
+                <span>全部文件</span>
+            </div>
+            <div class="f_box_file" v-for="(item, index) in fileArray" :key="index"
+                :class="{ check: checkArray.indexOf(item.id) != -1 }" @click.stop="selectFile(item)">
+                <img :src="officeImg" alt="" v-if="item.type == 1">
+                <img :src="pdfImg" alt="" v-if="item.type == 4">
+                <img :src="videoImg" alt="" v-if="item.type == 2">
+                <img :src="otherImg" alt="" v-if="item.type == 5">
+                <img :src="item.file" alt="" v-if="item.type == 3">
+                <el-tooltip :content="item.name" placement="top" effect="dark">
+                    <!-- content to trigger tooltip here -->
+                    <div class="name">{{ item.name }}</div>
+                </el-tooltip>
+                <div class="check" @click.stop="checkFile(item.id)">
+                    <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
+                    <img :src="checkIsImg" alt="" v-else>
+                </div>
+            </div>
+        </div>
+        <div class="f_box_file_list" v-else-if="stype == '2' && fileArray.length" v-loading.body="isLoading">
+            <div class="list_file_box">
+                <div class="list_top">
+                    <div class="check">
+                        <div class="list_allcheck" @click="checkAll" v-if="fileArray.length">
+                            <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
+                            <img :src="checkIsImg" alt="" v-else>
+                        </div>
+                    </div>
+                    <div class="name">文件名</div>
+                    <div class="size">大小</div>
+                    <div class="type">类型</div>
+                    <div class="time">上传时间</div>
+                </div>
+                <div class="list_content" :class="{ active: checkArray.indexOf(item.id) != -1 }"
+                    @click="checkFile(item.id)" v-for="(item, index) in fileArray" :key="index">
+                    <div class="check">
+                        <div class="list_allcheck">
+                            <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
+                            <img :src="checkIsImg" alt="" v-else>
+                        </div>
+                    </div>
+                    <div class="name">
+                        <div class="list_file_name">
+                            <img :src="officeImg" alt="" v-if="item.type == 1">
+                            <img :src="pdfImg" alt="" v-if="item.type == 4">
+                            <img :src="videoImg" alt="" v-if="item.type == 2">
+                            <img :src="otherImg" alt="" v-if="item.type == 5">
+                            <img :src="item.file" alt="" v-if="item.type == 3">
+                            <el-tooltip :content="item.name" placement="top" effect="dark">
+                                <div>{{ item.name }}</div>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                    <div class="size">
+                        {{ item.size }}
+                    </div>
+                    <div class="type">
+                        {{ retrunType(item) }}
+                    </div>
+                    <div class="time">
+                        {{ item.time }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="proVisible" class="mask">
+            <div class="progressBox">
+                <div class="lbox">
+                    <img src="../../../assets/loading.gif" />上传中，请稍后
+                </div>
+                <!-- <div style="margin-bottom: 10px">
+                                <span>{{
+                                    isFinishSize
+                                }}M</span>
+                                /
+                                <span>{{
+                                    isAllSize
+                                }}M</span>
+                            </div> -->
+                <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
+                                ? progress
+                                : 0
+                                " style="width: 80%"></el-progress> -->
+            </div>
+        </div>
+        <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
+        <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
+        <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
+        <el-dialog title="移动至" :visible.sync="moveBox" width="400px" @close="moveBox = false" class="dialog">
+            <div>
+                <div class="type_nav_box" v-for="(item, index) in checkTypeArray" :key="index">
+                    <div class="nav" :class="{ active: item.open }" @click.stop="openChild(index)">
+                        <span class="down"></span>
+                        <span class="file"></span>
+                        <el-tooltip :content="item.name" placement="top" effect="dark">:
+                            <!-- content to trigger tooltip here -->
+                            <span class="name">{{ item.name }}</span>
+                        </el-tooltip>
+                    </div>
+                    <div class="child" v-if="item.open">
+                        <div class="nav" v-for="(item2, index2) in item.child" :key="index + '-' + index2"
+                            :class="{ active: moveChild.id == item2.id }" @click.stop="checkMoveChild(item2)">
+                            <span class="file"></span>
+                            <el-tooltip :content="item2.name" placement="top" effect="dark">:
+                                <!-- content to trigger tooltip here -->
+                                <span class="name">{{ item2.name }}</span>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <span slot="footer">
+                <el-button @click="moveBox = false">取 消</el-button>
+                <el-button type="primary" @click="confirmMove">确 定</el-button>
+            </span>
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+import officeImg from '../../../assets/icon/sourceFile/office.png'
+import pdfImg from '../../../assets/icon/sourceFile/pdf.png'
+import videoImg from '../../../assets/icon/sourceFile/video.png'
+import otherImg from '../../../assets/icon/sourceFile/other.png'
+import checkImg from '../../../assets/icon/sourceFile/check.png'
+import checkIsImg from '../../../assets/icon/sourceFile/check_is.png'
+
+
+import wVideo from "../test/file/wVideo.vue";
+import wpdf from "../test/file/wPdf2.vue";
+import wOffice from "../test/file/wOffice.vue";
+
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+
+const getFile = (url) => {
+    return new Promise((resolve, reject) => {
+        var credentials = {
+            accessKeyId: "AKIATLPEDU37QV5CHLMH",
+            secretAccessKey: "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",
+        }; //秘钥形式的登录上传
+        window.AWS.config.update(credentials);
+        window.AWS.config.region = "cn-northwest-1"; //设置区域
+        let url2 = url;
+        let _url2 = "";
+        if (
+            url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+        ) {
+            _url2 = url2.split(
+                "https://view.officeapps.live.com/op/view.aspx?src="
+            )[1];
+        } else {
+            _url2 = url2;
+        }
+        var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+        let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1].replace(/\+/g, ' '))
+        var params = {
+            Bucket: "ccrb",
+            Key: name
+        };
+        s3.getObject(params, function (err, data) {
+            if (err) {
+                console.log(err, err.stack)
+                resolve({ data: 1 });
+            } else {
+                resolve({ data: data.Body });
+                console.log(data);
+            }          // sxuccessful response
+
+        });
+        // axios({
+    });
+};
+export default {
+    components: {
+        wVideo,
+        wpdf,
+        wOffice,
+    },
+    props: {
+        userid: {
+            type: String,
+        },
+        typeArray: {
+            type: Array,
+        },
+        pid: {
+            type: String,
+        },
+        type: {
+            type: String
+        }
+    },
+    watch: {
+        pid: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.fileArray = []
+                this.checkArray = []
+                this.fileName = ''
+                this.getData()
+            },
+        },
+    },
+    data() {
+        return {
+            isLoading: false,
+            proVisible: false,
+            stype: 1,
+            fileArray: [],
+            officeImg: officeImg,
+            pdfImg: pdfImg,
+            videoImg: videoImg,
+            otherImg: otherImg,
+            checkImg: checkImg,
+            checkIsImg: checkIsImg,
+            checkArray: [],
+            dialogVisiblePdf: false,
+            dialogVisibleVideo: false,
+            dialogVisibleOffice: false,
+            wurl: '',
+            moveBox: false,
+            checkTypeArray: [],
+            moveChild: '',
+            fileName: '',
+        }
+    },
+    computed: {
+        retrunType() {
+            return function (item) {
+                if (item.type == 1) {
+                    return 'OFFICE文件'
+                } else if (item.type == 2) {
+                    return '视频文件'
+                } else if (item.type == 3) {
+                    return '图片'
+                } else if (item.type == 4) {
+                    return 'PDF文件'
+                } else if (item.type == 5) {
+                    return '其他文件'
+                }
+            };
+        }
+    },
+    methods: {
+        getData() {
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            this.isLoading = true;
+            let params = {
+                uid: this.userid,
+                pid: id,
+                n: this.fileName
+            };
+            this.ajax
+                .get(this.$store.state.api + "getSourceFile", params)
+                .then((res) => {
+                    this.isLoading = false;
+                    this.fileArray = res.data[0];
+                })
+                .catch((err) => {
+                    this.isLoading = false;
+                    console.error(err);
+                });
+        },
+        addImg(e) {
+            var el = e.currentTarget;
+            el.getElementsByTagName("input")[0].click();
+            e.target.value = "";
+        },
+        serchFile() {
+            this.getData();
+        },
+        beforeUpload(event) {
+            // const loading = this.openLoading();
+            let file = "";
+            let cfindex2 = 0;
+            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
+                file = event.target.files[cfindex];
+
+                var credentials = {
+                    accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                    secretAccessKey: "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",
+                }; //秘钥形式的登录上传
+                window.AWS.config.update(credentials);
+                window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+                var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+                var _this = this;
+                let _name = file.name;
+                // _this.progress = 0;
+                _this.proVisible = true;
+                // _this.isFinishSize = 0;
+                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
+                let size = file.size;
+                _this.$forceUpdate();
+                if (file) {
+                    var params = {
+                        Key:
+                            file.name.split(".")[0] +
+                            new Date().getTime() +
+                            "." +
+                            file.name.split(".")[file.name.split(".").length - 1],
+                        ContentType: file.type,
+                        Body: file,
+                        "Access-Control-Allow-Credentials": "*",
+                        ACL: "public-read",
+                    }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+                    var options = {
+                        partSize: 2048 * 1024 * 1024,
+                        queueSize: 2,
+                        leavePartsOnError: true,
+                    };
+                    bucket
+                        .upload(params, options)
+                        .on("httpUploadProgress", function (evt) {
+                            //这里可以写进度条
+                            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+                            // _this.progress = parseInt((evt.loaded / evt.total) * 100);
+                            // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
+                            // _this.$forceUpdate();
+                        })
+                        .send(function (err, data) {
+                            cfindex2++;
+
+                            // _this.progress = 100;
+                            // _this.isFinishSize = _this.isAllSize;
+                            // _this.$forceUpdate();
+                            // setTimeout(() => {
+                            //     _this.proVisible = false;
+                            //     _this.$forceUpdate();
+                            // }, 1000);
+                            setTimeout(() => {
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    _this.proVisible = false;
+                                }
+                            }, 1000);
+                            // loading.close();
+                            if (err) {
+                                _this.$message.error("上传失败");
+                            } else {
+                                let _type = 2;
+                                var imgA = [
+                                    "png",
+                                    "jpg",
+                                    "jpeg",
+                                    "bmp",
+                                    "gif",
+                                    "webp",
+                                    "psd",
+                                    "svg",
+                                    "tiff",
+                                ];
+                                var fileA = [
+                                    "DOC",
+                                    "DOCX",
+                                    "DOCM",
+                                    "DOTM",
+                                    "DOTX",
+                                    "PPTX",
+                                    "PPSX",
+                                    "PPT",
+                                    "PPS",
+                                    "PPTM",
+                                    "POTM",
+                                    "PPAM",
+                                    "POTX",
+                                    "PPSM",
+                                    "XLSX",
+                                    "XLS",
+                                ];
+                                var videoA = [
+                                    "AVI",
+                                    "NAVI",
+                                    "MPEG",
+                                    "ASF",
+                                    "MOV",
+                                    "WMV",
+                                    "3GP",
+                                    "RM",
+                                    "RMVB",
+                                    "FLV",
+                                    "F4V",
+                                    "H.264",
+                                    "H.265",
+                                    "REAL VIDEO",
+                                    "MKV",
+                                    "WebM",
+                                    "HDDVD",
+                                    "MP4",
+                                    "MPG",
+                                    "M4V",
+                                    "MGV",
+                                    "OGV",
+                                    "QTM",
+                                    "STR",
+                                    "AMC",
+                                    "DVX",
+                                    "EVO",
+                                    "DAT",
+                                    "OGG",
+                                    "OGM",
+                                ];
+                                if (
+                                    fileA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 1; //word 文件
+                                } else if (
+                                    videoA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 2; //视频
+                                } else if (
+                                    imgA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 3; //图片
+                                } else if (
+                                    'pdf'.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 4; //pdf
+                                } else {
+                                    _type = 5; //文件
+                                }
+                                let _file = {
+                                    name: _name,
+                                    url: data.Location,
+                                    type: _type,
+                                    size: _this.formatFileSize(size)
+                                }
+                                // if (_this.checkJson.file) {
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // } else {
+                                //     _this.checkJson.file = []
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // }
+                                let type = 1
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    type = 2
+                                }
+                                _this.addSource(_file, type)
+                                _this.$forceUpdate();
+
+                                console.log(_file);
+                                console.log(data.Location);
+                            }
+                        });
+                }
+            }
+        },
+        addSource(file, ctype) {
+            let _ctype = ctype
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            let params = [{
+                n: file.name,
+                file: file.url,
+                type: file.type,
+                pid: id,
+                uid: this.userid,
+                size: file.size,
+            }];
+            this.ajax
+                .post(this.$store.state.api + "addSourceFile", params)
+                .then((res) => {
+                    if (_ctype == 2) {
+                        this.$message.success('上传成功');
+                        this.getData()
+                    }
+                })
+                .catch((err) => {
+                    console.error(err);
+                });
+        },
+        formatFileSize(bytes) {
+            if (bytes < 1024) {
+                return bytes + "B";
+            } else if (bytes < 1048576) {
+                return (bytes / 1024).toFixed(2) + "KB";
+            } else if (bytes < 1073741824) {
+                return (bytes / 1048576).toFixed(2) + "MB";
+            } else {
+                return (bytes / 1073741824).toFixed(2) + "GB";
+            }
+        },
+        checkFile(id) {
+            if (this.checkArray.indexOf(id) == -1) {
+                this.checkArray.push(id)
+            } else {
+                this.checkArray.splice(this.checkArray.indexOf(id), 1)
+            }
+        },
+        selectFile(item) {
+            if (item.type == 3) {
+                this.$hevueImgPreview(item.file);
+            } else if (item.type == 5) {
+                this.downloadFile(item);
+            } else if (item.type == 1) {
+                this.dialogVisibleOffice = true
+                this.wurl = item.file
+            } else if (item.type == 2) {
+                this.dialogVisibleVideo = true
+                this.wurl = item.file
+            } else if (item.type == 4) {
+                this.dialogVisiblePdf = true
+                this.wurl = item.file
+            }
+        },
+        downloadFile(f) {
+            this.isLoading = true;
+            var credentials = {
+                accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                secretAccessKey: "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",
+            }; //秘钥形式的登录上传
+            window.AWS.config.update(credentials);
+            window.AWS.config.region = "cn-northwest-1"; //设置区域
+            let url2 = f.file;
+            let _url2 = "";
+            if (
+                url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+            ) {
+                _url2 = url2.split(
+                    "https://view.officeapps.live.com/op/view.aspx?src="
+                )[1];
+            } else {
+                _url2 = url2;
+            }
+            let _this = this;
+
+            var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+            let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1].replace(/\+/g, ' '))
+            var params = {
+                Bucket: "ccrb",
+                Key: name
+            };
+            s3.getObject(params, function (err, data) {
+                _this.isLoading = false
+                if (err) console.log(err, err.stack); // an error occurred
+                else {
+                    let url = window.URL.createObjectURL(new Blob([data.Body]));
+                    let a = document.createElement("a");
+                    a.name = f.name;
+                    a.href = url;
+                    a.download = f.name;
+                    a.click();
+                    console.log(data);
+                }          // sxuccessful response
+
+            });
+        },
+        checkAll() {
+            if (this.checkArray.length === this.fileArray.length) {
+                this.checkArray = []
+            } else {
+                this.checkArray = []
+                this.fileArray.forEach(item => {
+                    this.checkArray.push(item.id)
+                });
+            }
+        },
+        deleteFile() {
+            this.$confirm("确定删除这些文件吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    let params = [
+                        { ids: this.checkArray.join(",") }
+                    ]
+                    this.ajax
+                        .post(this.$store.state.api + "deleteSourceFile", params)
+                        .then((res) => {
+                            this.$message({
+                                message: "删除成功",
+                                type: "success",
+                            });
+                            this.checkArray = []
+                            this.getData();
+                        })
+                        .catch((err) => {
+                            this.$message.error("删除失败");
+                            console.error(err);
+                        });
+                })
+                .catch(() => { });
+        },
+        openMoveBox() {
+            if (this.checkArray.length == 0) {
+                this.$message.error("请添加分类再移动");
+                return
+            }
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            let array = JSON.parse(JSON.stringify(this.typeArray)).filter((item) => {
+                item.open = false
+                return item.child.length > 0
+            })
+
+            array = array.filter((item) => {
+                item.child = item.child.filter((item2) => {
+                    return item2.id != id
+                })
+                return item.child.length > 0
+            })
+            this.moveChild = ''
+            this.checkTypeArray = array
+            this.moveBox = true
+        },
+        openChild(index) {
+            this.checkTypeArray[index].open = !this.checkTypeArray[index].open
+        },
+        checkMoveChild(item) {
+            this.moveChild = item
+        },
+        confirmMove() {
+            if (!this.moveChild) {
+                this.$message.error("请选择移动的分类");
+                return
+            }
+            this.$confirm("确定将文件移动到" + this.moveChild.name + "下吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    let params = [
+                        {
+                            ids: this.checkArray.join(","),
+                            pid: this.moveChild.id
+                        }
+                    ]
+                    this.ajax
+                        .post(this.$store.state.api + "updateSourceFilePid", params)
+                        .then((res) => {
+                            this.$message({
+                                message: "移动成功",
+                                type: "success",
+                            });
+                            this.checkArray = []
+                            this.moveChild = ''
+                            this.moveBox = false
+                            this.getData();
+                        })
+                        .catch((err) => {
+                            this.$message.error("删除失败");
+                            console.error(err);
+                        });
+                })
+                .catch(() => { });
+        },
+        downPan() {
+            this.downloadFile({file:'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/icons1712477416633.png',name:"icons1712477416633.png"})
+            // let array = []
+            // this.fileArray.forEach(item => {
+            //     if (this.checkArray.includes(item.id)) {
+            //         array.push(item)
+            //     }
+            // })
+            // if (array.length == 1) {
+            //     this.downloadFile(array[0])
+            // } else {
+            //     this.uploadCourse(array)
+            // }
+        },
+        uploadCourse(item) {
+            this.isLoading = true;
+            const _chapInfo = item;
+            let url = [];
+            for (let i = 0; i < _chapInfo.length; i++) {
+                url.push({
+                    name: _chapInfo[i].name,
+                    url: _chapInfo[i].file,
+                });
+            }
+            console.log(url);
+            this.downLoadAll(url);
+        },
+        downLoadAll(url) {
+            const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
+            const zip = new JSZip();
+            const cache = {};
+            const promises = [];
+            data.forEach((item) => {
+                const promise = getFile(item.url).then((data) => {
+                    if (data.data != 1) {
+                        // 下载文件, 并存成ArrayBuffer对象
+                        const file_name = item.name; // 获取文件名
+                        zip.file(file_name, data.data, { binary: true }); // 逐个添加文件
+                        cache[file_name] = data.data;
+                    }
+                });
+                promises.push(promise);
+            });
+            Promise.all(promises).then(() => {
+                zip.generateAsync({ type: "blob" }).then((content) => {
+                    // 生成二进制流
+                    FileSaver.saveAs(content, "附件.zip"); // 利用file-saver保存文件  自定义文件名
+                    setTimeout(() => {
+                        this.isLoading = false;
+                    }, 2000);
+                });
+            });
+        },
+        addFileToTest(){
+            if(!this.checkArray.length){
+                return
+            }
+            let file = []
+            for(let i = 0; i < this.fileArray.length; i++){
+                if(this.checkArray.includes(this.fileArray[i].id)){
+                    file.push(this.fileArray[i])
+                }
+            }
+            this.$emit('addFile', file)
+            this.checkArray = []
+        }
+    },
+    mounted() {
+        this.getData();
+    },
+}
+</script>
+
+<style scoped>
+.f_box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.f_box_top {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.f_box_top_left {
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_left .btn {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    height: 30px;
+    padding: 0 8px;
+    background: rgb(0, 97, 255);
+    color: #fff;
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    align-items: center;
+}
+
+.f_box_top_left .btn2 {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    height: 30px;
+    padding: 0 8px;
+    background: #fff;
+    color: rgb(0, 97, 255);
+    border: 1px solid rgb(0, 97, 255);
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    align-items: center;
+}
+
+.f_box_top_left .delBtn {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: block;
+    background-image: url('../../../assets/icon/sourceFile/delete.png');
+    background-size: 100% 100%;
+}
+
+.f_box_top_left .btn+.btn2,
+.f_box_top_left .btn2+.btn2,
+.f_box_top_left .btn2+.delBtn {
+    margin-left: 15px;
+}
+
+.f_box_top_right {
+    margin-left: auto;
+    max-width: calc(100% - 280px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_right>.input {
+    position: relative;
+    width: 250px;
+    height: 35px;
+}
+
+.f_box_top_right>.input>input {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #D9D9D9;
+    border-radius: 5px;
+    padding: 0 45px 0 10px;
+    box-sizing: border-box;
+    font-size: 12px;
+    outline: none;
+}
+
+.f_box_top_right>.input>.serch {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../assets/icon/sourceFile/search.png');
+    background-size: 100% 100%;
+    position: absolute;
+    right: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
+
+.f_box_top_right>.tab {
+    height: 30px;
+    width: 80px;
+    margin-left: 15px;
+    background: #e7e7e7;
+    border: 2px solid #D9D9D9;
+    border-radius: 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_right>.tab>.table,
+.f_box_top_right>.tab>.list {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.f_box_top_right>.tab>.list::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../assets/icon/sourceFile/list.png');
+    background-size: 100% 100%;
+}
+
+.f_box_top_right>.tab>.list.active,
+.f_box_top_right>.tab>.table.active {
+    background: #fff;
+}
+
+.f_box_top_right>.tab>.table::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../assets/icon/sourceFile/table.png');
+    background-size: 100% 100%;
+}
+
+.mask {
+    background-color: rgb(0 0 0 / 30%);
+    /* position: fixed; */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progressBox {
+    width: 300px;
+    height: 150px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 6px 1px #bfbfbf;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    color: #6c6c6c;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+    background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+    height: 50px;
+    font-size: 19px;
+    display: flex;
+    align-items: center;
+    color: #747474;
+}
+
+.progressBox .lbox img {
+    width: 40px;
+    margin-right: 20px;
+}
+
+.closeCss {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+}
+
+.closeCss>img {
+    width: 100%;
+    height: 100%;
+}
+
+
+.f_box_file_square {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 55px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    position: relative;
+}
+
+.f_box_file_square>.f_box_file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 160px;
+    height: 160px;
+    cursor: pointer;
+    margin: 0 36px 36px 0;
+    border-radius: 20px;
+    position: relative;
+}
+
+.f_box_file_square>.f_box_file:hover {
+    background: #F0F2F5;
+}
+
+.f_box_file_square>.f_box_file:hover>.check {
+    display: block;
+}
+
+.f_box_file_square>.f_box_file.check {
+    background: #E0EAFB;
+}
+
+.f_box_file_square>.f_box_file.check>.check {
+    display: block;
+}
+
+.f_box_file_square>.f_box_file>.check {
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    width: 16px;
+    height: 16px;
+    background-size: 100%;
+    display: none;
+}
+
+.f_box_file_square>.f_box_file>.check>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.f_box_file_square>.f_box_file>img {
+    width: 90px;
+    height: 90px;
+    object-fit: cover;
+}
+
+.f_box_file_square>.f_box_file>.name {
+    white-space: nowrap;
+    font-size: 14px;
+    max-width: 80%;
+    overflow: hidden;
+    margin: 4px auto 0;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
+.f_box_file_list {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.f_box_file_list>.f_box_file {}
+
+
+.f_box_file_allCheck {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    font-size: 14px;
+    top: 20px;
+    left: 10px;
+    cursor: pointer;
+}
+
+.f_box_file_allCheck>img {
+    width: 16px;
+    height: 16px;
+    object-fit: cover;
+    margin-right: 5px;
+}
+
+.dialog>>>.el-dialog__body {
+    padding: 10px 20px;
+}
+
+.type_nav_box {}
+
+.type_nav_box>.nav {
+    height: 40px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #000;
+}
+
+.type_nav_box>.nav>.down {
+    min-width: 14px;
+    height: 14px;
+    background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+    transition: all 0.3s;
+    transform: rotate(-90deg);
+}
+
+.type_nav_box>.nav.active>.down {
+    transform: rotate(0deg);
+}
+
+.type_nav_box>.nav>.file {
+    min-width: 18px;
+    height: 18px;
+    background-image: url('../../../assets/icon/sourceFile/file.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+}
+
+.type_nav_box>.nav>.name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.type_nav_box>.child {}
+
+.type_nav_box>.child>.nav {
+    height: 40px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px 0 50px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #000;
+}
+
+.type_nav_box>.child>.nav.active {
+    background: #e0eafb;
+}
+
+.type_nav_box>.child>.nav>.file {
+    min-width: 18px;
+    height: 18px;
+    background-image: url('../../../assets/icon/sourceFile/file.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+}
+
+.type_nav_box>.child>.nav>.name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.none_box {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.list_file_box {
+    width: 100%;
+}
+
+.list_file_box>.list_top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 50px;
+}
+
+.list_file_box .check {
+    width: 21px;
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.list_allcheck {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+}
+
+.list_allcheck>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.list_file_box .name {
+    width: calc(100% - 21px - 100px - 100px - 200px - 50px);
+    margin-right: 10px;
+}
+
+.list_file_box .size {
+    width: 100px;
+    margin-right: 10px;
+}
+
+.list_file_box .type {
+    width: 100px;
+    margin-right: 10px;
+}
+
+.list_file_box .time {
+    width: 200px;
+}
+
+.list_top>.check,
+.list_top>.name,
+.list_top>.size,
+.list_top>.type,
+.list_top>.time {
+    font-size: 16px;
+}
+
+.list_content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 50px;
+    cursor: pointer;
+}
+
+.list_content:hover {
+    background: #f0f2f5;
+}
+
+.list_content.active {
+    background: #e0eafb;
+}
+
+.list_content>.name {
+    font-size: 14px;
+    color: #000000e6;
+}
+
+.list_content>.size,
+.list_content>.type,
+.list_content>.time {
+    font-size: 12px;
+    color: #00000099;
+}
+
+.list_file_name {
+    display: flex;
+    align-items: center;
+}
+
+.list_file_name>img {
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+    margin-right: 5px;
+}
+
+.list_file_name>div {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>

src/components/pages/knowledge/index.vue

@@ -0,0 +1,751 @@
+<template>
+  <div class="l_box">
+    <div class="l_type_box" v-loading="isLoading">
+      <div class="header">
+        <span class="title">我的资源库</span>
+        <span class="add" @click="addClick" ref="divToHide3">添加分类</span>
+      </div>
+      <div class="nav">
+        <div class="nav_b">
+          <div class="nav_box" :class="{ active1: pid == 'wu' }" @click="checkType('wu')"><span
+              class="icon no"></span><span class="name">未分类</span>
+          </div>
+        </div>
+        <div class="nav_b" v-for="(item, index) in typeArray" :key="index">
+          <div class="nav_box" :class="{ open: item.open, active2: pid.split('-')[0] == index }"
+            @click="checkType(index + '')"><span class="icon" :class="{ haveL: item.child.length }"
+              @click.stop="typeOpen(index)"></span>
+            <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '')" ref="renameInput"
+              @change="rename" @keyup.enter="rename">
+            <el-tooltip :content="item.name" placement="top" effect="dark" v-else>
+              <span class="name">{{ item.name }}</span>
+            </el-tooltip>
+            <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '')"></span>
+          </div>
+          <div class="nav_child_box" v-if="item.open && item.child.length">
+            <div class="nav_box" :class="{ active: pid == index + '-' + index2 }" v-for="(item2, index2) in item.child"
+              :key="index + '-' + index2" @click="checkType(index + '-' + index2)">
+              <span class="icon"></span>
+              <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '-' + index2)"
+                ref="renameInput" @change="rename" @keyup.enter="rename">
+              <el-tooltip :content="item2.name" placement="top" effect="dark" v-else>
+                <span class="name">{{ item2.name }}</span>
+              </el-tooltip>
+              <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '-' + index2)"></span>
+            </div>
+          </div>
+          <div class="add_box" v-if="addVisbile2 === index" ref="divToHide2">
+            <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
+          </div>
+        </div>
+        <div class="add_box" v-if="addVisbile" ref="divToHide">
+          <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
+        </div>
+      </div>
+      <div v-if="showActionDiv" ref="actionDiv" :style="actionDivStyle" class="action-div">
+        <div @click="actionDelete">删除</div>
+        <div @click="actionRename">重命名</div>
+        <div @click="actionAdd" v-if="actionType.split('-').length == 1" ref="addTypeAction">添加分类</div>
+        <div class="move" v-if="pidArray.length">
+          <span>移动</span>
+          <div class="pid_box">
+            <div v-for="(item, index) in pidArray" :key="index" @click="actionMove(item)">
+              <!-- <el-tooltip :content="item.name" placement="right" effect="dark"> -->
+              <span>{{ item.name }}</span>
+              <!-- </el-tooltip> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="l_file_box">
+      <div class="l_none" v-if="pid != 'wu' && pid.split('-').length == 1">请添加二级分类</div>
+      <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' @addFile="addFile" ref="fileBox" v-else>
+      </fileBox>
+    </div>
+  </div>
+</template>
+
+<script>
+import fileBox from './fileBox.vue';
+export default {
+  components: {
+    fileBox,
+  },
+  props: {
+    type: {
+      type: String,
+      default: '1'
+    },
+  },
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      pid: 'wu',
+      addInput: '',
+      addVisbile: false,
+      addVisbile2: '',
+      isLoading: false,
+      typeArray: [],
+      showActionDiv: false,
+      actionDivStyle: {
+        top: '0px',
+        left: '0px'
+      },
+      actionType: '',
+      renameType: '',
+      renameInput: '',
+      pidArray: [],
+    }
+  },
+  methods: {
+    getData() {
+      this.isLoading = true;
+      let params = {
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getSourceFileType", params)
+        .then((res) => {
+          this.isLoading = false;
+          let pid = res.data[0];
+          let child = res.data[1];
+          for (var i = 0; i < pid.length; i++) {
+            let pidChild = []
+            pid[i].open = (this.typeArray.length && this.typeArray[i]) ? this.typeArray[i].open : false
+            for (var j = 0; j < child.length; j++) {
+              if (pid[i].id == child[j].pid) {
+                pidChild.push(child[j])
+              }
+            }
+            pid[i].child = pidChild
+          }
+          this.typeArray = pid
+          this.$forceUpdate()
+
+          let _pid = this.pid.split('-')
+          if (_pid.length === 1 && this.pid != 'wu') {
+            if (pid[_pid[0]]) {
+              pid[_pid[0]].open = true
+              this.pid = this.pid + '-0'
+            } else {
+              this.pid = 'wu'
+            };
+            this.checkType(this.pid);
+          } else if (_pid.length > 1) {
+            if (this.typeArray[_pid[0]].child.length > 0 && (parseInt(_pid[1]) + 1) > this.typeArray[_pid[0]].child.length) {
+              this.pid = _pid[0] + '-0';
+              this.checkType(this.pid);
+            } else if ((parseInt(_pid[1]) + 1) > this.typeArray[_pid[0]].child.length) {
+              this.checkType(_pid[0]);
+            }
+          }
+          this.$refs['fileBox'].getData()
+          console.log(this.$refs['fileBox']);
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    addClick() {
+      // if (this.pid == 'wu') {
+      this.addVisbile = true;
+      this.addInput = '一级分类标签'
+      setTimeout(() => {
+        this.$refs.divToHide.children[0].select()
+      }, 500);
+      // } else {
+      //   let check = this.pid.split('-')
+      //   this.addVisbile2 = parseInt(check[0]);
+      //   this.addInput = '二级分类标签'
+      //   setTimeout(() => {
+      //     this.$refs.divToHide2[0].children[0].select()
+      //   }, 500);
+      // }
+
+    },
+    addType() {
+      let pid = ''
+      if (!this.addInput) {
+        this.$message.error('请输入分类名字');
+        return
+      }
+      if (this.addVisbile) {
+        pid = '0'
+      } else if (this.addVisbile2 === 0 || this.addVisbile2) {
+        let check = this.pid.split('-')
+        pid = this.typeArray[check[0]].id
+      }
+      let params = [{
+        pid: pid,
+        name: this.addInput,
+        uid: this.userid
+      }];
+      this.ajax
+        .post(this.$store.state.api + "addSourceFileType", params)
+        .then((res) => {
+          this.$message.success('添加成功');
+          this.addVisbile = false
+          this.addVisbile2 = ''
+          this.getData()
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    typeOpen(index) {
+      if (this.typeArray[index].child.length > 0) {
+        this.typeArray[index].open = !this.typeArray[index].open
+      }
+    },
+    checkType(pid) {
+      if (this.pid == pid) {
+        return
+      }
+      let _pid = pid.split('-')
+      if (_pid.length === 1 && pid != 'wu') {
+        if (this.typeArray[_pid[0]].child.length > 0) {
+          this.pid = pid + '-0';
+          this.typeArray[_pid[0]].open = true;
+        } else {
+          this.pid = pid;
+        }
+      } else {
+        this.pid = pid;
+      }
+    },
+    handleClickOutside(event) {
+      const target = event.target;
+      const divToHide = this.$refs.divToHide; // 获取需要隐藏的 div 的引用
+      const divToHide2 = this.$refs.divToHide2; // 获取需要隐藏的 div 的引用
+      const addTypeAction = this.$refs.addTypeAction
+      const divToHide3 = this.$refs.divToHide3; // 获取需要隐藏的 div 的引用
+      const divToHide4 = this.$refs.actionDiv; // 获取需要隐藏的 div 的引用
+      const divToHide5 = this.$refs.divToHide5; // 获取需要隐藏的 div 的引用
+      const renameInput = this.$refs.renameInput; // 获取需要隐藏的 div 的引用
+      console.log('1')
+      if (divToHide && !divToHide.contains(target) && divToHide3 && !divToHide3.contains(target)) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.addVisbile = false
+      }
+      // if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && divToHide3 && !divToHide3.contains(target)) {
+      //   // 点击的不是需要隐藏的 div，则隐藏它
+      //   this.addVisbile2 = ''
+      // }
+      if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && addTypeAction && !addTypeAction.contains(target)) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.addVisbile2 = ''
+      }
+
+      if (divToHide4 && !divToHide4.contains(target) && divToHide5 && !divToHide5[0].contains(target)) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.showActionDiv = false;
+      }
+
+      if (renameInput && renameInput[0] && !renameInput[0].contains(target) && (!divToHide4 || (divToHide4 && !divToHide4.contains(target)))) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.renameType = ''
+      }
+    },
+    showActions(event, type) {
+      this.showActionDiv = true;
+      const buttonRect = event.target.getBoundingClientRect();
+      this.actionDivStyle.top = `${buttonRect.bottom - 30}px`;
+      this.actionDivStyle.left = `${buttonRect.left + 25}px`;
+      this.pidArray = []
+      let _type = type.split('-')
+      if (_type.length > 1) {
+        let pid = this.typeArray[_type[0]].child[_type[1]].pid
+        this.typeArray.forEach(item => {
+          item.id != pid && this.pidArray.push(item)
+        })
+      }
+      this.actionType = type;
+      this.$forceUpdate();
+    },
+    actionMove(pid) {
+      let type = this.actionType.split('-')
+      let id = this.typeArray[type[0]].child[type[1]].id
+      this
+        .$confirm('确定移动到' + pid.name + '吗？并且此分类的底下的文件也会跟随！', "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          let params = [{
+            id: id,
+            pid: pid.id
+          }];
+          this.ajax
+            .post(this.$store.state.api + "updateSourceFileTypePid", params)
+            .then((res) => {
+              this.$message.success('移动成功');
+              this.showActionDiv = false
+              this.getData()
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        })
+        .catch(() => {
+        });
+    },
+    actionRename() {
+      let type = this.actionType.split('-')
+      if (type.length == 1) {
+        this.renameInput = this.typeArray[type[0]].name
+      } else {
+        this.renameInput = this.typeArray[type[0]].child[type[1]].name
+      }
+      this.renameType = this.actionType
+      if (this.pid != this.renameType) {
+        this.checkType(this.renameType)
+      }
+      console.log(this.renameType);
+      setTimeout(() => {
+        this.$refs.renameInput[0].select();
+        this.showActionDiv = false
+      }, 500);
+    },
+    actionAdd() {
+      let type = this.actionType.split('-')
+      if (type.length > 1) {
+        return
+      }
+      let check = type
+      this.checkType(this.actionType)
+      this.addVisbile2 = parseInt(check[0]);
+      this.addInput = '二级分类标签'
+      this.showActionDiv = false
+      setTimeout(() => {
+        this.$refs.divToHide2[0].children[0].select()
+      }, 500);
+    },
+    rename() {
+      if (!this.renameInput) {
+        this.$message.error('请输入分类名字');
+        return
+      }
+      let type = this.renameType.split('-')
+      let id = ''
+      if (type.length == 1) {
+        id = this.typeArray[type[0]].id
+      } else {
+        id = this.typeArray[type[0]].child[type[1]].id
+      }
+      let params = [{
+        id: id,
+        name: this.renameInput
+      }];
+      this.ajax
+        .post(this.$store.state.api + "updateSourceFileName", params)
+        .then((res) => {
+          this.$message.success('修改成功');
+          this.renameType = ''
+          this.getData()
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    actionDelete() {
+      let type = this.actionType.split('-')
+      let id = ''
+      let msg = ''
+      if (type.length == 1) {
+        if (this.typeArray[type[0]].child.length) {
+          msg = '删除此分类后，该分类下的所有子分类将全部删除，确定删除此分类吗？'
+        } else {
+          msg = '确定删除此分类吗？'
+        }
+        id = this.typeArray[type[0]].id
+      } else {
+        msg = '确定删除此分类吗？'
+        id = this.typeArray[type[0]].child[type[1]].id
+      }
+      this
+        .$confirm(msg, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          let params = [{
+            id: id,
+          }];
+          this.ajax
+            .post(this.$store.state.api + "deleteSoureFileType", params)
+            .then((res) => {
+              this.$message.success('删除成功');
+              this.showActionDiv = false
+              this.getData()
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        })
+        .catch(() => {
+        });
+    },
+    addFile(file) {
+      this.$emit('addFile', file)
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+    this.getData();
+  },
+}
+</script>
+
+<style scoped>
+.l_box {
+  width: 100%;
+  height: 100%;
+  background: #f0f2f5;
+  box-sizing: border-box;
+  display: flex;
+  padding: 20px;
+}
+
+.l_type_box {
+  width: 300px;
+  height: 100%;
+  background: #fff;
+  border-radius: 5px;
+}
+
+.l_type_box>.header {
+  width: 100%;
+  padding: 15px 15px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #E7E7E7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.l_type_box>.header>.title {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.l_type_box>.header>.add {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  height: 30px;
+  padding: 0 8px;
+  background: rgb(0, 97, 255);
+  color: #fff;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-size: 14px;
+  align-items: center;
+}
+
+.l_type_box>.header>.add::before {
+  content: '';
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin-right: 7px;
+  background-image: url('../../../assets/icon/sourceFile/icon_add.png');
+  background-size: 100% 100%;
+}
+
+.l_type_box>.nav {
+  width: 100%;
+  height: calc(100% - 62px);
+  box-sizing: border-box;
+  padding: 15px;
+  overflow: auto;
+}
+
+.l_type_box>.nav>.nav_b {
+  margin-top: 10px;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box {
+  height: 44px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.name {
+  font-size: 16px;
+  color: #000000e6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.l_type_box .active2 {
+  background: #fff;
+}
+
+.l_type_box .active2 .name {
+  color: #3681FC !important;
+}
+
+.l_type_box .active {
+  background: #3681fc;
+}
+
+.l_type_box .active1 {
+  background: #3681fc !important;
+}
+
+.l_type_box .active .name,
+.l_type_box .active1 .name {
+  color: #fff !important;
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_box:hover {
+  background: #e0eafb;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box:hover .more {
+  display: block;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.icon {
+  min-width: 16px;
+  height: 16px;
+  background-size: 100% 100%;
+  margin-right: 10px;
+  /* background: #000; */
+  transition: all 0.3s;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.no {
+  background-image: url('../../../assets/icon/sourceFile/icon_no.png');
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_box.active1>.no {
+  background-image: url('../../../assets/icon/sourceFile/icon_no_active.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.more {
+  cursor: pointer;
+  margin: 0 0 0 auto;
+  display: none;
+  background-image: url('../../../assets/icon/sourceFile/icon_select.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.haveL {
+  transform: rotate(-90deg);
+  background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_box.active2>.haveL {
+  transform: rotate(-90deg);
+  background-image: url('../../../assets/icon/sourceFile/icon_arrow_active.png');
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_box.open>.haveL {
+  transform: rotate(0deg);
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box {
+  margin-top: 10px;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box+.nav_box {
+  margin-top: 10px;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box {
+  height: 44px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
+  font-size: 16px;
+  color: #000000e6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover {
+  background: #e0eafb;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
+  background: #5E9AFC;
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
+  display: block;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.icon {
+  min-width: 16px;
+  height: 16px;
+  background-size: 100% 100%;
+  margin-right: 10px;
+  transition: all 0.3s;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.more {
+  margin: 0 0 0 auto;
+  display: none;
+  background-image: url('../../../assets/icon/sourceFile/icon_select.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active>.more {
+  background-image: url('../../../assets/icon/sourceFile/icon_select_active.png');
+}
+
+
+
+.add_box {
+  height: 44px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 3px 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: #E1EDFD;
+  margin-top: 10px;
+}
+
+.add_box>input {
+  width: calc(100% - 16px);
+  height: calc(100% - 6px);
+  box-sizing: border-box;
+  border: none;
+  margin-left: 16px;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  outline: none;
+}
+
+.renameInput {
+  width: calc(100% - 16px);
+  height: calc(100% - 6px);
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  outline: none;
+}
+
+.action-div {
+  position: absolute;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  /* overflow: hidden; */
+  padding: 5px 0;
+  box-shadow: 0 0 2px 0px #00000021;
+}
+
+.action-div>div {
+  width: 115px;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+  position: relative;
+  z-index: 999;
+}
+
+.action-div>div:hover {
+  background: #e0eafb;
+}
+
+.action-div>.move::after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+  background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
+}
+
+.action-div>.move:hover .pid_box {
+  display: flex;
+}
+
+.pid_box {
+  position: absolute;
+  right: 0;
+  transform: translateX(100%);
+  background: #ffffff;
+  flex-direction: column;
+  border-radius: 5px;
+  /* overflow: hidden; */
+  padding: 5px 0;
+  box-shadow: 0 0 2px 0px #00000021;
+  top: 0;
+  display: none;
+}
+
+.pid_box>div {
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pid_box>div:hover {
+  background: #e0eafb;
+}
+
+
+.l_file_box {
+  width: calc(100% - 320px);
+  margin-left: 20px;
+  background: #fff;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.l_none {
+  color: #00000069;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/router/index.js

@@ -143,6 +143,7 @@ import choseCheckTest from '@/components/pages/test/choseCheck'
 import testAi from '@/components/pages/testAi'
 import cocoroboffmpeg from '@/components/pages/cocoroboffmpeg'
 import appStore from '@/components/pages/appStore'
+import knowledge from '@/components/pages/knowledge/index'
 // 全局修改默认配置，点击空白处不能关闭弹窗
 ElementUI.Dialog.props.closeOnClickModal.default = false
 Vue.use(Router).use(ElementUI)
@@ -1232,6 +1233,14 @@ export default new Router({
 					meta:{
 						requireAuth:''//不需要鉴权
 					}
+				},
+				{
+					path:"/knowledge",
+					name:"knowledge",
+					component:knowledge,
+					meta:{
+						requireAuth:''//不需要鉴权
+					}
 				}
     ]
 })