feat: Add example-dialog demo

src/views/Example/Dialog/ExampleDialog.vue

@@ -5,11 +5,12 @@ import { Dialog } from '@/components/Dialog'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElTag } from 'element-plus'
 import { Table } from '@/components/Table'
-import { getTableListApi, saveTableApi } from '@/api/table'
+import { getTableListApi, saveTableApi, delTableListApi } from '@/api/table'
 import { useTable } from '@/hooks/web/useTable'
 import { TableData } from '@/api/table/types'
 import { h, reactive, ref, unref } from 'vue'
 import Write from './components/Write.vue'
+import Detail from './components/Detail.vue'
 
 const { register, tableObject, methods } = useTable<
   {
@@ -19,6 +20,7 @@ const { register, tableObject, methods } = useTable<
   TableData
 >({
   getListApi: getTableListApi,
+  delListApi: delTableListApi,
   response: {
     list: 'list',
     total: 'total'
@@ -82,18 +84,43 @@ const columns = reactive<TableColumn[]>([
   },
   {
     field: 'action',
+    width: '260px',
     label: t('tableDemo.action')
   }
 ])
 
+const dialogVisible = ref(false)
+
+const dialogTitle = ref('')
+
 const AddAction = () => {
+  dialogTitle.value = t('exampleDemo.add')
   tableObject.currentRow = null
-  tableObject.dialogVisible = true
+  dialogVisible.value = true
 }
 
-const editAction = (row: TableData) => {
+const delLoading = ref(false)
+
+const delData = async (row: TableData | null, multiple: boolean) => {
   tableObject.currentRow = row
-  tableObject.dialogVisible = true
+  const { delList, getSelections } = methods
+  const selections = await getSelections()
+  delLoading.value = true
+  await delList(
+    multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
+    multiple
+  ).finally(() => {
+    delLoading.value = false
+  })
+}
+
+const actionType = ref('')
+
+const action = (row: TableData, type: string) => {
+  dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
+  actionType.value = type
+  tableObject.currentRow = row
+  dialogVisible.value = true
 }
 
 const writeRef = ref<ComponentRef<typeof Write>>()
@@ -105,7 +132,7 @@ const save = async () => {
   const validate = await write?.elFormRef?.validate()?.catch(() => {})
   if (validate) {
     loading.value = true
-    const data = await write?.getFormData()
+    const data = (await write?.getFormData()) as TableData
     const res = await saveTableApi({
       data
     })
@@ -114,7 +141,7 @@ const save = async () => {
         loading.value = false
       })
     if (res) {
-      tableObject.dialogVisible = false
+      dialogVisible.value = false
       tableObject.currentPage = 1
       getList()
     }
@@ -128,7 +155,9 @@ const save = async () => {
 
     <div class="mb-10px">
       <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-      <ElButton type="danger">{{ t('exampleDemo.del') }}</ElButton>
+      <ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
+        {{ t('exampleDemo.del') }}
+      </ElButton>
     </div>
 
     <Table
@@ -143,21 +172,29 @@ const save = async () => {
       @register="register"
     >
       <template #action="{ row }">
-        <ElButton type="primary" @click="editAction(row)">
+        <ElButton type="primary" @click="action(row, 'edit')">
           {{ t('exampleDemo.edit') }}
         </ElButton>
+        <ElButton type="success" @click="action(row, 'detail')">
+          {{ t('exampleDemo.detail') }}
+        </ElButton>
+        <ElButton type="danger" @click="delData(row, false)">
+          {{ t('exampleDemo.del') }}
+        </ElButton>
       </template>
     </Table>
   </ContentWrap>
 
-  <Dialog v-model="tableObject.dialogVisible" :title="t('exampleDemo.add')">
-    <Write ref="writeRef" :current-row="tableObject.currentRow" />
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <Write v-if="actionType === 'edit'" ref="writeRef" :current-row="tableObject.currentRow" />
+
+    <Detail v-if="actionType === 'detail'" :current-row="tableObject.currentRow" />
 
     <template #footer>
-      <ElButton type="primary" :loading="loading" @click="save">
+      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
       </ElButton>
-      <ElButton @click="tableObject.dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
     </template>
   </Dialog>
 </template>

src/views/Example/Dialog/components/Detail.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { getTableDetApi } from '@/api/table'
+import { PropType, watch, ref, reactive } 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()
+
+const props = defineProps({
+  currentRow: {
+    type: Object as PropType<Nullable<TableData>>,
+    default: () => null
+  }
+})
+
+const currentRow = ref<Nullable<TableData>>(null)
+
+const loading = ref(false)
+
+const getTableDet = async () => {
+  loading.value = true
+  const res = await getTableDetApi({
+    params: {
+      id: props.currentRow?.id as string
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+  if (res) {
+    currentRow.value = res.data
+  }
+}
+
+watch(
+  () => props.currentRow,
+  () => {
+    getTableDet()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const schema = reactive<DescriptionsSchema[]>([
+  {
+    field: 'title',
+    label: t('exampleDemo.title'),
+    span: 24
+  },
+  {
+    field: 'author',
+    label: t('exampleDemo.author')
+  },
+  {
+    field: 'display_time',
+    label: t('exampleDemo.displayTime')
+  },
+  {
+    field: 'importance',
+    label: t('exampleDemo.importance')
+  },
+  {
+    field: 'pageviews',
+    label: t('exampleDemo.pageviews')
+  },
+  {
+    field: 'content',
+    label: t('exampleDemo.content'),
+    span: 24
+  }
+])
+</script>
+
+<template>
+  <Descriptions v-loading="loading" :schema="schema" :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>