ShutongInterconnectedChemicalCloudPlatform/src/components/workflow/selectResult.vue

<!--
@ 作者: 秦东
@ 时间: 2023-10-13 09:48:27
@ 备注: 已选择得内容
-->
<script lang='ts' setup>
let props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  list: {
    type: Array,
    default: () => [{ type: 'role', data:[], cancel:()=>{} }]
  }
})
let emits = defineEmits(['del'])
// console.log("已选择得内容",props.list)
</script>
<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.roleId">
						<img src="@/assets/images/icon_role.png">
						<span>{{item.roleName}}</span>
						<img src="@/assets/images/cancel.png" @click="cancel(item)">
					</li>
				</template>
				<template v-if="type === 'department'">
					<li v-for="item in data" :key="item.id">
						<img src="@/assets/images/icon_file.png">
						<span>{{item.departmentName}}</span>
						<img src="@/assets/images/cancel.png" @click="cancel(item)">
					</li>
				</template>
				<template v-if="type === 'employee'">
					<li v-for="item in data" :key="item.id">
						<img v-if="item.icon != ''" :src="item.icon">
						<img v-if="item.icon == '' && item.iconToBase64 != ''" :src="item.iconToBase64">
						<img v-if="item.icon == '' && item.iconToBase64 == ''"  src="@/assets/images/icon_people.png">
						<span>{{item.employeeName}}</span>
						<img src="@/assets/images/cancel.png" @click="cancel(item)">
			
					</li>
				</template>
				<template v-if="type === 'position'">
					<li v-for="item in data" :key="item.roleId">
						<img src="@/assets/images/icon_role.png">
						<span>{{item.name}}</span>
						<img src="@/assets/images/cancel.png" @click="cancel(item)">
					</li>
				</template>
				<template v-if="type === 'formword'">
					<li v-for="item in data" :key="item.roleId">
						<img src="@/assets/images/icon_role.png">
						<span>{{item.name}}</span>
						<img src="@/assets/images/cancel.png" @click="cancel(item)">
					</li>
				</template>
			</template>
		</ul>
	</div>
</template>
<style lang="less">
.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;
        }

        &: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;
    }
  }
}
</style>