|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container" v-loading="state.loading"> |
|
|
|
<el-card class="search-container" v-if="!props.hideSearch"> |
|
|
|
<el-form :inline="true"> |
|
|
|
<el-card class="search-container" v-if="!(props.hideSearch && props.hideSetColums)"> |
|
|
|
<el-form :inline="true" v-if="!props.hideSearch"> |
|
|
|
<el-form-item |
|
|
|
v-auth="(props.authName || props.apiName) + state.searchBtnOptions['search'].auth" |
|
|
|
v-for="(item,index) in props.searchOptions" |
|
|
@ -30,6 +30,7 @@ |
|
|
|
end-placeholder="结束时间" |
|
|
|
format="YYYY-MM-DD HH:mm:ss" |
|
|
|
value-format="YYYY-MM-DD HH:mm:ss" |
|
|
|
style="width:370px" |
|
|
|
/> |
|
|
|
<!-- 选择框 --> |
|
|
|
<el-select |
|
|
@ -49,25 +50,56 @@ |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button |
|
|
|
v-for="(btn,btn_key) in props.searchButtons" |
|
|
|
:key="btn_key" |
|
|
|
:icon="state.searchBtnOptions[btn].icon" |
|
|
|
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|
|
|
:type="state.searchBtnOptions[btn].type" |
|
|
|
@click="searchBtnHandle(btn)" |
|
|
|
>{{state.searchBtnOptions[btn].label}}</el-button> |
|
|
|
<div style="margin-right:10px" v-for="(btn,btn_key) in props.searchButtons" :key="btn_key"> |
|
|
|
<!-- 导出 --> |
|
|
|
<el-dropdown |
|
|
|
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|
|
|
:hide-on-click="false" |
|
|
|
v-if="state.searchBtnOptions[btn].auth == ':export'" |
|
|
|
> |
|
|
|
<el-button |
|
|
|
:icon="state.searchBtnOptions[btn].icon" |
|
|
|
:type="state.searchBtnOptions[btn].type"> |
|
|
|
{{state.searchBtnOptions[btn].label}} |
|
|
|
<el-icon class="el-icon--right"><arrow-down /></el-icon> |
|
|
|
</el-button> |
|
|
|
<template #dropdown> |
|
|
|
<el-dropdown-menu> |
|
|
|
<el-dropdown-item @click="exportHandle()">按条件导出【当前页】</el-dropdown-item> |
|
|
|
<el-dropdown-item divided @click="exportHandle(true)">按条件导出【全部】</el-dropdown-item> |
|
|
|
</el-dropdown-menu> |
|
|
|
</template> |
|
|
|
</el-dropdown> |
|
|
|
<!-- 其他按钮 --> |
|
|
|
<el-button |
|
|
|
v-else |
|
|
|
:icon="state.searchBtnOptions[btn].icon" |
|
|
|
v-auth="(props.authName || props.apiName) + state.searchBtnOptions[btn].auth" |
|
|
|
:type="state.searchBtnOptions[btn].type" |
|
|
|
@click="searchBtnHandle(btn)" |
|
|
|
>{{state.searchBtnOptions[btn].label}}</el-button> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<!-- 字段设置 --> |
|
|
|
<setColumsPop |
|
|
|
style="margin-left: auto;" |
|
|
|
v-if="!props.hideSetColums && state.innerTableColumns" |
|
|
|
:localTableColumnsName="state.localTableColumnsName" |
|
|
|
:initTableColums="state.initTableColums" |
|
|
|
:tableColumns="state.innerTableColumns" |
|
|
|
></setColumsPop> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<el-card class="paged-table-container"> |
|
|
|
<elTable |
|
|
|
v-if="state.innerTableColumns" |
|
|
|
:specialLocalColumnName="props.specialLocalColumnName" |
|
|
|
:columnWidth="props.columnWidth" |
|
|
|
:columnHeaderAlign="props.columnHeaderAlign" |
|
|
|
:columnAlign="props.columnAlign" |
|
|
|
:tableData="state.tableData" |
|
|
|
:tableColumns="getTableColumns()" |
|
|
|
:tableColumns="state.innerTableColumns" |
|
|
|
@sortChange="sortChange" |
|
|
|
:leftOperation="props.leftOperation" |
|
|
|
@leftOperationHadel="leftOperationHadel" |
|
|
@ -76,6 +108,8 @@ |
|
|
|
@rightOperationHadel="rightOperationHadel" |
|
|
|
:multipleTable="props.multipleTable" |
|
|
|
@tableSelectionHandle="tableSelectionHandle" |
|
|
|
:tableRowClassName="props.tableRowClassName" |
|
|
|
:tableCellClassName="props.tableCellClassName" |
|
|
|
></elTable> |
|
|
|
|
|
|
|
<elPager |
|
|
@ -109,6 +143,7 @@ |
|
|
|
import apiTableColumns from '@/utils/common/apiTableColumns' |
|
|
|
import { reactive, ref, onMounted,computed,defineExpose } from 'vue' |
|
|
|
import { |
|
|
|
getCommonPost, |
|
|
|
getCommonPaged, |
|
|
|
getCommonDeatailPaged, |
|
|
|
postCommonExport, |
|
|
@ -120,7 +155,8 @@ |
|
|
|
import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus' |
|
|
|
import elTable from '@/components/elTable/index.vue' |
|
|
|
import elPager from '@/components/elPager/index.vue' |
|
|
|
import { getPageParamsForFilter } from '@/utils/common/index' |
|
|
|
import setColumsPop from '@/components/setColumsPop/index.vue' |
|
|
|
import { getPageParamsForFilter,getLocalTableColumnsName } from '@/utils/common/index' |
|
|
|
import { downloadByData } from '@/utils/download' |
|
|
|
import importPop from '@/components/importPop/index.vue' |
|
|
|
import apiEditPop from '@/components/apiEditPop/index.vue' |
|
|
@ -141,6 +177,7 @@ |
|
|
|
export:{icon:'TopRight',auth:':export',label:'导出',type:'success'}, |
|
|
|
custominvoke:{icon:'Position',auth:':custominvoke',label:'手动开关',type:'primary'}, |
|
|
|
}, |
|
|
|
innerTableColumns:null, |
|
|
|
tableData:[], |
|
|
|
// table排序处理 |
|
|
|
sortFilter:{ |
|
|
@ -152,7 +189,9 @@ |
|
|
|
pageSize: 10, |
|
|
|
total: 1, |
|
|
|
}, |
|
|
|
tableSelectList:[] |
|
|
|
tableSelectList:[], |
|
|
|
initTableColums:[],//初始化表头,未从缓存获取之前 |
|
|
|
localTableColumnsName:null |
|
|
|
}) |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
@ -161,6 +200,21 @@ |
|
|
|
type: String, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 特殊的分页api |
|
|
|
specialPageApi:{ |
|
|
|
type: String, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 特殊的column名称(没有默认apiName) |
|
|
|
specialColumnName:{ |
|
|
|
type: String, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 特殊的存储column名称(没有默认apiName) |
|
|
|
specialLocalColumnName:{ |
|
|
|
type: String, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 特殊权限前缀(如果没有默认使用apiName) |
|
|
|
authName:{ |
|
|
|
type: String, |
|
|
@ -176,6 +230,16 @@ |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
// 行class |
|
|
|
tableRowClassName:{ |
|
|
|
type: Function, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 单元格class |
|
|
|
tableCellClassName:{ |
|
|
|
type: Function, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 多选 |
|
|
|
multipleTable:{ |
|
|
|
type: Boolean, |
|
|
@ -230,6 +294,12 @@ |
|
|
|
type: Object, |
|
|
|
default: {} |
|
|
|
}, |
|
|
|
// table查询数据filter的特殊条件,如果没有则走colum中的配置 |
|
|
|
// 示例:infoSearchFilterOptions:{ TableName:{action:'=='}}, |
|
|
|
searchFilterOptions: { |
|
|
|
type: Object, |
|
|
|
default: {} |
|
|
|
}, |
|
|
|
// 表头宽度 |
|
|
|
columnWidth:{ |
|
|
|
type: Number, |
|
|
@ -249,12 +319,31 @@ |
|
|
|
apiEditFormRules:{ |
|
|
|
type: Object, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 隐藏字段设置 |
|
|
|
hideSetColums:{ |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// 获取表头 |
|
|
|
function getTableColumns(){ |
|
|
|
return props.tableColumns || apiTableColumns[props.apiName] |
|
|
|
// 获取表头 noFilter 不需要处理字段设置(用于编辑和新增) |
|
|
|
function getTableColumns(noFilter){ |
|
|
|
if(noFilter){ |
|
|
|
return props.tableColumns || apiTableColumns[props.apiName] |
|
|
|
}else{ |
|
|
|
// 字段设置中,存入location的名字 |
|
|
|
let _localColumName = props.specialLocalColumnName || useRoute().name |
|
|
|
state.localTableColumnsName = getLocalTableColumnsName(_localColumName) |
|
|
|
let _local = JSON.parse(localStorage.getItem(state.localTableColumnsName)) |
|
|
|
// 获取列表配置 |
|
|
|
let _apiColums = props.specialColumnName || props.apiName |
|
|
|
state.initTableColums = props.tableColumns || apiTableColumns[_apiColums] |
|
|
|
let _list = (_local && _local != null && _local != undefined) ? _local : JSON.parse(JSON.stringify(state.initTableColums)) |
|
|
|
state.innerTableColumns = _list |
|
|
|
return _list |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const emits = defineEmits([ |
|
|
@ -317,7 +406,7 @@ |
|
|
|
function rightOperationHadel(btn,scope) { |
|
|
|
// 通用编辑 |
|
|
|
if(btn.name == 'apiUpdate'){ |
|
|
|
let _tableColums = getTableColumns() |
|
|
|
let _tableColums = props.tableColumns || apiTableColumns[props.apiName] |
|
|
|
let _list = _tableColums.filter(item => !item.noEdit) |
|
|
|
apiEditPopRef.value.open(_list,scope.row) |
|
|
|
} |
|
|
@ -389,22 +478,29 @@ |
|
|
|
} |
|
|
|
|
|
|
|
// 格式化页面传参 |
|
|
|
function getPageParams(){ |
|
|
|
function getPageParams(pageSize){ |
|
|
|
let _filters = [] |
|
|
|
if(props.hideSearch){ |
|
|
|
_filters = props.searchFilter |
|
|
|
}else{ |
|
|
|
function __getAction (prop,action){ |
|
|
|
if(props.searchFilterOptions && props.searchFilterOptions[prop] && props.searchFilterOptions[prop].action){ |
|
|
|
return props.searchFilterOptions[prop].action |
|
|
|
}else{ |
|
|
|
return action |
|
|
|
} |
|
|
|
} |
|
|
|
for(let i in props.searchFilter){ |
|
|
|
let _item = props.searchOptions.filter(item=>item.prop == i) |
|
|
|
let _type = (_item && _item.length > 0) ? _item[0].type : null |
|
|
|
if(props.searchFilter[i] || props.searchFilter[i] == 0){ |
|
|
|
if((props.searchFilter[i] || props.searchFilter[i] == 0) && props.searchFilter[i] != ""){ |
|
|
|
// 时间区域格式 |
|
|
|
if(_type == 'datetimerange'){ |
|
|
|
_filters.push( |
|
|
|
{ |
|
|
|
logic: "And", |
|
|
|
column: i, |
|
|
|
action: '>=', |
|
|
|
action: __getAction(i,'>='), |
|
|
|
value: props.searchFilter[i][0] |
|
|
|
} |
|
|
|
) |
|
|
@ -412,7 +508,7 @@ |
|
|
|
{ |
|
|
|
logic: "And", |
|
|
|
column: i, |
|
|
|
action: '<=', |
|
|
|
action: __getAction(i,'<='), |
|
|
|
value: props.searchFilter[i][1] |
|
|
|
} |
|
|
|
) |
|
|
@ -426,7 +522,7 @@ |
|
|
|
{ |
|
|
|
logic: "And", |
|
|
|
column: i, |
|
|
|
action: _action, |
|
|
|
action: __getAction(i,_action), |
|
|
|
value: props.searchFilter[i] |
|
|
|
} |
|
|
|
) |
|
|
@ -436,7 +532,7 @@ |
|
|
|
} |
|
|
|
let _pageParams = getPageParamsForFilter({ |
|
|
|
pageNumber:state.pager.page, |
|
|
|
pageSize:state.pager.pageSize, |
|
|
|
pageSize:pageSize || state.pager.pageSize, |
|
|
|
sortBy:state.sortFilter.sortBy, |
|
|
|
isAscending:state.sortFilter.isAscending, |
|
|
|
condition:{ |
|
|
@ -447,43 +543,69 @@ |
|
|
|
} |
|
|
|
|
|
|
|
// 获取页面数据 |
|
|
|
function getTableData(page) { |
|
|
|
function getTableData(page,callback) { |
|
|
|
state.loading = true |
|
|
|
if(!page)page = state.pager.page |
|
|
|
if(page)state.pager.page = page |
|
|
|
if(props.apiType == 'detailApi'){ |
|
|
|
state.loading = true |
|
|
|
if(!page)page = state.pager.page |
|
|
|
if(page)state.pager.page = page |
|
|
|
getCommonDeatailPaged(props.apiName,getPageParams()) |
|
|
|
.then((resp) => { |
|
|
|
state.tableData = resp.data.data |
|
|
|
state.pager.total = resp.data.totalCount |
|
|
|
if(callback)callback(resp) |
|
|
|
}) |
|
|
|
.catch(err=>{ElMessage.error('数据获取失败!')}) |
|
|
|
.finally(() => (state.loading = false)) |
|
|
|
}else{ |
|
|
|
state.loading = true |
|
|
|
if(!page)page = state.pager.page |
|
|
|
if(page)state.pager.page = page |
|
|
|
}else if(props.specialPageApi){ |
|
|
|
getCommonPost(props.specialPageApi,getPageParams()) |
|
|
|
.then((resp) => { |
|
|
|
state.tableData = resp.data.data |
|
|
|
state.pager.total = resp.data.totalCount |
|
|
|
if(callback)callback(resp) |
|
|
|
}) |
|
|
|
.catch(err=>{ElMessage.error('数据获取失败!')}) |
|
|
|
.finally(() => (state.loading = false)) |
|
|
|
} |
|
|
|
else{ |
|
|
|
getCommonPaged(props.apiName,getPageParams()) |
|
|
|
.then((resp) => { |
|
|
|
state.tableData = resp.data.data |
|
|
|
state.pager.total = resp.data.totalCount |
|
|
|
if(callback)callback(resp) |
|
|
|
}) |
|
|
|
.catch(err=>{ElMessage.error('数据获取失败!')}) |
|
|
|
.finally(() => (state.loading = false)) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 导出 |
|
|
|
function exportHandle(isAll){ |
|
|
|
state.loading = true |
|
|
|
//同步数据查询 |
|
|
|
getTableData(1,(res=>{ |
|
|
|
let _params = getPageParams() |
|
|
|
if(isAll){_params = getPageParams(res.data.totalCount)} |
|
|
|
postCommonExport(props.apiName,_params) |
|
|
|
.then((res) => { |
|
|
|
let _str = isAll ? '全部' : '当页' |
|
|
|
downloadByData(res.data,route.meta.title+`_按条件导出${_str}.xlsx`) |
|
|
|
}) |
|
|
|
.catch(err=>{ElMessage.error('操作失败!')}) |
|
|
|
.finally(() => (state.loading = false)) |
|
|
|
})) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const importPopRef = ref() |
|
|
|
// 按钮功能 |
|
|
|
function searchBtnHandle(btn){ |
|
|
|
console.log(btn) |
|
|
|
// 查询 |
|
|
|
if(btn == 'search'){ |
|
|
|
getTableData(1) |
|
|
|
} |
|
|
|
// 新增 |
|
|
|
else if (btn == 'create'){ |
|
|
|
let _tableColums = getTableColumns() |
|
|
|
let _tableColums = props.tableColumns || apiTableColumns[props.apiName] |
|
|
|
let _list = _tableColums.filter(item => !item.noEdit) |
|
|
|
apiEditPopRef.value.open(_list) |
|
|
|
} |
|
|
@ -491,17 +613,10 @@ |
|
|
|
else if (btn == 'import'){ |
|
|
|
importPopRef.value.open() |
|
|
|
} |
|
|
|
// 导出 |
|
|
|
else if (btn == 'export'){ |
|
|
|
state.loading = true |
|
|
|
getTableData()//同步数据查询 |
|
|
|
postCommonExport(props.apiName,getPageParams()) |
|
|
|
.then((res) => { |
|
|
|
downloadByData(res.data,route.meta.title+'.xlsx') |
|
|
|
}) |
|
|
|
.catch(err=>{ElMessage.error('操作失败!')}) |
|
|
|
.finally(() => (state.loading = false)) |
|
|
|
} |
|
|
|
// 导出(按条件导出当前页) |
|
|
|
// else if (btn == 'export'){ |
|
|
|
// exportHandle() |
|
|
|
// } |
|
|
|
// 手动开关 |
|
|
|
else if (btn == 'custominvoke'){ |
|
|
|
ElMessageBox.confirm('是否确定操作手动开关?', '提示', { |
|
|
@ -514,7 +629,7 @@ |
|
|
|
taskName:apiServeNames[props.apiName].taskName, |
|
|
|
client:'Chery' |
|
|
|
} |
|
|
|
getCommonCustominvoke(props.apiName,_data) |
|
|
|
getCommonCustominvoke(_data) |
|
|
|
.then((res) => { |
|
|
|
ElMessage.success('操作成功!') |
|
|
|
getTableData(1)//同步数据查询 |
|
|
@ -522,25 +637,6 @@ |
|
|
|
.finally(() => (state.loading = false)) |
|
|
|
}) |
|
|
|
} |
|
|
|
// todo:手动传出(多选) |
|
|
|
else if (btn == 'custominvokeMany'){ |
|
|
|
console.log(state.tableSelectList) |
|
|
|
if(state.tableSelectList && state.tableSelectList.length > 0 ){ |
|
|
|
ElMessageBox.confirm('是否确定手动传出?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
// state.loading = true |
|
|
|
// deleteMenu({ ids:[id] }).then(() => { |
|
|
|
|
|
|
|
// }) |
|
|
|
// .finally(() => (state.loading = false)) |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
ElMessage.warning('未选中任何数据') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 排序 |
|
|
@ -574,6 +670,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getTableColumns() |
|
|
|
getTableData() |
|
|
|
}) |
|
|
|
|
|
|
@ -581,4 +678,13 @@ |
|
|
|
state, |
|
|
|
getTableData |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
::v-deep .search-container { |
|
|
|
.el-card__body{ |
|
|
|
display:flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |