admin/lx-admin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 修改组件 去除无用引用和代码缩进

Browse Source
This commit is contained in:
LiuHao 2023-06-06 22:52:24 +08:00
parent 9f038ad181
commit d43ae50abc
14 changed files with 278 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Breadcrumb/index.vue
View File

@ -18,34 +18,34 @@ const router = useRouter();
const levelList = ref<RouteLocationMatched[]>([]) const levelList = ref<RouteLocationMatched[]>([])
const getBreadcrumb = () => { const getBreadcrumb = () => {
// only show routes with meta.title // only show routes with meta.title
let matched = route.matched.filter(item => item.meta && item.meta.title); let matched = route.matched.filter(item => item.meta && item.meta.title);
const first = matched[0] const first = matched[0]
// 判断是否为首页 // 判断是否为首页
if (!isDashboard(first)) { if (!isDashboard(first)) {
matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched) matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched)
} }
levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
} }
const isDashboard = (route: RouteLocationMatched) => { const isDashboard = (route: RouteLocationMatched) => {
const name = route && route.name as string const name = route && route.name as string
if (!name) { if (!name) {
return false return false
} }
return name.trim() === 'Index' return name.trim() === 'Index'
} }
const handleLink = (item: RouteLocationMatched) => { const handleLink = (item: RouteLocationMatched) => {
const { redirect, path } = item const { redirect, path } = item
redirect ? router.push(redirect as string) : router.push(path) redirect ? router.push(redirect as string) : router.push(path)
} }
watchEffect(() => { watchEffect(() => {
// if you go to the redirect page, do not update the breadcrumbs // if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) return if (route.path.startsWith('/redirect/')) return
getBreadcrumb() getBreadcrumb()
}) })
onMounted(() => { onMounted(() => {
getBreadcrumb(); getBreadcrumb();
}) })
</script> </script>

2
src/components/BuildCode/index.vue
View File

