merchant_feedov_web/src/views/overflowalarm/index.vue

<template>
  <div class="overflow-alarm">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="iccid" label="ICCID">
          <a-input v-model="searchForm.iccid" placeholder="请输入ICCID" allow-clear />
        </a-form-item>
        <a-form-item field="cardNumber" label="卡号">
          <a-input v-model="searchForm.cardNumber" placeholder="请输入卡号" allow-clear />
        </a-form-item>
        <a-form-item field="usageStatus" label="使用状态">
          <a-select
            v-model="searchForm.usageStatus"
            placeholder="请选择使用状态"
            allow-clear
            style="width: 160px"
          >
            <a-option v-for="status in usageStatusOptions" :key="status.value" :value="status.value">
              {{ status.label }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="channel" label="通道">
          <a-select
            v-model="searchForm.channel"
            placeholder="请选择通道"
            allow-clear
            style="width: 160px"
          >
            <a-option v-for="channel in channelOptions" :key="channel.value" :value="channel.value">
              {{ channel.label }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button @click="resetSearch">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  
    <!-- 数据表格 -->
    <a-table :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
      <template #usageStatus="{ record }">
        <a-tag :color="getStatusColor(record.usageStatus)">{{ record.usageStatus }}</a-tag>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';

const searchForm = reactive({
  iccid: '',
  cardNumber: '',
  usageStatus: '',
  channel: '',
});

const usageStatusOptions = [
  { label: '正常', value: 'normal' },
  { label: '停机', value: 'suspended' },
];

const channelOptions = [
  { label: '通道1', value: 'channel1' },
  { label: '通道2', value: 'channel2' },
];

const columns = [
  { title: 'ICCID', dataIndex: 'iccid' },
  { title: '卡号', dataIndex: 'cardNumber' },
  { title: '使用状态', slotName: 'usageStatus' },
  { title: '通道', dataIndex: 'channel' },
  { title: '到期日期', dataIndex: 'expirationDate' },
  { title: '客户名称', dataIndex: 'customerName' },
  { title: '套餐已用量', dataIndex: 'usedData' },
  { title: '本月月量', dataIndex: 'monthlyData' },
  { title: '超套用量', dataIndex: 'overUsage' },
  { title: '资费合计', dataIndex: 'totalCost' },
];

const tableData = ref([]);

const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
});

const getStatusColor = (status) => {
  const colorMap = {
    '正常': 'green',
    '停机': 'red',
  };
  return colorMap[status] || 'blue';
};

const handleSearch = () => {
  console.log('Search form data:', searchForm);
  Message.success('执行搜索操作');
};

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  Message.success('搜索条件已重置');
};
</script>

<style scoped>
.overflow-alarm {
  padding: 20px;
}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.arco-table-th {
  white-space: nowrap;
}
</style>