支持 Vue 3.2.x 语法升级为，script setup

src/views/comp/drag/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="拖拽"> 常用于卡片，事项，预约，流程，计划等， </n-card>
+    </div>
+
+    <n-alert title="花式拖拽演示" type="info" class="mt-4">
+      每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~
+    </n-alert>
+
+    <n-grid
+      cols="1 s:2 m:3 l:4 xl:4 2xl:4"
+      class="mt-4 proCard"
+      responsive="screen"
+      :x-gap="12"
+      :y-gap="8"
+    >
+      <n-grid-item>
+        <NCard
+          title="需求池"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="demandList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="info">需求</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="开发中"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="exploitList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="warning">开发中</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已完成"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="completeList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="error">已完成</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已验收"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="approvedList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="success">已验收</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import Draggable from 'vuedraggable';
+
+  const demandList = reactive([
+    { name: '预约表单页面，能填写预约相关信息', id: 1 },
+    { name: '促销活动页面，包含促销广告展示', id: 2 },
+    { name: '商品列表，需要一个到货提醒功能', id: 3 },
+    { name: '商品需要一个评价功能', id: 4 },
+    { name: '商品图片需要提供放大镜', id: 5 },
+    { name: '订单需要提供删除到回收站', id: 6 },
+    { name: '用户头像上传，需要支持裁剪', id: 7 },
+    { name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
+  ]);
+
+  const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+</script>
+
+<style lang="less" scoped>
+  .draggable-ul {
+    width: 100%;
+    overflow: hidden;
+    margin-top: -16px;
+
+    .draggable-li {
+      width: 100%;
+      padding: 16px 10px;
+      color: #333;
+      border-bottom: 1px solid #efeff5;
+    }
+  }
+</style>

src/views/comp/form/basic.vue

@@ -3,13 +3,15 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <div class="BasicForm">
         <BasicForm
           submitButtonText="提交预约"
           layout="horizontal"
           :gridProps="{ cols: 1 }"
           :schemas="schemas"
+          @submit="handleSubmit"
+          @reset="handleReset"
         >
           <template #statusSlot="{ model, field }">
             <n-input v-model:value="model[field]" />
@@ -20,12 +22,11 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema } from '@/components/Form/index';
+<script lang="ts" setup>
+  import { BasicForm } from '@/components/Form/index';
   import { useMessage } from 'naive-ui';
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       component: 'NInput',
@@ -149,29 +150,16 @@
     },
   ];
 
-  export default defineComponent({
-    components: { BasicForm },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
+  const message = useMessage();
 
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        message.success(JSON.stringify(values));
-      }
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
 
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        schemas,
-        formRef,
-        handleSubmit,
-        handleReset,
-      };
-    },
-  });
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped>

src/views/comp/form/useForm.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础表单"> useForm 表单，用于向用户收集表单信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <div class="BasicForm">
         <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
           <template #statusSlot="{ model, field }">
@@ -15,12 +15,11 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form/index';
   import { useMessage } from 'naive-ui';
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       component: 'NInput',
@@ -165,43 +164,25 @@
     },
   ];
 
-  export default defineComponent({
-    components: { BasicForm },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
+  const message = useMessage();
 
-      const [register, { setFieldsValue }] = useForm({
-        gridProps: { cols: 1 },
-        collapsedRows: 3,
-        labelWidth: 120,
-        layout: 'horizontal',
-        submitButtonText: '提交预约',
-        schemas,
-      });
-
-      function setName() {
-        setFieldsValue({ name: '小马哥' });
-      }
-
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        message.success(JSON.stringify(values));
-      }
-
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        register,
-        formRef,
-        handleSubmit,
-        handleReset,
-        setName,
-      };
-    },
+  const [register, {}] = useForm({
+    gridProps: { cols: 1 },
+    collapsedRows: 3,
+    labelWidth: 120,
+    layout: 'horizontal',
+    submitButtonText: '提交预约',
+    schemas,
   });
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped>

