commit

src/views/whatsapp/whatsapp_batch/send_record/index.vue

@@ -1,251 +1,93 @@
 <template>
-  <div class="container">
-    <a-form :model="filters" layout="inline" class="form-style">
-      <a-form-item label="执行状态">
-        <a-select
-          v-model:value="filters.result"
-          placeholder="请选择"
-          class="select-style"
-          allowClear
-        >
-          <a-select-option value="0">未发送</a-select-option>
-          <!-- <a-select-option value=2>发送中</a-select-option> -->
-          <a-select-option value="1">成功</a-select-option>
-          <a-select-option value="2">失败</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="发送WhatsApp">
-        <a-input v-model:value="filters.customer" placeholder="请输入" allowClear />
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" @click="onSearch">查询</a-button>
-      </a-form-item>
-      <a-form-item>
-        <a-button @click="onReset">重置</a-button>
-      </a-form-item>
-    </a-form>
-    <a-table
-      :columns="columns"
-      :dataSource="data"
-      :loading="loading.spinning"
-      :pagination="pagination"
-      class="table-style"
-       @change="handleTableChange"
-    >
-      <template #action="{ record }">
-        <a @click="viewRecord(record)">发送记录</a>
-      </template>
-    </a-table>
+  <div>
+    <BasicTable @register="registerTable">
+    </BasicTable>
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, onMounted } from 'vue';
-  import { Form, Input, Select, Button, Table, Pagination } from 'ant-design-vue';
+<script lang="ts" setup>
   import { useRoute } from 'vue-router';
-  import dayjs from 'dayjs';
+  import { BasicTable, useTable } from '/@/components/Table';
   import { getWhatsappBatchHistory } from '/@/api/whatsapp_batch/whatsappBatch';
