增加文档自定义排序

This commit is contained in:
龙运模 2024-07-30 15:45:25 +08:00
parent 67f098aa07
commit 06638fe04c
4 changed files with 67 additions and 20 deletions

View File

@ -9,7 +9,7 @@
<template> <template>
<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading"> <div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
<div class="scTable-table" :style="{'height':_table_height}"> <div class="scTable-table" :class="hidePagination && hideDo?'bottomNoBorder':''" :style="{'height':_table_height}">
<el-table v-bind="$attrs" :header-cell-style="{'background': '#F5F7FA','color':'#606266'}" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.config.border" :stripe="config.config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange"> <el-table v-bind="$attrs" :header-cell-style="{'background': '#F5F7FA','color':'#606266'}" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.config.border" :stripe="config.config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
<slot></slot> <slot></slot>
<template v-for="(item, index) in userColumn" :key="index"> <template v-for="(item, index) in userColumn" :key="index">
@ -95,7 +95,8 @@
hideRefresh: { type: Boolean, default: false }, hideRefresh: { type: Boolean, default: false },
hideSetting: { type: Boolean, default: false }, hideSetting: { type: Boolean, default: false },
paginationLayout: { type: String, default: config.paginationLayout }, paginationLayout: { type: String, default: config.paginationLayout },
rowChild:{type:Boolean, default:true} rowChild:{type:Boolean, default:true},
docsSort:{type:Boolean, default:false},
}, },
watch: { watch: {
//props //props
@ -122,7 +123,7 @@
data() { data() {
return { return {
scPageSize: this.pageSize, scPageSize: this.pageSize,
isActivat: true, isAvatar: true,
emptyText: "暂无数据", emptyText: "暂无数据",
toggleIndex: 0, toggleIndex: 0,
tableData: [], tableData: [],
@ -130,6 +131,7 @@
currentPage: 1, currentPage: 1,
prop: null, prop: null,
order: null, order: null,
sort_orders:{},
loading: false, loading: false,
tableHeight:'100%', tableHeight:'100%',
tableParams: this.params, tableParams: this.params,
@ -161,12 +163,12 @@
} }
}, },
activated(){ activated(){
if(!this.isActivat){ if(!this.isAvatar){
this.$refs.scTable.doLayout() this.$refs.scTable.doLayout()
} }
}, },
deactivated(){ deactivated(){
this.isActivat = false; this.isAvatar = false;
}, },
methods: { methods: {
// //
@ -181,8 +183,14 @@
[config.request.page]: this.currentPage, [config.request.page]: this.currentPage,
[config.request.pageSize]: this.scPageSize, [config.request.pageSize]: this.scPageSize,
[config.request.prop]: this.prop, [config.request.prop]: this.prop,
[config.request.order]: this.order [config.request.order]: this.order,
}; };
if(this.docsSort){
reqData[config.request.sort_orders] = this.sort_orders;
delete reqData[config.request.prop]
delete reqData[config.request.order]
console.log(this.tableParams,344)
}
if(this.hidePagination){ if(this.hidePagination){
delete reqData[config.request.page] delete reqData[config.request.page]
delete reqData[config.request.pageSize] delete reqData[config.request.pageSize]
@ -311,8 +319,25 @@
this.prop = null this.prop = null
this.order = null this.order = null
} }
this.sort_orders = {};
this.addObjectProperty(this.sort_orders,{key:obj.prop, value:obj.order});
this.getData() this.getData()
}, },
addObjectProperty(obj, { key, value }) {
let val = value=='ascending'?'asc':value=='descending'?'desc':'';
if (!(key in obj)) {
obj[key] = val;
if(this.docsSort && key == 'name'){
obj.client_file_name = val;
}
}else{
obj[key] = val;
if(this.docsSort && key == 'name'){
obj.client_file_name = val;
}
}
},
// //
filterHandler(value, row, column){ filterHandler(value, row, column){
const property = column.property; const property = column.property;
@ -430,7 +455,8 @@
.scTable-table {height: calc(100% - 50px);} .scTable-table {height: calc(100% - 50px);}
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;} .scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
.scTable-do {white-space: nowrap;} .scTable-do {white-space: nowrap;}
.scTable:deep(.el-table__footer) .cell {font-weight: bold;} .scTable ::v-deep .el-table__footer .cell {font-weight: bold;}
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;} .scTable ::v-deep .el-table__body-wrapper .el-scrollbar__bar.is-horizontal {height: 12px;border-radius: 12px;}
.scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;} .scTable ::v-deep .el-table__body-wrapper .el-scrollbar__bar.is-vertical {width: 12px;border-radius: 12px;}
.bottomNoBorder ::v-deep .el-table__inner-wrapper:before{height: 0;}
</style> </style>

