|
|
@@ -0,0 +1,344 @@
|
|
|
+<!-- 资费管理 -->
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="head-title">
|
|
|
+ <span>{{ route.meta.title }} </span>
|
|
|
+ <span class="head-title-right">
|
|
|
+ <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索条件区 -->
|
|
|
+ <div class="search-section">
|
|
|
+ <a-form :model="searchForm" layout="inline">
|
|
|
+ <a-form-item field="simDataPlanId" :label="$t('tariffManagement.simDataPlanId')">
|
|
|
+ <a-input v-model="searchForm.ICCID"
|
|
|
+ :placeholder="$t('lotCard.please') + $t('tariffManagement.simDataPlanId')" 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>
|
|
|
+
|
|
|
+ <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination"
|
|
|
+ :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
|
|
|
+ <template #id="{ record }">
|
|
|
+ <!-- 设置价格 -->
|
|
|
+ <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
|
|
|
+ :cancel-text="$t('form.Cancel')" @ok="handleprice(record)">
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
|
|
|
+ $t('lotCard.titleOrder') }}</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
|
|
|
+ :cancel-text="$t('form.Cancel')" @ok="handleDel(record)">
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('lotCard.titleCancelOrder')
|
|
|
+ }}</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 弹框 -->
|
|
|
+ <a-modal :title="typeCurrent == 1 ? '添加' : '修改'" v-model:visible="visible" @onCancel="resetForm" centered
|
|
|
+ :maskClosable="false" :footer="null">
|
|
|
+ <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
|
|
|
+ <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="sim_data_plan_id">
|
|
|
+ <a-input v-model="formState.sim_data_plan_id" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.label')" field="label">
|
|
|
+ <a-input v-model="formState.label" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.userId')" field="user_id">
|
|
|
+ <a-input v-model="formState.user_id" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.source')" field="source">
|
|
|
+ <a-select v-model="formState.source">
|
|
|
+ <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{ item.label
|
|
|
+ }}</a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.trafficType')" field="traffic_type">
|
|
|
+ <a-select v-model="formState.traffic_type">
|
|
|
+ <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{ item.label
|
|
|
+ }}</a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.billingType')" field="billing_type">
|
|
|
+ <a-select v-model="formState.billing_type">
|
|
|
+ <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
|
|
|
+ }}</a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.bagSize')" field="bag_size">
|
|
|
+ <a-input v-model="formState.bag_size" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.billingCycle')" field="billing_cycle">
|
|
|
+ <a-select v-model="formState.billing_cycle">
|
|
|
+ <a-option v-for=" item in cycleist" :key="item.id" :value="item.value">{{ item.label
|
|
|
+ }}</a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.billingMethod')" field="billing_method">
|
|
|
+ <a-input v-model="formState.billing_method" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.settlementCycle')" field="settlement_cycle">
|
|
|
+ <a-input v-model="formState.settlement_cycle" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.pricing')" field="pricing">
|
|
|
+ <a-input v-model="formState.pricing" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="$t('tariffManagement.currency')" field="currency">
|
|
|
+ <a-input v-model="formState.currency" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
|
|
|
+ <a-button @click="resetForm">取消</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import { columns } from "./config";
|
|
|
+import { Message, Notification } from '@arco-design/web-vue'
|
|
|
+import { deleteTariff, updateTariff, addTariff, tariffList } from "@/api/path/tariffManagement.api"
|
|
|
+import { enum_dict } from "@/hooks/enum";
|
|
|
+import { useSystemStore } from '@/store/modules/systemStore'
|
|
|
+
|
|
|
+const useSystem = useSystemStore()
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+const formRef = ref()
|
|
|
+const searchForm = ref({
|
|
|
+ "simDataPlanId": "",
|
|
|
+ "is_Refuel": "",
|
|
|
+ "refuelingId": "",
|
|
|
+ "dataBundleId": "",
|
|
|
+ "quantity": 0,
|
|
|
+ "ICCID": "",
|
|
|
+ "sendLang": "",
|
|
|
+ "price": "",
|
|
|
+ "totalAmount": "",
|
|
|
+ "currency": "",
|
|
|
+ "userId": 0,
|
|
|
+ "current": 1,
|
|
|
+ "size": 10
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const dicId = ref('');
|
|
|
+const dataSource = ref([]);
|
|
|
+const route = useRoute();
|
|
|
+const pagination = ref({
|
|
|
+ total: 0,
|
|
|
+ pageSize: 10,
|
|
|
+ current: 1,
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const rowSelection = reactive({
|
|
|
+ type: 'checkbox',
|
|
|
+ showCheckedAll: true,
|
|
|
+ onlyCurrent: false,
|
|
|
+});
|
|
|
+const selectedKeys = ref([])
|
|
|
+
|
|
|
+const dialogRef = ref()
|
|
|
+
|
|
|
+
|
|
|
+const intData = async () => {
|
|
|
+ const param = {
|
|
|
+ current: pagination.value.current,
|
|
|
+ size: pagination.value.pageSize,
|
|
|
+ ...searchForm.value,
|
|
|
+ }
|
|
|
+ const { data } = await tariffList(param)
|
|
|
+ dataSource.value = data.records || []
|
|
|
+ pagination.value.total = data.total
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 设置价格
|
|
|
+const handleprice = async (info) => {
|
|
|
+}
|
|
|
+
|
|
|
+// 删除
|
|
|
+const handleDel = async (record) => {
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+//
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ formRef.value.validate((errors) => {
|
|
|
+ if (!errors) {
|
|
|
+ intData()
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const resetSearch = () => {
|
|
|
+ proxy.$refs.formRef.resetFields()
|
|
|
+ intData()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 弹窗数据-----------------------------------------------------------------
|
|
|
+const visible = ref(false);
|
|
|
+const typeCurrent = ref(null);
|
|
|
+const sourceList = ref([])
|
|
|
+const trafficList = ref([])
|
|
|
+const cycleist = ref([])
|
|
|
+const typeList = ref([])
|
|
|
+const formState = reactive({
|
|
|
+
|
|
|
+ // 资费名称（必填）
|
|
|
+ "label": "",
|
|
|
+ // 流量包ID（必填）
|
|
|
+ "sim_data_plan_id": "",
|
|
|
+ // 用户ID（必填）
|
|
|
+ "user_id": 0,
|
|
|
+ // 来源（必填）
|
|
|
+ "source": "",
|
|
|
+ // 流量类型（必填）
|
|
|
+ "traffic_type": "",
|
|
|
+ // 计费类型（必填）
|
|
|
+ "billing_type": "",
|
|
|
+ // 流量包Size（必填）
|
|
|
+ "bag_size": "",
|
|
|
+ // 计费周期（必填）
|
|
|
+ "billing_cycle": "",
|
|
|
+ // 计费方式（必填）
|
|
|
+ "billing_method": "",
|
|
|
+ // 结算周期（必填）
|
|
|
+ "settlement_cycle": "",
|
|
|
+ // 价格（必填）
|
|
|
+ "pricing": "",
|
|
|
+ // 币种（必填）
|
|
|
+ "currency": ""
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ label: [{ required: true, trigger: 'change', }],
|
|
|
+ sim_data_plan_id: [{ required: true, trigger: 'change', }],
|
|
|
+ user_id: [{ required: true, trigger: 'change', }],
|
|
|
+ source: [{ required: true, trigger: 'change', }],
|
|
|
+ traffic_type: [{ required: true, trigger: 'change', }],
|
|
|
+ billing_type: [{ required: true, trigger: 'change', }],
|
|
|
+ bag_size: [{ required: true, trigger: 'change', }],
|
|
|
+ billing_cycle: [{ required: true, trigger: 'change', }],
|
|
|
+ billing_method: [{ required: true, trigger: 'change', }],
|
|
|
+ settlement_cycle: [{ required: true, trigger: 'change', }],
|
|
|
+ pricing: [{ required: true, trigger: 'change', }],
|
|
|
+ currency: [{ required: true, trigger: 'change', }],
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+// 提交
|
|
|
+const handleSubmit = ({ values, errors }) => {
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+// 删除
|
|
|
+const deleteChange = (e) => {
|
|
|
+ dictionaryDelete({ id: e }).then(res => {
|
|
|
+ intData();
|
|
|
+ })
|
|
|
+}
|
|
|
+// 弹框
|
|
|
+const dictShowModel = (type, data) => {
|
|
|
+ typeCurrent.value = type;
|
|
|
+ visible.value = true;
|
|
|
+ if (type == 2) {
|
|
|
+ dicId.value = data.id;
|
|
|
+ formState.label = data.label;
|
|
|
+ formState.value = data.value;
|
|
|
+ formState.typeKey = data.type_key;
|
|
|
+ formState.typeLabel = data.type_label;
|
|
|
+ formState.remark = data.remark;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 取消
|
|
|
+const resetForm = () => {
|
|
|
+ visible.value = false;
|
|
|
+ dicId.value = null;
|
|
|
+ formRef.value.resetFields();
|
|
|
+ Object.assign(formState, {
|
|
|
+ label: '',
|
|
|
+ value: '',
|
|
|
+ typeKey: '',
|
|
|
+ typeLabel: '',
|
|
|
+ remark: '',
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// --------------------------------------------------------
|
|
|
+
|
|
|
+const handleDictValue = () => {
|
|
|
+ const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
|
|
|
+ sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
|
|
|
+ trafficList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFICTYPE)
|
|
|
+ cycleist.value = dictList.filter((item) => item.type_key == enum_dict.BILLINGCYCLE)
|
|
|
+ typeList.value = dictList.filter((item) => item.type_key == enum_dict.BILLINGTYPE)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ handleDictValue()
|
|
|
+ // intData()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.head-title-right {
|
|
|
+ .m-r-10 {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wanghairong