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 html = ref<HTMLElement>(null);
+const editor = ref(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<ElRef>(null);
+let lf = ref(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:page-size="tablePage.pageSize"
-          :total="tablePage.total"
+          v-model:current-page="configData.tablePage.currentPage"
+          v-model:page-size="configData.tablePage.pageSize"
+          :total="configData.tablePage.total"
           :layouts="[
             'PrevJump',
             'PrevPage',
@@ -57,12 +133,12 @@
           <template #left>
             <span class="page-left">
               <vxe-checkbox
-                v-model="isAllChecked"
-                :indeterminate="isIndeterminate"
+                v-model="configData.isAllChecked"
+                :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,10 +1,208 @@
+<script setup lang="ts">
+import Config from "./config.vue";
+import { reactive, ref, unref, nextTick } from "vue";
+import XEUtils from "xe-utils";
+import { cloneDeep } from "lodash-es";
+import { templateRef } from "@vueuse/core";
+import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
+import {
+  VXETable,
+  VxeTableInstance,
+  VxeTableEvents,
+  VxeFormPropTypes
+} from "vxe-table";
+type onEditNRow = {
+  name: string;
+  model: string;
+};
+
+const dictData = reactive({
+  submitLoading: false,
+  showEdit: false,
+  selectRow: null,
+  filterName: "",
+  tableData: [
+    {
+      id: 1,
+      name: "状态",
+      model: "",
+      children: [
+        {
+          id: "1-1",
+          name: "服务状态",
+          model: "serviceStatus"
+        },
+        {
+          id: "1-2",
+          name: "在线状态",
+          model: "onlienStatus"
+        }
+      ]
+    },
+    { id: 2, name: "操作系统", model: "operatingSystem" }
+  ],
+  formData: {
+    name: "",
+    model: ""
+  },
+  formItems: [
+    {
+      field: "name",
+      title: "字典名称",
+      span: 24,
+      itemRender: {
+        name: "$input",
+        props: { placeholder: "请输入字典名称" }
+      }
+    },
+    {
+      field: "model",
+      title: "字典类型",
+      span: 24,
+      itemRender: {
+        name: "$input",
+        props: {
+          placeholder: "请输入字典类型",
+          //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
+          disabled: true
+        }
+      }
+    },
+    {
+      align: "right",
+      span: 24,
+      itemRender: {
+        name: "$buttons",
+        children: [
+          { props: { type: "submit", content: "提交", status: "primary" } },
+          { props: { type: "reset", content: "重置" } }
+        ]
+      }
+    }
+  ] as VxeFormPropTypes.Items
+});
+
+let originData = cloneDeep(dictData.tableData);
+
+const xTree = templateRef<HTMLElement | any>("xTree", null);
+
+const handleSearch = () => {
+  const filterName = XEUtils.toValueString(dictData.filterName).trim();
+
+  if (filterName) {
+    const options = { children: "children" };
+    const searchProps = ["name"];
+
+    dictData.tableData = XEUtils.searchTree(
+      originData,
+      item =>
+        searchProps.some(
+          key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
+        ),
+      options
+    );
+
+    // 搜索之后默认展开所有子节点
+    nextTick(() => {
+      const $table = xTree.value;
+      $table.setAllTreeExpand(true);
+    });
+  } else {
+    dictData.tableData = originData;
+  }
+};
+
+// 创建一个防防抖函数，调用频率间隔 100 毫秒
+const searchEvent = XEUtils.debounce(
+  function () {
+    handleSearch();
+  },
+  100,
+  { leading: false, trailing: true }
+);
+
+const confirmEvent = async () => {
+  const type = await VXETable.modal.confirm("您确定要删除吗？");
+  (await type) === "confirm" &&
+    VXETable.modal.message({
+      content: "测试数据，不可删除",
+      status: "error"
+    });
+};
+
+function commonFn(value, disabled) {
+  dictData.selectRow = value;
+  dictData.showEdit = true;
+  dictData.formItems[1].itemRender.props.disabled = disabled;
+}
+
+// 新增
+function onAdd() {
+  commonFn(null, false);
+}
+
+// 新增子类型
+function onAddChild(row?: object) {
+  console.log("onAddChild", row);
+  commonFn(null, false);
+}
+
+// 编辑
+function onEdit(row?: onEditNRow) {
+  dictData.formData = {
+    name: row.name,
+    model: row.model ? row.model : "暂无字典类型"
+  };
+  commonFn(row, true);
+  // VXETable.modal.message({
+  //   content: "测试数据，不可编辑",
+  //   status: "error"
+  // });
+}
+
+// 拷贝当前列表项的数据（字典类型）
+const { clipboardRef } = useCopyToClipboard();
+const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
+  clipboardRef.value = unref(row).model;
+};
+
+const xTable = ref({} as VxeTableInstance);
+
+const submitEvent = () => {
+  dictData.submitLoading = true;
+  setTimeout(() => {
+    const $table = xTable.value;
+    dictData.submitLoading = false;
+    dictData.showEdit = false;
+    if (dictData.selectRow) {
+      VXETable.modal.message({ content: "保存成功", status: "success" });
+      Object.assign(dictData.selectRow, dictData.formData);
+    } else {
+      VXETable.modal.message({ content: "新增成功", status: "success" });
+      $table.insert(dictData.formData);
+    }
+  }, 500);
+};
+
+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="filterName"
+          v-model="dictData.filterName"
           :placeholder="$t('message.hssearch')"
           @keyup="searchEvent"
         ></vxe-input>
@@ -41,7 +239,7 @@
         iconOpen: 'fa fa-minus-square-o',
         iconClose: 'fa fa-plus-square-o'
       }"