-
-  export default defineComponent({
-    name: 'SendTasks',
-    components: {
-      'a-form': Form,
-      'a-form-item': Form.Item,
-      'a-input': Input,
-      'a-select': Select,
-      'a-select-option': Select.Option,
-      'a-button': Button,
-      'a-table': Table,
-      'a-pagination': Pagination,
-    },
-    setup() {
-      const filters = reactive({
-        customer: '',
-        socialAccount: '',
-        type: '',
-        result: undefined,
-      });
-      const loading = reactive({
-        spinning: true,
-      });
-      const route = useRoute();
-      const data = reactive([]);
-
-      const columns = reactive([
-        { title: '序号', dataIndex: 'index', key: 'index' },
-        { title: '联系人', dataIndex: 'toid', key: 'toid' },
-        { title: '发送WhatsApp', dataIndex: 'fromwxid', key: 'fromwxid' },
-        {
-          title: '执行状态',
-          dataIndex: 'status',
-          key: 'status',
-          customRender: ({ record }) => {
-            switch (record.status) {
-              case 0:
-                return '未发送';
-              // case 2:
-              //   return '发送中';
-              case 1:
-                return '发送成功';
-              case 2:
-                return '发送失败';
-              default:
-                return '未知状态';
-            }
-          },
-        },
-        {
-          title: '执行时间',
-          dataIndex: 'updatedAt',
-          key: 'updatedAt',
-          customRender: ({ record, text }) => {
-            // 如果 status 是 1，返回空字符串；否则格式化 updatedAt
-            return record.status === 0 ? '' : text ? dayjs(text).format('YY-MM-DD HH:mm:ss') : '';
-          },
-        },
-      ]);
-
-      onMounted(async () => {
-        const sourceId = route.query.id;
-        console.log(sourceId, 'sourceId');
-        // const sourceType = route.query.sourceType;
-        try {
-          let res = await getWhatsappBatchHistory({ id: Number(sourceId), page: 1, pageSize: 50 });
-          if (res && Array.isArray(res.data.data)) {
-            res.data.data.forEach((item, index) => {
-              item.index = index + 1; // 为每条记录添加序号
-            });
-            data.splice(0, data.length, ...res.data.data); // 更新 data
-            pagination.total = res.data.total;
-          }
-        } catch (error) {
-          console.error('数据加载失败', error);
-        } finally {
-          loading.spinning = false; // 数据加载完成后关闭加载指示器
-        }
-      });
-
-      const pagination = reactive({
-        total: 0,
-        pageSize: 10,
-        current: 1,
-        showTotal: (total) => `共 ${total} 条`,
-        showSizeChanger: true, // 允许改变每页条数
-        pageSizeOptions: ['10', '20', '50', '100'], // 可选的每页条数
-      });
-
-      async function onSearch() {
-        console.log('查询条件', filters);
-        loading.spinning = true;
-        // 清空 data 数组
-        data.splice(0, data.length);
-        // 在这里添加查询逻辑
-        const sourceId = route.query.id;
-        try {
-          let res = await getWhatsappBatchHistory({
-            id: Number(sourceId),
-            page: 1,
-            pageSize: 50,
-            status: Number(filters.result),
-            toid: filters.customer,
-          });
-          if (res && Array.isArray(res.data.data)) {
-            res.data.data.forEach((item, index) => {
-              item.index = index + 1; // 为每条记录添加序号
-            });
-            data.splice(0, data.length, ...res.data.data); // 更新 data
-            pagination.total = res.data.total;
-          }
-        } catch (error) {
-          console.error('数据加载失败', error);
-        } finally {
-          loading.spinning = false; // 数据加载完成后关闭加载指示器
-        }
-      }
-
-      const onReset = () => {
-        filters.customer = '';
-        filters.socialAccount = '';
-        filters.type = '';
-        filters.result = undefined;
-      };
-
-      const viewRecord = (record) => {
-        console.log('查看发送记录', record);
-        // 在这里添加你的逻辑，比如跳转到发送记录页面或显示模态框
-      };
-      const handleTableChange = (paginationParams) => {
-  // 更新响应式 pagination 对象的 current 和 pageSize
-  pagination.current = paginationParams.current;
-  pagination.pageSize = paginationParams.pageSize;
-
-  loading.spinning = true;
-  data.splice(0, data.length);
-
+  import { formatToDateTime } from '@/utils/dateUtil';
+  const route = useRoute();
   const sourceId = route.query.id;
-  getWhatsappBatchHistory({
-    id: Number(sourceId),
-    page: pagination.current, // 使用更新后的 current
-    pageSize: pagination.pageSize, // 使用更新后的 pageSize
-    status: Number(filters.result),
-    toid: filters.customer,
-  })
-    .then((res) => {
-      if (res && Array.isArray(res.data.data)) {
-        res.data.data.forEach((item, index) => {
-          item.index = index + 1 + (pagination.current - 1) * pagination.pageSize; // 更新序号
-        });
-        data.splice(0, data.length, ...res.data.data); // 更新 data
-        pagination.total = res.data.total; // 更新 total
-      }
-    })
-    .catch((error) => {
-      console.error('数据加载失败', error);
-    })
-    .finally(() => {
-      loading.spinning = false;
-    });
-};
 
-
-      return {
-        filters,
-        data,
-        columns,
-        pagination,
-        onSearch,
-        onReset,
-        viewRecord,
-        loading,
-        handleTableChange,
-      };
+  // 定义表格列
+  const columns = [
+    { title: '序号', dataIndex: 'index', width: 80 },
+    { title: '收件人', dataIndex: 'to', width: 200 },
+    { title: '发件人', width: 200, customRender: ({ record }) => `${record.cc}${record.phone}` },
+    {
+      title: '执行状态',
+      dataIndex: 'status',
+      width: 120,
+      customRender: ({ record }) => {
+        const statusMap = {
+          0: '未发送',
+          1: '发送成功',
+          2: '发送失败',
+        };
+        return statusMap[record.status] || '未知状态';
+      },
+    },
+    {
+      title: '执行时间',
+      dataIndex: 'sendTime',
+      width: 180,
+      customRender: ({ record, text }) => {
+        return record.status === 0 ? '' : text ? formatToDateTime(text) : '';
+      },
+    },
+  ];
+
+  // 定义搜索表单
+  const searchFormSchema = [
+    {
+      field: 'status',
+      label: '执行状态',
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '未发送', value: 0 },
+          { label: '成功', value: 1 },
+          { label: '失败', value: 2 },
+        ],
+      },
+      colProps: { span: 8 },
     },
+    {
+      field: 'phone',
+      label: '发送手机',
+      component: 'Input',
+      colProps: { span: 8 },
+    },
+  ];
+
+  // 注册表格
+  const [registerTable] = useTable({
+    api: (params) => getWhatsappBatchHistory({ id: Number(sourceId), ...params }),
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
   });
+
+  // 查看记录
+  function viewRecord(record: Recordable) {
+    console.log('查看发送记录', record);
+  }
 </script>
 
 <style scoped>
   .container {
-    width: calc(100% - 40px);
     margin: 20px;
     border-radius: 4px;
     background-color: #fff;
   }
-
-  .ant-table-cell {
-    text-align: center;
-  }
-
-  .table-style {
-    padding: 16px;
-  }
-
-  .form-style {
-    /* width: ; */
-    height: 55px;
-    padding: 16px;
-  }
-
-  .select-style {
-    width: 180px;
-  }
 </style>