src/views/comp/richtext/vue-quill.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="富文本">
+        富文本，用于展示图文信息，比如商品详情，文章详情等...
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <QuillEditor
+        ref="quillEditor"
+        :options="options"
+        v-model:content="myContent"
+        style="height: 350px"
+        @ready="readyQuill"
+        class="quillEditor"
+      />
+      <template #footer>
+        <n-space>
+          <n-button @click="addText">增加文本</n-button>
+          <n-button @click="addImg">增加图片</n-button>
+          <n-button @click="getHtml">获取HTML</n-button>
+        </n-space>
+      </template>
+    </n-card>
+    <n-card :bordered="false" class="mt-4 proCard" title="HTML 内容">
+      <n-input
+        v-model:value="myContentHtml"
+        type="textarea"
+        placeholder="html"
+        :autosize="{
+          minRows: 3,
+          maxRows: 6,
+        }"
+      />
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { QuillEditor } from '@vueup/vue-quill';
+  import '@vueup/vue-quill/dist/vue-quill.snow.css';
+  const quillEditor = ref();
+  const myContent = ref(
+    '<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>'
+  );
+  const myContentHtml = ref(
+    '<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>'
+  );
+
+  const options = reactive({
+    modules: {
+      toolbar: [
+        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+        ['blockquote', 'code-block'],
+
+        [{ header: 1 }, { header: 2 }], // custom button values
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+        [{ direction: 'rtl' }], // text direction
+
+        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+        [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+        [{ font: [] }],
+        [{ align: [] }],
+        ['clean'],
+        ['image'],
+      ],
+    },
+    theme: 'snow',
+    placeholder: '输入您喜欢的内容吧！',
+  });
+
+  function readyQuill() {
+    console.log('Quill准备好了');
+  }
+
+  function getHtml() {
+    myContentHtml.value = getHtmlVal();
+  }
+
+  function addText() {
+    const html = getHtmlVal() + '新增加的内容';
+    quillEditor.value.setHTML(html);
+  }
+
+  function addImg() {
+    const html =
+      getHtmlVal() +
+      '<img style="width:100px" src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>';
+    quillEditor.value.setHTML(html);
+  }
+
+  function getHtmlVal() {
+    return quillEditor.value.getHTML();
+  }
+</script>
+
+<style lang="less">
+  .ql-toolbar.ql-snow {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid #eee;
+    margin-top: -10px;
+  }
+
+  .ql-container.ql-snow {
+    border: none;
+  }
+</style>

src/views/comp/table/basic.vue

@@ -18,105 +18,90 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, h } from 'vue';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './basicColumns';
   import { useDialog, useMessage } from 'naive-ui';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const message = useMessage();
-      const dialog = useDialog();
-      const actionRef = ref();
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
+  const message = useMessage();
+  const dialog = useDialog();
+  const actionRef = ref();
+
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: createActions(record),
       });
-
-      function createActions(record) {
-        return [
-          {
-            label: '删除',
-            icon: 'ic:outline-delete-outline',
-            onClick: handleDelete.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
-            ifShow: () => {
-              return true;
-            },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
-          },
-          {
-            label: '编辑',
-            onClick: handleEdit.bind(null, record),
-            ifShow: () => {
-              return true;
-            },
-            auth: ['basic_list'],
-          },
-        ];
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        actionRef.value.reload();
-      }
-
-      function handleDelete(record) {
-        console.log(record);
-        dialog.info({
-          title: '提示',
-          content: `您想删除${record.name}`,
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: () => {
-            message.success('删除成功');
-          },
-          onNegativeClick: () => {},
-        });
-      }
-
-      function handleEdit(record) {
-        console.log(record);
-        message.success('您点击了编辑按钮');
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-      };
     },
   });
+
+  function createActions(record) {
+    return [
+      {
+        label: '删除',
+        icon: 'ic:outline-delete-outline',
+        onClick: handleDelete.bind(null, record),
+        // 根据业务控制是否显示 isShow 和 auth 是并且关系
+        ifShow: () => {
+          return true;
+        },
+        // 根据权限控制是否显示: 有权限，会显示，支持多个
+        auth: ['basic_list'],
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: () => {
+          return true;
+        },
+        auth: ['basic_list'],
+      },
+    ];
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({...res,...params});
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleDelete(record) {
+    console.log(record);
+    dialog.info({
+      title: '提示',
+      content: `您想删除${record.name}`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        message.success('删除成功');
+      },
+      onNegativeClick: () => {},
+    });
+  }
+
+  function handleEdit(record) {
+    console.log(record);
+    message.success('您点击了编辑按钮');
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/editCell.vue

@@ -19,100 +19,41 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
-  import { BasicTable, TableAction } from '@/components/Table';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { BasicTable } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './CellColumns';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const currentEditKeyRef = ref('');
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-      });
-
-      function handleEdit(record) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function onEditChange({ column, value, record }) {
-        if (column.key === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
-        }
-      }
-
-      function createActions(record) {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        } else {
-          return [
-            {
-              label: '保存',
-              onClick: handleSave.bind(null, record),
-            },
-            {
-              label: '取消',
-              onClick: handleCancel.bind(null, record),
-            },
-          ];
-        }
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      function editEnd({ record, index, key, value }) {
-        console.log(value);
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        editEnd,
-        onEditChange,
-      };
-    },
+  const actionRef = ref();
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
   });
