From e0b85aae8f815b0fe1674e138966134ecd35bc45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Tue, 23 Jul 2024 11:39:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=BD=AF=E4=BB=B6=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../version/components/version-edit.vue       |  85 ++++-
 src/views/system/version/index.vue            | 298 ++++++++++--------
 2 files changed, 233 insertions(+), 150 deletions(-)

diff --git a/src/views/system/version/components/version-edit.vue b/src/views/system/version/components/version-edit.vue
index 644d8d3..102a816 100644
--- a/src/views/system/version/components/version-edit.vue
+++ b/src/views/system/version/components/version-edit.vue
@@ -1,7 +1,7 @@
 <!-- 角色编辑弹窗 -->
 <template>
   <ele-modal
-    :width="460"
+    :width="800"
     :visible="visible"
     :confirm-loading="loading"
     :title="isUpdate ? '修改版本' : '更新版本'"
@@ -34,13 +34,25 @@
       <a-form-item label="版本号" name="versionCode">
         <a-input placeholder="100" v-model:value="form.versionCode" />
       </a-form-item>
-      <a-form-item label="更新日志">
-        <a-textarea
-          :rows="4"
-          :maxlength="200"
-          placeholder="请输入更新日志"
-          v-model:value="form.updateInfo"
+      <a-form-item label="更新日志" name="updateInfo">
+        <!-- 编辑器 -->
+        <byte-md-editor
+          v-model:value="content"
+          placeholder="请描述您的问题，支持图片粘贴"
+          :locale="zh_Hans"
+          :plugins="plugins"
+          mode="tab"
+          height="300px"
+          maxLength="500"
+          :editorConfig="{ lineNumbers: true }"
+          @paste="onPaste"
         />
+<!--        <a-textarea-->
+<!--          :rows="4"-->
+<!--          :maxlength="200"-->
+<!--          placeholder="请输入更新日志"-->
+<!--          v-model:value="form.updateInfo"-->
+<!--        />-->
       </a-form-item>
     </a-form>
   </ele-modal>
@@ -55,9 +67,15 @@
   import useFormData from '@/utils/use-form-data';
   import { UploadOutlined } from '@ant-design/icons-vue';
   import { messageLoading } from 'ele-admin-pro';
-  import { uploadFileLocal } from '@/api/system/file';
   import { Version } from '@/api/system/version/model';
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
   import { addVersion, updateVersion } from '@/api/system/version';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
+  import highlight from "@bytemd/plugin-highlight";
+  import gfm from "@bytemd/plugin-gfm";
+  import { uploadOss } from "@/api/system/file";
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -84,6 +102,10 @@
   // 提交状态
   const loading = ref(false);
 
