|
|
|
@ -10,8 +10,8 @@ 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' |
|
|
|
|
|
|
|
|
|
|
|
import { gainFormPageListCont } from '@/api/DesignForm/requestapi' |
|
|
|
import { Picture,InfoFilled,QuestionFilled } from '@element-plus/icons-vue' |
|
|
|
|
|
|
|
const props = withDefaults( |
|
|
|
defineProps<{ |
|
|
|
@ -73,7 +73,7 @@ const tableDataList = ref([]) // 表格行数据 |
|
|
|
const state = reactive({ |
|
|
|
loading: false, |
|
|
|
currentPage: 1, |
|
|
|
pageSize: props.config?.pageSize || 20, |
|
|
|
pageSize: props.config?.pageSize || 2, |
|
|
|
total: 0, |
|
|
|
selectionChecked: [], |
|
|
|
dict: {}, // 接口返回的 |
|
|
|
@ -224,6 +224,7 @@ watch(()=>props.lookPageIsShow,(val:boolean)=>{ |
|
|
|
@ 功能: 获取数据 |
|
|
|
*/ |
|
|
|
const getPageData = () => { |
|
|
|
state.loading = true; |
|
|
|
let sendData = { |
|
|
|
formId:props.formId, |
|
|
|
page:state.currentPage, |
|
|
|
@ -231,7 +232,63 @@ const getPageData = () => { |
|
|
|
searchData:json2string(props.searchData) |
|
|
|
} |
|
|
|
console.log("获取列表详细信息",sendData) |
|
|
|
gainFormPageListCont(sendData) |
|
|
|
.then((data)=>{ |
|
|
|
console.log("获取列表详细信息----------------->",data) |
|
|
|
tableDataList.value = data.data.list |
|
|
|
state.total = data.data.total |
|
|
|
state.loading = false; |
|
|
|
}) |
|
|
|
} |
|
|
|
onMounted(()=>{ |
|
|
|
getPageData() |
|
|
|
}) |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-02 13:59:21 |
|
|
|
@ 功能: 判断单选值 |
|
|
|
*/ |
|
|
|
const judjeRadio = (val: any, options: any[]) => { |
|
|
|
// console.log("判断单选值",val, options) |
|
|
|
if(options.length > 0){ |
|
|
|
options.forEach((item)=>{ |
|
|
|
if(item.value == val){ |
|
|
|
console.log("判断单选值",val, item.value,item.label) |
|
|
|
val = item.label |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
if(val == 0 || val == "0"){ |
|
|
|
val = "" |
|
|
|
} |
|
|
|
return val |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-02 14:49:40 |
|
|
|
@ 功能: 判断开关类型 |
|
|
|
*/ |
|
|
|
const judjeSwitch = (val:any,yesVal:any) => { |
|
|
|
if(val == yesVal) return true; |
|
|
|
return false; |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-03 13:13:56 |
|
|
|
@ 功能: 列表信息删除安妮 |
|
|
|
*/ |
|
|
|
const confirmEvent = (val:any) => { |
|
|
|
console.log('confirm!',val) |
|
|
|
} |
|
|
|
const cancelEvent = (val:any) => { |
|
|
|
console.log('cancel!',val) |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-03 13:24:06 |
|
|
|
@ 功能: 查看详细内容 |
|
|
|
*/ |
|
|
|
const lookPageInfo = (val:any) => {} |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div ref="container" v-loading="state.loading" class="table-list-comm"> |
|
|
|
@ -347,26 +404,127 @@ const getPageData = () => { |
|
|
|
ref="table" |
|
|
|
:data="tableDataList" |
|
|
|
@selection-change="selectionChange" |
|
|
|
table-layout="fixed" |
|
|
|
> |
|
|
|
<template |
|
|
|
v-for="item in columnsFilter" |
|
|
|
:key="item.prop || item.label" |
|
|
|
:key="item.id || item.label" |
|
|
|
> |
|
|
|
<el-table-column v-if="['-'].includes(item.fieldClass)" v-bind="item" config="" width="60"> |
|
|
|
|
|
|
|
<el-table-column v-if="['-'].includes(item.fieldClass)" :type="item.type" :prop="item.field" :label="item.label" 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"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-else-if="item.fieldClass=='__control'" :prop="item.field" :label="item.label" config=""> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button-group> |
|
|
|
<el-tooltip |
|
|
|
v-if="scope.row.flowIsOpen==1" |
|
|
|
class="box-item" |
|
|
|
effect="dark" |
|
|
|
content="提交审批" |
|
|
|
placement="top-end" |
|
|
|
> |
|
|
|
<el-button type="success" size="small" class="fa fa-send-o" /> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
<el-tooltip |
|
|
|
v-if="scope.row.flowIsOpen==1" |
|
|
|
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 @click="lookPageInfo(scope.row)" type="primary" size="small" class="fa fa-eye" /> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip |
|
|
|
v-if="scope.row.flowIsOpen==1" |
|
|
|
class="box-item" |
|
|
|
effect="dark" |
|
|
|
content="撤回" |
|
|
|
placement="top-end" |
|
|
|
> |
|
|
|
<el-button size="small" class="fa fa-reply-all" /> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
<el-popconfirm |
|
|
|
confirm-button-text="确定" |
|
|
|
cancel-button-text="取消" |
|
|
|
:icon="QuestionFilled" |
|
|
|
icon-color="#F56C6C" |
|
|
|
title="您确定要删除此条记录?一经删除！数据将不可恢复！" |
|
|
|
@confirm="confirmEvent(scope.row)" |
|
|
|
@cancel="cancelEvent(scope.row)" |
|
|
|
> |
|
|
|
<template #reference> |
|
|
|
<el-button type="danger" size="small" class="fa fa-trash-o" /> |
|
|
|
</template> |
|
|
|
</el-popconfirm> |
|
|
|
|
|
|
|
<el-tooltip |
|
|
|
v-if="scope.row.flowIsOpen==1" |
|
|
|
class="box-item" |
|
|
|
effect="dark" |
|
|
|
content="申请修改" |
|
|
|
placement="top-end" |
|
|
|
> |
|
|
|
<el-button type="info" size="small" class="fa fa-edit" /> |
|
|
|
</el-tooltip> |
|
|
|
</el-button-group> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-else v-bind="item" config=""> |
|
|
|
<el-table-column v-else :prop="item.field" :label="item.label" 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 v-if="item.fieldClass=='radio'" #default="scope"> |
|
|
|
<!-- {{scope.row[scope.column.property]}}{{item}} --> |
|
|
|
{{ judjeRadio(scope.row[scope.column.property],item.options) }} |
|
|
|
</template> |
|
|
|
<template v-if="item.fieldClass=='upload'" #default="scope" > |
|
|
|
<div class="demo-image__error"> |
|
|
|
<el-image |
|
|
|
style="width: 50px; height: 50px" |
|
|
|
:src="scope.row[scope.column.property]" |
|
|
|
> |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<el-icon><Picture /></el-icon> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-if="item.fieldClass=='switch'" #default="scope"> |
|
|
|
|
|
|
|
<el-tag |
|
|
|
v-if="judjeSwitch(scope.row[scope.column.property],item.activeValue)" |
|
|
|
type="success" |
|
|
|
effect="light" |
|
|
|
> |
|
|
|
启用 |
|
|
|
</el-tag> |
|
|
|
<el-tag |
|
|
|
v-else |
|
|
|
type="danger" |
|
|
|
effect="light" |
|
|
|
> |
|
|
|
禁用 |
|
|
|
</el-tag> |
|
|
|
</template> |
|
|
|
<template v-if="item.fieldClass=='baidumap'" #default="scope"> |
|
|
|
{{scope.row[scope.column.property]}} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
@ -385,9 +543,9 @@ const getPageData = () => { |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" > |
|
|
|
{{formId}} |
|
|
|
{{ data.operateBtn}} |
|
|
|
<el-col :span="24" style="display:none"> |
|
|
|
|
|
|
|
{{ searchData}} |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="display:none"> |
|
|
|
<el-button-group> |
|
|
|
@ -487,4 +645,40 @@ const getPageData = () => { |
|
|
|
width: auto; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.demo-image__error .block { |
|
|
|
padding: 0px 0; |
|
|
|
text-align: center; |
|
|
|
border-right: solid 1px var(--el-border-color); |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
vertical-align: top; |
|
|
|
} |
|
|
|
.demo-image__error .demonstration { |
|
|
|
display: block; |
|
|
|
color: var(--el-text-color-secondary); |
|
|
|
font-size: 14px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
.demo-image__error .el-image { |
|
|
|
padding: 0 5px; |
|
|
|
max-width: 300px; |
|
|
|
max-height: 200px; |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
.demo-image__error .image-slot { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: var(--el-fill-color-light); |
|
|
|
color: var(--el-text-color-secondary); |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
.demo-image__error .image-slot .el-icon { |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
