feat: Add example-page demo
kailong321200875
4 years ago
parent
262f4211cf
commit
1492f9119a
@ -0,0 +1,23 @@
|
||||
import mitt from 'mitt'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
|
||||
interface Option {
|
||||
name: string // 事件名称
|
||||
callback: Fn // 回调
|
||||
}
|
||||
|
||||
const emitter = mitt()
|
||||
|
||||
export const useEmitt = (option?: Option) => {
|
||||
if (option) {
|
||||
emitter.on(option.name, option.callback)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
emitter.off(option.name)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
emitter
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import Write from './components/Write.vue'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { ref, unref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { saveTableApi } from '@/api/table'
|
||||
import { TableData } from '@/api/table/types'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
|
||||
const { emitter } = useEmitt()
|
||||
|
||||
const { push } = useRouter()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const writeRef = ref<ComponentRef<typeof Write>>()
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const save = async () => {
|
||||
const write = unref(writeRef)
|
||||
const validate = await write?.elFormRef?.validate()?.catch(() => {})
|
||||
if (validate) {
|
||||
loading.value = true
|
||||
const data = (await write?.getFormData()) as TableData
|
||||
const res = await saveTableApi({
|
||||
data
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
if (res) {
|
||||
emitter.emit('getList', 'add')
|
||||
push('/example/example-page')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('exampleDemo.add')">
|
||||
<Write ref="writeRef" />
|
||||
|
||||
<div class="text-center">
|
||||
<ElButton type="primary" :loading="loading" @click="save">
|
||||
{{ t('exampleDemo.save') }}
|
||||
</ElButton>
|
||||
<ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import Detail from './components/Detail.vue'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { ref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { getTableDetApi } from '@/api/table'
|
||||
import { TableData } from '@/api/table/types'
|
||||
|
||||
const { push } = useRouter()
|
||||
|
||||
const { query } = useRoute()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const currentRow = ref<Nullable<TableData>>(null)
|
||||
|
||||
const getTableDet = async () => {
|
||||
const res = await getTableDetApi({
|
||||
params: {
|
||||
id: query.id as string
|
||||
}
|
||||
})
|
||||
if (res) {
|
||||
currentRow.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
getTableDet()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('exampleDemo.detail')">
|
||||
<Detail :current-row="currentRow" />
|
||||
|
||||
<div class="text-center">
|
||||
<ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import Write from './components/Write.vue'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { ref, unref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { saveTableApi, getTableDetApi } from '@/api/table'
|
||||
import { TableData } from '@/api/table/types'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
|
||||
const { emitter } = useEmitt()
|
||||
|
||||
const { push } = useRouter()
|
||||
|
||||
const { query } = useRoute()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const currentRow = ref<Nullable<TableData>>(null)
|
||||
|
||||
const getTableDet = async () => {
|
||||
const res = await getTableDetApi({
|
||||
params: {
|
||||
id: query.id as string
|
||||
}
|
||||
})
|
||||
if (res) {
|
||||
currentRow.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
getTableDet()
|
||||
|
||||
const writeRef = ref<ComponentRef<typeof Write>>()
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const save = async () => {
|
||||
const write = unref(writeRef)
|
||||
const validate = await write?.elFormRef?.validate()?.catch(() => {})
|
||||
if (validate) {
|
||||
loading.value = true
|
||||
const data = (await write?.getFormData()) as TableData
|
||||
const res = await saveTableApi({
|
||||
data
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
if (res) {
|
||||
emitter.emit('getList', 'edit')
|
||||
push('/example/example-page')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('exampleDemo.edit')">
|
||||
<Write ref="writeRef" :current-row="currentRow" />
|
||||
|
||||
<div class="text-center">
|
||||
<ElButton type="primary" :loading="loading" @click="save">
|
||||
{{ t('exampleDemo.save') }}
|
||||
</ElButton>
|
||||
<ElButton @click="push('/example/example-page')">{{ t('dialogDemo.close') }}</ElButton>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
@ -0,0 +1,166 @@
|
||||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { Search } from '@/components/Search'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ElButton, ElTag } from 'element-plus'
|
||||
import { Table } from '@/components/Table'
|
||||
import { getTableListApi, delTableListApi } from '@/api/table'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
import { TableData } from '@/api/table/types'
|
||||
import { h, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
|
||||
defineOptions({
|
||||
name: 'ExamplePage'
|
||||
})
|
||||
|
||||
const { push } = useRouter()
|
||||
|
||||
const { register, tableObject, methods } = useTable<
|
||||
{
|
||||
total: number
|
||||
list: TableData[]
|
||||
},
|
||||
TableData
|
||||
>({
|
||||
getListApi: getTableListApi,
|
||||
delListApi: delTableListApi,
|
||||
response: {
|
||||
list: 'list',
|
||||
total: 'total'
|
||||
}
|
||||
})
|
||||
|
||||
const { getList, setSearchParmas } = methods
|
||||
|
||||
getList()
|
||||
|
||||
useEmitt({
|
||||
name: 'getList',
|
||||
callback: (type: string) => {
|
||||
if (type === 'add') {
|
||||
tableObject.currentPage = 1
|
||||
}
|
||||
getList()
|
||||
}
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const searchData: FormSchema[] = [
|
||||
{
|
||||
label: t('exampleDemo.title'),
|
||||
value: '',
|
||||
component: 'Input',
|
||||
field: 'title'
|
||||
}
|
||||
]
|
||||
|
||||
const columns = reactive<TableColumn[]>([
|
||||
{
|
||||
field: 'index',
|
||||
label: t('tableDemo.index'),
|
||||
type: 'index'
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
label: t('tableDemo.title')
|
||||
},
|
||||
{
|
||||
field: 'author',
|
||||
label: t('tableDemo.author')
|
||||
},
|
||||
{
|
||||
field: 'display_time',
|
||||
label: t('tableDemo.displayTime')
|
||||
},
|
||||
{
|
||||
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')
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'pageviews',
|
||||
label: t('tableDemo.pageviews')
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
width: '260px',
|
||||
label: t('tableDemo.action')
|
||||
}
|
||||
])
|
||||
|
||||
const AddAction = () => {
|
||||
push('/example/example-add')
|
||||
}
|
||||
|
||||
const delLoading = ref(false)
|
||||
|
||||
const delData = async (row: TableData | null, multiple: boolean) => {
|
||||
tableObject.currentRow = row
|
||||
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 action = (row: TableData, type: string) => {
|
||||
push(`/example/example-${type}?id=${row.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<Search :schema="searchData" @search="setSearchParmas" @reset="setSearchParmas" />
|
||||
|
||||
<div class="mb-10px">
|
||||
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
||||
<ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
|
||||
{{ t('exampleDemo.del') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
:columns="columns"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
@register="register"
|
||||
>
|
||||
<template #action="{ 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>
|
||||
</template>
|
||||
@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType, 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()
|
||||
|
||||
defineProps({
|
||||
currentRow: {
|
||||
type: Object as PropType<Nullable<TableData>>,
|
||||
default: () => null
|
||||
}
|
||||
})
|
||||
|
||||
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 :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>
|
||||
@ -0,0 +1,144 @@
|
||||
<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 { useI18n } from '@/hooks/web/useI18n'
|
||||
import { required } from '@/utils/formRules'
|
||||
import { IDomEditor } from '@wangeditor/editor'
|
||||
|
||||
const props = defineProps({
|
||||
currentRow: {
|
||||
type: Object as PropType<Nullable<TableData>>,
|
||||
default: () => null
|
||||
}
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const schema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'title',
|
||||
label: t('exampleDemo.title'),
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'author',
|
||||
label: t('exampleDemo.author'),
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'display_time',
|
||||
label: t('exampleDemo.displayTime'),
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'datetime',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss'
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'importance',
|
||||
label: t('exampleDemo.importance'),
|
||||
component: 'Select',
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '重要',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '良好',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'pageviews',
|
||||
label: t('exampleDemo.pageviews'),
|
||||
component: 'InputNumber',
|
||||
value: 0,
|
||||
formItemProps: {
|
||||
rules: [required]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
component: 'Editor',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
defaultHtml: '',
|
||||
onChange: (edit: IDomEditor) => {
|
||||
const { setValues } = methods
|
||||
setValues({
|
||||
content: edit.getHtml()
|
||||
})
|
||||
}
|
||||
},
|
||||
label: t('exampleDemo.content')
|
||||
}
|
||||
])
|
||||
|
||||
const rules = reactive({
|
||||
title: [required],
|
||||
author: [required],
|
||||
importance: [required],
|
||||
pageviews: [required],
|
||||
display_time: [required],
|
||||
content: [required]
|
||||
})
|
||||
|
||||
const { register, methods, elFormRef } = useForm({
|
||||
schema
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.currentRow,
|
||||
(currentRow) => {
|
||||
if (!currentRow) return
|
||||
const { setValues, setSchema } = methods
|
||||
setValues(currentRow)
|
||||
setSchema([
|
||||
{
|
||||
field: 'content',
|
||||
path: 'componentProps.defaultHtml',
|
||||
value: currentRow.content
|
||||
}
|
||||
])
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
elFormRef,
|
||||
getFormData: methods.getFormData
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form :rules="rules" @register="register" />
|
||||
</template>
|
||||
Loading…
Reference in New Issue