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

126 lines
3.3 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>
<div class="name">
<span>{{ item.name }}</span>
<span>{{ item.type }}</span>
</div>
<div class="description">{{ item.description }}</div>
<div class="remove" @click="removeFunction(item)"></div>
</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([])
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) => {
props.dataList.map((item, index) => {
if (item.name == data.name) {
arr.splice(arr.indexOf(data.name), 1)
dataResourceId.splice(dataResourceId.indexOf(data.id), 1)
depList.value.depID = dataResourceId
depList.value.Name = arr
dataForm.value.splice(index, 1)
mybus.emit('reomveOldData', depList.value)
console.log('depList.value', depList.value)
}
})
}
</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 {
margin-bottom: 0.3rem;
border-bottom: 0.01rem #dddee1 solid;
padding-bottom: 0.3rem;
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;
}
}
.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 {
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>