Initial commit

2023-06-03 23:57:39 +08:00
commit 13bed2bafb
1017 changed files with 175796 additions and 0 deletions
@@ -0,0 +1,173 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <a-drawer
+    width="60%"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'文章预览'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <a-form
+      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
+    >
+      <div class="base-form" style="margin-bottom: 20px">
+        <div class="card-head">
+          <h2>{{ record.title }}</h2>
+        </div>
+        <div class="card-desc">
+          <a-descriptions :column="4" :labelStyle="{ color: '#999999' }">
+            <a-descriptions-item label="作者">
+              <a-tooltip :title="`${record.nickname}`">
+                <a-avatar :src="record.userAvatar" size="small" />
+                {{ record.nickname }}
+              </a-tooltip>
+            </a-descriptions-item>
+            <a-descriptions-item label="文章ID">
+              <span>{{ record.articleId }}</span>
+            </a-descriptions-item>
+            <a-descriptions-item label="来源">
+              <span>{{ record.source }}</span>
+            </a-descriptions-item>
+            <a-descriptions-item label="发布时间">
+              <span>{{ timeAgo(record.createTime) }}</span>
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+        <div class="content">
+          <!-- 编辑器 -->
+          <tinymce-editor
+            v-model:value="record.content"
+            :disabled="disabled"
+            :init="config"
+          />
+        </div>
+      </div>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { timeAgo } from 'ele-admin-pro';
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import type { Article } from '@/api/cms/article/model';
+  import { FILE_SERVER } from '@/config/setting';
+  import TinymceEditor from '@/components/TinymceEditor/index.vue';
+  import { getArticle } from "@/api/cms/article";
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Article | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 文章信息
+  const record = reactive<Article>({
+    // 文章id
+    articleId: 0,
+    // 文章标题
+    title: '',
+    // 文章类型
+    categoryId: 0,
+    // 封面图
+    avatar: '',
+    // 文章内容
+    content: '',
+    // 虚拟阅读量
+    virtualViews: '',
+    // 实际阅读量
+    actualViews: '',
+    // 文章来源
+    source: '',
+    // 用户ID
+    userId: '',
+    nickname: '',
+    userAvatar: '',
+    // 所属门店ID
+    shopId: '',
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: '',
+    // 状态
+    status: 0,
+    // 创建时间
+    createTime: '',
+    // 更新时间
+    updateTime: ''
+  });
+
+  // 请求状态
+  const loading = ref(true);
+  const { resetFields } = useForm(record);
+  const disabled = ref(true);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 打开外部链接 */
+  const openUrl = (record) => {
+    window.open(record.panel);
+  };
+
+  const config = ref({
+    toolbar: false,
+    menubar: false,
+    height: 620,
+    darkTheme: true,
+    inline: true
+    // quickbars_insert_toolbar: false
+  });
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          getArticle(Number(props.data.articleId)).then((data) => {
+            assignObject(record, data);
+          });
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less">
+  .tab-pane {
+    min-height: 100px;
+  }
+  .card-head {
+    display: flex;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+  .base-form {
+    .card-desc {
+      color: #e3e3e3;
+    }
+    .content {
+      margin-top: 20px;
+      line-height: 2em;
+      font-size: 17px;
+      color: #333333;
+    }
+  }
+</style>