wip: example demo developing
陈凯龙
4 years ago
parent
7ad46f828d
commit
ef35bde801
@ -0,0 +1,170 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ContentWrap } from '@/components/ContentWrap'
|
||||||
|
import { Search } from '@/components/Search'
|
||||||
|
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 { useTable } from '@/hooks/web/useTable'
|
||||||
|
import { TableData } from '@/api/table/types'
|
||||||
|
import { h, reactive, ref, unref } from 'vue'
|
||||||
|
import Write from './components/Write.vue'
|
||||||
|
|
||||||
|
const { register, tableObject, methods } = useTable<
|
||||||
|
{
|
||||||
|
total: number
|
||||||
|
list: TableData[]
|
||||||
|
},
|
||||||
|
TableData
|
||||||
|
>({
|
||||||
|
getListApi: getTableListApi,
|
||||||
|
response: {
|
||||||
|
list: 'list',
|
||||||
|
total: 'total'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { getList, setSearchParmas } = methods
|
||||||
|
|
||||||
|
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: 'content',
|
||||||
|
label: t('tableDemo.header'),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
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',
|
||||||
|
label: t('tableDemo.action')
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const AddAction = () => {
|
||||||
|
tableObject.currentRow = null
|
||||||
|
tableObject.dialogVisible = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const editAction = (row: TableData) => {
|
||||||
|
tableObject.currentRow = row
|
||||||
|
tableObject.dialogVisible = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const writeRef = ref<ComponentRef<typeof Write>>()
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
loading.value = true
|
||||||
|
const write = unref(writeRef)
|
||||||
|
const validate = await write?.elFormRef?.validate()?.catch(() => {})
|
||||||
|
if (validate) {
|
||||||
|
const data = await write?.getFormData()
|
||||||
|
|
||||||
|
const res = await saveTableApi({
|
||||||
|
data
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
if (res) {
|
||||||
|
tableObject.dialogVisible = false
|
||||||
|
tableObject.currentPage = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<Search :schema="searchData" @search="setSearchParmas" @reset="setSearchParmas" />
|
||||||
|
|
||||||
|
<div class="mb-10px">
|
||||||
|
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
||||||
|
<ElButton type="danger">{{ 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="editAction(row)">
|
||||||
|
{{ t('exampleDemo.edit') }}
|
||||||
|
</ElButton>
|
||||||
|
</template>
|
||||||
|
</Table>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<Dialog v-model="tableObject.dialogVisible" :title="t('exampleDemo.add')">
|
||||||
|
<Write ref="writeRef" :current-row="tableObject.currentRow" />
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<ElButton type="primary" :loading="loading" @click="save">
|
||||||
|
{{ t('exampleDemo.save') }}
|
||||||
|
</ElButton>
|
||||||
|
<ElButton @click="tableObject.dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from '@/components/Form'
|
||||||
|
import { useForm } from '@/hooks/web/useForm'
|
||||||
|
import { PropType, reactive } 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
|
||||||
|
})
|
||||||
|
|
||||||
|
if (props.currentRow) {
|
||||||
|
const { setValues, setSchema } = methods
|
||||||
|
setValues(props.currentRow)
|
||||||
|
setSchema([
|
||||||
|
{
|
||||||
|
field: 'content',
|
||||||
|
path: 'componentProps.defaultHtml',
|
||||||
|
value: props.currentRow.content
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
elFormRef,
|
||||||
|
getFormData: methods.getFormData
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Form :rules="rules" @register="register" />
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue