hi-ucs/front/src/views/home/AbilityToApplyFor.vue

133 lines
3.5 KiB
Vue
Raw Normal View History

2022-06-23 19:19:48 +08:00
<template>
<div class="ability-to-apply-for">
<div class="title">申请能力</div>
<div
v-for="(item, index) in dataForm"
:key="index"
class="ability-to-apply-for-content"
>
<div class="dep-name">
<span></span>
{{ item.deptName }}
</div>
2022-06-28 21:49:50 +08:00
<template v-for="val in item.children" :key="val.resourceId">
<div class="item">
<div class="name">
<span>{{ val.resourceName }}</span>
<span>{{ val.type }}</span>
</div>
<div class="description">{{ val.description || '--' }}</div>
<div class="remove" @click="removeFunction(val)"></div>
</div>
</template>
2022-06-23 19:19:48 +08:00
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, defineProps } from 'vue'
import mybus from '@/myplugins/mybus'
const props = defineProps({
dataList: { type: Array, default: null },
})
let dataForm = ref([])
2022-06-28 21:49:50 +08:00
// eslint-disable-next-line vue/no-setup-props-destructure
2022-06-23 19:19:48 +08:00
dataForm.value = props.dataList
const router = useRouter()
const arr =
router.currentRoute.value.query.name instanceof Array
? router.currentRoute.value.query.name
: [router.currentRoute.value.query.name]
const dataResourceId = router.currentRoute.value.query.resourceId
const depList = ref({
Name: [],
depID: [],
})
//移除方法
const removeFunction = (data) => {
2022-06-29 09:56:01 +08:00
dataForm.value.map((val) => {
val.children = val.children.filter(
(item) => item.resourceId !== data.resourceId
)
2022-06-23 19:19:48 +08:00
})
2022-06-29 09:56:01 +08:00
dataForm.value = dataForm.value.filter((val) => val.children.length !== 0)
2022-06-23 19:19:48 +08:00
}
</script>
<style scoped lang="less">
.ability-to-apply-for {
.title {
font-size: 0.16rem;
color: #212121;
border-bottom: 0.01rem #dddee1 solid;
padding-bottom: 0.1rem;
margin-bottom: 0.2rem;
}
.ability-to-apply-for-content {
2022-06-28 21:49:50 +08:00
// margin-bottom: 0.3rem;
// border-bottom: 0.01rem #dddee1 solid;
// padding-bottom: 0.3rem;
2022-06-23 19:19:48 +08:00
padding-right: 0.5rem;
position: relative;
.dep-name {
color: #0558e1;
font-size: 0.18rem;
display: flex;
align-items: center;
line-height: 0.18rem;
margin-bottom: 0.2rem;
span {
display: inline-block;
width: 0.05rem;
height: 0.05rem;
background: #0558e1;
border-radius: 0.05rem;
margin-right: 0.05rem;
}
}
2022-06-28 21:49:50 +08:00
.item {
padding-bottom: 0.1rem;
margin-bottom: 0.1rem;
border-bottom: 1px solid #dddee1;
position: relative;
}
2022-06-23 19:19:48 +08:00
.name {
margin-bottom: 0.2rem;
span:first-child {
display: inline-block;
margin-right: 0.08rem;
font-size: 0.2rem;
color: #000000;
}
span:last-child {
display: inline-block;
padding: 0 0.05rem;
background: #00b8e6;
color: #fff;
}
}
.description {
2022-06-28 21:49:50 +08:00
width: 10rem;
2022-06-23 19:19:48 +08:00
color: rgba(0, 0, 0, 0.45);
}
.remove {
width: 0.32rem;
height: 0.32rem;
position: absolute;
right: 0;
top: 50%;
margin-top: -0.16rem;
background: url('~@/assets/home/remove.png') no-repeat;
background-size: cover;
cursor: pointer;
}
.remove:hover {
background: url('~@/assets/home/remove-hover.png') no-repeat;
background-size: cover;
}
}
}
</style>