<!--
@ 作者: 秦东
@ 时间: 2024-11-19 09:50:45
@ 备注: 流程和历史记录
-->
<script lang='ts' setup>
import { orgform,searchUserListForm } from '@/api/hr/org/type'
import { getOrgFormTree,searchUserList } from '@/api/hr/org/index'
import { gainRunFlowStart,gainRunTaskFlow,startRunFlow,runTaskFlow,afreshRunWorkflow,realTimeUpdateFlow } from '@/api/lowCode/taskapi/management'
import squareUrl from '@/assets/image/1.png'



const props = defineProps({
	types:{
        type:Number,
		default:1,
    },
    logList:{
		type:Object,
		default(){
			return {}
		}
	},
    appInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    appPageInfo:{
		type:Object,
		default(){
			return {}
		}
	},
	appFlowInfo:{
		type:Object,
		default(){
			return {}
		}
	},
    stateForm:{
		type:Object,
		default(){
			return {}
		}
	}
    
});
const types = computed({
	get() {
		return props.types
	},
	set(val: number) {
		return val
	}
});
const pageLog = computed({
    get() {
        if(props.logList&&props.logList.length>0){
            return props.logList
        }else{
            return []
        }
		
	},
	set(val: number) {
		return val
	}
});
//获取行政组织树
const orgTreeAry = ref<orgform[]>([]) 
const orgProps = {
  value: "id",
  label: "name",
  children: "children",
};
//工作流相关
const flowLoading = ref(false) //loading
const flowMap = ref<any[]>([]);			//工作流
const nextStep = ref<number>(0);
const currentProgress  = ref<number>(1);
const nodeKey = ref<string>('');
const ruleForm = ref();	//表单
const flowOpinion = ref(false) //是否可以写评论
const sendFlowInfo = ref<string>() //审批意见
const flowAndLog = ref<number>(1); //1：啥都有;2:只有流程；3：只有历史记录；4：啥都没有
const activeName = ref<string>("log")
onBeforeMount(() => {
    newAddPageData()
    
})
const emits = defineEmits(["searchcontent"])
watch(()=>props.stateForm,(val)=>{
    newAddPageData()
},{deep:true})

/**
@ 作者: 秦东
@ 时间: 2024-11-19 10:41:41
@ 功能: 新增时获取流程列表
*/
const newAddPageData = () => {
    flowLoading.value = true
    console.log("新增时获取流程列表3--->",types.value)
    if(types.value == 1){
        console.log("新增时获取流程列表3",props.stateForm)
        console.log("新增时获取流程列表1",props.stateForm.flowIsTrue,props.stateForm.flowKey)
        if(props.stateForm&&props.stateForm.flowIsTrue&&props.stateForm.flowKey){
           
            gainRunFlowStart({id:props.stateForm.flowKey.toString()})
            .then(({data})=>{
                console.log("获取流程==1==>",data)
                flowMap.value = data.flowList
                nextStep.value = data.nextStep
                currentProgress.value = data.Step
                nodeKey.value = data.nodeKey
                flowLoading.value = false;
                if(data.flowList&&data.flowList.length > 0){
                    activeName.value = "flow"
                }else{
                    activeName.value = "log"
                }
            })
        }
        
    }else{
        console.log("获取流程==2=1=>",props)

    console.log("获取流程==2=2==1=>",props.appPageInfo)
    console.log("获取流程==2=2==2=>",props.appPageInfo.runFlowInfo)
    // console.log("获取流程==2=2==1=>",flowRunId)

        if(props.appPageInfo && props.appPageInfo.runFlowInfo && props.appPageInfo.runFlowInfo != "0" && props.appPageInfo.runFlowInfo != ""){
            let  flowRunId = props.appPageInfo.runFlowInfo?props.appPageInfo.runFlowInfo:props.appPageInfo.runFlowIdStr?props.appPageInfo.runFlowIdStr:"0";
            console.log("获取流程==2=2=>",flowRunId)
            gainRunTaskFlow({id:flowRunId})
                .then(({data})=>{
                    console.log("获取流程==2==>",data)
                    flowMap.value = data.flowList
                    flowOpinion.value = data.operational
                    currentProgress.value = data.current_step
                    flowLoading.value = false;
                    if(data.flowList&&data.flowList.length > 0){
                        activeName.value = "flow"
                    }else{
                        activeName.value = "log"
                    }
                })
        }
        
    }
}

const handleClick = () => {

}
/**
@ 作者: 秦东
@ 时间: 2024-11-20 13:28:04
@ 功能: 启动流程
*/
const messagesss = inject('searchList')

