42 changed files with 6382 additions and 4085 deletions
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,6 @@ |
|||
export const inputUnit = ["input","varchar"] |
|||
export const timeUnit = ["time"] |
|||
export const orgUnit = ["org"] |
|||
export const choiceUnit = ["radio"] |
|||
export const switchUnit = ["switch"] |
|||
export const checkboxUnit = ["checkbox"] |
|||
@ -0,0 +1,210 @@ |
|||
export interface tableButton { |
|||
id?: string; |
|||
name?: string; |
|||
field?: string; |
|||
type?: string; |
|||
attribute:string; |
|||
pattern?: string; |
|||
fieldClass?: string; |
|||
activeValue?: string; |
|||
inactiveValue?: string; |
|||
options?: optionsInfo[]; |
|||
config?:any; |
|||
label?: string; |
|||
} |
|||
export interface optionsInfo { |
|||
label: string; |
|||
value: string; |
|||
} |
|||
export interface attrButton { |
|||
label: string; |
|||
key: string; |
|||
type: string; |
|||
size: string; |
|||
icon: string; |
|||
} |
|||
//表头操作
|
|||
export const tableButtonList :attrButton[] = [ |
|||
{ |
|||
label: "新增", |
|||
key:"newAdd", |
|||
type:"primary", |
|||
size: "small", |
|||
icon: "editPen" |
|||
}, |
|||
{ |
|||
label: "批量删除", |
|||
key: "del", |
|||
type: "danger", |
|||
size: "small", |
|||
icon: "delete" |
|||
} |
|||
] |
|||
//记录操作
|
|||
export const tableLogButtonList :attrButton[] = [ |
|||
{ |
|||
label: "查看", |
|||
key: "look", |
|||
type: "success", |
|||
size: "small", |
|||
icon: "view" |
|||
}, |
|||
{ |
|||
label: "编辑", |
|||
key: "edit", |
|||
type: "warning", |
|||
size: "small", |
|||
icon: "delete" |
|||
}, |
|||
{ |
|||
label: "删除", |
|||
key: "del", |
|||
type: "danger", |
|||
size: "small", |
|||
icon: "delete" |
|||
} |
|||
]; |
|||
//记录操作
|
|||
export const tableAttrLogButtonList :tableButton[] = [ |
|||
{ |
|||
// label: "多选",
|
|||
// attribute:"checkbox"
|
|||
|
|||
id: "checkbox", |
|||
label: "多选", |
|||
field: "checkbox", |
|||
type: "selection", |
|||
attribute:"-", |
|||
pattern: "bigint", |
|||
fieldClass: "-", |
|||
activeValue: "", |
|||
inactiveValue: "", |
|||
options: [] |
|||
}, |
|||
{ |
|||
|
|||
id: "serialNumber", |
|||
label: "序号", |
|||
field: "index", |
|||
type: "index", |
|||
attribute:"-", |
|||
pattern: "bigint", |
|||
fieldClass: "-", |
|||
activeValue: "", |
|||
inactiveValue: "", |
|||
options: [] |
|||
}, |
|||
{ |
|||
id: "operate", |
|||
label: "操作", |
|||
field: "operate", |
|||
type: "", |
|||
attribute:"-", |
|||
pattern: "bigint", |
|||
fieldClass: "__control", |
|||
activeValue: "", |
|||
inactiveValue: "", |
|||
options: [] |
|||
} |
|||
]; |
|||
//新增和编辑页面展开方式
|
|||
export const diaOrDrawer = [ |
|||
{ |
|||
label:"抽屉", |
|||
value:"drawer" |
|||
}, |
|||
{ |
|||
label:"弹窗", |
|||
value:"dialog" |
|||
} |
|||
] |
|||
|
|||
//表单结构
|
|||
export interface FormPageList { |
|||
columns: tableButton[], |
|||
config: any, |
|||
controlBtn:tableButton[], |
|||
operateBtn:tableButton[] |
|||
} |
|||
export interface FormPageConfig{ |
|||
pageSize:number, |
|||
searchIsShow:boolean, |
|||
searchFormIsShow:boolean, |
|||
openPageMode:string |
|||
} |
|||
|
|||
|
|||
export const submitButtonEs = { |
|||
type: "div", |
|||
control:{}, |
|||
config:{ |
|||
textAlign: "center", |
|||
span: "" |
|||
}, |
|||
list: [ |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "保存", |
|||
type: "primary", |
|||
key: "submit" |
|||
}, |
|||
config:{ |
|||
textAlign: "center" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
export const cancelButton = { |
|||
type: "div", |
|||
control:{}, |
|||
config:{ |
|||
textAlign: "center", |
|||
span: "" |
|||
}, |
|||
list: [ |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "返回", |
|||
type: "danger", |
|||
key: "cancel" |
|||
}, |
|||
config:{ |
|||
textAlign: "center" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
export const submitAndCancelButton = { |
|||
type: "div", |
|||
control:{}, |
|||
config:{ |
|||
span: 24, |
|||
textAlign: "center" |
|||
}, |
|||
list: [ |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "保存", |
|||
type: "primary", |
|||
key: "submit" |
|||
}, |
|||
config:{ |
|||
span: 0 |
|||
} |
|||
}, |
|||
{ |
|||
type: "button", |
|||
control:{ |
|||
label: "返回", |
|||
type: "danger", |
|||
key: "cancel" |
|||
}, |
|||
config:{ |
|||
span: 0 |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,374 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-03 13:39:16 |
|||
@ 备注: 列表内容展示 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { submitButton, afreshSubmitButton,editFormCont,draftSubmitButton,editLookFormCont } from "@/utils/workflow/const"; |
|||
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|||
import { gainTaskFormInfo,generateFlow,gainEditDataLog,draftsInitiateApproval,afreshRunWorkflow } from '@/api/taskapi/management' |
|||
import { Close } from '@element-plus/icons-vue' |
|||
import { judgeSubmitCancel,startRunFlow } from '@/api/DesignForm/requestapi' |
|||
import { submitButtonEs } from '@/api/DesignForm/tableButton' |
|||
|
|||
import RunFlowStep from '@/views/taskplatform/taskmanagement/runFlowStep.vue' |
|||
|
|||
|
|||
const props = defineProps({ |
|||
isShow:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
}, |
|||
tablePageClass:{ |
|||
type:Number, |
|||
default:1 |
|||
}, |
|||
operState:{ |
|||
type:Number, |
|||
default:1 |
|||
}, |
|||
pageInfo:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const formEl = ref<any>(); |
|||
const emits = defineEmits(["update:isShow","getPageData"]); |
|||
const formLoading = ref(false); |
|||
const flowAry = ref<any[]>(); //流程列表 |
|||
const currentProgress = ref<number>(1); //当前步进值 |
|||
const runstep = ref(null) |
|||
//表单ID |
|||
const openOfClose = computed({ |
|||
get() { |
|||
return props.isShow |
|||
}, |
|||
set(val: boolean) { |
|||
emits('update:isShow', val) |
|||
} |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-03 14:09:24 |
|||
@ 功能: 监听状态变化处理数据 |
|||
*/ |
|||
watch(()=>props.isShow,(val:bool)=>{ |
|||
|
|||
if(val){ |
|||
formLoading.value = true; |
|||
getCustomrrFormInfo(); |
|||
} |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-03 14:25:15 |
|||
@ 功能: 关闭抽屉 |
|||
*/ |
|||
const closeDrawer = () => { |
|||
emits('update:isShow', false) |
|||
} |
|||
|
|||
//表单相关内容 |
|||
const formState = reactive({ |
|||
formData: { |
|||
list: [], |
|||
form: {}, |
|||
config: {} |
|||
}, |
|||
dict: {}, |
|||
formId: props.pageInfo.id, |
|||
id: 1, |
|||
loading: true |
|||
}) |
|||
const pageLog = ref<any[]>([]) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-03 14:33:15 |
|||
@ 功能: 获取自定义表单内容 |
|||
*/ |
|||
const getCustomrrFormInfo = () => { |
|||
gainTaskFormInfo({id:props.pageInfo.masters_key}) |
|||
.then(({data})=>{ |
|||
// console.log("获取自定义表单内容",data,data.structure) |
|||
formState.formData = stringToObj(data.structure.mastesform) |
|||
// console.log("获取自定义表单内容--->",formState) |
|||
formState.dict = string2json(data.structure.dict) |
|||
// formState.formData.list.push(editLookFormCont) |
|||
if(props.tablePageClass != 4){ |
|||
judgeSubmitCancel({"name":data.structure.mastesformjson}) |
|||
.then((data:any) =>{ |
|||
if(data.code == 0){ |
|||
if (data.data == 3 || data.data == 4){ |
|||
// formState.formData.list.push(submitButtonEs) |
|||
if(props.operState == 2){ |
|||
formState.formData.list.push(afreshSubmitButton) |
|||
}else if(props.operState == 3){ |
|||
formState.formData.list.push(editFormCont) |
|||
}else if(props.operState == 4){ |
|||
formState.formData.list.push(draftSubmitButton) |
|||
}else if(props.operState == 5){ |
|||
formState.formData.list.push(submitButtonEs) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
|
|||
nextTick(()=>{ |
|||
// console.log("获取自定义表单内容-1111-->",data.tableData) |
|||
formEl.value.setValue(data.tableData) |
|||
}) |
|||
}) |
|||
.finally(()=>{ |
|||
formLoading.value = false; |
|||
gainEditDataLog({id:props.pageInfo.masters_key}) |
|||
.then(({data})=>{ |
|||
console.log("获取修改记录-1111-->",data) |
|||
pageLog.value = data.logAry |
|||
}); |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-07 10:55:34 |
|||
@ 功能: 表单动作回调 |
|||
*/ |
|||
const afterSubmit = (type: string) => { |
|||
console.log("表单提交成功") |
|||
if (type === 'success') { |
|||
// router.go(-1) |
|||
// console.log("表单提交成功") |
|||
emits("getPageData"); |
|||
closeDrawer(); |
|||
|
|||
} |
|||
} |
|||
const closeAppSubmit = () => { |
|||
closeDrawer() |
|||
} |
|||
//流程执行 |
|||
const drawerBeforeClose = () => { |
|||
console.log("监听打开关闭",false) |
|||
// emits("getmytodolist") |
|||
// emits("update:isshow", false); |
|||
} |
|||
//提交审批 |
|||
const sendDraftSubmit = (type: string,val?:any) => { |
|||
// console.log("提交审批",type,val) |
|||
// emits("getmytodolist") |
|||
if (type === 'success') { |
|||
if(props.pageInfo.flowIsOpen == 1){ |
|||
let sendInfo ={ |
|||
id:val.data.masterKey, |
|||
flowList:flowAry.value, |
|||
state:3 |
|||
} |
|||
console.log("草稿提交审批--1-<",sendInfo) |
|||
draftsInitiateApproval(sendInfo) |
|||
.then((data:any) =>{ |
|||
console.log("草稿提交审批---<",sendInfo,data) |
|||
if(data.code == 0){ |
|||
ElMessage.success(data.msg || '提交成功！') |
|||
if(runstep.value){ |
|||
runstep.value.gainRunFlowTask() |
|||
} |
|||
emits("getPageData"); |
|||
closeDrawer() |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
//保存草稿箱(带流程) |
|||
const saveEditFormInfo = (type: string,val?:any) => { |
|||
console.log("草稿提交审批--1-<",type,val) |
|||
if(type == "success"){ |
|||
runstep.value.gainRunFlowTask() |
|||
emits("getPageData"); |
|||
closeDrawer() |
|||
} |
|||
} |
|||
|
|||
//重新提交审核 |
|||
const anewSubmit = (type: string,val?:any) => { |
|||
|
|||
if(type == "success"){ |
|||
afreshRunWorkflow({id:val.data.flowkeys}) |
|||
.then((data:any) => { |
|||
console.log("重新提交数据---<",data,runstep.value) |
|||
runstep.value.gainRunFlowTask() |
|||
}) |
|||
.finally(() => { |
|||
emits("getPageData"); |
|||
closeDrawer() |
|||
}) |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-11 11:35:24 |
|||
@ 功能: 申请修改 |
|||
*/ |
|||
//修改完毕 |
|||
const submitEdit = (type: string,val?:any) => { |
|||
// console("修改完毕----->",type,val) |
|||
if(type == "success"){ |
|||
runstep.value.gainRunFlowTask() |
|||
emits("getPageData"); |
|||
closeDrawer() |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="openOfClose" |
|||
title="查看表单内容" |
|||
:size="drawerWith" |
|||
:with-header="false" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:destroy-on-close="true" |
|||
> |
|||
<div v-if="props.pageInfo.flowIsOpen==1" class="common-layout"> |
|||
|
|||
<el-container> |
|||
<el-main> |
|||
<ak-form |
|||
ref="formEl" |
|||
v-loading="formLoading" element-loading-text="Loading..." |
|||
:form-data="formState.formData" |
|||
:type="props.tablePageClass" |
|||
:dict="formState.dict" |
|||
request-url="getFormContent" |
|||
add-url="saveFormContent" |
|||
edit-url="editFormContent" |
|||
:before-submit="beforeSubmit" |
|||
:close-app-submit="closeDrawer" |
|||
:change-key-val="changeKeyVal" |
|||
:anew-submit = "anewSubmit" |
|||
:save-edit-form-info="saveEditFormInfo" |
|||
:send-draft-submit= "sendDraftSubmit" |
|||
:after-submit="afterSubmit" |
|||
:submit-edit="submitEdit" |
|||
/> |
|||
|
|||
<el-divider v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider> |
|||
<el-timeline style="width: 100%"> |
|||
<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top"> |
|||
<el-card> |
|||
<el-descriptions border> |
|||
<el-descriptions-item v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex" :label="mastIndex"> |
|||
{{mastItem}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-tabs v-if="item.sunList" type="border-card" style="margin-top:20px;"> |
|||
<el-tab-pane v-for="(sonItem,sonIndex) in item.sunList" :label="sonIndex" :key="sonIndex"> |
|||
<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border> |
|||
<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" :label="sonKey"> {{sonCentor}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-card> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</el-main> |
|||
<el-aside width="350px" class="flowBox"> |
|||
<el-header height="30px"> |
|||
<div class="workFlowHead"> |
|||
<el-text>审批流程</el-text> |
|||
<el-icon @click="closeDrawer"><Close /></el-icon> |
|||
</div> |
|||
</el-header> |
|||
<el-scrollbar class="scorllbarBox"> |
|||
<RunFlowStep ref="runstep" v-model:flowary="flowAry" :flow-key="props.pageInfo.masters_key" :current-progress="currentProgress" @updatelist="drawerBeforeClose" /> |
|||
</el-scrollbar> |
|||
</el-aside> |
|||
|
|||
</el-container> |
|||
</div> |
|||
<div v-else class="common-layout"> |
|||
<el-header height="30px"> |
|||
<el-icon @click="closeDrawer"><Close /></el-icon> |
|||
</el-header> |
|||
<ak-form |
|||
ref="formEl" |
|||
v-loading="formLoading" element-loading-text="Loading..." |
|||
:form-data="formState.formData" |
|||
:type="props.tablePageClass" |
|||
:dict="formState.dict" |
|||
request-url="getFormContent" |
|||
add-url="saveFormContent" |
|||
edit-url="editFormContent" |
|||
:before-submit="beforeSubmit" |
|||
:close-app-submit="closeDrawer" |
|||
:change-key-val="changeKeyVal" |
|||
:anew-submit = "anewSubmit" |
|||
:after-submit="afterSubmit" |
|||
:save-edit-form-info="saveEditFormInfo" |
|||
:send-draft-submit= "sendDraftSubmit" |
|||
:submit-edit="submitEdit" |
|||
/> |
|||
<el-divider v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider> |
|||
<el-timeline style="width: 100%"> |
|||
<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top"> |
|||
<el-card> |
|||
<el-descriptions border> |
|||
<el-descriptions-item v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex" :label="mastIndex"> |
|||
{{mastItem}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-tabs v-if="item.sunList" type="border-card" style="margin-top:20px;"> |
|||
<el-tab-pane v-for="(sonItem,sonIndex) in item.sunList" :label="sonIndex" :key="sonIndex"> |
|||
<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border> |
|||
<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" :label="sonKey"> {{sonCentor}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-card> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.common-layout{ |
|||
height: 100vh; |
|||
padding: 0 15px; |
|||
.el-main{ |
|||
height: 100vh; |
|||
padding:0; |
|||
} |
|||
.flowBox{ |
|||
height: 100vh; |
|||
border-left: 1px solid #ccc; |
|||
.scorllbarBox{ |
|||
height: calc(100vh - 35px) |
|||
} |
|||
.workFlowHead{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
.el-header{ |
|||
padding:0 10px; |
|||
line-height:30px; |
|||
text-align:right; |
|||
font-size:20px; |
|||
i{ |
|||
cursor:pointer; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,800 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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,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' |
|||
|
|||
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 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 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) |
|||
|
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 = () => { |
|||
state.loading = true; |
|||
let sendData = { |
|||
formId:props.formId, |
|||
page:state.currentPage, |
|||
pagesize:state.pageSize, |
|||
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) => { |
|||
let sendData = { |
|||
id:[val.masters_key], |
|||
isTrue:2 |
|||
} |
|||
softDeletion(sendData) |
|||
.then((data)=>{ |
|||
console.log('cancel!',data) |
|||
ElNotification({ |
|||
title: '温馨提示！', |
|||
message: 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, |
|||
} |
|||
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; |
|||
} |
|||
</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" |
|||
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=""> |
|||
<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="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" style="display:none"> |
|||
|
|||
{{ tableDataList}} |
|||
</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" /> |
|||
</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> |
|||
@ -0,0 +1,256 @@ |
|||
import jsBeautify from 'js-beautify' |
|||
import SparkMD5 from 'spark-md5' |
|||
|
|||
export const EDITTYPE: string = 'javascript' // 弹出编辑器可输入类型 json/javascript
|
|||
/** |
|||
* 一个变量指向Function，防止有些前端编译工具报错 |
|||
* @param fn |
|||
*/ |
|||
function evil(fn: any) { |
|||
return new Function('return ' + fn)() |
|||
} |
|||
|
|||
/** |
|||
* 将拖拽生成的表单数据转为字符串类型 |
|||
* @param o |
|||
*/ |
|||
function obj2string(o: any) { |
|||
let r: any = [] |
|||
if (o === null) { |
|||
// 这里有个问题 因typeOf null=object,下面判断会报错
|
|||
return null |
|||
} |
|||
if (typeof o === 'string') { |
|||
return ( |
|||
'"' + |
|||
o |
|||
.replace(/([\\'\\"\\])/g, '\\$1') |
|||
.replace(/(\n)/g, '\\n') |
|||
.replace(/(\r)/g, '\\r') |
|||
.replace(/(\t)/g, '\\t') + |
|||
'"' |
|||
) |
|||
} |
|||
if (typeof o === 'object') { |
|||
if (!o.sort) { |
|||
for (const i in o) { |
|||
let iii: string = i |
|||
if (i.indexOf('-') !== -1) { |
|||
iii = `"${i}"` |
|||
} |
|||
//r.push(iii + ':' + obj2string(o[i]))
|
|||
r.push(`${iii}:${obj2string(o[i])}`) |
|||
} |
|||
if ( |
|||
!!document.all && |
|||
!/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test( |
|||
o.toString |
|||
) |
|||
) { |
|||
//r.push('toString:' + o.toString.toString())
|
|||
r.push(`toString:${o.toString.toString()}`) |
|||
} |
|||
// r = '{' + r.join() + '}'
|
|||
r = `{${r.join()}}` |
|||
} else { |
|||
for (let i: number = 0; i < o.length; i++) { |
|||
r.push(obj2string(o[i])) |
|||
} |
|||
// r = '[' + r.join() + ']'
|
|||
r = `[${r.join()}]` |
|||
} |
|||
return r |
|||
} |
|||
return o && o.toString() |
|||
} |
|||
|
|||
/** |
|||
* 将拖拽生成的表单数据转为字符串类型 |
|||
* @param obj |
|||
* @param isBeautify |
|||
*/ |
|||
export function objToStringify(obj: any, isBeautify?: boolean) { |
|||
if (EDITTYPE === 'javascript') { |
|||
if (isBeautify) { |
|||
return jsBeautify('opt=' + obj2string(obj), { |
|||
indent_size: 2, |
|||
brace_style: 'expand' |
|||
}) |
|||
} else { |
|||
return obj2string(obj) |
|||
} |
|||
} else { |
|||
return isBeautify ? JSON.stringify(obj, null, 2) : JSON.stringify(obj) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 将字符串类型转为拖拽生成的表单数据 |
|||
* @param string |
|||
*/ |
|||
export function stringToObj(string: string) { |
|||
if (EDITTYPE === 'javascript') { |
|||
return evil(string) |
|||
} else { |
|||
return JSON.parse(string) |
|||
} |
|||
} |
|||
|
|||
export function string2json(string: string) { |
|||
return JSON.parse(string || '{}') |
|||
} |
|||
export function json2string(obj: any, isBeautify?: boolean) { |
|||
return isBeautify ? JSON.stringify(obj, null, 2) : JSON.stringify(obj) |
|||
} |
|||
|
|||
// ace编辑器相关
|
|||
/** |
|||
* 打开aceEdit编辑器相关配置 |
|||
* @param data |
|||
* @param id |
|||
* @param type |
|||
*/ |
|||
export const aceEdit = (data: any, id?: string, type?: string) => { |
|||
type = type ? type : 'javascript' |
|||
id = id ? id : 'editJson' |
|||
// @ts-ignore
|
|||
const editor = ace.edit(id) |
|||
editor.setOptions({ |
|||
enableBasicAutocompletion: true, |
|||
enableSnippets: true, |
|||
enableLiveAutocompletion: true |
|||
}) |
|||
editor.setFontSize(14) |
|||
editor.setShowPrintMargin(false) |
|||
editor.session.setMode('ace/mode/' + type) |
|||
editor.setTheme('ace/theme/tomorrow_night') |
|||
editor.setValue(data) |
|||
return editor |
|||
} |
|||
|
|||
/** |
|||
* 将字符类数字转为数值类 |
|||
* @param val |
|||
*/ |
|||
export const formatNumber = (val: any): number | undefined => { |
|||
// 将字符类数字转为数值类
|
|||
if (typeof val === 'string' && /^\d+(\.\d+)?$/.test(val.toString())) { |
|||
// 为数字
|
|||
return Number(val) |
|||
} else { |
|||
return val |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 转所有值转为字符串类型 |
|||
* @param val |
|||
*/ |
|||
export const formatToString = (val: any): string | undefined => { |
|||
if (val !== undefined) { |
|||
return val.toString() |
|||
} else { |
|||
return val |
|||
} |
|||
} |
|||
/** |
|||
* 将{key:value}转[{label:'key',value:'value'}] |
|||
* @param obj |
|||
*/ |
|||
export const objectToArray = (obj: any): { [key: string]: any } => { |
|||
if (Object.prototype.toString.call(obj) === '[object Object]') { |
|||
const temp: any = [] |
|||
for (const key in obj) { |
|||
temp.push({ |
|||
label: obj[key], |
|||
value: key |
|||
}) |
|||
} |
|||
return temp |
|||
} |
|||
return obj |
|||
} |
|||
/**** |
|||
* 动态插入移除css |
|||
* @param id 标签id |
|||
* @param cssContent 要插入的css内容 |
|||
* @param append true插入false移除 |
|||
*/ |
|||
export const appendOrRemoveStyle = ( |
|||
id: string, |
|||
cssContent: string, |
|||
append?: boolean |
|||
): void => { |
|||
const styleId: any = document.getElementById(id) |
|||
if (styleId && append) { |
|||
// 存在时直接修改，不用多次插入
|
|||
styleId.innerText = cssContent |
|||
return |
|||
} |
|||
if (cssContent && append) { |
|||
const styleEl = document.createElement('style') |
|||
styleEl.id = id |
|||
styleEl.type = 'text/css' |
|||
styleEl.appendChild(document.createTextNode(cssContent)) |
|||
document.head.appendChild(styleEl) |
|||
} |
|||
if (!append || !cssContent) { |
|||
// 移除
|
|||
styleId && styleId.parentNode.removeChild(styleId) |
|||
} |
|||
} |
|||
/** |
|||
* 根据当前组数据返回一个标识，设计时用于当前选中标识 |
|||
* @param item |
|||
* @param index //type=grid下初始时item都是一样的
|
|||
*/ |
|||
export const getGroupName = (item: any, index?: number): string => { |
|||
if (item.name) { |
|||
return item.name |
|||
} else { |
|||
const spark = new SparkMD5() |
|||
spark.append(JSON.stringify(item) + index) |
|||
return spark.end() |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 数据克隆 |
|||
*/ |
|||
export const jsonParseStringify = (val: any) => { |
|||
if (typeof val === 'object') { |
|||
return JSON.parse(JSON.stringify(val)) |
|||
} else { |
|||
return val |
|||
} |
|||
} |
|||
/** |
|||
* 定义两个空方法，用于在编辑事件时作为默认值 |
|||
*/ |
|||
export const beforeRequest: string = |
|||
'opt=(data, route) => {\n' + |
|||
' // data经过处理后返回\n' + |
|||
" console.log('beforeRequest',data)\n" + |
|||
' return data\n' + |
|||
'}' |
|||
export const afterResponse: string = |
|||
'opt=(res) => {\n' + |
|||
' // res返回数据\n' + |
|||
" console.log('afterResponse',res)\n" + |
|||
' return res\n' + |
|||
'}' |
|||
|
|||
export const onChange: string = |
|||
'opt=(key,model) => {\n' + |
|||
' // name当前改变组件的值,model表单的值\n' + |
|||
" console.log('onChange',key)\n" + |
|||
' return model\n' + |
|||
'}' |
|||
|
|||
// provide 方法定义的key
|
|||
const prefix: string = 'AK' |
|||
export const constControlChange: string = prefix + 'ControlChange' // 表单组件改变事件
|
|||
export const constSetFormOptions: string = prefix + 'SetFormOptions' // 使用setOptions设置下拉值
|
|||
export const constGetControlByName: string = prefix + 'GetControlByName' // 根据name从formData.list查找数据
|
|||
export const constFormBtnEvent: string = prefix + 'FormBtnEvent' // 按钮组件事件
|
|||
export const constFormProps: string = prefix + 'FormProps' // 按钮组件事件
|
|||
@ -0,0 +1,470 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-08 15:21:19 |
|||
@ 备注: 表单。有无流程处理 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { nodeFlow,conditionInfo,nodelPeoples } from '@/api/taskapi/types' |
|||
import { haveCustomerFormVersion,generateFlow,echoTableFormPage,realTimeUpdateFlow } from '@/api/taskapi/management' |
|||
import { string2json,stringToObj } from '@/utils/DesignForm/form' |
|||
import { judgeSubmitCancel,startRunFlow } from '@/api/DesignForm/requestapi' |
|||
import { notAsA_BasisForJudgment,asAnApprovalActionControl,fixedValueControl,timeControl,timeEquation,submitButton, afreshSubmitButton } from '@/utils/workflow/const' |
|||
|
|||
import FlowStep from '@/views/taskplatform/taskmanagement/flowStep.vue' |
|||
|
|||
const props = defineProps({ |
|||
isopen:{ |
|||
type:Boolean, |
|||
default:true |
|||
}, |
|||
versionid:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
versiontitle:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
drawerwith:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}) |
|||
const formLoading = ref(false) //loading |
|||
const flowLoading = ref(false) //loading |
|||
|
|||
const flowFactor = reactive<conditionInfo[]>([]) //表单组件 |
|||
const flowMap = ref<any[]>(); //工作流 |
|||
const nextStep = ref<number>(0); |
|||
const currentProgress = ref<number>(1); |
|||
const nodeKey = ref<string>(''); |
|||
//获取工作流条件 |
|||
const gainFlowChart = reactive<nodeFlow>({ |
|||
id:"0" |
|||
}) |
|||
|
|||
const nodelUserList = reactive<nodelPeoples[]>([]) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-08 15:35:54 |
|||
@ 功能: 表单基本数据结构 |
|||
*/ |
|||
const state = reactive<any>({ |
|||
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
|||
formData: { |
|||
list: [], |
|||
form: {}, |
|||
config: {}, |
|||
powerstr:{} |
|||
}, |
|||
dict: {}, |
|||
formId: props.versionid, |
|||
id: 0, |
|||
loading: true |
|||
}) |
|||
const emits = defineEmits(["update:isopen","searchquery"]); |
|||
const drawerOpenOrClose = computed({ |
|||
get: () => props.isopen, |
|||
set: (val) => { |
|||
emits("update:isopen", val); |
|||
}, |
|||
}); |
|||
const isFlowTable = ref(false) //判断是不是流程表单 |
|||
//获取表单数据 |
|||
const getTaskFormData = () =>{ |
|||
formLoading.value = true |
|||
flowLoading.value = true |
|||
echoTableFormPage({id:props.versionid.toString()}) |
|||
.then(({ data }) =>{ |
|||
console.log("表单数据",data) |
|||
if(data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0"){ |
|||
isFlowTable.value = true; |
|||
|
|||
}else{ |
|||
isFlowTable.value = false; |
|||
} |
|||
gainFlowChart.id=data.tableFormPage.flowkeystr |
|||
console.log("表单数据--->1",data.flowPage.flowList) |
|||
flowMap.value = data.flowPage.flowList |
|||
state.id=props.versionid |
|||
state.formData = stringToObj(data.tableFormPage.mastesform) |
|||
state.dict = string2json(data.tableFormPage.dict) |
|||
state.formData.powerstr = string2json(data.tableFormPage.powerstr) |
|||
judgeSubmitCancel({"name":data.tableFormPage.mastesformjson}) |
|||
.then((datajud:any) =>{ |
|||
if(datajud.code == 0){ |
|||
if (datajud.data == 3 || datajud.data == 4){ |
|||
state.formData.list.push(submitButton) |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
.finally(()=>{ |
|||
formLoading.value = false |
|||
flowLoading.value = false |
|||
}) |
|||
} |
|||
|
|||
//监听页面变化 |
|||
watch(()=>props.isopen,()=>{ |
|||
if(props.isopen){ |
|||
getTaskFormData(); |
|||
}else{ |
|||
initData() |
|||
} |
|||
}) |
|||
//数据初始化 |
|||
const initData = () => { |
|||
state.formData = { |
|||
list: [], |
|||
form: {}, |
|||
config: {} |
|||
}; |
|||
state.dict = {}; |
|||
state.formId = 0; |
|||
state.id = 0; |
|||
state.loading = true; |
|||
let aryLen = flowFactor.length |
|||
if(aryLen > 0) flowFactor.splice(0,aryLen); |
|||
} |
|||
//组件解析 |
|||
const changeKeyVal = (key:any,val:any,type:any,attribute:any) => { |
|||
// console.log("改变表单值--key--->",key) |
|||
// console.log("改变表单值--val--->",val,Array.isArray(val)) |
|||
// console.log("改变表单值--type--->",type) |
|||
// console.log("改变表单值--attribute--->",attribute) |
|||
|
|||
// console.log("改变表单值--type-1-true->",notAsA_BasisForJudgment.indexOf(type)) |
|||
|
|||
|
|||
// console.log("改变表单值--flowFactor--->",flowFactor) |
|||
|
|||
|
|||
// if(notAsA_BasisForJudgment.indexOf(type) != -1){ |
|||
// console.log("改变表单值--type--true->",notAsA_BasisForJudgment.indexOf(type)) |
|||
// } |
|||
let unitsVal = val |
|||
let isUpdateFlowChart = false |
|||
//单选，多选，下拉菜单 |
|||
if(notAsA_BasisForJudgment.indexOf(type) === -1){ |
|||
let isWrite = true |
|||
flowFactor.forEach((item:any)=>{ |
|||
if(item.factorid == key){ |
|||
isWrite = false |
|||
|
|||
item.type=3 |
|||
if(type == "checkbox"){ |
|||
item.isCheckbox = true |
|||
item.answers = val.map(String) |
|||
}else{ |
|||
item.isCheckbox = false |
|||
item.oneanswer = val.toString() |
|||
} |
|||
if(notAsA_BasisForJudgment.indexOf(type) === -1){ |
|||
isUpdateFlowChart = true |
|||
} |
|||
} |
|||
}) |
|||
if(isWrite){ |
|||
if(type == "checkbox"){ |
|||
flowFactor.push({ |
|||
factorid:key, |
|||
type:3, |
|||
isCheckbox:true, |
|||
answers:val.map(String) |
|||
}) |
|||
}else{ |
|||
flowFactor.push({ |
|||
factorid:key, |
|||
type:3, |
|||
isCheckbox:false, |
|||
oneanswer:val.toString() |
|||
}) |
|||
} |
|||
isUpdateFlowChart = true |
|||
} |
|||
// console.log("改变表单值--flowFactor--->",flowFactor) |
|||
|
|||
} |
|||
// console.log("改变表单值--flowFactor--1->",unitsVal,timeControl,type) |
|||
//时间类空间附加判断条件 |
|||
if(timeControl.indexOf(type) > -1 || fixedValueControl.indexOf(type) > -1 || type == "input"){ |
|||
// console.log("改变表单值--flowFactor--3->",unitsVal) |
|||
let addNewTime = true //判断是否新增 |
|||
flowFactor.forEach((item:any)=>{ |
|||
// console.log("改变表单值--flowFactor--5->",item.type) |
|||
if(item.type == 2){ |
|||
addNewTime = false |
|||
// console.log("改变表单值--flowFactor--5====1->",item.type) |
|||
// console.log("改变表单值--flowFactor--5====3->",item.customFields,item.customFields.length) |
|||
if(item.customFields && item.customFields.length > 0){ |
|||
// console.log("改变表单值--flowFactor--5====2->",item.customFields) |
|||
let sunNewAdd = true |
|||
item.customFields.forEach((sunItem:any)=>{ |
|||
// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key) |
|||
if(sunItem.wordfield == key){ |
|||
sunNewAdd = false |
|||
isUpdateFlowChart = true |
|||
if(timeEquation.indexOf(attribute) === -1){ //非区间性时间 |
|||
sunItem.leftval = val.toString() |
|||
}else{ //区间性时间 |
|||
if(Array.isArray(val)){ |
|||
if(val.length >= 2){ |
|||
sunItem.leftval = val[0].toString() |
|||
sunItem.rightval = val[val.length - 1].toString() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
if(sunNewAdd){ |
|||
isUpdateFlowChart = true |
|||
if(timeEquation.indexOf(attribute) === -1){//非区间性时间 |
|||
let customFieldInfo = { |
|||
wordfield: key, |
|||
optType: "1", |
|||
leftval: val.toString() |
|||
} |
|||
item.customFields.push(customFieldInfo) |
|||
}else{ //区间性时间 |
|||
if(Array.isArray(val)){ |
|||
if(val.length >= 2){ |
|||
let customFieldInfo = { |
|||
wordfield: key, |
|||
optType: "6", |
|||
leftval: val[0].toString(), |
|||
leftoptType:"3", |
|||
rightoptType:"3", |
|||
rightval:val[val.length - 1].toString() |
|||
} |
|||
item.customFields.push(customFieldInfo) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
if(addNewTime){ //新增自定义类数据判断 |
|||
isUpdateFlowChart = true |
|||
if(timeEquation.indexOf(attribute) === -1){ //非区间性时间 |
|||
let customFieldInfo = { |
|||
wordfield: key, |
|||
optType: "1", |
|||
leftval: val.toString() |
|||
} |
|||
let condInfo = { |
|||
factorid:"customFields", |
|||
type:2, |
|||
isCheckbox:false, |
|||
customFields:[customFieldInfo] |
|||
} |
|||
flowFactor.push(condInfo) |
|||
}else{ //区间性时间 |
|||
if(Array.isArray(val)){ |
|||
|
|||
if(val.length >= 2){ |
|||
let customFieldInfo = { |
|||
wordfield: key, |
|||
optType: "6", |
|||
leftval: val[0].toString(), |
|||
leftoptType:"3", |
|||
rightoptType:"3", |
|||
rightval:val[val.length - 1].toString() |
|||
} |
|||
let condInfo = { |
|||
factorid:"customFields", |
|||
type:2, |
|||
isCheckbox:false, |
|||
customFields:[customFieldInfo] |
|||
} |
|||
flowFactor.push(condInfo) |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
//操作人 |
|||
if(asAnApprovalActionControl.indexOf(type) > -1){ |
|||
isUpdateFlowChart = true |
|||
let isWriteUs = true |
|||
nodelUserList.forEach((item:any)=>{ |
|||
if(item.factorid == key){ |
|||
isWriteUs = false |
|||
item.userList = val |
|||
} |
|||
}) |
|||
if(isWriteUs){ |
|||
nodelUserList.push({ |
|||
factorid:key, |
|||
userList:val |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// console.log("改变表单值--flowFactor--->",flowFactor) |
|||
//更新工作流图 |
|||
if(isUpdateFlowChart){ |
|||
flowLoading.value = true |
|||
//获取工作流不进图 |
|||
gainFlowChart.conditionList=flowFactor |
|||
gainFlowChart.nodelPeople=nodelUserList |
|||
gainFlowChart.oldFlow = flowMap |
|||
// console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart) |
|||
realTimeUpdateFlow(gainFlowChart) |
|||
.then((data:any) =>{ |
|||
// console.log("获取工作流不进图-new-->",data) |
|||
flowMap.value = data.data.flowList |
|||
nextStep.value = data.data.nextStep; |
|||
currentProgress.value = data.data.Step; |
|||
nodeKey.value = data.data.nodeKey; |
|||
// // console.log("获取工作流不进图-1-->",flowMap.value) |
|||
flowLoading.value = false |
|||
}) |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:41:20 |
|||
@ 功能: 提交成功回调 |
|||
*/ |
|||
const afterSubmit = (type: string,val?:any) => { |
|||
console.log("表单提交成功------------------>",type,val) |
|||
console.log("流程------------------>",flowMap) |
|||
if (type === 'success') { |
|||
if(isFlowTable.value){ |
|||
if(val.code == 0){ |
|||
if(val.data){ |
|||
let sendInfo ={ |
|||
id:val.data.uuid, |
|||
flowList:flowMap.value, |
|||
state:3 |
|||
} |
|||
startRunFlow(sendInfo) |
|||
.then((data:any)=>{ |
|||
console.log("流程提交成功--------1---------->",data) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
closeAppSubmit() |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:49:09 |
|||
@ 功能: 表单前置数据 |
|||
*/ |
|||
const beforeSubmit = (params: any) => { |
|||
params.formId = props.versionid |
|||
params.id = "" |
|||
// emits("update:isopen", false); |
|||
return params |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:50:01 |
|||
@ 功能: 关闭操作 |
|||
*/ |
|||
const closeAppSubmit = () =>{ |
|||
emits("update:isopen", false); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-09 16:50:37 |
|||
@ 功能: 保存草稿 |
|||
*/ |
|||
const saveDraftPage = (type: string,val?:any) => { |
|||
if (type === 'success') { |
|||
if(isFlowTable.value){ |
|||
if(val.code == 0){ |
|||
let sendInfo ={ |
|||
id:val.data.uuid, |
|||
flowList:flowMap.value, |
|||
state:1 |
|||
} |
|||
startRunFlow(sendInfo) |
|||
.then((data:any)=>{ |
|||
// console.log("流程提交成功--------1---------->",data) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
closeAppSubmit() |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer v-model="drawerOpenOrClose" v-loading="loadingData" :title="versiontitle" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerwith" class="drawerClass" > |
|||
<div v-if="isFlowTable" class="common-layout"> |
|||
<el-container> |
|||
<el-main v-loading="formLoading" element-loading-text="Loading..."> |
|||
<ak-form |
|||
ref="formEl" |
|||
:numrun="formType" |
|||
:form-data="state.formData" |
|||
:type="formType" |
|||
:dict="state.dict" |
|||
request-url="getFormContent" |
|||
add-url="saveFormContent" |
|||
edit-url="editFormContent" |
|||
:before-submit="beforeSubmit" |
|||
:after-submit="afterSubmit" |
|||
:close-app-submit="closeAppSubmit" |
|||
:change-key-val="changeKeyVal" |
|||
:save-draft-page="saveDraftPage" |
|||
/> |
|||
</el-main> |
|||
<el-aside v-loading="flowLoading" element-loading-text="Loading..." width="350px" class="flowBox"> |
|||
<el-text size="large">审批流程</el-text> |
|||
<FlowStep v-model:flow-map="flowMap" :next-step="nextStep" :current-progress="currentProgress" :node-key="nodeKey" /> |
|||
</el-aside> |
|||
</el-container> |
|||
</div> |
|||
<!--无流程表单--> |
|||
<div v-else class="common-layout"> |
|||
<ak-form |
|||
ref="formEl" |
|||
v-loading="formLoading" element-loading-text="Loading..." |
|||
:form-data="state.formData" |
|||
:type="formType" |
|||
:numrun="formType" |
|||
:dict="state.dict" |
|||
request-url="getFormContent" |
|||
add-url="saveFormContent" |
|||
edit-url="editFormContent" |
|||
:before-submit="beforeSubmit" |
|||
:after-submit="afterSubmit" |
|||
:close-app-submit="closeAppSubmit" |
|||
:save-draft-page="saveDraftPage" |
|||
/> |
|||
</div> |
|||
</el-drawer> |
|||
|
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.common-layout{ |
|||
height: calc(100vh - 55px); |
|||
padding: 0 15px; |
|||
.el-main{ |
|||
height: calc(100vh - 55px); |
|||
padding:0; |
|||
} |
|||
.flowBox{ |
|||
height: calc(100vh - 55px); |
|||
border-left: 1px solid #ccc; |
|||
padding: 0 15px; |
|||
} |
|||
.el-header{ |
|||
padding:0 10px; |
|||
line-height:30px; |
|||
text-align:right; |
|||
font-size:20px; |
|||
i{ |
|||
cursor:pointer; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,52 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-29 13:52:10 |
|||
@ 备注: 查看表单列表代码 |
|||
--> |
|||
<script lang='ts' setup> |
|||
const props = defineProps({ |
|||
isShow:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
listData:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const direction = ref('ltr') |
|||
const emits = defineEmits(["update:isShow"]); |
|||
const isShowIng = computed({ |
|||
get() { |
|||
return props.isShow |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:isShow', val) |
|||
} |
|||
}); |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 10:25:54 |
|||
@ 功能: 关闭弹窗 |
|||
*/ |
|||
const closeLogBut = () =>{ |
|||
emits('update:isShow', false) |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="isShowIng" |
|||
title="生成脚本预览" |
|||
:direction="direction" |
|||
:before-close="closeLogBut" |
|||
> |
|||
|
|||
<div v-if="props.listData" :id="id"></div> |
|||
</el-drawer> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,117 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 10:02:17 |
|||
@ 备注: 设置数据记录操作按钮 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { ElTable } from 'element-plus' |
|||
import { tableLogButtonList,attrButton } from '@/api/DesignForm/tableButton' |
|||
|
|||
const props = defineProps({ |
|||
isShow:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
contbutary:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const direction = ref('ltr') |
|||
// const emits = defineEmits<{ |
|||
// (e: 'update:isShow', val: boolean): void |
|||
// (e: 'updataLogBut', val: function): void |
|||
// }>() |
|||
const emits = defineEmits(["update:isShow","update:contbutary","updataLogBut"]); |
|||
const isShowIng = computed({ |
|||
get() { |
|||
return props.isShow |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:isShow', val) |
|||
} |
|||
}); |
|||
const contButList = computed({ |
|||
get() { |
|||
return props.contbutary |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:contbutary', val) |
|||
} |
|||
}); |
|||
const tableLogBut = ref<InstanceType<typeof ElTable>>() |
|||
|
|||
watch(()=>isShowIng.value,(val: boolean)=>{ |
|||
if(val){ |
|||
// console.log("props.contbutary",props.contbutary) |
|||
// console.log("props.contbutary",contButList.value) |
|||
// if(contButList.value && contButList.value.length > 0){ |
|||
// let delBut = [] |
|||
// tableLogButtonList.forEach((item:any)=>{ |
|||
// let isTrue = true; |
|||
// contButList.value.forEach((itemAll:any)=>{ |
|||
// if (item.key === itemAll.key) { |
|||
// isTrue = false; |
|||
// } |
|||
// }) |
|||
// if(isTrue){ |
|||
// tableLogBut.value!.toggleRowSelection(item, false) |
|||
// } |
|||
// }) |
|||
// }else{ |
|||
|
|||
// nextTick(() => { |
|||
// tableLogBut.value!.clearSelection() |
|||
// }) |
|||
// } |
|||
} |
|||
|
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 10:25:54 |
|||
@ 功能: 关闭弹窗 |
|||
*/ |
|||
const closeLogBut = () =>{ |
|||
emits('update:isShow', false) |
|||
emits('updataLogBut', tableLogButtonList) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 10:39:34 |
|||
@ 功能: 选中的内容 |
|||
*/ |
|||
const xuanZhongLog = (val:attrButton[]) =>{ |
|||
tableLogButtonList.value = val |
|||
console.log(tableLogButtonList) |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="isShowIng" |
|||
title="设置数据记录操作按钮" |
|||
:direction="direction" |
|||
:before-close="closeLogBut" |
|||
> |
|||
<el-table ref="tableLogBut" :data="tableLogButtonList" border style="width: 100%" @selection-change="xuanZhongLog"> |
|||
<el-table-column fixed type="selection" width="40" align="center" /> |
|||
<el-table-column prop="label" label="字段" /> |
|||
|
|||
</el-table> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeLogBut">取消</el-button> |
|||
<el-button type="primary" @click="closeLogBut">确定</el-button> |
|||
</div> |
|||
|
|||
</el-drawer> |
|||
|
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.dialog-footer { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 15:05:32 |
|||
@ 备注: 设置字段属性 |
|||
--> |
|||
<script lang='ts' setup> |
|||
const props = defineProps({ |
|||
isOpen:{ |
|||
type:Boolean, |
|||
default:false, |
|||
}, |
|||
setupFieldInfo:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const drawerTitle = ref("设置") |
|||
const direction = ref('ltr') |
|||
const emits = defineEmits(["update:isOpen","update:setupFieldInfo","updataLogBut"]); |
|||
const drawerIsShow = computed({ |
|||
get() { |
|||
return props.isOpen |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:isOpen', val) |
|||
} |
|||
}); |
|||
const setupFieldCentent = computed({ |
|||
get() { |
|||
return props.setupFieldInfo |
|||
}, |
|||
set(val: formStruct) { |
|||
emits('update:setupFieldInfo', val) |
|||
} |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 15:27:14 |
|||
@ 功能: 关闭弹窗 |
|||
*/ |
|||
const handleDrawerClose = () => { |
|||
emits('update:isOpen',false) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-27 15:47:38 |
|||
@ 功能: 监听开关 |
|||
*/ |
|||
watch(()=>drawerIsShow.value,(val:boolean)=>{ |
|||
// console.log("监听开关",setupFieldCentent) |
|||
if(val) { |
|||
drawerTitle.value = setupFieldCentent.value.name + "设置" |
|||
}else{ |
|||
drawerTitle.value = "设置" |
|||
initData(); |
|||
} |
|||
}) |
|||
const initData = () => { |
|||
setupFieldCentent.value = {} |
|||
} |
|||
</script> |
|||
<template> |
|||
|
|||
<el-drawer |
|||
v-model="drawerIsShow" |
|||
:title="drawerTitle" |
|||
:direction="direction" |
|||
:before-close="handleDrawerClose" |
|||
> |
|||
{{setupFieldCentent}} |
|||
</el-drawer> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,14 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-29 13:50:19 |
|||
@ 备注: 列表预览 |
|||
--> |
|||
<script lang='ts' setup> |
|||
|
|||
</script> |
|||
<template> |
|||
<div></div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-03-28 11:39:14 |
|||
@ 备注: 查询字段 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { tableButton } from '@/api/DesignForm/tableButton' |
|||
import type { FormInstance, FormRules } from 'element-plus' |
|||
|
|||
import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/DesignForm/fieldUnit' |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
const props = defineProps({ |
|||
searchData:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
const emits = defineEmits(["update:searchData"]); |
|||
const drawerIsShow = computed({ |
|||
get() { |
|||
return props.searchData |
|||
}, |
|||
set(val: tableButton) { |
|||
emits('update:searchData', val) |
|||
} |
|||
}); |
|||
watch(()=>drawerIsShow.value,(val:tableButton)=>{ |
|||
|
|||
}, |
|||
{ |
|||
deep: true |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 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(drawerIsShow.value.length > 0){ |
|||
drawerIsShow.value.forEach((item:any)=>{ |
|||
item.value=""; |
|||
}) |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 16:59:13 |
|||
@ 功能: 时间选择器 |
|||
*/ |
|||
const shortcuts = [ |
|||
{ |
|||
text: '此刻', |
|||
value: new Date(), |
|||
}, |
|||
{ |
|||
text: '昨天', |
|||
value: () => { |
|||
const date = new Date() |
|||
date.setTime(date.getTime() - 3600 * 1000 * 24) |
|||
return date |
|||
}, |
|||
}, |
|||
{ |
|||
text: '一周前', |
|||
value: () => { |
|||
const date = new Date() |
|||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) |
|||
return date |
|||
}, |
|||
}, |
|||
] |
|||
</script> |
|||
<template> |
|||
<el-form ref="ruleSearchForm" class="seacherForm"> |
|||
<template v-for="(item, index) in drawerIsShow" :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="drawerIsShow.length"> |
|||
<el-button type="primary"><el-icon><Search /></el-icon>查询</el-button> |
|||
<el-button @click="resetFields(ruleSearchForm)"><el-icon><Refresh /></el-icon>重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.seacherForm{ |
|||
min-height: auto; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
.group{ |
|||
width: auto; |
|||
margin-right: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,248 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-24 13:18:02 |
|||
@ 备注: 流程执行 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
import OrgUserPage from "@/views/public/orguser/orguser.vue" |
|||
import OrgAllUserPage from "@/views/public/orguser/orgalluser.vue" |
|||
|
|||
// import { nodeFlow,conditionInfo,nodelPeoples } from '@/api/taskapi/types' |
|||
import { gainRunTaskFlow,submitApprovalResults } from '@/api/DesignForm/requestapi' |
|||
//引入图标 |
|||
import squareUrlOne from "@/assets/images/1.png" |
|||
import squareUrlTwo from "@/assets/images/2.png" |
|||
|
|||
const state = reactive({ |
|||
circleUrl:squareUrlTwo, |
|||
squareUrl: squareUrlOne, |
|||
sizeList: ['small', '', 'large'] as const, |
|||
}) |
|||
const { circleUrl, squareUrl, sizeList } = toRefs(state) |
|||
|
|||
const props = defineProps({ |
|||
flowKey:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
currentProgress:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}) |
|||
|
|||
const emits = defineEmits(["update:flowary","updatelist"]); |
|||
|
|||
const flowLoading = ref(false) |
|||
const openOrClose = ref(false) //开启指定人员选择 |
|||
const openclosebox = ref(false) //开启全部人员选择 |
|||
const presetPersonnel = ref<any>([]); //预设选择人 |
|||
const selectedPeople = ref<any>([]); //已选择人 |
|||
const flowOpinion = ref(false) //是否可以写评论 |
|||
const currentStep = ref<number>(props.currentProgress) |
|||
|
|||
const flowMaps = ref<any[]>(); |
|||
|
|||
//获取任务流程 |
|||
const gainRunFlowTask = () =>{ |
|||
flowLoading.value = true |
|||
let sendInfo = { |
|||
id:props.flowKey |
|||
} |
|||
gainRunTaskFlow(sendInfo) |
|||
.then((data:any) =>{ |
|||
console.log("获取流程----->",data) |
|||
flowMaps.value = data.data.flowList |
|||
flowOpinion.value = data.data.operational |
|||
currentStep.value = data.data.current_step |
|||
emits("update:flowary", data.data.flowList); |
|||
}) |
|||
.finally(()=>{ |
|||
flowLoading.value = false |
|||
}) |
|||
} |
|||
//组件渲染之前 |
|||
onBeforeMount(()=>{ |
|||
gainRunFlowTask(); |
|||
}) |
|||
//组件渲染完毕 |
|||
onMounted(()=>{ |
|||
|
|||
}) |
|||
//判断是否可以添加人员 |
|||
const judgeAddUser = (val:any):boolean =>{ |
|||
console.log("获取流程----1111->",val.judgelist) |
|||
if(val.judgelist){ |
|||
return true |
|||
} |
|||
return false |
|||
} |
|||
let zhiXingStep = 1; |
|||
//添加操作人 |
|||
const addPeople = (val:any) =>{ |
|||
zhiXingStep = val.step |
|||
presetPersonnel.value = val.pendpers |
|||
selectedPeople.value = val.operator |
|||
if(val.runscope == 1){ |
|||
openclosebox.value = true |
|||
}else{ |
|||
openOrClose.value = true |
|||
} |
|||
} |
|||
//更新节点操作人 |
|||
const updateNode = (val:any) =>{ |
|||
|
|||
if(flowMaps.value&& flowMaps.value.length > 0){ |
|||
|
|||
flowMaps.value.forEach((item:any) =>{ |
|||
if(item.step == zhiXingStep){ |
|||
item.operator = val |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
const sendFlowInfo = ref<string>() //审批意见 |
|||
//提交审批 |
|||
const yesOrNo = (val:string,agreeOrRefuse:number) =>{ |
|||
console.log("提交审批----1111->",val,agreeOrRefuse,sendFlowInfo.value) |
|||
let sendInfo = { |
|||
id:props.flowKey, |
|||
agreeOrRefuse:agreeOrRefuse, |
|||
suggest:sendFlowInfo.value, |
|||
flowlist:flowMaps.value |
|||
} |
|||
submitApprovalResults(sendInfo) |
|||
.then((data:any)=>{ |
|||
|
|||
// console.log("提交审批----22222->",data) |
|||
ElMessage({ |
|||
message: '处理完成！', |
|||
type: 'success' |
|||
}) |
|||
|
|||
}) |
|||
.finally(()=>{ |
|||
gainRunFlowTask(); |
|||
emits("updatelist"); |
|||
}) |
|||
|
|||
} |
|||
defineExpose({gainRunFlowTask}) |
|||
</script> |
|||
<template> |
|||
<div class="drawerFormBox boxRight"> |
|||
<div class="flowBox"> |
|||
<!-- <el-affix :offset="20" style="width:100%"> |
|||
<el-text size="large">审批流程</el-text> |
|||
</el-affix> --> |
|||
|
|||
<el-steps v-loading="flowLoading" element-loading-text="Loading..." direction="vertical" :active="currentStep"> |
|||
<el-step v-for="item in flowMaps" :key="item.step"> |
|||
<template #title> |
|||
{{ item.nodeName }}<span v-if="item.examinemode==1"> ● 依次审批</span><span v-if="item.examinemode==2"> ● 会签</span><span v-if="item.examinemode==3"> ● 或签</span> |
|||
</template> |
|||
<template #description> |
|||
<table> |
|||
<tr v-for="items in item.operator" :key="items.id"> |
|||
<td valign="top" align="center" width="50"> |
|||
<el-avatar v-if="items.iconbase64==''&&items.icon!=''" shape="square" fit="cover" :src="items.icon" /> |
|||
<el-avatar v-else-if="items.iconbase64!=''" shape="square" fit="cover" :src="items.iconbase64" /> |
|||
<el-avatar v-else shape="square" fit="cover" :src="squareUrl" /> |
|||
</td> |
|||
<td valign="top" align="left"> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-text>{{ items.departmentname }}</el-text> |
|||
<el-text><span v-if="items.departmentname"> - </span>{{ items.postname }}</el-text> |
|||
<el-text><span v-if="items.departmentname||items.postname"> - </span>{{ items.name }}</el-text> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<ul> |
|||
<li v-for="(logItem,logIndex) in items.log" :key="logIndex" class="logLi"> |
|||
<el-text v-if="logItem.state==2" type="success"> |
|||
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已同意</span> |
|||
</el-text> |
|||
<el-text v-else-if="logItem.state==3" type="danger"> |
|||
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已驳回</span> |
|||
</el-text> |
|||
<el-text v-else-if="logItem.state==4" type="primary"> |
|||
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>已查看</span> |
|||
</el-text> |
|||
<el-text v-else> |
|||
<span v-if="logItem.cause">{{logItem.cause}}</span><span v-else>未操作</span> |
|||
</el-text> · {{ logItem.time }} |
|||
</li> |
|||
</ul> |
|||
</el-col> |
|||
</el-row> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<div v-if="item.judgelist" class="addUser" @click="addPeople(item)"> |
|||
<svg-icon icon-class="addxuxian" size="50" /> |
|||
</div> |
|||
</td> |
|||
<td></td> |
|||
</tr> |
|||
</table> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
</div> |
|||
<el-affix v-if="flowOpinion" position="bottom" :offset="0"> |
|||
<div class="approvalBoard"> |
|||
<el-text size="large" class="appBoardTitle">审批意见</el-text> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="24"> |
|||
<el-input |
|||
v-model="sendFlowInfo" |
|||
:autosize="{ minRows: 2, maxRows: 6 }" |
|||
type="textarea" |
|||
placeholder="请输入审批意见" |
|||
/> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="4"></el-col> |
|||
<el-col :span="8" class="juzhong"><el-button type="primary" style="width:100%" @click="yesOrNo(props.flowKey,1)">同意</el-button></el-col> |
|||
<el-col :span="8" class="juzhong"><el-button type="danger" style="width:100%" @click="yesOrNo(props.flowKey,2)">驳回</el-button></el-col> |
|||
<el-col :span="4"></el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-affix> |
|||
|
|||
|
|||
<OrgUserPage v-if="openOrClose" v-model:openclose="openOrClose" :preset-personnel="presetPersonnel" :selected-people="selectedPeople" @update-node="updateNode" /> |
|||
<OrgAllUserPage v-if="openclosebox" v-model:openclosebox="openclosebox" :selected-people="selectedPeople" @update-node="updateNode" /> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.drawerFormBox{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.boxRight{ |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
border-left: 1px solid #EEEEEE; |
|||
} |
|||
.flowBox{ |
|||
width: 100%; |
|||
padding: 0 5px 0 10px; |
|||
} |
|||
.approvalBoard{ |
|||
padding: 5px 10px; |
|||
background-color: #FFFFFF; |
|||
border-top: 1px solid #EEEEEE; |
|||
.juzhong{ |
|||
padding: 10px 0; |
|||
text-align: center; |
|||
} |
|||
.appBoardTitle{ |
|||
padding: 5px 0 10px 0; |
|||
display: block; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue