116 lines
2.3 KiB
Vue
116 lines
2.3 KiB
Vue
<template>
|
|
<div class="imgecell">
|
|
<div class="mask"></div>
|
|
<div class="tool">
|
|
<eye-outlined style="color: #fff; font-size: 16px; cursor: pointer" @click="priviewImg" />
|
|
<form-outlined style="color: #fff; font-size: 16px; margin-left: 10px; cursor: pointer" @click="showeditor" v-privilege="'case-system:case:mainDiagnose'" v-if="type=='mainDiagnose'"/>
|
|
<form-outlined style="color: #fff; font-size: 16px; margin-left: 10px; cursor: pointer" @click="showeditor" v-privilege="'case-system:case:checkPermission'" v-else-if="type=='dpmas'"/>
|
|
<form-outlined style="color: #fff; font-size: 16px; margin-left: 10px; cursor: pointer" @click="showeditor" v-privilege="'case-system:case:checkdataImg'" v-else/>
|
|
</div>
|
|
|
|
<img class="viewimg" :src="src" alt="" />
|
|
<a-image
|
|
:width="100"
|
|
:style="{ display: 'none' }"
|
|
:preview="{
|
|
visible,
|
|
onVisibleChange: priviewImg,
|
|
}"
|
|
:src="src"
|
|
/>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { ref} from 'vue';
|
|
const props = defineProps({
|
|
src: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
type:{
|
|
type: String,
|
|
default: '',
|
|
},
|
|
imgIndex:{
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
dpmasId:{
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['openEditor']);
|
|
const visible = ref(false);
|
|
const priviewImg = (value) => {
|
|
visible.value = value;
|
|
};
|
|
const showeditor = () => {
|
|
emits('openEditor', {
|
|
src:props.src,
|
|
type:props.type,
|
|
imgIndex:props.imgIndex,
|
|
dpmasId:props.dpmasId
|
|
});
|
|
}
|
|
</script>
|
|
<style lang="less" >
|
|
#tui-image-editor {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.editbox {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
.editbox .mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.viewimg {
|
|
width: 100px;
|
|
height: 100px;
|
|
object-fit: cover;
|
|
|
|
}
|
|
.imgecell {
|
|
margin-top: 4px;
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 4px;
|
|
margin-right: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.imgecell .tool {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.imgecell .mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
</style>
|