137 lines
2.8 KiB
Vue
137 lines
2.8 KiB
Vue
<!--
|
||
* @Date: 2022-08-26 16:29:24
|
||
* @LastEditors: StavinLi 495727881@qq.com
|
||
* @LastEditTime: 2022-09-21 14:36:30
|
||
* @FilePath: /Workflow-Vue3/src/components/selectResult.vue
|
||
-->
|
||
<template>
|
||
<div class="select-result l">
|
||
<p class="clear">
|
||
已选（{{ total }}）
|
||
<a @click="emits('del')">清空</a>
|
||
</p>
|
||
<ul>
|
||
<template v-for="{ type, data, cancel } in list" :key="type">
|
||
<template v-if="type === 'role'">
|
||
<li v-for="item in data" :key="item.id">
|
||
<div style="display: flex; flex-direction: row">
|
||
<div class="f11">
|
||
<el-icon style="font-size: 20px">
|
||
<Share />
|
||
</el-icon>
|
||
</div>
|
||
<div class="f12">{{ item.name }}</div>
|
||
<div class="f13">
|
||
<el-button size="small" text @click="cancel(item)" :icon="CircleClose"></el-button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</template>
|
||
<template v-if="type === 'dept'">
|
||
<li v-for="item in data" :key="item.id">
|
||
<div style="display: flex; flex-direction: row">
|
||
<div class="f11">
|
||
<el-icon style="font-size: 20px">
|
||
<Grid />
|
||
</el-icon>
|
||
</div>
|
||
<div class="f12">{{ item.name }}</div>
|
||
<div class="f13">
|
||
<el-button size="small" text @click="cancel(item)" :icon="CircleClose"></el-button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</template>
|
||
<template v-if="type === 'user'">
|
||
<li v-for="item in data" :key="item.id">
|
||
<div style="display: flex; flex-direction: row">
|
||
<div class="f11">
|
||
<preview-image width="20px" height="20px" :src="item.avatar" />
|
||
</div>
|
||
<div class="f12">{{ item.name }}</div>
|
||
<div class="f13">
|
||
<el-button size="small" text @click="cancel(item)" :icon="CircleClose"></el-button>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</template>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { CircleClose, Grid, Share } from "@element-plus/icons-vue"
|
||
import UploadImg from "/@/components/Upload/Image.vue"
|
||
|
||
defineProps({
|
||
total: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: () => [{ type: "role", data, cancel }],
|
||
},
|
||
})
|
||
let emits = defineEmits(["del"])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.select-result {
|
||
width: 276px;
|
||
height: 100%;
|
||
font-size: 12px;
|
||
|
||
ul {
|
||
height: 460px;
|
||
overflow-y: auto;
|
||
|
||
li {
|
||
margin: 11px 26px 13px 19px;
|
||
line-height: 17px;
|
||
|
||
span {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
img:first-of-type {
|
||
width: 14px;
|
||
vertical-align: middle;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
img:last-of-type {
|
||
float: right;
|
||
margin-top: 2px;
|
||
width: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
p {
|
||
padding-left: 19px;
|
||
padding-right: 20px;
|
||
line-height: 37px;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
|
||
a {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.f11 {
|
||
width: 30px;
|
||
}
|
||
|
||
.f12 {
|
||
width: calc(100% - 60px);
|
||
height: 25px;
|
||
line-height: 25px;
|
||
}
|
||
|
||
.f13 {
|
||
width: 30px;
|
||
}
|
||
</style>
|