From 2e74ef1864b683f4545a9c1d3a6dbbe4a2722790 Mon Sep 17 00:00:00 2001
From: johnniang <johnniang@riseup.net>
Date: Fri, 19 Apr 2019 22:10:00 +0800
Subject: [PATCH] Refactor attachment detail drawer

---
 src/views/attachment/AttachmentList.vue       | 176 ++--------------
 .../components/AttachmentDetailDrawer.vue     | 199 ++++++++++++++++++
 2 files changed, 213 insertions(+), 162 deletions(-)
 create mode 100644 src/views/attachment/components/AttachmentDetailDrawer.vue

diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 63937cac..b353662e 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -125,137 +125,30 @@
         <p class="ant-upload-hint">支持单个或批量上传</p>
       </upload>
     </a-modal>
-    <a-drawer
+    <AttachmentDetailDrawer
+      v-model="drawerVisiable"
       v-if="selectAttachment"
-      title="附件详情"
-      :width="isMobile()?'100%':'560'"
-      closable
-      :visible="drawerVisible"
-      destroyOnClose
-      @close="onChildClose"
-    >
-      <a-row
-        type="flex"
-        align="middle"
-      >
-        <a-col :span="24">
-          <a-skeleton
-            active
-            :loading="detailLoading"
-            :paragraph="{rows: 8}"
-          >
-            <div class="attach-detail-img">
-              <img :src="selectAttachment.path">
-            </div>
-          </a-skeleton>
-        </a-col>
-        <a-divider />
-        <a-col :span="24">
-          <a-skeleton
-            active
-            :loading="detailLoading"
-            :paragraph="{rows: 8}"
-          >
-            <a-list itemLayout="horizontal">
-              <a-list-item>
-                <a-list-item-meta>
-                  <template
-                    slot="description"
-                    v-if="editable"
-                  >
-                    <a-input
-                      v-model="selectAttachment.name"
-                      @blur="updateAttachment"
-                    />
-                  </template>
-                  <template
-                    slot="description"
-                    v-else
-                  >{{ selectAttachment.name }}</template>
-                  <span slot="title">
-                    附件名：
-                    <a-icon
-                      type="edit"
-                      @click="handleEditName"
-                    />
-                  </span>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta :description="selectAttachment.mediaType">
-                  <span slot="title">附件类型：</span>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta :description="selectAttachment.size">
-                  <span slot="title">附件大小：</span>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta :description="selectAttachment.height+'x'+selectAttachment.width">
-                  <span slot="title">图片尺寸：</span>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta :description="selectAttachment.createTime">
-                  <span slot="title">上传日期：</span>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta :description="selectAttachment.path">
-                  <span slot="title">
-                    普通链接：
-                    <a-icon
-                      type="copy"
-                      @click="doCopyNormalLink"
-                    />
-                  </span>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta :description="'!['+selectAttachment.name+']('+selectAttachment.path+')'">
-                  <span slot="title">
-                    Markdown 格式：
-                    <a-icon
-                      type="copy"
-                      @click="doCopyMarkdownLink"
-                    />
-                  </span>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </a-skeleton>
-        </a-col>
-      </a-row>
-      <div class="attachment-control">
-        <a-popconfirm
-          title="你确定要删除该附件？"
-          @confirm="deleteAttachment(selectAttachment.id)"
-          okText="确定"
-          cancelText="取消"
-        >
-          <a-button type="danger">删除</a-button>
-        </a-popconfirm>
-      </div>
-    </a-drawer>
+      :attachment="selectAttachment"
+      @delete="handleDelete"
+    />
   </page-view>
 </template>
 
 <script>
 import { PageView } from '@/layouts'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import AttachmentDetailDrawer from './components/AttachmentDetailDrawer'
 import attachmentApi from '@/api/attachment'
 
 export default {
   components: {
-    PageView
+    PageView,
+    AttachmentDetailDrawer
   },
   mixins: [mixin, mixinDevice],
   data() {
     return {
       uploadVisible: false,
-      drawerVisible: false,
-      detailLoading: false,
       selectAttachment: null,
       attachments: [],
       editable: false,
@@ -270,7 +163,8 @@ export default {
         sort: null,
         keyword: null
       },
-      uploadHandler: attachmentApi.upload
+      uploadHandler: attachmentApi.upload,
+      drawerVisiable: false
     }
   },
   created() {
@@ -287,12 +181,8 @@ export default {
       })
     },
     showDetailDrawer(attachment) {
-      this.drawerVisible = true
-      this.detailLoading = true
       this.selectAttachment = attachment
-      setTimeout(() => {
-        this.detailLoading = false
-      }, 500)
+      this.drawerVisiable = true
     },
     showUploadModal() {
       this.uploadVisible = true
@@ -308,56 +198,18 @@ export default {
     handleUploadSuccess() {
       this.loadAttachments()
     },
-    deleteAttachment(id) {
-      attachmentApi.delete(id).then(response => {
-        this.$message.success('删除成功！')
-        this.drawerVisible = false
-        this.loadAttachments()
-      })
-    },
-    doCopyNormalLink() {
-      const text = `${this.selectAttachment.path}`
-      this.$copyText(text)
-        .then(message => {
-          console.log('copy', message)
-          this.$message.success('复制成功')
-        })
-        .catch(err => {
-          console.log('copy.err', err)
-          this.$message.error('复制失败')
-        })
-    },
-    doCopyMarkdownLink() {
-      const text = `![${this.selectAttachment.name}](${this.selectAttachment.path})`
-      this.$copyText(text)
-        .then(message => {
-          console.log('copy', message)
-          this.$message.success('复制成功')
-        })
-        .catch(err => {
-          console.log('copy.err', err)
-          this.$message.error('复制失败')
-        })
-    },
-    onChildClose() {
-      this.drawerVisible = false
-    },
     handlePaginationChange(page, size) {
       this.$log.debug(`Current: ${page}, PageSize: ${size}`)
       this.pagination.page = page
       this.pagination.size = size
       this.loadAttachments()
     },
-    handleEditName() {
-      this.editable = !this.editable
-    },
-    updateAttachment() {
-      this.$message.success('修改')
-      this.editable = false
-    },
     resetParam() {
       this.queryParam.keyword = null
       this.loadAttachments()
+    },
+    handleDelete(attachment) {
+      this.loadAttachments()
     }
   }
 }
diff --git a/src/views/attachment/components/AttachmentDetailDrawer.vue b/src/views/attachment/components/AttachmentDetailDrawer.vue
new file mode 100644
index 00000000..0579fb2b
--- /dev/null
+++ b/src/views/attachment/components/AttachmentDetailDrawer.vue
@@ -0,0 +1,199 @@
+<template>
+  <a-drawer
+    title="附件详情"
+    :width="isMobile()?'100%':'560'"
+    closable
+    :visible="visiable"
+    destroyOnClose
+    @close="onClose"
+  >
+    <a-row
+      type="flex"
+      align="middle"
+    >
+      <a-col :span="24">
+        <a-skeleton
+          active
+          :loading="detailLoading"
+          :paragraph="{rows: 8}"
+        >
+          <div class="attach-detail-img">
+            <img :src="attachment.path">
+          </div>
+        </a-skeleton>
+      </a-col>
+      <a-divider />
+      <a-col :span="24">
+        <a-skeleton
+          active
+          :loading="detailLoading"
+          :paragraph="{rows: 8}"
+        >
+          <a-list itemLayout="horizontal">
+            <a-list-item>
+              <a-list-item-meta>
+                <template
+                  slot="description"
+                  v-if="editable"
+                >
+                  <a-input
+                    v-model="attachment.name"
+                    @blur="updateAttachment"
+                  />
+                </template>
+                <template
+                  slot="description"
+                  v-else
+                >{{ attachment.name }}</template>
+                <span slot="title">
+                  附件名：
+                  <a-icon
+                    type="edit"
+                    @click="handleEditName"
+                  />
+                </span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="attachment.mediaType">
+                <span slot="title">附件类型：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="attachment.size">
+                <span slot="title">附件大小：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="attachment.height+'x'+attachment.width">
+                <span slot="title">图片尺寸：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="attachment.createTime">
+                <span slot="title">上传日期：</span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="attachment.path">
+                <span slot="title">
+                  普通链接：
+                  <a-icon
+                    type="copy"
+                    @click="doCopyNormalLink"
+                  />
+                </span>
+              </a-list-item-meta>
+            </a-list-item>
+            <a-list-item>
+              <a-list-item-meta :description="'!['+attachment.name+']('+attachment.path+')'">
+                <span slot="title">
+                  Markdown 格式：
+                  <a-icon
+                    type="copy"
+                    @click="doCopyMarkdownLink"
+                  />
+                </span>
+              </a-list-item-meta>
+            </a-list-item>
+          </a-list>
+        </a-skeleton>
+      </a-col>
+    </a-row>
+    <div class="attachment-control">
+      <a-popconfirm
+        title="你确定要删除该附件？"
+        @confirm="deleteAttachment"
+        okText="确定"
+        cancelText="取消"
+      >
+        <a-button type="danger">删除</a-button>
+      </a-popconfirm>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import attachmentApi from '@/api/attachment'
+
+export default {
+  name: 'AttachmentDetailDrawer',
+  mixins: [mixin, mixinDevice],
+  data() {
+    return {
+      detailLoading: true,
+      editable: false
+    }
+  },
+  model: {
+    prop: 'visiable',
+    event: 'close'
+  },
+  props: {
+    attachment: {
+      type: Object,
+      required: true
+    },
+    visiable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.detailLoading = false
+    }, 300)
+  },
+  methods: {
+    deleteAttachment() {
+      attachmentApi.delete(this.attachment.id).then(response => {
+        this.$message.success('删除成功！')
+        this.$emit('delete', this.attachment)
+        this.onClose()
+      })
+    },
+    handleEditName() {
+      this.editable = !this.editable
+    },
+    updateAttachment() {
+      this.$message.success('修改')
+      this.editable = false
+    },
+    doCopyNormalLink() {
+      const text = `${this.attachment.path}`
+      this.$copyText(text)
+        .then(message => {
+          console.log('copy', message)
+          this.$message.success('复制成功')
+        })
+        .catch(err => {
+          console.log('copy.err', err)
+          this.$message.error('复制失败')
+        })
+    },
+    doCopyMarkdownLink() {
+      const text = `![${this.attachment.name}](${this.attachment.path})`
+      this.$copyText(text)
+        .then(message => {
+          console.log('copy', message)
+          this.$message.success('复制成功')
+        })
+        .catch(err => {
+          console.log('copy.err', err)
+          this.$message.error('复制失败')
+        })
+    },
+    onClose() {
+      this.$emit('close', false)
+    }
+  }
+}
+</script>
+
+<style>
+.attach-detail-img img {
+  width: 100%;
+}
+</style>