update: 菜单增加最后修改人和最后修改时间

src/components/table-button/index.tsx

@@ -12,6 +12,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
     isDelete: Boolean,
     text: {
       type: String,
@@ -22,7 +26,7 @@ export default defineComponent({
     return () => (
       <NButton
         loading={props.loading}
-        disabled={props.loading}
+        disabled={props.disabled}
         type={props.isDelete ? 'error' : 'primary'}
         onClick={props.onClick}
         quaternary

src/locales/common.ts

@@ -30,6 +30,8 @@ export default {
     tableHeader: {
       no: '序号',
       operation: '操作',
+      lastModifyUser: '最后修改人',
+      lastModifyDate: '最后修改时间',
     },
   },
   ko: {
@@ -63,6 +65,8 @@ export default {
     tableHeader: {
       no: '일련번호',
       operation: '操作',
+      lastModifyUser: '최종 수정자',
+      lastModifyDate: '최종 수정 시간',
     },
   },
 };

src/models/response/menu.ts

@@ -13,4 +13,8 @@ export type MenuListData = {
   orderBy: string;
   /** 菜单图标 */
   img: string;
+  /** 最后修改人 */
+  modifyUser: string;
+  /** 最后修改时间 */
+  modifyTime: string;
 };

src/pages/menu-child/table/hooks.ts

@@ -55,9 +55,19 @@ export function useColumns(refetch: () => void) {
         width: TABLE_CELL_WIDTH.small,
         key: 'orderBy',
       },
+      {
+        title: t('common.tableHeader.lastModifyUser'),
+        width: TABLE_CELL_WIDTH.normal,
+        key: 'modifyUser',
+      },
+      {
+        title: t('common.tableHeader.lastModifyDate'),
+        width: TABLE_CELL_WIDTH.date,
+        key: 'modifyTime',
+      },
       {
         title: t('common.tableHeader.operation'),
-        width: TABLE_CELL_WIDTH.large,
+        width: TABLE_CELL_WIDTH.doubleBtn,
         key: 'id',
         fixed: 'right',
         render({id}) {
@@ -71,7 +81,7 @@ export function useColumns(refetch: () => void) {
                 h(LDTableButton),
                 {
                   isDelete: false,
-                  loading: isDeleteing,
+                  disabled: isDeleteing,
                   onClick: onEdit(id),
                   text: t('common.tableTool.buttonGroup.edit'),
                 },
@@ -81,6 +91,7 @@ export function useColumns(refetch: () => void) {
                 {
                   isDelete: true,
                   loading: isDeleteing,
+                  disabled: isDeleteing,
                   onClick: onDelete(id),
                   text: t('common.tableTool.buttonGroup.delete'),
                 },

src/pages/menu/table/hooks.ts

@@ -68,6 +68,16 @@ export function useColumns(refetch: () => void) {
         width: TABLE_CELL_WIDTH.small,
         key: 'orderBy',
       },
+      {
+        title: t('common.tableHeader.lastModifyUser'),
+        width: TABLE_CELL_WIDTH.normal,
+        key: 'modifyUser',
+      },
+      {
+        title: t('common.tableHeader.lastModifyDate'),
+        width: TABLE_CELL_WIDTH.date,
+        key: 'modifyTime',
+      },
       {
         title: t('common.tableHeader.operation'),
         width: TABLE_CELL_WIDTH.large,

src/pages/menu/table/modal/Info.vue

@@ -25,16 +25,16 @@ const [data, suspense] = useQueryDataInfo({
 if (props.id.length > 0) await suspense();
 
 watchPostEffect(function() {
-  nextTick(function() {
-    const {img, koreanName, name, orderBy, url} = data.value ?? {};
-
-    props.setValues({
-      icon: img ?? '',
-      koMenuName: koreanName ?? '',
-      menuName: name ?? '',
-      order: Number(orderBy ?? '0'),
-      url: url ?? '',
-    });
+  if (!data.value) return;
+
+  const {img, koreanName, name, orderBy, url} = data.value ;
+
+  props.setValues({
+    icon: img ?? '',
+    koMenuName: koreanName ?? '',
+    menuName: name ?? '',
+    order: Number(orderBy ?? '0'),
+    url: url ?? '',
   });
 });
 

src/utils/constants.ts

@@ -27,7 +27,7 @@ export const TABLE_PAGE_SIZES = [10, 20, 30, 40, 50];
 export const TABLE_CELL_WIDTH = Object.freeze({
   no: 64,
   /** 双按钮菜单长度 */
-  doubleBtn: 120,
+  doubleBtn: 150,
   /**极小的table宽度 */
   minimal: 50,
   /** 较小的table宽度 */
@@ -44,4 +44,6 @@ export const TABLE_CELL_WIDTH = Object.freeze({
   great: 350,
   /** 最大的table宽度 */
   maximal: 400,
+  /** 时间内容 */
+  date: 260,
 });