herenshan112
2 months ago
29 changed files with 6648 additions and 608 deletions
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
File diff suppressed because it is too large
@ -0,0 +1,38 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-01-28 14:29:57 |
||||
|
@ 备注: 列表视图 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { attrButton, FormPageList } from '@/api/DesignForm/tableButton'; |
||||
|
|
||||
|
|
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
data: FormPageList | any; |
||||
|
searchData?: attrButton[] | any; |
||||
|
}>(), |
||||
|
{ |
||||
|
showPage: true, |
||||
|
data: () => { |
||||
|
return { columns: [], controlBtn: [], operateBtn: [], config: {} }; |
||||
|
}, |
||||
|
searchData: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
const tableDataList = ref([]); // 表格行数据 |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="app-content"> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.app-content { |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,281 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-01-28 08:25:29 |
||||
|
@ 备注: |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
||||
|
import { doAiChat,aiChatData} from "@/api/doc/space" |
||||
|
import { useUserStore } from "@/store/modules/user"; |
||||
|
import { VueMarkdown } from '@crazydos/vue-markdown' |
||||
|
import rehypeRaw from 'rehype-raw' |
||||
|
|
||||
|
//选中的咨询模式 |
||||
|
const userStore = useUserStore(); |
||||
|
const userid="p0"+userStore.userInfoCont.userId; |
||||
|
const regulaKey=import.meta.env.VITE_REGUL_AI_AGENT; |
||||
|
const baseURL=import.meta.env.VITE_APP_BASE_API |
||||
|
const regulaURL =`${baseURL}/aibot/agents/${regulaKey}/chat` |
||||
|
const conversation=ref("") //当前会话的uuid |
||||
|
const controller = ref<AbortController | null>(null) |
||||
|
|
||||
|
const interact_msg=ref<{ask:boolean,think:string,content:string}[]>([{ask:false,think:"是",content:`你好！我是你的AI助手， |
||||
|
你可以直接向我提问，或者编辑表单，我会自动为你提供相关信息。`}]) |
||||
|
|
||||
|
// 输入框内容 |
||||
|
const inputText = ref(''); |
||||
|
const respMsg=ref("") //markdown 内容，问答智能体的动态回复内容 |
||||
|
|
||||
|
//消息体 |
||||
|
interface message{ |
||||
|
ask:boolean, |
||||
|
think:string, |
||||
|
content:string |
||||
|
} |
||||
|
//会话记录 |
||||
|
interface chatRecord{ |
||||
|
uuid:string, |
||||
|
agentuuid:string, |
||||
|
brief:string, |
||||
|
messages:message[] |
||||
|
} |
||||
|
|
||||
|
|
||||
|
defineExpose({onSendParamToAI}) |
||||
|
|
||||
|
async function onSendParamToAI(arr:Array<{ uuids: string[]; params: { [key: string]: any } }>){ |
||||
|
//interact_msg.value=[] |
||||
|
for (let ele of arr){ |
||||
|
//interact_msg.value.unshift({ask:true,think:"", content:"AI正在分析。。。"}) |
||||
|
for (let uid of ele.uuids){ |
||||
|
let para={ |
||||
|
inputs: { |
||||
|
"checkType":"travel", |
||||
|
"checkInfo":JSON.stringify(ele.params) |
||||
|
}, |
||||
|
response_mode:"streaming", |
||||
|
user:userid,//这里已经base64解析了 |
||||
|
} |
||||
|
//添加问题记录 |
||||
|
interact_msg.value.push({ask:true,think:"", content:JSON.stringify(para)}) |
||||
|
|
||||
|
await doRequest(`${baseURL}/aibot/assisted/${uid}/workflow`,para) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function doRequest(furl:string,param:any){ |
||||
|
let mRespMsg="" |
||||
|
controller.value = new AbortController(); |
||||
|
try{ |
||||
|
const res= await doAiChat( |
||||
|
furl, |
||||
|
param, |
||||
|
controller.value.signal |
||||
|
) |
||||
|
|
||||
|
if (!res.ok) { |
||||
|
throw new Error(`HTTP ${res.status} ${res.statusText}`); |
||||
|
} |
||||
|
|
||||
|
const reader = res.body!.getReader(); |
||||
|
const decoder = new TextDecoder('utf-8'); |
||||
|
|
||||
|
let chunk = ''; // 行缓存 |
||||
|
while (true) { |
||||
|
const {done, value} = await reader.read() |
||||
|
if (done) break; |
||||
|
|
||||
|
// 服务器可能一次返回多行，需要手动按行拆分 |
||||
|
chunk += decoder.decode(value, {stream: true}); |
||||
|
const lines = chunk.split(/\n/); |
||||
|
chunk = lines.pop() || '' |
||||
|
for (const line of lines) { |
||||
|
if (!line.trim()) continue; // 跳过空行 |
||||
|
if (line.startsWith('data: ')) { |
||||
|
const data = line.slice(6); |
||||
|
const json = JSON.parse(data); |
||||
|
if(json.event==="text_chunk"){ |
||||
|
//conversation.value=json.conversation_id |
||||
|
mRespMsg+=json.data.text |
||||
|
}else if(json.event==="message"){ |
||||
|
respMsg.value+=json.answer |
||||
|
mRespMsg+=json.answer |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}catch (e: any) { |
||||
|
if (e.name === 'AbortError') { |
||||
|
console.log('用户手动中断') |
||||
|
} |
||||
|
} |
||||
|
respMsg.value="" |
||||
|
const arr=mRespMsg.split("</think>") |
||||
|
if(arr.length===1){ |
||||
|
interact_msg.value.push({ask:false,think:"",content:arr[0]}) |
||||
|
}else{ |
||||
|
//思考模式 |
||||
|
let st = arr[1].trim().match(/({.*})/s) |
||||
|
if (st){ |
||||
|
let res= JSON.parse(st[1]) |
||||
|
interact_msg.value.push({ask:false,think:res.success,content:res.reason}) |
||||
|
}else{ |
||||
|
interact_msg.value.push({ask:false,think:arr[0],content:arr[1]}) |
||||
|
} |
||||
|
} |
||||
|
scrollToBottom() |
||||
|
} |
||||
|
|
||||
|
function resetContext(){ |
||||
|
interact_msg.value=[] |
||||
|
conversation.value="" |
||||
|
//props.closefunc() |
||||
|
} |
||||
|
|
||||
|
// 发送消息 |
||||
|
const sendMessage = () => { |
||||
|
const content = inputText.value.trim(); |
||||
|
if (!content) return; |
||||
|
|
||||
|
// 添加用户消息 |
||||
|
interact_msg.value.push({ ask: true,think:"", content }); |
||||
|
|
||||
|
const params={ |
||||
|
inputs: {"onlineSearch":"否", |
||||
|
"useDataset":"是", |
||||
|
"queryUrl":""}, |
||||
|
query:content, |
||||
|
response_mode:"streaming", |
||||
|
conversation_id:conversation.value, |
||||
|
user:userid |
||||
|
} |
||||
|
|
||||
|
doRequest(regulaURL,params) |
||||
|
|
||||
|
// 清空输入框 |
||||
|
inputText.value = ''; |
||||
|
}; |
||||
|
const scrollbarRef = ref() |
||||
|
const scrollToBottom = () => { |
||||
|
const wrap = scrollbarRef.value?.wrapRef // ⚠️ 关键：获取内部滚动容器 |
||||
|
if (wrap) { |
||||
|
console.log(wrap.scrollHeight , wrap.clientHeight) |
||||
|
wrap.scrollTop = wrap.scrollHeight - wrap.clientHeight |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<div class="svgBox"><SvgIcon icon-class="aiRoboot" size="25" /></div> |
||||
|
AI智能问答助手 |
||||
|
</div> |
||||
|
</template> |
||||
|
<el-scrollbar ref="scrollbarRef" class="scroBox "> |
||||
|
|
||||
|
<div v-for="(msg, index) in interact_msg" :key="index" class="ai-conversation"> |
||||
|
<div v-if="msg.ask" class="message user-message"> |
||||
|
<strong>用户：</strong>{{ msg.content }} |
||||
|
</div> |
||||
|
<div v-else class="message ai-message"> |
||||
|
<strong>AI助手：</strong> <VueMarkdown :markdown="msg.content" :rehype-plugins="[rehypeRaw]" ></VueMarkdown> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ai-conversation"> |
||||
|
<div v-show="respMsg" class="message user-message"> |
||||
|
<strong>AI助手：</strong><VueMarkdown :markdown="respMsg" :rehype-plugins="[rehypeRaw]" class="t_resp"></VueMarkdown> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
<template #footer> |
||||
|
<div class="bootemAi"> |
||||
|
<el-input v-model="inputText" placeholder="请输入您的问题..." /> |
||||
|
|
||||
|
<el-button :disabled="!inputText.trim()" class="ai-send-btn" @click="sendMessage"><SvgIcon icon-class="fbsk" size="" /></el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.card-header{ |
||||
|
font-size: 1.4rem; |
||||
|
font-weight: 700; |
||||
|
color: #0020C2; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
.svgBox{ |
||||
|
background: linear-gradient(135deg, #0020C2, #4d6cff); |
||||
|
color: white; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
.scroBox{ |
||||
|
padding: 10px 15px; |
||||
|
height: calc(100vh - 200px); |
||||
|
} |
||||
|
.ai-conversation { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.message { |
||||
|
padding: 12px 16px; |
||||
|
border-radius: 12px; |
||||
|
max-width: 90%; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.user-message { |
||||
|
background: #eef2ff; |
||||
|
align-self: flex-end; |
||||
|
border-top-right-radius: 4px; |
||||
|
border: 1px solid rgba(0, 32, 194, 0.2); |
||||
|
} |
||||
|
|
||||
|
.ai-message { |
||||
|
background: linear-gradient(to right, #f0f5ff, #ffffff); |
||||
|
align-self: flex-start; |
||||
|
border-top-left-radius: 4px; |
||||
|
border: 1px solid rgba(0, 32, 194, 0.1); |
||||
|
} |
||||
|
.ai-send-btn { |
||||
|
background: linear-gradient(135deg, #0020C2, #4d6cff); |
||||
|
color: white; |
||||
|
border: none; |
||||
|
width: 46px; |
||||
|
border-radius: 10px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.ai-send-btn:hover { |
||||
|
background: linear-gradient(135deg, #0019a0, #3a5aff); |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
.bootemAi{ |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 50px; /* 左右最小150px，最大250px，中间自适应 */ |
||||
|
grid-template-rows: auto; |
||||
|
gap: 10px; |
||||
|
max-width: 100%; |
||||
|
margin: 0 auto; |
||||
|
:deep .el-input__wrapper{ |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,427 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-01-27 16:11:23 |
||||
|
@ 备注: |
||||
|
--> |
||||
|
<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 squareUrlOne from "@/assets/images/1.png" |
||||
|
import squareUrlTwo from "@/assets/images/2.png" |
||||
|
|
||||
|
const activeStep = ref(1) |
||||
|
const state = reactive({ |
||||
|
circleUrl:squareUrlTwo, |
||||
|
squareUrl: squareUrlOne, |
||||
|
sizeList: ['small', '', 'large'] as const, |
||||
|
}) |
||||
|
const { circleUrl, squareUrl, sizeList } = toRefs(state) |
||||
|
const openOrClose = ref(false) |
||||
|
const openclosebox = ref(false) |
||||
|
const ifSendFlow = ref(false) |
||||
|
const props = defineProps({ |
||||
|
flowMap: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
nodeKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
currentProgress:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
} |
||||
|
, |
||||
|
nextStep:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
} |
||||
|
}) |
||||
|
const presetPersonnel = ref<any>([]); //预设选择人 |
||||
|
const selectedPeople = ref<any>([]); //已选择人 |
||||
|
const flowMaps = ref<any[]>(); |
||||
|
const emits = defineEmits(["update:flowMap"]); |
||||
|
const flowList = computed<any>({ |
||||
|
get: () => props.flowMap, |
||||
|
set: (val) => { |
||||
|
emits("update:flowMap", val); |
||||
|
}, |
||||
|
}); |
||||
|
watch(()=>props.flowMap,(val:any)=>{ |
||||
|
|
||||
|
emits("update:flowMap", val); |
||||
|
}) |
||||
|
onMounted(()=>{ |
||||
|
|
||||
|
}) |
||||
|
//判断是否有增加人员按钮 |
||||
|
const judgeAddUser = (val:any):boolean =>{ |
||||
|
console.log("val----->",val) |
||||
|
if(val.customNode == "beginnode"){ |
||||
|
val.runscope = val.runscope!=0?val.runscope:1 |
||||
|
return true |
||||
|
} |
||||
|
switch(val.runtype){ |
||||
|
case 1: |
||||
|
val.runscope = val.runscope!=0?val.runscope:1 |
||||
|
return true |
||||
|
break; |
||||
|
case 3: |
||||
|
if(val.customNode == props.nodeKey){ |
||||
|
val.runscope = val.runscope!=0?val.runscope:1 |
||||
|
return true |
||||
|
} |
||||
|
break; |
||||
|
case 4: |
||||
|
if(val.runscope==1){ |
||||
|
val.runscope = val.runscope!=0?val.runscope:1 |
||||
|
return true |
||||
|
} |
||||
|
break; |
||||
|
default: |
||||
|
// if(!val.operator){ |
||||
|
// val.runscope = val.runscope!=0?val.runscope:1 |
||||
|
// return true |
||||
|
// }else if(val.operator.length < 1){ |
||||
|
// val.runscope = val.runscope!=0?val.runscope:1 |
||||
|
// return true |
||||
|
// } |
||||
|
if(val.runscope != 0){ |
||||
|
return true |
||||
|
} |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
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 |
||||
|
} |
||||
|
|
||||
|
// console.log("PresetPersonnel.value--------1-------->",val) |
||||
|
// console.log("PresetPersonnel.value--------2-------->",val.pendpers) |
||||
|
// console.log("PresetPersonnel.value--------3-------->",val.operator) |
||||
|
// console.log("PresetPersonnel.value--------4-------->",selectedPeople.value) |
||||
|
} |
||||
|
//更新节点操作人 |
||||
|
const updateNode = (val:any) =>{ |
||||
|
// console.log("P更新节点操作人",zhiXingStep,val) |
||||
|
flowList.value.forEach((item:any) =>{ |
||||
|
if(item.step == zhiXingStep){ |
||||
|
// console.log("P更新节点操作人---1-->",item.step , zhiXingStep) |
||||
|
item.operator = val |
||||
|
} |
||||
|
}) |
||||
|
// console.log("P更新节点操作人--2--->",flowList) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2026-01-29 16:37:56 |
||||
|
@ 功能: 判断审批节点样式 |
||||
|
*/ |
||||
|
const judgeNodeClass = (val:number,stepVal:number):string => { |
||||
|
console.log("判断审批节点样式",val,stepVal) |
||||
|
switch(val){ |
||||
|
case 1: |
||||
|
if(props.currentProgress == stepVal){ |
||||
|
return "in-progress" |
||||
|
}else{ |
||||
|
return 'completed' |
||||
|
} |
||||
|
case 2: |
||||
|
return 'pending' |
||||
|
case 3: |
||||
|
// return 'in-progress' |
||||
|
if(props.currentProgress == stepVal){ |
||||
|
return "in-progress" |
||||
|
}else{ |
||||
|
return 'in-executor' |
||||
|
} |
||||
|
default: |
||||
|
if(props.currentProgress == stepVal){ |
||||
|
return "in-progress" |
||||
|
}else{ |
||||
|
return 'completed' |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
return 'completed' |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<template > |
||||
|
<el-card shadow="always"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<div class="svgBox"><SvgIcon icon-class="liuChengBiaoDan" size="25" /></div> |
||||
|
审批流程 |
||||
|
</div> |
||||
|
</template> |
||||
|
<el-scrollbar :class="ifSendFlow?'flowBody':'flowBodyNofoot'"> |
||||
|
|
||||
|
<div class="approval-steps"> |
||||
|
<div v-for="item in flowList" :key="item.step" :class="['step', judgeNodeClass(item.type,item.step)]"> |
||||
|
<div class="step-icon"> |
||||
|
<SvgIcon v-if="item.type==0" icon-class="faqiren" size="25" /> |
||||
|
<SvgIcon v-if="item.type==1" icon-class="spr" size="25" /> |
||||
|
<SvgIcon v-if="item.type==2" icon-class="csr" size="25" /> |
||||
|
<SvgIcon v-if="item.type==3" icon-class="zxr" size="25" /> |
||||
|
<!--SvgIcon v-else icon-class="shenpi" size="25" /--> |
||||
|
</div> |
||||
|
<div class="step-content"> |
||||
|
<h3 class="step-title">{{item.nodeName}}</h3> |
||||
|
<div v-for="items in item.operator" :key="items.id" class="flowLogBox"> |
||||
|
|
||||
|
<div > |
||||
|
<el-avatar v-if="items.icon!=''" shape="square" fit="cover" :src="items.icon" style="width: 40px;" class="avatarBox" /> |
||||
|
<el-avatar v-else-if="items.iconbase64!=''" shape="square" fit="cover" :src="items.iconbase64" style="width: 40px;" class="avatarBox" /> |
||||
|
<el-avatar v-else shape="square" fit="cover" :src="squareUrl" style="width: 40px;" class="avatarBox" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-text size="small">{{ items.departmentname }}</el-text> |
||||
|
<el-text size="small"><span v-if="items.departmentname"> - </span>{{ items.postname }}</el-text> |
||||
|
<el-text size="small"><span v-if="items.departmentname||items.postname"> - </span>{{ items.name }}</el-text> |
||||
|
</div> |
||||
|
<div v-for="(logItem,logIndex) in items.log" :key="logIndex" > |
||||
|
<div v-if="logItem.state==2" class="step-info"> |
||||
|
<el-text v-if="logItem.cause" type="success" size="small">{{logItem.cause}}</el-text> |
||||
|
<el-text v-else type="success" size="small" >已同意</el-text> |
||||
|
</div> |
||||
|
<div v-if="logItem.state==3" class="step-info"> |
||||
|
<el-text v-if="logItem.cause" type="danger" size="small">{{logItem.cause}}</el-text> |
||||
|
<el-text v-else type="danger" size="small" >已驳回</el-text> |
||||
|
</div> |
||||
|
<div v-else class="step-info"> |
||||
|
<el-text v-if="logItem.cause" size="small">{{logItem.cause}}</el-text> |
||||
|
<el-text v-else size="small" >未操作</el-text> |
||||
|
</div> |
||||
|
<div class="step-time">{{ logItem.time }}</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div v-if="judgeAddUser(item)" class="addUser" @click="addPeople(item)"> |
||||
|
<svg-icon icon-class="addxuxian" size="50" /> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
<!-- <template #footer> |
||||
|
<div class="bootemWorkFlow"> |
||||
|
<el-input type="textarea" :rows="2" style="width: 100%" placeholder="请输入审批意见"></el-input> |
||||
|
<div class="bootemWorkFlowBut"> |
||||
|
<el-button class="btn approve-btn"><SvgIcon icon-class="kxdg" size="" style="margin-right: 5px" />通过审批</el-button> |
||||
|
<el-button class="btn reject-btn"><SvgIcon icon-class="cwkx" size="" style="margin-right: 5px" />驳回申请</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> --> |
||||
|
</el-card> |
||||
|
|
||||
|
<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" /> |
||||
|
|
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.card-header{ |
||||
|
font-size: 1.4rem; |
||||
|
font-weight: 700; |
||||
|
color: #0020C2; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
.flowBody{ |
||||
|
padding: 10px 15px; |
||||
|
height: calc(100vh - 260px); |
||||
|
} |
||||
|
.flowBodyNofoot{ |
||||
|
padding: 10px 15px; |
||||
|
height: calc(100vh - 140px); |
||||
|
} |
||||
|
.svgBox{ |
||||
|
background: linear-gradient(135deg, #0020C2, #4d6cff); |
||||
|
color: white; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
.bootemWorkFlow{ |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
.bootemWorkFlowBut{ |
||||
|
width: 100%; |
||||
|
padding: 10px 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
padding: 14px 16px; |
||||
|
border-radius: 10px; |
||||
|
font-weight: 600; |
||||
|
font-size: 1rem; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
border: none; |
||||
|
} |
||||
|
.btn:hover { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 5px 15px rgba(0, 32, 194, 0.15); |
||||
|
} |
||||
|
.approve-btn { |
||||
|
background: linear-gradient(135deg, #00cc66, #33dd88); |
||||
|
color: white; |
||||
|
} |
||||
|
.reject-btn { |
||||
|
background: linear-gradient(135deg, #ff3366, #ff5588); |
||||
|
color: white; |
||||
|
} |
||||
|
.approval-steps { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
.step { |
||||
|
display: flex; |
||||
|
margin-bottom: 25px; |
||||
|
position: relative; |
||||
|
margin-left: 7px; |
||||
|
margin-top: 7px; |
||||
|
} |
||||
|
|
||||
|
.step:not(:last-child)::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 20px; |
||||
|
top: 40px; |
||||
|
width: 2px; |
||||
|
height: calc(100% + 5px); |
||||
|
background: linear-gradient(to bottom, rgba(0, 32, 194, 0.2), rgba(0, 32, 194, 0.05)); |
||||
|
} |
||||
|
|
||||
|
.step-icon { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 5px; |
||||
|
z-index: 1; |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.step.completed .step-icon { |
||||
|
background: linear-gradient(135deg, #0020C2, #4d6cff); |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.step.in-progress .step-icon { |
||||
|
background: linear-gradient(135deg, #ffcc00, #ffdd55); |
||||
|
color: #333; |
||||
|
animation: pulse 2s infinite; |
||||
|
} |
||||
|
|
||||
|
.step.in-executor .step-icon { |
||||
|
background: linear-gradient(135deg, #67C23A, #95f764); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.step.pending .step-icon { |
||||
|
background: #f0f4ff; |
||||
|
color: #a0a6c9; |
||||
|
} |
||||
|
|
||||
|
.step-content { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.step-title { |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 5px; |
||||
|
color: #0020C2; |
||||
|
} |
||||
|
|
||||
|
.step.completed .step-title { |
||||
|
color: #4d6cff; |
||||
|
} |
||||
|
|
||||
|
.step.in-progress .step-title { |
||||
|
color: #ff9900; |
||||
|
} |
||||
|
.step.in-executor .step-title { |
||||
|
color: #67C23A; |
||||
|
} |
||||
|
|
||||
|
.step.pending .step-title { |
||||
|
color: #a0a6c9; |
||||
|
} |
||||
|
|
||||
|
.step-info { |
||||
|
font-size: 0.9rem; |
||||
|
color: #666; |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
|
||||
|
.step-time { |
||||
|
font-size: 0.8rem; |
||||
|
color: #888; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 1200px) { |
||||
|
.container { |
||||
|
grid-template-columns: 1fr; |
||||
|
grid-template-rows: auto auto auto; |
||||
|
height: auto; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
min-height: 400px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7); } |
||||
|
70% { box-shadow: 0 0 0 10px rgba(255, 204, 0, 0); } |
||||
|
100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); } |
||||
|
} |
||||
|
.flowLogBox{ |
||||
|
display: grid; |
||||
|
grid-template-columns: 45px 1fr; |
||||
|
} |
||||
|
.addUser{ |
||||
|
display:block; |
||||
|
cursor:pointer; |
||||
|
} |
||||
|
.avatarBox{ |
||||
|
border: 1px solid rgba(255, 255, 255, 0.5); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue