From 300da484f8a4ebeb52408c14f5413ef58954851f Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Fri, 17 May 2024 21:24:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BB=E5=9B=BE=E4=BB=8E?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=8C=BA=E8=8E=B7=E5=8F=96=20=E5=8E=BB?=
 =?UTF-8?q?=E6=8E=89=E5=9B=BE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/richtext/rich-edit.vue       |   6 +-
 src/view/content/components/articleEdit.vue | 128 +++++++++++++-------
 2 files changed, 92 insertions(+), 42 deletions(-)

diff --git a/src/components/richtext/rich-edit.vue b/src/components/richtext/rich-edit.vue
index 0087961..7d1c586 100644
--- a/src/components/richtext/rich-edit.vue
+++ b/src/components/richtext/rich-edit.vue
@@ -217,6 +217,10 @@ const isEmpty = () => {
   return editorRef.value.isEmpty()
 }
 
-defineExpose({ isEmpty })
+const getHtml = () => {
+  return editorRef.value.getHtml()
+}
+
+defineExpose({ isEmpty, getHtml })
 
 </script>
diff --git a/src/view/content/components/articleEdit.vue b/src/view/content/components/articleEdit.vue
index 6ebd625..89f1920 100644
--- a/src/view/content/components/articleEdit.vue
+++ b/src/view/content/components/articleEdit.vue
@@ -96,30 +96,24 @@
                   </el-select>
                 </div>
               </el-form-item>
-              <el-form-item label="图片（首张图可用来做栏目列表用）" prop="imgs">
-                <ChooseImg ref="chooseImg" category="article_imgs" size="820px" @on-select="handleSelectImg" />
+              <el-form-item label="" prop="imgs">
                 <template #label>
-                  <div style="margin-bottom: 10px;">图片（首张图可用来做栏目列表用）</div>
+                  <div style="margin-bottom: 10px;">首图（如果为空，默认文章内容第一张图）</div>
                   <div class="flex gap-3">
-                    <el-button type="success" plain icon="folder" @click="handleChooseImg">媒体库</el-button>
+                    <el-button type="success" plain icon="folder" @click="handleChooseImg">从内容选择</el-button>
                     <upload-common class="upload-btn-media-library" category="article_imgs"
                       @on-success="handleImgUpload" />
                   </div>
                 </template>
-                <div class="gva-media-card">
-                  <div v-for="(item, key) in imgFileList" :key="key" class="media-box">
-                    <el-image :key="key" :src="getUrl(item.url)" fit="cover" :preview-src-list="[getUrl(item.url)]"
-                      hide-on-click-modal style="width: 138px; height: 138px;">
-                      <template #error>
-                        <el-icon>
-                          <picture />
-                        </el-icon>
-                      </template>
-                    </el-image>
-                    <div class="img-title">
-                      <el-button size="small" type="default" icon="delete" @click="handleImgRemove(item)">删除</el-button>
-                    </div>
-                  </div>
+                <div class="gva-media-card" v-if="editForm.mainImg">
+                  <el-image :src="editForm.mainImg" fit="contain" hide-on-click-modal
+                    style="width: 100%; max-height: 500px; max-width: 500px;">
+                    <template #error>
+                      <el-icon>
+                        <picture />
+                      </el-icon>
+                    </template>
+                  </el-image>
                 </div>
               </el-form-item>
             </el-col>
@@ -128,6 +122,24 @@
       </div>
     </div>
   </el-drawer>
