1

src/views/cms/cmsArticle/components/Import.vue

@@ -0,0 +1,82 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    :width="520"
+    :footer="null"
+    title="文章批量导入"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <a-upload-dragger
+        accept=".xls,.xlsx"
+        :show-upload-list="false"
+        :customRequest="doUpload"
+        style="padding: 24px 0; margin-bottom: 16px"
+      >
+        <p class="ant-upload-drag-icon">
+          <cloud-upload-outlined />
+        </p>
+        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
+      </a-upload-dragger>
+    </a-spin>
+    <div class="ele-text-center">
+      <span>只能上传xls、xlsx文件，导入模板和导出模板格式一致</span>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { CloudUploadOutlined } from '@ant-design/icons-vue';
+  import { importArticles } from '@/api/cms/cmsArticle';
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  defineProps<{
+    // 是否打开弹窗
+    visible: boolean;
+  }>();
+
+  // 导入请求状态
+  const loading = ref(false);
+
+  /* 上传 */
+  const doUpload = ({ file }) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      message.error('只能选择 excel 文件');
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 10) {
+      message.error('大小不能超过 10MB');
+      return false;
+    }
+    loading.value = true;
+    importArticles(file)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    return false;
+  };
+
+  /* 更新 visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+</script>

src/views/cms/cmsArticle/components/articleUpdate.vue

@@ -0,0 +1,208 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="600"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="'批量更新'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item>
+        <a-alert :message="'提示：每次最多修改 50000 条数据'" banner />
+      </a-form-item>
+      <a-form-item label="选择栏目">
+        <a-tree-select
+          allow-clear
+          :tree-data="navigationList"
+          tree-default-expand-all
+          style="width: 400px"
+          placeholder="请选择栏目"
+          :value="form.categoryId || undefined"
+          :dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
+          @update:value="(value?: number) => (form.categoryId = value)"
+          @change="onCategoryId"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { updateBatchCmsArticle } from '@/api/cms/cmsArticle';
+  import { CmsArticle } from '@/api/cms/cmsArticle/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
+
+  // 是否是修改
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 表格选中数据
+    selection?: CmsArticle[];
+    // 栏目数据
+    navigationList?: CmsNavigation[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const content = ref('');
+
+  // 用户信息
+  const form = reactive<CmsArticle>({
+    articleId: undefined,
+    // 文章模型
+    model: 'detail',
+    // 封面图
+    image: '',
+    // 文章标题
+    title: '',
+    type: 0,
+    // 展现方式
+    showType: 10,
+    // 文章来源
+    source: '-',
+    // 文章类型
+    categoryId: undefined,
+    // 栏目名称
+    categoryName: undefined,
+    // 文章内容
+    content: '',
+    // 虚拟阅读量
+    virtualViews: 0,
+    // 实际阅读量
+    actualViews: 0,
+    permission: 0,
+    password: undefined,
+    password2: undefined,
+    // 用户ID
+    userId: undefined,
+    files: '',
+    // 排序
+    sortNumber: 100,
+    // 备注
+    comments: undefined,
+    // 状态
+    status: 1,
+    // 创建时间
+    createTime: '',
+    // 更新时间
+    updateTime: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    title: [
+      {
+        required: true,
+        message: '请选择文章标题',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    categoryId: [
+      {
+        required: true,
+        message: '请选择栏目',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ],
+    content: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入文章内容',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (content.value == '') {
+            return Promise.reject('请输入文字内容');
+          }
+          return Promise.resolve();
+        }
+      }
+    ]
+  });
+
+  // 选择栏目
+  const onCategoryId = (id: number) => {
+    console.log(id);
+    form.categoryId = id;
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        props.selection?.map((d) => d.articleId);
+        updateBatchCmsArticle({
+          ids: props.selection?.map((d) => d.articleId),
+          data: {
+            categoryId: form.categoryId
+          }
+        })
+          .then((msg) => {
+            message.success(msg);
+            loading.value = false;
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/cms/cmsArticle/components/search.vue

@@ -0,0 +1,329 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+    <a-button
+      danger
+      type="primary"
+      class="ele-btn-icon"
+      :disabled="selection?.length === 0"
+      @click="removeBatch"
+    >
+      <template #icon>
+        <DeleteOutlined />
+      </template>
+      <span>批量删除</span>
+    </a-button>
+    <a-button
+      type="primary"
+      :disabled="selection?.length === 0"
+      @click="updateBatch"
+    >
+      移动
+    </a-button>
+    <a-radio-group
+      v-model:value="type"
+      @change="handleSearch"
+      v-if="setting.setting?.articleReview"
+    >
+      <a-radio-button type="text" value="已发布"
+        >已发布({{ articleCount?.totalNum }})
+      </a-radio-button>
+      <a-radio-button value="待审核"
+        >待审核({{ articleCount?.totalNum2 }})
+      </a-radio-button>
+      <a-radio-button value="已驳回"
+        >已驳回({{ articleCount?.totalNum3 }})
+      </a-radio-button>
+    </a-radio-group>
+    <a-tree-select
+      allow-clear
+      :tree-data="navigationList"
+      tree-default-expand-all
+      style="width: 240px"
+      :listHeight="700"
+      placeholder="请选择栏目"
+      :value="where.categoryId || undefined"
+      :dropdown-style="{ overflow: 'auto' }"
+      @update:value="(value?: number) => (where.categoryId = value)"
+      @change="onCategoryId"
+    />
+    <ChooseDictionary
+      v-if="showChooseDict"
+      dict-code="NavigationModel"
+      :placeholder="`选择模型`"
+      style="width: 120px"
+      v-model:value="where.model"
+      @done="chooseModel"
+    />
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      style="width: 240px"
+      v-model:value="where.keywords"
+      @search="reload"
+    />
+    <a-button type="text" @click="reset">重置</a-button>
+    <a-button type="text" @click="handleExport">导出xls</a-button>
+    <a-button type="text" @click="openImport">导入xls</a-button>
+  </a-space>
+
+  <!-- 导入弹窗 -->
+  <import v-model:visible="showImport" @done="reload" />
+</template>
+
+<script lang="ts" setup>
+  import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { utils, writeFile } from 'xlsx';
+  import { getCount, listCmsArticle } from '@/api/cms/cmsArticle';
+  import type {
+    CmsArticle,
+    CmsArticleCount,
+    CmsArticleParam
+  } from '@/api/cms/cmsArticle/model';
+  import useSearch from '@/utils/use-search';
+  import { CmsNavigation } from '@/api/cms/cmsNavigation/model';
+  import dayjs from 'dayjs';
+  import Import from './Import.vue';
+  import { useWebsiteSettingStore } from '@/store/modules/setting';
+  import { openUrl } from '@/utils/common';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: CmsArticle[];
+      merchantId?: number;
+      navigationList?: CmsNavigation[];
+      categoryId?: number;
+    }>(),
+    {}
+  );
+
+  const type = ref<string>();
+  const setting = useWebsiteSettingStore();
+  // 统计数据
+  const articleCount = ref<CmsArticleCount>();
+  const showChooseDict = ref<boolean>(false);
+  // 请求状态
+  const loading = ref(false);
+  const xlsFileName = ref<string>();
+  const articleList = ref<CmsArticle[]>([]);
+  // 是否显示用户导入弹窗
+  const showImport = ref(false);
+
+  // 表单数据
+  const { where, resetFields } = useSearch<CmsArticleParam>({
+    articleId: undefined,
+    model: undefined,
+    categoryId: undefined,
+    merchantId: undefined,
+    keywords: '',
+    sceneType: undefined,
+    userId: undefined
+  });
+
+  const emit = defineEmits<{
+    (e: 'search', where?: CmsArticleParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  // 批量删除
+  const removeBatch = () => {
+    emit('remove');
+  };
+
+  // 批量更新
+  const updateBatch = () => {
+    emit('batchMove');
+  };
+
+  /* 打开编辑弹窗 */
+  const openImport = () => {
+    showImport.value = true;
+  };
+
+  const handleSearch = (e) => {
+    const text = e.target.value;
+    if (text === '已发布') {
+      where.status = 0;
+    }
+    if (text === '待审核') {
+      where.status = 1;
+    }
+    if (text === '已驳回') {
+      where.status = 2;
+    }
+    emit('search', where);
+  };
+
+  const reload = () => {
+    getCount(where).then((data: any) => {
+      articleCount.value = data;
+    });
+    emit('search', where);
+  };
+
+  // 按模型查找
+  const chooseModel = () => {
+    emit('search', where);
+  };
+
+  // 按分类查询
+  const onCategoryId = (id: number) => {
+    where.categoryId = id;
+    emit('search', where);
+  };
+
+  // 导出
+  const handleExport = async () => {
+    loading.value = true;
+    const array: (string | number)[][] = [
+      [
+        '文章ID',
+        '文章标题',
+        '封面图片',
+        '所属栏目',
+        '栏目ID',
+        '父级栏目名称',
+        '父级栏目ID',
+        '文章内容',
+        '摘要',
+        '来源',
+        '实际阅读量',
+        '作者',
+        '发布时间',
+        '类型',
+        '模型',
+        '详情页模板',
+        '话题',
+        '关键词',
+        '产品概述',
+        '显示方式',
+        '客户端',
+        '文件列表',
+        '视频地址',
+        '点赞数',
+        '评论数',
+        '推荐',
+        '用户ID',
+        '商户ID',
+        '语言',
+        '排序',
+        `状态`,
+        '租户ID'
+      ]
+    ];
+
+    // 按搜索结果导出
+    where.sceneType = 'Content';
+    await listCmsArticle(where)
+      .then((list) => {
+        articleList.value = list;
+        list?.forEach((d: CmsArticle) => {
+          array.push([
+            `${d.articleId}`,
+            `${d.title}`,
+            `${d.image}`,
+            `${d.categoryName}`,
+            `${d.categoryId}`,
+            `${d.parentName}`,
+            `${d.parentId}`,
+            `${d.content}`,
+            `${d.comments}`,
+            `${d.source}`,
+            `${d.actualViews}`,
+            `${d.author}`,
+            `${d.createTime}`,
+            `${d.type}`,
+            `${d.model}`,
+            `${d.detail}`,
+            `${d.topic}`,
+            `${d.tags}`,
+            `${d.overview}`,
+            `${d.showType}`,
+            `${d.platform}`,
+            `${d.files}`,
+            `${d.video}`,
+            `${d.likes}`,
+            `${d.commentNumbers}`,
+            `${d.recommend}`,
+            `${d.userId}`,
+            `${d.merchantId}`,
+            `${d.lang}`,
+            `${d.sortNumber}`,
+            `${d.status}`,
+            `${d.tenantId}`
+          ]);
+        });
+        const sheetName = `导出文章列表${dayjs(new Date()).format('YYYYMMDD')}`;
+        const workbook = {
+          SheetNames: [sheetName],
+          Sheets: {}
+        };
+        const sheet = utils.aoa_to_sheet(array);
+        workbook.Sheets[sheetName] = sheet;
+        // 设置列宽
+        sheet['!cols'] = [
+          { wch: 10 },
+          { wch: 40 },
+          { wch: 20 },
+          { wch: 20 },
+          { wch: 60 },
+          { wch: 15 },
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 20 },
+          { wch: 10 },
+          { wch: 20 }
+        ];
+        message.loading('正在导出...');
+        setTimeout(() => {
+          writeFile(
+            workbook,
+            `${
+              where.createTimeEnd ? xlsFileName.value + '_' : ''
+            }${sheetName}.xlsx`
+          );
+          loading.value = false;
+        }, 1000);
+      })
+      .catch((msg) => {
+        message.error(msg);
+        loading.value = false;
+      })
+      .finally(() => {});
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    type.value = undefined;
+    reload();
+    openUrl(`/website/article`);
+  };
+
+  watch(
+    () => props.merchantId,
+    () => {
+      if (props.categoryId) {
+        where.categoryId = props.categoryId;
+      }
+      reload();
+    },
+    { immediate: true }
+  );
+</script>