feat:推送记录

src/views/marketing/record/index.vue

@@ -0,0 +1,156 @@
+<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="triggerInfo">
+            <el-input :placeholder="'请输入触发信息'" v-model="state.queryForm.triggerInfo" />
+          </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="'规则名称'" prop="ruleName"
+          show-overflow-tooltip></el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'触发信息'" prop="triggerInfo"
+          show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-link @click="showTriggerInfo(row)" target="_blank"
+              :style="{ color: '#409EFF' }">{{ row.triggerInfo }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'推送内容'" prop="pushContent"
+          show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.pushContent === '1' ? '图片' : '链接' }}
+          </template>
+        </el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'推送频率'" prop="pushFrequency"
+          show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'推送状态'" prop="pushStatus"
+          show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag :type="row.pushStatus === '1' ? 'success' : 'danger'">{{ row.pushStatus === '1' ? '成功' : '失败' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'触发时间'" prop="triggerTime"
+          show-overflow-tooltip></el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'推送时间'" prop="pushTime"
+          show-overflow-tooltip></el-table-column>
+      </el-table>
+      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" name="marketingApps" setup>
+// import { pageList } from '/@/api/marketing/apps';
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue'
+import { useMessage } from '/@/hooks/message';
+
+const { t } = useI18n();
+
+// 定义变量内容
+const tableRef = ref();
+const queryRef = ref();
+const state: BasicTableProps = reactive<BasicTableProps>({
+  // pageList: pageList,
+  createdIsNeed: false,
+  queryForm: {
+    ruleName: '',
+    triggerInfo: '',
+  },
+  pagination: {
+    current: 1,
+    size: 10,
+    total: 0,
+    pageSizes: [5, 10, 20, 50, 100]
+  },
+});
+
+interface SourceData {
+  ruleName: string;
+  triggerInfo: string;
+  triggerTime: string;
+  pushStatus: string;
+  pushContent: string;
+  pushFrequency: string;
+  pushTime: string;
+}
+
+const sourceData = ref<SourceData[]>([]);
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
+
+// 搜索事件
+const query = (refresh: boolean = false) => {
+  state.dataList = [];
+  // getDataList(refresh);
+  state.dataList = sourceData.value.filter(item => item.ruleName.includes(state.queryForm.ruleName) && item.triggerInfo.includes(state.queryForm.triggerInfo));
+  state.pagination.total = state.dataList.length;
+};
+
+// 清空搜索条件
+const resetQuery = () => {
+  queryRef.value.resetFields();
+  query();
+  // state.dataList = [];
+  // getDataList();
+};
+
+const statusFormatter = (row: any, column: any, cellValue: any, index: any) => {
+  return cellValue || '--';
+}
+
+const showTriggerInfo = (row: any) => {
+  // 信息详情弹窗
+  console.log(row);
+}
+
+onMounted(() => {
+  // query();
+  for (let i = 1; i < 11; i++) {
+    sourceData.value.push({
+      ruleName: '规则名称' + i,
+      triggerInfo: '触发信息' + i,
+      triggerTime: '2025-08-29 10:00:00',
+      pushStatus: i % 2 === 0 ? '1' : '2',
+      pushContent: i % 2 === 0 ? '1' : '2',
+      pushFrequency: '推送频率' + i,
+      pushTime: '2025-08-29 10:00:00',
+    });
+  }
+  state.dataList = sourceData.value;
+  state.pagination.total = state.dataList.length;
+})
+
+</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;
+}
+</style>