+
+  <el-dialog v-model="imgDialogShow" append-to-body title="选择主图" width="50%" style="min-width: 960px">
+    <div v-if="contentImgList.length > 0" class="gva-media-card">
+      <div v-for="item in contentImgList" class="main-img-box">
+        <el-image :src="item" fit="contain" hide-on-click-modal style="width: 300px; height: 200px;"
+          @click="handleSelectImg(item)">
+          <template #error>
+            <el-icon>
+              <picture />
+            </el-icon>
+          </template>
+        </el-image>
+      </div>
+    </div>
+    <div v-else>
+      <el-empty description="无数据" />
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -270,7 +282,7 @@ const getSourceData = async () => {
 const emptyForm = () => {
   channelIdList.value = []
   categoryIdList.value = []
-  imgFileList.value = []
+  // imgFileList.value = []
   tagList.value = []
   editForm.value = {
     ID: 0,
@@ -329,9 +341,9 @@ const initFormByArticle = async (id) => {
     const { categories, channels, imgs, tags } = res.data.article
     categoryIdList.value = categories && categories.map(item => String(item.ID))
     channelIdList.value = channels && channels.map(item => String(item.ID))
-    if (imgs && (imgs !== '')) {
-      imgFileList.value = JSON.parse(imgs)
-    }
+    // if (imgs && (imgs !== '')) {
+    //   imgFileList.value = JSON.parse(imgs)
+    // }
     if (tags !== '') {
       tagList.value = tags.split(',')
     }
@@ -370,29 +382,57 @@ const initFormByFetcher = async (id) => {
 }
 
 // ----  以下为图片相关操作  ----
-const chooseImg = ref(null)
-const imgFileList = ref([])
+const imgDialogShow = ref(false)
+const contentImgList = ref([])
 const handleChooseImg = () => {
-  chooseImg.value.open()
-  return false
+  contentImgList.value = []
+  const htmlData = contentEditorRef.value.getHtml()
+  console.log(htmlData)
+  const imgSrcs = htmlData.match(/<img [^>]*src=['"]([^'"]+)[^>]*>/g);
+  if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {
+    imgSrcs.forEach(item => {
+      // console.log(item)
+      let src = item.match(/src=['"]([^'"]+)['"]/)
+      if (!src) {
+        return
+      }
+      // console.log(src)
+      contentImgList.value.push(src[1])
+    })
+  }
+  console.log(contentImgList.value)
+  imgDialogShow.value = true
 }
-const handleSelectImg = (file) => {
-  imgFileList.value.push({
-    key: file.key,
-    name: file.name,
-    url: file.url,
-  })
-}
-const handleImgRemove = (file) => {
-  imgFileList.value = imgFileList.value.filter(item => item.key !== file.key)
+const handleSelectImg = (item) => {
+  editForm.value.mainImg = item
+  imgDialogShow.value = false
 }
 const handleImgUpload = (file) => {
-  imgFileList.value.push({
-    key: file.key,
-    name: file.name,
-    url: file.url,
-  })
+  editForm.value.mainImg = file.url
 }
+// const chooseImg = ref(null)
+// const imgFileList = ref([])
+// const handleChooseImg = () => {
+//   chooseImg.value.open()
+//   return false
+// }
+// const handleSelectImg = (file) => {
+//   imgFileList.value.push({
+//     key: file.key,
+//     name: file.name,
+//     url: file.url,
+//   })
+// }
+// const handleImgRemove = (file) => {
+//   imgFileList.value = imgFileList.value.filter(item => item.key !== file.key)
+// }
+// const handleImgUpload = (file) => {
+//   imgFileList.value.push({
+//     key: file.key,
+//     name: file.name,
+//     url: file.url,
+//   })
+// }
 
 // ----  以下为tag相关操作  ----
 const tagInputFlag = ref(false)
@@ -446,7 +486,7 @@ const handleFormSubmit = async valid => {
     const rel = {
       categoryIds: categoryIdList.value.map(item => parseInt(item, 10)),
       channelIds: channelIdList.value.map(item => parseInt(item, 10)),
-      imgList: imgFileList.value,
+      // imgList: imgFileList.value,
       tagList: tagList.value,
       fetcherArticleId: fetcherArticleId.value
     }
@@ -476,3 +516,9 @@ const handleFormClose = () => {
 // 对外暴露方法
 defineExpose({ openPage })
 </script>
+
+<style scoped>
+.main-img-box {
+  cursor: default;
+}
+</style>