data-marketing-platform/src/views/marketing/push-logs/index.vue

<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row shadow="hover" class="ml10">
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="query" ref="queryRef">
          <!-- <el-form-item :label="'规则名称'" prop="ruleName">
            <el-input :placeholder="'请输入规则名称'" v-model="state.queryForm.ruleName" />
          </el-form-item>
          <el-form-item :label="'触发信息'" prop="triggerCondition">
            <el-input :placeholder="'请输入触发信息'" v-model="state.queryForm.triggerCondition" />
          </el-form-item> -->
          <el-form-item :label="'推送时间'" prop="createTime">
            <el-date-picker :disabled-date="disabledDate" :end-placeholder="'结束日期'" :start-placeholder="'开始日期'"
              format="YYYY-MM-DD HH:mm:ss" range-separator="至" type="datetimerange" v-model="state.queryForm.createTime" />
          </el-form-item>
          <el-form-item>
            <el-button @click="query" class="ml10" icon="search" type="primary">
              {{ t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" icon="Refresh">{{ t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-table ref="tableRef" :data="state.dataList" row-key="id" style="width: 100%" v-loading="state.loading" border
        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle?.headerCellStyle">
        <el-table-column :formatter="statusFormatter" :label="'推送IP'" prop="pushIP" min-width="200"
          show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送域名'" prop="pushDomain" min-width="200"
          show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送内容'" prop="pushContent" min-width="300"
          show-overflow-tooltip>
          <template #default="{ row }">
            <el-image v-if="row.pushType" :src="row.pushContent" style="width: 100px; height: 100px;" />
            <div v-else>{{ row.pushContent }}</div>
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送方式'" prop="pushType" min-width="200"
          show-overflow-tooltip>
          <template #default="{ row }">
            {{pushMode.filter(item => item.value == row.pushAction)[0]?.label}}
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送频率'" prop="pushFrequency" min-width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送时间'" prop="createTime" min-width="200"
          show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'延时推送'" prop="delayPush" min-width="200"
          show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送状态'" prop="pushStatus" min-width="120"
          show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.pushStatus ? '已推送' : '未推送' }}
          </template>
        </el-table-column>
        <el-table-column :formatter="statusFormatter" :label="'推送详情'" prop="pushDetail" min-width="250">
          <template #default="{ row }">
            <div class="trigger-info" @click="showTriggerInfo(row)">
              {{ row.pushDetail }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
    </div>

    <dataInfoModal ref="richContentDialogRef"></dataInfoModal>
  </div>
</template>

<script lang="ts" name="marketingApps" setup>
import { getPushPage } from '/@/api/marketing/apps';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useI18n } from 'vue-i18n';
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
const dataInfoModal = defineAsyncComponent(() => import('/@/views/marketing/data/dataInfoModal.vue'));
import { ElImage } from 'element-plus';
import lockScreen from '/@/assets/lockScreen.png';
import { fetchItemList } from '/@/api/admin/dict';

const { t } = useI18n();

const getDataListWithProcess = (params: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    getPushPage(params).then((res: any) => {
      console.log(res, 'res');
      try {
        if (res.data && res.data.records && res.data.records.length > 0) {
          res.data.records = res.data.records.map((item: any) => {
            let parsedData: any = null;
            try {
              if (item.triggerCondition) {
                parsedData = JSON.parse(item.triggerCondition);
              }
            } catch (error) {
              console.warn('解析触发器条件失败:', item.triggerCondition, error);
            }

            return {
              ...item,
              _keywords: parsedData?.keywords || [],
              _ip: parsedData?.ip || '',
              _domain: parsedData?.domain || ''
            };
          });
        }
        resolve(res);
      } catch (error: any) {
        console.error('数据处理失败:', error);
        reject(error);
      }
    }).catch((error: any) => {
      reject(error);
    });
  });
};

// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const state: BasicTableProps = reactive<BasicTableProps>({
  pageList: getDataListWithProcess,
  createdIsNeed: false,
  queryForm: {
    ruleName: '',
    triggerCondition: '',
  },
  pagination: {
    current: 1,
    size: 10,
    total: 0,
    pageSizes: [5, 10, 20, 50, 100]
  },
});
const pushMode = ref<any>([]);
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
}

interface SourceData {
  ruleName: string;
  triggerCondition: string;
  triggerTime: string;
  pushStatus: string;
  pushContent: string;
  pushFrequency: string;
  pushTime: string;
}

const richContentDialogRef = ref();
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 搜索事件
const query = (refresh: boolean = false) => {
  state.dataList = [];
  getDataList(refresh);
};

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  state.dataList = [];
  getDataList();
};

const statusFormatter = (row: any, column: any, cellValue: any, index: any) => {
  return cellValue || '--';
}

const showTriggerInfo = (row: any) => {
  // 信息详情弹窗
  richContentDialogRef.value.openDialog(
    row.pushDetail,
    {
      createTime: row.createTime,
      triggerKeyword: row._keywords
    }
  )
}

const getFetchItemList = async () => {
  const res = await fetchItemList({
    dictType: 'pushMode',
  });

  pushMode.value = res.data.records.map((item: any) => ({
    label: item.description,
    value: item.value
  }));
  console.log(pushMode, 'pushMode');
}

onMounted(() => {
  getFetchItemList();
  query();
});

</script>
<style scoped lang="scss">
:deep(.el-link__inner) {
  display: inline-block;
  width: 100%;
  justify-content: start;
}

:deep(.el-link.is-underline:hover:after) {
  display: none;
}

.table-tabs {
  margin-bottom: 10px;
}

.trigger-info {
  overflow: hidden;
  text-align: center;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #409eff;
  cursor: pointer;
}

.header-wrapper {
  display: inline-flex;
  align-items: center;
}

.header-icon {
  margin-left: 5px;
  color: #999;
  font-size: 14px;
  cursor: help;

  &:hover {
    color: #409eff;
  }
}
</style>