+  const content = ref('');
+
+  const files = ref<ItemType[]>([]);
+
   // 表单数据
   const { form, resetFields, assignFields } = useFormData<Version>({
     id: undefined,
@@ -124,6 +146,14 @@
     ]
   });
 
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
   /* 保存编辑 */
   const save = () => {
     if (!formRef.value) {
@@ -135,7 +165,11 @@
         loading.value = true;
         const saveOrUpdate = isUpdate.value ? updateVersion : addVersion;
         console.log(form);
-        saveOrUpdate(form)
+        const data = {
+          ...form,
+          updateInfo: content.value
+        };
+        saveOrUpdate(data)
           .then((msg) => {
             loading.value = false;
             message.success(msg);
@@ -166,7 +200,7 @@
       duration: 0,
       mask: true
     });
-    uploadFileLocal(file, 5)
+    uploadOss(file)
       .then((res) => {
         console.log(res);
         hide();
@@ -182,12 +216,43 @@
     return false;
   };
 
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadOss(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
   watch(
     () => props.visible,
     (visible) => {
       if (visible) {
         if (props.data) {
           assignFields(props.data);
+          if(props.data.updateInfo){
+            content.value = props.data.updateInfo;
+          }
           isUpdate.value = true;
         } else {
           isUpdate.value = false;
diff --git a/src/views/system/version/index.vue b/src/views/system/version/index.vue
index bf6d022..83d2d47 100644
--- a/src/views/system/version/index.vue
+++ b/src/views/system/version/index.vue
@@ -32,7 +32,7 @@
             <a-timeline-item v-for="(item,index) in list" :key="index" :color="index == 0 ? 'blue' : 'gray'">
               <div class="version-name">
                 <span class="title ele-text-heading">{{ item.versionName }}</span>
-                <span class="time ele-text-placeholder">{{ toDateString(item.createTime, 'YYYY-MM-dd') }}</span>
+                <span class="time ele-text-placeholder">{{ toDateString(item.createTime, "YYYY-MM-dd") }}</span>
                 <a-space :size="12">
                   <template v-if="hasRole('superAdmin') || hasRole('admin')">
                     <a @click="download(item)">下载</a>
@@ -52,8 +52,8 @@
                 </a-space>
               </div>
               <a-typography-text>
-                <div class="update-info ele-text-secondary" v-html="item.updateInfo"></div>
-
+<!--                <div class="update-info ele-text-secondary" v-html="item.updateInfo"></div>-->
+                <byte-md-viewer :value="item.updateInfo" :plugins="plugins" />
               </a-typography-text>
             </a-timeline-item>
           </a-timeline>
@@ -65,157 +65,175 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, computed} from 'vue';
-  import {message} from "ant-design-vue";
-  import { storeToRefs } from 'pinia';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { getCompany, updateCompany } from "@/api/system/company";
-  import {assignObject, toDateString} from 'ele-admin-pro';
-  import { Company } from '@/api/system/company/model';
-  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
-  import { uploadFile } from "@/api/system/file";
-  import {useTenantStore} from "@/store/modules/tenant";
-  import {listVersion, removeVersion} from "@/api/system/version";
-  import {Version} from "@/api/system/version/model";
-  import versionEdit from './components/version-edit.vue';
-  import {messageLoading} from "ele-admin-pro/es";
-  import {openNew} from "@/utils/common";
-import {onClone} from "@/utils/plug-uitl";
-import {hasRole} from "@/utils/permission";
+import { ref, reactive, computed } from "vue";
+import { message } from "ant-design-vue";
+import { storeToRefs } from "pinia";
+import { useThemeStore } from "@/store/modules/theme";
+import { getCompany, updateCompany } from "@/api/system/company";
+import { assignObject, toDateString } from "ele-admin-pro";
+import { Company } from "@/api/system/company/model";
+import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+import { uploadFile } from "@/api/system/file";
+import { useTenantStore } from "@/store/modules/tenant";
+import { listVersion, removeVersion } from "@/api/system/version";
+import { Version } from "@/api/system/version/model";
+import versionEdit from "./components/version-edit.vue";
+import { messageLoading } from "ele-admin-pro/es";
+import { openNew } from "@/utils/common";
+import { onClone } from "@/utils/plug-uitl";
+import { hasRole } from "@/utils/permission";
+// 中文语言文件
+import zh_Hans from "bytemd/locales/zh_Hans.json";
+import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
+import highlight from "@bytemd/plugin-highlight";
+import gfm from "@bytemd/plugin-gfm";
+import { uploadOss } from "@/api/system/file";
 
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
-  const tenantStore = useTenantStore();
-  // tab 页选中
-  const active = ref('info');
-  // 保存按钮 loading
-  const loading = ref(false);
-  // 是否显示裁剪弹窗
-  const visible = ref(false);
-  const title = ref('');
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 当前编辑数据
-  const current = ref<Version | null>(null);
-  const list = ref<Version[]>([]);
-  // 当前版本
-  const versionName = ref<string>('');
-  // 登录用户信息
-  const company = computed(() => tenantStore.company ?? {});
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const { styleResponsive } = storeToRefs(themeStore);
+const tenantStore = useTenantStore();
+// tab 页选中
+const active = ref("info");
+// 保存按钮 loading
+const loading = ref(false);
+// 是否显示裁剪弹窗
+const visible = ref(false);
+const title = ref("");
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 当前编辑数据
+const current = ref<Version | null>(null);
+const list = ref<Version[]>([]);
+// 当前版本
+const versionName = ref<string>("");
+// 登录用户信息
+const company = computed(() => tenantStore.company ?? {});
 
-  // 表单数据
-  const form = reactive<Company>({
-    companyId: undefined,
-    shortName: '',
-    companyName: '',
-    companyType: undefined,
-    companyLogo: '',
-    domain: '',
-    version: undefined,
-    versionName: '',
-    versionCode: '',
-    createTime: '',
-    updateTime: ''
-  });
+// 表单数据
+const form = reactive<Company>({
+  companyId: undefined,
+  shortName: "",
+  companyName: "",
+  companyType: undefined,
+  companyLogo: "",
+  domain: "",
+  version: undefined,
+  versionName: "",
+  versionCode: "",
+  createTime: "",
+  updateTime: ""
+});
 
-  const download = (row?: Version) => {
-    if (row?.vueDownloadUrl) {
-      openNew(row?.vueDownloadUrl);
-    }
+// 插件
+const plugins = ref([
+  gfm({
+    locale: zh_HansGfm
+  }),
+  highlight()
+]);
+
+const download = (row?: Version) => {
+  if (row?.vueDownloadUrl) {
+    openNew(row?.vueDownloadUrl);
   }
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: Version) => {
-    current.value = row ?? null;
-    showEdit.value = true;
-  };
+/* 打开编辑弹窗 */
+const openEdit = (row?: Version) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
 
-  /* 删除单个 */
-  const remove = (row: Version) => {
-    const hide = messageLoading('请求中..', 0);
-    removeVersion(row.id)
-      .then((msg) => {
-        hide();
-        message.success(msg);
-        query();
-      })
-      .catch((e) => {
-        hide();
-        message.error(e.message);
-      });
-  };
-
-  const update = () => {
-    company.value.tenantId = 5;
-    company.value.tenantName = '最新版本'
-    onClone(company.value);
-  }
-
-
-  const onUpload = (d: ItemType) => {
-    const file = d.file;
-    if(file){
-      if (file.size / 1024 > 100) {
-        message.error('大小不能超过 100k');
-        return;
-      }
-    }
-    uploadFile(<File>d.file)
-      .then((result) => {
-        form.companyLogo = result.url;
-        updateCompany(form).then(res => {
-          message.success('上传成功');
-        })
-
-      })
-      .catch((e) => {
-        message.error(e.message);
-      });
-  };
-
-  const query = () => {
-    listVersion({}).then(data => {
-      if (data) {
-        list.value = data;
-        list.value.map((d,i) => {
-          const tenantId = localStorage.getItem('TenantId');
-          if(i == 0){
-            versionName.value = `${d.versionName}`;
-          }
-        })
-      }
+/* 删除单个 */
+const remove = (row: Version) => {
+  const hide = messageLoading("请求中..", 0);
+  removeVersion(row.id)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      query();
     })
-    getCompany().then((response) => {
-      assignObject(form, response);
+    .catch((e) => {
+      hide();
+      message.error(e.message);
     });
-  };
+};
 
-  query();
+const update = () => {
+  company.value.tenantId = 5;
+  company.value.tenantName = "最新版本";
+  onClone(company.value);
+};
+
+
+const onUpload = (d: ItemType) => {
+  const file = d.file;
+  if (file) {
+    if (file.size / 1024 > 100) {
+      message.error("大小不能超过 100k");
+      return;
+    }
+  }
+  uploadFile(<File>d.file)
+    .then((result) => {
+      form.companyLogo = result.url;
+      updateCompany(form).then(res => {
+        message.success("上传成功");
+      });
+
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+};
+
+const query = () => {
+  listVersion({}).then(data => {
+    if (data) {
+      list.value = data;
+      list.value.map((d, i) => {
+        const tenantId = localStorage.getItem("TenantId");
+        if (i == 0) {
+          versionName.value = `${d.versionName}`;
+        }
+      });
+    }
+  });
+  getCompany().then((response) => {
+    assignObject(form, response);
+  });
+};
+
+query();
 </script>
 
 <script lang="ts">
-  export default {
-    name: 'SystemVersion'
-  };
+export default {
+  name: "SystemVersion"
+};
 </script>
 <style>
-  .justify{
-    display: flex !important;
-    justify-content: space-between;
+.justify {
+  display: flex !important;
+  justify-content: space-between;
+}
+
+.update-info {
+  max-width: 600px;
+}
+
+.version-name {
+  .ele-text-heading {
+    font-weight: bold;
+    font-size: 16px;
+    margin-right: 10px;
   }
-  .update-info{
-    max-width: 600px;
-  }
-  .version-name{
-    .ele-text-heading{
-      font-weight: bold;
-      font-size: 16px;
-      margin-right: 10px;
-    }
-    margin-bottom: 10px;
-    .time{
-      margin-right: 20px;
-    }
+
+  margin-bottom: 10px;
+
+  .time {
+    margin-right: 20px;
   }
+}
 </style>