refactor: use setup refactor

.eslintrc.js

@@ -3,6 +3,20 @@ module.exports = {
   env: {
     node: true
   },
+  globals: {
+    // Ref sugar (take 2)
+    $: "readonly",
+    $$: "readonly",
+    $ref: "readonly",
+    $shallowRef: "readonly",
+    $computed: "readonly",
+
+    // script setup
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly"
+  },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",

package.json

@@ -8,7 +8,7 @@
     "build": "rimraf dist && cross-env vite build",
     "preview": "vite preview",
     "preview:build": "yarn build && vite preview",
-    "clean:cache": "rm -rf node_modules && yarn cache clean && yarn install",
+    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn install",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",

src/utils/propTypes.ts

@@ -30,4 +30,5 @@ propTypes.extend([
     type: undefined
   }
 ]);
+
 export { propTypes };

src/views/components/cropping/index.vue

@@ -4,7 +4,7 @@ import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";
 
 const instance = getCurrentInstance();
-let info = ref<object>("");
+let info = ref<object>(null);
 let cropperImg = ref<string>("");
 
 const onCropper = (): void => {

src/views/editor/index.vue

@@ -9,8 +9,8 @@ import { onMounted, onBeforeUnmount, ref, unref } from "vue";
 import WangEditor from "wangeditor";
 
 // eslint-disable-next-line no-undef
-const editor = ref<ComponentRef>(null);
+const editor = ref(null);
-const html = ref<HTMLElement>(null);
+const html = ref(null);
 let instance: WangEditor;
 
 onMounted(() => {

src/views/flow-chart/index.vue

@@ -9,8 +9,7 @@ import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
 import { BpmnNode } from "/@/components/ReFlowChart/src/config";
 import demoData from "./dataTurbo.json";
 
-// eslint-disable-next-line no-undef
+let lf = ref(null);
-let lf = ref<ElRef>(null);
 let graphData = ref(null);
 let dataVisible = ref<boolean>(false);
 let config = ref({

src/views/system/dict/config.vue

@@ -1,93 +1,23 @@
-<template>
+<script setup lang="ts">
-  <div class="config">
+import { reactive } from "vue";
-    <el-drawer
-      :model-value="drawer"
-      :title="drawTitle"
-      :direction="direction"
-      :before-close="handleClose"
-      destroy-on-close
-      size="640px"
-    >
-      <el-divider></el-divider>
-      <!-- 列表 -->
-      <div class="list">
-        <vxe-table
-          ref="xTable"
-          border
-          :data="tableData"
-          @checkbox-change="checkboxChangeEvent"
-          @checkbox-all="checkboxChangeEvent"
-        >
-          <vxe-table-column type="checkbox" width="60"></vxe-table-column>
-          <vxe-table-column field="name" title="名称"></vxe-table-column>
-          <vxe-table-column field="dataval" title="数据值"></vxe-table-column>
-          <vxe-table-column title="操作" fixed="right">
-            <template #default="{ row }">
-              <vxe-button
-                type="text"
-                icon="el-icon-edit"
-                @click="editConfig(row)"
-                >编辑</vxe-button
-              >
-              <vxe-button
-                type="text"
-                icon="el-icon-delete"
-                @click="delConfig(row)"
-                >删除</vxe-button
-              >
-            </template>
-          </vxe-table-column>
-        </vxe-table>
-        <vxe-pager
-          perfect
-          v-model:current-page="tablePage.currentPage"
-          v-model:page-size="tablePage.pageSize"
-          :total="tablePage.total"
-          :layouts="[
-            'PrevJump',
-            'PrevPage',
-            'Number',
-            'NextPage',
-            'NextJump',
-            'Sizes',
-            'FullJump',
-            'Total'
-          ]"
-        >
-          <template #left>
-            <span class="page-left">
-              <vxe-checkbox
-                v-model="isAllChecked"
-                :indeterminate="isIndeterminate"
-                @change="changeAllEvent"
-              ></vxe-checkbox>
-              <span class="select-count"
-                >已选中{{ selectRecords.length }}条</span
-              >
-              <vxe-button size="small">{{ $t("message.hsdelete") }}</vxe-button>
-            </span>
-          </template>
-        </vxe-pager>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from "vue";
-import { propTypes } from "/@/utils/propTypes";
 import { VxeTableEvents } from "vxe-table";
 import { templateRef } from "@vueuse/core";
 
-export default defineComponent({
+interface Props {
-  props: {
+  drawer: boolean;
-    drawer: propTypes.bool.def(false),
+  drawTitle?: string;
-    drawTitle: propTypes.string.def(""),
+  direction?: string;
-    direction: propTypes.string.def("rtl")
+}
-  },
+
-  emits: ["handleClose"],
+withDefaults(defineProps<Props>(), {
-  setup(props, ctx) {
+  drawer: false,
-    const { emit } = ctx;
+  drawTitle: "",
+  direction: "rtl"
+});
+
+const emit = defineEmits<{
+  (e: "handleClose"): void;
+}>();
 
 const xTable = templateRef<any>("xTable", null);
 
@@ -120,19 +50,11 @@ export default defineComponent({
 }
 
 function editConfig(row) {
-      console.log(
+  console.log("editConfig", row);
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
 }
 
 function delConfig(row) {
-      console.log(
+  console.log("delConfig", row);
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
 }
 
 const changeAllEvent = () => {
@@ -144,27 +66,89 @@ export default defineComponent({
   configData.selectRecords = $table.getCheckboxRecords();
 };
 
-    const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({
+const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
-      records
-    }) => {
   const $table = xTable.value;
   configData.isAllChecked = $table.isAllCheckboxChecked();
   configData.isIndeterminate = $table.isCheckboxIndeterminate();
   configData.selectRecords = records;
 };
-
-    return {
-      ...toRefs(configData),
-      handleClose,
-      editConfig,
-      delConfig,
-      changeAllEvent,
-      checkboxChangeEvent
-    };
-  }
-});
 </script>
 
+<template>
+  <div class="config">
+    <el-drawer
+      :model-value="drawer"
+      :title="drawTitle"
+      :direction="direction"
+      :before-close="handleClose"
+      destroy-on-close
+      size="640px"
+    >
+      <el-divider></el-divider>
+      <!-- 列表 -->
+      <div class="list">
+        <vxe-table
+          ref="xTable"
+          border
+          :data="configData.tableData"
+          @checkbox-change="checkboxChangeEvent"
+          @checkbox-all="checkboxChangeEvent"
+        >
+          <vxe-table-column type="checkbox" width="60"></vxe-table-column>
+          <vxe-table-column field="name" title="名称"></vxe-table-column>
+          <vxe-table-column field="dataval" title="数据值"></vxe-table-column>
+          <vxe-table-column title="操作" fixed="right">
+            <template #default="{ row }">
+              <vxe-button
+                type="text"
+                icon="el-icon-edit"
+                @click="editConfig(row)"
+                >编辑</vxe-button
+              >
+              <vxe-button
+                type="text"
+                icon="el-icon-delete"
+                @click="delConfig(row)"
+                >删除</vxe-button
+              >
+            </template>
+          </vxe-table-column>
+        </vxe-table>
+        <vxe-pager
+          perfect
+          v-model:current-page="configData.tablePage.currentPage"
+          v-model:page-size="configData.tablePage.pageSize"
+          :total="configData.tablePage.total"
+          :layouts="[
+            'PrevJump',
+            'PrevPage',
+            'Number',
+            'NextPage',
+            'NextJump',
+            'Sizes',
+            'FullJump',
+            'Total'
+          ]"
+        >
+          <template #left>
+            <span class="page-left">
+              <vxe-checkbox
+                v-model="configData.isAllChecked"
+                :indeterminate="configData.isIndeterminate"
+                @change="changeAllEvent"
+              ></vxe-checkbox>
+              <span class="select-count"
+                >已选中{{ configData.selectRecords.length }}条</span
+              >
+              <vxe-button size="small">{{ $t("message.hsdelete") }}</vxe-button>
+            </span>
+          </template>
+        </vxe-pager>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .list {
   padding: 10px;

src/views/system/dict/index.vue

@@ -1,116 +1,6 @@
-<template>
+<script setup lang="ts">
-  <div class="dict-container">
+import Config from "./config.vue";
-    <!-- 工具栏 -->
+import { reactive, ref, unref, nextTick } from "vue";
-    <vxe-toolbar>
-      <template #buttons>
-        <vxe-input
-          v-model="filterName"
-          :placeholder="$t('message.hssearch')"
-          @keyup="searchEvent"
-        ></vxe-input>
-      </template>
-      <template #tools>
-        <vxe-button
-          icon="el-icon-circle-plus-outline"
-          status="primary"
-          @click="onAdd"
-          >{{ $t("message.hsadd") }}</vxe-button
-        >
-        <vxe-button
-          icon="el-icon-folder-opened"
-          status="primary"
-          @click="$refs.xTree.setAllTreeExpand(true)"
-          >{{ $t("message.hsexpendAll") }}</vxe-button
-        >
-        <vxe-button
-          icon="el-icon-folder"
-          status="primary"
-          @click="$refs.xTree.clearTreeExpand()"
-          >{{ $t("message.hscollapseAll") }}</vxe-button
-        >
-      </template>
-    </vxe-toolbar>
-
-    <!-- 列表 -->
-    <vxe-table
-      ref="xTree"
-      border
-      resizable
-      :tree-config="{
-        children: 'children',
-        iconOpen: 'fa fa-minus-square-o',
-        iconClose: 'fa fa-plus-square-o'
-      }"
-      :data="tableData"
-      @cell-dblclick="cellDBLClickEvent"
-    >
-      <vxe-table-column
-        tree-node
-        field="name"
-        title="字典名称"
-      ></vxe-table-column>
-      <vxe-table-column title="字典类型">
-        <template #default="{ row }">
-          <el-tooltip
-            effect="dark"
-            :content="'双击复制：' + row.model"
-            placement="right"
-          >
-            <span class="text-model">{{ row.model }}</span>
-          </el-tooltip>
-        </template>
-      </vxe-table-column>
-      <vxe-table-column title="操作" width="330" fixed="right">
-        <template #default="{ row }">
-          <vxe-button type="text" icon="el-icon-edit" @click="onEdit(row)"
-            >编辑</vxe-button
-          >
-          <vxe-button
-            type="text"
-            icon="el-icon-circle-plus-outline"
-            @click="onAddChild(row)"
-            >新增子类型</vxe-button
-          >
-          <vxe-button
-            v-show="row.model"
-            type="text"
-            icon="el-icon-setting"
-            @click="onDeploy(row)"
-            >字典配置</vxe-button
-          >
-          <vxe-button type="text" icon="el-icon-delete" @click="confirmEvent"
-            >删除</vxe-button
-          >
-        </template>
-      </vxe-table-column>
-    </vxe-table>
-
-    <!-- 修改、添加弹框 -->
-    <vxe-modal
-      resize
-      width="450"
-      v-model="showEdit"
-      :title="selectRow ? '编辑' : '新增'"
-      :loading="submitLoading"
-      @hide="$refs.xForm.reset()"
-    >
-      <template #default>
-        <vxe-form
-          ref="xForm"
-          :data="formData"
-          :items="formItems"
-          title-align="right"
-          title-width="100"
-          @submit="submitEvent"
-        ></vxe-form>
-      </template>
-    </vxe-modal>
-
-    <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
-  </div>
-</template>
-<script lang="ts">
-import { reactive, ref, unref, nextTick, toRefs } from "vue";
 import XEUtils from "xe-utils";
 import { cloneDeep } from "lodash-es";
 import { templateRef } from "@vueuse/core";
@@ -121,14 +11,11 @@ import {
   VxeTableEvents,
   VxeFormPropTypes
 } from "vxe-table";
-import Config from "./config.vue";
+type onEditNRow = {
+  name: string;
+  model: string;
+};
 
-export default {
-  name: "dict",
-  components: {
-    Config
-  },
-  setup() {
 const dictData = reactive({
   submitLoading: false,
   showEdit: false,
@@ -199,10 +86,6 @@ export default {
 
 const xTree = templateRef<HTMLElement | any>("xTree", null);
 
-    const formatDate = (value: any) => {
-      return XEUtils.toDateString(value, "yyyy-MM-dd HH:mm:ss.S");
-    };
-
 const handleSearch = () => {
   const filterName = XEUtils.toValueString(dictData.filterName).trim();
 
@@ -259,17 +142,13 @@ export default {
 }
 
 // 新增子类型
-    function onAddChild(row: any) {
+function onAddChild(row?: object) {
-      console.log(
+  console.log("onAddChild", row);
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
   commonFn(null, false);
 }
 
 // 编辑
-    function onEdit(row: any) {
+function onEdit(row?: onEditNRow) {
   dictData.formData = {
     name: row.name,
     model: row.model ? row.model : "暂无字典类型"
@@ -307,31 +186,128 @@ export default {
 
 let drawer = ref(false);
 
-    function onDeploy() {
+function onDeploy(value?: object) {
+  console.log("onDeploy", value);
   drawer.value = true;
 }
 
 function handleClose() {
   drawer.value = false;
 }
-
-    return {
-      ...toRefs(dictData),
-      formatDate,
-      searchEvent,
-      confirmEvent,
-      cellDBLClickEvent,
-      submitEvent,
-      onEdit,
-      onAddChild,
-      onAdd,
-      onDeploy,
-      drawer,
-      handleClose
-    };
-  }
-};
 </script>
+
+<template>
+  <div class="dict-container">
+    <!-- 工具栏 -->
+    <vxe-toolbar>
+      <template #buttons>
+        <vxe-input
+          v-model="dictData.filterName"
+          :placeholder="$t('message.hssearch')"
+          @keyup="searchEvent"
+        ></vxe-input>
+      </template>
+      <template #tools>
+        <vxe-button
+          icon="el-icon-circle-plus-outline"
+          status="primary"
+          @click="onAdd"
+          >{{ $t("message.hsadd") }}</vxe-button
+        >
+        <vxe-button
+          icon="el-icon-folder-opened"
+          status="primary"
+          @click="$refs.xTree.setAllTreeExpand(true)"
+          >{{ $t("message.hsexpendAll") }}</vxe-button
+        >
+        <vxe-button
+          icon="el-icon-folder"
+          status="primary"
+          @click="$refs.xTree.clearTreeExpand()"
+          >{{ $t("message.hscollapseAll") }}</vxe-button
+        >
+      </template>
+    </vxe-toolbar>
+
+    <!-- 列表 -->
+    <vxe-table
+      ref="xTree"
+      border
+      resizable
+      :tree-config="{
+        children: 'children',
+        iconOpen: 'fa fa-minus-square-o',
+        iconClose: 'fa fa-plus-square-o'
+      }"
+      :data="dictData.tableData"
+      @cell-dblclick="cellDBLClickEvent"
+    >
+      <vxe-table-column
+        tree-node
+        field="name"
+        title="字典名称"
+      ></vxe-table-column>
+      <vxe-table-column title="字典类型">
+        <template #default="{ row }">
+          <el-tooltip
+            effect="dark"
+            :content="'双击复制：' + row.model"
+            placement="right"
+          >
+            <span class="text-model">{{ row.model }}</span>
+          </el-tooltip>
+        </template>
+      </vxe-table-column>
+      <vxe-table-column title="操作" width="330" fixed="right">
+        <template #default="{ row }">
+          <vxe-button type="text" icon="el-icon-edit" @click="onEdit(row)"
+            >编辑</vxe-button
+          >
+          <vxe-button
+            type="text"
+            icon="el-icon-circle-plus-outline"
+            @click="onAddChild(row)"
+            >新增子类型</vxe-button
+          >
+          <vxe-button
+            v-show="row.model"
+            type="text"
+            icon="el-icon-setting"
+            @click="onDeploy(row)"
+            >字典配置</vxe-button
+          >
+          <vxe-button type="text" icon="el-icon-delete" @click="confirmEvent"
+            >删除</vxe-button
+          >
+        </template>
+      </vxe-table-column>
+    </vxe-table>
+
+    <!-- 修改、添加弹框 -->
+    <vxe-modal
+      resize
+      width="450"
+      v-model="dictData.showEdit"
+      :title="dictData.selectRow ? '编辑' : '新增'"
+      :loading="dictData.submitLoading"
+      @hide="$refs.xForm.reset()"
+    >
+      <template #default>
+        <vxe-form
+          ref="xForm"
+          :data="dictData.formData"
+          :items="dictData.formItems"
+          title-align="right"
+          title-width="100"
+          @submit="submitEvent"
+        ></vxe-form>
+      </template>
+    </vxe-modal>
+
+    <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .dict-container {
   margin: 10px;

src/views/system/user/index.vue

@@ -1,13 +1,7 @@
-<template>
+<script setup lang="ts">
-  <vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
-</template>
-
-<script lang="ts">
 import { reactive } from "vue";
 import { VxeGridProps } from "vxe-table";
-export default {
+
-  name: "user",
-  setup() {
 const gridOptions = reactive({
   border: true,
   resizable: true,
@@ -241,12 +235,8 @@ export default {
     }
   ]
 } as VxeGridProps);
-
-    return {
-      gridOptions
-    };
-  }
-};
 </script>
 
-<style scoped></style>
+<template>
+  <vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
+</template>

tsconfig.json

@@ -2,10 +2,10 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
+    "moduleResolution": "node",
     "strict": false,
     "jsx": "preserve",
     "importHelpers": true,
-    "moduleResolution": "node",
     "experimentalDecorators": true,
     "strictFunctionTypes": false,
     "skipLibCheck": true,