perf: vxe demo

xingyu4j
1 parent 220e0316
Showing 3 changed files with 37 additions and 21 deletions
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
yudao-ui-admin-vue3/src/views/system/post/index.vue
yudao-ui-admin-vue3/src/views/system/post/indexd.vue
@@ -55,12 +55,12 @@ VXETable.setup({
   loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
   height: 600,
   table: {
-    border: 'inner',
-    // 自动监听父元素的变化去重新计算表格
-    autoResize: true,
-    emptyText: '暂无数据',
-    // 鼠标移到行是否要高亮显示
-    highlightHoverRow: true
+    border: 'inner', // default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
+    align: 'center', // eft（左对齐）, center（居中对齐）, right（右对齐）
+    autoResize: true, // 自动监听父元素的变化去重新计算表格
+    resizable: true, // 列是否允许拖动列宽调整大小
+    emptyText: '暂无数据', // 空表单
+    highlightHoverRow: true // 自动监听父元素的变化去重新计算表格
   },
   grid: {
     toolbarConfig: {
@@ -103,6 +103,21 @@ VXETable.setup({
   input: {
     clearable: true
   },
+  modal: {
+    width: 600, // 窗口的宽度
+    height: 400, // 窗口的高度
+    showZoom: true, // 标题是否标显示最大化与还原按钮
+    resize: true, // 是否允许窗口边缘拖动调整窗口大小
+    marginSize: 0, // 只对 resize 启用后有效，用于设置可拖动界限范围，如果为负数则允许拖动超出屏幕边界
+    remember: false, // 记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态
+    destroyOnClose: true, // 在窗口关闭时销毁内容
+    storage: false, // 是否启用 localStorage 本地保存，会将窗口拖动的状态保存到本地
+    transfer: true, // 是否将弹框容器插入于 body 内
+    showFooter: true, // 是否显示底部
+    mask: true, // 是否显示遮罩层
+    maskClosable: true, // 是否允许点击遮罩层关闭窗口
+    escClosable: true // 是否允许按 Esc 键关闭窗口
+  },
   i18n: (key, args) => {
     return unref(i18n.global.locale) === 'zh-CN'
       ? XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
@@ -26,7 +26,10 @@ const gridOptions = reactive&lt;VxeGridProps&gt;({
     isHover: true
   },
   toolbarConfig: {
-    buttons: [{ code: 'insert_actived', name: '新增' }]
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons'
+    }
   },
   printConfig: {
     columns: [
@@ -44,19 +47,19 @@ const gridOptions = reactive&lt;VxeGridProps&gt;({
       {
         field: 'name',
         title: '岗位名称',
-        span: 8,
+        span: 6,
         itemRender: { name: '$input', props: { placeholder: '请输入岗位名称' } }
       },
       {
         field: 'code',
         title: '岗位编码',
-        span: 8,
+        span: 6,
         itemRender: { name: '$input', props: { placeholder: '请输入岗位编码' } }
       },
       {
         field: 'status',
         title: t('common.status'),
-        span: 8,
+        span: 6,
         itemRender: { name: '$select', options: getIntDictOptions(DICT_TYPE.COMMON_STATUS) }
       },
       {
@@ -139,7 +142,7 @@ const formData = ref&lt;PostVO&gt;({
   remark: '',
   createTime: ''
 })
-const formItems = reactive<VxeFormItemProps[]>([
+const formItems = ref<VxeFormItemProps[]>([
   {
     field: 'id',
     title: 'id',
@@ -148,25 +151,25 @@ const formItems = reactive&lt;VxeFormItemProps[]&gt;([
   {
     field: 'name',
     title: '岗位名称',
-    span: 8,
+    span: 12,
     itemRender: { name: '$input', props: { placeholder: '请输入岗位名称' } }
   },
   {
     field: 'code',
     title: '岗位编码',
-    span: 8,
+    span: 12,
     itemRender: { name: '$input', props: { placeholder: '请输入岗位编码' } }
   },
   {
     field: 'sort',
     title: '岗位顺序',
-    span: 8,
+    span: 12,
     itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入岗位顺序' } }
   },
   {
     field: 'status',
     title: t('common.status'),
-    span: 8,
+    span: 12,
     itemRender: {
       name: '$select',
       options: getIntDictOptions(DICT_TYPE.COMMON_STATUS),
@@ -290,6 +293,7 @@ const submitForm: VxeFormEvents.Submit = async () =&gt; {
   <vxe-modal
     v-model="dialogVisible"
     id="myModal6"
+    :title="dialogTitle"
     width="800"
     height="400"
     min-width="460"
@@ -301,9 +305,6 @@ const submitForm: VxeFormEvents.Submit = async () =&gt; {
     transfer
     show-footer
   >
-    <template #title>
-      <span>{{ dialogTitle }}</span>
-    </template>
     <template #default>
       <!-- 对话框(添加 / 修改) -->
       <vxe-form
@@ -41,10 +41,10 @@ const handleCreate = () =&gt; {
 }
 // 修改操作
-const handleUpdate = async (row: PostVO) => {
+const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
   // 设置数据
-  const res = await PostApi.getPostApi(row.id)
+  const res = await PostApi.getPostApi(rowId)
   unref(formRef)?.setValues(res)
 }
@@ -133,7 +133,7 @@ getList()
           link
           type="primary"
           v-hasPermi="['system:post:update']"
-          @click="handleUpdate(row)"
+          @click="handleUpdate(row.id)"
         >
           <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
         </el-button>