feat:人员信息
This commit is contained in:
dzc committed
1 parent
c5051b9ffe
commit
36d40057b0
12 files changed
+912
-8
No files matched your search
@@ -93,6 +93,7 @@ $spacing-sizes: (
|
||||
align-items: $value;
|
||||
}
|
||||
}
|
||||
|
||||
//text
|
||||
@each $var in (left, center, right) {
|
||||
.text-#{$var} {
|
||||
@@ -126,4 +127,4 @@ $spacing-sizes: (
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
<!-- 图片预览 -->
|
||||
<script lang="ts" setup>
|
||||
import { useMessage } from "/@/hooks/message"
|
||||
import { downBlobFile } from "/@/utils/other"
|
||||
|
||||
type Props = {
|
||||
src?: string
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
download?: boolean | string
|
||||
downloadName?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 50,
|
||||
height: 50,
|
||||
download: false,
|
||||
downloadName: "下载",
|
||||
})
|
||||
|
||||
const formatSrc = (src: string, type: "string" | "array" = "string"): string | string[] => {
|
||||
switch (type) {
|
||||
case "string":
|
||||
if (!src.match(/x-oss-process/g)) {
|
||||
return src.split(",")[0]
|
||||
} else {
|
||||
return src.split("?")[0]
|
||||
}
|
||||
case "array":
|
||||
if (!src.match(/x-oss-process/g)) {
|
||||
return src.split(",")
|
||||
} else {
|
||||
return src
|
||||
.split("?")
|
||||
.filter(
|
||||
(item) =>
|
||||
item.endsWith(".jpg") || item.endsWith(".png") || item.endsWith(".gif") || item.endsWith(".jpeg") || item.endsWith(".webp"),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const realSrc = computed(() => {
|
||||
if (!props.src) return ""
|
||||
let real_src: string = formatSrc(props.src, "string") as string
|
||||
return dispatchUrl(real_src) ?? ""
|
||||
})
|
||||
const realSrcList = computed(() => {
|
||||
if (!props.src) return ""
|
||||
let real_src = (formatSrc(props.src, "array") as string[]).map((v) => dispatchUrl(v))
|
||||
return real_src ?? []
|
||||
})
|
||||
const realWidth = computed(() => (typeof props.width == "string" ? props.width : `${props.width}px`))
|
||||
const realHeight = computed(() => (typeof props.height == "string" ? props.height : `${props.height}px`))
|
||||
|
||||
function dispatchUrl(url?: string) {
|
||||
if (!url) return ""
|
||||
return url.includes("http") ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
|
||||
}
|
||||
|
||||
// 图片下载
|
||||
const download = (src: string) => {
|
||||
if (!src) return useMessage().error("图片链接不存在")
|
||||
downBlobFile(src, {}, `${props.downloadName}.png`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.src" class="flex flex-col items-center">
|
||||
<el-image hide-on-click-modal preview-teleported :src="`${realSrc}`" fit="cover"
|
||||
:style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList" loading="lazy">
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<el-button v-if="props.download" size="small" type="primary" link @click="download(props.src)">下载</el-button>
|
||||
</div>
|
||||
<div v-else :style="`width:${realWidth};height:${realHeight};`" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-image {
|
||||
border-radius: 5px;
|
||||
background-color: #ebeef5;
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
|
||||
:deep(.el-image__inner) {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.image-slot) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center gap-2 max-w-full">
|
||||
<el-tag v-if="props.code == '0'" size="small" type="warning">未知</el-tag>
|
||||
<el-tag v-if="props.code == '1'" size="small">男</el-tag>
|
||||
<el-tag v-if="props.code == '2'" size="small" type="success">女</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
export type Props = {
|
||||
/**
|
||||
* - 0 未知
|
||||
* - 1 男
|
||||
* - 2 女
|
||||
*/
|
||||
code?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
code: "0",
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2 max-w-full" v-if="props.code == '0'">
|
||||
<div class="w-2 h-2 rounded-full bg-error" />
|
||||
<el-tag size="small" type="danger">已删除</el-tag>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2 max-w-full" v-if="props.code == '1'">
|
||||
<div class="w-2 h-2 rounded-full bg-success" />
|
||||
<el-tag size="small" type="success">正常</el-tag>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2 max-w-full" v-if="props.code == '2'">
|
||||
<div class="w-2 h-2 rounded-full bg-warning" />
|
||||
<el-tag size="small" type="warning">冻结</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
export type Props = {
|
||||
/**
|
||||
* - 0 已删除
|
||||
* - 1 正常
|
||||
* - 2 冻结
|
||||
*/
|
||||
code?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
code: '1',
|
||||
})
|
||||
</script>
|
||||
+14
-6
@@ -14,10 +14,14 @@ import Sign from '/@/components/Sign/index.vue';
|
||||
import ChinaArea from '/@/components/ChinaArea/index.vue';
|
||||
import OrgSelector from '/@/components/OrgSelector/index.vue';
|
||||
|
||||
import TagOnline from "/@/components/Tag/TagOnline.vue"
|
||||
import TagSync from "/@/components/Tag/TagSync.vue"
|
||||
import PreviewImage from "/@/components/PreviewImage/index.vue"
|
||||
|
||||
import DictSelect from "/@/components/DictSelect/index.vue"
|
||||
import TagOnline from "/@/components/Tag/TagOnline.vue"
|
||||
import TagSex from "/@/components/Tag/TagSex.vue"
|
||||
import TagSync from "/@/components/Tag/TagSync.vue"
|
||||
import TagUserStatus from "/@/components/Tag/TagUserStatus.vue"
|
||||
|
||||
// import DictSelect from "/@/components/DictSelect/index.vue"
|
||||
|
||||
// 第三方组件
|
||||
import ElementPlus from 'element-plus';
|
||||
@@ -56,10 +60,14 @@ export default {
|
||||
app.component('OrgSelector', OrgSelector);
|
||||
app.component('Sign', Sign);
|
||||
|
||||
app.component('TagOnline', TagOnline);
|
||||
app.component('TagSync', TagSync);
|
||||
app.component('PreviewImage', PreviewImage)
|
||||
|
||||
app.component('DictSelect', DictSelect);
|
||||
app.component('TagOnline', TagOnline);
|
||||
app.component('TagSex', TagSex);
|
||||
app.component('TagSync', TagSync);
|
||||
app.component('TagUserStatus', TagUserStatus);
|
||||
|
||||
// app.component('DictSelect', DictSelect);
|
||||
|
||||
// 导入全部的elmenet-plus的图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
|
||||
Reference in new issue
Block a user