From 9c26edd5d599b5fb5a832fb547e3d95b6bfa9a98 Mon Sep 17 00:00:00 2001
From: chenkl <321200875@qq.com>
Date: Mon, 28 Dec 2020 09:50:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20=E7=BB=BC=E5=90=88?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E6=9F=A5=E7=9C=8B=E8=AF=A6=E6=83=85=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Detail/index.vue               |   5 +-
 src/components/Dialog/index.vue               |   5 +-
 src/hooks/useExample.ts                       |  12 +-
 src/pages/index/router/index.ts               |  13 ++
 .../views/example-demo/example-dialog/api.ts  |   2 +-
 .../example-dialog/components/Detail.vue      | 115 +++++++++++++++++
 .../{IfnoWrite.vue => InfoWrite.vue}          |   4 +-
 .../example-demo/example-dialog/index.vue     |  45 ++++---
 .../views/example-demo/example-page/api.ts    |   2 +-
 .../example-page/components/Detail.vue        | 117 ++++++++++++++++++
 .../{IfnoWrite.vue => InfoWrite.vue}          |   4 +-
 .../example-demo/example-page/example-add.vue |   6 +-
 .../example-page/example-detail.vue           |  26 ++++
 .../example-page/example-edit.vue             |   6 +-
 .../views/example-demo/example-page/index.vue |  11 +-
 src/styles/glob.less                          |   1 +
 16 files changed, 340 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/index/views/example-demo/example-dialog/components/Detail.vue
 rename src/pages/index/views/example-demo/example-dialog/components/{IfnoWrite.vue => InfoWrite.vue} (98%)
 create mode 100644 src/pages/index/views/example-demo/example-page/components/Detail.vue
 rename src/pages/index/views/example-demo/example-page/components/{IfnoWrite.vue => InfoWrite.vue} (98%)
 create mode 100644 src/pages/index/views/example-demo/example-page/example-detail.vue

diff --git a/src/components/Detail/index.vue b/src/components/Detail/index.vue
index f9a6e13c4..6b16e54d4 100644
--- a/src/components/Detail/index.vue
+++ b/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;
     }
   }
 }
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index 778471562..bacc30b93 100644
--- a/src/components/Dialog/index.vue
+++ b/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>
diff --git a/src/hooks/useExample.ts b/src/hooks/useExample.ts
index 0bfb38b93..fdd032a34 100644
--- a/src/hooks/useExample.ts
+++ b/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
   }
 }
diff --git a/src/pages/index/router/index.ts b/src/pages/index/router/index.ts
index 9ba946688..ea145ac63 100644
--- a/src/pages/index/router/index.ts
+++ b/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'
+        }
       }
     ]
   }
diff --git a/src/pages/index/views/example-demo/example-dialog/api.ts b/src/pages/index/views/example-demo/example-dialog/api.ts
index f07d7e32e..43fd6720d 100644
--- a/src/pages/index/views/example-demo/example-dialog/api.ts
+++ b/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 })
 }
 
diff --git a/src/pages/index/views/example-demo/example-dialog/components/Detail.vue b/src/pages/index/views/example-demo/example-dialog/components/Detail.vue
new file mode 100644
index 000000000..07ac13ca6
--- /dev/null
+++ b/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>
diff --git a/src/pages/index/views/example-demo/example-dialog/components/IfnoWrite.vue b/src/pages/index/views/example-demo/example-dialog/components/InfoWrite.vue
similarity index 98%
rename from src/pages/index/views/example-demo/example-dialog/components/IfnoWrite.vue
rename to src/pages/index/views/example-demo/example-dialog/components/InfoWrite.vue
index 5b5edcf24..c4074580b 100644
--- a/src/pages/index/views/example-demo/example-dialog/components/IfnoWrite.vue
+++ b/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') {
diff --git a/src/pages/index/views/example-demo/example-dialog/index.vue b/src/pages/index/views/example-demo/example-dialog/index.vue
index b5303d826..994cef990 100644
--- a/src/pages/index/views/example-demo/example-dialog/index.vue
+++ b/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) {
-      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
     }
   }
 })
diff --git a/src/pages/index/views/example-demo/example-page/api.ts b/src/pages/index/views/example-demo/example-page/api.ts
index f07d7e32e..43fd6720d 100644
--- a/src/pages/index/views/example-demo/example-page/api.ts
+++ b/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 })
 }
 
diff --git a/src/pages/index/views/example-demo/example-page/components/Detail.vue b/src/pages/index/views/example-demo/example-page/components/Detail.vue
new file mode 100644
index 000000000..788f84fee
--- /dev/null
+++ b/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>
diff --git a/src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue b/src/pages/index/views/example-demo/example-page/components/InfoWrite.vue
similarity index 98%
rename from src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue
rename to src/pages/index/views/example-demo/example-page/components/InfoWrite.vue
index 7c5905df5..71d541540 100644
--- a/src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue
+++ b/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') {
diff --git a/src/pages/index/views/example-demo/example-page/example-add.vue b/src/pages/index/views/example-demo/example-page/example-add.vue
index e1dd3aa7a..201ed7116 100644
--- a/src/pages/index/views/example-demo/example-page/example-add.vue
+++ b/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() {
     // 成功之后的回调
diff --git a/src/pages/index/views/example-demo/example-page/example-detail.vue b/src/pages/index/views/example-demo/example-page/example-detail.vue
new file mode 100644
index 000000000..242ddc678
--- /dev/null
+++ b/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>
diff --git a/src/pages/index/views/example-demo/example-page/example-edit.vue b/src/pages/index/views/example-demo/example-page/example-edit.vue
index 8e0998748..a6a9c933b 100644
--- a/src/pages/index/views/example-demo/example-page/example-edit.vue
+++ b/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()
diff --git a/src/pages/index/views/example-demo/example-page/index.vue b/src/pages/index/views/example-demo/example-page/index.vue
index bcca96326..73a53968b 100644
--- a/src/pages/index/views/example-demo/example-page/index.vue
+++ b/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) {
-      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()
diff --git a/src/styles/glob.less b/src/styles/glob.less
index d2b235cd2..8ebe5db06 100644
--- a/src/styles/glob.less
+++ b/src/styles/glob.less
@@ -28,5 +28,6 @@
 }
 .dialong__button--wrap {
   text-align: center;
+  margin-top: 20px;
 }
 // 综合实例样式
\ No newline at end of file