fix Bug or esLink formatting

src/views/comp/table/columns.ts

@@ -1,72 +1,67 @@
-import { h } from 'vue'
-import { NAvatar, NButton } from 'naive-ui'
+import { h } from 'vue';
+import { NAvatar, NButton } from 'naive-ui';
 
 export const columns = [
-    {
-        title: 'id',
-        key: 'id'
+  {
+    title: 'id',
+    key: 'id',
+  },
+  {
+    title: '名称',
+    key: 'name',
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    render(row) {
+      return h(NAvatar, {
+        size: 48,
+        src: row.avatar,
+      });
     },
-    {
-        title: '名称',
-        key: 'name'
+  },
+  {
+    title: '地址',
+    key: 'address',
+  },
+  {
+    title: '开始日期',
+    key: 'beginTime',
+  },
+  {
+    title: '结束日期',
+    key: 'endTime',
+  },
+  {
+    title: '创建时间',
+    key: 'date',
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 150,
+    //简单写一下例子，不建议这么写，过段时间，这里封二次封装
+    render() {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-right:10px',
+            onClick: () => {},
+          },
+          { default: () => '删除' }
+        ),
+        h(
+          NButton,
+          {
+            size: 'small',
+            onClick: () => {},
+          },
+          { default: () => '编辑' }
+        ),
+      ];
     },
-    {
-        title: '头像',
-        key: 'avatar',
-        render(row) {
-            return h(
-                NAvatar,
-                {
-                    size: 48,
-                    src: row.avatar
-                }
-            )
-        }
-    },
-    {
-        title: '地址',
-        key: 'address'
-    },
-    {
-        title: '开始日期',
-        key: 'beginTime',
-    },
-    {
-        title: '结束日期',
-        key: 'endTime',
-    },
-    {
-        title: '创建时间',
-        key: 'date',
-    },
-    {
-        title: '操作',
-        key: 'actions',
-        width: 150,
-        //简单写一下例子，不建议这么写，过段时间，这里封二次封装
-        render() {
-            return [
-                h(
-                    NButton,
-                    {
-                        size: 'small',
-                        type: 'error',
-                        style: 'margin-right:10px',
-                        onClick: () => {
-                        }
-                    },
-                    { default: () => '删除' }
-                ),
-                h(
-                    NButton,
-                    {
-                        size: 'small',
-                        onClick: () => {
-                        }
-                    },
-                    { default: () => '编辑' }
-                )
-            ]
-        }
-    }
-]
+  },
+];

src/views/comp/table/list.vue

@@ -1,13 +1,13 @@
 <template>
   <n-card :bordered="false" class="proCard">
     <BasicTable
-        title="表格列表"
-        titleTooltip="这是一个提示"
-        :columns="columns"
-        :request="loadDataTable"
-        :row-key="row => row.id"
-        ref="actionRef"
-        @update:checked-row-keys="onCheckedRow"
+      title="表格列表"
+      titleTooltip="这是一个提示"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      @update:checked-row-keys="onCheckedRow"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -17,49 +17,45 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, ref, h } from 'vue'
-import { NTag, NButton, useMessage } from 'naive-ui'
-import { BasicTable } from '@/components/Table'
-import { getTableList } from '@/api/table/list'
-import { columns } from './columns'
+  import { defineComponent, reactive, toRefs, ref } from 'vue';
+  import { BasicTable } from '@/components/Table';
+  import { getTableList } from '@/api/table/list';
+  import { columns } from './columns';
 
-export default defineComponent({
-  components: { BasicTable },
-  setup() {
-    const message = useMessage()
-    const actionRef = ref()
-    const state = reactive({
-      params: {
-        pageSize: 5,
-        name: 'xiaoMa'
-      },
-    })
-    const loadDataTable = async (params) => {
-      const data = await getTableList(params);
-      return data
-    }
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const actionRef = ref();
+      const state = reactive({
+        params: {
+          pageSize: 5,
+          name: 'xiaoMa',
+        },
+      });
+      const loadDataTable = async (params) => {
+        const data = await getTableList(params);
+        return data;
+      };
 
-    function onCheckedRow(rowKeys) {
-      console.log(rowKeys)
-    }
+      function onCheckedRow(rowKeys) {
+        console.log(rowKeys);
+      }
 
-    function reloadTable() {
-      console.log(actionRef.value)
-      actionRef.value.reload()
-    }
+      function reloadTable() {
+        console.log(actionRef.value);
+        actionRef.value.reload();
+      }
 
-    return {
-      ...toRefs(state),
-      columns,
-      actionRef,
-      loadDataTable,
-      onCheckedRow,
-      reloadTable
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        columns,
+        actionRef,
+        loadDataTable,
+        onCheckedRow,
+        reloadTable,
+      };
+    },
+  });
 </script>
 