const runWorkFlow = (val:any) => {
    // console.log("启动流程--------1---------->",val)
    let sendInfo ={
		id:val.uuid,
		flowList:flowMap.value,
		state:3
	}
    startRunFlow(sendInfo)
        .then((data:any)=>{
			console.log("流程提交成功--------1---------->",typeof messagesss)
            if (typeof messagesss === 'function') {
                messagesss(); // 调用父组件提供的函数
            }
            console.log("刷新页面------3----------->")
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 16:26:52
@ 功能: 草稿箱建立流程
*/
const rundraftWorkFlow = (val:any) => {
    // console.log("启动流程--------2---------->",val,val.data)
    let sendInfo ={
		id:val.data.uuid,
		flowList:flowMap.value,
		state:1
	}
    // console.log("流程提交成功--------3---------->",sendInfo)
    startRunFlow(sendInfo)
        .then((data:any)=>{
			// console.log("流程提交成功--------2---------->",data)
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 15:14:54
@ 功能: 重新发起流程
*/
const reapplyWorkFlow = (val:any) => {
    // console.log("重新发起流程--------2---------->",val)
    if(val.data.runFlowId != "0" && val.data.runFlowId != ""){
        afreshRunWorkflow({ id: val.data.runFlowId })
        .then((data:any)=>{
			// console.log("流程提交成功--------1---------->",data)
		})
    }else{

    }
    
}
const butLoad = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-11-20 15:44:03
@ 功能: 提交审批
*/
const yesOrNo = (val:string,agreeOrRefuse:number) => {
    butLoad.value = true;
    let sendInfo = {
		id:props.appPageInfo.runFlowInfo,
		agreeOrRefuse:agreeOrRefuse,
		suggest:sendFlowInfo.value,
		flowlist:flowMap.value
	}
    runTaskFlow(sendInfo)
		.then((data:any)=>{

			console.log("提交审批----22222->",data)
			if(data.code == 0){
                ElMessage({
                    message: '处理完成！',
                    type: 'success'
                })
            }else{
                ElMessage({
                    message: data.msg,
                    type: 'error'
                })
            }
            

		})
		.finally(()=>{
            butLoad.value = false;
			newAddPageData();
            
		})
}
/**
@ 作者: 秦东
@ 时间: 2025-05-12 10:15:03
@ 功能: 刷新流程
*/
const refreshWorkFlow = (taskKey: any,flowFactor: any,nodelUserList: any) => {
    console.log("获取工作流不进图-new--刷新>", props.types);
    let gainFlowChart = {
        id:props.stateForm.flowKey.toString(),
        conditionList:flowFactor,
        nodelPeople:nodelUserList,
        oldFlow:flowMap.value
    }
    if(props.stateForm.flowIsTrue && props.types == 1){
        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;
        });
    }
    
}
//判断是否有增加人员按钮
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 == nodeKey.value){
				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.runscope != 0){
				return true
			}
			return false
	}
	
	return false
}
//获取行政组织
const getOrgTreeAry = (orgId:number) => {
    getOrgFormTree({id:orgId})
		.then(({ data }) => {
			console.log(data)
			orgTreeAry.value = data.list
		}).finally(()=>{
            pageSetup.page = 1
            pageSetup.department = orgId
            getUserListAry()
        })
}


const presetPersonnel = ref<any>([]);    //预设选择人
const selectedPeople = ref<any>([]);    //已选择人
const openclosebox = ref(false)
const openOrClose = ref(false)
const packNodeInfo = ref()
const drawerRefBox = ref()
const scrollbarHeight = ref("100px")
const unPickUSerList = ref<any[]>([])
const myPickUs = ref<any[]>([])
const myPickUsCode = ref<string[]>([])
const pageSetup = reactive({
    page:1,
    pageSize:10,
    total:0,
    name:"",
    department:0
})
const treeSelectOrgId = ref("")
const loadUser = ref(false)
//获取人员列表
const getUserListAry = () => {
    loadUser.value = true
    const params = {
		page: pageSetup.page,
		pagesize: pageSetup.pageSize,
		name: pageSetup.name,
		department: pageSetup.department*1
    }
    // unPickUSerList.value = []
    // pageSetup.total = 0
    searchUserList(params).then(({ data })=>{  myPickUsCode

        if(Array.isArray(data.list) && data.list.length > 0){
            if(Array.isArray(myPickUsCode.value) && myPickUsCode.value.length > 0){
                data.list.forEach((item:any)=>{
                    if(myPickUsCode.value.includes(item.number)){
                       item.isPick = true
                    }else{
                        item.isPick = false
                    }
                    
                })
                
            }
            unPickUSerList.value = data.list
        }else{
            unPickUSerList.value = data.list
        }




        
        pageSetup.total = data.total
        console.log("获取人员列表",unPickUSerList.value)
    }).finally(()=>{
        callBackWritePick()
        pickHuiXie()
        loadUser.value = false
        
    })
}
let zhiXingStep = 1
const oldPickUSer = ref([])
//添加操作人
const addPeople = (val:any) =>{
    

    // 

    packNodeInfo.value = val
	zhiXingStep = val.step
	presetPersonnel.value = val.pendpers
	selectedPeople.value = val.operator
	if(val.runscope == 1){
		openclosebox.value = true
	}else{
		openOrClose.value = true
	}
	openclosebox.value = true
    oldPickUSer.value = []
    nextTick(()=>{
        oldPickUSer.value = val.operator
        console.log("userDrwaer==========>",drawerRefBox.value.offsetHeight)
        if(packNodeInfo.value.runscope == 1){
            scrollbarHeight.value = (drawerRefBox.value.offsetHeight - 100 ) + "px"
            getOrgTreeAry(0)
            
        }else{
            scrollbarHeight.value = (drawerRefBox.value.offsetHeight ) + "px"
            unPickUSerList.value = val.pendpers
            if(val.pendpers.length){
                pageSetup.total = val.pendpers.length
            }else{
                pageSetup.total = 0
            }
           
            if(Array.isArray(val.operator) && val.operator.length && val.operator.length > 0){
               callBackWritePick()
            }
            
            
        }
        
    })
	console.log("PresetPersonnel.value--------1-------->",val)
	// console.log("PresetPersonnel.value--------2-------->",val.runscope)
	// console.log("PresetPersonnel.value--------3-------->",val.operator)
	// console.log("PresetPersonnel.value--------4-------->",selectedPeople.value)
}

//回写已选中的人
const callBackWritePick = () => {
    if(Array.isArray(oldPickUSer.value) && oldPickUSer.value.length > 0){
        oldPickUSer.value.forEach((item:any)=>{
            // if(!myPickUsCode.value.includes(item.number)){
            //    myPickUsCode.value.push(item.number)
            // }
            pickUserCont(item)

            
        })
    }
    
}

const pickHuiXie = () => {
    if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
        unPickUSerList.value.forEach((item:any)=>{
            if(myPickUsCode.value.includes(item.number)){
                item.isPick = true
            }else{
                item.isPick = false
            }
        })
    }
}


