|
|
@@ -0,0 +1,381 @@
|
|
|
+<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: #1C4ED8;
|
|
|
+ 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: #2E69EB;
|
|
|
+ i{
|
|
|
+ color: #2E69EB !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: #1C4ED8;
|
|
|
+ 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: #2E69EB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
