update 调整代码格式

2023-04-03 00:26:04 +08:00
parent a7a31b011a
commit 97187b246b
24 changed files with 1160 additions and 1159 deletions
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@ -1,17 +1,3 @@
-<script setup lang="ts">
-defineProps({
-  isActive: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const emit = defineEmits(['toggleClick'])
-const toggleClick = () => {
-  emit('toggleClick');
-}
-</script>
-
 <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">
@ -22,6 +8,20 @@ const toggleClick = () => {
  </div>
 </template>

+<script setup lang="ts">
+defineProps({
+    isActive: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['toggleClick'])
+const toggleClick = () => {
+    emit('toggleClick');
+}
+</script>
+
 <style scoped>
 .hamburger {
  display: inline-block;
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@ -1,126 +1,3 @@
-<script setup lang="ts">
-import Fuse from 'fuse.js'
-import { getNormalPath } from '@/utils/ruoyi'
-import { isHttp } from '@/utils/validate'
-import usePermissionStore from '@/store/modules/permission'
-import { RouteOption } from 'vue-router'
-
-type Router = Array<{
-  path: string;
-  title: string[];
-}>
-
-const search = ref('');
-const options = ref<any>([]);
-const searchPool = ref<Router>([]);
-const show = ref(false);
-const fuse = ref();
-const headerSearchSelectRef = ref(ElSelect);
-const router = useRouter();
-const routes = computed(() => usePermissionStore().routes);
-
-const click = () => {
-  show.value = !show.value
-  if (show.value) {
-    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
-  }
-};
-const close = () => {
-  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
-  options.value = []
-  show.value = false
-}
-const change = (val: any) => {
-  const path = val.path;
-  if (isHttp(path)) {
-    // http(s):// 路径新窗口打开
-    const pindex = path.indexOf("http");
-    window.open(path.substr(pindex, path.length), "_blank");
-  } else {
-    router.push(path)
-  }
-  search.value = ''
-  options.value = []
-  nextTick(() => {
-    show.value = false
-  })
-}
-const initFuse = (list: Router) => {
-  fuse.value = new Fuse(list, {
-    shouldSort: true,
-    threshold: 0.4,
-    location: 0,
-    distance: 100,
-    minMatchCharLength: 1,
-    keys: [{
-      name: 'title',
-      weight: 0.7
-    }, {
-      name: 'path',
-      weight: 0.3
-    }]
-  })
-}
-// Filter out the routes that can be displayed in the sidebar
-// And generate the internationalized title
-const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
-  let res: Router = []
-  routes.forEach(r => {
-    // skip hidden router
-    if (!r.hidden) {
-      const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
-      const data = {
-        path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
-        title: [...prefixTitle]
-      }
-      if (r.meta && r.meta.title) {
-        data.title = [...data.title, r.meta.title];
-        if (r.redirect !== 'noRedirect') {
-          // only push the routes with title
-          // special case: need to exclude parent router without redirect
-          res.push(data);
-        }
-      }
-      // recursive child routes
-      if (r.children) {
-        const tempRoutes = generateRoutes(r.children, data.path, data.title);
-        if (tempRoutes.length >= 1) {
-          res = [...res, ...tempRoutes];
-        }
-      }
-    }
-  })
-  return res;
-}
-const querySearch = (query: string) => {
-  if (query !== '') {
-    options.value = fuse.value.search(query)
-  } else {
-    options.value = []
-  }
-}
-
-onMounted(() => {
-  searchPool.value = generateRoutes(routes.value);
-})
-
-watchEffect(() => {
-  searchPool.value = generateRoutes(routes.value)
-})
-
-watch(show, (value) => {
-  if (value) {
-    document.body.addEventListener('click', close)
-  } else {
-    document.body.removeEventListener('click', close)
-  }
-})
-
-watch(searchPool, (list) => {
-  initFuse(list)
-})
-</script>
-
 <template>
  <div :class="{ 'show': show }" class="header-search">
    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
@ -140,6 +17,129 @@ watch(searchPool, (list) => {
  </div>
 </template>

+<script setup lang="ts">
+import Fuse from 'fuse.js'
+import { getNormalPath } from '@/utils/ruoyi'
+import { isHttp } from '@/utils/validate'
+import usePermissionStore from '@/store/modules/permission'
+import { RouteOption } from 'vue-router'
+
+type Router = Array<{
+    path: string;
+    title: string[];
+}>
+
+const search = ref('');
+const options = ref<any>([]);
+const searchPool = ref<Router>([]);
+const show = ref(false);
+const fuse = ref();
+const headerSearchSelectRef = ref(ElSelect);
+const router = useRouter();
+const routes = computed(() => usePermissionStore().routes);
+
+const click = () => {
+    show.value = !show.value
+    if (show.value) {
+        headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
+    }
+};
+const close = () => {
+    headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
+    options.value = []
+    show.value = false
+}
+const change = (val: any) => {
+    const path = val.path;
+    if (isHttp(path)) {
+        // http(s):// 路径新窗口打开
+        const pindex = path.indexOf("http");
+        window.open(path.substr(pindex, path.length), "_blank");
+    } else {
+        router.push(path)
+    }
+    search.value = ''
+    options.value = []
+    nextTick(() => {
+        show.value = false
+    })
+}
+const initFuse = (list: Router) => {
+    fuse.value = new Fuse(list, {
+        shouldSort: true,
+        threshold: 0.4,
+        location: 0,
+        distance: 100,
+        minMatchCharLength: 1,
+        keys: [{
+            name: 'title',
+            weight: 0.7
+        }, {
+            name: 'path',
+            weight: 0.3
+        }]
+    })
+}
+// Filter out the routes that can be displayed in the sidebar
+// And generate the internationalized title
+const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
+    let res: Router = []
+    routes.forEach(r => {
+        // skip hidden router
+        if (!r.hidden) {
+            const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+            const data = {
+                path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+                title: [...prefixTitle]
+            }
+            if (r.meta && r.meta.title) {
+                data.title = [...data.title, r.meta.title];
+                if (r.redirect !== 'noRedirect') {
+                    // only push the routes with title
+                    // special case: need to exclude parent router without redirect
+                    res.push(data);
+                }
+            }
+            // recursive child routes
+            if (r.children) {
+                const tempRoutes = generateRoutes(r.children, data.path, data.title);
+                if (tempRoutes.length >= 1) {
+                    res = [...res, ...tempRoutes];
+                }
+            }
+        }
+    })
+    return res;
+}
+const querySearch = (query: string) => {
+    if (query !== '') {
+        options.value = fuse.value.search(query)
+    } else {
+        options.value = []
+    }
+}
+
+onMounted(() => {
+    searchPool.value = generateRoutes(routes.value);
+})
+
+watchEffect(() => {
+    searchPool.value = generateRoutes(routes.value)
+})
+
+watch(show, (value) => {
+    if (value) {
+        document.body.addEventListener('click', close)
+    } else {
+        document.body.removeEventListener('click', close)
+    }
+})
+
+watch(searchPool, (list) => {
+    initFuse(list)
+})
+</script>
+
 <style lang="scss" scoped>
 .header-search {
  font-size: 0 !important;
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@ -1,48 +1,3 @@
-<script setup lang="ts">
-import icons from '@/components/IconSelect/requireIcons';
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    require: true
-  },
-  width: {
-    type: String,
-    require: false,
-    default: '400px'
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-const visible = ref(false);
-const { modelValue, width } = toRefs(props);
-const iconNames = ref<string[]>(icons);
-
-const filterValue = ref('');
-
-/**
- * 筛选图标
- */
-const filterIcons = () => {
-  if (filterValue.value) {
-    iconNames.value = icons.filter(iconName =>
-      iconName.includes(filterValue.value)
-    );
-  } else {
-    iconNames.value = icons;
-  }
-}
-
-/**
- * 选择图标
- * @param iconName 选择的图标名称
- */
-const selectedIcon = (iconName: string) => {
-  emit('update:modelValue', iconName);
-  visible.value = false;
-}
-</script>
-
 <template>
  <div class="relative" :style="{ width: width }">
    <el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
@ -74,6 +29,51 @@ const selectedIcon = (iconName: string) => {
  </div>
 </template>

+<script setup lang="ts">
+import icons from '@/components/IconSelect/requireIcons';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        require: true
+    },
+    width: {
+        type: String,
+        require: false,
+        default: '400px'
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+const visible = ref(false);
+const { modelValue, width } = toRefs(props);
+const iconNames = ref<string[]>(icons);
+
+const filterValue = ref('');
+
+/**
+ * 筛选图标
+ */
+const filterIcons = () => {
+    if (filterValue.value) {
+        iconNames.value = icons.filter(iconName =>
+            iconName.includes(filterValue.value)
+        );
+    } else {
+        iconNames.value = icons;
+    }
+}
+
+/**
+ * 选择图标
+ * @param iconName 选择的图标名称
+ */
+const selectedIcon = (iconName: string) => {
+    emit('update:modelValue', iconName);
+    visible.value = false;
+}
+</script>
+
 <style scoped lang="scss">
 .el-divider--horizontal {
  margin: 10px auto !important;
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@ -1,48 +1,3 @@
-<script setup lang="ts">
-const props = defineProps({
-  src: {
-    type: String,
-    default: ""
-  },
-  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;
-});
-
-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;
-});
-
-const realWidth = computed(() =>
-  typeof props.width == "string" ? props.width : `${props.width}px`
-);
-
-const realHeight = computed(() =>
-  typeof props.height == "string" ? props.height : `${props.height}px`
-);
-</script>
-
 <template>
  <el-image :src="`${realSrc}`" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="realSrcList" preview-teleported>
    <template #error>
@ -53,6 +8,51 @@ const realHeight = computed(() =>
  </el-image>
 </template>

+<script setup lang="ts">
+const props = defineProps({
+    src: {
+        type: String,
+        default: ""
+    },
+    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;
+});
+
+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;
+});
+
+const realWidth = computed(() =>
+    typeof props.width == "string" ? props.width : `${props.width}px`
+);
+
+const realHeight = computed(() =>
+    typeof props.height == "string" ? props.height : `${props.height}px`
+);
+</script>
+
 <style lang="scss" scoped>
 .el-image {
  border-radius: 5px;
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@ -1,20 +1,3 @@
-<script setup lang="ts">
-import useAppStore from "@/store/modules/app";
-
-const appStore = useAppStore();
-const size = computed(() => appStore.size);
-
-const sizeOptions = ref([
-  { label: "较大", value: "large" },
-  { label: "默认", value: "default" },
-  { label: "稍小", value: "small" },
-]);
-
-const handleSetSize = (size: string) => {
-  appStore.setSize(size);
-}
-</script>
-
 <template>
  <div>
    <el-dropdown trigger="click" @command="handleSetSize">
@ -32,6 +15,23 @@ const handleSetSize = (size: string) => {
  </div>
 </template>

+<script setup lang="ts">
+import useAppStore from "@/store/modules/app";
+
+const appStore = useAppStore();
+const size = computed(() => appStore.size);
+
+const sizeOptions = ref([
+    { label: "较大", value: "large" },
+    { label: "默认", value: "default" },
+    { label: "稍小", value: "small" },
+]);
+
+const handleSetSize = (size: string) => {
+    appStore.setSize(size);
+}
+</script>
+
 <style lang="scss" scoped>
 .size-icon--style {
  font-size: 18px;
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@ -1,33 +1,33 @@
-<script setup lang="ts">
-const props = defineProps({
-  iconClass: {
-    type: String,
-    required: true
-  },
-  className: {
-    type: String,
-    default: ''
-  },
-  color: {
-    type: String,
-    default: ''
-  },
-})
-const iconName =  computed(() => `#icon-${props.iconClass}`);
-const svgClass = computed(() => {
-  if (props.className) {
-    return `svg-icon ${props.className}`
-  }
-  return 'svg-icon'
-})
-</script>
-
 <template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
 </template>

+<script setup lang="ts">
+const props = defineProps({
+    iconClass: {
+        type: String,
+        required: true
+    },
+    className: {
+        type: String,
+        default: ''
+    },
+    color: {
+        type: String,
+        default: ''
+    },
+})
+const iconName =  computed(() => `#icon-${props.iconClass}`);
+const svgClass = computed(() => {
+    if (props.className) {
+        return `svg-icon ${props.className}`
+    }
+    return 'svg-icon'
+})
+</script>
+
 <style scope lang="scss">
 .sub-el-icon,
 .nav-icon {
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@ -1,21 +1,21 @@
 <template>
-    <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
-        <template v-for="(item, index) in topMenus">
-            <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-            ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
-            >
-        </template>
+  <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
+    <template v-for="(item, index) in topMenus">
+      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+        ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
+      >
+    </template>

-        <!-- 顶部菜单超出数量折叠 -->
-        <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
-            <template #title>更多菜单</template>
-            <template v-for="(item, index) in topMenus">
-                <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"
-                ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
-                >
-            </template>
-        </el-sub-menu>
-    </el-menu>
+    <!-- 顶部菜单超出数量折叠 -->
+    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+      <template #title>更多菜单</template>
+      <template v-for="(item, index) in topMenus">
+        <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"
+          ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
+        >
+      </template>
+    </el-sub-menu>
+  </el-menu>
 </template>

 <script setup lang="ts">
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@ -1,39 +1,69 @@
+<template>
+  <div class="el-tree-select">
+    <el-select
+      style="width: 100%"
+      v-model="valueId"
+      ref="treeSelect"
+      :filterable="true"
+      :clearable="true"
+      @clear="clearHandle"
+      :filter-method="selectFilterData"
+      :placeholder="placeholder"
+    >
+      <el-option :value="valueId" :label="valueTitle">
+        <el-tree
+          id="tree-option"
+          ref="selectTree"
+          :accordion="accordion"
+          :data="options"
+          :props="objMap"
+          :node-key="objMap.value"
+          :expand-on-click-node="false"
+          :default-expanded-keys="defaultExpandedKey"
+          :filter-node-method="filterNode"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </el-option>
+    </el-select>
+  </div>
+</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: ''
  }
 })

@ -45,7 +75,7 @@ const emit = defineEmits(['update:value']);
 const valueId = computed({
  get: () => props.value,
  set: (val) => {
-    emit('update:value', val)
+  emit('update:value', val)
  }
 });
 const valueTitle = ref('');
@ -53,17 +83,17 @@ const defaultExpandedKey = ref<any[]>([]);

 function 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] // 设置默认展开
-      }
-    } else {
-      clearHandle()
+  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()
+  }
  })
 }
 function handleNodeClick(node: any) {
@ -126,33 +156,3 @@ ul li .el-tree .el-tree-node__content {
  color: $--color-primary;
 }
 </style>
-
-<template>
-  <div class="el-tree-select">
-    <el-select
-      style="width: 100%"
-      v-model="valueId"
-      ref="treeSelect"
-      :filterable="true"
-      :clearable="true"
-      @clear="clearHandle"
-      :filter-method="selectFilterData"
-      :placeholder="placeholder"
-    >
-      <el-option :value="valueId" :label="valueTitle">
-        <el-tree
-          id="tree-option"
-          ref="selectTree"
-          :accordion="accordion"
-          :data="options"
-          :props="objMap"
-          :node-key="objMap.value"
-          :expand-on-click-node="false"
-          :default-expanded-keys="defaultExpandedKey"
-          :filter-node-method="filterNode"
-          @node-click="handleNodeClick"
-        ></el-tree>
-      </el-option>
-    </el-select>
-  </div>
-</template>
--- a/src/components/iFrame/index.vue
+++ b/src/components/iFrame/index.vue
@ -1,3 +1,9 @@
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
+  </div>
+</template>
+
 <script setup lang="ts">
 const props = defineProps({
  src: {
@ -19,9 +25,3 @@ onMounted(() => {
  };
 })
 </script>
-
-<template>
-  <div v-loading="loading" :style="'height:' + height">
-    <iframe :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
-  </div>
-</template>