const serachVal = ref("")
//查看已选择人员
const openOrClosePick = ref(false)
const openPickBox = () => {
    openOrClosePick.value = true
}
//关闭已经选在的人员
const closePickUserAry = () => {
    openOrClosePick.value = false
}

//翻页
const pickPageTion = (val:number) => {
    
     pageSetup.page = val
     getUserListAry()
}
//搜索内容 
const searchUserCont = (val:any) => {
    console.log("搜索内容--------1-------->",val)
     pageSetup.name = val
     getUserListAry()
}
//监听行政组织
watch(()=>treeSelectOrgId,(val:any)=>{
    console.log("监听行政组织--------1-------->",val.value)
    if(val.value){
        pageSetup.department = val.value
    }
    getUserListAry()
},{deep:true})
//点击选中或删除
const piclAllToale = ref(0)
const pickUserCont = (val:any) => {
    
    if(Array.isArray(myPickUs.value) && myPickUs.value.length > 0){
        let isIn = false
        myPickUs.value.forEach((item:any,index:number)=>{
            if(item.number == val.number){
                isIn = true
                myPickUs.value.splice(index,1)
                val.isPick = false
            }
        })
        if(!isIn){
            val.isPick = true
            myPickUs.value.push(val)
        }
    }else{
        val.isPick = true
        myPickUs.value.push(val)
        
    }
    if(Array.isArray(myPickUsCode.value) && myPickUsCode.value.length > 0){
        if(myPickUsCode.value.includes(val.number)){
            let goTo:any = []
            myPickUsCode.value.forEach((item:any)=>{
                if(item.number != val.number){
                    goTo.push(item)
                }
            })
            myPickUsCode.value = goTo
        }else{
            myPickUsCode.value.push(val.number)
        }
    }else{
        myPickUsCode.value.push(val.number)
    }
    piclAllToale.value = myPickUs.value.length
}
//删除我已经选中的人员
const delMyPickUser = (val:string) => {
    if(Array.isArray(myPickUs.value) && myPickUs.value.length > 0){
        myPickUs.value.forEach((item:any,index:number)=>{
            if(item.number == val){
                myPickUs.value.splice(index,1)
            }
        })
    }
    if(Array.isArray(myPickUsCode.value) && myPickUsCode.value.length > 0){
        myPickUsCode.value.forEach((item:string,index:number)=>{
            if(item == val){
                myPickUsCode.value.splice(index,1)
            }
        })
    }
    if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
        unPickUSerList.value.forEach((item:any)=>{
            if(myPickUsCode.value.includes(item.number)){
                item.isPick = true
            }else{
                item.isPick = false
            }
        })
    }
}
//取消选择
const cancelClose = () => {
    openclosebox.value = false;
    openOrClosePick.value = false;
    piclAllToale.value = 0
    myPickUsCode.value = []
    myPickUs.value = []
    oldPickUSer.value = []
    if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
        unPickUSerList.value.forEach((item:any)=>{
            item.isPick = false
        })
    }
    unPickUSerList.value = []
   
}
//清空选中的
const clearPick = () => {
    openOrClosePick.value = false;
    piclAllToale.value = 0
    myPickUs.value = []
    if(Array.isArray(unPickUSerList.value) && unPickUSerList.value.length > 0){
        unPickUSerList.value.forEach((item:any)=>{
            item.isPick = false
        })
    }
}
//更新到流程节点
const updateNode = () => {
    let yixuanz = unref(myPickUs)
    flowMap.value.forEach((item:any)=>{
        if(item.step == zhiXingStep){
			// console.log("P更新节点操作人---1-->",item.step , zhiXingStep)
			item.operator = yixuanz
		}
    })
    cancelClose()
}
defineExpose({
    runWorkFlow,
    reapplyWorkFlow,
    rundraftWorkFlow,
    refreshWorkFlow
})
</script>
<template>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-if="flowMap&&flowMap.length > 0" label="审批流程" name="flow">
               
                <el-steps direction="vertical" :active="currentProgress">
                    <el-step v-for="item in flowMap" :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>
                            <el-tooltip
                                v-if="item.helpTips!=''&&item.helpTips!='<p><br></p>'"
                                :content="item.helpTips"
                                raw-content
                                effect="light"
                            >
                                <i class="fa fa-question-circle-o"></i>
                            </el-tooltip>
                        </template>
                        <template  #description>
                        <div class="logCards">
                            <table>
                                <tbody>
                                    <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>
                                                                <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="judgeAddUser(item)"  class="addUser" @click="addPeople(item)">
                                                <svg-icon icon-class="addxuxian" size="50" />
                                            </div>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            
                        </div>
                        </template>

                         
                    </el-step>
                </el-steps>

                <el-drawer
                    ref="userDrwaer"
                    v-model="openclosebox"
                    title="选择人员"
                    direction="btt"
                    size="60%"
                >
                    <div ref="drawerRefBox" class="drawerBox">
                        <div v-if="packNodeInfo.runscope==1" class="">
                            <el-tree-select
                                ref="flowOrgTree"
                                style="width: 100%; "
                                v-model="treeSelectOrgId"
                                :data="orgTreeAry"
                                :props="orgProps"
                                node-key="id"
                                check-strictly
                                placeholder="请选择行政组织"
                                clearable
                            />
                            <el-input v-model="serachVal" clearable placeholder="请输入人们或工号" @input="searchUserCont"/>
                        </div>
                        <el-scrollbar class="scroBox" :height="scrollbarHeight" v-loading="loadUser">
                            
                            <div v-for="item in unPickUSerList" :class="item.isPick?'userBox active':'userBox'" @click="pickUserCont(item)">
                                <el-avatar shape="square" :size="50" :src="item.icon?item.icon:item.iconbase64?item.iconbase64:squareUrl" />
                                <div class="userInfBox">
                                    <div>{{item.name}}（{{item.number}}）</div>
                                    <div>{{item.departmentname}}{{item.postname}}</div>
                                </div>
                                <div class="delSvg">
                                   
                                </div>
                            </div>
                            

                        </el-scrollbar>
                        <el-pagination
                         v-if="packNodeInfo.runscope==1"
                            :page-size="pageSetup.pageSize"
                            :pager-count="7"
                            layout="prev, pager, next"
                            :total="pageSetup.total"
                            @change="pickPageTion"
                        />
                    </div>
                    <template #footer>
                        <div class="pickUserFootBox">
                            <el-text @click="openPickBox">已选择（{{piclAllToale}}）</el-text>
                            <div style="flex: auto">
                                <el-button @click="cancelClose">取消</el-button>
                                <el-button type="primary" @click="updateNode" >确定选择</el-button>
                            </div>
                            
                        </div>
                    </template>
                </el-drawer>

                <el-dialog
                    v-model:="openOrClosePick"
                    title="已选中的人员"
                    :before-close="closePickUserAry"
                >
                    <el-scrollbar class="scroBox" :height="scrollbarHeight">
                            
                            <div v-for="item in myPickUs" class="userBox " >
                                <el-avatar shape="square" :size="50" :src="item.icon?item.icon:item.iconbase64?item.iconbase64:squareUrl" />
                                <div class="userInfBox">
                                    <div>{{item.name}}（{{item.number}}）</div>
                                    <div>{{item.departmentname}}{{item.postname}}</div>
                                </div>
                                <div class="delSvg">
                                    <svg-icon icon-class="delet" :size="'15px'" @click="delMyPickUser(item.number)" />
                                </div>
                            </div>
                            
                    </el-scrollbar>
                    <template #footer>
                        <el-button type="primary" @click="clearPick">清空</el-button>
                    </template>
                </el-dialog>

                <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 v-loading="butLoad" type="primary" style="width:100%" @click="yesOrNo(props.stateForm.flowKey,1)">同意</el-button></el-col>
                                <el-col :span="8" class="juzhong"><el-button v-loading="butLoad" type="danger" style="width:100%" @click="yesOrNo(props.stateForm.flowKey,2)">驳回</el-button></el-col>
                                <el-col :span="4"></el-col>
                            </el-row>
                    </div>
                </el-affix>
            </el-tab-pane>
            <el-tab-pane v-if="pageLog&&pageLog.length > 0" label="修改记录" name="log">
            
                <el-timeline>
                    <el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
                        <el-card class="logCard">
                            <table  cellspacing="0"  >
                                <tbody>
                                    <tr  v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex">
                                        <td class="biankuang" width="100" >{{mastItem.label}}：</td>
                                        <td class="biankuang" >{{mastItem.value}}</td>
                                    </tr>
                                </tbody>
							</table>
                            <el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
                                <el-tab-pane v-for="(sonItem,sonIndex) in item.sunData" :label="sonIndex.toString()" :key="sonIndex">
                                    <el-card  v-for="(sunItem,sunIndex) in sonItem" :key="sunIndex" class="logCard" style="margin-top:10px;">
                                        <table  cellspacing="0"  >
                                            <tbody>
                                                <tr  v-for="(mastSununItem,mastSunIndex) in sunItem" :key="mastSunIndex">
                                                    <td class="biankuang" width="100" >{{mastSununItem.label}}：</td>
                                                    <td class="biankuang" ><el-text v-if="mastSununItem.types=='index'">{{sunIndex+1}}</el-text><el-text v-else>{{mastSununItem.value}}</el-text></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </el-card>
                                </el-tab-pane>
                            </el-tabs>
                            <table v-if="item.explicate" style="margin-top:20px;">
                                <tbody>
                                    <tr>
                                        <td class="biankuang" width="100">修改说明：</td>
                                        <td class="biankuang">{{item.explicate}}</td>
                                    </tr>
                                </tbody>
							</table>
                        </el-card>
                        
                    </el-timeline-item>
                </el-timeline>

            </el-tab-pane>
        </el-tabs>
   
