10 changed files with 880 additions and 74 deletions
@ -0,0 +1,490 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-29 14:21:27 |
|||
@ 备注: 自定义表单通用列表 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|||
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router' |
|||
import { useDesignFormStore } from '@/store/DesignForm/designForm' |
|||
import { attrButton,FormPageList,FormPageConfig } from '@/api/DesignForm/tableButton' |
|||
import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/DesignForm/fieldUnit' |
|||
import type { FormInstance, FormRules } from 'element-plus' |
|||
|
|||
|
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: FormPageList |
|||
searchData?: attrButton[] |
|||
config:FormPageConfig |
|||
formId?:string |
|||
beforeRequest?: (params: any, rout: any) => any |
|||
afterResponse?: (result: any) => any | string |
|||
beforeDelete?: (params: any, route: any) => any |
|||
showPage?: boolean |
|||
requestUrl?: string // 请求的api |
|||
deleteUrl?: string // 删除的api |
|||
dict?: { [key: string | number]: string | number } |
|||
fixedBottomScroll?: boolean |
|||
query?: { [key: string]: any } // 一些附加的请求参数 |
|||
autoLoad?: boolean // 初始时自动请求加载数据 |
|||
delKey?: string // 删除标识 |
|||
lookPageIsShow?:boolean |
|||
}>(), |
|||
{ |
|||
showPage: true, |
|||
data: () => { |
|||
return { columns: [],controlBtn:[],operateBtn:[],config:{} } |
|||
}, |
|||
searchData: () => { |
|||
return [] |
|||
}, |
|||
config:() =>{ |
|||
return {} |
|||
}, |
|||
dict: () => { |
|||
return {} |
|||
}, |
|||
formId:() =>{ |
|||
return "" |
|||
}, |
|||
fixedBottomScroll: true, |
|||
autoLoad: true, |
|||
delKey: 'id', |
|||
query: () => { |
|||
return {} |
|||
}, |
|||
lookPageIsShow:() => { |
|||
return false |
|||
} |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(e: 'selectionChange', row: any): void |
|||
(e: 'btnClick', btn: any, row?: any): void // 列表上面及表格列表里添加删除按钮事件 |
|||
}>() |
|||
|
|||
const designStore = useDesignFormStore() |
|||
const route = useRoute() |
|||
const router = useRouter() |
|||
const tableDataList = ref([]) // 表格行数据 |
|||
|
|||
const state = reactive({ |
|||
loading: false, |
|||
currentPage: 1, |
|||
pageSize: props.config?.pageSize || 20, |
|||
total: 0, |
|||
selectionChecked: [], |
|||
dict: {}, // 接口返回的 |
|||
searchFormDown: false, |
|||
treeValue: {}, // 侧栏树选中的值 |
|||
tableScrollMargin: 0, |
|||
columnsCheck: designStore.getColumnsCheck(route.path), |
|||
currentNodeKey: '' |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-28 16:03:12 |
|||
@ 功能: 判断类型 |
|||
*/ |
|||
const unitIsShow = (val:tableButton,unitName:string) => { |
|||
// val.pattern |
|||
switch (val.fieldClass) { |
|||
case "id": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "masters_key": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "creater": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "creater_time": //自定义表单保留字 |
|||
return timeUnit.includes(unitName); |
|||
break; |
|||
case "edit_time": //自定义表单保留字 |
|||
return timeUnit.includes(unitName); |
|||
break; |
|||
case "flow_id": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "baidumap": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "input": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "radio": //自定义表单保留字 |
|||
return choiceUnit.includes(unitName); |
|||
break; |
|||
case "switch": //自定义表单保留字 |
|||
return switchUnit.includes(unitName); |
|||
break; |
|||
case "orgCentent": //自定义表单保留字 |
|||
return orgUnit.includes(unitName); |
|||
break; |
|||
case "varchar": //自定义表单保留字 |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
case "checkbox": |
|||
return checkboxUnit.includes(unitName); |
|||
break; |
|||
default: |
|||
return inputUnit.includes(unitName); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-28 13:17:46 |
|||
@ 功能: 重置表单 |
|||
*/ |
|||
const ruleSearchForm = ref() |
|||
const resetFields = (formEl: FormInstance | undefined) => { |
|||
|
|||
// formEl.resetFields() |
|||
// console.log("formEl",formEl,formEl.resetFields()) |
|||
// if (!formEl) return |
|||
// formEl.resetFields() |
|||
if(props.searchData && props.searchData.length > 0){ |
|||
props.searchData.forEach((item:any)=>{ |
|||
item.value=""; |
|||
}) |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 11:36:07 |
|||
@ 功能: 功能按钮动作 |
|||
*/ |
|||
const setUpClick = (val:string,id:string) =>{ |
|||
console.log("功能按钮动作",val) |
|||
|
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 13:30:06 |
|||
@ 功能: 表格选择操作 |
|||
*/ |
|||
const selectionChange = (row: any) => { |
|||
state.selectionChecked = row |
|||
emits('selectionChange', row) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 13:31:37 |
|||
@ 功能: 获取表格头内容 |
|||
*/ |
|||
const columnsFilter = computed(() => { |
|||
if (!state.columnsCheck?.length) { |
|||
return props.data.columns |
|||
} else { |
|||
return props.data.columns.filter((item: any) => { |
|||
return state.columnsCheck.includes(item.prop || item.type) |
|||
}) |
|||
} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 14:14:36 |
|||
@ 功能: 翻页操作 |
|||
*/ |
|||
const handleSizeChange = (page: number) => { |
|||
console.log("翻页操作",page) |
|||
state.pageSize = page |
|||
getListData(1) |
|||
} |
|||
const handleCurrentChange = (page: number) => { |
|||
getListData(page) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 14:15:16 |
|||
@ 功能: 获取数据 |
|||
*/ |
|||
// 筛选查询列表数据 |
|||
const getListData = (page?: number) => { |
|||
if (page) { |
|||
state.currentPage = page |
|||
} |
|||
getPageData() |
|||
} |
|||
watch(()=>props.lookPageIsShow,(val:boolean)=>{ |
|||
if(val && props.formId != ""){ |
|||
getPageData() |
|||
|
|||
} |
|||
}) |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-01 15:51:32 |
|||
@ 功能: 获取数据 |
|||
*/ |
|||
const getPageData = () => { |
|||
let sendData = { |
|||
formId:props.formId, |
|||
page:state.currentPage, |
|||
pagesize:state.pageSize, |
|||
searchData:json2string(props.searchData) |
|||
} |
|||
console.log("获取列表详细信息",sendData) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div ref="container" v-loading="state.loading" class="table-list-comm"> |
|||
<el-row class="rowBox"> |
|||
<el-col :span="24"> |
|||
<el-form v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm"> |
|||
<template v-for="(item, index) in searchData" :key="index"> |
|||
<div class="group group-input"> |
|||
<el-form-item :label="item.label" class="form_cont"> |
|||
<el-input |
|||
v-model="item.value" |
|||
:placeholder="'请输入'+item.label" |
|||
clearable |
|||
v-if="unitIsShow(item,'input')" |
|||
/> |
|||
<el-date-picker |
|||
v-model="item.value" |
|||
type="datetime" |
|||
:placeholder="'请选择'+item.label" |
|||
:shortcuts="shortcuts" |
|||
v-if="unitIsShow(item,'time')" |
|||
/> |
|||
<el-select |
|||
v-model="item.value" |
|||
clearable |
|||
:placeholder="'请选择'+item.label" |
|||
v-if="unitIsShow(item,'radio')" |
|||
> |
|||
<el-option |
|||
v-for="itemOpt in item.options" |
|||
:key="itemOpt.value" |
|||
:label="itemOpt.label" |
|||
:value="itemOpt.value" |
|||
/> |
|||
</el-select> |
|||
<el-select |
|||
v-model="item.value" |
|||
clearable |
|||
:placeholder="'请选择'+item.label" |
|||
v-if="unitIsShow(item,'switch')" |
|||
> |
|||
<el-option |
|||
:key="item.activeValue" |
|||
label="是" |
|||
:value="item.activeValue" |
|||
/> |
|||
<el-option |
|||
:key="item.inactiveValue" |
|||
label="否" |
|||
:value="item.inactiveValue" |
|||
/> |
|||
</el-select> |
|||
<el-select |
|||
v-model="item.value" |
|||
multiple |
|||
clearable |
|||
:placeholder="'请选择'+item.label" |
|||
v-if="unitIsShow(item,'checkbox')" |
|||
> |
|||
<el-option |
|||
v-for="itemOpt in item.options" |
|||
:key="itemOpt.value" |
|||
:label="itemOpt.label" |
|||
:value="itemOpt.value" |
|||
/> |
|||
</el-select> |
|||
<el-select |
|||
v-model="item.value" |
|||
clearable |
|||
:placeholder="'请选择'+item.label" |
|||
v-if="unitIsShow(item,'org')" |
|||
> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
</template> |
|||
<div class="group group-btn" v-if="searchData.length"> |
|||
<el-button type="primary" @click="getPageData"><el-icon><Search /></el-icon>查询</el-button> |
|||
<el-button @click="resetFields(ruleSearchForm)"><el-icon><Refresh /></el-icon>重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="operateButArea"> |
|||
<div class="operatLeft"> |
|||
<el-text v-if="data.controlBtn.length === 0" class="mx-1 tipBox" type="info">操作按钮区域</el-text> |
|||
<el-button |
|||
v-for="item in data.controlBtn" |
|||
v-bind="item" |
|||
:key="item.type" |
|||
@click="setUpClick(item)" |
|||
> |
|||
{{ item.label }} |
|||
</el-button> |
|||
</div> |
|||
<div> |
|||
<el-tooltip |
|||
v-if="config.searchFormIsShow" |
|||
class="box-item" |
|||
effect="dark" |
|||
content="折叠查询表单" |
|||
placement="bottom" |
|||
> |
|||
<el-icon @click="config.searchIsShow=!config.searchIsShow"><Search /></el-icon> |
|||
</el-tooltip> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-table |
|||
v-bind="data.tableProps" |
|||
ref="table" |
|||
:data="tableDataList" |
|||
@selection-change="selectionChange" |
|||
> |
|||
<template |
|||
v-for="item in columnsFilter" |
|||
:key="item.prop || item.label" |
|||
> |
|||
<el-table-column v-if="['-'].includes(item.fieldClass)" v-bind="item" config="" width="60"> |
|||
<template v-if="item.help" #header="scope"> |
|||
{{ scope.column.label }} |
|||
<tooltip :content="item.help" /> |
|||
</template> |
|||
<template v-else-if="item.fieldClass === '__control'" #default="scope"> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-else v-bind="item" config=""> |
|||
<template v-if="item.help" #header="scope"> |
|||
{{ scope.column.label }} |
|||
<tooltip :content="item.help" /> |
|||
</template> |
|||
<template v-else-if="item.fieldClass === '__control'" #default="scope"> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</el-table> |
|||
</el-col> |
|||
<el-col v-if="state.total > 0" :span="24"> |
|||
<div class="pageBox"> |
|||
<el-pagination |
|||
v-model:currentPage="state.currentPage" |
|||
v-model:page-size="state.pageSize" |
|||
:page-sizes="[20, 30, 40, 50] as any" |
|||
:total="state.total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24" > |
|||
{{formId}} |
|||
{{ data.operateBtn}} |
|||
</el-col> |
|||
<el-col :span="24" style="display:none"> |
|||
<el-button-group> |
|||
<el-tooltip |
|||
|
|||
class="box-item" |
|||
effect="dark" |
|||
content="提交审批" |
|||
placement="top-end" |
|||
> |
|||
<el-button type="success" size="small" class="fa fa-send-o" /> |
|||
</el-tooltip> |
|||
|
|||
<el-tooltip |
|||
|
|||
class="box-item" |
|||
effect="dark" |
|||
content="重新申请" |
|||
placement="top-end" |
|||
> |
|||
<el-button type="warning" size="small" class="fa fa-retweet" /> |
|||
</el-tooltip> |
|||
<el-tooltip |
|||
class="box-item" |
|||
effect="dark" |
|||
content="查看详情" |
|||
placement="top-end" |
|||
> |
|||
<el-button type="primary" size="small" class="fa fa-eye" /> |
|||
</el-tooltip> |
|||
<el-tooltip |
|||
|
|||
class="box-item" |
|||
effect="dark" |
|||
content="撤回" |
|||
placement="top-end" |
|||
> |
|||
<el-button size="small" class="fa fa-reply-all" /> |
|||
</el-tooltip> |
|||
<el-tooltip |
|||
|
|||
class="box-item" |
|||
effect="dark" |
|||
content="删除" |
|||
placement="top-end" |
|||
> |
|||
<el-button type="danger" size="small" class="fa fa-trash-o" /> |
|||
</el-tooltip> |
|||
|
|||
<el-tooltip |
|||
|
|||
class="box-item" |
|||
effect="dark" |
|||
content="申请修改" |
|||
placement="top-end" |
|||
> |
|||
<el-button type="info" size="small" class="fa fa-edit" /> |
|||
</el-tooltip> |
|||
</el-button-group> |
|||
|
|||
|
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.rowBox{ |
|||
width:100%; |
|||
} |
|||
.table-list-comm{ |
|||
padding:0px 15px 15px 15px; |
|||
} |
|||
.seacherForm{ |
|||
min-height: auto; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
.pageBox{ |
|||
width:100%; |
|||
margin-top:20px; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.operateButArea{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top:15px; |
|||
.operatLeft{ |
|||
padding-bottom: 2px; |
|||
} |
|||
} |
|||
.group{ |
|||
width: auto; |
|||
margin-right: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue