From d43ae50abc9461a9b20b3f015ba3679ba699dfa2 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期二, 06 六月 2023 22:52:24 +0800
Subject: [PATCH] update 修改组件 去除无用引用和代码缩进
---
src/components/ImageUpload/index.vue | 33 +-
src/components/DictTag/index.vue | 7
src/components/SvgIcon/index.vue | 17 -
src/components/RightToolbar/index.vue | 18 -
src/components/Editor/index.vue | 202 +++++++++---------
src/components/Breadcrumb/index.vue | 38 +-
src/components/TreeSelect/index.vue | 76 +++---
src/components/IconSelect/index.vue | 12
src/components/Hamburger/index.vue | 11
src/components/iFrame/index.vue | 7
src/components/FileUpload/index.vue | 60 ++---
src/components/ImagePreview/index.vue | 58 ++--
src/components/BuildCode/index.vue | 2
src/components/HeaderSearch/index.vue | 63 ++--
14 files changed, 278 insertions(+), 326 deletions(-)
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 435d0cc..b96829a 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -18,34 +18,34 @@
const levelList = ref<RouteLocationMatched[]>([])
const getBreadcrumb = () => {
- // only show routes with meta.title
- let matched = route.matched.filter(item => item.meta && item.meta.title);
- const first = matched[0]
- // 鍒ゆ柇鏄惁涓洪椤�
- if (!isDashboard(first)) {
- matched = ([{ path: '/index', meta: { title: '棣栭〉' } }] as any).concat(matched)
- }
- levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+ // only show routes with meta.title
+ let matched = route.matched.filter(item => item.meta && item.meta.title);
+ const first = matched[0]
+ // 鍒ゆ柇鏄惁涓洪椤�
+ if (!isDashboard(first)) {
+ matched = ([{ path: '/index', meta: { title: '棣栭〉' } }] as any).concat(matched)
+ }
+ levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}
const isDashboard = (route: RouteLocationMatched) => {
- const name = route && route.name as string
- if (!name) {
- return false
- }
- return name.trim() === 'Index'
+ const name = route && route.name as string
+ if (!name) {
+ return false
+ }
+ return name.trim() === 'Index'
}
const handleLink = (item: RouteLocationMatched) => {
- const { redirect, path } = item
- redirect ? router.push(redirect as string) : router.push(path)
+ const { redirect, path } = item
+ redirect ? router.push(redirect as string) : router.push(path)
}
watchEffect(() => {
- // if you go to the redirect page, do not update the breadcrumbs
- if (route.path.startsWith('/redirect/')) return
- getBreadcrumb()
+ // if you go to the redirect page, do not update the breadcrumbs
+ if (route.path.startsWith('/redirect/')) return
+ getBreadcrumb()
})
onMounted(() => {
- getBreadcrumb();
+ getBreadcrumb();
})
</script>
diff --git a/src/components/BuildCode/index.vue b/src/components/BuildCode/index.vue
index 9315732..b23665c 100644
--- a/src/components/BuildCode/index.vue
+++ b/src/components/BuildCode/index.vue
@@ -1,8 +1,6 @@
<!-- 浠ｇ爜鏋勫缓 -->
<script setup lang="ts">
-import { ComponentInternalInstance } from "vue";
-
const props = defineProps({
showBtn: {
type: Boolean,
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index f27b16a..08aef21 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -24,7 +24,7 @@
</template>
<script setup lang="ts">
-import { PropType } from 'vue';
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
@@ -36,10 +36,7 @@
// 褰撳墠鐨勫��
value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
// 褰撴湭鎵惧埌鍖归厤鐨勬暟鎹椂锛屾樉绀簐alue
- showValue: {
- type: Boolean as PropType<boolean>,
- default: true,
- },
+ showValue: propTypes.bool.def(true),
});
const values = computed(() => {
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index a0728eb..b5b1526 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -30,152 +30,139 @@
import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { getToken } from "@/utils/auth";
-import { ComponentInternalInstance } from "vue";
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
- /* 缂栬緫鍣ㄧ殑鍐呭 */
- modelValue: {
- type: String,
- },
- /* 楂樺害 */
- height: {
- type: Number,
- default: null,
- },
- /* 鏈�灏忛珮搴� */
- minHeight: {
- type: Number,
- default: null,
- },
- /* 鍙 */
- readOnly: {
- type: Boolean,
- default: false,
- },
- /* 涓婁紶鏂囦欢澶у皬闄愬埗(MB) */
- fileSize: {
- type: Number,
- default: 5,
- },
- /* 绫诲瀷锛坆ase64鏍煎紡銆乽rl鏍煎紡锛� */
- type: {
- type: String,
- default: "url",
- }
+ /* 缂栬緫鍣ㄧ殑鍐呭 */
+ modelValue: propTypes.string,
+ /* 楂樺害 */
+ height: propTypes.number.def(400),
+ /* 鏈�灏忛珮搴� */
+ minHeight: propTypes.number.def(400),
+ /* 鍙 */
+ readOnly: propTypes.bool.def(false),
+ /* 涓婁紶鏂囦欢澶у皬闄愬埗(MB) */
+ fileSize: propTypes.number.def(5),
+ /* 绫诲瀷锛坆ase64鏍煎紡銆乽rl鏍煎紡锛� */
+ type: propTypes.string.def('url')
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const upload = reactive<UploadOption>({
- headers: { Authorization: "Bearer " + getToken() },
- url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
+ headers: { Authorization: "Bearer " + getToken() },
+ url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
})
const myQuillEditor = ref();
const options = ref({
- theme: "snow",
- bounds: document.body,
- debug: "warn",
- modules: {
- // 宸ュ叿鏍忛厤缃�
- toolbar: {
- container: [
- ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
- ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
- [{ list: "ordered" }, { list: "bullet"} ], // 鏈夊簭銆佹棤搴忓垪琛�
- [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
- [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
- [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
- [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
- [{ align: [] }], // 瀵归綈鏂瑰紡
- ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
- ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰�
- ],
- handlers: {
- image: function (value: any) {
- if (value) {
- // 璋冪敤element鍥剧墖涓婁紶
- (document.querySelector(".editor-img-uploader>.el-upload") as HTMLDivElement)?.click();
- } else {
- Quill.format("image", true);
- }
- },
- },
- }
- },
- placeholder: '璇疯緭鍏ュ唴瀹�',
- readOnly: props.readOnly,
+ theme: "snow",
+ bounds: document.body,
+ debug: "warn",
+ modules: {
+ // 宸ュ叿鏍忛厤缃�
+ toolbar: {
+ container: [
+ ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
+ [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
+ [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
+ [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
+ [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
+ [{ align: [] }], // 瀵归綈鏂瑰紡
+ ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
+ ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰�
+ ],
+ handlers: {
+ image: function (value: any) {
+ if (value) {
+ // 璋冪敤element鍥剧墖涓婁紶
+ (document.querySelector(".editor-img-uploader>.el-upload") as HTMLDivElement)?.click();
+ } else {
+ Quill.format("image", true);
+ }
+ },
+ },
+ }
+ },
+ placeholder: '璇疯緭鍏ュ唴瀹�',
+ readOnly: props.readOnly,
});
const styles = computed(() => {
- let style: any = {};
- if (props.minHeight) {
- style.minHeight = `${props.minHeight}px`;
- }
- if (props.height) {
- style.height = `${props.height}px`;
- }
- return style;
+ let style: any = {};
+ if (props.minHeight) {
+ style.minHeight = `${props.minHeight}px`;
+ }
+ if (props.height) {
+ style.height = `${props.height}px`;
+ }
+ return style;
})
const content = ref("");
watch(() => props.modelValue, (v) => {
- if (v !== content.value) {
- content.value = v === undefined ? "<p></p>" : v;
- }
+ if (v !== content.value) {
+ content.value = v === undefined ? "<p></p>" : v;
+ }
}, { immediate: true });
// 鍥剧墖涓婁紶鎴愬姛杩斿洖鍥剧墖鍦板潃
const handleUploadSuccess = (res: any) => {
- // 鑾峰彇瀵屾枃鏈疄渚�
- let quill = toRaw(myQuillEditor.value).getQuill();
- // 濡傛灉涓婁紶鎴愬姛
- if (res.code === 200) {
- // 鑾峰彇鍏夋爣浣嶇疆
- let length = quill.selection.savedRange.index;
- // 鎻掑叆鍥剧墖锛宺es涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囬摼鎺ュ湴鍧�
- quill.insertEmbed(length, "image", res.data.url);
- // 璋冩暣鍏夋爣鍒版渶鍚�
- quill.setSelection(length + 1);
- proxy?.$modal.closeLoading();
- } else {
- proxy?.$modal.loading(res.msg);
- proxy?.$modal.closeLoading();
- }
+ // 鑾峰彇瀵屾枃鏈疄渚�
+ let quill = toRaw(myQuillEditor.value).getQuill();
+ // 濡傛灉涓婁紶鎴愬姛
+ if (res.code === 200) {
+ // 鑾峰彇鍏夋爣浣嶇疆
+ let length = quill.selection.savedRange.index;
+ // 鎻掑叆鍥剧墖锛宺es涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囬摼鎺ュ湴鍧�
+ quill.insertEmbed(length, "image", res.data.url);
+ // 璋冩暣鍏夋爣鍒版渶鍚�
+ quill.setSelection(length + 1);
+ proxy?.$modal.closeLoading();
+ } else {
+ proxy?.$modal.loading(res.msg);
+ proxy?.$modal.closeLoading();
+ }
}
// 鍥剧墖涓婁紶鍓嶆嫤鎴�
const handleBeforeUpload = (file: any) => {
- // 鏍℃鏂囦欢澶у皬
- if (props.fileSize) {
- const isLt = file.size / 1024 / 1024 < props.fileSize;
- if (!isLt) {
- proxy?.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`);
- return false;
- }
+ // 鏍℃鏂囦欢澶у皬
+ if (props.fileSize) {
+ const isLt = file.size / 1024 / 1024 < props.fileSize;
+ if (!isLt) {
+ proxy?.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`);
+ return false;
}
- proxy?.$modal.loading('姝ｅ湪涓婁紶鏂囦欢锛岃绋嶅��...');
- return true;
+ }
+ proxy?.$modal.loading('姝ｅ湪涓婁紶鏂囦欢锛岃绋嶅��...');
+ return true;
}
// 鍥剧墖澶辫触鎷︽埅
const handleUploadError = (err: any) => {
- console.error(err);
- proxy?.$modal.msgError('涓婁紶鏂囦欢澶辫触');
+ console.error(err);
+ proxy?.$modal.msgError('涓婁紶鏂囦欢澶辫触');
}
</script>
<style>
-.editor, .ql-toolbar {
+.editor,
+.ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
+
.quill-img {
display: none;
}
+
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "璇疯緭鍏ラ摼鎺ュ湴鍧�:";
}
+
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0;
content: "淇濆瓨";
@@ -190,14 +177,17 @@
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
+
.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 {
content: "10px";
}
+
.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 {
content: "18px";
}
+
.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 {
content: "32px";
@@ -207,26 +197,32 @@
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "鏂囨湰";
}
+
.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 {
content: "鏍囬1";
}
+
.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 {
content: "鏍囬2";
}
+
.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 {
content: "鏍囬3";
}
+
.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 {
content: "鏍囬4";
}
+
.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 {
content: "鏍囬5";
}
+
.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 {
content: "鏍囬6";
@@ -236,10 +232,12 @@
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "鏍囧噯瀛椾綋";
}
+
.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 {
content: "琛嚎瀛椾綋";
}
+
.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 {
content: "绛夊瀛椾綋";
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index a46d5ee..32e871f 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -45,31 +45,18 @@
<script setup lang="ts">
import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss";
-import { ComponentInternalInstance } from "vue";
-import { ElUpload, UploadFile } from "element-plus";
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
modelValue: [String, Object, Array],
// 鏁伴噺闄愬埗
- limit: {
- type: Number,
- default: 5,
- },
+ limit: propTypes.number.def(5),
// 澶у皬闄愬埗(MB)
- fileSize: {
- type: Number,
- default: 5,
- },
+ fileSize: propTypes.number.def(5),
// 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => ["doc", "xls", "ppt", "txt", "pdf"],
- },
+ fileType: propTypes.array.def(["doc", "xls", "ppt", "txt", "pdf"]),
// 鏄惁鏄剧ず鎻愮ず
- isShowTip: {
- type: Boolean,
- default: true
- }
+ isShowTip: propTypes.bool.def(true),
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -86,7 +73,7 @@
() => props.isShowTip && (props.fileType || props.fileSize)
);
-const fileUploadRef = ref(ElUpload);
+const fileUploadRef = ref<ElUploadInstance>();
watch(() => props.modelValue, async val => {
if (val) {
@@ -96,7 +83,7 @@
if (Array.isArray(val)) {
list = val;
} else {
- const res = await listByIds(val as string)
+ const res = await listByIds(val as string)
list = res.data.map((oss) => {
const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
return data;
@@ -104,7 +91,7 @@
}
// 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁�
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++;
return item;
});
@@ -112,7 +99,7 @@
fileList.value = [];
return [];
}
-},{ deep: true, immediate: true });
+}, { deep: true, immediate: true });
// 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
const handleBeforeUpload = (file: any) => {
@@ -150,7 +137,7 @@
}
// 涓婁紶鎴愬姛鍥炶皟
-const handleUploadSuccess = (res:any, file: UploadFile) => {
+const handleUploadSuccess = (res: any, file: UploadFile) => {
if (res.code === 200) {
uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
uploadedSuccessfully();
@@ -158,7 +145,7 @@
number.value--;
proxy?.$modal.closeLoading();
proxy?.$modal.msgError(res.msg);
- fileUploadRef.value.handleRemove(file);
+ fileUploadRef.value?.handleRemove(file);
uploadedSuccessfully();
}
}
@@ -172,7 +159,7 @@
}
// 涓婁紶缁撴潫澶勭悊
-const uploadedSuccessfully =() => {
+const uploadedSuccessfully = () => {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
uploadList.value = [];
@@ -207,21 +194,24 @@
<style scoped lang="scss">
.upload-file-uploader {
- margin-bottom: 5px;
+ margin-bottom: 5px;
}
+
.upload-file-list .el-upload-list__item {
- border: 1px solid #e4e7ed;
- line-height: 2;
- margin-bottom: 10px;
- position: relative;
+ border: 1px solid #e4e7ed;
+ line-height: 2;
+ margin-bottom: 10px;
+ position: relative;
}
+
.upload-file-list .ele-upload-list__item-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: inherit;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: inherit;
}
+
.ele-upload-list__item-content-action .el-link {
- margin-right: 10px;
+ margin-right: 10px;
}
</style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index fffcedf..489ac43 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,6 +1,6 @@
<template>
<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
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>
<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
defineProps({
- isActive: {
- type: Boolean,
- default: false
- }
+ isActive: propTypes.bool.def(false)
})
const emit = defineEmits(['toggleClick'])
const toggleClick = () => {
- emit('toggleClick');
+ emit('toggleClick');
}
</script>
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index b87a585..9b0f2c6 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -23,7 +23,6 @@
import { isHttp } from '@/utils/validate';
import usePermissionStore from '@/store/modules/permission';
import { RouteOption } from 'vue-router';
-import { ElSelect } from 'element-plus';
type Router = Array<{
path: string;
@@ -35,7 +34,7 @@
const searchPool = ref<Router>([]);
const show = ref(false);
const fuse = ref();
-const headerSearchSelectRef = ref(ElSelect);
+const headerSearchSelectRef = ref<ElSelectInstance>();
const router = useRouter();
const routes = computed(() => usePermissionStore().routes);
@@ -143,40 +142,40 @@
<style lang="scss" scoped>
.header-search {
- font-size: 0 !important;
+ font-size: 0 !important;
- .search-icon {
- cursor: pointer;
- font-size: 18px;
- 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;
+ .search-icon {
+ cursor: pointer;
+ font-size: 18px;
+ vertical-align: middle;
}
- }
- &.show {
.header-search-select {
- width: 210px;
- margin-left: 10px;
+ 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 {
+ width: 210px;
+ margin-left: 10px;
+ }
+ }
}
</style>
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 22b9484..c53b437 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -31,17 +31,11 @@
<script setup lang="ts">
import icons from '@/components/IconSelect/requireIcons';
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
- modelValue: {
- type: String,
- require: true
- },
- width: {
- type: String,
- require: false,
- default: '400px'
- }
+ modelValue: propTypes.string.isRequired,
+ width: propTypes.string.def('400px')
});
const emit = defineEmits(['update:modelValue']);
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 57019e3..723ccdb 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -9,47 +9,46 @@
</template>
<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
const props = defineProps({
- src: {
- type: String,
- default: ""
- },
- width: {
- type: [Number, String],
- default: ""
- },
- height: {
- type: [Number, String],
- default: ""
- }
+ src: propTypes.string.def(''),
+ width: {
+ type: [Number, String],
+ default: ""
+ },
+ height: {
+ type: [Number, String],
+ default: ""
+ }
});
const realSrc = computed(() => {
- if (!props.src) {
- return;
- }
- let real_src = props.src.split(",")[0];
- return real_src;
+ if (!props.src) {
+ return;
+ }
+ let real_src = props.src.split(",")[0];
+ return real_src;
});
const realSrcList = computed(() => {
- if (!props.src) {
- return;
- }
- let real_src_list = props.src.split(",");
- let srcList:string[] = [];
- real_src_list.forEach(item => {
- return srcList.push(item);
- });
- return srcList;
+ if (!props.src) {
+ return;
+ }
+ let real_src_list = props.src.split(",");
+ let srcList: string[] = [];
+ real_src_list.forEach(item => {
+ return srcList.push(item);
+ });
+ return srcList;
});
const realWidth = computed(() =>
- typeof props.width == "string" ? props.width : `${props.width}px`
+ typeof props.width == "string" ? props.width : `${props.width}px`
);
const realHeight = computed(() =>
- typeof props.height == "string" ? props.height : `${props.height}px`
+ typeof props.height == "string" ? props.height : `${props.height}px`
);
</script>
@@ -58,13 +57,16 @@
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;
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 0791f3e..01edc4f 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -17,7 +17,9 @@
:on-preview="handlePictureCardPreview"
: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>
<!-- 涓婁紶鎻愮ず -->
<div class="el-upload__tip" v-if="showTip">
@@ -42,25 +44,16 @@
import { listByIds, delOss } from "@/api/system/oss";
import { ComponentInternalInstance, PropType } from "vue";
import { OssVO } from "@/api/system/oss/types";
-import { ElUpload, UploadFile } from "element-plus";
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
modelValue: [String, Object, Array],
// 鍥剧墖鏁伴噺闄愬埗
- limit: {
- type: Number,
- default: 5,
- },
+ limit: propTypes.number.def(5),
// 澶у皬闄愬埗(MB)
- fileSize: {
- type: Number,
- default: 5,
- },
+ fileSize: propTypes.number.def(5),
// 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg']
- fileType: {
- type: Array as PropType<string[]>,
- default: () => ["png", "jpg", "jpeg"],
- },
+ fileType: propTypes.array.def(["png", "jpg", "jpeg"]),
// 鏄惁鏄剧ず鎻愮ず
isShowTip: {
type: Boolean,
@@ -84,12 +77,12 @@
() => props.isShowTip && (props.fileType || props.fileSize)
);
-const imageUploadRef = ref(ElUpload);
+const imageUploadRef = ref<ElUploadInstance>();
watch(() => props.modelValue, async val => {
if (val) {
// 棣栧厛灏嗗�艰浆涓烘暟缁�
- let list:OssVO[] = [];
+ let list: OssVO[] = [];
if (Array.isArray(val)) {
list = val as OssVO[];
} else {
@@ -112,7 +105,7 @@
fileList.value = [];
return [];
}
-},{ deep: true, immediate: true });
+}, { deep: true, immediate: true });
/** 涓婁紶鍓峫oading鍔犺浇 */
const handleBeforeUpload = (file: any) => {
@@ -122,7 +115,7 @@
if (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 (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
@@ -161,7 +154,7 @@
number.value--;
proxy?.$modal.closeLoading();
proxy?.$modal.msgError(res.msg);
- imageUploadRef.value.handleRemove(file);
+ imageUploadRef.value?.handleRemove(file);
uploadedSuccessfully();
}
}
@@ -207,7 +200,7 @@
let strs = "";
separator = separator || ",";
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;
}
}
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 20226d8..09036b7 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -18,25 +18,15 @@
</template>
<script setup lang="ts">
-import { TransferKey } from "element-plus";
-import { PropType } from "vue";
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
- showSearch: {
- type: Boolean,
- default: true,
- },
+ showSearch: propTypes.bool.def(true),
columns: {
type: Array as PropType<FieldOption[]>,
},
- search: {
- type: Boolean,
- default: true,
- },
- gutter: {
- type: Number,
- default: 10,
- },
+ search: propTypes.bool.def(true),
+ gutter: propTypes.number.def(10),
})
const emits = defineEmits(['update:showSearch', 'queryTable']);
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index f3562d7..3a7540f 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -5,19 +5,12 @@
</template>
<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
const props = defineProps({
- iconClass: {
- type: String,
- required: true
- },
- className: {
- type: String,
- default: ''
- },
- color: {
- type: String,
- default: ''
- },
+ iconClass: propTypes.string.isRequired,
+ className: propTypes.string.def(''),
+ color: propTypes.string.def(''),
})
const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => {
diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 8f80377..3076804 100644
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -29,94 +29,93 @@
</template>
<script setup lang="ts">
-import { ElTreeSelect } from 'element-plus'
const props = defineProps({
/* 閰嶇疆椤� */
objMap: {
- type: Object,
- default: () => {
- return {
- value: 'id', // ID瀛楁鍚�
- label: 'label', // 鏄剧ず鍚嶇О
- children: 'children' // 瀛愮骇瀛楁鍚�
+ type: Object,
+ default: () => {
+ return {
+ value: 'id', // ID瀛楁鍚�
+ label: 'label', // 鏄剧ず鍚嶇О
+ children: 'children' // 瀛愮骇瀛楁鍚�
+ }
}
- }
},
/* 鑷姩鏀惰捣 */
accordion: {
- type: Boolean,
- default: () => {
- return false
- }
+ type: Boolean,
+ default: () => {
+ return false
+ }
},
/**褰撳墠鍙屽悜鏁版嵁缁戝畾鐨勫�� */
value: {
- type: [String, Number],
- default: ''
+ type: [String, Number],
+ default: ''
},
/**褰撳墠鐨勬暟鎹� */
options: {
- type: Array,
- default: () => []
+ type: Array,
+ default: () => []
},
/**杈撳叆妗嗗唴閮ㄧ殑鏂囧瓧 */
placeholder: {
- type: String,
- default: ''
+ type: String,
+ default: ''
}
})
-const selectTree = ref(ElTreeSelect);
+const selectTree = ref<ElTreeSelectInstance>();
const emit = defineEmits(['update:value']);
const valueId = computed({
get: () => props.value,
set: (val) => {
- emit('update:value', val)
+ emit('update:value', val)
}
});
const valueTitle = ref('');
const defaultExpandedKey = ref<any[]>([]);
-function initHandle() {
+const initHandle = () => {
nextTick(() => {
- const selectedValue = valueId.value;
- if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
- const node = selectTree.value.getNode(selectedValue)
- if (node) {
- valueTitle.value = node.data[props.objMap.label]
- selectTree.value.setCurrentKey(selectedValue) // 璁剧疆榛樿閫変腑
- defaultExpandedKey.value = [selectedValue] // 璁剧疆榛樿灞曞紑
+ const selectedValue = valueId.value;
+ if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
+ const node = selectTree.value?.getNode(selectedValue)
+ if (node) {
+ valueTitle.value = node.data[props.objMap.label]
+ selectTree.value?.setCurrentKey(selectedValue) // 璁剧疆榛樿閫変腑
+ defaultExpandedKey.value = [selectedValue] // 璁剧疆榛樿灞曞紑
+ }
+ } else {
+ clearHandle()
}
- } else {
- clearHandle()
- }
})
}
-function handleNodeClick(node: any) {
+const handleNodeClick = (node: any) => {
valueTitle.value = node[props.objMap.label]
valueId.value = node[props.objMap.value];
defaultExpandedKey.value = [];
- selectTree.value.blur()
+ selectTree.value?.blur()
selectFilterData('')
}
-function selectFilterData(val: any) {
- selectTree.value.filter(val)
+const selectFilterData = (val: any) => {
+ selectTree.value?.filter(val)
}
-function filterNode(value: any, data: any) {
+const filterNode = (value: any, data: any) => {
if (!value) return true
return data[props.objMap['label']].indexOf(value) !== -1
}
-function clearHandle() {
+const clearHandle = () => {
valueTitle.value = ''
valueId.value = ''
defaultExpandedKey.value = [];
clearSelected()
}
-function clearSelected() {
+const clearSelected = () => {
const allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element) => element.classList.remove('is-current'))
}
@@ -132,6 +131,7 @@
<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
+
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
padding: 0;
background-color: #fff;
diff --git a/src/components/iFrame/index.vue b/src/components/iFrame/index.vue
index 3d1cc7b..6679f08 100644
--- a/src/components/iFrame/index.vue
+++ b/src/components/iFrame/index.vue
@@ -5,11 +5,10 @@
</template>
<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
const props = defineProps({
- src: {
- type: String,
- required: true
- }
+ src: propTypes.string.isRequired
})
const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
--
Gitblit v1.9.3