qimall/backend/views/components/common/storeDiy/com-attachment.php

<style scoped>
    .com-attachment-list {
        padding: 5px;
        width: 100%;
    }

    .com-attachment-list * {
        box-sizing: border-box;
    }

    .com-attachment-list:after {
        clear: both;
        display: block;
        content: " ";
    }

    .com-attachment-item {
        display: inline-block;
        /*box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);*/
        cursor: pointer;
        position: relative;
        float: left;
        width: 120px;
        height: 140px;
        margin: 7.5px;
        text-align: center;
        padding: 5px 5px 0;
    }

    .com-attachment-active-icon {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 28px;
        color: #409EFF;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.75);
        opacity: 0;
    }

    .com-attachment-item:hover {
        /*del-box-shadow: 0 0 0 1px rgba(84, 200, 255, 0.41);*/
    }

    .com-attachment-item.checked,
    .com-attachment-item.selected {
        box-shadow: 0 0 0 1px #1ed0ff;
        background: #daf5ff;
        border-radius: 5px;
    }

    .com-attachment-item.checked .com-attachment-active-icon,
    .com-attachment-item.selected .com-attachment-active-icon {
        opacity: 1;
    }

    .com-attachment-item .com-attachment-img {
        display: block;
    }

    .com-attachment-item .file-type-icon {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        background: #666;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
    }

    .com-attachment-upload {
        box-shadow: none;
        border: 1px dashed #b2b6bd;
        height: 100px;
        width: 100px;
        margin: 17.5px;
        padding: 0;
    }

    .com-attachment-upload i {
        font-size: 30px;
        color: #909399;
    }

    .com-attachment-upload:hover {
        box-shadow: none;
        border: 1px dashed #409EFF;
    }

    .com-attachment-upload:hover i {
        color: #409EFF;
    }

    .com-attachment-upload:active {
        border: 1px dashed #20669c;
    }

    .com-attachment-upload:active i {
        color: #20669c;
    }

    .com-attachment-dialog .group-menu {
        border-right: none;
        width: 230px;
    }

    .com-attachment-dialog .group-menu .el-menu-item {
        padding-left: 10px !important;
        padding-right: 10px;
    }

    .com-attachment-dialog .group-menu .el-menu-item .el-button {
        padding: 3px 0;
    }

    .del-com-attachment-dialog .group-menu .el-menu-item .el-button:hover {
        background: #e2e2e2;
    }

    .com-attachment-dialog .group-menu .el-menu-item .el-button i {
        margin-right: 0;
    }

    .com-attachment-simple-upload {
        width: 100% !important;
        height: 120px;
        border: 1px dashed #e3e3e3;
        cursor: pointer;
    }

    .com-attachment-simple-upload:hover {
        background: rgba(0, 0, 0, .05);
    }

    .com-attachment-simple-upload i {
        font-size: 32px;
    }

    .com-attachment-video-cover {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
    }

    .com-attachment-video-info {
        background: rgba(0, 0, 0, .35);
        color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 1px 3px;
        font-size: 14px;
    }

    .com-attachment-video-name {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .com-attachment-dialog .com-attachment-name {
        color: #666666;
        margin-top: 5px;
        font-size: 13px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .com-attachment-dialog .search {
        margin-top: 10px;
        margin-left: 20px;
        width: 250px;
    }

    .com-attachment-dialog .search .el-input__inner {
        border-right: 0;
    }

    .com-attachment-dialog .search .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .com-attachment-dialog .search .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .com-attachment-dialog .search .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .com-attachment-dialog .search .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .com-attachment-dialog .search .el-input-group__append .el-button {
        padding: 0;
    }

    .com-attachment-dialog .search .el-input-group__append .el-button {
        margin: 0;
    }

    .com-attachment-dialog .scrollbar {
        height: 100%;
    }

    .com-attachment-dialog .scrollbar .el-scrollbar__wrap {
        overflow-y: hidden;
    }

    .features_tree {
        display: flex;
        justify-content: center;
    }

    .features_tree button {
        flex: 1;
    }

    .el-tree-node {
        margin-top: 10px;
    }
</style>
<template id="com-attachment">
    <div class="com-attachment">
        <el-dialog class="com-attachment-dialog"
            :title="title ? title : '选择文件'"
            :visible.sync="dialogVisible"
            @opened="dialogOpened"
            :close-on-click-modal="false"
            :width="simple?'25%':'65%'"
            top="10vh"
            append-to-body>
            <template v-if="simple">
                <com-upload
                    class="com-attachment-simple-upload"
                    v-loading="uploading"
                    :disabled="uploading"
                    @start="handleStart"
                    @success="handleSuccess"
                    @complete="handleComplete"
                    :multiple="true"
                    :max="10"
                    :params="uploadParams"
                    :fields="uploadFields"
                    :accept="accept"
                    flex="main:center cross:center">
                    <div v-if="uploading">{{uploadCompleteFilesNum}}/{{uploadFilesNum}}</div>
                    <i v-else class="el-icon-upload"></i>
                </com-upload>
            </template>
            <template v-else>
                <div style="height: 0;overflow: hidden;">
                    <canvas id="com-attachment-canvas" style="border: 1px solid #ccc;visibility: hidden;"></canvas>
                </div>
                <div flex="cross:center box:last" style="margin-bottom: 12px;">
                    <div></div>
                    <div flex="cross:center">
                        <el-button v-if="!showEditBlock" @click="showEditBlock=true">开启编辑</el-button>
                        <template v-if="showEditBlock">
                            <el-button @click="showEditBlock=false" style="margin-right: 12px">退出编辑模式</el-button>
                            <el-checkbox border v-model="selectAll"
                                @change="selectAllChange"
                                label="全选"
                                style="margin-right: 12px;margin-bottom: 0"></el-checkbox>
                            <el-button :loading="deleteLoading"
                                @click="deleteItems"
                                type="danger" plain
                                style="margin-right: 12px">删除
                            </el-button>
                            <el-dropdown v-loading="moveLoading"
                                trigger="click"
                                :split-button="true"
                                @command="moveItems">
                                <span>移动至</span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(item, index) in groupList"
                                        :command="index"
                                        :key="index">
                                        {{item.name}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </div>
                </div>
                <div flex="box:first" style="border: 1px solid #e3e3e3;margin-bottom: 10px;min-height: 300px">
                    <div style="border-right: 1px solid #e3e3e3">
                        <el-menu class="group-menu"
                            mode="vertical"
                            v-loading="groupListLoading">
                            <el-scrollbar style="height:450px;width:100%">
                                <el-menu-item index="all" @click="switchGroup(-1)">
                                    <i class="el-icon-tickets"></i>
                                    <span>全部</span>
                                </el-menu-item>
                                <div class="features_tree">
                                    <!-- @click="addNode" -->
                                    <el-button type="text" v-if="!is_recycle" @click="addNode"><i class="el-icon-circle-plus"></i>添加</el-button>
                                    <el-button type="text" v-if="!is_recycle" @click="editNode"><i class="el-icon-edit"></i>编辑</el-button>
                                    <el-button type="text" v-if="is_recycle" @click="deleteGroups(is_recycle,2)"><i class="el-icon-refresh"></i>还原</el-button>
                                    <el-button type="text" @click="deleteGroups(is_recycle,is_recycle?3:1)"><i class="el-icon-delete"></i>删除</el-button>
                                </div>
                                <el-tree
                                    :data="data2"
                                    highlight-current
                                    @node-click="handleNodeClick"
                                    :props="defaultProps">
                                    <span slot-scope="{ node, data }">
                                        <i class="el-icon-tickets"></i>
                                        <span>{{ node.label }}</span>
                                    </span>
                                </el-tree>

                            </el-scrollbar>
                        </el-menu>
                    </div>
                    <div v-loading="loading" flex="dir:top">
                        <el-scrollbar class="scrollbar">
                            <div class="search" style="margin-right: 12px">
                                <el-input placeholder="请输入名称搜索" v-model="p_keyword"
                                    @keyup.enter.native="picSearch"
                                    class="input-with-select">
                                    <el-button @click="picSearch" slot="append" icon="el-icon-search"></el-button>
                                </el-input>
                            </div>

                            <div class="com-attachment-list">
                                <div class="com-attachment-item com-attachment-upload">
                                    <com-upload
                                        v-loading="uploading"
                                        :disabled="uploading"
                                        @start="handleStart"
                                        @success="handleSuccess"
                                        @complete="handleComplete"
                                        :multiple="true"
                                        :max="10"
                                        :params="uploadParams"
                                        :fields="uploadFields"
                                        :accept="accept"
                                        flex="main:center cross:center"
                                        style="width: 100px;height: 100px">
                                        <div v-if="uploading">{{uploadCompleteFilesNum}}/{{uploadFilesNum}}</div>
                                        <i v-else class="el-icon-upload"></i>
                                    </com-upload>
                                </div>
                                <template v-for="(item, index) in attachments">
                                    <el-tooltip class="item" effect="dark" :content="String(item.name)" placement="top"
                                        :open-delay="1">
                                        <div
                                            :key="index"
                                            :class="'com-attachment-item'+((item.checked&&!showEditBlock)?' checked':'')+(item.selected&&showEditBlock?' selected':'')"
                                            @click="handleClick(item)">
                                            <!-- 图片 -->
                                            <img v-if="item.upload_type == 'images'" class="com-attachment-img"
                                                :src="item.url"
                                                style="width: 100px;height: 100px;">
                                            <!-- 视频 -->
                                            <div v-if="item.upload_type == 'videos'" class="com-attachment-img"
                                                style="width: 100px;height: 100px;position: relative">
                                                <div v-if="item.cover_pic_src"
                                                    class="com-attachment-video-cover"
                                                    :style="'background-image: url('+item.cover_pic_src+');'"></div>
                                                <video style="width: 60px;height: 100px;" error="预览图加载失败"
                                                    :id="'app_attachment_'+ _uid + '_' + index"
                                                    :src="item.url">
                                                </video><!-- width="60" height="100%" -->
                                                <div class="com-attachment-video-info" style="margin-left: 24px;">
                                                    <i class="el-icon-video-play"></i>
                                                    <span>{{item.duration?item.duration:'--:--'}}</span>
                                                </div>
                                            </div>
                                            <!-- 音频 -->
                                            <div v-if="item.upload_type == 'voices'" class="com-attachment-img"
                                                style="width: 100px;height: 100px;position: relative">
                                                <!-- <div v-if="item.cover_pic_src"
											        class="com-attachment-video-cover"
											        :style="'background-image: url('+item.cover_pic_src+');'">
												 </div> -->
                                                <span>{{item.name}}</span>

                                            </div>
                                            <!-- 文件 -->
                                            <div v-if="item.upload_type == 'files'" class="com-attachment-img"
                                                style="width: 100px;height: 100px;line-height: 100px;text-align: center">
                                                <i class="file-type-icon el-icon-document"></i>
                                            </div>
                                            <div v-if="item.upload_type != 'voices'" class="com-attachment-name">{{item.name}}</div>
                                            <i v-if="false" class="com-attachment-active-icon el-icon-circle-check"></i>
                                        </div>
                                    </el-tooltip>
                                </template>
                            </div>
                        </el-scrollbar>
                        <div style="padding: 5px;text-align: right;margin-top:auto">
                            <el-pagination
                                v-if="pagination"
                                background
                                @size-change="handleLoadMore"
                                @current-change="handleLoadMore"
                                :current-page.sync="page"
                                :page-size="pagination.pageSize"
                                layout="prev, pager, next, jumper"
                                :total="pagination.total_count">
                            </el-pagination>
                        </div>
                    </div>
                </div>
                <div style="text-align: right">
                    <span v-if="showEditBlock" style="color: #909399">请先退出编辑模式</span>
                    <el-button @click="confirm" type="primary" :disabled="showEditBlock">选定</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog append-to-body title="分组管理" :visible.sync="addGroupVisible" :close-on-click-modal="false"
            width="25%">
            <el-form @submit.native.prevent label-width="80px" ref="groupForm" :model="groupForm"
                :rules="groupFormRule">
                <el-form-item label="分组名称" prop="name" style="margin-bottom: 22px;">
                    <el-input v-model="groupForm.name" maxlength="8" show-word-limit></el-input>
                </el-form-item>
                <el-form-item style="text-align: right">
                    <el-button type="primary" @click="groupFormSubmit('groupForm')" :loading="groupFormLoading">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog append-to-body title="添加目录" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form_dir" :rules="form_dir_rule">
                <el-form-item label="父级目录" :label-width="formLabelWidth">
                    <el-cascader
                        expand-trigger="hover"
                        :options="data2"
                        v-model="selectedOptions2"
                        :props="{ checkStrictly: true, value: 'id' }"
                        clearable
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="目录名称" :label-width="formLabelWidth">
                    <el-input v-model="form_dir.name" auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="postNode('add')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog append-to-body title="编辑目录" :visible.sync="dialogFormVisibleEdit" :close-on-click-modal="false">
            <el-form :model="form_dir_s" :rules="form_dir_rules">
                <el-form-item label="父级目录" :label-width="formLabelWidth">
                    <el-cascader
                        expand-trigger="hover"
                        :options="getOptions()"
                        v-model="selectedOptions3"
                        :props="{ checkStrictly: true, value: 'id' }"
                        clearable
                        @change="handleChange2">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="目录名称" :label-width="formLabelWidth">
                    <el-input v-model="form_dir_s.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
                <el-button type="primary" @click="postNode('edit')">确 定</el-button>
            </div>
        </el-dialog>
        <div style="line-height: normal;" @click="dialogVisible = !dialogVisible"
            :style="'display:'+(display?display:'inline-block')">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('com-attachment', {
        template: '#com-attachment',
        props: {
            display: String,
            title: String,
            multiple: Boolean,
            max: Number,
            params: Object,
            simple: {
                type: Boolean,
                value: false,
            },
            type: {
                type: String,
                default: 'images',
            },
            value: {
                type: String,
                default: '',
            },
            openDialog: {
                type: Boolean,
                default: false,
            },
        },
        computed: {
            accept: {
                get() {
                    if (this.type === 'images') {
                        return 'image/*';
                    }
                    if (this.type === 'videos') {
                        return 'video/*';
                    }
                    return '*/*';
                },
            },

        },
        watch: {
            type(newVal, oldVal) {
                this.type = newVal;
                this.uploadFields.upload_type = this.type;
            },
            openDialog(newVal, oldVal) {
                this.dialogVisible = newVal;
            },
            dialogVisible(newVal, oldVal) {
                if (!newVal) {
                    this.$emit("closed");
                }
            },
            keyword(newVal, oldVal) {
                const groupList = this.groupList;
                let arr = [];
                groupList.map(v => {
                    if (v.label.indexOf(newVal) !== -1) {
                        arr.push(v);
                    }
                });
                this.groupItem = arr;
            }
        },
        data() {
            return {
                isComGoods: false,
                videoType: 'videos',
                videoConfigInfo: {},
                dialogVisible: false,
                videoPlayVisible: false,
                canvas: null,
                uploading: false,
                dialogVisible: false,
                loading: true,
                loadingMore: false,
                noMore: false,
                attachments: [],
                checkedAttachments: [],
                uploadParams: {},
                uploadFields: {
                    upload_type: this.type
                },
                uploadCompleteFilesNum: 0,
                uploadFilesNum: 0,
                page: 0,
                addGroupVisible: false,
                noMall: true,
                groupList: [],
                groupItem: [],
                groupListLoading: false,
                groupForm: {
                    id: null,
                    name: '',
                },
                groupFormRule: {
                    name: [{
                        required: true,
                        message: '请填写分组名称。',
                    }],
                },
                groupFormLoading: false,
                showEditBlock: false,
                selectAll: false,
                deleteLoading: false,
                moveLoading: false,
                currentAttachmentGroupId: null,
                currentAttachmentStoreId: null,
                video: null,
                keyword: '',
                pagination: null,
                p_keyword: '',
                data2: [],
                dirTree: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                dialogFormVisible: false,
                dialogFormVisibleEdit: false,
                form_dir: {
                    name: '',
                    parent_id: '',
                },
                form_dir_rule: {
                    name: [{
                        required: true,
                        message: '请填写名称',
                    }],
                },
                form_dir_s: {
                    id: '',
                    parent_id: '',
                    name: '',
                },
                form_dir_rules: {
                    name: [{
                        required: true,
                        message: '请填写名称',
                    }],
                },
                formLabelWidth: '120px',
                selectedOptions: [],
                selectedOptions2: [],
                select_name: '全部',
                is_recycle: 0,
                pppid: [],
                selectedOptions3: [],
            };
        },
        created() {},
        methods: {
            getOptions() {
                let data = JSON.parse(JSON.stringify(this.data2))
                let id = this.form_dir_s.id
                let pid = this.form_dir_s.parent_id
                let self = this

                var dismap = function(v, i) {
                    if (v.children && v.children.length > 0) {
                        v.children.map(dismap)
                    }
                    if (v.id == id) {
                        v.disabled = true
                    }
                    if (v.id == pid) {
                        v.disabled = true
                    }
                    if (self.isChildrenId(v.id)) {
                        v.disabled = true
                    }
                    return v
                }
                let mapData = data.map(dismap)

                // 过滤系统图标和系统图片
                mapData = mapData.filter(item => item.id != 2000000 && item.id != 999990)
                return mapData
            },
            /**
             * 作用是不能把当前元素选择到当前元素的子元素下面
             */
            isChildrenId(cid) {
                let id = this.form_dir_s.id
                let child = []
                let cids = []
                var getChildren = function(arr) {
                    arr.forEach(item => {
                        if (item.id == id) {
                            child = item.children
                        }
                        if (item.children && item.children.length > 0) {
                            getChildren(item.children)
                        }
                    })
                }
                var getChildrenId = function(arr) {
                    arr.forEach(item => {
                        if (item.id) {
                            cids.push(item.id)
                        }
                        if (item.children && item.children.length > 0) {
                            getChildrenId(item.children)
                        }
                    })
                }
                getChildren(this.data2)
                getChildrenId(child)
                return cids.find(function(ccc) {
                    return ccc == cid
                })
            },

            picSearch() {
                this.page = 1;
                this.loading = true;
                this.loadGroups();
                this.loadList({});
            },

            dialogOpened() {
                if (this.simple) {
                    return;
                }
                this.page = 1;
                this.loading = true;
                this.loadGroups();
                this.loadList({});
            },
            deleteItems() {
                const itemIds = [];
                for (let i in this.attachments) {
                    if (this.attachments[i].selected) {
                        itemIds.push(this.attachments[i].id);
                    }
                }
                if (!itemIds.length) {
                    this.$message.warning('请先选择需要删除的图片。');
                    return;
                }
                this.$confirm('确认删除所选的' + itemIds.length + '张图片？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.deleteLoading = true;
                    this.$request({
                        params: {
                            r: 'common/file/delete'
                        },
                        method: 'post',
                        data: {
                            ids: itemIds,
                        },
                    }).then(e => {
                        this.deleteLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            for (let i in itemIds) {
                                for (let j in this.attachments) {
                                    if (this.attachments[j].id == itemIds[i]) {
                                        this.attachments.splice(j, 1);
                                        break;
                                    }
                                }
                            }
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.deleteLoading = false;
                    });
                }).catch(() => {});
            },
            selectAllChange(value) {
                for (let i in this.attachments) {
                    this.attachments[i].selected = value;
                }
            },
            selectItem(item) {
                item.selected = item.selected ? false : true;
            },
            moveItems(index) {
                const itemIds = [];
                for (let i in this.attachments) {
                    if (this.attachments[i].selected) {
                        itemIds.push(this.attachments[i].id);
                    }
                }
                if (!itemIds.length) {
                    this.$message.warning('请先选择需要移动的图片。');
                    return;
                }
                this.$confirm('确认移动所选的' + itemIds.length + '张图片？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.moveLoading = true;
                    this.$request({
                        params: {
                            r: 'common/file/move'
                        },
                        method: 'post',
                        data: {
                            ids: itemIds,
                            attachment_group_id: this.groupItem[index].id,
                        },
                    }).then(e => {
                        this.moveLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.switchGroup(index);
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.moveLoading = false;
                    });
                }).catch(() => {});
            },
            loadGroups() {
                this.groupListLoading = true;
                this.$request({
                    params: {
                        r: 'common/file/group-list',
                        is_recycle: 0,
                        type: this.type,
                    },
                }).then(e => {
                    this.groupListLoading = false;
                    if (e.data.code === 0) {
                        this.noMall = e.data.data.no_mall ? e.data.data.no_mall : false;
                        this.groupItem = e.data.data.list;
                        this.groupList = e.data.data.list;
                        this.data2 = e.data.data.arr;

                        // 添加时隐藏系统图片和系统图标
                        this.dirTree = JSON.parse(JSON.stringify(this.data2));
                        this.dirTree = this.dirTree.filter(item => item.id != 2000000 && item.id != 999990)

                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.groupListLoading = false;
                });
            },
            groupFormSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.groupFormLoading = true;
                        this.$request({
                            params: {
                                r: 'common/attachment/group-update',
                            },
                            method: 'post',
                            data: Object.assign({}, this.groupForm, {
                                'type': this.type
                            }),
                        }).then(e => {
                            this.groupFormLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                this.addGroupVisible = false;
                                if (this.groupForm.edit_index > -1) {
                                    this.groupItem[this.groupForm.edit_index] = e.data.data;
                                } else {
                                    this.groupItem.push(e.data.data);
                                }
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.groupFormLoading = false;
                        });
                    }
                })
            },
            switchGroup(index) {
                this.attachments = [];
                this.page = 0;
                this.noMore = false;
                this.loading = true;
                this.uploadParams = {
                    attachment_group_id: index > -1 ? this.groupItem[index].id : null,
                };
                this.currentAttachmentGroupId = index > -1 ? this.groupItem[index].id : null;
                if (index < 1) {
                    this.currentAttachmentStoreId = null
                }
                this.loadList({});
            },
            loadList(params) {
                this.noMore = false;
                this.selectAll = false;
                params['r'] = 'common/file/selector';
                params['page'] = this.page;
                params['attachment_group_id'] = this.currentAttachmentGroupId;
                params['upload_type'] = this.type;
                params['is_recycle'] = 0;
                params['keyword'] = this.p_keyword;
                this.$request({
                    params: params,
                }).then(e => {
                    if (e.data.code === 0) {
                        if (!e.data.data.list.length) {
                            this.noMore = true;
                        }
                        for (let i in e.data.data.list) {
                            e.data.data.list[i].checked = false;
                            e.data.data.list[i].selected = false;
                            e.data.data.list[i].duration = null;
                        }
                        //this.attachments = this.attachments.concat(e.data.data.list);
                        this.attachments = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.pagination.pageSize = e.data.data.page_size;
                        this.pagination.total_count = e.data.data.count;
                        this.checkedAttachments = [];
                        this.loading = false;
                        this.loadingMore = false;
                        this.updateVideo();

                    } else {
                        this.$message.error(e.data.msg);
                        this.dialogVisible = false;
                    }
                }).catch(e => {});
            },
            handleClick(item) {

                if (this.showEditBlock) {
                    this.selectItem(item);
                    return;
                }
                if (item.checked) {
                    item.checked = false;
                    for (let i in this.checkedAttachments) {
                        if (item.id === this.checkedAttachments[i].id) this.checkedAttachments.splice(i, 1);
                    }
                    return;
                }
                if (this.multiple) {
                    let checkedCount = 0;
                    for (let i in this.attachments)
                        if (this.attachments[i].checked) checkedCount++;
                    if (this.max && !item.checked && checkedCount >= this.max) return;
                    item.checked = true;
                    this.checkedAttachments.push(item);
                } else {
                    for (let i in this.attachments) this.attachments[i].checked = false;
                    item.checked = true;
                    this.checkedAttachments = [item];
                }
            },


            confirm() {
                this.$emit('selected', this.checkedAttachments, this.params);
                this.dialogVisible = false;
                const urls = [];
                for (let i in this.checkedAttachments) {
                    urls.push(this.checkedAttachments[i].url);
                }
                for (let i in this.attachments) {
                    this.attachments[i].checked = false;
                }
                this.checkedAttachments = [];
                if (!urls.length) {
                    return;
                }
                if (this.multiple) {
                    this.$emit('input', urls);
                } else {
                    this.$emit('input', urls[0]);
                }
            },
            // 上传开始
            handleStart(files) {
                this.uploading = true;
                this.uploadFilesNum = files.length;
                this.uploadCompleteFilesNum = 0;
            },
            // 成功上传
            handleSuccess(file) {
                console.log(file, 'file')
                if (file.response && file.response.data && file.response.data.code === 0) {
                    const newItem = {
                        checked: false,
                        selected: false,
                        created_at: file.response.data.data.created_at,
                        deleted_at: file.response.data.data.deleted_at,
                        id: `${file.response.data.data.id}`,
                        is_delete: file.response.data.data.is_delete,
                        mall_id: file.response.data.data.mall_id,
                        name: file.response.data.data.name,
                        old_name: file.response.data.data.old_name,
                        size: file.response.data.data.size,
                        storage_id: file.response.data.data.storage_id,
                        thumb_url: file.response.data.data.thumb_url,
                        type: file.response.data.data.type,
                        updated_at: file.response.data.data.updated_at,
                        url: file.response.data.data.url,
                        user_id: file.response.data.data.user_id,
                        duration: null,
                        cover_pic_src: null,
                        upload_type: file.response.data.data.upload_type
                    };
                    this.attachments.unshift(newItem);
                    this.uploadCompleteFilesNum++;
                    this.updateVideo();
                }
            },
            // 上传完毕
            handleComplete(files) {
                this.uploading = false;
                if (this.simple) {
                    let urls = [];
                    let attachments = [];
                    for (let i in files) {
                        if (files[i].response.data && files[i].response.data.code === 0) {
                            urls.push(files[i].response.data.data.url);
                            attachments.push(files[i].response.data.data);
                        }
                    }
                    if (!urls.length) {
                        return;
                    }
                    this.dialogVisible = false;
                    this.$emit('selected', attachments, this.params);
                    if (this.multiple) {
                        this.$emit('input', urls);
                    } else {
                        this.$emit('input', urls[0]);
                    }
                }
            },
            handleLoadMore(currentPage) {
                if (this.noMore) {
                    return;
                }
                this.page = currentPage;
                this.loading = true;
                this.loadingMore = true;
                this.loadList({});
            },
            updateVideo() {
                if (!this.canvas) {
                    this.canvas = document.getElementById('com-attachment-canvas');
                }
                for (let i in this.attachments) {
                    if (this.attachments[i].type == 2) {
                        if (this.attachments[i].duration) {
                            continue;
                        }
                        let times = 0;
                        let video = null;
                        const maxRetry = 10;
                        const id = 'app_attachment_' + this._uid + '_' + i;
                        const timer = setInterval(() => {
                            times++;
                            if (times >= maxRetry) {
                                clearInterval(timer);
                            }
                            if (!video) {
                                video = document.getElementById(id);
                            }
                            if (!video) {
                                return;
                            }
                            try {
                                const zoom = 0.15;
                                this.canvas.width = video.videoWidth * zoom;
                                this.canvas.height = video.videoHeight * zoom;
                                this.canvas.getContext('2d').drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
                                this.attachments[i].cover_pic_src = this.canvas.toDataURL('image/jpg');
                            } catch (e) {
                                console.warn('获取视频封面异常: ', e);
                            }

                            if (video.duration && !isNaN(video.duration)) {
                                let m = Math.trunc(video.duration / 60);
                                let s = Math.trunc(video.duration) % 60;
                                m = m < 10 ? `0${m}` : `${m}`;
                                s = s < 10 ? `0${s}` : `${s}`;
                                this.attachments[i].duration = `${m}:${s}`;
                                clearInterval(timer);
                            }
                        }, 500);
                    }
                }
            },
            editNode() {
                if (this.form_dir_s.id == '') {
                    this.$message.error('请选择目录');
                    return false;
                }

                // 编辑时候自动选中当前的父级
                let data = JSON.parse(JSON.stringify(this.data2))
                let pid = 0
                let id = this.form_dir_s.id
                let pids = []
                let getPid = function(arr, id) {
                    arr.forEach(item => {
                        if (item.id == id) {
                            pid = item.parent_id
                            if (pid > 0) {
                                pids.push(pid)
                                getPid(data, pid)
                            }
                        }
                        if (item.children && item.children.length > 0) {
                            getPid(item.children, id)
                        }
                    })
                }
                getPid(data, id)
                pids.reverse()
                this.selectedOptions3 = pids
                this.dialogFormVisibleEdit = true;
            },
            handleChange(val) {
                this.form_dir.parent_id = val;
            },
            handleChange2(val) {
                this.form_dir_s.parent_id = val
            },
            postNode(type) {
                let parent_id = this.form_dir.parent_id[this.form_dir.parent_id.length - 1]
                let formData = {
                    name: type == 'add' ? this.form_dir.name : this.form_dir_s.name
                }
                if (type == 'add') {
                    formData.parent_id = parent_id
                } else {
                    formData.id = this.form_dir_s.id
                    formData.parent_id = this.form_dir_s.parent_id[this.form_dir_s.parent_id.length - 1]
                }
                this.$request({
                    params: {
                        r: 'common/file/save-group',
                    },
                    method: 'post',
                    data: formData,
                }).then(e => {
                    this.groupListLoading = false;
                    if (e.data.code === 0) {
                        this.dialogFormVisible = false;
                        this.dialogFormVisibleEdit = false;
                        this.groupListLoading = true;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.dialogOpened();
                }).catch(e => {
                    this.groupListLoading = false;
                });
            },
            handleNodeClick(data) {
                console.log(data);
                this.uploadParams = {
                    attachment_group_id: data.id,
                }
                this.currentAttachmentGroupId = data.id;
                this.currentAttachmentStoreId = data.store_id === undefined ? 0 : data.store_id;
                this.showEditBlock = false
                this.form_dir_s.id = data.id;
                this.form_dir_s.name = data.label;
                this.select_name = data.label;
                this.loading = true;
                this.loadList({});
            },
            deleteGroups(is_recycle, type) { // 删除分组
                let title;
                let msg;
                switch (type) {
                    case 1:
                        title = '是否确认将选中素材放入回收站中？删除的素材可通过回收站还原';
                        msg = '请选择要删除的目录';
                        break;
                    case 2:
                        title = '确认还原选择素材？';
                        msg = '请选择要还原的目录';
                        break;
                    case 3:
                        title = '素材删除后将无法恢复，您确认要彻底删除所选素材吗？';
                        msg = '请选择要删除的目录';
                        break;
                    default:
                        title = '';
                        msg = '';
                        break;
                }
                if (this.form_dir_s.id == '') {
                    this.$message.error(msg);
                    return false;
                }
                this.$confirm(title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteLoading = true;
                    this.$request({
                        params: {
                            r: 'common/file/del-group'
                        },
                        method: 'POST',
                        data: {
                            id: this.form_dir_s,
                            //type 1回收 2还原 3删除
                            // type:type,
                        }
                    }).then(e => {
                        this.deleteLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.dialogOpened();
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.deleteLoading = false;
                    });
                }).catch(() => {});
            },
            addNode() {
                this.form_dir_s = {
                    id: '',
                    parent_id: '',
                    name: '',
                }
                this.dialogFormVisible = true
            },
            playVideo() {},
        },
    });
</script>