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,3 +1,79 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import { VxeTableEvents } from "vxe-table";
+import { templateRef } from "@vueuse/core";
+
+interface Props {
+  drawer: boolean;
+  drawTitle?: string;
+  direction?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  drawer: false,
+  drawTitle: "",
+  direction: "rtl"
+});
+
+const emit = defineEmits<{
+  (e: "handleClose"): void;
+}>();
+
+const xTable = templateRef<any>("xTable", null);
+
+const configData = reactive({
+  tableData: [
+    {
+      name: "禁用",
+      dataval: "0"
+    },
+    {
+      name: "启用",
+      dataval: "1"
+    }
+  ],
+  isAllChecked: false,
+  isIndeterminate: false,
+  selectRecords: [] as any[],
+  tablePage: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10
+  }
+});
+
+// 抽屉关闭
+function handleClose() {
+  configData.isAllChecked = false;
+  configData.isIndeterminate = false;
+  emit("handleClose");
+}
+
+function editConfig(row) {
+  console.log("editConfig", row);
+}
+
+function delConfig(row) {
+  console.log("delConfig", row);
+}
+
+const changeAllEvent = () => {
+  setTimeout(() => {
+    console.log(xTable);
+  }, 1000);
+  const $table = xTable.value;
+  $table.setAllCheckboxRow(configData.isAllChecked);
+  configData.selectRecords = $table.getCheckboxRecords();
+};
+
+const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
+  const $table = xTable.value;
+  configData.isAllChecked = $table.isAllCheckboxChecked();
+  configData.isIndeterminate = $table.isCheckboxIndeterminate();
+  configData.selectRecords = records;
+};
+</script>
+
 <template>
   <div class="config">
     <el-drawer
@@ -14,7 +90,7 @@
         <vxe-table
           ref="xTable"
           border
-          :data="tableData"
+          :data="configData.tableData"
           @checkbox-change="checkboxChangeEvent"
           @checkbox-all="checkboxChangeEvent"
         >
@@ -40,9 +116,9 @@
         </vxe-table>
         <vxe-pager
           perfect
-          v-model:current-page="tablePage.currentPage"
+          v-model:current-page="configData.tablePage.currentPage"
-          v-model:page-size="tablePage.pageSize"
+          v-model:page-size="configData.tablePage.pageSize"
-          :total="tablePage.total"
+          :total="configData.tablePage.total"
           :layouts="[
             'PrevJump',
             'PrevPage',
@@ -57,12 +133,12 @@
           <template #left>
             <span class="page-left">
               <vxe-checkbox
-                v-model="isAllChecked"
+                v-model="configData.isAllChecked"
-                :indeterminate="isIndeterminate"
+                :indeterminate="configData.isIndeterminate"
                 @change="changeAllEvent"
               ></vxe-checkbox>
               <span class="select-count"
-                >已选中{{ selectRecords.length }}条</span
+                >已选中{{ configData.selectRecords.length }}条</span
               >
               <vxe-button size="small">{{ $t("message.hsdelete") }}</vxe-button>
             </span>
