You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
916 lines
29 KiB
916 lines
29 KiB
<template>
|
|
<div class="app-container" v-loading="state.loading">
|
|
<!-- 查询头部 -->
|
|
<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.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"
|
|
style="width:370px"
|
|
/>
|
|
<!-- 选择框 -->
|
|
<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)"
|
|
style="margin-right: 10px"
|
|
>{{btn.label}}</el-button>
|
|
<!-- 字段设置 -->
|
|
<setColumsPop
|
|
style="margin-left: auto;"
|
|
:localTableColumnsName="state.localTableColumnsName"
|
|
:initTableColums="state.initTableColums"
|
|
:tableColumns="getTableColumns()"
|
|
v-if="!props.hideSetColums"
|
|
></setColumsPop>
|
|
</div>
|
|
</el-card>
|
|
<!-- 头部详情 -->
|
|
<el-card v-loading="state.detailLoading" class="headerInfo-container" v-if="!props.hideHeaderInfo">
|
|
<el-descriptions label-width="120" :title="`当前页【第${getIndexById()}行】数据信息`" :border="true" :column="5" 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
|
|
ref="table_Ref"
|
|
: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"
|
|
:tableRowClassName="tableRowClassName"
|
|
:showTableIndex="props.showTableIndex"
|
|
></elTable>
|
|
|
|
<!-- :tableFormRules="state.tableFormRulesData" -->
|
|
|
|
<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,
|
|
postCommonConfirmMany,
|
|
postCommonUpdateMany
|
|
} 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 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'
|
|
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:[{name:'pageSave',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:[],
|
|
//初始化表头，未从缓存获取之前
|
|
initTableColums:[],
|
|
localTableColumnsName:null,
|
|
//tabel内部表单验证
|
|
tableFormRulesData:null,
|
|
})
|
|
|
|
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
|
|
},
|
|
// 序号
|
|
showTableIndex:{
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 左侧操作列
|
|
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
|
|
},
|
|
// table内表单规则
|
|
tableFormRules:{
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 隐藏头部明细
|
|
hideHeaderInfo:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 可编辑单元格判断禁用规则，默认为readState=true为禁用，
|
|
// 如有特殊规则，则使用该方法特殊处理,当前判断方式为“=”，如后期有其他需求再进行封装
|
|
editDisabledConfig:{
|
|
type: Object,
|
|
default: [
|
|
{prop:'readState',ruleValue:true},
|
|
// {prop:'releaseEdition',ruleValue:'2024121901'},
|
|
]
|
|
},
|
|
// 隐藏字段设置
|
|
hideSetColums:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
// 获取表头
|
|
function getTableColumns(){
|
|
state.localTableColumnsName = getLocalTableColumnsName(useRoute().name)
|
|
if(props.apiType == 'detailApi'){
|
|
state.localTableColumnsName = getLocalTableColumnsName(props.apiName+'Detail')
|
|
}
|
|
let _local = JSON.parse(localStorage.getItem(state.localTableColumnsName))
|
|
state.initTableColums = props.tableColumns || apiTableColumns[props.apiName]
|
|
let _list = _local && _local != null && _local != undefined ? _local : JSON.parse(JSON.stringify(state.initTableColums))
|
|
return _list
|
|
// 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 = []
|
|
state.currentDetailId = null
|
|
state.headerInfoData = []
|
|
state.tableSelectList = []
|
|
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(_data)
|
|
.then((res) => {
|
|
ElMessage.success('操作成功！')
|
|
getTableData(1)//同步数据查询
|
|
})
|
|
.finally(() => (state.loading = false))
|
|
})
|
|
}
|
|
// 手动传出（多选）
|
|
else if (btn == 'outputMany'){
|
|
let _idEditData = checkPageEditList()
|
|
if(_idEditData && _idEditData.length > 0){
|
|
return ElMessage.warning('当前有未保存修改项，请先保存页面')
|
|
}
|
|
if(!state.tableSelectList || state.tableSelectList.length <= 0 ){
|
|
return ElMessage.warning('未选中任何数据')
|
|
}
|
|
ElMessageBox.confirm('是否确定手动传出？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
state.loading = true
|
|
postCommonConfirmMany(props.apiName,state.tableSelectList)
|
|
.then(res=>{
|
|
ElMessage.success('操作成功！')
|
|
getTableData(1)
|
|
})
|
|
.finally(()=>{state.loading = false})
|
|
})
|
|
}
|
|
}
|
|
const table_Ref = ref(null)
|
|
// 头部右侧按钮功能
|
|
function searchRightBtnHandle(btn){
|
|
// 保存页面
|
|
if(btn.name == 'pageSave'){
|
|
// table_Ref.value.tableForm_Ref.validate((valid)=>{
|
|
// if(valid){
|
|
let _idEditData = checkPageEditList()
|
|
if(!_idEditData || _idEditData.length <= 0)return ElMessage.warning('暂无数据修改')
|
|
// 判断规则 目前风险页面通用，暂时写在通用方式中，如果后期有区别，可拿到页面外处理
|
|
// 规则：反馈结果[feedbackResults]=1时，风险类型[ventureType],具体风险[ventureSpecific],应对措施[measures]必填
|
|
let _indexs = []
|
|
_idEditData.forEach(item=>{
|
|
if(item.feedbackResults == '1' && (
|
|
!item.ventureType || item.ventureType == '' ||
|
|
!item.ventureSpecific || item.ventureSpecific == '' ||
|
|
!item.measures || item.measures == ''
|
|
)){
|
|
_indexs.push(getIndexById(item.id))
|
|
}
|
|
})
|
|
if(_indexs && _indexs.length > 0){
|
|
return ElMessage.error(`修改数据中【第${_indexs}行】数据中，【反馈结果】为异常，但【风险类型】或【具体风险】或【应对措施】为空，请修改后重新提交！`)
|
|
}
|
|
ElMessageBox.confirm('是否确定提交更改？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
state.loading = true
|
|
postCommonUpdateMany(props.apiName,_idEditData)
|
|
.then(res=>{
|
|
ElMessage.success('操作成功！')
|
|
getTableData(1)
|
|
})
|
|
.finally(()=>{state.loading = false})
|
|
})
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
|
|
// 排序
|
|
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 getIndexById(id){
|
|
let _id = id || state.currentDetailId
|
|
for(let i=0;i<state.stage_tableData.length;i++){
|
|
if(state.stage_tableData[i].id == _id){
|
|
return i + 1
|
|
}
|
|
}
|
|
}
|
|
|
|
// 检查行数据是否符合禁用规则
|
|
function checkDisableByRowRule(row){
|
|
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
|
|
}
|
|
|
|
// 判断可编辑元素是否禁用
|
|
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
|
|
}
|
|
// 行条件禁用
|
|
return checkDisableByRowRule(row)
|
|
}
|
|
|
|
// table的复选框是否禁用判断
|
|
function selectableDisabled(row,index){
|
|
// 无权限禁用
|
|
let _auth = auths.hasPermission(props.apiName+':outputMany')
|
|
// 已修改禁用
|
|
let _idEditData = checkPageEditList()
|
|
// 行条件禁用(暂时与编辑页面用一个条件，如有区别再进行封装)
|
|
let checkRow = checkDisableByRowRule(row)
|
|
return _auth && (!_idEditData || _idEditData.length <= 0) && !checkRow
|
|
}
|
|
|
|
// 可编辑元素Focus事件 todo:如果加上表单验证后，需要处理表单点击
|
|
function getItemDetail(type,row,eventType) {
|
|
if(!row.id){return ElMessage.error('该数据无id')}
|
|
// 如果是相同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 = []
|
|
let _colums = apiTableColumns[props.detailColumName]
|
|
_colums.forEach(item=>{
|
|
state.headerInfoData.push({
|
|
label:item.title,
|
|
value:res.data[item.prop]
|
|
})
|
|
})
|
|
})
|
|
.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
|
|
}
|
|
}
|
|
|
|
// 行变色
|
|
function tableRowClassName(data){
|
|
if(data.row.id && (data.row.id == state.currentDetailId)){return 'current-select-tableRow'}
|
|
else{return 'normal-tableRow'}
|
|
}
|
|
|
|
// 根据apiTableColumns转义table内表单默认规则
|
|
function getTableFormRules(){
|
|
if(props.tableFormRules) {
|
|
state.tableFormRulesData = props.tableFormRules
|
|
}else{
|
|
state.tableFormRulesData = {}
|
|
apiTableColumns[props.apiName].forEach(item=>{
|
|
if(item.required){
|
|
state.tableFormRulesData[item.prop] = [{ required: true, message: '必填项', trigger: 'change' }]
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// getTableFormRules()
|
|
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:195px;
|
|
.el-empty__image{
|
|
width:90px !important
|
|
}
|
|
}
|
|
::v-deep .el-descriptions__body{
|
|
max-height: 165px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|