|
|
@@ -1,10 +1,290 @@
|
|
|
+<!-- 资费管理 -->
|
|
|
<template>
|
|
|
- <div class=""></div>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 搜索条件区 -->
|
|
|
+ <div class="search-section">
|
|
|
+ <Search :SearchForm="trafficSearchFrom" @query="intData" @reset="reset"/>
|
|
|
+ </div>
|
|
|
+ <div class="audit-btn">
|
|
|
+ <a-button type="text" @click="dictShowModel(1, null)" v-if="role.getRole == 1">
|
|
|
+ <template #icon>
|
|
|
+ <icon-plus-circle />
|
|
|
+ </template>
|
|
|
+ <template #default>{{ $t('form.Add') }}</template>
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
|
|
|
+ @page-change="evChangePage">
|
|
|
+ <template #id="{ record }">
|
|
|
+ <!-- 修改 -->
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
|
|
|
+ v-if="role.getRole == 1">{{
|
|
|
+ $t('form.alter')
|
|
|
+ }}</a>
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)">{{
|
|
|
+ $t('tariffManagement.SetMeal') }}</a>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
|
|
|
+ @ok="handleDel(record.id)">
|
|
|
+ <a class="a-link" href="javascript:;" style="margin-right: 1rem" v-if="role.getRole == 1">{{
|
|
|
+ $t('form.Delete')
|
|
|
+ }}</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <a-modal width="70%" :visible="planVisible" :title="$t('tariffManagement.SelectiveTrafficPacket')"
|
|
|
+ @ok="handleSubmitPlan" @cancel="handleCancel">
|
|
|
+ <!-- 搜索条件区 -->
|
|
|
+ <div class="search-section">
|
|
|
+ <a-form :model="formData" layout="inline">
|
|
|
+ <a-form-item field="label" :label="$t('tariffManagement.label')">
|
|
|
+ <a-input v-model="formData.label" :placeholder="$t('lotCard.please') + $t('tariffManagement.label')"
|
|
|
+ allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-space>
|
|
|
+ <a-button type="primary" @click="handleSearchPlan">{{ $t('form.Search') }}</a-button>
|
|
|
+ <a-button @click="resetSearchPlan">{{ $t('form.Reset') }}</a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <a-table row-key="id" :data="planList" :columns="planColumns" :scroll="{ x: 'auto' }"
|
|
|
+ :row-selection="rowSelectionPlan" v-model:selectedKeys="selectedKeysPlan">
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, toRefs } from 'vue';
|
|
|
+import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import { columns, planColumns ,trafficSearchFrom} from "../config";
|
|
|
+import { deleteTariff, tariffList } from "@/api/path/tariffManagement.api"
|
|
|
+import { Getdictionary } from '@/mixins/index.js'
|
|
|
+import { useSystemStore } from '@/store/modules/systemStore'
|
|
|
+import Search from '@/components/Search/index.vue'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+import { Message } from '@arco-design/web-vue'
|
|
|
+const { t } = useI18n();
|
|
|
+const role = useSystemStore()
|
|
|
+const state = ref({
|
|
|
+ searchForm: {},
|
|
|
+ FormDataList: {},
|
|
|
+ currency: [],
|
|
|
+ dataSource: [],
|
|
|
+ pagination: {
|
|
|
+ total: 0,
|
|
|
+ pageSize: 10,
|
|
|
+ current: 1,
|
|
|
+ },
|
|
|
+ planList: [],
|
|
|
+ visible: false,
|
|
|
+ typeCurrent: null,
|
|
|
+ sourceList: [],
|
|
|
+ cycleist: [],
|
|
|
+ modealShow: false,
|
|
|
+ planVisible: false,
|
|
|
+ formData: {},
|
|
|
+ selectedKeysPlan: [],
|
|
|
+ rowSelectionPlan: {
|
|
|
+ type: 'radio',
|
|
|
+ showCheckedAll: true,
|
|
|
+ onlyCurrent: false,
|
|
|
+ },
|
|
|
+ ids: null,
|
|
|
+ methodList: []
|
|
|
+})
|
|
|
+const {
|
|
|
+ searchForm,
|
|
|
+ FormDataList,
|
|
|
+ currency,
|
|
|
+ dataSource,
|
|
|
+ pagination,
|
|
|
+ planList,
|
|
|
+ visible,
|
|
|
+ typeCurrent,
|
|
|
+ sourceList,
|
|
|
+ cycleist,
|
|
|
+ modealShow,
|
|
|
+ planVisible,
|
|
|
+ formData,
|
|
|
+ selectedKeysPlan,
|
|
|
+ rowSelectionPlan,
|
|
|
+ ids,
|
|
|
+ methodList
|
|
|
+} = toRefs(state.value);
|
|
|
+
|
|
|
+const intData = async (item) => {
|
|
|
+ if(item){
|
|
|
+ searchForm.value = item
|
|
|
+ }
|
|
|
+ const param = {
|
|
|
+ current: pagination.value.current,
|
|
|
+ size: pagination.value.pageSize,
|
|
|
+ ...searchForm.value,
|
|
|
+ }
|
|
|
+ const { data } = await tariffList(param)
|
|
|
+ dataSource.value = (data.records || []).map((item, index) => {
|
|
|
+ const sourceName = sourceList.value.find(val => val.value == item.source)?.label
|
|
|
+ const billingCycleName = cycleist.value.find(val => val.value == item.billingCycle)?.label
|
|
|
+ const pricingCurrty = currency.value.find(val => val.value == item.currency)?.label || '人民币'
|
|
|
+ const Activated = item.trafficBilling + item.trafficBillingType
|
|
|
+ const bagSize = item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee
|
|
|
+ const billingMethodName = methodList.value.find(val => val.value == item.billingMethod)?.label
|
|
|
+
|
|
|
+ let pricingName;
|
|
|
+
|
|
|
+ if (item.billingMethod == 1) {
|
|
|
+ pricingName = item.trafficBillingAmount + pricingCurrty
|
|
|
+ } else if (item.billingMethod == 2) {
|
|
|
+ pricingName = item.pricing + pricingCurrty
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ sourceName,
|
|
|
+ pricingName,
|
|
|
+ billingCycleName,
|
|
|
+ Activated: Activated,
|
|
|
+ status: "正常",
|
|
|
+ bagSize,
|
|
|
+ billingMethodName,
|
|
|
+ Number: index + 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ pagination.value.total = data.total
|
|
|
+}
|
|
|
+
|
|
|
+const reset = (item)=>{
|
|
|
+ searchForm.value = item
|
|
|
+ pagination.value.current = 1
|
|
|
+ intData()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 删除
|
|
|
+const handleDel = async (id) => {
|
|
|
+ const { code } = await deleteTariff({ id })
|
|
|
+ if (code == 200) {
|
|
|
+ Message.success({
|
|
|
+ content: t('setting.deleteSuccess'),
|
|
|
+ duration: 2000,
|
|
|
+ })
|
|
|
+ intData()
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const evChangePage = (page) => {
|
|
|
+ pagination.value.current = page
|
|
|
+ intData()
|
|
|
+}
|
|
|
+
|
|
|
+// 弹框
|
|
|
+const dictShowModel = (type, data) => {
|
|
|
+ FormDataList.value = type == 1 ? {} : data
|
|
|
+ typeCurrent.value = type;
|
|
|
+ visible.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+const resetSearchPlan = () => {
|
|
|
+
|
|
|
+}
|
|
|
+const handleSearchPlan = () => {
|
|
|
+
|
|
|
+}
|
|
|
+const handleCancel = () => {
|
|
|
+ planVisible.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const handleSubmitPlan = () => {
|
|
|
+ if (selectedKeysPlan.value.length > 0) {
|
|
|
+ formState.value.simDataPlanId = String(selectedKeysPlan.value[0])
|
|
|
+ planVisible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const handleDictValue = async () => {
|
|
|
+ sourceList.value = await Getdictionary('source')
|
|
|
+ cycleist.value = await Getdictionary('Billingcycle')
|
|
|
+ currency.value = await Getdictionary('currencyType')
|
|
|
+ methodList.value = await Getdictionary('billingMethod')
|
|
|
+}
|
|
|
+
|
|
|
+const meal = (data) => {
|
|
|
+ ids.value = data.id
|
|
|
+ modealShow.value = true
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await handleDictValue()
|
|
|
+ await intData()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
-<style scoped>
|
|
|
|
|
|
-</style>
|
|
|
+<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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.audit-btn {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.formTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center
|
|
|
+}
|
|
|
+
|
|
|
+.formTitle::before {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: green;
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
