🔱: [client] sync upgrade with 21 commits [trident-sync]
'admin-22.12.12:发布v2.4.21版本，具体更新内容查看CHANGELOG.md' !42 修复 工作流无法添加新节点问题 Merge pull request !42 from beta/bugfix_workflow 修复 工作流无法添加新节点问题 1. 修复 工作流无法添加新节点问题 2. 修复 左侧导航无法隐藏问题 'admin-22.12.09:发布v2.4.2版本，具体更新内容查看CHANGELOG.md' !41 修复get请求传递嵌套对象或数组时无法正常编码问题 Merge pull request !41 from 随心/master !40 开启TagsView缓存后，刷新后所有的路由都变成组件缓存了 Merge pull request !40 from mrjimin/master 修复get请求传递嵌套对象或数组时无法正常编码问题 update src/layout/routerView/parent.vue. Signed-off-by: mrjimin <z8888788@163.com> update src/layout/routerView/parent.vue. 这里应该拿到的是已经设置开启组件缓存的路由，而不是全部，需要先判断item.meta.isKeepAlive Signed-off-by: mrjimin <z8888788@163.com> 'admin-22.11.30:发布v2.4.1版本，具体更新内容查看CHANGELOG.md' Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin 'admin-22.11.30:删除v2.4.0版本不需要的依赖' update src/views/error/404.vue. Signed-off-by: lyt-Top <1105290566@qq.com> update src/components/table/index.vue. Signed-off-by: lyt-Top <1105290566@qq.com> 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.29:发布v2.4.0版本，具体更新内容查看CHANGELOG.md' 'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题' 'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐' 'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题' ...
This commit is contained in:
H0nGzA1
26
web/src/components/auth/auth.vue
Normal file
26
web/src/components/auth/auth.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<slot v-if="getUserAuthBtnList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="auth">
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
// 定义变量内容
|
||||
const stores = useUserInfo();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
|
||||
// 获取 pinia 中的用户权限
|
||||
const getUserAuthBtnList = computed(() => {
|
||||
return userInfos.value.authBtnList.some((v: string) => v === props.value);
|
||||
});
|
||||
</script>
|
||||
27
web/src/components/auth/authAll.vue
Normal file
27
web/src/components/auth/authAll.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<slot v-if="getUserAuthBtnList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="authAll">
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import { judementSameArr } from '/@/utils/arrayOperation';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
// 定义变量内容
|
||||
const stores = useUserInfo();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
|
||||
// 获取 pinia 中的用户权限
|
||||
const getUserAuthBtnList = computed(() => {
|
||||
return judementSameArr(props.value, userInfos.value.authBtnList);
|
||||
});
|
||||
</script>
|
||||
32
web/src/components/auth/auths.vue
Normal file
32
web/src/components/auth/auths.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<slot v-if="getUserAuthBtnList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="auths">
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
// 定义变量内容
|
||||
const stores = useUserInfo();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
|
||||
// 获取 pinia 中的用户权限
|
||||
const getUserAuthBtnList = computed(() => {
|
||||
let flag = false;
|
||||
userInfos.value.authBtnList.map((val: string) => {
|
||||
props.value.map((v) => {
|
||||
if (val === v) flag = true;
|
||||
});
|
||||
});
|
||||
return flag;
|
||||
});
|
||||
</script>
|
||||
143
web/src/components/cropper/index.vue
Normal file
143
web/src/components/cropper/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="更换头像" v-model="state.isShowDialog" width="769px">
|
||||
<div class="cropper-warp">
|
||||
<div class="cropper-warp-left">
|
||||
<img :src="state.cropperImg" class="cropper-warp-left-img" />
|
||||
</div>
|
||||
<div class="cropper-warp-right">
|
||||
<div class="cropper-warp-right-title">预览</div>
|
||||
<div class="cropper-warp-right-item">
|
||||
<div class="cropper-warp-right-value">
|
||||
<img :src="state.cropperImgBase64" class="cropper-warp-right-value-img" />
|
||||
</div>
|
||||
<div class="cropper-warp-right-label">100 x 100</div>
|
||||
</div>
|
||||
<div class="cropper-warp-right-item">
|
||||
<div class="cropper-warp-right-value">
|
||||
<img :src="state.cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
|
||||
</div>
|
||||
<div class="cropper-warp-right-label">50 x 50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default">更 换</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="cropper">
|
||||
import { reactive, nextTick } from 'vue';
|
||||
import Cropper from 'cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
cropperImg: '',
|
||||
cropperImgBase64: '',
|
||||
cropper: '' as RefType,
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (imgs: string) => {
|
||||
state.cropperImg = imgs;
|
||||
state.isShowDialog = true;
|
||||
nextTick(() => {
|
||||
initCropper();
|
||||
});
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 更换
|
||||
const onSubmit = () => {
|
||||
// state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
|
||||
};
|
||||
// 初始化cropperjs图片裁剪
|
||||
const initCropper = () => {
|
||||
const letImg = <HTMLImageElement>document.querySelector('.cropper-warp-left-img');
|
||||
state.cropper = new Cropper(letImg, {
|
||||
viewMode: 1,
|
||||
dragMode: 'none',
|
||||
initialAspectRatio: 1,
|
||||
aspectRatio: 1,
|
||||
preview: '.before',
|
||||
background: false,
|
||||
autoCropArea: 0.6,
|
||||
zoomOnWheel: false,
|
||||
crop: () => {
|
||||
state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cropper-warp {
|
||||
display: flex;
|
||||
.cropper-warp-left {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 350px;
|
||||
flex: 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
background: var(--el-color-white);
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
cursor: move;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
.cropper-warp-left-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.cropper-warp-right {
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
.cropper-warp-right-title {
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.cropper-warp-right-item {
|
||||
margin: 15px 0;
|
||||
.cropper-warp-right-value {
|
||||
display: flex;
|
||||
.cropper-warp-right-value-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--el-border-radius-circle);
|
||||
margin: auto;
|
||||
}
|
||||
.cropper-size {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.cropper-warp-right-label {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-primary);
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
web/src/components/editor/index.vue
Normal file
101
web/src/components/editor/index.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<Toolbar :editor="editorRef" :mode="mode" />
|
||||
<Editor
|
||||
:mode="mode"
|
||||
:defaultConfig="state.editorConfig"
|
||||
:style="{ height }"
|
||||
v-model="state.editorVal"
|
||||
@onCreated="handleCreated"
|
||||
@onChange="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="wngEditor">
|
||||
// https://www.wangeditor.com/v5/for-frame.html#vue3
|
||||
import '@wangeditor/editor/dist/css/style.css';
|
||||
import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
|
||||
import { IDomEditor } from '@wangeditor/editor';
|
||||
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 是否禁用
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 内容框默认 placeholder
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => '请输入内容...',
|
||||
},
|
||||
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
|
||||
// 模式，可选 <default|simple>，默认 default
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => 'default',
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: String,
|
||||
default: () => '310px',
|
||||
},
|
||||
// 双向绑定，用于获取 editor.getHtml()
|
||||
getHtml: String,
|
||||
// 双向绑定，用于获取 editor.getText()
|
||||
getText: String,
|
||||
});
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['update:getHtml', 'update:getText']);
|
||||
|
||||
// 定义变量内容
|
||||
const editorRef = shallowRef();
|
||||
const state = reactive({
|
||||
editorConfig: {
|
||||
placeholder: props.placeholder,
|
||||
},
|
||||
editorVal: props.getHtml,
|
||||
});
|
||||
|
||||
// 编辑器回调函数
|
||||
const handleCreated = (editor: IDomEditor) => {
|
||||
editorRef.value = editor;
|
||||
};
|
||||
// 编辑器内容改变时
|
||||
const handleChange = (editor: IDomEditor) => {
|
||||
emit('update:getHtml', editor.getHtml());
|
||||
emit('update:getText', editor.getText());
|
||||
};
|
||||
// 页面销毁时
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
editor.destroy();
|
||||
});
|
||||
// 监听是否禁用改变
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
|
||||
watch(
|
||||
() => props.disable,
|
||||
(bool) => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
bool ? editor.disable() : editor.enable();
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
// 监听双向绑定值改变，用于回显
|
||||
watch(
|
||||
() => props.getHtml,
|
||||
(val) => {
|
||||
state.editorVal = val;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
241
web/src/components/iconSelector/index.vue
Normal file
241
web/src/components/iconSelector/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="icon-selector w100 h100">
|
||||
<el-input
|
||||
v-model="state.fontIconSearch"
|
||||
:placeholder="state.fontIconPlaceholder"
|
||||
:clearable="clearable"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
ref="inputWidthRef"
|
||||
@clear="onClearFontIcon"
|
||||
@focus="onIconFocus"
|
||||
@blur="onIconBlur"
|
||||
>
|
||||
<template #prepend>
|
||||
<SvgIcon
|
||||
:name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix"
|
||||
class="font14"
|
||||
v-if="state.fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : state.fontIconPrefix?.indexOf('ele-') > -1"
|
||||
/>
|
||||
<i v-else :class="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="state.fontIconWidth"
|
||||
transition="el-zoom-in-top"
|
||||
popper-class="icon-selector-popper"
|
||||
trigger="click"
|
||||
:virtual-ref="inputWidthRef"
|
||||
virtual-triggering
|
||||
>
|
||||
<template #default>
|
||||
<div class="icon-selector-warp">
|
||||
<div class="icon-selector-warp-title">{{ title }}</div>
|
||||
<el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
|
||||
<el-tab-pane lazy label="ali" name="ali">
|
||||
<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label="ele" name="ele">
|
||||
<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane lazy label="awe" name="awe">
|
||||
<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="iconSelector">
|
||||
import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
|
||||
import type { TabsPaneContext } from 'element-plus';
|
||||
import initIconfont from '/@/utils/getStyleSheets';
|
||||
import '/@/theme/iconSelector.scss';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 输入框前置内容
|
||||
prepend: {
|
||||
type: String,
|
||||
default: () => 'ele-Pointer',
|
||||
},
|
||||
// 输入框占位文本
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => '请输入内容搜索图标或者选择图标',
|
||||
},
|
||||
// 输入框占位文本
|
||||
size: {
|
||||
type: String,
|
||||
default: () => 'default',
|
||||
},
|
||||
// 弹窗标题
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '请选择图标',
|
||||
},
|
||||
// 禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 是否可清空
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: () => true,
|
||||
},
|
||||
// 自定义空状态描述文字
|
||||
emptyDescription: {
|
||||
type: String,
|
||||
default: () => '无相关图标',
|
||||
},
|
||||
// 双向绑定值，默认为 modelValue，
|
||||
// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
||||
// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
|
||||
modelValue: String,
|
||||
});
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['update:modelValue', 'get', 'clear']);
|
||||
|
||||
// 引入组件
|
||||
const IconList = defineAsyncComponent(() => import('/@/components/iconSelector/list.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const inputWidthRef = ref();
|
||||
const state = reactive({
|
||||
fontIconPrefix: '',
|
||||
fontIconWidth: 0,
|
||||
fontIconSearch: '',
|
||||
fontIconPlaceholder: '',
|
||||
fontIconTabActive: 'ali',
|
||||
fontIconList: {
|
||||
ali: [],
|
||||
ele: [],
|
||||
awe: [],
|
||||
},
|
||||
});
|
||||
|
||||
// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
|
||||
const onIconFocus = () => {
|
||||
if (!props.modelValue) return false;
|
||||
state.fontIconSearch = '';
|
||||
state.fontIconPlaceholder = props.modelValue;
|
||||
};
|
||||
// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
|
||||
const onIconBlur = () => {
|
||||
const list = fontIconTabNameList();
|
||||
setTimeout(() => {
|
||||
const icon = list.filter((icon: string) => icon === state.fontIconSearch);
|
||||
if (icon.length <= 0) state.fontIconSearch = '';
|
||||
}, 300);
|
||||
};
|
||||
// 图标搜索及图标数据显示
|
||||
const fontIconSheetsFilterList = computed(() => {
|
||||
const list = fontIconTabNameList();
|
||||
if (!state.fontIconSearch) return list;
|
||||
let search = state.fontIconSearch.trim().toLowerCase();
|
||||
return list.filter((item: string) => {
|
||||
if (item.toLowerCase().indexOf(search) !== -1) return item;
|
||||
});
|
||||
});
|
||||
// 根据 tab name 类型设置图标
|
||||
const fontIconTabNameList = () => {
|
||||
let iconList: any = [];
|
||||
if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
|
||||
else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
|
||||
else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
|
||||
return iconList;
|
||||
};
|
||||
// 处理 icon 双向绑定数值回显
|
||||
const initModeValueEcho = () => {
|
||||
if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
|
||||
(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
|
||||
(<string | undefined>state.fontIconPrefix) = props.modelValue;
|
||||
};
|
||||
// 处理 icon 类型，用于回显时，tab 高亮与初始化数据
|
||||
const initFontIconName = () => {
|
||||
let name = 'ali';
|
||||
if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
|
||||
else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
|
||||
else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
|
||||
// 初始化 tab 高亮回显
|
||||
state.fontIconTabActive = name;
|
||||
return name;
|
||||
};
|
||||
// 初始化数据
|
||||
const initFontIconData = async (name: string) => {
|
||||
if (name === 'ali') {
|
||||
// 阿里字体图标使用 `iconfont xxx`
|
||||
if (state.fontIconList.ali.length > 0) return;
|
||||
await initIconfont.ali().then((res: any) => {
|
||||
state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
|
||||
});
|
||||
} else if (name === 'ele') {
|
||||
// element plus 图标
|
||||
if (state.fontIconList.ele.length > 0) return;
|
||||
await initIconfont.ele().then((res: any) => {
|
||||
state.fontIconList.ele = res;
|
||||
});
|
||||
} else if (name === 'awe') {
|
||||
// fontawesome字体图标使用 `fa xxx`
|
||||
if (state.fontIconList.awe.length > 0) return;
|
||||
await initIconfont.awe().then((res: any) => {
|
||||
state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
|
||||
});
|
||||
}
|
||||
// 初始化 input 的 placeholder
|
||||
// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
|
||||
state.fontIconPlaceholder = props.placeholder;
|
||||
// 初始化双向绑定回显
|
||||
initModeValueEcho();
|
||||
};
|
||||
// 图标点击切换
|
||||
const onIconClick = (pane: TabsPaneContext) => {
|
||||
initFontIconData(pane.paneName as string);
|
||||
inputWidthRef.value.focus();
|
||||
};
|
||||
// 获取当前点击的 icon 图标
|
||||
const onColClick = (v: string) => {
|
||||
state.fontIconPlaceholder = v;
|
||||
state.fontIconPrefix = v;
|
||||
emit('get', state.fontIconPrefix);
|
||||
emit('update:modelValue', state.fontIconPrefix);
|
||||
inputWidthRef.value.focus();
|
||||
};
|
||||
// 清空当前点击的 icon 图标
|
||||
const onClearFontIcon = () => {
|
||||
state.fontIconPrefix = '';
|
||||
emit('clear', state.fontIconPrefix);
|
||||
emit('update:modelValue', state.fontIconPrefix);
|
||||
};
|
||||
// 获取 input 的宽度
|
||||
const getInputWidth = () => {
|
||||
nextTick(() => {
|
||||
state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
|
||||
});
|
||||
};
|
||||
// 监听页面宽度改变
|
||||
const initResize = () => {
|
||||
window.addEventListener('resize', () => {
|
||||
getInputWidth();
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initFontIconData(initFontIconName());
|
||||
initResize();
|
||||
getInputWidth();
|
||||
});
|
||||
// 监听双向绑定 modelValue 的变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
initModeValueEcho();
|
||||
initFontIconName();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
84
web/src/components/iconSelector/list.vue
Normal file
84
web/src/components/iconSelector/list.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="icon-selector-warp-row">
|
||||
<el-scrollbar ref="selectorScrollbarRef">
|
||||
<el-row :gutter="10" v-if="props.list.length > 0">
|
||||
<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" v-for="(v, k) in list" :key="k" @click="onColClick(v)">
|
||||
<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': prefix === v }">
|
||||
<SvgIcon :name="v" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty :image-size="100" v-if="list.length <= 0" :description="empty"></el-empty>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="iconSelectorList">
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 图标列表数据
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 自定义空状态描述文字
|
||||
empty: {
|
||||
type: String,
|
||||
default: () => '无相关图标',
|
||||
},
|
||||
// 高亮当前选中图标
|
||||
prefix: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['get-icon']);
|
||||
|
||||
// 当前 icon 图标点击时
|
||||
const onColClick = (v: unknown | string) => {
|
||||
emit('get-icon', v);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon-selector-warp-row {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
.el-row {
|
||||
padding: 15px;
|
||||
}
|
||||
.el-scrollbar__bar.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
.icon-selector-warp-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
height: 30px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-primary-light-5);
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-selector-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-primary-light-5);
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
191
web/src/components/noticeBar/index.vue
Normal file
191
web/src/components/noticeBar/index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!state.isMode">
|
||||
<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
|
||||
<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
|
||||
<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
|
||||
<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
|
||||
<div class="notice-bar-warp-slot" v-else><slot /></div>
|
||||
</div>
|
||||
<SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="noticeBar">
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 通知栏模式，可选值为 closeable link
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 通知文本内容
|
||||
text: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 通知文本颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => 'var(--el-color-warning)',
|
||||
},
|
||||
// 通知背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: () => 'var(--el-color-warning-light-9)',
|
||||
},
|
||||
// 字体大小，单位px
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: () => 14,
|
||||
},
|
||||
// 通知栏高度，单位px
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 40,
|
||||
},
|
||||
// 动画延迟时间 (s)
|
||||
delay: {
|
||||
type: Number,
|
||||
default: () => 1,
|
||||
},
|
||||
// 滚动速率 (px/s)
|
||||
speed: {
|
||||
type: Number,
|
||||
default: () => 100,
|
||||
},
|
||||
// 是否开启垂直滚动
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 自定义左侧图标
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// 自定义右侧图标
|
||||
rightIcon: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['close', 'link']);
|
||||
|
||||
// 定义变量内容
|
||||
const noticeBarWarpRef = ref();
|
||||
const noticeBarTextRef = ref();
|
||||
const state = reactive({
|
||||
order: 1,
|
||||
oneTime: 0,
|
||||
twoTime: 0,
|
||||
warpOWidth: 0,
|
||||
textOWidth: 0,
|
||||
isMode: false,
|
||||
});
|
||||
|
||||
// 初始化 animation 各项参数
|
||||
const initAnimation = () => {
|
||||
nextTick(() => {
|
||||
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
||||
state.textOWidth = noticeBarTextRef.value.offsetWidth;
|
||||
document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
|
||||
document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
|
||||
computeAnimationTime();
|
||||
setTimeout(() => {
|
||||
changeAnimation();
|
||||
}, props.delay * 1000);
|
||||
});
|
||||
};
|
||||
// 计算 animation 滚动时长
|
||||
const computeAnimationTime = () => {
|
||||
state.oneTime = state.textOWidth / props.speed;
|
||||
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
|
||||
};
|
||||
// 改变 animation 动画调用
|
||||
const changeAnimation = () => {
|
||||
if (state.order === 1) {
|
||||
noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
|
||||
state.order = 2;
|
||||
} else {
|
||||
noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
|
||||
}
|
||||
};
|
||||
// 监听 animation 动画的结束
|
||||
const listenerAnimationend = () => {
|
||||
noticeBarTextRef.value.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
changeAnimation();
|
||||
},
|
||||
false
|
||||
);
|
||||
};
|
||||
// 右侧 icon 图标点击
|
||||
const onRightIconClick = () => {
|
||||
if (!props.mode) return false;
|
||||
if (props.mode === 'closeable') {
|
||||
state.isMode = true;
|
||||
emit('close');
|
||||
} else if (props.mode === 'link') {
|
||||
emit('link');
|
||||
}
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
if (props.scrollable) return false;
|
||||
initAnimation();
|
||||
listenerAnimationend();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notice-bar {
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
.notice-bar-warp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
.notice-bar-warp-text-box {
|
||||
flex: 1;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.notice-bar-warp-text {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.notice-bar-warp-slot {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
:deep(.el-carousel__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notice-bar-warp-left-icon {
|
||||
width: 24px;
|
||||
font-size: inherit !important;
|
||||
}
|
||||
.notice-bar-warp-right-icon {
|
||||
width: 24px;
|
||||
text-align: right;
|
||||
font-size: inherit !important;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
web/src/components/svgIcon/index.vue
Normal file
63
web/src/components/svgIcon/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<i v-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
|
||||
<component :is="getIconName" />
|
||||
</i>
|
||||
<div v-else-if="isShowIconImg" :style="setIconImgOutStyle">
|
||||
<img :src="getIconName" :style="setIconSvgInsStyle" />
|
||||
</div>
|
||||
<i v-else :class="getIconName" :style="setIconSvgStyle" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="svgIcon">
|
||||
import { computed } from 'vue';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// svg 图标组件名字
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
// svg 大小
|
||||
size: {
|
||||
type: Number,
|
||||
default: () => 14,
|
||||
},
|
||||
// svg 颜色
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
// 在线链接、本地引入地址前缀
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I62OVL
|
||||
const linesString = ['https', 'http', '/src', '/assets', 'data:image', import.meta.env.VITE_PUBLIC_PATH];
|
||||
|
||||
// 获取 icon 图标名称
|
||||
const getIconName = computed(() => {
|
||||
return props?.name;
|
||||
});
|
||||
// 用于判断 element plus 自带 svg 图标的显示、隐藏
|
||||
const isShowIconSvg = computed(() => {
|
||||
return props?.name?.startsWith('ele-');
|
||||
});
|
||||
// 用于判断在线链接、本地引入等图标显示、隐藏
|
||||
const isShowIconImg = computed(() => {
|
||||
return linesString.find((str) => props.name?.startsWith(str));
|
||||
});
|
||||
// 设置图标样式
|
||||
const setIconSvgStyle = computed(() => {
|
||||
return `font-size: ${props.size}px;color: ${props.color};`;
|
||||
});
|
||||
// 设置图片样式
|
||||
const setIconImgOutStyle = computed(() => {
|
||||
return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
|
||||
});
|
||||
// 设置图片样式
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
|
||||
const setIconSvgInsStyle = computed(() => {
|
||||
const filterStyle: string[] = [];
|
||||
const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
|
||||
compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
|
||||
return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
|
||||
});
|
||||
</script>
|
||||
256
web/src/components/table/index.vue
Normal file
256
web/src/components/table/index.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="data"
|
||||
:border="setBorder"
|
||||
v-bind="$attrs"
|
||||
row-key="id"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
v-loading="config.loading"
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />
|
||||
<el-table-column type="index" label="序号" width="60" v-if="config.isSerialNo" />
|
||||
<el-table-column
|
||||
v-for="(item, index) in setHeader"
|
||||
:key="index"
|
||||
show-overflow-tooltip
|
||||
:prop="item.key"
|
||||
:width="item.colWidth"
|
||||
:label="item.title"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<template v-if="item.type === 'image'">
|
||||
<img :src="scope.row[item.key]" :width="item.width" :height="item.height" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[item.key] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" v-if="config.isOperate">
|
||||
<template v-slot="scope">
|
||||
<el-popconfirm title="确定删除吗？" @confirm="onDelRow(scope.row)">
|
||||
<template #reference>
|
||||
<el-button text type="primary">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</el-table>
|
||||
<div class="table-footer mt15">
|
||||
<el-pagination
|
||||
v-model:current-page="state.page.pageNum"
|
||||
v-model:page-size="state.page.pageSize"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:total="config.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
<div class="table-footer-tool">
|
||||
<SvgIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onImportTable" />
|
||||
<SvgIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />
|
||||
<el-popover
|
||||
placement="top-end"
|
||||
trigger="click"
|
||||
transition="el-zoom-in-top"
|
||||
popper-class="table-tool-popper"
|
||||
:width="300"
|
||||
:persistent="false"
|
||||
@show="onSetTable"
|
||||
>
|
||||
<template #reference>
|
||||
<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="tool-box">
|
||||
<el-tooltip content="拖动进行排序" placement="top-start">
|
||||
<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
|
||||
</el-tooltip>
|
||||
<el-checkbox
|
||||
v-model="state.checkListAll"
|
||||
:indeterminate="state.checkListIndeterminate"
|
||||
class="ml10 mr1"
|
||||
label="列显示"
|
||||
@change="onCheckAllChange"
|
||||
/>
|
||||
<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
|
||||
<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
|
||||
</div>
|
||||
<el-scrollbar>
|
||||
<div ref="toolSetRef" class="tool-sortable">
|
||||
<div class="tool-sortable-item" v-for="v in header" :key="v.key" :data-key="v.key">
|
||||
<i class="fa fa-arrows-alt handle cursor-pointer"></i>
|
||||
<el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.title" @change="onCheckChange" />
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="netxTable">
|
||||
import { reactive, computed, nextTick, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import table2excel from 'js-table2excel';
|
||||
import Sortable from 'sortablejs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import '/@/theme/tableTool.scss';
|
||||
|
||||
// 定义父组件传过来的值
|
||||
const props = defineProps({
|
||||
// 列表内容
|
||||
data: {
|
||||
type: Array<EmptyObjectType>,
|
||||
default: () => [],
|
||||
},
|
||||
// 表头内容
|
||||
header: {
|
||||
type: Array<EmptyObjectType>,
|
||||
default: () => [],
|
||||
},
|
||||
// 配置项
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['delRow', 'pageChange', 'sortHeader']);
|
||||
|
||||
// 定义变量内容
|
||||
const toolSetRef = ref();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const state = reactive({
|
||||
page: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
selectlist: [] as EmptyObjectType[],
|
||||
checkListAll: true,
|
||||
checkListIndeterminate: false,
|
||||
});
|
||||
|
||||
// 设置边框显示/隐藏
|
||||
const setBorder = computed(() => {
|
||||
return props.config.isBorder ? true : false;
|
||||
});
|
||||
// 获取父组件 配置项（必传）
|
||||
const getConfig = computed(() => {
|
||||
return props.config;
|
||||
});
|
||||
// 设置 tool header 数据
|
||||
const setHeader = computed(() => {
|
||||
return props.header.filter((v) => v.isCheck);
|
||||
});
|
||||
// tool 列显示全选改变时
|
||||
const onCheckAllChange = <T>(val: T) => {
|
||||
if (val) props.header.forEach((v) => (v.isCheck = true));
|
||||
else props.header.forEach((v) => (v.isCheck = false));
|
||||
state.checkListIndeterminate = false;
|
||||
};
|
||||
// tool 列显示当前项改变时
|
||||
const onCheckChange = () => {
|
||||
const headers = props.header.filter((v) => v.isCheck).length;
|
||||
state.checkListAll = headers === props.header.length;
|
||||
state.checkListIndeterminate = headers > 0 && headers < props.header.length;
|
||||
};
|
||||
// 表格多选改变时，用于导出
|
||||
const onSelectionChange = (val: EmptyObjectType[]) => {
|
||||
state.selectlist = val;
|
||||
};
|
||||
// 删除当前项
|
||||
const onDelRow = (row: EmptyObjectType) => {
|
||||
emit('delRow', row);
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.page.pageSize = val;
|
||||
emit('pageChange', state.page);
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.page.pageNum = val;
|
||||
emit('pageChange', state.page);
|
||||
};
|
||||
// 搜索时，分页还原成默认
|
||||
const pageReset = () => {
|
||||
state.page.pageNum = 1;
|
||||
state.page.pageSize = 10;
|
||||
emit('pageChange', state.page);
|
||||
};
|
||||
// 导出
|
||||
const onImportTable = () => {
|
||||
if (state.selectlist.length <= 0) return ElMessage.warning('请先选择要导出的数据');
|
||||
table2excel(props.header, state.selectlist, `${themeConfig.value.globalTitle} ${new Date().toLocaleString()}`);
|
||||
};
|
||||
// 刷新
|
||||
const onRefreshTable = () => {
|
||||
emit('pageChange', state.page);
|
||||
};
|
||||
// 设置
|
||||
const onSetTable = () => {
|
||||
nextTick(() => {
|
||||
const sortable = Sortable.create(toolSetRef.value, {
|
||||
handle: '.handle',
|
||||
dataIdAttr: 'data-key',
|
||||
animation: 150,
|
||||
onEnd: () => {
|
||||
const headerList: EmptyObjectType[] = [];
|
||||
sortable.toArray().forEach((val) => {
|
||||
props.header.forEach((v) => {
|
||||
if (v.key === val) headerList.push({ ...v });
|
||||
});
|
||||
});
|
||||
emit('sortHeader', headerList);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
pageReset,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
.table-footer {
|
||||
display: flex;
|
||||
.table-footer-tool {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-regular);
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user