SaaS-lib/nervui-mobile-application/src/view/contentManage/article/index.vue

<!-- @format -->

<template>
  <ns-view-list-table ref="nsTableRef" v-bind="tableConfig" rowKey="uuid" />
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { dateUtil } from '/nerv-lib/saas';
  import { useRouter } from 'vue-router';
  import { http } from '/nerv-lib/util/http';
  import { NsMessage } from '/nerv-lib/component/message';

  export default defineComponent({
    name: 'ArticleIndex',
    setup() {
      const router = useRouter();
      const nsTableRef = ref();

      const request = (api: string, params: object) => {
        http.post(api, params).then(() => {
          NsMessage.success('操作成功');
          nsTableRef.value.nsTableRef.reload();
        });
      };
      const tableConfig = {
        title: '文章管理',
        api: {
          method: 'POST',
          url: '/api/content/objs/admin/cms/bg/article/pageList',
        },
        params: {
          page: 0,
          pageSize: 10,
          folderCode: 'mobileArticleManager',
        },
        formConfig: {
          schemas: [
            {
              field: 'titleLike',
              label: '文章标题',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入',
              },
            },
            {
              field: 'articleStatus',
              label: '状态',
              component: 'NsSelect',
              defaultValue: '',
              componentProps: {
                placeholder: '请选择',
                options: [
                  { label: '全部', value: '' },
                  { label: '未上架', value: 1 },
                  { label: '审核中', value: 2 },
                  { label: '已上架', value: 3 },
                  { label: '未通过', value: 6 },
                ],
              },
            },
            {
              field: 'tagUuidList',
              label: '文章标签',
              component: 'nsSelectApi',
              componentProps: {
                params: { folderCode: 'mobileArticleManager' },
                mode: 'multiple',
                api: '/api/content/objs/admin/cms/bg/articleTag/allList',
                autoSelectFirst: false,
                resultField: 'data',
                labelField: 'tagName',
                valueField: 'uuid',
                immediate: true,
                placeholder: '请选择',
                showSearch: true,
                filterOption: (input, option) => {
                  return option.tagName.indexOf(input) >= 0;
                },
                dropdownReload: true,
              },
            },
          ],
        },
        headerActions: [
          {
            label: '新增文章',
            name: 'ArticleAdd',
            type: 'primary',
            handle: ({}, name) => {
              router.push({ name, query: {} });
            },
          },
        ],
        rowSelection: null,
        columns: [
          {
            title: '文章ID',
            dataIndex: 'articleCode',
            textNumber: 5,
            customRender: ({ record: { articleCommonVO }, column }) => {
              return articleCommonVO[column.dataIndex];
            },
          },
          {
            title: '文章标题',
            dataIndex: 'title',
            textNumber: 5,
            customRender: ({ record: { articleCommonVO }, column }) => {
              return articleCommonVO[column.dataIndex];
            },
          },
          {
            title: '文章标签',
            dataIndex: 'tagNameList',
            textNumber: 5,
            textEllipsis: true,
            customRender: ({ record: { tagNameList }, column }) => {
              return (tagNameList && tagNameList.join(',')) || '-';
            },
          },
          {
            title: '信息来源',
            dataIndex: 'articleSource',
            textNumber: 5,
            customRender: ({ record: { articleCommonVO }, column }) => {
              return articleCommonVO[column.dataIndex];
            },
          },
          {
            title: '上架时间',
            dataIndex: 'publishTime',
            textNumber: 10,
            customRender: ({ record: { articleCommonVO }, column }) => {
              return articleCommonVO[column.dataIndex] || '-';
            },
          },
          {
            title: '状态',
            dataIndex: 'articleStatus',
            textNumber: 5,
            customCell: ({ articleCommonVO: { articleStatus } }) => {
              return {
                style: { color: articleStatus == 3 ? 'green' : articleStatus == 6 ? 'red' : '' },
              };
            },
            customRender: ({ record: { articleCommonVO }, column }) => {
              return ['', '未上架', '待审核', '已上架', '', '', '未通过'][
                articleCommonVO[column.dataIndex]
              ];
            },
          },
          {
            title: '是否置顶',
            textNumber: 4,
            dataIndex: 'isTop',
            customRender: ({ record: { articleCommonVO }, column }) => {
              return ['否', '是'][articleCommonVO[column.dataIndex]];
            },
          },

          {
            title: '创建人',
            dataIndex: 'createUserName',
            textNumber: 5,
            customRender: ({ record: { articleCommonVO }, column }) => {
              return articleCommonVO[column.dataIndex];
            },
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            // textNumber: 9,
            customRender: ({ record: { articleCommonVO }, column }) => {
              return articleCommonVO[column.dataIndex];
            },
          },
        ],
        columnActions: {
          title: '操作',
          autoMergeAction: false,
          actionNumber: 3,
          actions: [
            {
              label: '查看',
              name: 'ArticleDetail',
              ifShow: ({ articleCommonVO: { articleStatus } }) => [2, 3].includes(articleStatus),
              handle: ({ articleCommonVO: { uuid } }, name) => {
                router.push({ name, query: { uuid } });
              },
            },
            {
              label: '编辑',
              name: 'ArticleEdit',
              ifShow: ({ articleCommonVO: { articleStatus } }) => [1, 6].includes(articleStatus),
              handle: ({ articleCommonVO: { uuid } }, name) => {
                router.push({ name, query: { uuid } });
              },
            },
            {
              label: '置顶',
              name: 'ArticleManageTop',
              confirm: true,
              ifShow: ({ articleCommonVO: { articleStatus, isTop } }) =>
                articleStatus == 3 && isTop == 0,
              handle: ({ articleCommonVO: { uuid } }, name) => {
                request('/api/content/objs/admin/cms/bg/article/top', { uuid });
              },
            },
            {
              label: '取消置顶',
              name: 'ArticleManageCancleTop',
              confirm: true,
              ifShow: ({ articleCommonVO: { articleStatus, isTop } }) =>
                articleStatus == 3 && isTop == 1,
              handle: ({ articleCommonVO: { uuid } }, name) => {
                request('/api/content/objs/admin/cms/bg/article/top', { uuid });
              },
            },
            {
              label: '删除',
              dynamicParams: 'uuid',
              name: 'ArticleManageDelete',
              confirm: true,
              ifShow: ({ articleCommonVO: { articleStatus } }) => [1, 6].includes(articleStatus),
              handle: ({ articleCommonVO: { uuid } }, name) => {
                request('/api/content/objs/admin/cms/bg/article/batchDel', { uuids: [uuid] });
              },
            },
            {
              label: '下架',
              dynamicParams: 'uuid',
              name: 'ArticleManageReaded',
              confirm: true,
              ifShow: ({ articleCommonVO: { articleStatus } }) => [3].includes(articleStatus),
              handle: ({ articleCommonVO: { uuid } }, name) => {
                request('/api/content/objs/admin/cms/bg/article/withdrawn', { uuid });
              },
            },
          ],
        },
      };
      return {
        tableConfig,
        nsTableRef,
      };
    },
  });
</script>
<style lang="less" scoped></style>