refactor: eslint代码检查优化

Former-commit-id: 4c11b5d0cdd10f28148cf3d9b593f85e082cdc51
2022-04-15 00:45:06 +08:00
parent 15022f51b9
commit dd93144788
69 changed files with 820 additions and 1774 deletions
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,13 +1,7 @@
 <template>
  <div class="icon-body">
-    <el-input
-      v-model="iconName"
-      style="position: relative;"
-      clearable
-      placeholder="请输入图标名称"
-      @clear="filterIcons"
-      @input="filterIcons"
-    >
+    <el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons"
+      @input="filterIcons">
      <template #suffix><i class="el-icon-search el-input__icon" /></template>
    </el-input>
    <div class="icon-list">
@@ -19,11 +13,11 @@
  </div>
 </template>

-<script setup>
-import { ref} from "vue";
+<script setup lang="ts">
+import { ref } from "vue";
 import SvgIcon from '@/components/SvgIcon/index.vue';

-let icons = []
+const icons = [] as string[]
 const modules = import.meta.glob('../../assets/icons/svg/*.svg');
 for (const path in modules) {
  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
@@ -42,7 +36,7 @@ function filterIcons() {
  }
 }

-function selectedIcon(name) {
+function selectedIcon(name: string) {
  emit('selected', name)
  document.body.click()
 }
@@ -61,9 +55,11 @@ defineExpose({
 .icon-body {
  width: 100%;
  padding: 10px;
+
  .icon-list {
    height: 200px;
    overflow-y: scroll;
+
    div {
      height: 30px;
      line-height: 30px;
@@ -72,6 +68,7 @@ defineExpose({
      width: 33%;
      float: left;
    }
+
    span {
      display: inline-block;
      vertical-align: -0.15em;
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,26 +1,19 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-        :background="background"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :layout="layout"
-        :page-sizes="pageSizes"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-    />
+  <div :class="{ 'hidden': hidden }" class="pagination-container">
+    <el-pagination :background="background" v-model:current-page="currentPage" v-model:page-size="pageSize"
+      :layout="layout" :page-sizes="pageSizes" :total="total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
  </div>
 </template>

-<script setup>
-import {computed} from "vue";
-import {scrollTo} from '@/utils/scroll-to'
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import { scrollTo } from '@/utils/scroll-to'

 const props = defineProps({
  total: {
    required: true,
-    type: Number,
+    type: Number as PropType<number>,
    default: 0
  },
  page: {
@@ -32,7 +25,7 @@ const props = defineProps({
    default: 20
  },
  pageSizes: {
-    type: Array,
+    type: Array as PropType<number[]>,
    default() {
      return [10, 20, 30, 50]
    }
@@ -55,18 +48,16 @@ const props = defineProps({
  }
 })

-const emit = defineEmits();
+const emit = defineEmits(["update:page", "update:limit", "pagination"]);

-const currentPage = computed({
-  get() {
-    return props.page
-  },
-  set(val) {
-    emit('update:page', val)
+const currentPage = computed<number | undefined>({
+  get: () => props.page,
+  set: (value) => {
+    emit('update:page', value)
  }
 })

-const pageSize = computed({
+const pageSize = computed<number | undefined>({
  get() {
    return props.limit
  },
@@ -75,15 +66,16 @@ const pageSize = computed({
  }
 })

-function handleSizeChange(val) {
-  emit('pagination', {page: currentPage, limit: val})
+function handleSizeChange(val: number) {
+  emit('pagination', { page: currentPage, limit: val })
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
 }

-function handleCurrentChange(val) {
-  emit('pagination', {page: val, limit: props.pageSizes})
+function handleCurrentChange(val: number) {
+  currentPage.value = val
+  emit('pagination', { page: val, limit: props.limit })
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -1,42 +1,41 @@
 <template>
-  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
-    <div class="rightPanel-background"/>
+  <div ref="rightPanel" :class="{ show: show }" class="rightPanel-container">
+    <div class="rightPanel-background" />
    <div class="rightPanel">
-      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
-        <Close style="width: 1em; height: 1em;vertical-align: middle " v-show="show"/>
-        <Setting style="width:1em; height:1em;vertical-align: middle " v-show="!show"/>
+      <div class="handle-button" :style="{ 'top': buttonTop + 'px', 'background-color': theme }" @click="show = !show">
+        <Close style="width: 1em; height: 1em;vertical-align: middle " v-show="show" />
+        <Setting style="width:1em; height:1em;vertical-align: middle " v-show="!show" />
      </div>
      <div class="rightPanel-items">
-        <slot/>
+        <slot />
      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";

-import {addClass, removeClass} from '@/utils/index'
+import { addClass, removeClass } from '@/utils/index'

 import useStore from "@/store";

 // 图标依赖
-import {Close, Setting} from '@element-plus/icons-vue'
-import {ElColorPicker} from "element-plus";
+import { Close, Setting } from '@element-plus/icons-vue'
+import { ElColorPicker } from "element-plus";

-const {setting} =useStore()
+const { setting } = useStore()

-const props = defineProps({
+const theme = computed(() => setting.theme)
+const show = ref(false)
+
+defineProps({
  buttonTop: {
    default: 250,
    type: Number
  }
 })

-const theme = computed(() =>setting.theme)
-
-const show = ref(false)
-
 watch(show, (value) => {
  if (value) {
    addEventClick()
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,12 +1,12 @@
 <template>
  <div>
-    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle"/>
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
  </div>
 </template>

-<script setup>
-import {useFullscreen} from '@vueuse/core'
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core'
 import SvgIcon from '@/components/SvgIcon/index.vue'

-const {isFullscreen, enter, toggle} = useFullscreen();
+const { isFullscreen, toggle } = useFullscreen();
 </script>
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -5,12 +5,8 @@
    </div>
    <template #dropdown>
      <el-dropdown-menu>
-        <el-dropdown-item
-          v-for="item of sizeOptions"
-          :key="item.value"
-          :disabled="(size || 'default') == item.value"
-          :command="item.value"
-        >
+        <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="(size || 'default') == item.value"
+          :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
@@ -20,8 +16,6 @@

 <script setup lang="ts">
 import { ref, computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
 import { ElMessage } from "element-plus";

 import useStore from "@/store";
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -8,9 +8,8 @@
 </template>

 <script setup lang="ts">
-import {computed, nextTick, watch} from "vue";
+import {computed, watch} from "vue";
 import useStore from "@/store";
-import {useRoute, useRouter} from "vue-router";
 import {localStorage} from "@/utils/storage";

 // 参考连接:https://juejin.cn/post/7024025899813044232#heading-1
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -1,44 +1,27 @@
 <template>
  <div class="el-tree-select">
-    <el-select
-      style="width: 100%"
-      v-model="modelValue"
-      ref="treeSelect"
-      :filterable="true"
-      :clearable="true"
-      @clear="clearHandle"
-      :filter-method="selectFilterData"
-      :placeholder="placeholder"
-    >
+    <el-select style="width: 100%" v-model="modelValue" ref="treeSelect" :filterable="true" :clearable="true"
+      @clear="clearHandle" :filter-method="selectFilterData" :placeholder="placeholder">
      <el-option :value="modelValue" :label="valueTitle">
-        <el-tree
-          id="tree-option"
-          ref="selectTree"
-          :accordion="accordion"
-          :data="options"
-          :props="state.props"
-          :node-key="state.props.value"
-          :expand-on-click-node="false"
-          :default-expanded-keys="defaultExpandedKey"
-          :filter-node-method="filterNode"
-          @node-click="handleNodeClick"
-        ></el-tree>
+        <el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="options" :props="state.props"
+          :node-key="state.props.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>
+<script setup lang="ts">
 import {
  ref,
  getCurrentInstance,
  nextTick,
  onMounted,
  computed,
-  watch,
+  watch
 } from "vue";

-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance() as any;

 const state = defineProps({
  // 配置项
@@ -67,7 +50,9 @@ const state = defineProps({
  // 数据源
  options: {
    type: Array,
-    default: [],
+    default: () => {
+      return []
+    }
  },
  // 提示文字
  placeholder: {
@@ -87,9 +72,9 @@ const modelValue = computed({
  },
 });
 const valueTitle = ref("");
-const defaultExpandedKey = ref([]);
+const defaultExpandedKey = ref([] as any[]);

-function handleNodeClick(node) {
+function handleNodeClick(node: any) {
  valueTitle.value = node[state.props.label];
  modelValue.value = node[state.props.value];
  defaultExpandedKey.value = [];
@@ -97,11 +82,11 @@ function handleNodeClick(node) {
  selectFilterData("");
 }

-function selectFilterData(val) {
+function selectFilterData(val: any) {
  proxy.$refs.selectTree.filter(val);
 }

-function filterNode(value, data) {
+function filterNode(value: any, data: any) {
  if (!value) return true;
  return data[state.props["label"]].indexOf(value) !== -1;
 }
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -28,18 +28,16 @@
 </template>

 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { Plus, Close } from "@element-plus/icons-vue";
 import {
  ElMessage,
  ElUpload,
-  UploadFile,
  UploadRawFile,
  UploadRequestOptions,
 } from "element-plus";
 import { uploadFile, deleteFile } from "@/api/system/file";

-const uploadRef = ref(ElUpload);
 const emit = defineEmits(["update:modelValue"]);

 const props = defineProps({
@@ -89,10 +87,9 @@ function handleRemove(fileUrl?: string) {
 }
 /**
 * 在 before-upload 钩子中限制用户上传文件的格式和大小
- *
 */
 function handleBeforeUpload(file: UploadRawFile) {
-  const isJPG = file.type === "image/jpeg";
+  // const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isLt2M) {
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -1,28 +1,19 @@
 <template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
-    <Toolbar
-        :editorId="editorId"
-        :defaultConfig="toolbarConfig"
-        style="border-bottom: 1px solid #ccc"
-    />
+    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #ccc" :mode="mode" />
    <!-- 编辑器 -->
-    <Editor
-        :editorId="editorId"
-        :defaultConfig="editorConfig"
-        :defaultHtml="defaultHtml"
-        @onChange="handleChange"
-        style="height: 500px; overflow-y: hidden;"
-    />
+    <Editor :defaultConfig="editorConfig" v-model="defaultHtml" @onChange="handleChange"
+      style="height: 500px; overflow-y: hidden;" :mode="mode" @onCreated="handleCreated" />
  </div>
 </template>

 <script setup lang="ts">
-import {computed, onBeforeUnmount, reactive, toRefs} from 'vue'
-import {Editor, Toolbar, getEditor, removeEditor} from '@wangeditor/editor-for-vue'
+import { onBeforeUnmount, shallowRef, reactive, toRefs} from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

 // API 引用
-import {uploadFile} from "@/api/system/file";
+import { uploadFile } from "@/api/system/file";

 const props = defineProps({
  modelValue: {
@@ -33,16 +24,18 @@ const props = defineProps({

 const emit = defineEmits(['update:modelValue']);

+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
 const state = reactive({
-  editorId: `w-e-${Math.random().toString().slice(-5)}`, //【注意】编辑器 id ，要全局唯一
  toolbarConfig: {},
  editorConfig: {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // 自定义图片上传
-        // @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
-        async customUpload(file:any, insertFn:any) {
+        async customUpload(file: any, insertFn: any) {
+          console.log("上传图片")
          uploadFile(file).then(response => {
            const url = response.data
            insertFn(url)
@@ -51,23 +44,28 @@ const state = reactive({
      }
    }
  },
-  defaultHtml: props.modelValue
+  defaultHtml: props.modelValue,
+  mode: 'default'
 })

-const {editorId, toolbarConfig, editorConfig,defaultHtml} = toRefs(state)
+const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state)

-function handleChange(editor:any) {
+const handleCreated = (editor: any) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+function handleChange(editor: any) {
  emit('update:modelValue', editor.getHtml())
 }

 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
-  const editor = getEditor(state.editorId)
+  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
-  removeEditor(state.editorId)
 })

 </script>

-<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style src="@wangeditor/editor/dist/css/style.css">
+</style>