7 changed files with 909 additions and 32 deletions
@ -0,0 +1,790 @@ |
|||
<template> |
|||
<div class="app-container" v-loading="state.loading"> |
|||
<!-- 查询头部 --> |
|||
<el-card class="search-container" v-if="!props.hideSearch"> |
|||
<el-form :inline="true"> |
|||
<el-form-item |
|||
v-auth="props.apiName + state.searchBtnOptions['search'].auth" |
|||
v-for="(item,index) in props.searchOptions" |
|||
:key="index" |
|||
:label="item.label"> |
|||
<!-- 文本 --> |
|||
<el-input |
|||
v-if="item.type == 'input'" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:placeholder="item.label" |
|||
:clearable="!item.noClear" |
|||
/> |
|||
<!-- 数字 --> |
|||
<el-input-number |
|||
v-if="item.type == 'number'" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:min="item.min" |
|||
:max="item.max" |
|||
/> |
|||
<!-- 时间区域 --> |
|||
<el-date-picker |
|||
v-if="item.type == 'datetimerange'" |
|||
v-model="props.searchFilter[item.prop]" |
|||
type="datetimerange" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
/> |
|||
<!-- 选择框 --> |
|||
<el-select |
|||
v-if="item.type == 'select'" |
|||
v-model="props.searchFilter[item.prop]" |
|||
:filterable="!item.noSearch" |
|||
placeholder="请选择" |
|||
style="width: 240px" |
|||
:clearable="!item.noClear" |
|||
> |
|||
<el-option |
|||
v-for="(op,op_index) in item.options" |
|||
:key="op_index" |
|||
:label="op.label" |
|||
:value="op.value" |
|||
/> |
|||
</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="state.searchBtnOptions[btn].sAuth || props.apiName + state.searchBtnOptions[btn].auth" |
|||
:type="state.searchBtnOptions[btn].type" |
|||
@click="searchBtnHandle(btn)" |
|||
>{{state.searchBtnOptions[btn].label}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- 右侧按钮(如：保存页面) --> |
|||
<div> |
|||
<el-button |
|||
v-for="(btn,btn_key) in state.searchRightBtn" |
|||
:key="btn_key" |
|||
:icon="btn.icon" |
|||
v-auth="btn.sAuth || props.apiName + btn.auth" |
|||
:type="btn.type" |
|||
@click="searchRightBtnHandle(btn)" |
|||
>{{btn.label}}</el-button> |
|||
</div> |
|||
</el-card> |
|||
<!-- 头部详情 --> |
|||
<el-card v-loading="state.detailLoading" class="headerInfo-container" v-if="!props.hideHeaderInfo"> |
|||
<el-descriptions :border="true" :column="6" v-if="state.headerInfoData && state.headerInfoData.length > 0"> |
|||
<el-descriptions-item |
|||
v-for="(item,index) in state.headerInfoData" |
|||
:key="index" |
|||
:label="item.label"> |
|||
{{item.value}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-empty v-else description="暂无数据" class="headerInfoEmpty"/> |
|||
</el-card> |
|||
<!-- 列表 --> |
|||
<el-card class="paged-table-container"> |
|||
<elTable |
|||
:columnWidth="props.columnWidth" |
|||
:columnHeaderAlign="props.columnHeaderAlign" |
|||
:columnAlign="props.columnAlign" |
|||
:tableData="state.tableData" |
|||
:tableColumns="getTableColumns()" |
|||
@sortChange="sortChange" |
|||
:leftOperation="props.leftOperation" |
|||
@leftOperationHadel="leftOperationHadel" |
|||
:rightOperation="getRightOperation()" |
|||
@rightOperationHadel="rightOperationHadel" |
|||
:multipleTable="props.multipleTable" |
|||
@tableSelectionHandle="tableSelectionHandle" |
|||
@editItemFocusHandle="(item,scope,event)=>{getItemDetail(item.type,scope.row,'focus')}" |
|||
@editItemChangeHandle="editItemChangeHandle" |
|||
@cell-click="(row,column,cell,event)=>{getItemDetail('cell',row,'cellClick')}" |
|||
@editItemClearHandle="(item,scope)=>{getItemDetail(item.type,scope.row,'clear')}" |
|||
:getEditItemDisabled="getEditItemDisabled" |
|||
:selectableDisabled="selectableDisabled" |
|||
></elTable> |
|||
|
|||
<elPager |
|||
v-loading="state.pageLoading" |
|||
style="margin-top: 15px;float:right" |
|||
:pager="state.pager" |
|||
@size-change="pageSizeChange" |
|||
@current-change="pageCurrentChange" |
|||
></elPager> |
|||
</el-card> |
|||
|
|||
<!-- 导入弹窗 --> |
|||
<importPop |
|||
ref="importPopRef" |
|||
:apiName="props.apiName" |
|||
@success="importSuccess" |
|||
/> |
|||
|
|||
<!-- 编辑弹窗 --> |
|||
<apiEditPop |
|||
ref="apiEditPopRef" |
|||
:apiName="props.apiName" |
|||
@submitEditForm="submitEditForm" |
|||
:formRules="props.apiEditFormRules" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'ediTtablePage' }) |
|||
import store from '@/stores' |
|||
import apiTableColumns from '@/utils/common/apiTableColumns' |
|||
import { reactive, ref, onMounted,computed } from 'vue' |
|||
import { |
|||
getCommonPaged, |
|||
getCommonDeatailPaged, |
|||
postCommonExport, |
|||
postCommonCreate, |
|||
putCommonUpdate, |
|||
deleteCommonApi, |
|||
getCommonCustominvoke , |
|||
getCommonDetailById |
|||
} from '@/api/common/index' |
|||
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 { downloadByData } from '@/utils/download' |
|||
import importPop from '@/components/importPop/index.vue' |
|||
import apiEditPop from '@/components/apiEditPop/index.vue' |
|||
import { formatDate } from '@/utils/formatTime' |
|||
import apiServeNames from '@/utils/common/apiServeNames' |
|||
|
|||
import { useRoute } from 'vue-router' |
|||
|
|||
const route = useRoute() |
|||
const userStore = store.userStore() |
|||
const userInfo = userStore.state |
|||
const auths = store.permissionStore() |
|||
|
|||
const state = reactive({ |
|||
loading:false, |
|||
detailLoading:false, |
|||
pageLoading:false, |
|||
searchBtnOptions:{ |
|||
search:{icon:'Search',auth:':page',label:'查询',type:null}, |
|||
create:{icon:'Plus',auth:':create',label:'新增',type:'primary'}, |
|||
import:{icon:'BottomRight',auth:':import',label:'导入',type:'warning'}, |
|||
export:{icon:'TopRight',auth:':export',label:'导出',type:'success'}, |
|||
custominvoke:{icon:'Position',auth:':custominvoke',label:'手动开关',type:'primary'}, |
|||
outputMany:{icon:'Position',auth:':outputMany',label:'手动传出',type:'primary'}, |
|||
}, |
|||
searchRightBtn:[{icon:'Check',auth:':pageSave',label:'保存页面',type:'warning'}], |
|||
tableData:[], |
|||
// table排序处理 |
|||
sortFilter:{ |
|||
sortBy:undefined, |
|||
isAscending:undefined |
|||
}, |
|||
pager:{ |
|||
page: 1, |
|||
pageSize: 10, |
|||
total: 1, |
|||
}, |
|||
tableSelectList:[], |
|||
leaveSaveTip:'此操作将重新渲染页面，检测有数据【未保存】，操作后将【清空未保存数据】，是否确定继续？', |
|||
// 头部明细数据 |
|||
headerInfoData:[], |
|||
currentDetailId:null,//当前详情id暂存，避免重复获取 |
|||
// 暂存原始数据（用于校验是否更改） |
|||
stage_tableData:[], |
|||
// 暂存更改的行数（用于保留校验更改行数） |
|||
stage_indexs:[], |
|||
}) |
|||
|
|||
const props = defineProps({ |
|||
// api名称 |
|||
apiName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 查看明细colum名称 |
|||
detailColumName:{ |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// api类型 detailApi：走getdetail接口，不传或者pageApi：走getdatapaged接口 |
|||
apiType: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 隐藏表头搜索 |
|||
hideSearch:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 多选 |
|||
multipleTable:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 左侧操作列 |
|||
leftOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧操作列 |
|||
rightOperation:{ |
|||
type: [Object,String], |
|||
default: null |
|||
}, |
|||
// 右侧操作列，特殊自定义格式下，包含api操作 |
|||
showApiRightOperation:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 右侧通用按钮特殊字段判断隐藏规则，默认为编辑删除，readState=true不可操作， |
|||
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装 |
|||
apiRightHideConfig:{ |
|||
type: Object, |
|||
default: { |
|||
apiUpdate:{prop:'readState',ruleValue:true}, |
|||
apiDelete:{prop:'readState',ruleValue:true}, |
|||
} |
|||
}, |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 查询配置 |
|||
searchOptions: { |
|||
type: Object, |
|||
default: [] |
|||
}, |
|||
// 查询按钮 |
|||
searchButtons: { |
|||
type: Object, |
|||
default: ['search','export'] |
|||
}, |
|||
// table查询数据filter |
|||
searchFilter: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
// 表头宽度 |
|||
columnWidth:{ |
|||
type: Number, |
|||
default: 120 |
|||
}, |
|||
// 表头对齐 |
|||
columnHeaderAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表内容对齐 |
|||
columnAlign:{ |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
// 表单规则 |
|||
apiEditFormRules:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 隐藏头部明细 |
|||
hideHeaderInfo:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 可编辑单元格判断禁用规则，默认为readState=true为禁用， |
|||
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装 |
|||
editDisabledConfig:{ |
|||
type: Object, |
|||
default: [ |
|||
{prop:'readState',ruleValue:true}, |
|||
] |
|||
}, |
|||
}) |
|||
|
|||
// 获取表头 |
|||
function getTableColumns(){ |
|||
return props.tableColumns || apiTableColumns[props.apiName] |
|||
} |
|||
|
|||
const emits = defineEmits([ |
|||
'leftOperationHadel', |
|||
'rightOperationHadel', |
|||
'tableSelectionHandle' |
|||
]) |
|||
|
|||
// table多选 |
|||
function tableSelectionHandle (val){ |
|||
state.tableSelectList = val |
|||
emits('tableSelectionHandle',val) |
|||
} |
|||
|
|||
// 左侧操作列 |
|||
function leftOperationHadel(btn,scope) { |
|||
emits('leftOperationHadel',btn,scope) |
|||
} |
|||
|
|||
// 获取右侧操作列 |
|||
function getRightOperation() { |
|||
// 自定义右侧列，且不需要默认api通用操作 |
|||
if(typeof props.rightOperation == 'object' && !props.showApiRightOperation){ |
|||
return props.rightOperation |
|||
} |
|||
// 无自定义操作，或者有自定义且需要默认api操作 |
|||
else if( |
|||
(typeof props.rightOperation == 'object' && props.showApiRightOperation) |
|||
|| typeof props.rightOperation == 'string' |
|||
){ |
|||
// 格式化默认api按钮合集 |
|||
let _apiArr = props.showApiRightOperation || props.rightOperation.split(',') |
|||
let _config = { |
|||
apiUpdate:{label:'编辑',type:'warning'}, |
|||
apiDelete:{label:'删除',type:'danger'}, |
|||
} |
|||
let _btns = [] |
|||
if(_apiArr && _apiArr.length > 0){ |
|||
_apiArr.forEach(item => { |
|||
_btns.push({ |
|||
label:_config[item].label, |
|||
name:item, |
|||
link:true, |
|||
type:_config[item].type, |
|||
auth:props.apiName+':'+item, |
|||
hide:(row,scope) => {return row[props.apiRightHideConfig[item].prop] == props.apiRightHideConfig[item].ruleValue} |
|||
}) |
|||
}); |
|||
} |
|||
// 如果有自定义按钮，合并默认api按钮 |
|||
if(typeof props.rightOperation == 'object'){ |
|||
_btns = [..._btns,...props.rightOperation] |
|||
} |
|||
return _btns |
|||
} |
|||
} |
|||
|
|||
// 右侧操作列操作 |
|||
const apiEditPopRef = ref() |
|||
function rightOperationHadel(btn,scope) { |
|||
// 通用编辑 |
|||
if(btn.name == 'apiUpdate'){ |
|||
let _tableColums = getTableColumns() |
|||
let _list = _tableColums.filter(item => !item.noEdit) |
|||
apiEditPopRef.value.open(_list,scope.row) |
|||
} |
|||
// 通用删除 |
|||
if(btn.name == 'apiDelete'){ |
|||
ElMessageBox.confirm(`是否确定删除？`, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
state.loading = true |
|||
deleteCommonApi(props.apiName,scope.row.uId) |
|||
.then(res=>{ |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1); |
|||
}) |
|||
.catch(err=>{ElMessage.error('操作失败！')}) |
|||
.finally(()=>{state.loading = false}) |
|||
}) |
|||
} |
|||
emits('rightOperationHadel',btn,scope) |
|||
} |
|||
|
|||
// 编辑表单提交 |
|||
const submitEditForm = async (type,formData,formConfig) => { |
|||
apiEditPopRef.value.validate((valid) => { |
|||
if(valid){ |
|||
// 新增 |
|||
if(type == 'create'){ |
|||
if(formData.hasOwnProperty('createUser')){formData.createUser = userInfo.realName} |
|||
if(formData.hasOwnProperty('createByUser')){formData.createByUser = userInfo.realName} |
|||
if(formData.hasOwnProperty('createTime')){formData.createTime = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")} |
|||
apiEditPopRef.value.changeLoading(true) |
|||
postCommonCreate(props.apiName,formData) |
|||
.then(res=>{ |
|||
apiEditPopRef.value.close() |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1); |
|||
}) |
|||
.catch(err=>{ElMessage.error('操作失败！')}) |
|||
.finally(()=>{apiEditPopRef.value.changeLoading(false)}) |
|||
}else{ |
|||
// 修改人信息处理 |
|||
if( |
|||
(formData.hasOwnProperty('updateByUser') && formData.hasOwnProperty('updateTime')) |
|||
|| (formData.hasOwnProperty('updateUser') && formData.hasOwnProperty('updateTime')) |
|||
){ |
|||
if(formData.hasOwnProperty('updateByUser')){formData.updateByUser = userInfo.realName} |
|||
if(formData.hasOwnProperty('updateUser')){formData.updateUser = userInfo.realName} |
|||
if(formData.hasOwnProperty('updateTime')){formData.updateTime = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")} |
|||
}else{ |
|||
// 特殊不处理页面 |
|||
let _notChange=['taskconifgure'] |
|||
if(_notChange.indexOf(props.apiName) < 0){ |
|||
formData.remark= `修改信息：${userInfo.realName} ${formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")}` |
|||
} |
|||
} |
|||
apiEditPopRef.value.changeLoading(true) |
|||
putCommonUpdate(props.apiName,formData) |
|||
.then(res=>{ |
|||
apiEditPopRef.value.close() |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1); |
|||
}) |
|||
.catch(err=>{ElMessage.error('操作失败！')}) |
|||
.finally(()=>{apiEditPopRef.value.changeLoading(false)}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 格式化页面传参 |
|||
function getPageParams(){ |
|||
let _filters = [] |
|||
if(props.hideSearch){ |
|||
_filters = props.searchFilter |
|||
}else{ |
|||
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(_type == 'datetimerange'){ |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: '>=', |
|||
value: props.searchFilter[i][0] |
|||
} |
|||
) |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: '<=', |
|||
value: props.searchFilter[i][1] |
|||
} |
|||
) |
|||
}else{ |
|||
let _action = 'like' |
|||
let _EqualTypes = ['tagFilter','filter','number','select']//等于情况的类型 |
|||
if(_EqualTypes.indexOf(_type) >= 0){ |
|||
_action = '==' |
|||
} |
|||
_filters.push( |
|||
{ |
|||
logic: "And", |
|||
column: i, |
|||
action: _action, |
|||
value: props.searchFilter[i] |
|||
} |
|||
) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
let _pageParams = getPageParamsForFilter({ |
|||
pageNumber:state.pager.page, |
|||
pageSize:state.pager.pageSize, |
|||
sortBy:state.sortFilter.sortBy, |
|||
isAscending:state.sortFilter.isAscending, |
|||
condition:{ |
|||
filters:_filters |
|||
} |
|||
}) |
|||
return _pageParams |
|||
} |
|||
|
|||
// 获取页面数据 |
|||
function getTableData(page) { |
|||
state.stage_indexs = [] |
|||
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.headerInfoData = [] |
|||
state.tableData = resp.data.data |
|||
state.stage_tableData = JSON.parse(JSON.stringify(resp.data.data)) |
|||
state.pager.total = resp.data.totalCount |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
}else{ |
|||
state.loading = true |
|||
if(!page)page = state.pager.page |
|||
if(page)state.pager.page = page |
|||
getCommonPaged(props.apiName,getPageParams()) |
|||
.then((resp) => { |
|||
state.headerInfoData = [] |
|||
state.tableData = resp.data.data |
|||
state.stage_tableData = JSON.parse(JSON.stringify(resp.data.data)) |
|||
state.pager.total = resp.data.totalCount |
|||
}) |
|||
.catch(err=>{ElMessage.error('数据获取失败！')}) |
|||
.finally(() => (state.loading = false)) |
|||
} |
|||
} |
|||
|
|||
const importPopRef = ref() |
|||
// 头部查询按钮功能 |
|||
function searchBtnHandle(btn){ |
|||
// 查询 |
|||
if(btn == 'search'){ |
|||
beforClearEdit().then(() => { |
|||
getTableData() |
|||
}) |
|||
} |
|||
// 新增 |
|||
else if (btn == 'create'){ |
|||
beforClearEdit().then(() => { |
|||
let _tableColums = getTableColumns() |
|||
let _list = _tableColums.filter(item => !item.noEdit) |
|||
apiEditPopRef.value.open(_list) |
|||
}) |
|||
} |
|||
// 导入 |
|||
else if (btn == 'import'){ |
|||
beforClearEdit().then(() => { |
|||
importPopRef.value.open() |
|||
}) |
|||
} |
|||
// 导出 |
|||
else if (btn == 'export'){ |
|||
beforClearEdit().then(() => { |
|||
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 == 'custominvoke'){ |
|||
beforClearEdit().then(() => { |
|||
state.loading = true |
|||
let _data = { |
|||
taskName:apiServeNames[props.apiName].taskName, |
|||
client:'Chery' |
|||
} |
|||
getCommonCustominvoke(props.apiName,_data) |
|||
.then((res) => { |
|||
ElMessage.success('操作成功！') |
|||
getTableData(1)//同步数据查询 |
|||
}) |
|||
.finally(() => (state.loading = false)) |
|||
}) |
|||
} |
|||
// 手动传出（多选） |
|||
else if (btn == 'outputMany'){ |
|||
if(!state.tableSelectList || state.tableSelectList.length <= 0 ){ |
|||
return ElMessage.warning('未选中任何数据') |
|||
} |
|||
// todo:提交接口 |
|||
console.log(state.tableSelectList) |
|||
} |
|||
} |
|||
// 头部右侧按钮功能 |
|||
function searchRightBtnHandle(btn){ |
|||
let _idEditData = checkPageEditList() |
|||
if(!_idEditData || _idEditData.length <= 0)return ElMessage.warning('暂无数据修改') |
|||
ElMessageBox.confirm('是否确定提交更改？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
// todo:提交接口 |
|||
console.log(613,_idEditData) |
|||
}) |
|||
} |
|||
|
|||
// 排序 |
|||
function sortChange(data) { |
|||
beforClearEdit().then(() => { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
state.sortFilter.sortBy = undefined; |
|||
state.sortFilter.isAscending = undefined; |
|||
getTableData(1); |
|||
return; |
|||
} |
|||
state.sortFilter.sortBy = prop; |
|||
state.sortFilter.isAscending = (order == "ascending"); |
|||
getTableData(1); |
|||
}) |
|||
} |
|||
|
|||
// 导入成功之后 |
|||
function importSuccess(response,importDate){ |
|||
getTableData() |
|||
} |
|||
|
|||
// size-change |
|||
function pageSizeChange(pageSize,returnSize){ |
|||
state.pageLoading=true |
|||
let _oldSize = state.pager.pageSize |
|||
state.pager.pageSize = pageSize |
|||
beforClearEdit() |
|||
.then(res => { |
|||
getTableData(1) |
|||
state.pageLoading=false |
|||
}) |
|||
.catch(res=>{ |
|||
state.pager.pageSize = _oldSize |
|||
state.pageLoading=false |
|||
}) |
|||
} |
|||
|
|||
// current-change |
|||
function pageCurrentChange(page){ |
|||
beforClearEdit().then(res => { |
|||
getTableData(page) |
|||
}) |
|||
} |
|||
|
|||
// 获取头部详情字段名 |
|||
function getDeatilLableByProp(prop){ |
|||
let _colums = apiTableColumns[props.detailColumName] |
|||
let _item = _colums.filter(item=>item.prop == prop) |
|||
let _name = null |
|||
if(_item && _item.length > 0){ |
|||
_name = _item[0].title |
|||
} |
|||
return _name |
|||
} |
|||
|
|||
// 判断可编辑元素是否禁用 |
|||
function getEditItemDisabled(item,row,index){ |
|||
let _auth = auths.hasPermission(props.apiName+':pageSave') |
|||
if(item.disabled || !_auth){ |
|||
return true |
|||
} |
|||
if(state.tableSelectList && state.tableSelectList.length > 0){ |
|||
return true |
|||
} |
|||
let hasDisable = false |
|||
for(let i = 0;i<props.editDisabledConfig.length;i++){ |
|||
if(row[props.editDisabledConfig[i].prop] == props.editDisabledConfig[i].ruleValue){ |
|||
hasDisable = true |
|||
break |
|||
} |
|||
} |
|||
return hasDisable |
|||
} |
|||
|
|||
// table的复选框是否禁用判断 |
|||
function selectableDisabled(row,index){ |
|||
let _auth = auths.hasPermission(props.apiName+':outputMany') |
|||
if(!_auth)return false |
|||
let _idEditData = checkPageEditList() |
|||
return !_idEditData || _idEditData.length <= 0 |
|||
} |
|||
|
|||
// 可编辑元素Focus事件 |
|||
function getItemDetail(type,row,eventType) { |
|||
state.tableSelectList = [] |
|||
// 如果是相同id，避免重复：阻止接口 |
|||
if(row.id == state.currentDetailId){return} |
|||
let _focuseExt = ['input','numberInput'] |
|||
// 如果是focus事件，避免重复：阻止_focuseExt以内的触发事件，走cell事件 |
|||
if(eventType == 'focus' && _focuseExt.indexOf(type) >= 0){return} |
|||
console.log(type,row,eventType) |
|||
console.log('------------') |
|||
state.currentDetailId = row.id |
|||
state.detailLoading = true |
|||
getCommonDetailById(props.apiName,row.id) |
|||
.then((res) => { |
|||
state.headerInfoData = [] |
|||
for(let item in res.data){ |
|||
let _label = getDeatilLableByProp(item) |
|||
if(_label){ |
|||
state.headerInfoData.push({ |
|||
label:_label, |
|||
value:res.data[item] |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
.finally(() => (state.detailLoading = false)) |
|||
|
|||
} |
|||
|
|||
// 可编辑元素change事件 |
|||
function editItemChangeHandle(item,scope,data) { |
|||
if(state.stage_indexs.indexOf(scope.$index) < 0){ |
|||
state.stage_indexs.push(scope.$index) |
|||
} |
|||
} |
|||
|
|||
// 其他操作清空保存前提示 |
|||
function beforClearEdit(){ |
|||
return new Promise((resolve, reject) => { |
|||
let _idEditData = checkPageEditList() |
|||
if(!_idEditData || _idEditData.length <= 0){ |
|||
resolve() |
|||
}else{ |
|||
ElMessageBox.confirm(state.leaveSaveTip, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
resolve() |
|||
}).catch(()=>{ |
|||
reject() |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 处理页面更改数据 |
|||
function checkPageEditList(){ |
|||
if(!state.stage_indexs || state.stage_indexs.length<=0){ |
|||
return false |
|||
} |
|||
else{ |
|||
let _changeArr = [] |
|||
state.stage_indexs.forEach(item=>{ |
|||
if(JSON.stringify(state.stage_tableData[item]) != JSON.stringify(state.tableData[item])){ |
|||
_changeArr.push(state.tableData[item]) |
|||
} |
|||
}) |
|||
return _changeArr |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getTableData() |
|||
}) |
|||
|
|||
</script> |
|||
<style scoped lang="scss"> |
|||
::v-deep .search-container{ |
|||
.el-card__body{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
::v-deep .headerInfo-container{ |
|||
margin-top:10px; |
|||
.el-card__body{ |
|||
padding-bottom: 10px !important; |
|||
min-height:66px |
|||
} |
|||
} |
|||
::v-deep .headerInfoEmpty{ |
|||
height:145px; |
|||
.el-empty__image{ |
|||
width:90px !important |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue