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.
1001 lines
26 KiB
1001 lines
26 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-03 13:23:59
|
|
@ 备注: App表单列表
|
|
-->
|
|
<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,viewPageType } from '@/api/DesignForm/tableButton'
|
|
import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/DesignForm/fieldUnit'
|
|
import type { FormInstance, FormRules,ElNotification } from 'element-plus'
|
|
import { gainFormPageListCont } from '@/api/DesignForm/requestapi'
|
|
import { Picture,InfoFilled,QuestionFilled } from '@element-plus/icons-vue'
|
|
|
|
import { softDeletion,retractRunWorkFlow } from '@/api/taskapi/management'
|
|
|
|
|
|
|
|
|
|
//引入组件
|
|
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
|
|
import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue'
|
|
import TimeAxisPage from '@/components/DesignForm/app/timeAxis.vue'
|
|
|
|
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,
|
|
versionid?:string,
|
|
signCode?:string,
|
|
pickAppMenu?:any
|
|
versiontitle?:string,
|
|
viewPage?:viewPageType
|
|
}>(),
|
|
{
|
|
showPage: true,
|
|
data: () => {
|
|
return { columns: [],controlBtn:[],operateBtn:[],config:{} }
|
|
},
|
|
searchData: () => {
|
|
return []
|
|
},
|
|
config:() =>{
|
|
return {}
|
|
},
|
|
dict: () => {
|
|
return {}
|
|
},
|
|
formId:() =>{
|
|
return ""
|
|
},
|
|
versionid:() =>{
|
|
return ""
|
|
},
|
|
signCode:() =>{
|
|
return ""
|
|
},
|
|
versiontitle:() =>{
|
|
return ""
|
|
},
|
|
fixedBottomScroll: true,
|
|
autoLoad: true,
|
|
delKey: 'id',
|
|
query: () => {
|
|
return {}
|
|
},
|
|
lookPageIsShow:() => {
|
|
return false
|
|
},
|
|
viewPage: () => {
|
|
return []
|
|
}
|
|
}
|
|
)
|
|
const emits = defineEmits<{
|
|
(e: 'selectionChange', row: any): void
|
|
(e: 'btnClick', btn: any, row?: any): void // 列表上面及表格列表里添加删除按钮事件
|
|
}>()
|
|
const operState = ref<number>(1) //操作状态 1：新增；2：重新发起；3：申请修改；4：提交审批;5:普通表单修改
|
|
const idList = ref<string[]>([])
|
|
const designStore = useDesignFormStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const tableDataList = ref([]) // 表格行数据
|
|
const openTaskDrawer = ref(false) //新增数据
|
|
|
|
const state = reactive({
|
|
loading: false,
|
|
currentPage: 1,
|
|
pageSize: props.config?.pageSize || 2,
|
|
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,"----id----->",props.versionid,"-----formId---->",props.versiontitle)
|
|
if(val.key == "newAdd"){
|
|
drawerWith.value = container.value?.clientWidth
|
|
openTaskDrawer.value = true
|
|
}else{
|
|
if(idList.value.length > 0){
|
|
ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
let sendData = {
|
|
id:idList.value,
|
|
isTrue:2
|
|
}
|
|
softDeletion(sendData)
|
|
.then((data)=>{
|
|
console.log('cancel!',data)
|
|
ElNotification({
|
|
title: '温馨提示！',
|
|
message: data.mag,
|
|
type: 'success',
|
|
})
|
|
getPageData()
|
|
})
|
|
});
|
|
}else{
|
|
ElMessage.error("你还未选中要删除的项目！");
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-01 13:30:06
|
|
@ 功能: 表格选择操作
|
|
*/
|
|
const selectionChange = (row: any) => {
|
|
state.selectionChecked = row
|
|
emits('selectionChange', row)
|
|
console.log('selectionChange', row)
|
|
idList.value.length = 0
|
|
console.log('idList.value-1-->', idList.value)
|
|
if(row && row.length>0){
|
|
row.forEach((item:any) => {
|
|
console.log('item', item.masters_key)
|
|
idList.value.push(item.masters_key.toString())
|
|
})
|
|
}
|
|
console.log('idList.value--->', idList.value)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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()
|
|
|
|
}
|
|
})
|
|
watch(()=>props.formId,(val:any)=>{
|
|
getPageData()
|
|
},{
|
|
deep: true,
|
|
})
|
|
|
|
const timeAxisRef = ref(null)
|
|
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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)
|
|
|
|
|
|
switch(viewType.value){
|
|
case 2:
|
|
break;
|
|
case 3:
|
|
nextTick(()=>{
|
|
console.log("获取列表详细信息-------222---------->",timeAxisRef.value)
|
|
timeAxisRef.value.searchTimeList(sendData)
|
|
})
|
|
|
|
break;
|
|
case 4:
|
|
break;
|
|
case 5:
|
|
break;
|
|
default:
|
|
state.loading = true;
|
|
gainFormPageListCont(sendData)
|
|
.then((data)=>{
|
|
console.log("获取列表详细信息----------------->",data)
|
|
tableDataList.value = data.data.list
|
|
state.total = data.data.total
|
|
state.loading = false;
|
|
})
|
|
.finally(()=>{
|
|
state.loading = false;
|
|
})
|
|
}
|
|
}
|
|
onMounted(()=>{
|
|
getPageData()
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-02 13:59:21
|
|
@ 功能: 判断单选值
|
|
*/
|
|
const judjeRadio = (val: any, options: any[]) => {
|
|
// console.log("判断单选值",val, options)
|
|
if(options && 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) => {
|
|
let sendData = {
|
|
id:[val.masters_key],
|
|
isTrue:2
|
|
}
|
|
softDeletion(sendData)
|
|
.then((data)=>{
|
|
console.log('cancel!',data)
|
|
ElNotification({
|
|
title: '系统提示！',
|
|
message: data.mag?data.mag:"删除成功",
|
|
type: 'success',
|
|
})
|
|
getPageData()
|
|
})
|
|
}
|
|
const cancelEvent = (val:any) => {
|
|
console.log('cancel!',val)
|
|
}
|
|
const container = ref() //实例化内容容器
|
|
const drawerWith = ref(); //编辑表单时抽屉宽度
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-03 13:24:06
|
|
@ 功能: 查看详细内容
|
|
*/
|
|
const tablePageClass = ref(1)
|
|
const lookPageInfoIsShow = ref(false)
|
|
const pageInfoCont = ref<any>()
|
|
const lookPageInfo = (val:any) => {
|
|
tablePageClass.value = 4;
|
|
pageInfoCont.value = val
|
|
drawerWith.value = container.value?.clientWidth
|
|
lookPageInfoIsShow.value = true;
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-05 11:29:50
|
|
@ 功能: 编辑表单内容
|
|
*/
|
|
|
|
const editInfo = (val:any) => {
|
|
console.log('修改数据!',val)
|
|
operState.value = 5;
|
|
tablePageClass.value = 2;
|
|
pageInfoCont.value = val
|
|
drawerWith.value = container.value?.clientWidth
|
|
lookPageInfoIsShow.value = true;
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-10 15:32:55
|
|
@ 功能: 提交审批
|
|
*/
|
|
const submitApproval = (val:any) => {
|
|
operState.value = 4
|
|
tablePageClass.value = 2;
|
|
pageInfoCont.value = val
|
|
drawerWith.value = container.value?.clientWidth
|
|
lookPageInfoIsShow.value = true;
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-11 09:36:59
|
|
@ 功能: 撤回申请
|
|
*/
|
|
const withdrawApplication = (val:any) => {
|
|
console.log("撤回申请", val);
|
|
let sendInfo = {
|
|
// id: val.masters_key,
|
|
id: val.runFlowId
|
|
}
|
|
retractRunWorkFlow(sendInfo)
|
|
.then((data)=>{
|
|
ElMessage({
|
|
message: '撤回成功！',
|
|
type: 'success'
|
|
})
|
|
getPageData()
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-11 11:17:42
|
|
@ 功能: 重新提交申请
|
|
*/
|
|
const afreshSendFlow = (val:any) => {
|
|
operState.value = 2
|
|
tablePageClass.value = 2;
|
|
pageInfoCont.value = val
|
|
drawerWith.value = container.value?.clientWidth
|
|
lookPageInfoIsShow.value = true;
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-11 11:19:21
|
|
@ 功能: 申请修改数据
|
|
*/
|
|
const editFormSendFlow = (val:any) => {
|
|
operState.value = 3
|
|
tablePageClass.value = 2;
|
|
pageInfoCont.value = val
|
|
drawerWith.value = container.value?.clientWidth
|
|
lookPageInfoIsShow.value = true;
|
|
}
|
|
const viewType = ref(1)
|
|
const viewLayout = ref<any>()
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-08 09:39:52
|
|
@ 功能: 切换视图展示方式
|
|
*/
|
|
const tabsView = (val:any,types:number) => {
|
|
viewType.value = types
|
|
val.isClick = true
|
|
viewLayout.value = val
|
|
console.log("切换视图展示方式",val)
|
|
switch(types){
|
|
case 2:
|
|
props.viewPage.list.isClick = false
|
|
props.viewPage.time.isClick = false
|
|
props.viewPage.gantt.isClick = false
|
|
props.viewPage.map.isClick = false
|
|
break;
|
|
case 3:
|
|
props.viewPage.list.isClick = false
|
|
props.viewPage.date.isClick = false
|
|
props.viewPage.gantt.isClick = false
|
|
props.viewPage.map.isClick = false
|
|
getPageData()
|
|
break;
|
|
case 4:
|
|
props.viewPage.list.isClick = false
|
|
props.viewPage.date.isClick = false
|
|
props.viewPage.time.isClick = false
|
|
props.viewPage.map.isClick = false
|
|
break;
|
|
case 5:
|
|
props.viewPage.list.isClick = false
|
|
props.viewPage.date.isClick = false
|
|
props.viewPage.time.isClick = false
|
|
props.viewPage.gantt.isClick = false
|
|
break;
|
|
default:
|
|
props.viewPage.date.isClick = false
|
|
props.viewPage.time.isClick = false
|
|
props.viewPage.gantt.isClick = false
|
|
props.viewPage.map.isClick = false
|
|
break;
|
|
}
|
|
}
|
|
|
|
</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-button-group class="ml-4">
|
|
<el-tooltip
|
|
v-if="config.searchFormIsShow"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="折叠查询表单"
|
|
placement="bottom"
|
|
>
|
|
<el-button size="small" @click="config.searchIsShow=!config.searchIsShow" class="fa fa-search" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="viewPage.list.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="列表视图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-table" :color="viewPage.list.isClick?'#a0cfff':''" @click="tabsView(viewPage.list,1)" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="viewPage.date.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="日历视图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-calendar" :color="viewPage.date.isClick?'#a0cfff':''" @click="tabsView(viewPage.date,2)" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="viewPage.time.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="时间轴"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-clock-o" :color="viewPage.time.isClick?'#a0cfff':''" @click="tabsView(viewPage.time,3)" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="viewPage.gantt.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="甘特图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-bar-chart" :color="viewPage.gantt.isClick?'#a0cfff':''" @click="tabsView(viewPage.gantt,4)" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="viewPage.map.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="地图视图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-map-signs" :color="viewPage.map.isClick?'#a0cfff':''" @click="tabsView(viewPage.map,5)" />
|
|
</el-tooltip>
|
|
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="viewType==1" :span="24">
|
|
<el-table
|
|
v-bind="data.tableProps"
|
|
ref="table"
|
|
:data="tableDataList"
|
|
@selection-change="selectionChange"
|
|
table-layout="fixed"
|
|
>
|
|
<template
|
|
v-for="item in columnsFilter"
|
|
:key="item.id || item.label"
|
|
>
|
|
|
|
<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>
|
|
</el-table-column>
|
|
<el-table-column v-else-if="item.fieldClass=='__control'" :prop="item.field" :label="item.label" config="" width="200" align="center" fixed="right" >
|
|
<template #default="scope">
|
|
|
|
<el-button-group>
|
|
<el-tooltip
|
|
v-if="scope.row.flowIsOpen==1&&scope.row.taskStatus==1"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="提交审批"
|
|
placement="top-end"
|
|
>
|
|
<el-button type="success" size="small" class="fa fa-send-o" @click="submitApproval(scope.row)" />
|
|
</el-tooltip>
|
|
|
|
<el-tooltip
|
|
v-if="scope.row.flowIsOpen==1&&scope.row.taskStatus==2"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="重新申请"
|
|
placement="top-end"
|
|
>
|
|
<el-button type="warning" size="small" class="fa fa-retweet" @click="afreshSendFlow(scope.row)" />
|
|
</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-popconfirm
|
|
v-if="scope.row.flowIsOpen==1&&scope.row.isRetract"
|
|
confirm-button-text="确定"
|
|
cancel-button-text="取消"
|
|
:icon="QuestionFilled"
|
|
icon-color="#F56C6C"
|
|
title="您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！"
|
|
@confirm="withdrawApplication (scope.row)"
|
|
@cancel="cancelEvent(scope.row)"
|
|
>
|
|
<template #reference>
|
|
<el-button size="small" class="fa fa-reply-all" />
|
|
</template>
|
|
</el-popconfirm>
|
|
<el-tooltip
|
|
v-if="scope.row.flowIsOpen==2"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="编辑"
|
|
placement="top-end"
|
|
>
|
|
<el-button @click="editInfo(scope.row)" type="info" size="small" class="fa fa-edit" />
|
|
</el-tooltip>
|
|
<el-popconfirm
|
|
v-if="scope.row.taskStatus==2||scope.row.taskStatus==1"
|
|
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&&scope.row.taskStatus==4"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="申请修改"
|
|
placement="top-end"
|
|
>
|
|
<el-button type="info" size="small" class="fa fa-edit" @click="editFormSendFlow(scope.row)" />
|
|
</el-tooltip>
|
|
</el-button-group>
|
|
</template>
|
|
</el-table-column>
|
|
<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-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>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col v-if="viewType==1&&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 v-if="viewType==3" :span="24">
|
|
<TimeAxisPage ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" />
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="24" style="display:none">
|
|
|
|
{{ props.data}}
|
|
</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>
|
|
<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
|
|
|
|
<TableFlow v-model:isopen="openTaskDrawer" :versionid="props.versionid" :versiontitle="props.versiontitle" :drawerwith="drawerWith" :pick-app-menu="pickAppMenu" @searchquery="getListData" />
|
|
|
|
</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;
|
|
}
|
|
.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>
|
|
|