全局属性-人员配置页面

This commit is contained in:
zhujiyan
2024-05-06 19:56:45 +08:00
parent f33b077960
commit 83c0109c61

View File

@@ -0,0 +1,105 @@
<!-- 全局属性人员配置页面 -->
<template>
<div class="home">
<!-- 未选择任何类型的人员 -->
<div class="nobody_info" v-if="checkUserList.length == 0">
<p>未选择任何类型的人员配置默认所有人均可参与此流程</p>
</div>
<navTitle>
<template #nav_name>配置使用该流程的人员</template>
</navTitle>
<div class="info">
<div class="info_item">
<div class="info_item_top">
<el-button type="primary">+ 选择机构</el-button>
</div>
<div class="info_item_bot">
<div class="checked" v-for="(item, index) in 22">工会办公室{{ index+1 }}</div>
</div>
</div>
<div class="info_item">
<div class="info_item_top">
<el-button type="primary">+ 选择角色</el-button>
</div>
<div class="info_item_bot">
<div class="checked" v-for="(item, index) in 30">小诺科技有限公司{{ index+1 }}</div>
</div>
</div>
<div class="info_item">
<div class="info_item_top">
<el-button type="primary">+ 选择用户</el-button>
</div>
<div class="info_item_bot">
<div class="checked" v-for="(item, index) in 40">党群工作部{{ index+1 }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { checkUser } from '@/api/user-boot/user'
import navTitle from '../components/navTitle.vue'
export default {
components: {
navTitle
},
data() {
return {
checkUserList: []
}
},
mounted() {},
methods: {}
}
</script>
<style scoped lang="scss">
.home {
width: 100%;
height: calc(100vh - 100px);
padding-top: 20px;
overflow: auto;
.nobody_info {
width: 100%;
height: 40px;
background-color: #fffbe6;
padding: 8px 15px;
border-radius: 4px;
border: 2px solid #ffe58f;
p {
font-size: 14px;
font-variant: tabular-nums;
margin: 0;
}
}
.info {
margin-top: 10px;
width: 100%;
height: auto;
.info_item {
width: 100%;
min-height: 80px;
border-bottom: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
justify-content: space-around;
.info_item_bot {
height: auto;
display: flex;
flex-wrap: wrap;
.checked {
margin: 3px;
padding: 0 7px;
font-size: 12px;
line-height: 20px;
white-space: nowrap;
background: #FAFAFA;
border: 1px solid #D9D9D9;
border-radius: 2px;
opacity: 1;
transition: all 0.3s;
}
}
}
}
}
</style>