View File

@ -21,7 +21,8 @@ export default {
page: 'page', //规定当前分页字段 page: 'page', //规定当前分页字段
pageSize: 'pageSize', //规定一页条数字段 pageSize: 'pageSize', //规定一页条数字段
prop: 'prop', //规定排序字段名字段 prop: 'prop', //规定排序字段名字段
order: 'order' //规定排序规格字段 order: 'order', //规定排序规格字段
sort_orders: 'sort_orders', //规定排序字段
}, },
/** /**
* 自定义列保存处理 * 自定义列保存处理

View File

@ -61,7 +61,7 @@
</div> </div>
</el-header> </el-header>
<el-main class="nopadding"> <el-main class="nopadding">
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" @selection-change="selectionChange" :params="params" :size="size" stripe :rowChild="false"> <scTable ref="table" :apiObj="list.apiObj" :column="list.column" @selection-change="selectionChange" :params="params" :size="size" docsSort remoteSort stripe :rowChild="false">
<el-table-column type="selection" align="center" width="40"></el-table-column> <el-table-column type="selection" align="center" width="40"></el-table-column>
<sc-table-column label="序号" align="center" type="index"></sc-table-column> <sc-table-column label="序号" align="center" type="index"></sc-table-column>
<template #name="scope"> <template #name="scope">
@ -136,8 +136,6 @@ export default {
keyword: "", keyword: "",
folder_id:"", folder_id:"",
name:"", name:"",
sort_by:"name",
sort_order:"asc", // asc descasc
} }
} }
}, },

View File

@ -6,11 +6,25 @@
<div class="searchItem searchBtn"> <div class="searchItem searchBtn">
<el-button :size="size" type="primary" @click="save">保存配置</el-button> <el-button :size="size" type="primary" @click="save">保存配置</el-button>
<!-- <scExport :size="size" @exportData="exportData" @updateShow="exportChangeShow" :show="exportShow" type="8"></scExport>-->
</div> </div>
</div> </div>
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" stripe :size="size" highlightCurrentRow> <scTable ref="table" :apiObj="list.apiObj" :column="list.column" stripe :size="size" highlightCurrentRow :hideDo="true" :hidePagination="true">
<sc-table-column label="序号" align="center" type="index"></sc-table-column> <sc-table-column label="序号" align="center" type="index"></sc-table-column>
<el-table-column width="200" label="机房名称" prop="name"></el-table-column>
<el-table-column width="200" label="机房代码" prop="code"></el-table-column>
<el-table-column width="200" label="机房城市" prop="city"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="160">
<template #default="scope">
<el-dropdown>
<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete">删除配置</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</scTable> </scTable>
</el-main> </el-main>
</el-container> </el-container>
@ -28,8 +42,9 @@ export default {
}, },
params: {}, params: {},
searchList:[ searchList:[
{name:'机房名称',type:'text',code:'name', placeholder:"请输入机房名称",show:true},
{name:'机房代码',type:'text',code:'code', placeholder:"请输入机房代码",show:true}, {name:'机房代码',type:'text',code:'code', placeholder:"请输入机房代码",show:true},
{name:'机房城市',type:'text',code:'city', placeholder:"请输入机房城市",show: true}, {name:'机房城市',type:'text',code:'city', placeholder:"请输入机房城市",show:true},
], ],
} }
}, },
@ -37,11 +52,18 @@ export default {
}, },
methods:{ methods:{
getSelectData(){ getSelectData(item){
// let {data,params} = item; let {params} = item;
this.params = params;
}, },
save(){ async save() {
console.log(this.params,700) const res = await this.$API.setup.room.add.post(this.params);
if(res.code == 200){
this.$refs.table.refresh();
}
},
table_del(row){
console.log(row)
} }
} }
} }