-      :data="tableData"
+      :data="dictData.tableData"
       @cell-dblclick="cellDBLClickEvent"
     >
       <vxe-table-column
@@ -89,16 +287,16 @@
     <vxe-modal
       resize
       width="450"
-      v-model="showEdit"
-      :title="selectRow ? '编辑' : '新增'"
-      :loading="submitLoading"
+      v-model="dictData.showEdit"
+      :title="dictData.selectRow ? '编辑' : '新增'"
+      :loading="dictData.submitLoading"
       @hide="$refs.xForm.reset()"
     >
       <template #default>
         <vxe-form
           ref="xForm"
-          :data="formData"
-          :items="formItems"
+          :data="dictData.formData"
+          :items="dictData.formItems"
           title-align="right"
           title-width="100"
           @submit="submitEvent"
@@ -109,229 +307,7 @@
     <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";
-import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
-import {
-  VXETable,
-  VxeTableInstance,
-  VxeTableEvents,
-  VxeFormPropTypes
-} from "vxe-table";
-import Config from "./config.vue";
-
-export default {
-  name: "dict",
-  components: {
-    Config
-  },
-  setup() {
-    const dictData = reactive({
-      submitLoading: false,
-      showEdit: false,
-      selectRow: null,
-      filterName: "",
-      tableData: [
-        {
-          id: 1,
-          name: "状态",
-          model: "",
-          children: [
-            {
-              id: "1-1",
-              name: "服务状态",
-              model: "serviceStatus"
-            },
-            {
-              id: "1-2",
-              name: "在线状态",
-              model: "onlienStatus"
-            }
-          ]
-        },
-        { id: 2, name: "操作系统", model: "operatingSystem" }
-      ],
-      formData: {
-        name: "",
-        model: ""
-      },
-      formItems: [
-        {
-          field: "name",
-          title: "字典名称",
-          span: 24,
-          itemRender: {
-            name: "$input",
-            props: { placeholder: "请输入字典名称" }
-          }
-        },
-        {
-          field: "model",
-          title: "字典类型",
-          span: 24,
-          itemRender: {
-            name: "$input",
-            props: {
-              placeholder: "请输入字典类型",
-              //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
-              disabled: true
-            }
-          }
-        },
-        {
-          align: "right",
-          span: 24,
-          itemRender: {
-            name: "$buttons",
-            children: [
-              { props: { type: "submit", content: "提交", status: "primary" } },
-              { props: { type: "reset", content: "重置" } }
-            ]
-          }
-        }
-      ] as VxeFormPropTypes.Items
-    });
-
-    let originData = cloneDeep(dictData.tableData);
-
-    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();
-
-      if (filterName) {
-        const options = { children: "children" };
-        const searchProps = ["name"];
-
-        dictData.tableData = XEUtils.searchTree(
-          originData,
-          item =>
-            searchProps.some(
-              key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
-            ),
-          options
-        );
-
-        // 搜索之后默认展开所有子节点
-        nextTick(() => {
-          const $table = xTree.value;
-          $table.setAllTreeExpand(true);
-        });
-      } else {
-        dictData.tableData = originData;
-      }
-    };
-
-    // 创建一个防防抖函数，调用频率间隔 100 毫秒
-    const searchEvent = XEUtils.debounce(
-      function () {
-        handleSearch();
-      },
-      100,
-      { leading: false, trailing: true }
-    );
-
-    const confirmEvent = async () => {
-      const type = await VXETable.modal.confirm("您确定要删除吗？");
-      (await type) === "confirm" &&
-        VXETable.modal.message({
-          content: "测试数据，不可删除",
-          status: "error"
-        });
-    };
-
-    function commonFn(value, disabled) {
-      dictData.selectRow = value;
-      dictData.showEdit = true;
-      dictData.formItems[1].itemRender.props.disabled = disabled;
-    }
-
-    // 新增
-    function onAdd() {
-      commonFn(null, false);
-    }
-
-    // 新增子类型
-    function onAddChild(row: any) {
-      console.log(
-        "%crow===>>>: ",
-        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
-        row
-      );
-      commonFn(null, false);
-    }
-
-    // 编辑
-    function onEdit(row: any) {
-      dictData.formData = {
-        name: row.name,
-        model: row.model ? row.model : "暂无字典类型"
-      };
-      commonFn(row, true);
-      // VXETable.modal.message({
-      //   content: "测试数据，不可编辑",
-      //   status: "error"
-      // });
-    }
-
-    // 拷贝当前列表项的数据（字典类型）
-    const { clipboardRef } = useCopyToClipboard();
-    const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
-      clipboardRef.value = unref(row).model;
-    };
-
-    const xTable = ref({} as VxeTableInstance);
-
-    const submitEvent = () => {
-      dictData.submitLoading = true;
-      setTimeout(() => {
-        const $table = xTable.value;
-        dictData.submitLoading = false;
-        dictData.showEdit = false;
-        if (dictData.selectRow) {
-          VXETable.modal.message({ content: "保存成功", status: "success" });
-          Object.assign(dictData.selectRow, dictData.formData);
-        } else {
-          VXETable.modal.message({ content: "新增成功", status: "success" });
-          $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
-    };
-  }
-};
-</script>
 <style lang="scss" scoped>
 .dict-container {
   margin: 10px;

src/views/system/user/index.vue

@@ -1,252 +1,242 @@
-<template>
-  <vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { reactive } from "vue";
 import { VxeGridProps } from "vxe-table";
-export default {
-  name: "user",
-  setup() {
-    const gridOptions = reactive({
-      border: true,
-      resizable: true,
-      keepSource: true,
-      height: 500,
-      printConfig: {},
-      importConfig: {},
-      exportConfig: {},
-      pagerConfig: {
-        perfect: true,
-        pageSize: 15
-      },
-      editConfig: {
-        trigger: "click",
-        mode: "row",
-        showStatus: true
+
+const gridOptions = reactive({
+  border: true,
+  resizable: true,
+  keepSource: true,
+  height: 500,
+  printConfig: {},
+  importConfig: {},
+  exportConfig: {},
+  pagerConfig: {
+    perfect: true,
+    pageSize: 15
+  },
+  editConfig: {
+    trigger: "click",
+    mode: "row",
+    showStatus: true
+  },
+  toolbarConfig: {
+    buttons: [
+      {
+        code: "insert_actived",
+        name: "message.hsadd",
+        status: "perfect",
+        icon: "fa fa-plus"
       },
-      toolbarConfig: {
-        buttons: [
-          {
-            code: "insert_actived",
-            name: "message.hsadd",
-            status: "perfect",
-            icon: "fa fa-plus"
-          },
-          {
-            code: "mark_cancel",
-            name: "message.hsmark",
-            status: "perfect",
-            icon: "fa fa-trash-o"
-          },
-          {
-            code: "save",
-            name: "message.hssave",
-            status: "perfect",
-            icon: "fa fa-save"
-          }
-        ],
-        perfect: true,
-        refresh: {
-          icon: "fa fa-refresh",
-          iconLoading: "fa fa-spinner fa-spin"
-        },
-        import: {
-          icon: "fa fa-upload"
-        },
-        export: {
-          icon: "fa fa-download"
-        },
-        print: {
-          icon: "fa fa-print"
-        },
-        zoom: {
-          iconIn: "fa fa-arrows-alt",
-          iconOut: "fa fa-expand"
-        },
-        custom: {
-          icon: "fa fa-cog"
-        }
+      {
+        code: "mark_cancel",
+        name: "message.hsmark",
+        status: "perfect",
+        icon: "fa fa-trash-o"
       },
-      proxyConfig: {
-        props: {
-          result: "result",
-          total: "page.total"
-        },
-        ajax: {
-          // 接收 Promise
-          query: ({ page }) => {
-            return new Promise(resolve => {
-              setTimeout(() => {
-                const list = [
-                  {
-                    id: 10001,
-                    name: "Test1",
-                    nickname: "T1",
-                    role: "Develop",
-                    sex: "Man",
-                    age: 28,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10002,
-                    name: "Test2",
-                    nickname: "T2",
-                    role: "Test",
-                    sex: "Women",
-                    age: 22,
-                    address: "Guangzhou"
-                  },
-                  {
-                    id: 10003,
-                    name: "Test3",
-                    nickname: "T3",
-                    role: "PM",
-                    sex: "Man",
-                    age: 32,
-                    address: "Shanghai"
-                  },
-                  {
-                    id: 10004,
-                    name: "Test4",
-                    nickname: "T4",
-                    role: "Designer",
-                    sex: "Women ",
-                    age: 23,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10005,
-                    name: "Test5",
-                    nickname: "T5",
-                    role: "Develop",
-                    sex: "Women ",
-                    age: 30,
-                    address: "Shanghai"
-                  },
-                  {
-                    id: 10006,
-                    name: "Test6",
-                    nickname: "T6",
-                    role: "Designer",
-                    sex: "Women ",
-                    age: 21,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10007,
-                    name: "Test7",
-                    nickname: "T7",
-                    role: "Test",
-                    sex: "Man ",
-                    age: 29,
-                    address: "vxe-table 从入门到放弃"
-                  },
-                  {
-                    id: 10008,
-                    name: "Test8",
-                    nickname: "T8",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 35,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 10009,
-                    name: "Test9",
-                    nickname: "T9",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 35,
-                    address: "Shenzhen"
-                  },
-                  {
-                    id: 100010,
-                    name: "Test10",
-                    nickname: "T10",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 35,
-                    address: "Guangzhou"
-                  },
-                  {
-                    id: 100011,
-                    name: "Test11",
-                    nickname: "T11",
-                    role: "Test",
-                    sex: "Women ",
-                    age: 26,
-                    address: "vxe-table 从入门到放弃"
-                  },
-                  {
-                    id: 100012,
-                    name: "Test12",
-                    nickname: "T12",
-                    role: "Develop",
-                    sex: "Man ",
-                    age: 34,
-                    address: "Guangzhou"
-                  },
-                  {
-                    id: 100013,
-                    name: "Test13",
-                    nickname: "T13",
-                    role: "Test",
-                    sex: "Women ",
-                    age: 22,
-                    address: "Shenzhen"
-                  }
-                ];
-                resolve({
-                  page: {
-                    total: list.length
-                  },
-                  result: list.slice(
-                    (page.currentPage - 1) * page.pageSize,
-                    page.currentPage * page.pageSize
-                  )
-                });
-              }, 100);
-            });
-          },
-          // body 对象： { removeRecords }
-          delete: () => {
-            return new Promise(resolve => {
-              setTimeout(() => {
-                resolve({});
-              }, 100);
+      {
+        code: "save",
+        name: "message.hssave",
+        status: "perfect",
+        icon: "fa fa-save"
+      }
+    ],
+    perfect: true,
+    refresh: {
+      icon: "fa fa-refresh",
+      iconLoading: "fa fa-spinner fa-spin"
+    },
+    import: {
+      icon: "fa fa-upload"
+    },
+    export: {
+      icon: "fa fa-download"
+    },
+    print: {
+      icon: "fa fa-print"
+    },
+    zoom: {
+      iconIn: "fa fa-arrows-alt",
+      iconOut: "fa fa-expand"
+    },
+    custom: {
+      icon: "fa fa-cog"
+    }
+  },
+  proxyConfig: {
+    props: {
+      result: "result",
+      total: "page.total"
+    },
+    ajax: {
+      // 接收 Promise
+      query: ({ page }) => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            const list = [
+              {
+                id: 10001,
+                name: "Test1",
+                nickname: "T1",
+                role: "Develop",
+                sex: "Man",
+                age: 28,
+                address: "Shenzhen"
+              },
+              {
+                id: 10002,
+                name: "Test2",
+                nickname: "T2",
+                role: "Test",
+                sex: "Women",
+                age: 22,
+                address: "Guangzhou"
+              },
+              {
+                id: 10003,
+                name: "Test3",
+                nickname: "T3",
+                role: "PM",
+                sex: "Man",
+                age: 32,
+                address: "Shanghai"
+              },
+              {
+                id: 10004,
+                name: "Test4",
+                nickname: "T4",
+                role: "Designer",
+                sex: "Women ",
+                age: 23,
+                address: "Shenzhen"
+              },
+              {
+                id: 10005,
+                name: "Test5",
+                nickname: "T5",
+                role: "Develop",
+                sex: "Women ",
+                age: 30,
+                address: "Shanghai"
+              },
+              {
+                id: 10006,
+                name: "Test6",
+                nickname: "T6",
+                role: "Designer",
+                sex: "Women ",
+                age: 21,
+                address: "Shenzhen"
+              },
+              {
+                id: 10007,
+                name: "Test7",
+                nickname: "T7",
+                role: "Test",
+                sex: "Man ",
+                age: 29,
+                address: "vxe-table 从入门到放弃"
+              },
+              {
+                id: 10008,
+                name: "Test8",
+                nickname: "T8",
+                role: "Develop",
+                sex: "Man ",
+                age: 35,
+                address: "Shenzhen"
+              },
+              {
+                id: 10009,
+                name: "Test9",
+                nickname: "T9",
+                role: "Develop",
+                sex: "Man ",
+                age: 35,
+                address: "Shenzhen"
+              },
+              {
+                id: 100010,
+                name: "Test10",
+                nickname: "T10",
+                role: "Develop",
+                sex: "Man ",
+                age: 35,
+                address: "Guangzhou"
+              },
+              {
+                id: 100011,
+                name: "Test11",
+                nickname: "T11",
+                role: "Test",
+                sex: "Women ",
+                age: 26,
+                address: "vxe-table 从入门到放弃"
+              },
+              {
+                id: 100012,
+                name: "Test12",
+                nickname: "T12",
+                role: "Develop",
+                sex: "Man ",
+                age: 34,
+                address: "Guangzhou"
+              },
+              {
+                id: 100013,
+                name: "Test13",
+                nickname: "T13",
+                role: "Test",
+                sex: "Women ",
+                age: 22,
+                address: "Shenzhen"
+              }
+            ];
+            resolve({
+              page: {
+                total: list.length
+              },
+              result: list.slice(
+                (page.currentPage - 1) * page.pageSize,
+                page.currentPage * page.pageSize
+              )
             });
-          },
-          // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
-          save: () => {
-            return new Promise(resolve => {
-              setTimeout(() => {
-                resolve({});
-              }, 100);
-            });
-          }
-        }
+          }, 100);
+        });
       },
-      columns: [
-        { type: "checkbox", width: 50 },
-        { type: "seq", width: 60 },
-        { field: "name", title: "Name", editRender: { name: "input" } },
-        { field: "nickname", title: "Nickname", editRender: { name: "input" } },
-        { field: "role", title: "Role", editRender: { name: "input" } },
-        {
-          field: "address",
-          title: "Address",
-          showOverflow: true,
-          editRender: { name: "input" }
-        }
-      ]
-    } as VxeGridProps);
-
-    return {
-      gridOptions
-    };
-  }
-};
+      // body 对象： { removeRecords }
+      delete: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({});
+          }, 100);
+        });
+      },
+      // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
+      save: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({});
+          }, 100);
+        });
+      }
+    }
+  },
+  columns: [
+    { type: "checkbox", width: 50 },
+    { type: "seq", width: 60 },
+    { field: "name", title: "Name", editRender: { name: "input" } },
+    { field: "nickname", title: "Nickname", editRender: { name: "input" } },
+    { field: "role", title: "Role", editRender: { name: "input" } },
+    {
+      field: "address",
+      title: "Address",
+      showOverflow: true,
+      editRender: { name: "input" }
+    }
+  ]
+} as VxeGridProps);
 </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,