perf: vxe demo

yudao-ui-admin-vue3/src/views/system/post/index.vue

@@ -26,7 +26,10 @@ const gridOptions = reactive<VxeGridProps>({
     isHover: true
   },
   toolbarConfig: {
-    buttons: [{ code: 'insert_actived', name: '新增' }]
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons'
+    }
   },
   printConfig: {
     columns: [
@@ -44,19 +47,19 @@ const gridOptions = reactive<VxeGridProps>({
       {
         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<PostVO>({
   remark: '',
   createTime: ''
 })
-const formItems = reactive<VxeFormItemProps[]>([
+const formItems = ref<VxeFormItemProps[]>([
   {
     field: 'id',
     title: 'id',
@@ -148,25 +151,25 @@ const formItems = reactive<VxeFormItemProps[]>([
   {
     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 () => {
   <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 () => {
     transfer
     show-footer
   >
-    <template #title>
-      <span>{{ dialogTitle }}</span>
-    </template>
     <template #default>
       <!-- 对话框(添加 / 修改) -->
       <vxe-form

yudao-ui-admin-vue3/src/views/system/post/indexd.vue

@@ -41,10 +41,10 @@ const handleCreate = () => {
 }
 
 // 修改操作
-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>