Merge remote-tracking branch 'origin/master'

This commit is contained in:
2024-05-13 22:29:01 +08:00
2 changed files with 128 additions and 21 deletions

View File

@@ -2,16 +2,48 @@
<div class="fv-table-container"> <div class="fv-table-container">
<!-- 表格头部按钮 --> <!-- 表格头部按钮 -->
<div class="fv-table-btn" v-if="tableConfig.btns"> <div class="fv-table-btn" v-if="tableConfig.btns">
<el-button <div class="table-head-btn">
v-for="btn in tableConfig.btns" <el-button
:key="btn.key" v-for="btn in tableConfig.btns"
:type="btn.type || ''" :key="btn.key"
:color="btn.color || ''" :type="btn.type || ''"
v-perm="btn.auth || ['*:*:*']" v-perm="btn.auth || ['*:*:*']"
@click="handleClickBtns(btn.key)" @click="handleClickBtns(btn.key)"
> >
{{ btn.name }} {{ btn.name }}
</el-button> </el-button>
</div>
<!-- 列显示配置 -->
<div v-if="isSettingCol">
<el-tooltip effect="dark" content="列配置" placement="bottom">
<el-button ref="buttonRef" link>
<el-icon size="18"><Setting /></el-icon>
</el-button>
</el-tooltip>
<el-popover
placement="bottom"
:width="200"
ref="popoverRef"
:virtual-ref="buttonRef"
virtual-triggering
trigger="click">
<div class="col-setting-checkall">
<el-checkbox label="列展示" v-model="localData.allColShow" :indeterminate="localData.indeterminate" @change="changeIsShowAll"></el-checkbox>
</div>
<div class="col-setting-list">
<el-checkbox-group v-model="localData.checkGroup" @change="changeColShow">
<el-space direction="vertical" alignment="flex-start" :size="0">
<el-checkbox
v-for="item in tableConfig.columns"
:key="item.prop"
:label="item.label"
:value="item.prop"
/>
</el-space>
</el-checkbox-group>
</div>
</el-popover>
</div>
</div> </div>
<!-- 表格部分 --> <!-- 表格部分 -->
<div class="fv-table"> <div class="fv-table">
@@ -31,7 +63,7 @@
ref="tableInstance" ref="tableInstance"
> >
<template #default> <template #default>
<fvTableColumn v-for="column in tableConfig.columns" :key="column.prop" :columns="column"> <fvTableColumn v-for="column in localData.columns" :key="column.prop" :columns="column">
<template v-if="column?.slots?.header" #[column?.slots?.header]="params"> <template v-if="column?.slots?.header" #[column?.slots?.header]="params">
<slot :name="column?.slots?.header" v-bind="params || {}"></slot> <slot :name="column?.slots?.header" v-bind="params || {}"></slot>
</template> </template>
@@ -81,10 +113,17 @@ const props = defineProps({
pagination: { pagination: {
type: Boolean, type: Boolean,
default: true default: true
},
// 是否显示列配置
isSettingCol: {
type: Boolean,
default: true
} }
}) })
const tableInstance = ref() const tableInstance = ref()
const buttonRef = ref()
const popoverRef = ref()
const localData = reactive({ const localData = reactive({
list: [], // 表格数据 list: [], // 表格数据
@@ -93,7 +132,12 @@ const localData = reactive({
pageNum: 1 pageNum: 1
}, },
total: 0, total: 0,
loading: false loading: false,
// 列展示设置
columns: [],
allColShow: true, // 默认全部列都展示
indeterminate: false,
checkGroup: []
}) })
const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick']) const emits = defineEmits(['headBtnClick', 'selectionChange', 'rowClick', 'rowDblclick', 'getBaseQuery', 'cellClick'])
@@ -102,6 +146,52 @@ const handleClickBtns = (key) => {
emits('headBtnClick', key) emits('headBtnClick', key)
} }
const filterColumns = () => {
localData.columns = props.tableConfig.columns.map(item=>{
if(item.prop) {
return {
...item
}
}
})
}
const changeIsShowAll = (val) => {
if(val) {
filterColumns()
localData.indeterminate = false
localData.checkGroup = props.tableConfig.columns.map(item=>item.prop)
} else {
localData.columns.length = 0
localData.checkGroup.length = 0
localData.indeterminate = false
}
}
const changeColShow = (val) => {
if(val.length == props.tableConfig.columns.length) {
localData.indeterminate = false
localData.allColShow = true
} else if(val.length !== props.tableConfig.columns.length && val.length != 0) {
localData.allColShow = false
localData.indeterminate = true
} else {
localData.indeterminate = false
localData.allColShow = false
}
const template = []
props.tableConfig.columns.forEach(item=>{
val.forEach(v=>{
if(item.prop == v) {
template.push(item)
}
})
})
localData.columns = template
}
filterColumns()
const getList = async () => { const getList = async () => {
const { api, params } = props.tableConfig const { api, params } = props.tableConfig
const queryParmas = {...localData.query, ...params} const queryParmas = {...localData.query, ...params}
@@ -155,13 +245,11 @@ const handleCurrentChange = (val) => {
getList() getList()
} }
// watchEffect(()=>{ watchEffect(()=>{
// if(!props.tableConfig.api) { if(localData.allColShow) {
// localData.list = props.data localData.checkGroup = props.tableConfig.columns.map(item=>item.prop)
// }else { }
// getList() })
// }
// })
//刷新 //刷新
const refresh = ({resetPage=false}={}) => { const refresh = ({resetPage=false}={}) => {
resetPage ? localData.query.pageNum = 1 : null resetPage ? localData.query.pageNum = 1 : null
@@ -185,5 +273,21 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.col-setting-checkall {
border-bottom: 1px solid rgb(210, 210, 213);
}
.col-setting-list {
max-height: 45vh;
overflow-y: auto;
}
.table-head-btn {
display: flex;
justify-content: flex-start;
align-items: center;
}
.fv-table-btn {
display: flex;
justify-content: space-between;
align-content: center;
}
</style> </style>

View File

@@ -96,6 +96,9 @@
<!-- <i class="el-icon-question" style="margin-left: 10px; font-size: medium; color: #b0b0b1"></i>--> <!-- <i class="el-icon-question" style="margin-left: 10px; font-size: medium; color: #b0b0b1"></i>-->
<!-- </el-tooltip>--> <!-- </el-tooltip>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="是否使用矩阵审批" prop="text">
<el-switch inactive-text="不用" active-text="使用" v-model="nodeProps.matrixApproval"></el-switch>
</el-form-item>
<el-form-item label="审批期限(为 0 则不生效)" prop="timeLimit"> <el-form-item label="审批期限(为 0 则不生效)" prop="timeLimit">
<el-input style="width: 180px;" placeholder="时长" type="number" <el-input style="width: 180px;" placeholder="时长" type="number"
v-model="nodeProps.timeLimit.timeout.value"> v-model="nodeProps.timeLimit.timeout.value">
@@ -236,7 +239,7 @@ const approvalTypes = reactive([
// {name: "角色", type: "ROLE"}, // {name: "角色", type: "ROLE"},
{name: "发起人自己", type: "SELF"}, {name: "发起人自己", type: "SELF"},
// {name: "表单内联系人", type: "FORM_USER"}, // {name: "表单内联系人", type: "FORM_USER"},
{name: "矩阵审批", type: "MATRIX_APPROVAL"}, // {name: "矩阵审批", type: "MATRIX_APPROVAL"},
]) ])
const listenerOption = ref([]) const listenerOption = ref([])
const selectListen = ref({}) const selectListen = ref({})