cloudfile-ui/src/views/publicment/modalComponebts/FileCollect.vue

<template>
    <div>
        <div>
            <el-dialog v-model="fileCollect" title="收藏" width="30%">
                <el-form :model="collectForm" label-width="120px">
                    <el-form-item label="名称">
                        <el-input v-model="collectForm.name" />
                    </el-form-item>
                    <el-form-item label="收藏标签">
                        <div class="newTag" v-if="tagCollect">
                            <el-input v-model="newTag" placeholder="请输入新标签" @blur="tagBlur"></el-input>
                        </div>
                        <el-select v-model="collectForm.folders" class="m-2" placeholder="请选择" size="large"
                            @change="collectChange">
                            <el-option v-for="(item, index) in collectList" :key="item.labelId" :label="item.label"
                                :value="item.labelId" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-button @click="createTag">新建标签</el-button>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="backColl">取消</el-button>
                        <el-button type="primary" @click="getSureC">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRef } from "vue"
import { ElMessage } from "element-plus"
import collect from "../../../api/collect/collect"
export default {
    props: {
        collects: {
            type: Boolean,
            required: true
        },
        copyFileName: {
            type: String,
            required: true
        },
        copyFileId:{
            type:Number,
            required:true
        },
        isFolder:{
            type:String,
            required:"N"
        },
        clickRow:{
            type:Object,
            default: () => {
                return {}
            }
        }
    },
    setup(props, { emit }) {
        let { backColl, getSureC } = toRef(props)
        let result = props.collects
        let fname = props.copyFileName
        let fid = props.copyFileId
        let fileCollect = ref(false)
        let collectForm = ref({
            name: "",
            folders: "",
        })
        let tagCollect = ref(false)//添加收藏标签时显示
        let newTag = ref('')
        let sortNum = ref(0)
        let collectList = ref([])
        function inlineList() {
            fileCollect.value = result
            collectForm.value.name = fname
        }
        function tagBlur() {
            if(!newTag.value){
                ElMessage({ message: '标签名不能为空', type: 'error' })
                return
            }
            collect.addNewTag({ labelName: newTag.value, orderNum: sortNum.value + 1 }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "新建标签成功",
                        type: "success"
                    })
                    getAllCollect()
                }
            })
            tagCollect.value = false
        }
        function collectChange(e) {
            collectForm.value.folders = e
        }
        function getAllCollect() {
            collect.getCollect({}).then(res => {
                const maxAge = res.rows.reduce((max, obj) => (obj.orderNum > max ? obj.orderNum : max), res.rows[0].orderNum)
                sortNum.value = maxAge
                collectList.value = res.rows.map(item => {
                    return {
                        label: item.labelName,
                        labelId: item.labelId,
                        order: item.orderNum
                    }
                })
            })
        }
        function createTag() {
            newTag.value = ''
            tagCollect.value = true
        }
        // 确认收藏
        function sureCollect() {
            // console.log('clickRow',props.clickRow.value);
            let query = {}
            if(props.isFolder === "Y"){
                query = {
                    "isFolder":props.isFolder,
                    "relaId": props.clickRow.dirId,
                    "labelId": collectForm.value.folders - 0 || null,
                }
            }else{
                query = {
                    "isFolder":props.isFolder,
                    "relaId": props.clickRow.docId,
                    "labelId": collectForm.value.folders - 0 || null,
                }
            }
            collect.addCollect(query).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "收藏成功",
                        type: "success"
                    })
                fileCollect.value = false
                emit("getCollects", fileCollect.value)
                emit("refreshFile")
                }
            })
        }
        function tobacks() {
            fileCollect.value = false
            emit("getCollects", fileCollect.value)
        }
        onMounted(() => {
            inlineList()
            getAllCollect()
        })
        return {
            fileCollect,
            collectForm,
            tagCollect,
            newTag,
            inlineList,
            tagBlur,
            collectChange,
            getAllCollect,
            createTag,
            getSureC: sureCollect,
            backColl: tobacks,
            collectList,
        }
    }
}
</script>

<style lang="scss" scoped></style>