-<style lang='less' scoped>
-
-</style>
+<style lang="less" scoped></style>

src/views/comp/upload/index.vue

@@ -1,41 +1,40 @@
 <template>
   <div>
     <div class="n-layout-page-header">
-      <n-card :bordered="false" title="上传图片">
-        上传图片，用于向用户收集图片信息
-      </n-card>
+      <n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
     </div>
     <n-card :bordered="false" class="proCard mt-4">
       <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
-              :label-width="80"
-              :model="formValue"
-              :rules="rules"
-              label-placement="left"
-              ref="formRef"
-              class="py-8"
+            :label-width="80"
+            :model="formValue"
+            :rules="rules"
+            label-placement="left"
+            ref="formRef"
+            class="py-8"
           >
             <n-form-item label="预约姓名" path="name">
-              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
+              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
             </n-form-item>
             <n-form-item label="预约号码" path="mobile">
-              <n-input placeholder="电话号码" v-model:value="formValue.mobile"/>
+              <n-input placeholder="电话号码" v-model:value="formValue.mobile" />
             </n-form-item>
 
             <n-form-item label="病例图片" path="images">
               <BasicUpload
-                  :action="`${uploadUrl}/v1.0/files`"
-                  :headers="uploadHeaders"
-                  :data="{ type: 0 }"
-                  name="files"
-                  :width="100"
-                  :height="100"
-                  @uploadChange="uploadChange"
-                  v-model:value="formValue.images"
-                  helpText="单个文件不超过2MB，最多只能上传10个文件"/>
+                :action="`${uploadUrl}/v1.0/files`"
+                :headers="uploadHeaders"
+                :data="{ type: 0 }"
+                name="files"
+                :width="100"
+                :height="100"
+                @uploadChange="uploadChange"
+                v-model:value="formValue.images"
+                helpText="单个文件不超过2MB，最多只能上传10个文件"
+              />
             </n-form-item>
-            <div style="margin-left:80px">
+            <div style="margin-left: 80px">
               <n-space>
                 <n-button type="primary" @click="formSubmit">提交预约</n-button>
                 <n-button @click="resetForm">重置</n-button>
@@ -49,80 +48,80 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref, reactive, toRefs, } from 'vue'
-import { useMessage } from 'naive-ui'
-import { BasicUpload } from '@/components/Upload'
-import { useGlobSetting } from '@/hooks/setting'
+  import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { BasicUpload } from '@/components/Upload';
+  import { useGlobSetting } from '@/hooks/setting';
 
-const globSetting = useGlobSetting()
+  const globSetting = useGlobSetting();
 
-const rules = {
-  name: {
-    required: true,
-    message: '请输入预约姓名',
-    trigger: 'blur'
-  },
-  remark: {
-    required: true,
-    message: '请输入预约备注',
-    trigger: 'blur'
-  },
-  images: {
-    required: true,
-    type: 'array',
-    message: '请上传病例图片',
-    trigger: 'change'
-  },
-}
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入预约姓名',
+      trigger: 'blur',
+    },
+    remark: {
+      required: true,
+      message: '请输入预约备注',
+      trigger: 'blur',
+    },
+    images: {
+      required: true,
+      type: 'array',
+      message: '请上传病例图片',
+      trigger: 'change',
+    },
+  };
 
-export default defineComponent({
-  components: { BasicUpload },
-  setup() {
-    const formRef: any = ref(null)
-    const message = useMessage()
-    const { uploadUrl } = globSetting
+  export default defineComponent({
+    components: { BasicUpload },
+    setup() {
+      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=',
+      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 formSubmit() {
-      formRef.value.validate((errors) => {
-        if (!errors) {
-          message.success('验证成功')
-        } else {
-          message.error('验证失败，请填写完整信息')
-        }
-      })
-    }
+      function resetForm() {
+        formRef.value.restoreValidation();
+      }
 
-    function resetForm() {
-      formRef.value.restoreValidation()
-    }
+      function uploadChange(list: string[]) {
+        state.formValue.images = unref(list);
+      }
 
-    function uploadChange(list: string[]) {
-      state.formValue.images = unref(list)
-    }
-
-    return {
-      ...toRefs(state),
-      formRef,
-      uploadUrl,
-      rules,
-      formSubmit,
-      resetForm,
-      uploadChange
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        formRef,
+        uploadUrl,
+        rules,
+        formSubmit,
+        resetForm,
+        uploadChange,
+      };
+    },
+  });
 </script>