</template>
<style  lang='scss' scoped>
.logCard{
    table {
        width: 100%;
        margin: 0;
        // border: 1px solid #EBEEF5;
        border-collapse: collapse;
    }
    
    th,
    td {
        // border: 1px solid #EBEEF5;
        text-align: left;
        padding: 0.5em;
        vertical-align: top;
    }
    :deep .el-tabs__content{
        padding: 5px;
    }
}
.logCards{
    td {
        vertical-align: top;
    }
}
.approvalBoard{

	background-color: #FFFFFF;
	border-top: 1px solid #EBEEF5;
	.juzhong{
		padding: 10px 0;
		text-align: center;
	}
	.appBoardTitle{
		padding: 5px 0 10px 0;
		display: block;
	}
}
.demo-tabs{
    :deep .el-drawer__footer {
        border-top: 1px solid #EBEEF5;
    }
    :deep .el-drawer__header{
        border-bottom: 1px solid #EBEEF5;
    }
}
.pickUserFootBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.scroBox{
    width: 100%;
    height: auto;
}
.pageBox{
    width: 100%;
    text-align: center;
}
.drawerBox{
    width: 100%;
    height: 100%;
}
.userBox{
    width: 100%;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dotted #EBEEF5;
   .userInfBox{
    width: calc(100% - 90px);
    padding: 2px 0;
   }
   .delSvg{
    width: 30px;
    height: 100%;
   }
}

.active{
    color: #000000;
    background-color:rgb(233, 233, 235);
}
</style>