|
|
@@ -0,0 +1,216 @@
|
|
|
+<!-- 流量包管理 -->
|
|
|
+<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 dialog -->
|
|
|
+ <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>
|
wanghairong