update

kinit-admin/src/api/vadmin/auth/menu.ts

@@ -3,3 +3,7 @@ import request from '@/config/axios'
 export const getMenuListApi = (params: any): Promise<IResponse> => {
   return request.get({ url: '/vadmin/auth/menus/', params })
 }
+
+export const delMenuListApi = (params: any): Promise<IResponse> => {
+  return request.delete({ url: '/vadmin/auth/menus/', params })
+}

kinit-admin/src/hooks/web/useTable.ts

@@ -145,7 +145,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
       methods.getList()
     },
     // 删除数据
-    deldata: async (ids: string[] | number[], multiple: boolean, message = true) => {
+    delListApi: async (ids: string[] | number[], multiple: boolean, message = true) => {
       const tableRef = await getTable()
       if (multiple) {
         if (!tableRef?.selections.length) {

kinit-admin/src/views/vadmin/auth/menu/components/Detail.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+import type { TableData } from '@/api/table/types'
+import { Descriptions } from '@/components/Descriptions'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElTag } from 'element-plus'
+
+const { t } = useI18n()
+
+defineProps({
+  currentRow: {
+    type: Object as PropType<Nullable<TableData>>,
+    default: () => null
+  },
+  detailSchema: {
+    type: Array as PropType<DescriptionsSchema[]>,
+    default: () => []
+  }
+})
+</script>
+
+<template>
+  <Descriptions :schema="detailSchema" :data="currentRow || {}">
+    <template #importance="{ row }: { row: TableData }">
+      <ElTag :type="row.importance === 1 ? 'success' : row.importance === 2 ? 'warning' : 'danger'">
+        {{
+          row.importance === 1
+            ? t('tableDemo.important')
+            : row.importance === 2
+            ? t('tableDemo.good')
+            : t('tableDemo.commonly')
+        }}
+      </ElTag>
+    </template>
+
+    <template #content="{ row }: { row: TableData }">
+      <div v-html="row.content"></div>
+    </template>
+  </Descriptions>
+</template>

kinit-admin/src/views/vadmin/auth/menu/components/Write.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { useForm } from '@/hooks/web/useForm'
+import { PropType, reactive, watch } from 'vue'
+import { TableData } from '@/api/table/types'
+import { useValidator } from '@/hooks/web/useValidator'
+
+const { required } = useValidator()
+
+const props = defineProps({
+  currentRow: {
+    type: Object as PropType<Nullable<TableData>>,
+    default: () => null
+  },
+  formSchema: {
+    type: Array as PropType<FormSchema[]>,
+    default: () => []
+  }
+})
+
+const rules = reactive({
+  title: [required()],
+  author: [required()],
+  importance: [required()],
+  pageviews: [required()],
+  display_time: [required()],
+  content: [required()]
+})
+
+const { register, methods, elFormRef } = useForm({
+  schema: props.formSchema
+})
+
+watch(
+  () => props.currentRow,
+  (currentRow) => {
+    if (!currentRow) return
+    const { setValues } = methods
+    setValues(currentRow)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+defineExpose({
+  elFormRef,
+  getFormData: methods.getFormData
+})
+</script>
+
+<template>
+  <Form :rules="rules" @register="register" />
+</template>

kinit-admin/src/views/vadmin/auth/menu/index.vue

@@ -1,15 +1,138 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { Table } from '@/components/Table'
-import { getMenuListApi } from '@/api/vadmin/auth/menu'
+import { getMenuListApi, delMenuListApi } from '@/api/vadmin/auth/menu'
 import { TableData } from '@/api/table/types'
-import { reactive } from 'vue'
 import { useTable } from '@/hooks/web/useTable'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton } from 'element-plus'
+import { ElButton, ElTag } from 'element-plus'
+import { h, ref, unref, reactive } from 'vue'
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { Dialog } from '@/components/Dialog'
+import Write from './components/Write.vue'
+import Detail from './components/Detail.vue'
 
 const { t } = useI18n()
 
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    field: 'index',
+    label: t('tableDemo.index'),
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  },
+  {
+    field: 'title',
+    label: t('tableDemo.title'),
+    search: {
+      show: true
+    },
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
+  },
+  {
+    field: 'author',
+    label: t('tableDemo.author')
+  },
+  {
+    field: 'display_time',
+    label: t('tableDemo.displayTime'),
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'datetime',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
+  },
+  {
+    field: 'importance',
+    label: t('tableDemo.importance'),
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return h(
+        ElTag,
+        {
+          type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
+        },
+        () =>
+          cellValue === 1
+            ? t('tableDemo.important')
+            : cellValue === 2
+            ? t('tableDemo.good')
+            : t('tableDemo.commonly')
+      )
+    },
+    form: {
+      component: 'Select',
+      componentProps: {
+        style: {
+          width: '100%'
+        },
+        options: [
+          {
+            label: '重要',
+            value: 3
+          },
+          {
+            label: '良好',
+            value: 2
+          },
+          {
+            label: '一般',
+            value: 1
+          }
+        ]
+      }
+    }
+  },
+  {
+    field: 'pageviews',
+    label: t('tableDemo.pageviews'),
+    form: {
+      component: 'InputNumber',
+      value: 0
+    }
+  },
+  {
+    field: 'content',
+    label: t('exampleDemo.content'),
+    table: {
+      show: false
+    },
+    form: {
+      component: 'Editor',
+      colProps: {
+        span: 24
+      }
+    },
+    detail: {
+      span: 24
+    }
+  },
+  {
+    field: 'action',
+    width: '260px',
+    label: t('tableDemo.action'),
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  }
+])
+
 const columns = reactive<TableColumn[]>([
   {
     field: 'title',
@@ -50,6 +173,7 @@ const columns = reactive<TableColumn[]>([
 
 const { register, tableObject, methods } = useTable<TableData>({
   getListApi: getMenuListApi,
+  delListApi: delMenuListApi,
   response: {
     data: 'data'
   },
@@ -58,6 +182,37 @@ const { register, tableObject, methods } = useTable<TableData>({
   }
 })
 
+const { allSchemas } = useCrudSchemas(crudSchemas)
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const actionType = ref('')
+const delLoading = ref(false)
+
+const AddAction = () => {
+  dialogTitle.value = t('exampleDemo.add')
+  tableObject.currentRow = null
+  dialogVisible.value = true
+  actionType.value = ''
+}
+
+const delData = async (row: TableData | null, multiple: boolean) => {
+  tableObject.currentRow = row
+  const { delListApi, getSelections } = methods
+  const selections = await getSelections()
+  delLoading.value = true
+  await delListApi(
+    multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
+    multiple
+  ).finally(() => {
+    delLoading.value = false
+  })
+}
+
+const loading = ref(false)
+
+const save = async () => {}
+
 const { getList } = methods
 
 getList()
@@ -65,6 +220,10 @@ getList()
 
 <template>
   <ContentWrap>
+    <div class="mb-10px">
+      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
+    </div>
+
     <Table
       :data="tableObject.tableData"
       :loading="tableObject.loading"
@@ -84,5 +243,27 @@ getList()
         </ElButton>
       </template>
     </Table>
+
+    <Dialog v-model="dialogVisible" :title="dialogTitle">
+      <Write
+        v-if="actionType !== 'detail'"
+        ref="writeRef"
+        :form-schema="allSchemas.formSchema"
+        :current-row="tableObject.currentRow"
+      />
+
+      <Detail
+        v-if="actionType === 'detail'"
+        :detail-schema="allSchemas.detailSchema"
+        :current-row="tableObject.currentRow"
+      />
+
+      <template #footer>
+        <ElButton v-if="actionType !== 'detail'" type="primary" :loading="loading" @click="save">
+          {{ t('exampleDemo.save') }}
+        </ElButton>
+        <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      </template>
+    </Dialog>
   </ContentWrap>
 </template>