hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-19 15:56:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

培训发生组织基本联调完毕

Browse Source
This commit is contained in:
zhangsir
2024-10-26 15:34:26 +08:00
parent 7d510a2c25
commit 80342c0862
5 changed files with 398 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/components/project/lockLecturer.vue Normal file
View File

@@ -0,0 +1,251 @@
<template>
<div @click="openDrawer">
<slot></slot>
</div>
<a-drawer
:visible="visible"
class="drawerStyle impotergroupleader"
placement="right"
width="80%"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">{{ title }}</div>
<!-- <img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/> -->
<a-button @click="closeDrawer" style="margin-right: 10px;" type="primary" class="btn1">返回</a-button>
</div>
<div class="content">
<div class="title">
<div class="line"></div>
<div class="text">培训发生组织基本信息</div>
</div>
<div class="desc">
<a-descriptions :column="2" bordered>
<a-descriptions-item label="培训发生组织编号">{{formData?.affiliationCode||'-'}}</a-descriptions-item>
<a-descriptions-item label="培训发生组名称">{{formData?.affiliationName||'-'}}</a-descriptions-item>
<a-descriptions-item label="是否为根节点">{{formData?.isParent==1?'否':'是'}}</a-descriptions-item>
<a-descriptions-item label="组织担当">{{formData?.act||'-'}}</a-descriptions-item>
<a-descriptions-item label="状态">
{{['-','待审核', '审核中', '已完成', '审核失败'][formData?.type]}}
</a-descriptions-item>
</a-descriptions>
</div>
<div class="tabs">
<a-tabs @change="change" v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="管理组织列表">
<div style="margin-bottom: 30px">
<a-table :columns="columns" :data-source="formData?.tableData" />
</div>
<div style="margin-bottom: 100px">
<a-descriptions :column="2" bordered>
<a-descriptions-item label="培训发生组织编号">{{formData?.affiliationCode||'-'}}</a-descriptions-item>
<a-descriptions-item label="培训发生组名称">{{formData?.affiliationName||'-'}}</a-descriptions-item>
<a-descriptions-item label="是否为根节点">{{formData?.isParent==1?'否':'是'}}</a-descriptions-item>
<a-descriptions-item label="组织担当">{{formData?.act||'-'}}</a-descriptions-item>
<a-descriptions-item label="一级审批人">{{formData?.one||'-'}}</a-descriptions-item>
<a-descriptions-item label="二级审批人">{{formData?.two||'-'}}</a-descriptions-item>
<a-descriptions-item label="三级审批人">{{formData?.three||'-'}}</a-descriptions-item>
<a-descriptions-item label="状态">
{{['-','待审核', '审核中', '已完成', '审核失败'][formData?.type]}}
</a-descriptions-item>
</a-descriptions>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="审批记录" force-render>
<div>
<a-table :columns="columnsTwo" :data-source="formData?.tableDataTwo" />
</div>
</a-tab-pane>
</a-tabs>
</div>
</div>
<div class="btnn">
<button class="btn2" @click="closeDrawer">取消</button>
<button class="btn2" @click="closeDrawer">确定</button>
</div>
</div>
</a-drawer>
</template>
<script setup>
import {defineEmits, defineProps, ref,watch} from "vue";
import * as api from '@/api/Lecturer'
const props = defineProps({
id: {
type: String,
defalut: ""
},
title: {
type: String,
default: ""
}
});
const emit = defineEmits({});
const columns = [
{
title: '组织的名称',
dataIndex: 'orgName',
key: 'orgName',
},
{
title: '类型',
dataIndex: 'age',
key: 'age',
},
{
title: '状态',
dataIndex: 'address',
key: 'address',
},
];
const formData = ref({})
const columnsTwo = [
{
title: '层级审批人',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
dataIndex: 'age',
key: 'age',
},
{
title: '审批人',
dataIndex: 'address',
key: 'age',
},
{
title: '审批时间',
dataIndex: 'updateTime',
key: 'updateTime',
},
{
title: '审批建议',
dataIndex: 'address',
key: 'age',
},
]
const visible = ref(false);
watch(visible, (val)=>{
console.log(val,'val',props.id)
if(val){
api.getAffiliationById(props.id).then(res=>{
console.log(res,'resssss')
formData.value = res.data.data
formData.value.act = filterList(formData.value.affiliationUserList,0)
formData.value.one = filterList(formData.value.affiliationUserList,1)
formData.value.two = filterList(formData.value.affiliationUserList,2)
formData.value.three = filterList(formData.value.affiliationUserList,3)
formData.value.tableData = res.data.data.affiliationOrgList
formData.value.tableDataTwo = res.data.data.affiliationOrgList
})
}
})
const filterList = (val,index) => {
return val?.filter(item=>item.type==index).map(item=>item.userName).join(',')
}
const closeDrawer = () => {
visible.value = false;
};
const activeKey = ref("1");
const change = (val)=>{
console.log(val,'val')
}
function openDrawer() {
visible.value = true;
}
</script>
<style scoped lang="scss">
.impotergroupleader > .ant-drawer-content-wrapper {
min-width: 800px !important;
width: 800px !important;
}
.impotergroupleader {
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: auto;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.content{
padding-right: 20px;
.title{
display: flex;
align-items: center;
margin-bottom: 20px;
.line{
width: 5px;
height: 15px;
background: #4ea6ff;
margin-right: 10px;
}
.text{
}
}
.desc{
margin-bottom: 30px;
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>