kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 💡 综合实例查看详情重构

This commit is contained in:
chenkl 2020-12-28 09:50:04 +08:00
parent e77a931ef2
commit 9c26edd5d5
16 changed files with 340 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Detail/index.vue
View File

@ -37,7 +37,7 @@
<template v-else>{{ item.label }}</template>
</div>
<div class="content__item--message" :style="messageStyleObj">
<slot v-if="item.slots && item.slots.default" :name="item.slots.default" :row="item" />
<slot v-if="item.slots && item.slots.default" :name="item.slots.default" :row="data" />
<template v-else>{{ data[item.field] }}</template>
</div>
</div>
@ -195,12 +195,15 @@ export default defineComponent({
height: 100%;
}
.content__item--label {
font-size: 14px;
padding: 8px 16px;
}
.content__item--message {
flex: 1;
font-size: 14px;
padding: 8px 16px;
line-height: 20px;
color: #606266;
}
}
}

5
src/components/Dialog/index.vue
View File

@ -40,6 +40,9 @@ export default defineComponent({
<style lang="less" scoped>
.com-dialog__content {
height: 600px;
@{deep}(.el-scrollbar__wrap ) {
max-height: 600px; // 最大高度
overflow-x: hidden; // 隐藏横向滚动栏
}
}
</style>

12
src/hooks/useExample.ts
View File

@ -39,6 +39,9 @@ export function useExample() {
// 弹窗标题
const title = ref<string>('')
// 组件名称
const comName = ref<string>('')
// 表格展示条目改变时候重置基本参数
function sizeChange(val: number) {
loading.value = true
@ -72,6 +75,11 @@ export function useExample() {
selectionData.value = selection
}
// 改变弹窗dialogVisible
function toggleVisible(val = false) {
dialogVisible.value = val
}
return {
defalutParams,
tableData,
@ -80,9 +88,11 @@ export function useExample() {
total,
dialogVisible,
title,
comName,
sizeChange,
currentChange,
delData,
handleSelectionChange
handleSelectionChange,
toggleVisible
}
}

13
src/pages/index/router/index.ts
View File

@ -557,6 +557,19 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
showMainRoute: true,
activeMenu: '/example-demo/example-page'
}
},
{
path: 'example-detail',
component: () => import('_p/index/views/example-demo/example-page/example-detail.vue'),
name: 'ExampleDetail',
meta: {
title: '列表综合实例-详情',
noTagsView: true,
noCache: true,
hidden: true,
showMainRoute: true,
activeMenu: '/example-demo/example-page'
}
}
]
}

2
src/pages/index/views/example-demo/example-dialog/api.ts
View File

@ -13,7 +13,7 @@ export const delsExampApi = ({ data }: PropsData): any => {
return fetch({ url: '/example/delete', method: 'post', data })
}
export const saveExampApi = ({ data }: PropsData): any => {
export const setExampApi = ({ data }: PropsData): any => {
return fetch({ url: '/example/save', method: 'post', data })
}

115
src/pages/index/views/example-demo/example-dialog/components/Detail.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<div>
<com-detail
:data="form"
:schema="fromSchema"
:collapsed="false"
title="文章详情"
>
<template #content="scope">
<div v-html="scope.row.content" />
</template>
</com-detail>
<div class="dialong__button--wrap">
<el-button @click="close">取消</el-button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType } from 'vue'
import { InfoWriteParams } from './types'
import { getExampDetApi } from '../api'
const fromSchema: any[] = [
{
field: 'title',
label: '标题',
span: 24
},
{
field: 'author',
label: '作者'
},
{
field: 'display_time',
label: '创建时间'
},
{
field: 'importance',
label: '重要性'
},
{
field: 'pageviews',
label: '阅读数'
},
{
field: 'content',
label: '内容',
span: 24,
slots: {
default: 'content'
}
}
]
export default defineComponent({
name: 'Detail',
props: {
info: {
type: Object as PropType<any>,
default: () => null
}
},
emits: ['close'],
setup(props, { emit }) {
const form = reactive<InfoWriteParams>({
id: '', // id
author: '', // 作者
title: '', // 标题
content: '', // 内容
importance: '', // 重要性
display_time: '', // 创建时间
pageviews: 0 // 阅读数
})
async function getDet() {
if (props.info) {
const id = (props.info as any).id
try {
const res = await getExampDetApi({
params: {
id: id
}
})
if (res.code === '0000') {
for (const key in form) {
if (key === 'importance') {
form[key] = res.data[key].toString()
} else {
form[key] = res.data[key]
}
}
}
} catch (e) {
console.log(e)
}
}
}
getDet()
function close() {
emit('close')
}
return {
form,
fromSchema,
close
}
}
})
</script>
<style>
</style>

