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