merchant_feedov_web/src/views/supplier/trafficList/index.vue

<!-- 流量包管理 -->
<template>
  <div class="container">
    <div class="head-title">
      <span>{{ route.meta.title }} </span>
    </div>
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form :model="searchForm" ref="formRef" layout="inline">
        <a-form-item field="status" :label="$t('dataPackage.price')">
          <a-input v-model="searchForm.price" :placeholder="$t('form.PleaseEnterThe') + $t('dataPackage.price')"
            allow-clear />
        </a-form-item>
        <a-form-item field="periodType" :label="$t('dataPackage.operatorType')">
          <a-input v-model="searchForm.periodType"
            :placeholder="$t('form.PleaseEnterThe') + $t('dataPackage.operatorType')" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
    <div class="audit-btn">
      <a-button @click="showNewDataPackageForm" type="text">
        <template #icon>
          <icon-plus-circle />
        </template>
        <template #default>{{ $t('form.Add') }}</template>
      </a-button>
    </div>

    <a-table :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
      @page-change="evChangePage">
      <template #id="{ record }">
        <a-button type="text" size="small" @click="handleEdit(record)">{{ $t('global.common.edit') }}</a-button>
        <a-button type="text" size="small" @click="handleDelete(record)">{{ $t('global.common.delete') }}</a-button>


      </template>

    </a-table>



    <new-data-package-form v-model:visible="newDataPackageFormVisible" :editMode="editMode" :editData="editData"
      @submit="handleNewDataPackageSubmit" />
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { columns } from "./config";
import { Message, Notification } from '@arco-design/web-vue'
import { dataPlanList } from "@/api/path/lotCard.api"
import NewDataPackageForm from './NewDataPackageForm.vue';
import { useI18n } from 'vue-i18n';


const { t } = useI18n();
const { proxy } = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
  "status": "",
  "periodType": "",
});

const dataSource = ref([]);
const route = useRoute();
const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})

// 运营商
const operatorTypeOptions = [
  { value: '1', label: t('dataPackage.operatorTypes.chinamobile') },
  { value: '2', label: t('dataPackage.operatorTypes.chinaunicom') },
  { value: '3', label: t('dataPackage.operatorTypes.chinatelecom') },
  { value: '4', label: t('dataPackage.operatorTypes.international') },
  { value: '5', label: t('dataPackage.operatorTypes.foreign_local') },
];
// 状态
const statusList = [
  { value: '1', label: t('dataPackage.status.offline') },
  { value: '2', label: t('dataPackage.status.disabled') },
  { value: '3', label: t('dataPackage.status.normal') },
]


const intData = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
  }
  const { data } = await dataPlanList(param)
  dataSource.value = (data?.records || []).map((item, index) => {
    const sourceName = operatorTypeOptions.find(val => val.value == item.source)?.label
    const statusName = statusList.find(val => val.value == item.status)?.label
    return {
      ...item,
      packageCode: "NR0" + (index + 1),
      packageName: '监控1G月租',
      providerName: '泰国AIS',
      packageType: '定向',
      billingType: '流量',
      billingPeriod: '按月',
      packageSize: '1.00',
      packageUnit: 'G',
      standardPrice: '150.00',
      statusName,
      sourceName

    }
  })
  pagination.value.total = data.total
}


const evChangePage = (page) => {
  pagination.value.current = page
}



const resetSearch = () => {
  proxy.$refs.formRef.resetFields()
  intData()
}

const handleSearch = () => {
  intData()
}


// 弹窗-----------------------------------------------------
// const showModel = ref(false)
// const handleModal = () => {
//   showModel.value = true
// }
const newDataPackageFormVisible = ref(false);
const editMode = ref(false);
const editData = ref(null);


const showNewDataPackageForm = () => {
  editMode.value = false;
  editData.value = null;
  newDataPackageFormVisible.value = true;
};
const handleEdit = (record) => {
  editMode.value = true;
  record.packageSize = Number(record.packageSize)
  record.standardPrice = Number(record.standardPrice)
  editData.value = { ...record };
  newDataPackageFormVisible.value = true;
};
const handleDelete = (record) => {
  // Implement delete logic
  Message.success(t('dataPackage.packageDeleted', { name: record.packageName }));
};

const handleNewDataPackageSubmit = (formData) => {
  if (editMode.value) {
    // Implement update logic
    Message.success(t('dataPackage.packageUpdated', { name: formData.packageName }));
  } else {
    // Implement add logic
    Message.success(t('dataPackage.packageAdded', { name: formData.packageName }));
  }
  newDataPackageFormVisible.value = false;
};
// -----------------------------------------------------


onMounted(() => {
  intData()
})
</script>

<style scoped lang="less">
.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  .head-title {
    display: flex;
    justify-content: space-between;
  }

  .form-row {
    display: flex;

    .form-row-col {
      width: 25%;
      display: flex;
      align-items: center;

      .form-row-label {
        width: 120px;
        text-align: right;
      }
    }
  }
}

.audit-btn {
  margin-bottom: 10px;
}
</style>