Browse Source

【EDI前端】菜单修复+部分暂存

web
安虹睿 3 weeks ago
parent
commit
9ae26eb470
  1. 236
      Web/src/components/tablePage/index.vue
  2. 16
      Web/src/views/system/menu/components/editDialog.vue

236
Web/src/components/tablePage/index.vue

@ -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
},
// columnapiName
specialColumnName:{
type: String,
default: null
},
// columnapiName
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: {}
},
// tablefiltercolum
// 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>

16
Web/src/views/system/menu/components/editDialog.vue

@ -168,7 +168,6 @@ const state = reactive({
iconTabActiveName: 'ele',
menuTreeList: [],
form: {},
// parentIds: [],
loading:false,
})
@ -233,13 +232,10 @@ function openDialog(id) {
if (id) {
getMenu(id).then(res => {
state.form = res.data
// if (res.data.parentId && res.data.parentId !== '0') {
// state.parentIds = res.data.parentId
// }
setFormRules()
})
.finally(() => {
state.loading = false;
state.loading = false
state.isShowDialog = true
})
} else {
@ -247,7 +243,7 @@ function openDialog(id) {
state.form.sort = res.data
})
.finally(() => {
state.loading = false;
state.loading = false
state.isShowDialog = true
})
}
@ -277,7 +273,6 @@ function resetForm() {
status: 1,
openNewWindow: false,
}
// state.parentIds=[]
setFormRules()
setTimeout(() => {
elFormRef.value?.resetFields()
@ -301,12 +296,13 @@ function setFormRules(){
function submit() {
// state.form.parentId = (state.parentIds && state.parentIds.length > 0) ? state.parentIds[state.parentIds.length - 1] : null
elFormRef.value.validate((valid) => {
if (valid) {
let _data = JSON.parse(JSON.stringify(state.form))
_data.parentId = (_data.parentId && typeof _data.parentId == 'string') ? _data.parentId : _data.parentId[_data.parentId.length - 1]
state.loading=true
if (state.form.id) {
updateMenu(state.form)
updateMenu(_data)
.then(()=>{
emits('onClose')
ElMessage({
@ -318,7 +314,7 @@ function submit() {
})
.finally(() => (state.loading = false))
} else {
addMenu(state.form)
addMenu(_data)
.then(() => {
emits('onClose')
ElMessage({

Loading…
Cancel
Save