zhibinlv
/
QRAPI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

web
安虹睿 4 weeks ago
parent
74325bfadc
commit
9ae26eb470
2 changed files with 177 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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>

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

@ -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({

Write Preview
Loading…
Cancel
Save