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

src/components/Detail/index.vue

@@ -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;
     }
   }
 }

src/components/Dialog/index.vue

@@ -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>

src/hooks/useExample.ts

@@ -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
   }
 }

src/pages/index/router/index.ts

@@ -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'
+        }
       }
     ]
   }

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

@@ -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 })
 }
 

src/pages/index/views/example-demo/example-dialog/components/Detail.vue

@@ -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>

src/pages/index/views/example-demo/example-dialog/components/InfoWrite.vue

@@ -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') {

src/pages/index/views/example-demo/example-dialog/index.vue

@@ -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) {
+    function open(row: any, component: string) {
-      title.value = row ? '编辑' : '新增'
+      comName.value = component
+      title.value = !row ? '新增' : (component === 'Detail' ? '详情' : '编辑')
       info.value = row || null
-      dialogVisible.value = true
+      toggleVisible(true)
-    }
-
-    // 弹窗关闭
-    function close() {
-      dialogVisible.value = false
     }
 
     // 成功之后的回调
@@ -234,7 +245,9 @@ export default defineComponent({
       handleCurrentChange,
       handleSelectionChange,
       dels,
-      close, success
+      close, success,
+      comName,
+      toggleVisible
     }
   }
 })

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

@@ -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 })
 }
 

src/pages/index/views/example-demo/example-page/components/Detail.vue

@@ -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>

src/pages/index/views/example-demo/example-page/components/InfoWrite.vue

@@ -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') {

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

@@ -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() {
     // 成功之后的回调

src/pages/index/views/example-demo/example-page/example-detail.vue

@@ -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>

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

@@ -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()

src/pages/index/views/example-demo/example-page/index.vue

@@ -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) {
+    function open(row: any, component?: string) {
-      push(row ? `/example-demo/example-edit?id=${row.id}` : `/example-demo/example-add`)
+      push(!row
+        ? `/example-demo/example-add`
+        : (component
+          ? `/example-demo/example-detail?id=${row.id}`
+          : `/example-demo/example-edit?id=${row.id}`))
     }
 
     getExampleList()

src/styles/glob.less

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