iot-device-management-frontend/apps/web-antd/src/views/mp/components/wx-material-select/main.vue

<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { reactive, ref, watch } from 'vue';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Button, Pagination, Row, Spin } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as MpDraftApi from '#/api/mp/draft';
import * as MpFreePublishApi from '#/api/mp/freePublish';
import * as MpMaterialApi from '#/api/mp/material';
import { WxNews } from '#/views/mp/components/wx-news';
import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';

import { NewsType } from './types';

defineOptions({ name: 'WxMaterialSelect' });

const props = withDefaults(
  defineProps<{
    accountId: number;
    newsType?: NewsType;
    type: string;
  }>(),
  {
    newsType: NewsType.Published,
  },
);

const emit = defineEmits<{
  (e: 'selectMaterial', item: any): void;
}>();

// 遮罩层
const loading = ref(false);
// 总条数
const total = ref(0);
// 数据列表
const list = ref<any[]>([]);
// 查询参数
const queryParams = reactive({
  accountId: props.accountId,
  pageNo: 1,
  pageSize: 10,
});

const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
  {
    field: 'mediaId',
    title: '编号',
    align: 'center',
    minWidth: 160,
  },
  {
    field: 'name',
    title: '文件名',
    minWidth: 200,
  },
  {
    field: 'voice',
    title: '语音',
    minWidth: 200,
    align: 'center',
    slots: { default: 'voice' },
  },
  {
    field: 'createTime',
    title: '上传时间',
    width: 180,
    formatter: 'formatDateTime',
  },
  {
    title: '操作',
    width: 140,
    fixed: 'right',
    align: 'center',
    slots: { default: 'actions' },
  },
];

const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
  {
    field: 'mediaId',
    title: '编号',
    minWidth: 160,
  },
  {
    field: 'name',
    title: '文件名',
    minWidth: 200,
  },
  {
    field: 'title',
    title: '标题',
    minWidth: 200,
  },
  {
    field: 'introduction',
    title: '介绍',
    minWidth: 220,
  },
  {
    field: 'video',
    title: '视频',
    minWidth: 220,
    align: 'center',
    slots: { default: 'video' },
  },
  {
    field: 'createTime',
    title: '上传时间',
    width: 180,
    formatter: 'formatDateTime',
  },
  {
    title: '操作',
    width: 140,
    fixed: 'right',
    align: 'center',
    slots: { default: 'actions' },
  },
];

const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
  gridOptions: {
    border: true,
    columns: voiceGridColumns,
    height: 'auto',
    keepSource: true,
    pagerConfig: {
      enabled: true,
      pageSize: 10,
    },
    proxyConfig: {
      ajax: {
        query: async ({ page }, { accountId }) => {
          const finalAccountId = accountId ?? queryParams.accountId;
          if (finalAccountId === undefined || finalAccountId === null) {
            return { list: [], total: 0 };
          }
          return await MpMaterialApi.getMaterialPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            accountId: finalAccountId,
            type: 'voice',
          });
        },
      },
    },
    rowConfig: {
      keyField: 'mediaId',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
    },
  } as VxeTableGridOptions<any>,
});

const [VideoGrid, videoGridApi] = useVbenVxeGrid({
  gridOptions: {
    border: true,
    columns: videoGridColumns,
    height: 'auto',
    keepSource: true,
    pagerConfig: {
      enabled: true,
      pageSize: 10,
    },
    proxyConfig: {
      ajax: {
        query: async ({ page }, { accountId }) => {
          const finalAccountId = accountId ?? queryParams.accountId;
          if (finalAccountId === undefined || finalAccountId === null) {
            return { list: [], total: 0 };
          }
          return await MpMaterialApi.getMaterialPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            accountId: finalAccountId,
            type: 'video',
          });
        },
      },
    },
    rowConfig: {
      keyField: 'mediaId',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
    },
  } as VxeTableGridOptions<any>,
});

function selectMaterialFun(item: any) {
  emit('selectMaterial', item);
}

async function getMaterialPageFun() {
  const data = await MpMaterialApi.getMaterialPage({
    ...queryParams,
    type: props.type,
  });
  list.value = data.list;
  total.value = data.total;
}

async function getFreePublishPageFun() {
  const data = await MpFreePublishApi.getFreePublishPage(queryParams);
  data.list.forEach((item: any) => {
    const articles = item.content.newsItem;
    articles.forEach((article: any) => {
      article.picUrl = article.thumbUrl;
    });
  });
  list.value = data.list;
  total.value = data.total;
}

