manage-project-table.vue 3.08 KB
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { AnyObject } from '@/types/global';
  import useProjectApi from '@/http/project';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';

  const props = defineProps<{ userKey: number }>();

  const tableRef = ref();
  const { loading, setLoading } = useLoading(false);
  const filter = ref({ name: '', is_promote: '', tag_name: '', status: '' });

  const { statusOption } = useProjectApi;

  const total = ref(0);

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    useProjectApi.get({ manager: props.userKey, pageSize: 1 }).then(({ meta }) => (total.value = meta.total));

    return useProjectApi
      .get({
        manager: props.userKey,
        ...filter.value,
        ...params,
        setWithCount: ['activities', 'activity_up', 'activity_match', 'activity_down', 'activity_send', 'manage', 'member'],
        sortBy: 'id',
        sortType: 'desc',
      })
      .finally(() => setLoading(false));
  };

  const onSearch = () => tableRef.value?.onPageChange(1);

  const onReset = () => {
    filter.value = { name: '', is_promote: '', tag_name: '', status: '' };
    onSearch();
  };

  onMounted(() => onReset());

  defineExpose({ total });
</script>

<template>
  <a-card :bordered="false">
    <filter-search :model="filter" :loading="loading" inline @search="onSearch" @reset="onReset">
      <filter-search-item label="厂牌名称" filed="name">
        <a-input v-model="filter.name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item label="状态">
        <a-select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
      </filter-search-item>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
      <user-table-column data-index="id" nick-index="name" avatar-index="cover" title="厂牌名称" show-avatar :width="200" />
      <filter-table-column data-index="intro" title="简介" :width="200" />
      <number-table-column data-index="activities_count" title="试唱歌曲总数" :width="100" :dark-value="0" />
      <number-table-column data-index="activity_up_count" title="试唱进行中" :width="100" :dark-value="0" />
      <number-table-column data-index="activity_match_count" title="试唱已匹配" :width="100" :dark-value="0" />
      <number-table-column data-index="activity_down_count" title="试唱已下架" :width="100" :dark-value="0" />
      <number-table-column data-index="activity_send_count" title="歌曲已发行" :width="100" :dark-value="0" />
      <number-table-column data-index="manage_count" title="管理员人数" :width="100" :dark-value="0" />
      <enum-table-column data-index="status" title="状态" :width="70" :option="statusOption" :dark-value="0" />
    </filter-table>
  </a-card>
</template>

<style scoped lang="less"></style>