+
+  function onEditChange({ column, value, record }) {
+    if (column.key === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...res, ...params });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    console.log(actionRef.value);
+    actionRef.value.reload();
+  }
+
+  function editEnd({ record, index, key, value }) {
+    console.log(value);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/editRow.vue

@@ -11,7 +11,7 @@
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
-      :scroll-x="1510"
+      :scroll-x="1590"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -20,113 +20,95 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, h } from 'vue';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './rowColumns';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const currentEditKeyRef = ref('');
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
+  const actionRef = ref();
+  const currentEditKeyRef = ref('');
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: createActions(record),
       });
-
-      function handleEdit(record) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function onEditChange({ column, value, record }) {
-        if (column.key === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
-        }
-      }
-
-      function createActions(record) {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        } else {
-          return [
-            {
-              label: '保存',
-              onClick: handleSave.bind(null, record),
-            },
-            {
-              label: '取消',
-              onClick: handleCancel.bind(null, record),
-            },
-          ];
-        }
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      function editEnd({ record, index, key, value }) {
-        console.log(value);
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        editEnd,
-        onEditChange,
-      };
     },
   });
+
+  function handleEdit(record) {
+    currentEditKeyRef.value = record.key;
+    record.onEdit?.(true);
+  }
+
+  function handleCancel(record) {
+    currentEditKeyRef.value = '';
+    record.onEdit?.(false, false);
+  }
+
+  function onEditChange({ column, value, record }) {
+    if (column.key === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
+
+  async function handleSave(record) {
+    const pass = await record.onEdit?.(false, true);
+    if (pass) {
+      currentEditKeyRef.value = '';
+    }
+  }
+
+  function createActions(record) {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          onClick: handleEdit.bind(null, record),
+        },
+      ];
+    } else {
+      return [
+        {
+          label: '保存',
+          onClick: handleSave.bind(null, record),
+        },
+        {
+          label: '取消',
+          onClick: handleCancel.bind(null, record),
+        },
+      ];
+    }
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...res, ...params });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    console.log(actionRef.value);
+    actionRef.value.reload();
+  }
+
+  function editEnd({ record, index, key, value }) {
+    console.log(value);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/rowColumns.ts

@@ -59,7 +59,7 @@ export const columns = [
     key: 'beginTime',
     editRow: true,
     edit: true,
-    width: 160,
+    width: 240,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',

src/views/comp/upload/index.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
         <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
           <n-form
@@ -47,8 +47,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
@@ -74,54 +74,38 @@
     },
   };
 
-  export default defineComponent({
-    components: { BasicUpload },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const { uploadUrl } = globSetting;
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const { uploadUrl } = globSetting;
 
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
-          images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
-        },
-        uploadHeaders: {
-          platform: 'miniPrograms',
-          timestamp: new Date().getTime(),
-          token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      function resetForm() {
-        formRef.value.restoreValidation();
-      }
-
-      function uploadChange(list: string[]) {
-        state.formValue.images = unref(list);
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        uploadUrl,
-        rules,
-        formSubmit,
-        resetForm,
-        uploadChange,
-      };
-    },
+  const formValue = reactive({
+    name: '',
+    mobile: '',
+    //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
+    images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
   });
+
+  const uploadHeaders = reactive({
+    platform: 'miniPrograms',
+    timestamp: new Date().getTime(),
+    token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    formRef.value.restoreValidation();
+  }
+
+  function uploadChange(list: string[]) {
+    formValue.images = unref(list);
+  }
 </script>