@@ -73,98 +149,6 @@
   </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({
-  props: {
-    drawer: propTypes.bool.def(false),
-    drawTitle: propTypes.string.def(""),
-    direction: propTypes.string.def("rtl")
-  },
-  emits: ["handleClose"],
-  setup(props, ctx) {
-    const { emit } = ctx;
-
-    const xTable = templateRef<any>("xTable", null);
-
-    const configData = reactive({
-      tableData: [
-        {
-          name: "禁用",
-          dataval: "0"
-        },
-        {
-          name: "启用",
-          dataval: "1"
-        }
-      ],
-      isAllChecked: false,
-      isIndeterminate: false,
-      selectRecords: [] as any[],
-      tablePage: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 10
-      }
-    });
-
-    // 抽屉关闭
-    function handleClose() {
-      configData.isAllChecked = false;
-      configData.isIndeterminate = false;
-      emit("handleClose");
-    }
-
-    function editConfig(row) {
-      console.log(
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
-    }
-
-    function delConfig(row) {
-      console.log(
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
-    }
-
-    const changeAllEvent = () => {
-      setTimeout(() => {
-        console.log(xTable);
-      }, 1000);
-      const $table = xTable.value;
-      $table.setAllCheckboxRow(configData.isAllChecked);
-      configData.selectRecords = $table.getCheckboxRecords();
-    };
-
-    const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({
-      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>
-
 <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,15 +11,12 @@ import {
   VxeTableEvents,
   VxeFormPropTypes
 } from "vxe-table";
-import Config from "./config.vue";
+type onEditNRow = {
+  name: string;
+  model: string;
+};
 
-export default {
+const dictData = reactive({
-  name: "dict",
-  components: {
-    Config
-  },
-  setup() {
-    const dictData = reactive({
   submitLoading: false,
   showEdit: false,
   selectRow: null,
@@ -193,17 +80,13 @@ export default {
       }
     }
   ] as VxeFormPropTypes.Items
-    });
+});
 
-    let originData = cloneDeep(dictData.tableData);
+let originData = cloneDeep(dictData.tableData);
 
-    const xTree = templateRef<HTMLElement | any>("xTree", null);
+const xTree = templateRef<HTMLElement | any>("xTree", null);
 
-    const formatDate = (value: any) => {
+const handleSearch = () => {
-      return XEUtils.toDateString(value, "yyyy-MM-dd HH:mm:ss.S");
-    };
-
-    const handleSearch = () => {
   const filterName = XEUtils.toValueString(dictData.filterName).trim();
 
   if (filterName) {
@@ -227,49 +110,45 @@ export default {
   } else {
     dictData.tableData = originData;
   }
-    };
+};
 
-    // 创建一个防防抖函数，调用频率间隔 100 毫秒
+// 创建一个防防抖函数，调用频率间隔 100 毫秒
-    const searchEvent = XEUtils.debounce(
+const searchEvent = XEUtils.debounce(
   function () {
     handleSearch();
   },
   100,
   { leading: false, trailing: true }
-    );
+);
 
-    const confirmEvent = async () => {
+const confirmEvent = async () => {
   const type = await VXETable.modal.confirm("您确定要删除吗？");
   (await type) === "confirm" &&
     VXETable.modal.message({
       content: "测试数据，不可删除",
       status: "error"
     });
-    };
+};
 
-    function commonFn(value, disabled) {
+function commonFn(value, disabled) {
   dictData.selectRow = value;
   dictData.showEdit = true;
   dictData.formItems[1].itemRender.props.disabled = disabled;
-    }
+}
 
-    // 新增
+// 新增
-    function onAdd() {
+function onAdd() {
   commonFn(null, false);
-    }
+}
 
-    // 新增子类型
+// 新增子类型
-    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 : "暂无字典类型"
@@ -279,17 +158,17 @@ export default {
   //   content: "测试数据，不可编辑",
   //   status: "error"
   // });
-    }
+}
 
-    // 拷贝当前列表项的数据（字典类型）
+// 拷贝当前列表项的数据（字典类型）
-    const { clipboardRef } = useCopyToClipboard();
+const { clipboardRef } = useCopyToClipboard();
-    const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
+const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
   clipboardRef.value = unref(row).model;
-    };
+};
 
-    const xTable = ref({} as VxeTableInstance);
+const xTable = ref({} as VxeTableInstance);
 
-    const submitEvent = () => {
+const submitEvent = () => {
   dictData.submitLoading = true;
   setTimeout(() => {
     const $table = xTable.value;
@@ -303,35 +182,132 @@ export default {
       $table.insert(dictData.formData);
     }
   }, 500);
-    };
-
-    let drawer = ref(false);
-
-    function onDeploy() {
-      drawer.value = true;
-    }
-
-    function handleClose() {
-      drawer.value = false;
-    }
-
-    return {
-      ...toRefs(dictData),
-      formatDate,
-      searchEvent,
-      confirmEvent,
-      cellDBLClickEvent,
-      submitEvent,
-      onEdit,
-      onAddChild,
-      onAdd,
-      onDeploy,
-      drawer,
-      handleClose
-    };
-  }
 };
+
+let drawer = ref(false);
+
+function onDeploy(value?: object) {
+  console.log("onDeploy", value);
+  drawer.value = true;
+}
+
+function handleClose() {
+  drawer.value = false;
+}
 </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,14 +1,8 @@
-<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",
+const gridOptions = reactive({
-  setup() {
-    const gridOptions = reactive({
   border: true,
   resizable: true,
   keepSource: true,
@@ -240,13 +234,9 @@ export default {
       editRender: { name: "input" }
     }
   ]
-    } as VxeGridProps);
+} 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,