@ -1,8 +1,6 @@
<!-- 代码构建 --> <!-- 代码构建 -->
<script setup lang="ts"> <script setup lang="ts">
import { ComponentInternalInstance } from "vue";
const props = defineProps({ const props = defineProps({
showBtn: { showBtn: {
type: Boolean, type: Boolean,

7
src/components/DictTag/index.vue
View File

@ -24,7 +24,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType } from 'vue'; import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
@ -36,10 +36,7 @@ const props = defineProps({
// 当前的值 // 当前的值
value: [Number, String, Array] as PropType<number | string | Array<number | string>>, value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
// 当未找到匹配的数据时，显示value // 当未找到匹配的数据时，显示value
showValue: { showValue: propTypes.bool.def(true),
type: Boolean as PropType<boolean>,
default: true,
},
}); });
const values = computed(() => { const values = computed(() => {

202
src/components/Editor/index.vue
View File

@ -30,152 +30,139 @@
import { QuillEditor, Quill } from '@vueup/vue-quill'; import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css'; import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { ComponentInternalInstance } from "vue"; import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
/* 编辑器的内容 */ /* 编辑器的内容 */
modelValue: { modelValue: propTypes.string,
type: String, /* 高度 */
}, height: propTypes.number.def(400),
/* 高度 */ /* 最小高度 */
height: { minHeight: propTypes.number.def(400),
type: Number, /* 只读 */
default: null, readOnly: propTypes.bool.def(false),
}, /* 上传文件大小限制(MB) */
/* 最小高度 */ fileSize: propTypes.number.def(5),
minHeight: { /* 类型（base64格式、url格式） */
type: Number, type: propTypes.string.def('url')
default: null,
},
/* 只读 */
readOnly: {
type: Boolean,
default: false,
},
/* 上传文件大小限制(MB) */
fileSize: {
type: Number,
default: 5,
},
/* 类型（base64格式、url格式） */
type: {
type: String,
default: "url",
}
}); });
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const upload = reactive<UploadOption>({ const upload = reactive<UploadOption>({
headers: { Authorization: "Bearer " + getToken() }, headers: { Authorization: "Bearer " + getToken() },
url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload' url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
}) })
const myQuillEditor = ref(); const myQuillEditor = ref();
const options = ref({ const options = ref({
theme: "snow", theme: "snow",
bounds: document.body, bounds: document.body,
debug: "warn", debug: "warn",
modules: { modules: {
// 工具栏配置 // 工具栏配置
toolbar: { toolbar: {
container: [ container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块 ["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet"} ], // 有序、无序列表 [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进 [{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小 [{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式 [{ align: [] }], // 对齐方式
["clean"], // 清除文本格式 ["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频 ["link", "image", "video"] // 链接、图片、视频
], ],
handlers: { handlers: {
image: function (value: any) { image: function (value: any) {
if (value) { if (value) {
// 调用element图片上传 // 调用element图片上传
(document.querySelector(".editor-img-uploader>.el-upload") as HTMLDivElement)?.click(); (document.querySelector(".editor-img-uploader>.el-upload") as HTMLDivElement)?.click();
} else { } else {
Quill.format("image", true); Quill.format("image", true);
} }
}, },
}, },
} }
}, },
placeholder: '请输入内容', placeholder: '请输入内容',
readOnly: props.readOnly, readOnly: props.readOnly,
}); });
const styles = computed(() => { const styles = computed(() => {
let style: any = {}; let style: any = {};
if (props.minHeight) { if (props.minHeight) {
style.minHeight = `${props.minHeight}px`; style.minHeight = `${props.minHeight}px`;
} }
if (props.height) { if (props.height) {
style.height = `${props.height}px`; style.height = `${props.height}px`;
} }
return style; return style;
}) })
const content = ref(""); const content = ref("");
watch(() => props.modelValue, (v) => { watch(() => props.modelValue, (v) => {
if (v !== content.value) { if (v !== content.value) {
content.value = v === undefined ? "<p></p>" : v; content.value = v === undefined ? "<p></p>" : v;
} }
}, { immediate: true }); }, { immediate: true });
// 图片上传成功返回图片地址 // 图片上传成功返回图片地址
const handleUploadSuccess = (res: any) => { const handleUploadSuccess = (res: any) => {
// 获取富文本实例 // 获取富文本实例
let quill = toRaw(myQuillEditor.value).getQuill(); let quill = toRaw(myQuillEditor.value).getQuill();
// 如果上传成功 // 如果上传成功
if (res.code === 200) { if (res.code === 200) {
// 获取光标位置 // 获取光标位置
let length = quill.selection.savedRange.index; let length = quill.selection.savedRange.index;
// 插入图片，res为服务器返回的图片链接地址 // 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res.data.url); quill.insertEmbed(length, "image", res.data.url);
// 调整光标到最后 // 调整光标到最后
quill.setSelection(length + 1); quill.setSelection(length + 1);
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
} else { } else {
proxy?.$modal.loading(res.msg); proxy?.$modal.loading(res.msg);
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
} }
} }
// 图片上传前拦截 // 图片上传前拦截
const handleBeforeUpload = (file: any) => { const handleBeforeUpload = (file: any) => {
// 校检文件大小 // 校检文件大小
if (props.fileSize) { if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize; const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) { if (!isLt) {
proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`); proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
return false; return false;
}
} }
proxy?.$modal.loading('正在上传文件，请稍候...'); }
return true; proxy?.$modal.loading('正在上传文件，请稍候...');
return true;
} }
// 图片失败拦截 // 图片失败拦截
const handleUploadError = (err: any) => { const handleUploadError = (err: any) => {
console.error(err); console.error(err);
proxy?.$modal.msgError('上传文件失败'); proxy?.$modal.msgError('上传文件失败');
} }
</script> </script>
<style> <style>
.editor, .ql-toolbar { .editor,
.ql-toolbar {
white-space: pre-wrap !important; white-space: pre-wrap !important;
line-height: normal !important; line-height: normal !important;
} }
.quill-img { .quill-img {
display: none; display: none;
} }
.ql-snow .ql-tooltip[data-mode="link"]::before { .ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:"; content: "请输入链接地址:";
} }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0; border-right: 0;
content: "保存"; content: "保存";
@ -190,14 +177,17 @@ const handleUploadError = (err: any) => {
.ql-snow .ql-picker.ql-size .ql-picker-item::before { .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px"; content: "14px";
} }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px"; content: "10px";
} }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px"; content: "18px";
} }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px"; content: "32px";
@ -207,26 +197,32 @@ const handleUploadError = (err: any) => {
.ql-snow .ql-picker.ql-header .ql-picker-item::before { .ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本"; content: "文本";
} }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1"; content: "标题1";
} }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2"; content: "标题2";
} }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3"; content: "标题3";
} }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4"; content: "标题4";
} }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5"; content: "标题5";
} }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6"; content: "标题6";
@ -236,10 +232,12 @@ const handleUploadError = (err: any) => {
.ql-snow .ql-picker.ql-font .ql-picker-item::before { .ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体"; content: "标准字体";
} }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体"; content: "衬线字体";
} }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体"; content: "等宽字体";

60
src/components/FileUpload/index.vue
View File

@ -45,31 +45,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss"; import { listByIds, delOss } from "@/api/system/oss";
import { ComponentInternalInstance } from "vue"; import { propTypes } from '@/utils/propTypes';
import { ElUpload, UploadFile } from "element-plus";
const props = defineProps({ const props = defineProps({
modelValue: [String, Object, Array], modelValue: [String, Object, Array],
// 数量限制 // 数量限制
limit: { limit: propTypes.number.def(5),
type: Number,
default: 5,
},
// 大小限制(MB) // 大小限制(MB)
fileSize: { fileSize: propTypes.number.def(5),
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg'] // 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: { fileType: propTypes.array.def(["doc", "xls", "ppt", "txt", "pdf"]),
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
},
// 是否显示提示 // 是否显示提示
isShowTip: { isShowTip: propTypes.bool.def(true),
type: Boolean,
default: true
}
}); });
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@ -86,7 +73,7 @@ const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize) () => props.isShowTip && (props.fileType || props.fileSize)
); );
const fileUploadRef = ref(ElUpload); const fileUploadRef = ref<ElUploadInstance>();
watch(() => props.modelValue, async val => { watch(() => props.modelValue, async val => {
if (val) { if (val) {
@ -96,7 +83,7 @@ watch(() => props.modelValue, async val => {
if (Array.isArray(val)) { if (Array.isArray(val)) {
list = val; list = val;
} else { } else {
const res = await listByIds(val as string) const res = await listByIds(val as string)
list = res.data.map((oss) => { list = res.data.map((oss) => {
const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId }; const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
return data; return data;
@ -104,7 +91,7 @@ watch(() => props.modelValue, async val => {
} }
// 然后将数组转为对象数组 // 然后将数组转为对象数组
fileList.value = list.map(item => { fileList.value = list.map(item => {
item = {name: item.name, url: item.url, ossId: item.ossId}; item = { name: item.name, url: item.url, ossId: item.ossId };
item.uid = item.uid || new Date().getTime() + temp++; item.uid = item.uid || new Date().getTime() + temp++;
return item; return item;
}); });
@ -112,7 +99,7 @@ watch(() => props.modelValue, async val => {
fileList.value = []; fileList.value = [];
return []; return [];
} }
},{ deep: true, immediate: true }); }, { deep: true, immediate: true });
// 上传前校检格式和大小 // 上传前校检格式和大小
const handleBeforeUpload = (file: any) => { const handleBeforeUpload = (file: any) => {
@ -150,7 +137,7 @@ const handleUploadError = () => {
} }
// 上传成功回调 // 上传成功回调
const handleUploadSuccess = (res:any, file: UploadFile) => { const handleUploadSuccess = (res: any, file: UploadFile) => {
if (res.code === 200) { if (res.code === 200) {
uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId }); uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
uploadedSuccessfully(); uploadedSuccessfully();
@ -158,7 +145,7 @@ const handleUploadSuccess = (res:any, file: UploadFile) => {
number.value--; number.value--;
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
proxy?.$modal.msgError(res.msg); proxy?.$modal.msgError(res.msg);
fileUploadRef.value.handleRemove(file); fileUploadRef.value?.handleRemove(file);
uploadedSuccessfully(); uploadedSuccessfully();
} }
} }
@ -172,7 +159,7 @@ const handleDelete = (index: number) => {
} }
// 上传结束处理 // 上传结束处理
const uploadedSuccessfully =() => { const uploadedSuccessfully = () => {
if (number.value > 0 && uploadList.value.length === number.value) { if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value); fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
uploadList.value = []; uploadList.value = [];
@ -207,21 +194,24 @@ const listToString = (list: any[], separator?: string) => {
<style scoped lang="scss"> <style scoped lang="scss">
.upload-file-uploader { .upload-file-uploader {
margin-bottom: 5px; margin-bottom: 5px;
} }
.upload-file-list .el-upload-list__item { .upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;
line-height: 2; line-height: 2;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
} }
.upload-file-list .ele-upload-list__item-content { .upload-file-list .ele-upload-list__item-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: inherit; color: inherit;
} }
.ele-upload-list__item-content-action .el-link { .ele-upload-list__item-content-action .el-link {
margin-right: 10px; margin-right: 10px;
} }
</style> </style>

11
src/components/Hamburger/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="padding: 0 15px;" @click="toggleClick"> <div style="padding: 0 15px;" @click="toggleClick">
<svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"> <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<path <path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
/> />
@ -9,16 +9,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
defineProps({ defineProps({
isActive: { isActive: propTypes.bool.def(false)
type: Boolean,
default: false
}
}) })
const emit = defineEmits(['toggleClick']) const emit = defineEmits(['toggleClick'])
const toggleClick = () => { const toggleClick = () => {
emit('toggleClick'); emit('toggleClick');
} }
</script> </script>

63
src/components/HeaderSearch/index.vue
View File

@ -23,7 +23,6 @@ import { getNormalPath } from '@/utils/ruoyi';
import { isHttp } from '@/utils/validate'; import { isHttp } from '@/utils/validate';
import usePermissionStore from '@/store/modules/permission'; import usePermissionStore from '@/store/modules/permission';
import { RouteOption } from 'vue-router'; import { RouteOption } from 'vue-router';
import { ElSelect } from 'element-plus';
type Router = Array<{ type Router = Array<{
path: string; path: string;
@ -35,7 +34,7 @@ const options = ref<any>([]);
const searchPool = ref<Router>([]); const searchPool = ref<Router>([]);
const show = ref(false); const show = ref(false);
const fuse = ref(); const fuse = ref();
const headerSearchSelectRef = ref(ElSelect); const headerSearchSelectRef = ref<ElSelectInstance>();
const router = useRouter(); const router = useRouter();
const routes = computed(() => usePermissionStore().routes); const routes = computed(() => usePermissionStore().routes);
@ -143,40 +142,40 @@ watch(searchPool, (list) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.header-search { .header-search {
font-size: 0 !important; font-size: 0 !important;
.search-icon { .search-icon {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
}
.header-search-select {
font-size: 18px;
transition: width 0.2s;
width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
display: inline-block;
vertical-align: middle;
:deep(.el-input__inner) {
border-radius: 0;
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
border-bottom: 1px solid #d9d9d9;
vertical-align: middle;
} }
}
&.show {
.header-search-select { .header-search-select {
width: 210px; font-size: 18px;
margin-left: 10px; transition: width 0.2s;
width: 0;
overflow: hidden;
background: transparent;
border-radius: 0;
display: inline-block;
vertical-align: middle;
:deep(.el-input__inner) {
border-radius: 0;
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
border-bottom: 1px solid #d9d9d9;
vertical-align: middle;
}
}
&.show {
.header-search-select {
width: 210px;
margin-left: 10px;
}
} }
}
} }
</style> </style>

12
src/components/IconSelect/index.vue
View File

@ -31,17 +31,11 @@
<script setup lang="ts"> <script setup lang="ts">
import icons from '@/components/IconSelect/requireIcons'; import icons from '@/components/IconSelect/requireIcons';
import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: propTypes.string.isRequired,
type: String, width: propTypes.string.def('400px')
require: true
},
width: {
type: String,
require: false,
default: '400px'
}
}); });
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);

58
src/components/ImagePreview/index.vue
View File

@ -9,47 +9,46 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
src: { src: propTypes.string.def(''),
type: String, width: {
default: "" type: [Number, String],
}, default: ""
width: { },
type: [Number, String], height: {
default: "" type: [Number, String],
}, default: ""
height: { }
type: [Number, String],
default: ""
}
}); });
const realSrc = computed(() => { const realSrc = computed(() => {
if (!props.src) { if (!props.src) {
return; return;
} }
let real_src = props.src.split(",")[0]; let real_src = props.src.split(",")[0];
return real_src; return real_src;
}); });
const realSrcList = computed(() => { const realSrcList = computed(() => {
if (!props.src) { if (!props.src) {
return; return;
} }
let real_src_list = props.src.split(","); let real_src_list = props.src.split(",");
let srcList:string[] = []; let srcList: string[] = [];
real_src_list.forEach(item => { real_src_list.forEach(item => {
return srcList.push(item); return srcList.push(item);
}); });
return srcList; return srcList;
}); });
const realWidth = computed(() => const realWidth = computed(() =>
typeof props.width == "string" ? props.width : `${props.width}px` typeof props.width == "string" ? props.width : `${props.width}px`
); );
const realHeight = computed(() => const realHeight = computed(() =>
typeof props.height == "string" ? props.height : `${props.height}px` typeof props.height == "string" ? props.height : `${props.height}px`
); );
</script> </script>
@ -58,13 +57,16 @@ const realHeight = computed(() =>
border-radius: 5px; border-radius: 5px;
background-color: #ebeef5; background-color: #ebeef5;
box-shadow: 0 0 5px 1px #ccc; box-shadow: 0 0 5px 1px #ccc;
:deep(.el-image__inner) { :deep(.el-image__inner) {
transition: all 0.3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.2);
} }
} }
:deep(.image-slot) { :deep(.image-slot) {
display: flex; display: flex;
justify-content: center; justify-content: center;

33
src/components/ImageUpload/index.vue
View File

@ -17,7 +17,9 @@
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:class="{ hide: fileList.length >= limit }" :class="{ hide: fileList.length >= limit }"
> >
<el-icon class="avatar-uploader-icon"><plus /></el-icon> <el-icon class="avatar-uploader-icon">
<plus />
</el-icon>
</el-upload> </el-upload>
<!-- 上传提示 --> <!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip"> <div class="el-upload__tip" v-if="showTip">
@ -42,25 +44,16 @@ import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss"; import { listByIds, delOss } from "@/api/system/oss";
import { ComponentInternalInstance, PropType } from "vue"; import { ComponentInternalInstance, PropType } from "vue";
import { OssVO } from "@/api/system/oss/types"; import { OssVO } from "@/api/system/oss/types";
import { ElUpload, UploadFile } from "element-plus"; import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
modelValue: [String, Object, Array], modelValue: [String, Object, Array],
// 图片数量限制 // 图片数量限制
limit: { limit: propTypes.number.def(5),
type: Number,
default: 5,
},
// 大小限制(MB) // 大小限制(MB)
fileSize: { fileSize: propTypes.number.def(5),
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg'] // 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: { fileType: propTypes.array.def(["png", "jpg", "jpeg"]),
type: Array as PropType<string[]>,
default: () => ["png", "jpg", "jpeg"],
},
// 是否显示提示 // 是否显示提示
isShowTip: { isShowTip: {
type: Boolean, type: Boolean,
@ -84,12 +77,12 @@ const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize) () => props.isShowTip && (props.fileType || props.fileSize)
); );
const imageUploadRef = ref(ElUpload); const imageUploadRef = ref<ElUploadInstance>();
watch(() => props.modelValue, async val => { watch(() => props.modelValue, async val => {
if (val) { if (val) {
// 首先将值转为数组 // 首先将值转为数组
let list:OssVO[] = []; let list: OssVO[] = [];
if (Array.isArray(val)) { if (Array.isArray(val)) {
list = val as OssVO[]; list = val as OssVO[];
} else { } else {
@ -112,7 +105,7 @@ watch(() => props.modelValue, async val => {
fileList.value = []; fileList.value = [];
return []; return [];
} }
},{ deep: true, immediate: true }); }, { deep: true, immediate: true });
/** 上传前loading加载 */ /** 上传前loading加载 */
const handleBeforeUpload = (file: any) => { const handleBeforeUpload = (file: any) => {
@ -122,7 +115,7 @@ const handleBeforeUpload = (file: any) => {
if (file.name.lastIndexOf(".") > -1) { if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
} }
isImg = props.fileType.some((type) => { isImg = props.fileType.some((type: any) => {
if (file.type.indexOf(type) > -1) return true; if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true; if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false; return false;
@ -161,7 +154,7 @@ const handleUploadSuccess = (res: any, file: UploadFile) => {
number.value--; number.value--;
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
proxy?.$modal.msgError(res.msg); proxy?.$modal.msgError(res.msg);
imageUploadRef.value.handleRemove(file); imageUploadRef.value?.handleRemove(file);
uploadedSuccessfully(); uploadedSuccessfully();
} }
} }
@ -207,7 +200,7 @@ const listToString = (list: any[], separator?: string) => {
let strs = ""; let strs = "";
separator = separator || ","; separator = separator || ",";
for (let i in list) { for (let i in list) {
if(undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) { if (undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) {
strs += list[i].ossId + separator; strs += list[i].ossId + separator;
} }
} }

18
src/components/RightToolbar/index.vue
View File

@ -18,25 +18,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { TransferKey } from "element-plus"; import { propTypes } from '@/utils/propTypes';
import { PropType } from "vue";
const props = defineProps({ const props = defineProps({
showSearch: { showSearch: propTypes.bool.def(true),
type: Boolean,
default: true,
},
columns: { columns: {
type: Array as PropType<FieldOption[]>, type: Array as PropType<FieldOption[]>,
}, },
search: { search: propTypes.bool.def(true),
type: Boolean, gutter: propTypes.number.def(10),
default: true,
},
gutter: {
type: Number,
default: 10,
},
}) })
const emits = defineEmits(['update:showSearch', 'queryTable']); const emits = defineEmits(['update:showSearch', 'queryTable']);

17
src/components/SvgIcon/index.vue
View File

@ -5,19 +5,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
iconClass: { iconClass: propTypes.string.isRequired,
type: String, className: propTypes.string.def(''),
required: true color: propTypes.string.def(''),
},
className: {
type: String,
default: ''
},
color: {
type: String,
default: ''
},
}) })
const iconName = computed(() => `#icon-${props.iconClass}`); const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => { const svgClass = computed(() => {

76
src/components/TreeSelect/index.vue
View File

@ -29,94 +29,93 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ElTreeSelect } from 'element-plus'
const props = defineProps({ const props = defineProps({
/* 配置项 */ /* 配置项 */
objMap: { objMap: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
value: 'id', // ID字段名 value: 'id', // ID字段名
label: 'label', // 显示名称 label: 'label', // 显示名称
children: 'children' // 子级字段名 children: 'children' // 子级字段名
}
} }
}
}, },
/* 自动收起 */ /* 自动收起 */
accordion: { accordion: {
type: Boolean, type: Boolean,
default: () => { default: () => {
return false return false
} }
}, },
/**当前双向数据绑定的值 */ /**当前双向数据绑定的值 */
value: { value: {
type: [String, Number], type: [String, Number],
default: '' default: ''
}, },
/**当前的数据 */ /**当前的数据 */
options: { options: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
/**输入框内部的文字 */ /**输入框内部的文字 */
placeholder: { placeholder: {
type: String, type: String,
default: '' default: ''
} }
}) })
const selectTree = ref(ElTreeSelect); const selectTree = ref<ElTreeSelectInstance>();
const emit = defineEmits(['update:value']); const emit = defineEmits(['update:value']);
const valueId = computed({ const valueId = computed({
get: () => props.value, get: () => props.value,
set: (val) => { set: (val) => {
emit('update:value', val) emit('update:value', val)
} }
}); });
const valueTitle = ref(''); const valueTitle = ref('');
const defaultExpandedKey = ref<any[]>([]); const defaultExpandedKey = ref<any[]>([]);
function initHandle() { const initHandle = () => {
nextTick(() => { nextTick(() => {
const selectedValue = valueId.value; const selectedValue = valueId.value;
if(selectedValue !== null && typeof (selectedValue) !== 'undefined') { if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
const node = selectTree.value.getNode(selectedValue) const node = selectTree.value?.getNode(selectedValue)
if (node) { if (node) {
valueTitle.value = node.data[props.objMap.label] valueTitle.value = node.data[props.objMap.label]
selectTree.value.setCurrentKey(selectedValue) // 设置默认选中 selectTree.value?.setCurrentKey(selectedValue) // 设置默认选中
defaultExpandedKey.value = [selectedValue] // 设置默认展开 defaultExpandedKey.value = [selectedValue] // 设置默认展开
}
} else {
clearHandle()
} }
} else {
clearHandle()
}
}) })
} }
function handleNodeClick(node: any) { const handleNodeClick = (node: any) => {
valueTitle.value = node[props.objMap.label] valueTitle.value = node[props.objMap.label]
valueId.value = node[props.objMap.value]; valueId.value = node[props.objMap.value];
defaultExpandedKey.value = []; defaultExpandedKey.value = [];
selectTree.value.blur() selectTree.value?.blur()
selectFilterData('') selectFilterData('')
} }
function selectFilterData(val: any) { const selectFilterData = (val: any) => {
selectTree.value.filter(val) selectTree.value?.filter(val)
} }
function filterNode(value: any, data: any) { const filterNode = (value: any, data: any) => {
if (!value) return true if (!value) return true
return data[props.objMap['label']].indexOf(value) !== -1 return data[props.objMap['label']].indexOf(value) !== -1
} }
function clearHandle() { const clearHandle = () => {
valueTitle.value = '' valueTitle.value = ''
valueId.value = '' valueId.value = ''
defaultExpandedKey.value = []; defaultExpandedKey.value = [];
clearSelected() clearSelected()
} }
function clearSelected() { const clearSelected = () => {
const allNode = document.querySelectorAll('#tree-option .el-tree-node') const allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element) => element.classList.remove('is-current')) allNode.forEach((element) => element.classList.remove('is-current'))
} }
@ -132,6 +131,7 @@ watch(valueId, () => {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss"; @import "@/assets/styles/variables.module.scss";
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item { .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
padding: 0; padding: 0;
background-color: #fff; background-color: #fff;

7
src/components/iFrame/index.vue
View File

@ -5,11 +5,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
const props = defineProps({ const props = defineProps({
src: { src: propTypes.string.isRequired
type: String,
required: true
}
}) })
const height = ref(document.documentElement.clientHeight - 94.5 + "px;") const height = ref(document.documentElement.clientHeight - 94.5 + "px;")