async function getDraftPageFun() {
  const data = await MpDraftApi.getDraftPage(queryParams);
  data.list.forEach((draft: any) => {
    const articles = draft.content.newsItem;
    articles.forEach((article: any) => {
      article.picUrl = article.thumbUrl;
    });
  });
  list.value = data.list;
  total.value = data.total;
}

async function getPage() {
  if (props.type === 'voice') {
    await voiceGridApi.reload({ accountId: queryParams.accountId });
    return;
  }
  if (props.type === 'video') {
    await videoGridApi.reload({ accountId: queryParams.accountId });
    return;
  }

  loading.value = true;
  try {
    if (props.type === 'news' && props.newsType === NewsType.Published) {
      await getFreePublishPageFun();
    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
      await getDraftPageFun();
    } else {
      await getMaterialPageFun();
    }
  } finally {
    loading.value = false;
  }
}

watch(
  () => props.accountId,
  (accountId) => {
    queryParams.accountId = accountId;
    queryParams.pageNo = 1;
    getPage();
  },
  { immediate: true },
);

watch(
  () => props.type,
  () => {
    queryParams.pageNo = 1;
    getPage();
  },
);

watch(
  () => props.newsType,
  () => {
    if (props.type === 'news') {
      queryParams.pageNo = 1;
      getPage();
    }
  },
);
</script>

<template>
  <Page :bordered="false" class="pb-8">
    <!-- 类型：image -->
    <template v-if="props.type === 'image'">
      <Spin :spinning="loading">
        <div class="waterfall">
          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
            <img class="material-img" :src="item.url" alt="素材图片" />
            <p class="item-name">{{ item.name }}</p>
            <Row class="ope-row">
              <Button type="primary" @click="selectMaterialFun(item)">
                选择
                <template #icon>
                  <IconifyIcon icon="mdi:check-circle" />
                </template>
              </Button>
            </Row>
          </div>
        </div>
      </Spin>
      <Pagination
        v-model:current="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        class="mt-4"
        @change="getPage"
        @show-size-change="getPage"
      />
    </template>

    <!-- 类型：voice -->
    <template v-else-if="props.type === 'voice'">
      <VoiceGrid>
        <template #voice="{ row }">
          <WxVoicePlayer :url="row.url" />
        </template>
        <template #actions="{ row }">
          <Button type="link" @click="selectMaterialFun(row)">
            选择
            <template #icon>
              <IconifyIcon icon="mdi:plus" />
            </template>
          </Button>
        </template>
      </VoiceGrid>
    </template>

    <!-- 类型：video -->
    <template v-else-if="props.type === 'video'">
      <VideoGrid>
        <template #video="{ row }">
          <WxVideoPlayer :url="row.url" />
        </template>
        <template #actions="{ row }">
          <Button type="link" @click="selectMaterialFun(row)">
            选择
            <template #icon>
              <IconifyIcon icon="mdi:plus-circle" />
            </template>
          </Button>
        </template>
      </VideoGrid>
    </template>

    <!-- 类型：news -->
    <template v-else-if="props.type === 'news'">
      <Spin :spinning="loading">
        <div class="waterfall">
          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
            <div v-if="item.content && item.content.newsItem">
              <WxNews :articles="item.content.newsItem" />
              <Row class="ope-row">
                <Button type="primary" @click="selectMaterialFun(item)">
                  选择
                  <template #icon>
                    <IconifyIcon icon="mdi:check-circle" />
                  </template>
                </Button>
              </Row>
            </div>
          </div>
        </div>
      </Spin>
      <Pagination
        v-model:current="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        class="mt-4"
        @change="getPage"
        @show-size-change="getPage"
      />
    </template>
  </Page>
</template>

<style lang="scss" scoped>
@media (width >= 992px) and (width <= 1300px) {
  .waterfall {
    column-count: 3;
  }

  p {
    color: red;
  }
}

@media (width >= 768px) and (width <= 991px) {
  .waterfall {
    column-count: 2;
  }

  p {
    color: orange;
  }
}

@media (width <= 767px) {
  .waterfall {
    column-count: 1;
  }
}

.waterfall {
  column-count: 5;
  column-gap: 10px;
  width: 100%;
  margin: 0 auto;
}

.waterfall-item {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #eaeaea;
  break-inside: avoid;
}

.material-img {
  width: 100%;
}

p {
  line-height: 30px;
}

.ope-row {
  padding-top: 10px;
  text-align: center;
}

.item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
</style>