merchant_feedov_web/src/views/tariffManagement/index.vue

<!-- 资费管理 -->
<template>
  <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, false)" 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">编辑</a>
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)" v-if="role.getRole == 1">{{
          $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="handleCancelTarriName">
      <!-- 搜索条件区 -->
      <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>


    <Meal v-model:model-value="modealShow" :traffIds="ids" @submit="intData()" />
    <Add v-model:model-value="visible" :type-index="typeCurrent" ref="addDetaile" @submit="intData()"></Add>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { columns, planColumns, trafficSearchFrom } from "./config";
import { deleteTariff, tariffList ,UpdateTariffName} from "@/api/path/tariffManagement.api"
import { Getdictionary } from '@/mixins/index.js'
import { useSystemStore } from '@/store/modules/systemStore'
import Meal from './Management/meal.vue'
import Add from './Management/add.vue'
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 { proxy } = getCurrentInstance()
const route = useRoute();
const state = ref({
  searchForm: {},
  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: [],
  Form: {
    id: "",
    name: "",
  }
})
const {
  searchForm,
  currency,
  dataSource,
  pagination,
  planList,
  visible,
  typeCurrent,
  sourceList,
  cycleist,
  modealShow,
  planVisible,
  formData,
  selectedKeysPlan,
  rowSelectionPlan,
  ids,
  methodList,
  Form
} = toRefs(state.value);

const addDetaile = ref(null)


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 Activated = item.trafficBilling + item.trafficBillingType
    const bagSize = item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee
    const billingMethodName = methodList.value.find(val => val.value == item.billingMethod)?.label
    delete item.children
    let pricingName;

    if (item.billingMethod == 1) {
      pricingName = item.trafficBillingAmount + '/' + item.currency
    } else if (item.billingMethod == 2) {
      pricingName = item.pricing + '/' + item.currency
    }
    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 handleCancelTarriName = ()=>{
  putLabel.value = false
  Form.value.id = ''
  Form.value.name = ''
}

// 删除
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) => {
  addDetaile.value.detaile(data)
  typeCurrent.value = type;
  visible.value = true;
}

const resetSearchPlan = () => {

}
const handleSearchPlan = () => {

}

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 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>