Skip to content

Commit

Permalink
refactor: 💡 综合实例查看详情重构
Browse files Browse the repository at this point in the history
  • Loading branch information
kailong321200875 committed Dec 28, 2020
1 parent e77a931 commit 9c26edd
Show file tree
Hide file tree
Showing 16 changed files with 340 additions and 34 deletions.
5 changes: 4 additions & 1 deletion src/components/Detail/index.vue
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/Dialog/index.vue
Expand Up @@ -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 changes: 11 additions & 1 deletion src/hooks/useExample.ts
Expand Up @@ -39,6 +39,9 @@ export function useExample() {
// 弹窗标题
const title = ref<string>('')

// 组件名称
const comName = ref<string>('')

// 表格展示条目改变时候重置基本参数
function sizeChange(val: number) {
loading.value = true
Expand Down Expand Up @@ -72,6 +75,11 @@ export function useExample() {
selectionData.value = selection
}

// 改变弹窗dialogVisible
function toggleVisible(val = false) {
dialogVisible.value = val
}

return {
defalutParams,
tableData,
Expand All @@ -80,9 +88,11 @@ export function useExample() {
total,
dialogVisible,
title,
comName,
sizeChange,
currentChange,
delData,
handleSelectionChange
handleSelectionChange,
toggleVisible
}
}
13 changes: 13 additions & 0 deletions src/pages/index/router/index.ts
Expand Up @@ -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'
}
}
]
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index/views/example-demo/example-dialog/api.ts
Expand Up @@ -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 })
}

Expand Down
@@ -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>
Expand Up @@ -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,
Expand Down Expand Up @@ -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') {
Expand Down
45 changes: 29 additions & 16 deletions src/pages/index/views/example-demo/example-dialog/index.vue
Expand Up @@ -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"
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -104,7 +116,7 @@ const columns = [
{
field: 'action',
label: '操作',
width: '150px',
width: '220px',
slots: {
default: 'action'
}
Expand All @@ -114,7 +126,8 @@ const columns = [
export default defineComponent({
// name: 'ExampleDialog',
components: {
IfnoWrite
InfoWrite,
Detail
},
setup() {
const info = ref<any>(null)
Expand All @@ -130,7 +143,9 @@ export default defineComponent({
sizeChange,
handleSelectionChange,
selectionData,
delData
delData,
comName,
toggleVisible
} = useExample()
// 请求数据
Expand Down Expand Up @@ -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)
}
// 成功之后的回调
Expand Down Expand Up @@ -234,7 +245,9 @@ export default defineComponent({
handleCurrentChange,
handleSelectionChange,
dels,
close, success
close, success,
comName,
toggleVisible
}
}
})
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index/views/example-demo/example-page/api.ts
Expand Up @@ -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 })
}

Expand Down

0 comments on commit 9c26edd

Please sign in to comment.