Initial commit

2023-06-03 23:57:39 +08:00
commit 13bed2bafb
1017 changed files with 175796 additions and 0 deletions
@@ -0,0 +1,162 @@
+<template>
+  <div class="page">
+    <a-card v-if="current" :bordered="false" :title="`${current.title}`">
+      <!-- 编辑器 -->
+      <tinymce-editor
+        v-model:value="content"
+        :disabled="disabled"
+        :init="config"
+      />
+      <div class="ele-text-info" style="margin-top: 10px">
+        <a-space :size="100">
+          <div>文档ID: {{ current.docsId }}</div>
+          <div>预览地址: {{ `/docs?id=${current.docsId}` }}</div>
+          <div>发布时间: {{ current.createTime }}</div>
+        </a-space>
+      </div>
+      <div class="docs-sumbit" v-permission="'cms:docs:update'">
+        <a-space>
+          <a-button type="primary" @click="save">保存</a-button>
+          <!--          <router-link :to="'/content/docs?id=' + current.docsId" @click.stop="">-->
+          <!--            <a-button>预览</a-button>-->
+          <!--          </router-link>-->
+        </a-space>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref, watch } from 'vue';
+  import 'github-markdown-css/github-markdown-light.css';
+  import type { Docs } from '@/api/cms/docs/model';
+  import { message } from 'ant-design-vue';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import {
+    addDocsContent,
+    getDocsContent,
+    updateDocsContent
+  } from '@/api/cms/docs-content';
+  import { DocsContent } from '@/api/cms/docs-content/model';
+
+  const props = defineProps<{
+    // 文档 id
+    current?: Docs | null;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 编辑器内容，双向绑定
+  const content = ref('');
+  const disabled = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  const docsContentId = ref(0);
+
+  const form = reactive<DocsContent>({
+    docsContentId: 0,
+    docsId: 0,
+    content: ''
+  });
+
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 690,
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+        }
+        if (file.size / 1024 / 1024 > 20) {
+          editorRef.value?.alert({ content: '大小不能超过 20MB' });
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          if (e.target?.result != null) {
+            const blob = new Blob([e.target.result], { type: file.type });
+            callback(URL.createObjectURL(blob));
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      };
+      input.click();
+    }
+  });
+
+  /* 搜索 */
+  const reload = () => {
+    getDocsContent(Number(props.current?.docsId))
+      .then((res) => {
+        content.value = String(res.content);
+        docsContentId.value = Number(res.docsContentId);
+        isUpdate.value = true;
+      })
+      .catch(() => {
+        loading.value = false;
+        content.value = '';
+        isUpdate.value = false;
+      });
+  };
+
+  // 保存文档
+  const save = () => {
+    loading.value = true;
+    const docsData = {
+      ...form,
+      docsContentId: docsContentId.value,
+      docsId: props.current?.docsId,
+      content: content.value
+    };
+    const saveOrUpdate = isUpdate.value ? updateDocsContent : addDocsContent;
+    saveOrUpdate(docsData)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  // 监听文档 id 变化
+  watch(
+    () => props.current?.docsId,
+    () => {
+      reload();
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  .sys-category-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-category-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+
+  .docs-sumbit {
+    margin: 10px 0;
+  }
+</style>