vue/src/views/dashboard/dailyLog/index copy 2.vue

<template>
    <div class="container">
      <Breadcrumb :items="['menu.taobao', 'menu.taobao.list']" />
      <a-card class="general-card" :title="$t('menu.taobao.list')">
        <a-row style="margin-bottom: 16px">
          <a-col :span="12">
          </a-col>
          <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
            <a-tooltip :content="$t('searchTable.actions.refresh')">
              <div class="action-icon" @click="search"><icon-refresh size="18" /></div>
            </a-tooltip>
            <a-dropdown @select="handleSelectDensity">
              <a-tooltip :content="$t('searchTable.actions.density')">
                <div class="action-icon"><icon-line-height size="18" /></div>
              </a-tooltip>
              <template #content>
                <a-doption v-for="item in densityList" :key="item.value" :value="item.value"
                  :class="{ active: item.value === size }">
                  <span>{{ item.name }}</span>
                </a-doption>
              </template>
            </a-dropdown>
            <a-tooltip :content="$t('searchTable.actions.columnSetting')">
              <a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange">
                <div class="action-icon"><icon-settings size="18" /></div>
                <template #content>
                  <div id="tableSetting">
                    <div v-for="(item, index) in showColumns" :key="item.dataIndex" class="setting">
                      <div style="margin-right: 4px; cursor: move">
                        <icon-drag-arrow />
                      </div>
                      <div>
                        <a-checkbox v-model="item.checked" @change="
                          handleChange($event, item as TableColumnData, index)
                          ">
                        </a-checkbox>
                      </div>
                      <div class="title">
                        {{ item.title === '#' ? '序列号' : item.title }}
                      </div>
                    </div>
                  </div>
                </template>
              </a-popover>
            </a-tooltip>
          </a-col>
        </a-row>
  
        <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="(cloneColumns as TableColumnData[])"
          :data="renderData" :bordered="false" :size="size" @page-change="onPageChange" :load-more="loadMore">
          <template #index="{ rowIndex }">
            {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
          </template>
          <template #xAxis="{ record }">
            <template v-if="record.isLeaf">
              {{ record.accountName }}
            </template>
            <template v-else>
              {{ dayjs(record.log_date).format('YYYY-MM-DD') }}
            </template>
          </template>
  
        </a-table>
      </a-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import { useI18n } from 'vue-i18n';
  import dayjs from 'dayjs';
  import useLoading from '@/hooks/loading';
  import { queryDailyLog, DailyLogRecord, DailyLogParams } from '@/api/taobao';
  import { Pagination } from '@/types/global';
  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import type { TableData, TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import cloneDeep from 'lodash/cloneDeep';
  import Sortable from 'sortablejs';
  
  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
  type Column = TableColumnData & { checked?: true };
  
  const generateFormModel = () => {
    return {
      accountName: 'all',
      current: 1, pageSize: 20, sort: 'log_date', order: 'descending'
  
    };
  };
  const router = useRouter();
  
  const { loading, setLoading } = useLoading(true);
  const { t } = useI18n();
  const renderData = ref<DailyLogRecord[]>([]);
  const formModel = ref(generateFormModel());
  const cloneColumns = ref<Column[]>([]);
  const showColumns = ref<Column[]>([]);
  
  const size = ref<SizeProps>('medium');
  
  const basePagination: Pagination = {
    current: 1,
    pageSize: 20,
  };
  const pagination = reactive({
    ...basePagination,
  });
  const densityList = computed(() => [
    {
      name: t('searchTable.size.mini'),
      value: 'mini',
    },
    {
      name: t('searchTable.size.small'),
      value: 'small',
    },
    {
      name: t('searchTable.size.medium'),
      value: 'medium',
    },
    {
      name: t('searchTable.size.large'),
      value: 'large',
    },
  ]);
  
  const columns = computed<TableColumnData[]>(() => [
    {
      title: '日期',
      slotName: 'xAxis',
    },
    {
      title: 'API调用数',
      dataIndex: 'total_count',
    },
    {
      title: '转链成功数',
      dataIndex: 'success_count',
    },
    {
      title: '转链成功率 %',
      dataIndex: 'success_percentage',
      slotName: 'success_percentage',
    },
    {
      title: '放弃转链数',
      dataIndex: 'abandon_count',
      slotName: 'abandon_count',
    },
    {
      title: '放弃转链 %',
      dataIndex: 'abandon_percentage',
      slotName: 'abandon_percentage',
    },
    {
      title: '最后更新',
      dataIndex: 'last_time',
    },
  ]);
  
  const fetchData = async (
    params: DailyLogParams = {
      // query_date: [row.report_date, row.report_date],
      accountName: 'all',
      current: 1, pageSize: 20, sort: 'log_date', order: 'descending'
    }
  ) => {
    setLoading(true);
    try {
  
      const { data } = await queryDailyLog(params);
      console.log(data);
      if (!data) return;
      // const { data } = await queryDailyLog(params);
      renderData.value = data.list;
      pagination.current = data.page;
      pagination.total = data.count;
      console.log(data)
    } catch (err) {
  
      console.log(err)
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  
  const loadMore = async (row: TableData, done: (data: TableData[]) => void) => {
    setLoading(true);
    try {
  
      const params: DailyLogParams = {
        query_date: [row.log_date, row.log_date],
        current: 1, pageSize: 999, sort: 'id', order: 'descending'
      };
  
      const { data } = await queryDailyLog(params);
      console.log(data);
      if (!data) return;
  
      const list: TableData[] = data.list.map((item: DailyLogRecord) => ({
        ...item,
        isLeaf: true
      }));
      done(list);
    } catch (err) {
      console.log(err)
    } finally {
      setLoading(false);
    }
  };
  
  
  
  
  const changeItem = async (
    data: DailyLogRecord
  ) => {
    router.push({ name: 'updateCookies' });
  };
  
  
  
  const search = () => {
    fetchData({
      ...basePagination,
      ...formModel.value,
    } as unknown as DailyLogParams);
  };
  const onPageChange = (current: number) => {
    fetchData({
      ...basePagination,
      ...formModel.value,
      current
    });
  };
  
  fetchData();
  const reset = () => {
    formModel.value = generateFormModel();
  };
  
  const handleSelectDensity = (
    val: string | number | Record<string, any> | undefined,
    e: Event
  ) => {
    size.value = val as SizeProps;
  };
  
  const handleChange = (
    checked: boolean | (string | boolean | number)[],
    column: Column,
    index: number
  ) => {
    if (!checked) {
      cloneColumns.value = showColumns.value.filter(
        (item) => item.dataIndex !== column.dataIndex
      );
    } else {
      cloneColumns.value.splice(index, 0, column);
    }
  };
  
  const exchangeArray = <T extends Array<any>>(
    array: T,
    beforeIdx: number,
    newIdx: number,
    isDeep = false
  ): T => {
    const newArray = isDeep ? cloneDeep(array) : array;
    if (beforeIdx > -1 && newIdx > -1) {
      // 先替换后面的，然后拿到替换的结果替换前面的
      newArray.splice(
        beforeIdx,
        1,
        newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
      );
    }
    return newArray;
  };
  
  const popupVisibleChange = (val: boolean) => {
    if (val) {
      nextTick(() => {
        const el = document.getElementById('tableSetting') as HTMLElement;
        const sortable = new Sortable(el, {
          onEnd(e: any) {
            const { oldIndex, newIndex } = e;
            exchangeArray(cloneColumns.value, oldIndex, newIndex);
            exchangeArray(showColumns.value, oldIndex, newIndex);
          },
        });
      });
    }
  };
  
  watch(
    () => columns.value,
    (val) => {
      cloneColumns.value = cloneDeep(val);
      cloneColumns.value.forEach((item, index) => {
        item.checked = true;
      });
      showColumns.value = cloneDeep(cloneColumns.value);
    },
    { deep: true, immediate: true }
  );
  </script>
  
  <script lang="ts">
  export default {
    name: 'SearchTable',
  };
  </script>
  
  <style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
  
  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }
  
  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }
  
  .setting {
    display: flex;
    align-items: center;
    width: 200px;
  
    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
  </style>