4
src/pages/index/views/example-demo/example-dialog/components/IfnoWrite.vue → src/pages/index/views/example-demo/example-dialog/components/InfoWrite.vue
View File

@ -66,7 +66,7 @@ import Editor from '_c/Editor/index.vue'
import { Message } from '_c/Message'
import { formatTime } from '@/utils'
import { InfoWriteParams, InfoWriteRules } from './types'
import { saveExampApi, getExampDetApi } from '../api'
import { setExampApi, getExampDetApi } from '../api'
const requiredRule = {
required: true,
@ -145,7 +145,7 @@ export default defineComponent({
if (valid) {
const formData = unref(form)
formData.display_time = formatTime(formData.display_time, 'yyyy-MM-dd HH:mm:ss')
const res = await saveExampApi({
const res = await setExampApi({
data: formData
})
if (res.code === '0000') {

45
src/pages/index/views/example-demo/example-dialog/index.vue
View File

@ -9,7 +9,7 @@
</div>
<div class="button__example--wrap">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="open(false)">新增</el-button>
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="open(false, 'InfoWrite')">新增</el-button>
<el-button
type="danger"
icon="el-icon-delete"
@ -45,20 +45,32 @@
</el-tag>
</template>
<template #action="scope">
<el-button type="primary" size="mini" @click="open(scope.row)">编辑</el-button>
<el-button type="primary" size="mini" @click="open(scope.row, 'InfoWrite')">编辑</el-button>
<el-button type="success" size="mini" @click="open(scope.row, 'Detail')">查看</el-button>
<el-button type="danger" size="mini" @click="dels(scope.row)">删除</el-button>
</template>
</com-table>
<com-dialog v-model="dialogVisible" :title="title">
<ifno-write :info="info" @close="close" @success="success" />
<info-write
v-if="comName === 'InfoWrite'"
:info="info"
@close="toggleVisible"
@success="success"
/>
<detail
v-if="comName === 'Detail'"
:info="info"
@close="toggleVisible"
/>
</com-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import IfnoWrite from './components/IfnoWrite.vue'
import InfoWrite from './components/InfoWrite.vue'
import Detail from './components/Detail.vue'
import { useExample } from '@/hooks/useExample'
import { Message } from '_c/Message'
@ -104,7 +116,7 @@ const columns = [
{
field: 'action',
label: '操作',
width: '150px',
width: '220px',
slots: {
default: 'action'
}
@ -114,7 +126,8 @@ const columns = [
export default defineComponent({
// name: 'ExampleDialog',
components: {
IfnoWrite
InfoWrite,
Detail
},
setup() {
const info = ref<any>(null)
@ -130,7 +143,9 @@ export default defineComponent({
sizeChange,
handleSelectionChange,
selectionData,
delData
delData,
comName,
toggleVisible
} = useExample()
// 请求数据
@ -198,15 +213,11 @@ export default defineComponent({
}
// 打开弹窗
function open(row: any) {
title.value = row ? '编辑' : '新增'
function open(row: any, component: string) {
comName.value = component
title.value = !row ? '新增' : (component === 'Detail' ? '详情' : '编辑')
info.value = row || null
dialogVisible.value = true
}
// 弹窗关闭
function close() {
dialogVisible.value = false
toggleVisible(true)
}
// 成功之后的回调
@ -234,7 +245,9 @@ export default defineComponent({
handleCurrentChange,
handleSelectionChange,
dels,
close, success
close, success,
comName,
toggleVisible
}
}
})

2
src/pages/index/views/example-demo/example-page/api.ts
View File

@ -13,7 +13,7 @@ export const delsExampApi = ({ data }: PropsData): any => {
return fetch({ url: '/example/delete', method: 'post', data })
}
export const saveExampApi = ({ data }: PropsData): any => {
export const setExampApi = ({ data }: PropsData): any => {
return fetch({ url: '/example/save', method: 'post', data })
}

117
src/pages/index/views/example-demo/example-page/components/Detail.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<div>
<com-detail
:data="form"
:schema="fromSchema"
:collapsed="false"
title="文章详情"
>
<template #content="scope">
<div v-html="scope.row.content" />
</template>
</com-detail>
<div class="dialong__button--wrap">
<el-button @click="close">取消</el-button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType } from 'vue'
import { useRouter } from 'vue-router'
import { InfoWriteParams } from './types'
import { getExampDetApi } from '../api'
const fromSchema: any[] = [
{
field: 'title',
label: '标题',
span: 24
},
{
field: 'author',
label: '作者'
},
{
field: 'display_time',
label: '创建时间'
},
{
field: 'importance',
label: '重要性'
},
{
field: 'pageviews',
label: '阅读数'
},
{
field: 'content',
label: '内容',
span: 24,
slots: {
default: 'content'
}
}
]
export default defineComponent({
name: 'Detail',
props: {
id: {
type: String as PropType<string>,
default: ''
}
},
setup(props) {
const { push } = useRouter()
const form = reactive<InfoWriteParams>({
id: '', // id
author: '', // 作者
title: '', // 标题
content: '', // 内容
importance: '', // 重要性
display_time: '', // 创建时间
pageviews: 0 // 阅读数
})
async function getDet() {
if (props.id) {
const id = props.id
try {
const res = await getExampDetApi({
params: {
id: id
}
})
if (res.code === '0000') {
for (const key in form) {
if (key === 'importance') {
form[key] = res.data[key].toString()
} else {
form[key] = res.data[key]
}
}
}
} catch (e) {
console.log(e)
}
}
}
getDet()
function close() {
push('/example-demo/example-page')
}
return {
form,
fromSchema,
close
}
}
})
</script>
<style>
</style>

4
src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue → src/pages/index/views/example-demo/example-page/components/InfoWrite.vue
View File

@ -67,7 +67,7 @@ import Editor from '_c/Editor/index.vue'
import { Message } from '_c/Message'
import { formatTime } from '@/utils'
import { InfoWriteParams, InfoWriteRules } from './types'
import { saveExampApi, getExampDetApi } from '../api'
import { setExampApi, getExampDetApi } from '../api'
const requiredRule = {
required: true,
@ -148,7 +148,7 @@ export default defineComponent({
if (valid) {
const formData = unref(form)
formData.display_time = formatTime(formData.display_time, 'yyyy-MM-dd HH:mm:ss')
const res = await saveExampApi({
const res = await setExampApi({
data: formData
})
if (res.code === '0000') {

6
src/pages/index/views/example-demo/example-page/example-add.vue
View File

@ -1,16 +1,16 @@
<template>
<ifno-write @success="success" />
<info-write @success="success" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import IfnoWrite from './components/IfnoWrite.vue'
import InfoWrite from './components/InfoWrite.vue'
import vueBus from '@/vue-bus'
export default defineComponent({
// name: 'ExampleAdd',
components: {
IfnoWrite
InfoWrite
},
setup() {
// 成功之后的回调

26
src/pages/index/views/example-demo/example-page/example-detail.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<detail :id="id" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Detail from './components/Detail.vue'
import { useRoute } from 'vue-router'
export default defineComponent({
// name: 'ExampleDetail',
components: {
Detail
},
setup() {
const { query } = useRoute()
return {
id: query.id
}
}
})
</script>
<style>
</style>

6
src/pages/index/views/example-demo/example-page/example-edit.vue
View File

@ -1,17 +1,17 @@
<template>
<ifno-write :id="id" @success="success" />
<info-write :id="id" @success="success" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import IfnoWrite from './components/IfnoWrite.vue'
import InfoWrite from './components/InfoWrite.vue'
import vueBus from '@/vue-bus'
import { useRoute } from 'vue-router'
export default defineComponent({
// name: 'ExampleEdit',
components: {
IfnoWrite
InfoWrite
},
setup() {
const { query } = useRoute()

11
src/pages/index/views/example-demo/example-page/index.vue
View File

@ -46,6 +46,7 @@
</template>
<template #action="scope">
<el-button type="primary" size="mini" @click="open(scope.row)">编辑</el-button>
<el-button type="success" size="mini" @click="open(scope.row, 'Detail')">查看</el-button>
<el-button type="danger" size="mini" @click="dels(scope.row)">删除</el-button>
</template>
</com-table>
@ -100,7 +101,7 @@ const columns = [
{
field: 'action',
label: '操作',
width: '150px',
width: '220px',
slots: {
default: 'action'
}
@ -189,8 +190,12 @@ export default defineComponent({
}
// 打开新页面
function open(row: any) {
push(row ? `/example-demo/example-edit?id=${row.id}` : `/example-demo/example-add`)
function open(row: any, component?: string) {
push(!row
? `/example-demo/example-add`
: (component
? `/example-demo/example-detail?id=${row.id}`
: `/example-demo/example-edit?id=${row.id}`))
}
getExampleList()

1
src/styles/glob.less
View File

@ -28,5 +28,6 @@
}
.dialong__button--wrap {
text-align: center;
margin-top: 20px;
}
// 综合实例样式