ChuangHeng/src/views/modules/agent/knowledgeCategory.vue

<template>
    <div class="agent_page">
        <div class="title">类目管理</div>
        <div class="content adf">
            <div class="left">
                <div class="l_top adfacjb">
                    <span>类目</span>
                    <span @click="handleAddCategory">+</span>
                </div>
                <div class="categories">
                    <div class="c_item" :class="{'active':index===cidx}" v-for="(item, index) in categoryList" :key="index" @click="handleSelecyCategory(item,index)">
                        {{ item.name }}
                        <el-popover placement="right" width="177" trigger="click">
                            <div class="tl_czs">
                                <div class="tlc_pre" @click.stop="handleEditCategory(item,index)">编辑类目</div>
                                <div class="tlc_pre" @click.stop="handleDeleteCategory(item,index)">删除类目</div>
                            </div>
                            <i slot="reference" class="el-icon-more" style="font-size: 14px;color: #999; transform: rotate(90deg);" @click.stop="handleSetTeam(team,idx)"></i>
                        </el-popover>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="r_name adfac" v-if="rightName">
                    <span class="rn_mc">{{ rightName }}</span>
                    <span class="rn_tip">共<span class="rn_num">{{ 3 }}</span>个文件</span>
                    <span class="rn_tip"><span class="rn_num">{{ 0 }}</span>个文件审核中</span>
                </div>
                <div class="tulr_top adfacjb">
                    <div class="tulrt_l adfacjb queryInput">
                        <el-input v-model="queryParams.name" placeholder="请输入文件名称查询"></el-input>
                        <img src="@/assets/images/agent/query_mini.png">
                    </div>
                    <div class="tulrt_r adf">
                        <div class="tr_btn">批量管理</div>
                        <div class="tr_btn">导入数据</div>
                    </div>
                </div>
                <el-table :data="fileList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无文件" max-height="578px" style="margin-top: 24px;">
                    <el-table-column label="序号" width="50">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="文件名称" prop="aaa"></el-table-column>
                    <el-table-column label="状态" prop="bbb">
                        <template #default="{ row }"></template>
                    </el-table-column>
                    <el-table-column label="数据来源" prop="aaa"></el-table-column>
                    <el-table-column label="文件格式" prop="aaa"></el-table-column>
                    <el-table-column label="上传时间" prop="aaa"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template #default="scope">
                            <el-button link type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button link type="text" size="mini" @click="handleTag(scope.row)">标签</el-button>
                            <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="display: flex;justify-content: center;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryParams.page"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        v-show="total > 0">
                    </el-pagination>
                </el-row>
            </div>
        </div>
        <el-dialog width="30%" :visible.sync="categoryShow" :title="categoryTitle" @close="categoryShow=false">
            <el-form ref="categoryRef" :model="categoryForm" :rules="categoryRules" label-width="90px" style="width: 90%;margin: 0 auto;">
                <el-form-item label="类目名称" prop="name">
                    <el-input v-model="categoryForm.name" placeholder="请输入类目名称" />
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 100px;">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();

    const cidx = ref('');
    const categoryList = ref([
        {id:1,name:'高企的发展路径'},
        {id:2,name:'团队管理'},
        {id:3,name:'默认类目'}
    ]);
    const rightName = ref('');
    const queryParams = ref({
        page:1,
        limit:10,
        name: ''
    })
    const fileList = ref([]);
    const total = ref(0);
    const loading = ref(false);
    const categoryShow = ref(false);
    const categoryTitle = ref('新增类目');
    const categoryForm = ref({
        name: ''
    });
    const categoryRules = ref({
        name: [
            { required: true, message: '请输入类目名称', trigger: 'blur' }
        ]
    });
    const buttonLoading = ref(false);

    const handleEditCategory = (item, index) => {
        categoryTitle.value = '编辑类目';
        Object.assign(categoryForm.value, item);
        cidx.value = index;
        categoryShow.value = true;
    }

    const handleDeleteCategory = (item, index) => {
        categoryList.value.splice(index,1);
        if (cidx.value === index) {
            rightName.value = '';
        } else if (cidx.value > index) {
            cidx.value--;
        }
    }

    const handleDetail = () => {
        proxy.$router.push('/file/detail')
    }

    const handleTag = () => {
        proxy.$router.push('/file/tag')
    }



    const submitForm = () => {
        proxy.$refs.categoryRef.validate((valid) => {
            if (valid) {
                buttonLoading.value = true;
                setTimeout(()=>{
                    categoryList.value.push({id:categoryList.value.length+1,name:categoryForm.value.name});
                    buttonLoading.value = false;
                    categoryShow.value = false;
                },1000)
            } else {
                return false;
            }
        });
    }

    const cancel = () => {
        proxy.$refs.categoryRef.resetFields();
        categoryShow.value = false;
    }


    const handleAddCategory = () => {
        categoryShow.value = true;
    }

    const handleSelecyCategory = (item, index) => {
        cidx.value = index;
        rightName.value = item.name;
    }

    const getList = async () => {
        let query = {...queryParams.value};
        loading.value = true;
        // const res = await listOrder(query);
        // userList.value = res.data.list;
        // total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getList();
    }
</script>

<style scoped lang="scss">
    ::v-deep .queryInput .el-input__inner{
        border: none !important;
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 !important;
        width: 200px !important;
    }
    :v-deep .el-dialog__wrapper{
        background: rgba(0,0,0,.3) !important;
    }
    ::v-deep .el-dialog__title{
        font-weight: bold !important;
    }
    ::v-deep .el-dialog{
        margin-top: 15vh !important;
    }
    ::v-deep .el-drawer__header span{
        font-weight: bold;
        font-size: 16px;
        color: #1D2129;
        line-height: 22px;
    }

    .agent_page{
        .title{
            width: 100%;
            height: 70px;
            padding: 30px 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #ECEEF5;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #111111;
            line-height: 16px;
        }

        .content{
            width: 100%;
            height: calc(100% - 71px);
            .left{
                width: 286px;
                height: 100%;
                overflow-y: auto;
                border-right: 1px solid #ECEEF5;
                padding: 37px 22px;
                box-sizing: border-box;
                .l_top{
                    span{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #111111;
                        line-height: 14px;
                        &:last-child{
                            font-size: 20px;
                            color: #33A7A7;
                            cursor: pointer;
                        }
                    }
                }
                .categories{
                    margin-top: 13px;
                    .c_item{
                        width: 100%;
                        height: 36px;
                        border-radius: 8px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #111111;
                        line-height: 36px;
                        padding-left: 40px;
                        box-sizing: border-box;
                        position: relative;
                        cursor: pointer;
                        &:hover,&.active{
                            background: #F0F2F8;
                            color: #33A7A7;
                            i{
                                color: #33A7A7 !important;
                            }
                        }
                        
                        i{
                            position: absolute;
                            right: 10px;
                            top: 12px;
                        }
                    }
                }
            }

            .right{
                width: calc(100% - 286px);
                height: 100%;
                padding: 37px 22px;
                box-sizing: border-box;

                .r_name{
                    margin-bottom: 20px;
                    .rn_mc{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #111111;
                        line-height: 16px;
                    }
                    .rn_tip{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #9CA3AF;
                        line-height: 14px;
                        margin-left: 8px;
                        &:last-child{
                            margin-left: 24px;
                        }
                        .rn_num{
                            color: #1D2129;
                            margin: 0 2px;
                        }
                    }
                }

                
                .tulr_top{
                    .tulrt_l{
                        width: 278px;
                        height: 34px;
                        border-radius: 6px;
                        border: 1px solid #E2E7F5;
                        padding: 0 16px;
                        box-sizing: border-box;
                        img{
                            width: 16px;
                            height: 16px;
                            cursor: pointer;
                        }
                    }
                    .tulrt_r{
                        .tr_btn{
                            width: 92px;
                            height: 36px;
                            border-radius: 6px;
                            border: 1px solid #C1C7D2;
                            margin-left: 20px;
                            cursor: pointer;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #111111;
                            line-height: 36px;
                            text-align: center;
                            &:last-child{
                                background: #33A7A7;
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }
        }
    }

    .tl_czs{
        .tlc_pre{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            line-height: 20px;
            padding: 12px 0;
            border-bottom: 1px solid #ECEEF5;
            cursor: pointer;
            &:first-child{
                padding-top: 0;
            }
            &:last-child{
                border: none;
                padding-bottom: 0;
            }
            &:hover{
                color: #33A7A7;
            }
        }
    }
</style>