215 lines
6.0 KiB
Vue
215 lines
6.0 KiB
Vue
<!--
|
||
* @Author: hisense.liangjunhua
|
||
* @Date: 2022-07-12 09:42:44
|
||
* @LastEditors: hisense.liangjunhua
|
||
* @LastEditTime: 2022-07-14 16:25:57
|
||
* @Description:我的申请 能力申请 查看详情
|
||
-->
|
||
<template>
|
||
<div class="top">
|
||
<div class="title">基本信息</div>
|
||
<div class="main">
|
||
<div>
|
||
<p class="item">
|
||
<span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
|
||
<span>能力名称：{{ props.refObj.dto.name }}</span>
|
||
<span>能力类型：{{ props.refObj.dto.type }}</span>
|
||
</p>
|
||
<p class="item">
|
||
<span>共享条件：{{ props.refObj.dto.shareCondition }}</span>
|
||
<span>能力描述：{{ props.refObj.dto.description }}</span>
|
||
<span>归属部门：{{ props.refObj.dto.deptName }}</span>
|
||
</p>
|
||
<p v-for="item in props.refObj.dto.infoList" :key="item.attrType">
|
||
<span>{{ item.attrType + '：' + item.attrValue }}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, defineProps } from 'vue'
|
||
const props = defineProps({
|
||
refObj: { type: Object, default: null },
|
||
})
|
||
console.log(props.refObj, '=====================================')
|
||
// if (props.refObj.resourceApplication) {
|
||
// showArr.value = []
|
||
// for (const key in props.refObj.resourceApplication) {
|
||
// if (props.refObj.resourceApplication[key].length > 0) {
|
||
// let obj = { name: '', instanceId: '', list: [], list2: [] }
|
||
// obj.name = key
|
||
// props.refObj.resourceApplication[key].map((item) => {
|
||
// obj.instanceId = item.instanceId
|
||
// if (item.resources.length > 0) {
|
||
// item.resources.map((val) => {
|
||
// obj.list.push(val)
|
||
// })
|
||
// } else {
|
||
// item.camera.map((val) => {
|
||
// obj.list2.push(val)
|
||
// })
|
||
// }
|
||
// })
|
||
// showArr.value.push(obj)
|
||
// }
|
||
// }
|
||
// }
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.title {
|
||
font-size: 0.18rem;
|
||
color: #000;
|
||
font-weight: bold;
|
||
margin-bottom: 0.2rem;
|
||
padding-left: 0.1rem;
|
||
border-left: 0.06rem #0058e1 solid;
|
||
}
|
||
.top {
|
||
margin-bottom: 0.1rem;
|
||
.main {
|
||
background: #eee;
|
||
padding: 0.2rem 0.2rem 0.1rem;
|
||
p {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
& > span {
|
||
width: 100%;
|
||
}
|
||
.enclosure {
|
||
width: 95%;
|
||
padding: 0.05rem 0.1rem;
|
||
background: #ddd;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 0.05rem;
|
||
}
|
||
.btn:hover {
|
||
color: #0058e1;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.item {
|
||
span {
|
||
width: 2.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
.main {
|
||
.item {
|
||
border-top: 1px #eee solid;
|
||
.deptName {
|
||
color: #0058e1;
|
||
font-size: 0.16rem;
|
||
margin-top: 0.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
.img {
|
||
width: 0.05rem;
|
||
height: 0.05rem;
|
||
border-radius: 0.05rem;
|
||
background: #0058e1;
|
||
margin-right: 0.1rem;
|
||
}
|
||
}
|
||
.oddNumbers {
|
||
margin: 0.1rem 0 0 0.15rem;
|
||
}
|
||
.box {
|
||
margin-left: 0.1rem;
|
||
.ability {
|
||
height: 1.3rem;
|
||
display: flex;
|
||
border-bottom: 1px #eee solid;
|
||
padding: 0.1rem 0;
|
||
.left {
|
||
display: inline-block;
|
||
width: 1.1rem;
|
||
height: 1.1rem;
|
||
margin-left: 0.1rem;
|
||
background: url('~@/assets/home/sxt_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.sxt {
|
||
background: url('~@/assets/home/sxt_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
.yyzy {
|
||
background: url('~@/assets/home/yyzy_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.znsf {
|
||
background: url('~@/assets/home/znsf_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.tcfw {
|
||
background: url('~@/assets/home/tcfw_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.kfzj {
|
||
background: url('~@/assets/home/kfzj_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.ywzj {
|
||
background: url('~@/assets/home/ywzj_square.png') no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
.btn {
|
||
cursor: pointer;
|
||
color: #0087ff;
|
||
align-self: flex-end;
|
||
padding: 5px 10px;
|
||
border: 1px #0087ff solid;
|
||
border-radius: 0.2rem;
|
||
}
|
||
.right {
|
||
flex: 1;
|
||
margin-left: 0.15rem;
|
||
.ability-top {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.name {
|
||
.type {
|
||
background: #0087ff;
|
||
color: #fff;
|
||
padding: 2px 10px;
|
||
border-radius: 10px;
|
||
margin-left: 0.1rem;
|
||
}
|
||
}
|
||
}
|
||
.ability-bottom {
|
||
margin-top: 0.15rem;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
.dec {
|
||
width: 7rem;
|
||
height: 0.44rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.result:hover {
|
||
color: #0058e1;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|