修改模块 区分用户端和管理端

src/components/Layout/components/layoutHeader/index.vue

@@ -23,7 +23,7 @@
             <a-avatar :size="38" class="avatar-body">
               <img class="avatar-image" alt="avatar" src="https://avatars.githubusercontent.com/u/39849555?v=4" />
             </a-avatar>
-            <div class="userName">{{ userInfor?.username }}</div>
+            <div class="userName">{{ userInfor?.name }}</div>
           </div>
           <template #content>
             <a-doption>

src/views/flowPool/index.vue → src/views/admin/flowPool/Forwardflowpool/index.vue

@@ -7,7 +7,7 @@
     </div>
 
     <div class="audit-btn">
-      <a-button @click="dictShowModel(1, null)" type="text" v-if="role == 1">
+      <a-button @click="dictShowModel(1, null)" type="text" >
         <template #icon>
           <icon-plus-circle />
         </template>
@@ -22,16 +22,16 @@
       <template #id="{ record }">
         <!-- 修改 -->
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
-          v-if="role == 1">{{
+          >{{
             $t('form.Edit')
           }}</a>
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
-          v-if="role == 1">{{ $t('flowPool.Waring') }}</a>
+          >{{ $t('flowPool.Waring') }}</a>
         <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelgetCard(record)">导卡</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 == 1">{{
+          <a class="a-link" href="javascript:;" style="margin-right: 1rem" >{{
             $t('form.Delete')
           }}</a>
         </a-popconfirm>
@@ -55,7 +55,7 @@
 
 <script setup>
 import { onMounted, ref, getCurrentInstance, toRefs } from "vue";
-import { columns, SearchFormList } from "./config";
+import { columns, SearchFormList } from "../config";
 import { Message } from '@arco-design/web-vue'
 import {
   deleteTrafficPool,
@@ -63,9 +63,9 @@ import {
 } from "@/api/path/flowPool.api"
 import { useSystemStore } from "@/store/modules/systemStore"
 import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
-import Forewarning from "./components/forewarning.vue";
-import add from './components/add.vue'
-import GuideCard from "./components/GuideCard.vue"
+import Forewarning from "../components/forewarning.vue";
+import add from '../components/add.vue'
+import GuideCard from "../components/GuideCard.vue"
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n();
 const systemStore = useSystemStore()
@@ -148,7 +148,7 @@ const handelForewring = (item) => {
 }
 
 const handleDictValue = async () => {
-  let dict = await Getdictionary(['source','trafficPacketStatus'])
+  let dict = await Getdictionary(['source', 'trafficPacketStatus'])
   sourceList.value = dict[0]
   trafficList.value = dict[1]
 }

src/views/flowPool/rearFlowPool/index.vue → src/views/admin/flowPool/rearFlowPool/index.vue

@@ -7,7 +7,7 @@
     </div>
 
     <div class="audit-btn">
-      <a-button @click="dictShowModel(1, null)" type="text" v-if="role == 1">
+      <a-button @click="dictShowModel(1, null)" type="text">
         <template #icon>
           <icon-plus-circle />
         </template>
@@ -21,14 +21,14 @@
       @page-change="evChangePage">
       <template #id="{ record }">
         <!-- 修改 -->
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
-          v-if="role == 1">{{ $t("form.Edit") }}</a>
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
-          v-if="role == 1">{{ $t('flowPool.Waring') }}</a>
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
+          $t("form.Edit") }}</a>
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)">{{
+          $t('flowPool.Waring') }}</a>
         <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelgetCard(record)">导卡</a> -->
         <!-- 删除 -->
         <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
-          @ok="handleDel(record.id)" v-if="role == 1">
+          @ok="handleDel(record.id)">
           <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
             $t("form.Delete")
           }}</a>

src/views/order/BuyCard/index.vue → src/views/admin/order/BuyCard/index.vue

@@ -5,14 +5,6 @@
     <div class="search-section">
       <Search :SearchForm="SearchFormBuyOrder" @query="initData" @reset="reset" />
     </div>
-    <div class="audit-btn" v-if="userType == 2">
-      <a-button @click="showAudit = true" type="text">
-        <template #icon>
-          <icon-plus-circle />
-        </template>
-        <template #default>{{ $t('order.CardPurchase') }}</template>
-      </a-button>
-    </div>
     <!-- 数据表格 -->
     <a-table :data="tableData" :pagination="pageData" :columns="BuyOrdercolumns" @page-change="evChangePage"
       :scroll="{ x: 'auto' }">
@@ -36,23 +28,15 @@
       </template>
       <template #operate="{ record }">
         <div class="setting">
-          <div v-if="userType == 1">
-            <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1"
-              @click="statusOrder(record)">{{ $t('order.examine') }}</a-button>
-            <a-button @click="uploadModal(record)" type="text">{{ record.contractImg == '' ? $t('order.UploadContract')
-              : $t('order.ViewTheContract')
-              }}</a-button>
-          </div>
-          <div v-if="userType == 2">
-            <a-button type="text" @click="adminCancel(record)" v-if="record.moderationStatus == 2 && userType !== 1">{{
-              $t('order.unsubscribe') }}</a-button>
-          </div>
-          <a-button @click="openPriceing(record)" type="text" v-if="record.moderationStatus == 2 && userType == 1">{{
+          <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1"
+            @click="statusOrder(record)">{{ $t('order.examine') }}</a-button>
+          <a-button @click="uploadModal(record)" type="text">{{ record.contractImg == '' ? $t('order.UploadContract')
+            : $t('order.ViewTheContract')
+            }}</a-button>
+          <a-button @click="openPriceing(record)" type="text" v-if="record.moderationStatus == 2 ">{{
             $t('order.UploadAmount') }}</a-button>
-          <a-button @click="openEndDate(record)" type="text" v-if="userType == 1 && record.moderationStatus == 2">{{
+          <a-button @click="openEndDate(record)" type="text" v-if=" record.moderationStatus == 2">{{
             $t('order.ChangeValidity') }}</a-button>
-          <!-- <a-button @click="openEndDate(record)" type="text" v-if="userType == 2 && record.moderationStatus == 2">{{
-            $t('order.ChangeTariff') }}</a-button> -->
           <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
         </div>
       </template>
@@ -95,10 +79,8 @@
       </a-form>
     </a-modal>
 
-    <Card v-model:modelValue="showAudit" @submit="initData()" />
     <Status v-model:modelValue="showStatus" @submit="initData()" :FormDataList="FormDataList" />
     <Detaile v-model:modelValue="showDetail" @submit="initData()" :FormDataList="FormDataList" />
-    <returnCard v-model:modelValue="showReturn" :ReturnData="ReturnData" @submit="initData()"></returnCard>
   </div>
 </template>
 
@@ -109,11 +91,9 @@ import { purchaseOrderList } from '@/api/path/purchase';
 import { tariiffManageDate } from '@/api/path/tariffManagement.api'
 import { UploadOrderCardContract, SettingPricing } from '@/api/path/order'
 import Upload from "@/components/upload/index.vue";
-import Card from './Card.vue'
 import Status from './status.vue'
 import Detaile from './detaile.vue'
 import Search from '@/components/Search/index.vue'
-import returnCard from './returnCard.vue'
 import { useI18n } from 'vue-i18n'
 import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 const { t } = useI18n();
@@ -121,7 +101,6 @@ import { SearchFormBuyOrder, BuyOrdercolumns } from '../config'
 // 数据层
 const state = ref({
   userName: localStorage.getItem('user_login_information')?.username,
-  userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
   currentIndex: null,
   FormDataList: {},
   pageData: {
@@ -129,7 +108,6 @@ const state = ref({
     size: 10,
     current: 1,
   },
-  showAudit: false,
   showStatus: false,
   formContract: {
     id: null,
@@ -137,8 +115,6 @@ const state = ref({
   }, // 文件上传列表
   showDetail: false,
   uploadContract: false,
-  showReturn: false,
-  ReturnData: {},
   showPrning: false,
   formPreing: {
     id: '',
@@ -155,16 +131,12 @@ const state = ref({
 });
 
 const {
-  userType,
   FormDataList,
   pageData,
-  showAudit,
   showStatus,
   formContract,
   showDetail,
   uploadContract,
-  showReturn,
-  ReturnData,
   showPrning,
   formPreing,
   showEndDate,
@@ -189,12 +161,6 @@ const processData = async (data) => {
 
 const { tableData, evChangePage, initData, reset } = tableFunction(pageData.value, purchaseOrderList, processData)
 
-// 用户退订
-const adminCancel = (data) => {
-  ReturnData.value = data
-  showReturn.value = true
-}
-
 // 订单审核
 const statusOrder = (items) => {
   FormDataList.value = items

src/views/admin/order/BuyCard/status.vue

@@ -0,0 +1,83 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.examine')" @cancel="cancel" @ok="submitStatus"
+    :okText="$t('form.Confirm')" :cancelText="$t('form.Cancel')">
+        <a-form :model="formStatus" :style="{ width: '600px' }">
+            <a-form-item :label="$t('lotCard.userName')">
+                {{ FormDataList.userName }}
+            </a-form-item>
+            <a-form-item :label="$t('order.OrderNum')">
+                {{ FormDataList.id }}
+            </a-form-item>
+            <a-form-item label="套餐计划名称">
+                {{ FormDataList.terminalName }}
+            </a-form-item>
+            <a-form-item :label="$t('order.AuditOpinion')">
+                <a-radio-group v-model="formStatus.moderationStatus" :options="optionsStatus">
+                    <template #label="{ data }">
+                        <a-tag>{{ data.label }}</a-tag>
+                    </template>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.remark')">
+                <a-textarea :placeholder="$t('form.datapoolForm.pleaseSelect')+$t('lotCard.remark')" v-model:model-value="formStatus.moderationNotes" allow-clear />
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, defineProps, toRef, defineEmits } from 'vue';
+import { OrderCardStatus } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import {useI18n} from 'vue-i18n'
+const {t} = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const state = ref({
+    formStatus: {
+        id: null,
+        moderationStatus: '', // 审核状态
+        moderationNotes: '', // 审核备注
+    },
+    optionsStatus: [
+        { label: t('order.PassTheExamination'), value: '2' },
+        { label: t('order.TurnDown'), value: '3' },
+    ],
+})
+
+const { formStatus ,optionsStatus} = toRefs(state.value)
+
+// 订单审核
+const submitStatus = async () => {
+    new Promise((resolve, reject) => {
+        formStatus.value.id = FormDataList.value.id
+        OrderCardStatus(formStatus.value).then(res => {
+            Message.success(res.message)
+            emit('update:modelValue', false)
+            emit('submit', true)
+        }).catch(error => [
+            reject(error)
+        ])
+    })
+}
+
+const cancel = ()=>{
+    emit('update:modelValue', false)
+    Object.keys(formStatus.value).forEach(key => {
+        formStatus.value[key] = ''
+    })
+}
+</script>
+<style scoped></style>

src/views/admin/order/ChangeOrder/detaile.vue

@@ -0,0 +1,164 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.OrderDetails')" :closable="false">
+        <div class="detail-box">
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.OrderNum') }}</div>
+                    <div class="item-content">{{ FormDataList.id }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('lotCard.orderType') }}</div>
+                    <div class="item-content">
+                        <a-tag color="#168cff" v-if="FormDataList.tmsStatus == 1">{{ $t('order.unshipped') }}</a-tag>
+                        <a-tag color="#00b42a" v-if="FormDataList.tmsStatus == 2">{{ $t('order.shipped') }}</a-tag>
+                    </div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('lotCard.operator') }}</div>
+                    <div class="item-content">{{ FormDataList.sourceName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.TariffName') }}</div>
+                    <div class="item-content">{{ tariffForm.label }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.BillingMode') }}</div>
+                    <div class="item-content">{{ tariffForm.billingMethodName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.SettlementCycle') }}</div>
+                    <div class="item-content">{{ tariffForm.billingcycleName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.CardType') }}</div>
+                    <div class="item-content">{{ FormDataList.cardType }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.FlowPool') }}</div>
+                    <div class="item-content">{{ FormDataList.isTrafficPool == 1 ? $t('lotCard.Yes') : $t('lotCard.No')
+                        }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.CardNum') }}</div>
+                    <div class="item-content">{{ dataDetail.length }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-table">
+            <a-table :columns="columnsDetail" :data="dataDetail" />
+        </div>
+
+        <template #footer>
+            <a-button @click="cancel">{{ $t('form.Cancel') }}</a-button>
+        </template>
+    </a-modal>
+
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef, watch } from 'vue';
+import { AcquireOrdertariff, DistributionCard, ReturntheOrderCard, GuideCardProgress } from '@/api/path/order'
+import { Getdictionary } from '@/mixins/index.js'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+    tariffForm: {},
+    res1: [],
+    res2: [],
+    res3: [],
+})
+const { tariffForm,  res1, res2, res3 } = toRefs(state.value)
+const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' }, { title: t('order.CardStatus'), dataIndex: 'status' }, { title: t('order.CreationTime'), dataIndex: 'createdAt' }
+]
+const dataDetail = ref([])
+
+const cancel = () => {
+    emit('update:modelValue', false)
+}
+
+const closeModal = () => {
+    showCard.value = false
+}
+
+watch(() => FormDataList.value, val => {
+    if (Object.keys(val).length === 0) return
+    console.log(val);
+    AcquireOrdertariff({ id: val.trafficId }).then(res => {
+        tariffForm.value = res.data
+        tariffForm.value.billingcycleName = res1.value.filter(val => val.value == res.data.billingCycle)[0]?.label;
+        tariffForm.value.billingMethodName = res2.value.filter(val => val.value == res.data.billingMethod)[0]?.label;
+        tariffForm.value.TariffInfomr = res.data.trafficBilling + '/' + res.data.trafficBillingType
+        tariffForm.value.pricingName = tariffForm.value.pricing !== '' ? tariffForm.value.pricing + '/' + res3.value.filter(val => val.value == res.data.currency)[0]?.label : '';
+    })
+    ReturntheOrderCard({ id: val.id }).then(res => {
+        dataDetail.value = (res.data || []).map(res => ({ ...res, status: res.status == 1 ? t('order.normal') : t('order.unsubscribe') }))
+    })
+}, { immediate: true })
+
+
+onMounted(async () => {
+    res1.value = await Getdictionary('Billingcycle')
+    res2.value = await Getdictionary('billingMethod')
+    res3.value = await Getdictionary('currencyType')
+})
+</script>
+<style scoped lang="less">
+.progress {
+    margin: 30px auto;
+    display: flex;
+    justify-content: center;
+}
+
+.detail-box {
+    .detail-item-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .detail-item {
+            //styleName: Body/Medium;
+            font-family: PingFang SC;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            min-width: 350px;
+
+            .item-label {
+                color: rgba(0, 0, 0, 0.4);
+                width: 120px;
+                text-align: right;
+                margin-right: 10px;
+            }
+
+            .item-content {
+                color: rgba(51, 51, 51, 1);
+            }
+        }
+    }
+}
+</style>

src/views/admin/order/ChangeOrder/index.vue

@@ -0,0 +1,187 @@
+<!-- 购卡订单 -->
+<template>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search :SearchForm="SearchFormBuyOrder" @query="intData" @reset="reset" />
+    </div>
+    <!-- 数据表格 -->
+    <a-table :data="tableData" :pagination="pageData" :columns="ChangeOrdercolumns" @page-change="evChangePage"
+      :scroll="{ x: 'auto' }">
+      <template #image="{ record }">
+        <a-image width="60" height="60" :src="record.contractImg" :preview-props="{
+          actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
+        }" style="cursor: pointer;">
+        </a-image>
+      </template>
+      <template #id="{ record }">
+        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
+      </template>
+      <template #statusType="{ record }">
+        <a-tag color="#ff7d00" v-if="record.moderationStatus == 1">{{ $t('order.TobeReviewed') }}</a-tag>
+        <a-tag color="#00b42a" v-if="record.moderationStatus == 2">{{ $t('order.PassTheExamination') }}</a-tag>
+        <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">{{ $t('order.rejected') }}</a-tag>
+      </template>
+      <template #LogisticsStatus="{ record }">
+        <a-tag color="#168cff" v-if="record.tmsStatus == 1">{{ $t('order.unshipped') }}</a-tag>
+        <a-tag color="#00b42a" v-if="record.tmsStatus == 2">{{ $t('order.shipped') }}</a-tag>
+      </template>
+      <template #operate="{ record }">
+        <div class="setting">
+          <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1 "
+            @click="statusOrder(record)">{{ $t('order.examine') }}</a-button>
+          <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
+        </div>
+      </template>
+    </a-table>
+
+    <Status v-model:modelValue="showStatus" @submit="intData()" :FormDataList="FormDataList" />
+    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs } from 'vue';
+import { purchaseOrderList } from '@/api/path/purchase';
+import { Getdictionary } from '@/mixins/index.js'
+import Status from './status.vue'
+import Detaile from './detaile.vue'
+import Search from '@/components/Search/index.vue'
+import { SearchFormBuyOrder,ChangeOrdercolumns } from '../config'
+// 数据层
+const state = ref({
+  userName: localStorage.getItem('user_login_information')?.username,
+  tableData: [],
+  FormDataList:{},
+  pageData: {
+    total: 0,
+    size: 10,
+    current: 1,
+  },
+  showStatus: false,
+  showDetail: false,
+  SearchForm: {},
+  orderTypeStatus: []
+});
+
+const {
+  tableData,
+  pageData,
+  FormDataList,
+  showStatus,
+  showDetail,
+  SearchForm,
+  orderTypeStatus
+} = toRefs(state.value);
+
+
+
+// 订单列表
+const intData = async (item) => {
+  if (item) {
+    SearchForm.value = item
+  }
+  const param = {
+    current: pageData.value.current,
+    size: pageData.value.size,
+    ...SearchForm.value
+  }
+  let dict = await Getdictionary(['cardType','source','orderType'])
+  orderTypeStatus.value = dict[2]
+  purchaseOrderList(param).then(res => {
+    tableData.value = (res.data.records || []).map((item, key) => {
+      return {
+        ...item,
+        index: key + 1,
+        sourceName:filterDict(dict[0],item.source) ,
+        cardType:filterDict(dict[1],item.simType) 
+      }
+    });
+    pageData.value.total = res.data.total;
+  })
+}
+
+const reset = (item) => {
+  SearchForm.value = item,
+  pageData.value.current = 1,
+  intData()
+}
+// 分页
+const evChangePage = (page) => {
+  pageData.value.current = page
+  intData()
+}
+
+// 订单审核
+const statusOrder = (items) => {
+  FormDataList.value = items
+  showStatus.value = true
+}
+
+// 查看订单详情
+const openDetail = async (item) => {
+  FormDataList.value = item
+  showDetail.value = true;
+}
+
+onMounted(() => {
+  intData();
+})
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.setting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.arco-table-th {
+  white-space: nowrap;
+}
+
+.audit-txt {
+  display: flex;
+  flex-wrap: wrap;
+
+  .audit-tag {
+    width: 180px;
+    color: #b2b2b2;
+    margin-right: 20px;
+
+    span {
+      color: #000;
+      margin-left: 20px;
+    }
+  }
+}
+
+.audit-btn {
+  margin-bottom: 10px;
+}
+
+
+
+.detail-table {
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
+</style>

src/views/admin/order/ChangeOrder/status.vue

@@ -0,0 +1,83 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.examine')" @cancel="cancel" @ok="submitStatus"
+    :okText="$t('form.Confirm')" :cancelText="$t('form.Cancel')">
+        <a-form :model="formStatus" :style="{ width: '600px' }">
+            <a-form-item :label="$t('lotCard.userName')">
+                {{ FormDataList.userName }}
+            </a-form-item>
+            <a-form-item :label="$t('order.OrderNum')">
+                {{ FormDataList.id }}
+            </a-form-item>
+            <a-form-item label="资费套餐名称">
+                {{ FormDataList.terminalName }}
+            </a-form-item>
+            <a-form-item :label="$t('order.AuditOpinion')">
+                <a-radio-group v-model="formStatus.moderationStatus" :options="optionsStatus">
+                    <template #label="{ data }">
+                        <a-tag>{{ data.label }}</a-tag>
+                    </template>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.remark')">
+                <a-textarea :placeholder="$t('form.datapoolForm.pleaseSelect')+$t('lotCard.remark')" v-model:model-value="formStatus.moderationNotes" allow-clear />
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, toRefs, defineProps, toRef, defineEmits } from 'vue';
+import { OrderCardStatus } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import {useI18n} from 'vue-i18n'
+const {t} = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const state = ref({
+    formStatus: {
+        id: null,
+        moderationStatus: '', // 审核状态
+        moderationNotes: '', // 审核备注
+    },
+    optionsStatus: [
+        { label: t('order.PassTheExamination'), value: '2' },
+        { label: t('order.TurnDown'), value: '3' },
+    ],
+})
+
+const { formStatus ,optionsStatus} = toRefs(state.value)
+
+// 订单审核
+const submitStatus = async () => {
+    new Promise((resolve, reject) => {
+        formStatus.value.id = FormDataList.value.id
+        OrderCardStatus(formStatus.value).then(res => {
+            Message.success(res.message)
+            emit('update:modelValue', false)
+            emit('submit', true)
+        }).catch(error => [
+            reject(error)
+        ])
+    })
+}
+
+const cancel = ()=>{
+    emit('update:modelValue', false)
+    Object.keys(formStatus.value).forEach(key => {
+        formStatus.value[key] = ''
+    })
+}
+</script>
+<style scoped></style>

src/views/system/role/index.vue → src/views/admin/system/role/index.vue

@@ -244,7 +244,7 @@ const evInitData = async () => {
   refData.defaultCard = data.map((item) => {
     item.children = item.children.map((cItem) => {
       cItem.name = getParseLang(cItem.name, langStore.getLang)
-      cItem.children = cItem.children.map((cItem) => {
+      cItem.children = cItem.children?.map((cItem) => {
         cItem.name = getParseLang(cItem.name, langStore.getLang)
         return cItem
       })

src/views/tariffManagement/Management/add.vue → src/views/admin/tariffManagement/Management/add.vue

@@ -85,7 +85,7 @@
                     </template>
                 </a-input>
             </a-form-item>
-            <a-form-item label="原价" field="networkAccessFee">
+            <a-form-item label="原价" >
                 <a-input v-model="formState.oldPricing" v-if="formState.billingMethod == 2">
                     <template #append>
                         {{ formState.currency }}

src/views/tariffManagement/SetMeal/addSetMeal.vue → src/views/admin/tariffManagement/SetMeal/addSetMeal.vue

@@ -5,8 +5,8 @@
         </div>
 
         <div class="addSetMeal">
-            <a-button type="primary" @click="visible = true">新增套餐</a-button>
-            <a-button  @click="breakFlos">返回</a-button>
+            <a-button type="primary" @click="visible = true; Edit = true">新增套餐</a-button>
+            <a-button @click="breakFlos">返回</a-button>
         </div>
 
         <div class="table">
@@ -29,7 +29,7 @@
         </div>
 
 
-        <a-modal v-model:visible="visible" width="600px" @cancel="handelCancel" title="新增套餐计划">
+        <a-modal v-model:visible="visible" width="600px" @cancel="handelCancel" :title="Edit ? '新增套餐计划商品' : '编辑套餐计划商品'">
             <div class="Form">
                 <a-form ref="formRef" :rules="rules" :model="Form">
                     <a-form-item label="套餐名称" field="label" validate-trigger="input">
@@ -72,7 +72,7 @@
                 </a-form>
             </div>
             <template #footer>
-                <a-button @click="visible = false">取消</a-button>
+                <a-button @click="handelCancel">取消</a-button>
                 <a-button type="primary" @click="handleSubmit">确定</a-button>
             </template>
         </a-modal>
@@ -119,33 +119,45 @@ const state = ref({
         id: "",
     },
     formRef: null,
-    Type: true,
+    Edit: true
 })
-const { pagination, visible, puyType, Currency, cyciy, tariffListData, Form, formRef, billingMethodList, Type } = toRefs(state.value)
+const { pagination, visible, puyType, Currency, cyciy, tariffListData, Form, formRef, billingMethodList, Edit } = toRefs(state.value)
 
 const rules = {
-    label: [{ required: true, message: '套餐名称不能为空' }],
-    type: [{ required: true, message: '请选择充值类型' }],
-    period: [{ required: true, message: '请填写充值周期' }, {
+    label: [{ required: true, message: '套餐名称不能为空' }, {
         validator: (value, cb) => {
-            const pattern = /^[1-9]\d*$/
-            if (!pattern.test(value)) {
-                cb('请输入整数')
+            if (value.length > 10) {
+                cb('套餐名称最多10个字符');
             } else {
-                cb()
+                cb();
             }
         }
     }],
-    price: [{ required: true, message: '请填写充值售价' }, {
+    type: [{ required: true, message: '请选择充值类型' }],
+    period: [{ required: true, message: '请填写充值周期' }, {
         validator: (value, cb) => {
             const pattern = /^[1-9]\d*$/
             if (!pattern.test(value)) {
-                cb('请输入合法的数字')
+                cb('请输入整数')
             } else {
                 cb()
             }
         }
     }],
+    price: [
+        { required: true, message: '请填写充值售价' },
+        {
+            validator: (value, cb) => {
+                // 修改正则表达式，使其支持最多两位小数
+                const pattern = /^\d+(\.\d{1,2})?$/;
+                if (!pattern.test(value)) {
+                    cb('请输入合法的数字，最多支持两位小数');
+                } else {
+                    cb();
+                }
+            }
+        }
+    ],
     trafficId: [{ required: true, message: '请选择充值绑定资费' }]
 }
 
@@ -153,12 +165,12 @@ const processData = (data) => {
     return (data.records || []).map((item, index) => {
         return {
             ...item,
-            price: item.price+item.currency,
+            priceName: item.price + item.currency,
             typeName: item.type == 1 ? '服务时长' : "购买流量",
-            profitPrice: item.profitPrice  + item.currency,
+            profitPrice: item.profitPrice + item.currency,
             billingMethod: filterDict(billingMethodList.value, item.billingMethod),
-            costPrice: item.costPrice  + item.trafficCurrency,
-            oldPrice: item.oldPrice  + item.trafficCurrency
+            costPrice: item.costPrice + item.trafficCurrency,
+            oldPrice: item.oldPrice + item.trafficCurrency
         }
     })
 }
@@ -175,7 +187,7 @@ const handleSubmit = () => {
                 period: Number(Form.value.period),
                 simTerminalId: props.id
             }
-            if (Type.value) {
+            if (Edit.value) {
                 delete FormList.id
             }
             let res = Type.value ? await addTariffPackage(FormList) : await UpdateTariffTtems(FormList)
@@ -197,7 +209,9 @@ const handelCancel = () => {
     Form.value.price = ""
     Form.value.currency = Currency.value[0]?.value
     Form.value.trafficId = null
-    Type.value = true
+    Edit.value = true
+    visible.value = false
+
 }
 
 
@@ -236,11 +250,11 @@ const SetUpPackage = async (record) => {
     Form.value.price = record.price.split('/')[0];
     Form.value.type = String(Form.value.type)
     visible.value = true
-    Type.value = false
+    Edit.value = false
 }
 
-const breakFlos = ()=>{
-   emits('break',true)
+const breakFlos = () => {
+    emits('break', true)
 }
 
 onMounted(async () => {
@@ -273,7 +287,7 @@ onMounted(async () => {
     margin-top: 20px;
 }
 
-.addSetMeal{
+.addSetMeal {
     display: flex;
     justify-content: space-between;
 }

src/views/tariffManagement/SetMeal/index.vue → src/views/admin/tariffManagement/SetMeal/index.vue

@@ -17,12 +17,11 @@
           </template>
           <template #Controls="{ record }">
             <a-space>
-              <a-button type="text" @click="SetUpPackage(record)">设置套餐</a-button>
-              <a-button type="text" @click="visibleQrCode = true">充值二维码</a-button>
+              <a-button type="text" @click="SetUpPackage(record)" v-if="record.isRecharge==1"> 设置套餐</a-button>
               <a-button type="text" @click="unmount(record)">{{ record.status == 1 ? '下架' : '上架' }}</a-button>
             </a-space>
           </template>
-          <template #isRecharge="{ record }">
+          <template #isRechargeName="{ record }">
             {{ filterDict(SetMealList, record.isRecharge) }}
           </template>
         </a-table>
@@ -38,7 +37,7 @@
       </template>
     </a-modal>
 
-    <a-modal v-model:visible="visibleSetMeal" width="600px" @cancel="handelCancel" title="新增套餐计划">
+    <!-- <a-modal v-model:visible="visibleSetMeal" width="600px" @cancel="handelCancel" title="新增套餐计划">
       <div class="Form">
         <a-form ref="formRef" :rules="rules" :model="Form">
           <a-form-item label="套餐计划名称" field="label" validate-trigger="blur">
@@ -64,7 +63,7 @@
         <a-button @click="visibleSetMeal = false">取消</a-button>
         <a-button type="primary" @click="handleSubmit">确定</a-button>
       </template>
-    </a-modal>
+    </a-modal> -->
     <!-- 新增套餐计划 -->
     <AddSetMeal v-if="!AddSet" :id="pid" @break="AddSet = true" />
   </div>

src/views/tariffManagement/config.js → src/views/admin/tariffManagement/config.js

@@ -6,7 +6,6 @@ export let columns = [
     width: 200,
     ellipsis: true,
   },
-  // { title: window.$t('tariffManagement.feeCode'), dataIndex: 'feeCode', align: 'center', width: 200 },
   {
     title: window.$t("tariffManagement.userName"),
     dataIndex: "userName",
@@ -35,15 +34,6 @@ export let columns = [
     width: 200,
     ellipsis: true,
   },
-  {
-    title: window.$t("tariffManagement.TestFlowPacketName"),
-    dataIndex: "testMetadataPackagesName",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  // { title: window.$t('tariffManagement.trafficType'), dataIndex: 'trafficTypeName', align: 'center', width: 200 },
-  // { title: window.$t('tariffManagement.billingType'), dataIndex: 'billingTypeName', align: 'center', width: 200 },
   {
     title: window.$t("tariffManagement.billingCycle"),
     dataIndex: "billingCycleName",
@@ -58,7 +48,6 @@ export let columns = [
     width: 200,
     ellipsis: true,
   },
-  // { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bagSize', align: 'center', width: 200 },
   {
     title: window.$t("tariffManagement.pricing"),
     dataIndex: "pricingName",
@@ -66,14 +55,6 @@ export let columns = [
     width: 200,
     ellipsis: true,
   },
-  // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
-  {
-    title: window.$t("tariffManagement.ActivatedNames"),
-    dataIndex: "Activated",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
   {
     title: window.$t("tariffManagement.feeStatus"),
     dataIndex: "status",
@@ -113,167 +94,20 @@ export let columns = [
 ];
 
 
-export const userClounms = [
-  {
-    title: window.$t("tariffManagement.id"),
-    dataIndex: "Number",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.label"),
-    dataIndex: "label",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.source"),
-    dataIndex: "sourceName",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.TestFlowPacketName"),
-    dataIndex: "testMetadataPackagesName",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.billingCycleUser"),
-    dataIndex: "billingCycleName",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.pricingUser"),
-    dataIndex: "billingMethodName",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.pricing"),
-    dataIndex: "pricingName",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.feeStatus"),
-    dataIndex: "status",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.MRCName"),
-    dataIndex: "mrcAmount",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.networkName"),
-    dataIndex: "networkAccessFee",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-  {
-    title: window.$t("tariffManagement.endDate"),
-    dataIndex: "endDate",
-    align: "center",
-    width: 200,
-    ellipsis: true,
-  },
-]
-
-// 资费套餐
-export const planColumns = [
-  {
-    title: window.$t("tariffManagement.feeCode"),
-    dataIndex: "feeCode",
-    align: "center",
-    width: 200,
-  },
-  {
-    title: window.$t("tariffManagement.label"),
-    dataIndex: "label",
-    align: "center",
-    width: 200,
-  },
-  {
-    title: window.$t("tariffManagement.source"),
-    dataIndex: "sourceName",
-    align: "center",
-    width: 200,
-  },
-  {
-    title: window.$t("tariffManagement.bagSize"),
-    dataIndex: "bag_size",
-    align: "center",
-    width: 200,
-  },
-];
 
-// 资费搜索字段
-export const trafficSearchFrom = [
+export const SetMealSearchForm = [
   {
     type: "input",
     label: "客户名称",
-    field: "username",
+    field: "name",
     value: "", // 双向绑定的值
   },
   {
     type: "input",
-    label: "资费名称",
-    field: "label",
+    label: "客户编号",
+    field: "num",
     value: "", // 双向绑定的值
   },
-  {
-    type: "select",
-    label: "供应商名称",
-    field: "source",
-    options: [], // 默认空，后面会通过字典加载
-    dict: "source",
-    value: "", // 双向绑定的值
-    width: "200",
-  },
-  {
-    type: "select",
-    label: "计费方式",
-    field: "billingMethod",
-    options: [], // 默认空，后面会通过字典加载
-    dict: "billingMethod",
-    value: "", // 双向绑定的值
-    width: "200",
-  },
-  {
-    type: "select",
-    label: "计费周期",
-    field: "BillingCycle",
-    options: [], // 默认空，后面会通过字典加载
-    dict: "BillingCycle",
-    value: "", // 双向绑定的值
-    width: "200",
-  },
-  {
-    type: "date-picker",
-    label: "有效期",
-    field: "endDate",
-    value: "", // 双向绑定的值
-    width: "200",
-  },
-];
-
-
-
-export const SetMealSearchForm = [
   {
     type: "input",
     label: "套餐名称",
@@ -308,8 +142,8 @@ export const SetMealSearchForm = [
     label: "状态",
     field: "state",
     options: [
-      {label:'上架',value:'1'}, 
-      {label:'下架',value:'2'}, 
+      { label: '上架', value: '1' },
+      { label: '下架', value: '2' },
     ], // 默认空，后面会通过字典加载
     value: "", // 双向绑定的值
     width: "200",
@@ -319,10 +153,9 @@ export const SetMealSearchForm = [
 export const columnsSetMeal = [
   {
     title: "序号",
-    dataIndex: "index",
+    dataIndex: "id",
     align: "center",
     ellipsis: true,
-    render: ({ rowIndex }) => rowIndex + 1,
   },
   {
     title: "套餐计划名称",
@@ -336,9 +169,21 @@ export const columnsSetMeal = [
     align: "center",
     ellipsis: true,
   },
+  {
+    title: "客户名称",
+    dataIndex: "name",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: "客户ID",
+    dataIndex: "userId",
+    align: "center",
+    ellipsis: true,
+  },
   {
     title: "套餐计划类型",
-    slotName: "isRecharge",
+    slotName: "isRechargeName",
     align: "center",
     ellipsis: true,
   },
@@ -428,7 +273,7 @@ export const columnsTarrit = [
   },
   {
     title: "售价(终端充值)",
-    dataIndex: "price",
+    dataIndex: "priceName",
     align: "center",
     ellipsis: true,
   },
@@ -469,3 +314,82 @@ export const columnsTarrit = [
     fixed: 'right'
   },
 ]
+
+
+// 资费套餐
+export const planColumns = [
+  {
+    title: window.$t("tariffManagement.feeCode"),
+    dataIndex: "feeCode",
+    align: "center",
+    width: 200,
+  },
+  {
+    title: window.$t("tariffManagement.label"),
+    dataIndex: "label",
+    align: "center",
+    width: 200,
+  },
+  {
+    title: window.$t("tariffManagement.source"),
+    dataIndex: "sourceName",
+    align: "center",
+    width: 200,
+  },
+  {
+    title: window.$t("tariffManagement.bagSize"),
+    dataIndex: "bag_size",
+    align: "center",
+    width: 200,
+  },
+];
+
+// 资费搜索字段
+export const trafficSearchFrom = [
+  {
+    type: "input",
+    label: "客户名称",
+    field: "username",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "资费名称",
+    field: "label",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "供应商名称",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "计费方式",
+    field: "billingMethod",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "billingMethod",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "计费周期",
+    field: "BillingCycle",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "BillingCycle",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "有效期",
+    field: "endDate",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+];

src/views/tariffManagement/index.vue → src/views/admin/tariffManagement/index.vue

@@ -6,23 +6,22 @@
       <Search :SearchForm="trafficSearchFrom" @query="initData" @reset="reset" />
     </div>
     <div class="audit-btn">
-      <a-button type="text" @click="dictShowModel(1, false)" v-if="role.getRole == 1">
+      <a-button type="text" @click="dictShowModel(1, false)">
         <template #icon>
           <icon-plus-circle />
         </template>
         <template #default>{{ $t('form.Add') }}</template>
       </a-button>
     </div>
-    <a-table row-key="id" :data="tableData" :columns="role.getRole == 1?columns:userClounms" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :data="tableData" :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="dictShowModel(2, record)">编辑</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">{{
+          <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
             $t('form.Delete')
           }}</a>
         </a-popconfirm>
@@ -59,20 +58,16 @@
 </template>
 
 <script setup>
-import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
+import { onMounted, ref, toRefs } from "vue";
 import { useRoute } from "vue-router";
-import { columns, planColumns, trafficSearchFrom,userClounms } from "./config";
-import { deleteTariff, tariffList, UpdateTariffName } from "@/api/path/tariffManagement.api"
+import { columns, planColumns, trafficSearchFrom } from "./config";
+import { deleteTariff, tariffList } from "@/api/path/tariffManagement.api"
 import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
-import { useSystemStore } from '@/store/modules/systemStore'
 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({
   currency: [],
   pagination: {
@@ -93,12 +88,11 @@ const state = ref({
     showCheckedAll: true,
     onlyCurrent: false,
   },
-  ids: null,
   methodList: [],
   Form: {
     id: "",
     name: "",
-  }
+  },
 })
 const {
   currency,
@@ -112,9 +106,8 @@ const {
   formData,
   selectedKeysPlan,
   rowSelectionPlan,
-  ids,
   methodList,
-  Form
+  Form,
 } = toRefs(state.value);
 
 const addDetaile = ref(null)
@@ -124,13 +117,13 @@ const processData = (data) => {
     delete item.children
     return {
       ...item,
-      sourceName:filterDict(sourceList.value, item.source),
-      pricingName: item.billingMethod == 1 ? item.trafficBillingAmount + item.currency : item.pricing  + '/' + item.currency,
-      billingCycleName:filterDict(cycleist.value, item.billingCycle),
+      sourceName: filterDict(sourceList.value, item.source),
+      pricingName: item.billingMethod == 1 ? item.trafficBillingAmount + item.currency : item.pricing + item.currency,
+      billingCycleName: filterDict(cycleist.value, item.billingCycle),
       Activated: item.trafficBilling + item.trafficBillingType,
       status: "正常",
       bagSize: item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee,
-      billingMethodName:filterDict(methodList.value, item.billingMethod),
+      billingMethodName: filterDict(methodList.value, item.billingMethod),
       Number: index + 1
     }
   })
@@ -187,11 +180,6 @@ const handleDictValue = async () => {
   methodList.value = dict[3]
 }
 
-const meal = (data) => {
-  ids.value = data.id
-  modealShow.value = true
-}
-
 
 onMounted(async () => {
   await handleDictValue()

src/views/lotCard/cardList/config.js

@@ -4,7 +4,7 @@ export const columns = [
     dataIndex: "iccid",
     align: "center",
     ellipsis: true,
-    maxWidth:200
+    maxWidth: 200
   },
   {
     title: window.$t("lotCard.sourcePlan"),
@@ -75,12 +75,24 @@ export const columns = [
   },
   {
     title: '套餐计划类型',
-    dataIndex: "type",
+    dataIndex: "packagePlantype",
     align: "center",
     ellipsis: true,
   },
-    {
-    title:'流量包名称',
+  {
+    title: '套餐商品名称',
+    dataIndex: "packageName",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: '资费名称',
+    dataIndex: "tariffName",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: '流量包名称',
     dataIndex: "productName",
     align: "center",
     ellipsis: true,

src/views/lotCard/cardList/index.vue

@@ -80,7 +80,7 @@ const processData = (data) => {
       dataTotal: item.dataPackage[0]?.dataTotal ? item.dataPackage[0]?.dataTotal + '/MB' : '0' + '/MB',
       dataUsageTotal: item.dataUsageTotal ? item.dataUsageTotal + '/MB' : '---',
       productName: item.dataPackage[0]?.productName,
-      type: filterDict(serviceList.value, item.isRecharge)
+      packagePlantype: filterDict(setMealList.value, item.isRecharge)
     }
   })
 }

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -164,7 +164,7 @@
 <script setup>
 import { onMounted, ref, h } from "vue";
 import { getDataCDR, PauseSIMService, RecoverSIMService, OperationRecord, OffSIMCard, getOrderCard, getFlowData } from '@/api/path/lotCard.api'
-import { Getdictionary } from '@/mixins/index'
+import { Getdictionary, filterDict } from '@/mixins/index'
 import { Message, Modal } from '@arco-design/web-vue'
 // 图表插件
 import * as echarts from "echarts";
@@ -282,11 +282,10 @@ const ICCIDPuyData = async (id) => {
   let res = await getOrderCard({ iccid: id, current: 1, size: 10 })
   let res1 = await Getdictionary('puyType')
   dataTopup.value = (res.data.records || []).map(val => {
-    const payType = res1.filter(item => item.value == val.payStatus)[0]?.label
     return {
       ...val,
-      puyStatus: payType,
-      payAmount: val.payAmount + '/' + val.currency
+      puyStatus: filterDict(res1, val.payStatus),
+      payAmount: val.payAmount + val.currency
     }
   })
 
@@ -384,7 +383,7 @@ const optionsRecordSetting = async () => {
   dataOperation.value = res.data.records.map(res => {
     return {
       ...res,
-      source: res1.data.filter(item => item.value == res.source)[0]?.label
+      source: res1.filter(item => item.value == res.source)[0]?.label
     }
   })
 }

src/views/lotCard/orderMange/config.js

@@ -1,28 +0,0 @@
-export const columns = [
-  { title: window.$t('lotCard.iccid'), dataIndex: 'ICCID', align: 'center', width: 200 },
-  { title: window.$t('lotCard.dataBundleId'), dataIndex: 'dataBundleId', align: 'center', width: 200 },
-  { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expire_time', align: 'center', width: 200 },
-  { title: window.$t('lotCard.CreateTime'), dataIndex: 'created_time', align: 'center', width: 200 },
-  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width: 200 },
-  { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width: 200 },
-  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
-  { title: window.$t('lotCard.orderID'), dataIndex: 'orderId', align: 'center', width: 200 },
-  { title: window.$t('lotCard.price'), dataIndex: 'price', align: 'center', width: 200 },
-  { title: window.$t('lotCard.quantity'), dataIndex: 'quantity', align: 'center', width: 200 },
-  { title: window.$t('lotCard.packageStatus'), dataIndex: 'statusName', align: 'center', width: 160 },
-  { title: window.$t('lotCard.source'), dataIndex: 'sourceName', align: 'center', width: 100 },
-  { title: window.$t('lotCard.UserId'), dataIndex: 'user_id', align: 'center', width: 200 },
-  // {
-  //   title: window.$t('global.common.operations'),
-  //   dataIndex: 'id',
-  //   slotName: 'id',
-  //   align: 'center',
-  //   width: 180,
-  //   fixed: "right",
-  // }
-]
-
-
-
-
-

src/views/lotCard/orderMange/index.vue

@@ -1,283 +0,0 @@
-<template>
-  <!-- 订单管理 -->
-  <div class="container">
-    <div class="head-title">
-      <span>{{ route.meta.title }} </span>
-      <span class="head-title-right">
-                <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
-                              :cancel-text="$t('form.Cancel')" @ok="handleOrderDialog(record)">
-                    <!-- <a-button class="m-r-10" type="primary">{{ $t('lotCard.titleOrder') }}</a-button> -->
-                </a-popconfirm>
-                <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
-                              :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
-                    <!-- <a-button type="primary">{{ $t('lotCard.titleCancelOrder') }}</a-button> -->
-                </a-popconfirm>
-            </span>
-    </div>
-    <!-- 搜索条件区 -->
-    <div class="search-section">
-      <a-form :model="searchForm" ref="formRef" layout="inline">
-        <!-- <a-form-item field="ICCID" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
-            :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
-            <a-input v-model="searchForm.ICCID" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
-                allow-clear />
-        </a-form-item> -->
-        <a-form-item field="ICCID" :label="$t('lotCard.iccid')">
-          <a-input v-model="searchForm.ICCID" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
-                   allow-clear/>
-        </a-form-item>
-        <a-form-item field="dataBundleId" :label="$t('lotCard.dataBundleId')">
-          <a-input v-model="searchForm.cardNumber"
-                   :placeholder="$t('lotCard.please') + $t('lotCard.dataBundleId')" 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' }"
-             @page-change="evChangePage">
-      <template #id="{ record }">
-        <!-- 获取流量包数据 -->
-        <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
-                      :cancel-text="$t('form.Cancel')" @ok="handleOrderDialog(record)">
-          <a class="a-link" v-if="!(record.status == 1 || record.status == 3)" 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="handleUnsubscribeDialog(record)">
-          <a class="a-link" v-if="record.status == 1 || record.status == 3" href="javascript:;"
-             style="margin-right: 1rem">{{
-              $t('lotCard.titleCancelOrder')
-            }}</a>
-        </a-popconfirm>
-      </template>
-
-    </a-table>
-  </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 {getOrderLogsList, setOrderDataPlan, orderCancel} from "@/api/path/lotCard.api"
-import {enum_dict} from "@/hooks/enum";
-import {useSystemStore} from '@/store/modules/systemStore'
-import {Getdictionary} from '@/mixins/index.js'
-
-const useSystem = useSystemStore()
-
-const {proxy} = getCurrentInstance()
-const formRef = ref()
-const searchForm = ref({
-  "orderId": "",
-  "is_Refuel": "",
-  "refuelingId": "",
-  "dataBundleId": "",
-  "quantity": 0,
-  "ICCID": "",
-  "sendLang": "",
-  "price": "",
-  "totalAmount": "",
-  "currency": "",
-  "userId": 0,
-  "current": 1,
-  "size": 10
-});
-
-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 getOrderLogsList(param)
-  const res1 = await  Getdictionary('subscriptionRelationshipStatus')
-  const res2 = await  Getdictionary('source')
-  dataSource.value = (data.records || []).map(item => {
-    const statusName = (res1.filter((dicVal) => dicVal.typeKey == 'subscriptionRelationshipStatus') || []).find(val => val.value == item.status)?.label
-    const sourceName = (res2.filter( (dicVal) => dicVal.typeKey =='source') || []).find(val => val.value == item.source)?.label
-    return {
-      ...item,
-      sourceName,
-      statusName
-    }
-  })
-  pagination.value.total = data.total
-}
-
-
-// 订购生成订单
-const handleOrderDialog = async (info) => {
-  let paramList = []
-  if (selectedKeys.value.length > 0) {
-    const list = dataSource.value.filter(item => selectedKeys.value.some(item2 => item.id === item2))
-
-    paramList = list.map(item => {
-      return {
-        ICCID: item.ICCID,
-        dataBundleId: item.dataBundleId,
-        source: item.source,
-        quantity: 1
-      }
-    })
-  }
-  if (info && Object.keys(info).length > 0) {
-    paramList = [{
-      ICCID: info.ICCID,
-      dataBundleId: info.dataBundleId,
-      source: info.source,
-      quantity: 1
-    }]
-  }
-
-
-  if (selectedKeys.value.length > 0 || info && Object.keys(info).length > 0) {
-
-    const {code, data} = await setOrderDataPlan(paramList)
-
-    if (code == 200) {
-      Message.success({
-        content: data,
-        duration: 2000,
-      })
-    }
-  } else {
-    Message.warning({
-      content: $t('lotCard.tipsOrder'),
-      duration: 2000,
-    })
-  }
-}
-
-// 退订
-const handleUnsubscribeDialog = async (record) => {
-  // 订阅关系状态
-  // 1：未激活
-  // 2: 已过期
-  // 3: 已激活99：已退款
-  let param = {}
-  let statusFlag = true
-  if (selectedKeys.value.length > 0) {
-    const list = dataSource.value.filter(item => selectedKeys.value.some(item2 => item.id === item2))
-    list.forEach(item => {
-      if (!(item.status == 1 || item.status == 3)) statusFlag = false
-    })
-    param = {
-      ids: selectedKeys.value
-    }
-  }
-  if (record && record.id && !(record.status == 1 || record.status == 3)) {
-    statusFlag = false
-    param = {
-      ids: [record.id]
-    }
-  }
-
-
-  if ((selectedKeys.value.length > 0 || record && record.id) && statusFlag) {
-
-    const {code, data} = await orderCancel(param)
-
-    if (code == 200) {
-      Message.success({
-        content: data,
-        duration: 2000,
-      })
-    }
-  } else {
-    Message.warning({
-      content: $t('lotCard.tipsOrder'),
-      duration: 2000,
-    })
-  }
-};
-
-//
-
-const evChangePage = (current) => {
-  pagination.value.current = current
-  intData()
-}
-const handleSearch = () => {
-  formRef.value.validate((errors) => {
-    if (!errors) {
-      intData()
-    }
-  });
-}
-const resetSearch = () => {
-  proxy.$refs.formRef.resetFields()
-  intData()
-}
-
-
-onMounted(() => {
-  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>

src/views/overflowalarm/index.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="overflow-alarm">
-    <!-- 搜索条件区 -->
-    <div class="search-section">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="iccid" label="ICCID">
-          <a-input v-model="searchForm.iccid" placeholder="请输入ICCID" allow-clear />
-        </a-form-item>
-        <a-form-item field="cardNumber" label="卡号">
-          <a-input v-model="searchForm.cardNumber" placeholder="请输入卡号" allow-clear />
-        </a-form-item>
-        <a-form-item field="usageStatus" label="使用状态">
-          <a-select
-            v-model="searchForm.usageStatus"
-            placeholder="请选择使用状态"
-            allow-clear
-            style="width: 160px"
-          >
-            <a-option v-for="status in usageStatusOptions" :key="status.value" :value="status.value">
-              {{ status.label }}
-            </a-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item field="channel" label="通道">
-          <a-select
-            v-model="searchForm.channel"
-            placeholder="请选择通道"
-            allow-clear
-            style="width: 160px"
-          >
-            <a-option v-for="channel in channelOptions" :key="channel.value" :value="channel.value">
-              {{ channel.label }}
-            </a-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item>
-          <a-space>
-            <a-button type="primary" @click="handleSearch">搜索</a-button>
-            <a-button @click="resetSearch">重置</a-button>
-          </a-space>
-        </a-form-item>
-      </a-form>
-    </div>
-  
-    <!-- 数据表格 -->
-    <a-table :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
-      <template #usageStatus="{ record }">
-        <a-tag :color="getStatusColor(record.usageStatus)">{{ record.usageStatus }}</a-tag>
-      </template>
-    </a-table>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-import { Message } from '@arco-design/web-vue';
-
-const searchForm = reactive({
-  iccid: '',
-  cardNumber: '',
-  usageStatus: '',
-  channel: '',
-});
-
-const usageStatusOptions = [
-  { label: '正常', value: 'normal' },
-  { label: '停机', value: 'suspended' },
-];
-
-const channelOptions = [
-  { label: '通道1', value: 'channel1' },
-  { label: '通道2', value: 'channel2' },
-];
-
-const columns = [
-  { title: 'ICCID', dataIndex: 'iccid' },
-  { title: '卡号', dataIndex: 'cardNumber' },
-  { title: '使用状态', slotName: 'usageStatus' },
-  { title: '通道', dataIndex: 'channel' },
-  { title: '到期日期', dataIndex: 'expirationDate' },
-  { title: '客户名称', dataIndex: 'customerName' },
-  { title: '套餐已用量', dataIndex: 'usedData' },
-  { title: '本月月量', dataIndex: 'monthlyData' },
-  { title: '超套用量', dataIndex: 'overUsage' },
-  { title: '资费合计', dataIndex: 'totalCost' },
-];
-
-const tableData = ref([]);
-
-const pagination = reactive({
-  total: 100,
-  current: 1,
-  pageSize: 10,
-});
-
-const getStatusColor = (status) => {
-  const colorMap = {
-    '正常': 'green',
-    '停机': 'red',
-  };
-  return colorMap[status] || 'blue';
-};
-
-const handleSearch = () => {
-  console.log('Search form data:', searchForm);
-  Message.success('执行搜索操作');
-};
-
-const resetSearch = () => {
-  Object.keys(searchForm).forEach(key => {
-    searchForm[key] = '';
-  });
-  Message.success('搜索条件已重置');
-};
-</script>
-
-<style scoped>
-.overflow-alarm {
-  padding: 20px;
-}
-
-.search-section {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.arco-table-th {
-  white-space: nowrap;
-}
-</style>

src/views/staging/index.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="container">
-    <div class="head-title">
-      <span> {{ route.meta.title }} </span>
-    
-    </div>
-    <div>
-      <a-card
-        v-for="item in componentData"
-        :key="item.id"
-        :style="{ width: '360px' }"
-      >
-        <template #actions>
-          <span class="icon-hover"> <IconThumbUp /> </span>
-          <span class="icon-hover"> <icon-delete /> </span>
-          <span class="icon-hover" @click="openCode(item)">  <icon-code /> </span>
-        </template>
-        <template #cover>
-          <div
-            :style="{
-              height: '204px',
-              overflow: 'hidden',
-            }"
-          >
-            <img
-              :style="{ width: '100%', transform: 'translateY(-20px)' }"
-              alt="dessert"
-              :src="item.thumbnail"
-            />
-          </div>
-        </template>
-
-        <a-card-meta :title="item.title" :description="item.introduce">
-          <template #avatar>
-            <div
-              :style="{
-                display: 'flex',
-                alignItems: 'center',
-                color: '#1D2129',
-              }"
-            >
-              <a-avatar :size="30" :style="{ marginRight: '8px' }">
-                <img
-                  v-if="item.avatar"
-                  class="avatar-image"
-                  alt="avatar"
-                  :src="item.avatar"
-                />
-                <span v-else>{{ item.name.charAt(0).toUpperCase() }}</span>
-              </a-avatar>
-              <a-typography-text>{{ item.name }}</a-typography-text>
-            </div>
-          </template>
-        </a-card-meta>
-      </a-card>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from "vue";
-import { componentList } from "@/api/path/component.api";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-
-const componentData = ref([]);
-
-const initData = async () => {
-  const { data } = await componentList({});
-  componentData.value = data;
-};
-
-const openCode = (codeData) => {
-  console.log(codeData)
-}
-
-onMounted(() => {
-  initData();
-});
-</script>
-
-<style scoped lang="less">
-.head-title {
-  display: flex;
-  justify-content: space-between;
-  .fn-headTitleDiv();
-  padding: 0.5rem 0;
-  margin-bottom: 1rem;
-}
-.icon-hover {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  transition: all 0.1s;
-}
-.icon-hover:hover {
-  background-color: rgb(var(--gray-2));
-}
-:deep(.arco-avatar-image){
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.avatar-image{
-  background-color: #000 !important;
-  border-radius: 50%;
-  width: 28px;
-  height: 28px;
-}
-</style>

src/views/SetMeal/config.js → src/views/user/SetMeal/config.js

@@ -2,7 +2,19 @@
 export const SetMealSearchForm = [
   {
     type: "input",
-    label: "套餐名称",
+    label: "客户名称",
+    field: "name",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "客户编号",
+    field: "num",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "套餐计划名称",
     field: "label",
     value: "", // 双向绑定的值
   },
@@ -34,8 +46,8 @@ export const SetMealSearchForm = [
     label: "状态",
     field: "state",
     options: [
-      {label:'上架',value:'1'}, 
-      {label:'下架',value:'2'}, 
+      { label: '上架', value: '1' },
+      { label: '下架', value: '2' },
     ], // 默认空，后面会通过字典加载
     value: "", // 双向绑定的值
     width: "200",
@@ -46,10 +58,9 @@ export const SetMealSearchForm = [
 export const columnsSetMeal = [
   {
     title: "序号",
-    dataIndex: "index",
+    dataIndex: "id",
     align: "center",
     ellipsis: true,
-    render: ({ rowIndex }) => rowIndex + 1,
   },
   {
     title: "套餐计划名称",
@@ -63,9 +74,21 @@ export const columnsSetMeal = [
     align: "center",
     ellipsis: true,
   },
+  {
+    title: "客户名称",
+    dataIndex: "name",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: "客户ID",
+    dataIndex: "userId",
+    align: "center",
+    ellipsis: true,
+  },
   {
     title: "套餐计划类型",
-    slotName: "isRecharge",
+    slotName: "isRechargeName",
     align: "center",
     ellipsis: true,
   },

src/views/SetMeal/index.vue → src/views/user/SetMeal/index.vue

@@ -12,11 +12,12 @@
             <a-tag :color="record.status == 1 ? '#7bc616' : '#86909c'">{{ record.status == 1 ? '上架' : '下架' }}</a-tag>
           </template>
           <template #Controls="{ record }">
-            <a-space>
+            <a-space v-if="record.isRecharge==1">
               <a-button type="text" @click="SetUpPackage(record)">查看套餐</a-button>
             </a-space>
+            <text v-else>---</text>
           </template>
-          <template #isRecharge="{ record }">
+          <template #isRechargeName="{ record }">
             {{ filterDict(SetMealList, record.isRecharge) }}
           </template>
         </a-table>

src/views/user/order/BuyCard/Card.vue

@@ -0,0 +1,228 @@
+<template>
+    <!-- 创建 -->
+    <a-modal v-model:visible="modelValue" :title="$t('order.CardPurchase')" width="600px"
+        @cancel="closeModal(showAudit, formState)" centered :maskClosable="false" :okText="$t('form.Confirm')"
+        :cancelText="$t('form.Cancel')" :footer="null">
+        <a-form ref="formRef" :rules="rules" :model="formState" @submit="submitPurchase">
+            <a-form-item field="customerName" :label="$t('lotCard.userName')">
+                <div class="audit-txt">{{ userName }}</div>
+            </a-form-item>
+            <a-form-item label="运营商" field="source">
+                <a-select v-model="formState.source" :style="{ width: '380px' }"
+                    :placeholder="$t('form.datapoolForm.pleaseSelect') + '运营商'">
+                    <a-option v-for="item in sourceList" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item label="套餐计划类型" field="isRecharge">
+                <a-radio-group v-model="formState.isRecharge" :options="optionsType" />
+            </a-form-item>
+            <a-form-item label="套餐计划名称" field="SimTerminalId">
+                <a-select v-model="formState.SimTerminalId" :style="{ width: '380px' }"
+                    :placeholder="$t('form.datapoolForm.pleaseSelect') + '套餐计划名称'">
+                    <a-option v-for="item in PackagePlan" :value="item.id" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.CardType')" field="cardType">
+                <a-select v-model="formState.simType" :style="{ width: '380px' }"
+                    :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('lotCard.CardType')">
+                    <a-option v-for="item of orderType" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.SilentPeriod')">
+                <a-select v-model="formState.periodOfSilence" :style="{ width: '380px' }"
+                    :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('lotCard.SilentPeriod')">
+                    <a-option v-for="item of silenceOptions" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.FormationPool')" field="flowPool">
+                <a-radio-group v-model="formState.isTrafficPool" :options="flowPoolData">
+                    <template #label="{ data }">
+                        <a-tag>{{ data.label }}</a-tag>
+                    </template>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.FlowPool')" v-if="formState.isTrafficPool == 1" field="poolId">
+                <a-select v-model="formState.poolId" :style="{ width: '380px' }"
+                    :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('lotCard.FlowPool')">
+                    <a-option v-for="item of FlowPool" :value="item.id" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.QuantityCardsPurchased')" field="num">
+                <a-input v-model="formState.quantity"
+                    :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('lotCard.QuantityCardsPurchased')" />
+            </a-form-item>
+            <a-form-item>
+                <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{ $t('form.Confirm')
+                    }}</a-button>
+                <a-button @click="closeModal(formState)">{{ $t('form.Cancel') }}</a-button>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, toRefs, defineProps, watch, toRef } from 'vue';
+import { tariffList, ExampleQueryTrafficPool, PackageSchedule } from "@/api/path/tariffManagement.api";
+import { Getdictionary ,} from '@/mixins/index.js'
+import { CardPurchase } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const modelValue = toRef(props, 'modelValue')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+    userName: JSON.parse(localStorage.getItem('user_login_information'))?.username,
+    showAudit: false,
+    formRef: null,
+    formState: {
+        source: null, // 来源
+        periodOfSilence: "", // 静默期
+        isTrafficPool: "1", // 是否是流量池 1:是 2:否
+        quantity: null, // 采购数量
+        simType: "",// 卡类型
+        poolId: null,
+        isRecharge: '1',
+        SimTerminalId: null
+    },
+    sourceList: [],
+    silenceOptions: [], // 沉默期
+    orderType: [], // 卡类型
+    flowPoolData: [], // 组池
+    tariffData: [],
+    FlowPool: [], // 流量池
+    optionsType: [],
+    PackagePlan: []
+})
+
+const { showAudit, formState, sourceList, silenceOptions, orderType, flowPoolData, userName, optionsType, tariffData, formRef, FlowPool, PackagePlan } = toRefs(state.value)
+
+const rules = {
+    source: [{ required: true, trigger: 'change', }],
+    SimTerminalId: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    simType: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    periodOfSilence: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    isTrafficPool: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    quantity: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    poolId: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    source: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+};
+
+const handleDictValue = async () => {
+
+    const dict = await Getdictionary(['source', 'cardType', 'silenceOf', 'groupPool', 'setMeal'])
+
+    // 分别将返回的数据保存到响应的 ref 变量中
+    sourceList.value = dict[0];
+    orderType.value = dict[1];
+    silenceOptions.value = dict[2];
+    flowPoolData.value = dict[3];
+    optionsType.value = dict[4];
+    getList(formState.value.isRecharge)
+
+}
+// 确认购卡
+const submitPurchase = ({ values, errors }) => {
+    formRef.value.validate(async (errors) => {
+        if (!errors) {
+            const data = {
+                source: String(formState.value.source),
+                SimTerminalId: formState.value.SimTerminalId,
+                quantity: Number(formState.value.quantity),
+                simType: formState.value.simType,
+                periodOfSilence: String(formState.value.periodOfSilence),
+                isTrafficPool: formState.value.isTrafficPool,
+                poolId: formState.value.poolId,
+                isRecharge: Number(formState.value.isRecharge)
+            }
+            CardPurchase(data).then(res => {
+                Message.success(res.message)
+                emit('submit', true)
+                closeModal()
+            })
+        }
+    })
+}
+
+const closeModal = (val) => {
+    emit('update:modelValue', false)
+    Object.keys(formState.value).forEach(key => {
+        formState.value[key] = ''
+    })
+    formState.value.isRecharge = '1'
+    formState.value.isTrafficPool = '1'
+}
+
+// 套餐计划
+const getList = async (val) => {
+    const param = {
+        current: 1,
+        size: 999,
+        isRecharge: Number(val)
+    }
+    let res = await PackageSchedule(param)
+    if (res.code === 200) {
+        PackagePlan.value = res.data.records;
+    }
+}
+
+// 流量池
+watch(() => formState.value?.isTrafficPool, val => {
+    if (val == 1) {
+        ExampleQueryTrafficPool().then(res => {
+            FlowPool.value = res.data
+        })
+    }
+}, { immediate: true })
+watch(() => modelValue.value, val => {
+    if (val) {
+        handleDictValue()
+    }
+})
+watch(() => formState.value.isRecharge, async val => {
+    formState.value.SimTerminalId = null
+    getList(val)
+}, { deep: true })
+</script>
+<style scoped></style>

src/views/user/order/BuyCard/detaile.vue

@@ -0,0 +1,262 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.OrderDetails')" :closable="false">
+        <div class="detail-box">
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.OrderNum') }}</div>
+                    <div class="item-content">{{ FormDataList.id }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('lotCard.orderType') }}</div>
+                    <div class="item-content">
+                        <a-tag color="#168cff" v-if="FormDataList.tmsStatus == 1">{{ $t('order.unshipped') }}</a-tag>
+                        <a-tag color="#00b42a" v-if="FormDataList.tmsStatus == 2">{{ $t('order.shipped') }}</a-tag>
+                    </div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('lotCard.operator') }}</div>
+                    <div class="item-content">{{ FormDataList.sourceName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">套餐计划名称</div>
+                    <div class="item-content">{{ tariffForm.terminalName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.CardType') }}</div>
+                    <div class="item-content">{{ FormDataList.cardType }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.FlowPool') }}</div>
+                    <div class="item-content">{{ FormDataList.isTrafficPool == 1 ? $t('lotCard.Yes') : $t('lotCard.No')
+                        }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.CardNum') }}</div>
+                    <div class="item-content">{{ dataDetail.length }}
+                        <template v-if="!show">
+                            <a-button type="primary" @click="showCard = true" style="margin-left:10px;"
+                                v-if="userType == 1 && FormDataList.moderationStatus == 2">{{
+                                    $t('order.AllocationCardNumber') }}</a-button>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-table" v-if="!show">
+            <a-table :columns="columnsDetail" :data="dataDetail" />
+        </div>
+
+        <div class="progress" v-if="show">
+            <div class="title">{{ schedule }}</div>
+            <!-- <div class="cusrte">
+                <a-progress type="circle" :percent="(schedule / 100)" size="large" />
+            </div> -->
+        </div>
+
+        <template #footer>
+            <a-button @click="cancel">{{ $t('form.Cancel') }}</a-button>
+        </template>
+    </a-modal>
+
+
+    <!-- 分配卡号 -->
+    <a-modal v-model:visible="showCard" :title="$t('order.AllocationCardNumber')"
+        @cancel="closeModal(showCard, FormDataList)" @before-ok="showCard = false" :okText="$t('form.Confirm')"
+        :cancelText="$t('form.Cancel')" unmount-on-close>
+        <div style="display: flex;justify-content: space-between;">
+            <div>
+                <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false"
+                    v-if="showCard">
+                </Upload>
+                <span style="color: #ccc;margin-top: 10px;display: inline-block;">请上传.xlsx文件</span>
+            </div>
+            <div>
+                <a-button type="primary" @click="DownloadSampleFile">下载示例文件</a-button>
+            </div>
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef, watch } from 'vue';
+import { AcquireOrdertariff, DistributionCard, ReturntheOrderCard, GuideCardProgress } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import Upload from "@/components/upload/index.vue";
+import { Getdictionary, filterDict } from '@/mixins/index.js'
+import { downloadFile } from '@/utils/xlsx.js'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+// 定义 props
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+// 将 props 转为 ref
+const modelValue = toRef(props, 'modelValue');
+const FormDataList = toRef(props, 'FormDataList');
+const emit = defineEmits(['update:modelValue', 'submit']);
+
+const state = ref({
+    tariffForm: {},
+    showCard: false,
+    res1: [],
+    res2: [],
+    res3: [],
+    userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
+    show: false,
+    schedule: 0, // 进度
+});
+const { tariffForm, showCard, res1, res2, res3, userType, show, schedule } = toRefs(state.value);
+
+// 表格列定义
+const columnsDetail = [
+    { title: 'ICCID', dataIndex: 'iccid' },
+    { title: t('order.CardStatus'), dataIndex: 'status' },
+    { title: t('order.CreationTime'), dataIndex: 'createdAt' }
+];
+
+// 数据详情
+const dataDetail = ref([]);
+
+
+// 分配卡号并处理进度
+const customRequest = async (options) => {
+    const formData = new FormData();
+    formData.append('file', options.fileItem.file); // 文件
+    formData.append('orderId', FormDataList.value.id);
+
+    const res = await DistributionCard(formData);
+    if (res.code === 200) {
+        Message.success(res.message);
+        showCard.value = false;
+        await CardProgress();
+    }
+};
+
+
+// 关闭弹窗
+const cancel = () => emit('update:modelValue', false);
+const closeModal = () => showCard.value = false;
+
+
+// 监听 FormDataList 的变化
+watch(() => FormDataList.value, async (val) => {
+    if (Object.keys(val).length === 0) return;
+    tariffForm.value = val;
+    await fetchOrderCardData(val.id);
+}, { immediate: true });
+
+
+// 下载示例文件
+const DownloadSampleFile = () => downloadFile(['ICCID'], [['8968099000011939']]);
+
+
+
+// 获取和处理订单卡信息
+const fetchOrderCardData = async (orderId) => {
+    const res = await ReturntheOrderCard({ id: orderId });
+    dataDetail.value = res.data?.map(item => ({
+        ...item,
+        status: item.status === 1 ? t('order.normal') : t('order.unsubscribe')
+    })) || [];
+};
+
+
+
+// 获取 ICCID 详情
+const getICCIDDetaile = async () => {
+    const res = await ReturntheOrderCard({ id: tariffForm.value.id });
+    dataDetail.value = res.data?.map(item => ({
+        ...item,
+        status: item.status === 1 ? t('order.normal') : t('order.unsubscribe')
+    })) || [];
+};
+
+
+// 监听导卡进度
+watch(() => modelValue.value, async (val) => {
+    if (val) {
+        await CardProgress();
+    }
+}, { immediate: true });
+
+
+// 卡进度检查
+const CardProgress = async () => {
+    const res = await GuideCardProgress({ id: FormDataList.value.id });
+    if (res.code === 200) {
+        show.value = res.data !== 0 && res.data != '\r总体进度：10/10 (100.00%)';
+        schedule.value = res.data;
+        if (res.data == '\r总体进度：10/10 (100.00%)') {
+            getICCIDDetaile();
+        }
+    }
+};
+
+
+// 组件挂载时获取字典数据
+onMounted(async () => {
+    const dict = await Getdictionary(['Billingcycle', 'billingMethod', 'currencyType']);
+    res1.value = dict[0];
+    res2.value = dict[1];
+    res3.value = dict[2];
+});
+
+</script>
+<style scoped lang="less">
+.progress {
+    margin: 30px auto;
+    display: flex;
+    justify-content: center;
+
+    .title {
+        text-align: center;
+        font-size: 16px;
+    }
+}
+
+.detail-box {
+    .detail-item-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .detail-item {
+            //styleName: Body/Medium;
+            font-family: PingFang SC;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            min-width: 350px;
+
+            .item-label {
+                color: rgba(0, 0, 0, 0.4);
+                width: 120px;
+                text-align: right;
+                margin-right: 10px;
+            }
+
+            .item-content {
+                color: rgba(51, 51, 51, 1);
+            }
+        }
+    }
+}
+</style>

src/views/user/order/BuyCard/index.vue

@@ -0,0 +1,184 @@
+<!-- 购卡订单 -->
+<template>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search :SearchForm="SearchFormBuyOrder" @query="initData" @reset="reset" />
+    </div>
+    <div class="audit-btn">
+      <a-button @click="showAudit = true" type="text">
+        <template #icon>
+          <icon-plus-circle />
+        </template>
+        <template #default>{{ $t('order.CardPurchase') }}</template>
+      </a-button>
+    </div>
+    <!-- 数据表格 -->
+    <a-table :data="tableData" :pagination="pageData" :columns="BuyOrdercolumns" @page-change="evChangePage"
+      :scroll="{ x: 'auto' }">
+      <template #image="{ record }">
+        <a-image width="60" height="60" :src="record.contractImg" :preview-props="{
+          actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
+        }" style="cursor: pointer;">
+        </a-image>
+      </template>
+      <template #id="{ record }">
+        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
+      </template>
+      <template #statusType="{ record }">
+        <a-tag color="#ff7d00" v-if="record.moderationStatus == 1">{{ $t('order.TobeReviewed') }}</a-tag>
+        <a-tag color="#00b42a" v-if="record.moderationStatus == 2">{{ $t('order.PassTheExamination') }}</a-tag>
+        <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">{{ $t('order.rejected') }}</a-tag>
+      </template>
+      <template #LogisticsStatus="{ record }">
+        <a-tag color="#168cff" v-if="record.tmsStatus == 1">{{ $t('order.unshipped') }}</a-tag>
+        <a-tag color="#00b42a" v-if="record.tmsStatus == 2">{{ $t('order.shipped') }}</a-tag>
+      </template>
+      <template #operate="{ record }">
+        <div class="setting">
+          <a-button type="text" @click="adminCancel(record)" v-if="record.moderationStatus == 2 && userType !== 1">{{
+            $t('order.unsubscribe') }}</a-button>
+          <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
+        </div>
+      </template>
+    </a-table>
+
+    <Card v-model:modelValue="showAudit" @submit="initData()" />
+    <Detaile v-model:modelValue="showDetail" @submit="initData()" :FormDataList="FormDataList" />
+    <returnCard v-model:modelValue="showReturn" :ReturnData="ReturnData" @submit="initData()"></returnCard>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs } from 'vue';
+import { purchaseOrderList } from '@/api/path/purchase';
+import Card from './Card.vue'
+import Detaile from './detaile.vue'
+import Search from '@/components/Search/index.vue'
+import returnCard from './returnCard.vue'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
+import { SearchFormBuyOrder, BuyOrdercolumns } from '../config'
+// 数据层
+const state = ref({
+  userName: localStorage.getItem('user_login_information')?.username,
+  currentIndex: null,
+  FormDataList: {},
+  pageData: {
+    total: 0,
+    size: 10,
+    current: 1,
+  },
+  showAudit: false,
+  showDetail: false,
+  showReturn: false,
+  ReturnData: {},
+  orderTypeStatus: [],
+  CardType: [],
+  PackagePlanType: []
+});
+
+const {
+  userType,
+  FormDataList,
+  pageData,
+  showAudit,
+  showDetail,
+  showReturn,
+  ReturnData,
+  CardType,
+  orderTypeStatus,
+  PackagePlanType
+} = toRefs(state.value);
+
+const processData = async (data) => {
+
+  return (data.records || []).map((item, key) => {
+    return {
+      ...item,
+      index: key + 1,
+      sourceName: item.source,
+      cardType: filterDict(CardType.value, item.simType),
+      type: filterDict(PackagePlanType.value, item.isRecharge)
+    }
+  })
+}
+
+const { tableData, evChangePage, initData, reset } = tableFunction(pageData.value, purchaseOrderList, processData)
+
+// 用户退订
+const adminCancel = (data) => {
+  ReturnData.value = data
+  showReturn.value = true
+}
+
+// 查看订单详情
+const openDetail = async (item) => {
+  FormDataList.value = item
+  showDetail.value = true;
+}
+
+onMounted(async () => {
+  let dict = await Getdictionary(['cardType', 'orderType', 'setMeal'])
+  CardType.value = dict[0]
+  orderTypeStatus.value = dict[1]
+  PackagePlanType.value = dict[2]
+  await initData();
+})
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.setting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.arco-table-th {
+  white-space: nowrap;
+}
+
+.audit-txt {
+  display: flex;
+  flex-wrap: wrap;
+
+  .audit-tag {
+    width: 180px;
+    color: #b2b2b2;
+    margin-right: 20px;
+
+    span {
+      color: #000;
+      margin-left: 20px;
+    }
+  }
+}
+
+.audit-btn {
+  margin-bottom: 10px;
+}
+
+
+
+.detail-table {
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
+</style>

src/views/user/order/BuyCard/returnCard.vue

@@ -0,0 +1,75 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.ReturnTheCard')" @cancel="cancel"
+        @ok="submitStatus" :okText="$t('form.Confirm')" :cancelText="$t('form.Cancel')">
+        <a-space>
+            <a-input :style="{ width: '320px' }" placeholder="请输入ICCID查询" allow-clear v-model="inputValue">
+                <template #suffix>
+                    <icon-search />
+                </template>
+            </a-input>
+            <a-button type="primary" @click="getDetaileICCID(form.trafficId)">搜索</a-button>
+            <a-button>重置</a-button>
+        </a-space>
+        <p></p>
+        <a-table row-key="iccid" :columns="columns" :data="data" :row-selection="rowSelection"
+            v-model:selectedKeys="selectedKeys" />
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, defineProps, toRef, defineEmits, watch } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { ReturntheCard, TariffOrderCard } from '@/api/path/order'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    ReturnData: [Array, Object],
+})
+const modelValue = toRef(props, 'modelValue')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const selectedKeys = ref([])
+const inputValue = ref()
+const form = ref({})
+const columns = [{ title: 'ICCID', dataIndex: 'iccid' }, { title: t('order.CardStatus'), dataIndex: 'iccidStatus' }, { title: t('order.CreationTime'), dataIndex: 'expireTime' }]
+const data = ref()
+const rowSelection = ref({
+    type: 'checkbox',
+    showCheckedAll: true,
+    onlyCurrent: false,
+});
+const cancel = () => {
+    emit('update:modelValue', false)
+    data.value = []
+}
+const submitStatus = async () => {
+    if (selectedKeys.value.length === 0) {
+        Message.warning($t('form.pleaseSelect') + 'ICCID')
+        return
+    }
+    let res = await ReturntheCard({ iccids: selectedKeys.value, id: form.value.id })
+    if (res.code == 200) {
+        emit('update:modelValue', false)
+        emit('submit', true)
+        data.value = []
+        selectedKeys.value = []
+    }
+}
+
+const getDetaileICCID = async (traaid) => {
+    const res = await TariffOrderCard({ id: traaid, iccid: inputValue.value })
+    if (res.code == 200) {
+        data.value = res.data || []
+    }
+}
+watch(() => props.ReturnData, val => {
+    if (val.id) {
+        form.value = val
+        getDetaileICCID(val.id)
+    }
+}, { immediate: true })
+</script>
+<style scoped></style>

src/views/user/order/BuyCard/status.vue

@@ -0,0 +1,83 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.examine')" @cancel="cancel" @ok="submitStatus"
+    :okText="$t('form.Confirm')" :cancelText="$t('form.Cancel')">
+        <a-form :model="formStatus" :style="{ width: '600px' }">
+            <a-form-item :label="$t('lotCard.userName')">
+                {{ FormDataList.userName }}
+            </a-form-item>
+            <a-form-item :label="$t('order.OrderNum')">
+                {{ FormDataList.id }}
+            </a-form-item>
+            <a-form-item label="套餐计划名称">
+                {{ FormDataList.terminalName }}
+            </a-form-item>
+            <a-form-item :label="$t('order.AuditOpinion')">
+                <a-radio-group v-model="formStatus.moderationStatus" :options="optionsStatus">
+                    <template #label="{ data }">
+                        <a-tag>{{ data.label }}</a-tag>
+                    </template>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item :label="$t('lotCard.remark')">
+                <a-textarea :placeholder="$t('form.datapoolForm.pleaseSelect')+$t('lotCard.remark')" v-model:model-value="formStatus.moderationNotes" allow-clear />
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, defineProps, toRef, defineEmits } from 'vue';
+import { OrderCardStatus } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import {useI18n} from 'vue-i18n'
+const {t} = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const state = ref({
+    formStatus: {
+        id: null,
+        moderationStatus: '', // 审核状态
+        moderationNotes: '', // 审核备注
+    },
+    optionsStatus: [
+        { label: t('order.PassTheExamination'), value: '2' },
+        { label: t('order.TurnDown'), value: '3' },
+    ],
+})
+
+const { formStatus ,optionsStatus} = toRefs(state.value)
+
+// 订单审核
+const submitStatus = async () => {
+    new Promise((resolve, reject) => {
+        formStatus.value.id = FormDataList.value.id
+        OrderCardStatus(formStatus.value).then(res => {
+            Message.success(res.message)
+            emit('update:modelValue', false)
+            emit('submit', true)
+        }).catch(error => [
+            reject(error)
+        ])
+    })
+}
+
+const cancel = ()=>{
+    emit('update:modelValue', false)
+    Object.keys(formStatus.value).forEach(key => {
+        formStatus.value[key] = ''
+    })
+}
+</script>
+<style scoped></style>

src/views/user/order/CancelOrder/detaile.vue

@@ -0,0 +1,161 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" title="订单详情" @cancel="cancel" @ok="showDetail = false">
+        <div class="detail-box">
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">订单编号</div>
+                    <div class="item-content">{{ FormDataList.id }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">订单状态</div>
+                    <div class="item-content">
+                        <a-tag color="#168cff" v-if="FormDataList.tmsStatus == 1">未发货</a-tag>
+                        <a-tag color="#00b42a" v-if="FormDataList.tmsStatus == 2">已发货</a-tag>
+                    </div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">运营商</div>
+                    <div class="item-content">{{ FormDataList.sourceName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">资费信息</div>
+                    <div class="item-content">{{ TariffInfomr }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">最短订阅周期</div>
+                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[0] }}个月</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">最长订阅周期</div>
+                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[1] }}个月</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">计费方式</div>
+                    <div class="item-content">{{ tariffForm.billingMethodName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">结算周期</div>
+                    <div class="item-content">{{ tariffForm.billingcycleName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">卡类型</div>
+                    <div class="item-content">{{ FormDataList.CardType }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">标准价格</div>
+                    <div class="item-content">{{ tariffForm.pricingName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">流量池</div>
+                    <div class="item-content">{{ FormDataList.isTrafficPool == 1 ? '是' : '否' }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">卡数量</div>
+                    <div class="item-content">{{ dataDetail.length }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-table">
+            <a-table :columns="columnsDetail" :data="dataDetail" />
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef ,watch} from 'vue';
+import { AcquireOrdertariff,TariffOrderCard } from '@/api/path/order'
+import { Getdictionary } from '@/mixins/index.js'
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+    tariffForm: {},
+    res1:[],
+    res2:[],
+    res3:[],
+})
+const { tariffForm,res1,res2,res3 } = toRefs(state.value)
+const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' }
+]
+const dataDetail = ref([])
+
+const cancel = () => {
+    emit('update:modelValue', false)
+}
+
+watch(() => FormDataList.value, val => {
+    if (Object.keys(val).length === 0) return
+    AcquireOrdertariff({ id: val.trafficId }).then(res => {
+        tariffForm.value = res.data
+        tariffForm.value.billingcycleName = res1.value.filter(val => val.value == res.data.billingCycle)[0]?.label;
+        tariffForm.value.billingMethodName = res2.value.filter(val => val.value == res.data.billingMethod)[0]?.label;
+        tariffForm.value.TariffInfomr = res.data.trafficBilling + '/' + res.data.trafficBillingType
+        tariffForm.value.pricingName = tariffForm.value.pricing !== '' ? tariffForm.value.pricing + '/' + res3.value.filter(val => val.value == res.data.currency)[0]?.label : '';
+    })
+    TariffOrderCard({id:val.trafficId}).then(res=>{
+        dataDetail.value = res.data
+    })
+},{deep: true})
+
+onMounted(async () => {
+    res1.value = await Getdictionary('Billingcycle')
+    res2.value = await Getdictionary('billingMethod')
+    res3.value = await Getdictionary('currencyType')
+})
+</script>
+<style scoped lang="less">
+.detail-box {
+    .detail-item-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .detail-item {
+            //styleName: Body/Medium;
+            font-family: PingFang SC;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            min-width: 350px;
+
+            .item-label {
+                color: rgba(0, 0, 0, 0.4);
+                width: 120px;
+                text-align: right;
+                margin-right: 10px;
+            }
+
+            .item-content {
+                color: rgba(51, 51, 51, 1);
+            }
+        }
+    }
+}
+</style>

src/views/user/order/CancelOrder/index.vue

@@ -0,0 +1,194 @@
+<!-- 退卡订单 -->
+<template>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search/>
+    </div>
+    <!-- 数据表格 -->
+    <a-table :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
+      <template #detail="{ record }">
+        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
+      </template>
+      <template #orderStatus="{ record }">
+        <a-tag color="orangered" v-if="record.moderationStatus == 1">待审核</a-tag>
+        <a-tag color="arcoblue" v-if="record.moderationStatus == 2">审核通过</a-tag>
+        <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">已驳回</a-tag>
+      </template>
+      <template #id="{ record }">
+        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
+      </template>
+      <template #operate="{ record }">
+        <a-button type="primary" @click="showAudit = true">审核</a-button>
+      </template>
+    </a-table>
+
+
+    <Status v-model:modelValue="showAudit" @submit="intData()" />
+    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs } from 'vue';
+import Status from './status.vue'
+import Search from '@/components/Search/index.vue'
+const state = ref({
+  tableData: [],
+  pagination: {
+    total: 0,
+    current: 1,
+    size: 10,
+  },
+  showDetail: false,
+  showAudit: false,
+  FormDataList: {}
+})
+
+const { tableData, pagination, showDetail, showAudit, FormDataList } = toRefs(state.value)
+
+const columns = [
+  { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
+  {
+    title: '订单编号', slotName: 'id', ellipsis: true,
+    tooltip: true,
+  },
+  {
+    title: '客户名称', dataIndex: 'userName', ellipsis: true,
+    tooltip: true,
+  },
+  { title: '审核状态', slotName: 'orderStatus', ellipsis: true },
+  {
+    title: '供应商名称', dataIndex: 'sourceName', ellipsis: true,
+    tooltip: true,
+  },
+  { title: '卡数量', dataIndex: 'quantity', ellipsis: true },
+  { title: '注销日期', dataIndex: 'period_of_silence', ellipsis: true },
+  { title: '操作', slotName: 'operate', align: 'center', ellipsis: true }
+];
+
+// 查看订单详情
+const openDetail = (item) => {
+  showDetail.value = true;
+  FormDataList.value = item;
+}
+
+// 列表-------------------------------------
+// 订单列表
+// const intData = async () => {
+//   const param = {
+//     current: pagination.value.current,
+//     size: pagination.value.size,
+//   }
+//   const one = await Getdictionary('source')
+//   const two = await Getdictionary('cardType')
+//   const tree = await Getdictionary('subscriptionRelationshipStatus')
+//   const tive = await Getdictionary('orderAuditStatus')
+//   cancelOrderList(param).then(res => {
+//     tableData.value = (res.data.records || []).map(item => {
+
+//       const sourceName = one.filter((item) => item.typeKey == enum_dict.SOURCE)?.find(val => item.source == val.value)?.label
+//       const cardTypeName = two.filter((item) => item.typeKey == enum_dict.CARD_TYPE)?.find(val => item.card_type == val.value)?.label
+//       const statusName = tree.filter((item) => item.typeKey == enum_dict.SUBSCRIPTION_RELATIONSHIP_STATUS)?.find(val => item.status == val.value)?.label
+//       const moderationStatusName = tive.filter((item) => item.typeKey == enum_dict.ORDER_AUDIT_STATUS)?.find(val => item.moderation_status == val.value)?.label
+
+//       return {
+//         ...item,
+//         moderationStatusName,
+//         statusName,
+//         cardTypeName,
+//         sourceName
+//       }
+//     });
+//     pagination.value.total = res.data.total;
+//   })
+
+// }
+onMounted(() => {
+  // intData();
+})
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.arco-table-th {
+  white-space: nowrap;
+}
+
+.audit-txt {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .audit-tag {
+    margin-left: 20px;
+    background: #63c2c6;
+    color: #fff;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: 50px;
+  }
+}
+
+.audit-btn {
+  margin-bottom: 10px;
+}
+
+.detail-box {
+  .detail-item-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .detail-item {
+      //styleName: Body/Medium;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      min-width: 350px;
+
+      .item-label {
+        color: rgba(0, 0, 0, 0.4);
+        width: 120px;
+        text-align: right;
+        margin-right: 10px;
+      }
+
+      .item-content {
+        color: rgba(51, 51, 51, 1);
+      }
+    }
+  }
+}
+
+.detail-table {
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
+</style>

src/views/user/order/CancelOrder/status.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="">
+        <a-modal v-model:visible="modelValue" title="审核" @cancel="cancel" @before-ok="submitAudit" okText="确定审核"
+            cancelText="关闭">
+            <a-form :model="formAudit" auto-label-width>
+                <a-form-item field="customerName" label="客户">
+                    <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
+                    <div class="audit-txt" style="color:#418035;">演示账号02</div>
+                </a-form-item>
+                <a-form-item field="cardType" label="卡类型">
+                    <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
+                    <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨
+                        <div class="audit-tag">共1张卡</div>
+                    </div>
+                </a-form-item>
+                <a-form-item field="money" label="资费">
+                    <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
+                    <div class="audit-txt">“移动100M月包”
+                        <div class="audit-tag">订购12个月</div>
+                    </div>
+                </a-form-item>
+                <a-form-item field="orderStatus" label="订单状态">
+                    <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
+                    <a-radio-group v-model="formAudit.orderStatus" :options="options" />
+                </a-form-item>
+                <a-form-item field="auditOpinion" label="审核意见">
+                    <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
+                    <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
+                </a-form-item>
+                <a-form-item field="fileList" label="销售合同">
+                    <a-upload action="/" :default-file-list="formAudit.fileList" />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef, watch } from 'vue';
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const state = ref({
+    options: [
+        { label: '发货', value: '1' },
+        { label: '退回', value: '2' },
+    ],
+    formAudit: {
+        customerName: '',
+        cardType: '',
+        money: '',
+        orderStatus: '',
+        auditOpinion: '',
+        fileList: []
+    },
+    
+})
+
+const { options, formAudit } = toRefs(state.value)
+
+const cancel = () => {
+    emit('update:modelValue', false)
+}
+
+// 确认审核
+const submitAudit = () => {
+   emit('submit',true)
+}
+</script>
+<style scoped></style>

src/views/order/ChangeOrder/index.vue → src/views/user/order/ChangeOrder/index.vue

@@ -28,8 +28,6 @@
       </template>
       <template #operate="{ record }">
         <div class="setting">
-          <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1 && userType == 1"
-            @click="statusOrder(record)">{{ $t('order.examine') }}</a-button>
           <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
         </div>
       </template>

src/views/user/order/RenewalOrder/detaile.vue

@@ -0,0 +1,161 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" title="订单详情" @cancel="cancel" @ok="showDetail = false">
+        <div class="detail-box">
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">订单编号</div>
+                    <div class="item-content">{{ FormDataList.id }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">订单状态</div>
+                    <div class="item-content">
+                        <a-tag color="#168cff" v-if="FormDataList.tmsStatus == 1">未发货</a-tag>
+                        <a-tag color="#00b42a" v-if="FormDataList.tmsStatus == 2">已发货</a-tag>
+                    </div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">运营商</div>
+                    <div class="item-content">{{ FormDataList.sourceName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">资费信息</div>
+                    <div class="item-content">{{ TariffInfomr }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">最短订阅周期</div>
+                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[0] }}个月</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">最长订阅周期</div>
+                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[1] }}个月</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">计费方式</div>
+                    <div class="item-content">{{ tariffForm.billingMethodName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">结算周期</div>
+                    <div class="item-content">{{ tariffForm.billingcycleName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">卡类型</div>
+                    <div class="item-content">{{ FormDataList.CardType }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">标准价格</div>
+                    <div class="item-content">{{ tariffForm.pricingName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">流量池</div>
+                    <div class="item-content">{{ FormDataList.isTrafficPool == 1 ? '是' : '否' }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">卡数量</div>
+                    <div class="item-content">{{ dataDetail.length }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-table">
+            <a-table :columns="columnsDetail" :data="dataDetail" />
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef ,watch} from 'vue';
+import { AcquireOrdertariff,TariffOrderCard } from '@/api/path/order'
+import { Getdictionary } from '@/mixins/index.js'
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+    tariffForm: {},
+    res1:[],
+    res2:[],
+    res3:[],
+})
+const { tariffForm,res1,res2,res3 } = toRefs(state.value)
+const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' }
+]
+const dataDetail = ref([])
+
+const cancel = () => {
+    emit('update:modelValue', false)
+}
+
+watch(() => FormDataList.value, val => {
+    if (Object.keys(val).length === 0) return
+    AcquireOrdertariff({ id: val.trafficId }).then(res => {
+        tariffForm.value = res.data
+        tariffForm.value.billingcycleName = res1.value.filter(val => val.value == res.data.billingCycle)[0]?.label;
+        tariffForm.value.billingMethodName = res2.value.filter(val => val.value == res.data.billingMethod)[0]?.label;
+        tariffForm.value.TariffInfomr = res.data.trafficBilling + '/' + res.data.trafficBillingType
+        tariffForm.value.pricingName = tariffForm.value.pricing !== '' ? tariffForm.value.pricing + '/' + res3.value.filter(val => val.value == res.data.currency)[0]?.label : '';
+    })
+    TariffOrderCard({id:val.trafficId}).then(res=>{
+        dataDetail.value = res.data
+    })
+},{deep: true})
+
+onMounted(async () => {
+    res1.value = await Getdictionary('Billingcycle')
+    res2.value = await Getdictionary('billingMethod')
+    res3.value = await Getdictionary('currencyType')
+})
+</script>
+<style scoped lang="less">
+.detail-box {
+    .detail-item-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .detail-item {
+            //styleName: Body/Medium;
+            font-family: PingFang SC;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            min-width: 350px;
+
+            .item-label {
+                color: rgba(0, 0, 0, 0.4);
+                width: 120px;
+                text-align: right;
+                margin-right: 10px;
+            }
+
+            .item-content {
+                color: rgba(51, 51, 51, 1);
+            }
+        }
+    }
+}
+</style>

src/views/user/order/RenewalOrder/index.vue

@@ -0,0 +1,196 @@
+<!-- 退卡订单 -->
+<template>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search />
+    </div>
+    <!-- 数据表格 -->
+    <a-table :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: 'auto'}" @page-change="onPageChange">
+      <template #detail="{ record }">
+        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
+      </template>
+      <template #id="{ record }">
+        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
+      </template>
+      <template #operate="{ record }">
+        <a-button type="primary" @click="showAudit = true">审核</a-button>
+      </template>
+    </a-table>
+
+
+    <Status v-model:modelValue="showAudit" @submit="intData()" />
+    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs } from 'vue';
+import { RenewalOrderInformation } from '@/api/path/renewalOrder'
+import { Getdictionary } from '@/mixins/index.js'
+import Status from './status.vue'
+import Search from '@/components/Search/index.vue'
+const state = ref({
+  searchForm: {
+    cardNumber: '',
+    customerName: '',
+  },
+  tableData: [],
+  pagination: {
+    total: 0,
+    current: 1,
+    size: 10,
+  },
+  showDetail: false,
+  showAudit: false,
+  FormDataList: {}
+})
+
+const { searchForm, tableData, pagination, showDetail, showAudit, FormDataList } = toRefs(state.value)
+
+const columns = [
+  { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
+  {
+    title: '订单编号', dataIndex: 'id', ellipsis: true,
+    tooltip: true,
+    align: 'center',
+  },
+  {
+    title: '客户名称', dataIndex: 'userName', ellipsis: true,
+    tooltip: true,
+    align: 'center',
+  },
+  {
+    title: '供应商名称', dataIndex: 'sourceName', ellipsis: true,
+    tooltip: true, align: 'center',
+  },
+  { title: '资费名称', dataIndex: 'trafficName', ellipsis: true, align: 'center', },
+  { title: '采购数量', dataIndex: 'quantity', ellipsis: true, align: 'center', },
+  { title: '创建时间', dataIndex: 'createdAt', ellipsis: true, align: 'center', },
+  { title: '有效期', dataIndex: 'endDate', ellipsis: true, align: 'center', },
+  { title: '原有效期', dataIndex: 'beforeEndDate', ellipsis: true, align: 'center', },
+  { title: '订单金额', dataIndex: 'payment_amount', ellipsis: true, align: 'center', },
+  // { title: '操作', slotName: 'operate', align: 'center', ellipsis: true, align: 'center', }
+];
+
+// 查看订单详情
+const openDetail = (item) => {
+  showDetail.value = true;
+  FormDataList.value = item;
+}
+
+// 列表-------------------------------------
+// 订单列表
+const intData = async () => {
+  const param = {
+    current: pagination.value.current,
+    size: pagination.value.size,
+  }
+  const one = await Getdictionary('source')
+  const two = await Getdictionary('cardType')
+  RenewalOrderInformation(param).then(res => {
+    tableData.value = (res.data.records || []).map(item => {
+      const sourceName = one.find(val => item.source == val.value)?.label
+      const cardTypeName = two.find(val => item.cardType == val.value)?.label
+      return {
+        ...item,
+        cardTypeName,
+        sourceName
+      }
+    });
+    pagination.value.total = res.data.total;
+  })
+}
+
+const onPageChange = (e)=>{
+  pagination.value.current = e
+  intData();
+}
+onMounted(() => {
+  intData();
+})
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.arco-table-th {
+  white-space: nowrap;
+}
+
+.audit-txt {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .audit-tag {
+    margin-left: 20px;
+    background: #63c2c6;
+    color: #fff;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: 50px;
+  }
+}
+
+.audit-btn {
+  margin-bottom: 10px;
+}
+
+.detail-box {
+  .detail-item-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .detail-item {
+      //styleName: Body/Medium;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      min-width: 350px;
+
+      .item-label {
+        color: rgba(0, 0, 0, 0.4);
+        width: 120px;
+        text-align: right;
+        margin-right: 10px;
+      }
+
+      .item-content {
+        color: rgba(51, 51, 51, 1);
+      }
+    }
+  }
+}
+
+.detail-table {
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
+</style>

src/views/user/order/RenewalOrder/status.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="">
+        <a-modal v-model:visible="modelValue" title="审核" @cancel="cancel" @before-ok="submitAudit" okText="确定审核"
+            cancelText="关闭">
+            <a-form :model="formAudit" auto-label-width>
+                <a-form-item field="customerName" label="客户">
+                    <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
+                    <div class="audit-txt" style="color:#418035;">演示账号02</div>
+                </a-form-item>
+                <a-form-item field="cardType" label="卡类型">
+                    <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
+                    <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨
+                        <div class="audit-tag">共1张卡</div>
+                    </div>
+                </a-form-item>
+                <a-form-item field="money" label="资费">
+                    <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
+                    <div class="audit-txt">“移动100M月包”
+                        <div class="audit-tag">订购12个月</div>
+                    </div>
+                </a-form-item>
+                <a-form-item field="orderStatus" label="订单状态">
+                    <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
+                    <a-radio-group v-model="formAudit.orderStatus" :options="options" />
+                </a-form-item>
+                <a-form-item field="auditOpinion" label="审核意见">
+                    <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
+                    <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
+                </a-form-item>
+                <a-form-item field="fileList" label="销售合同">
+                    <a-upload action="/" :default-file-list="formAudit.fileList" />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef, watch } from 'vue';
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const state = ref({
+    options: [
+        { label: '发货', value: '1' },
+        { label: '退回', value: '2' },
+    ],
+    formAudit: {
+        customerName: '',
+        cardType: '',
+        money: '',
+        orderStatus: '',
+        auditOpinion: '',
+        fileList: []
+    },
+    
+})
+
+const { options, formAudit } = toRefs(state.value)
+
+const cancel = () => {
+    emit('update:modelValue', false)
+}
+
+// 确认审核
+const submitAudit = () => {
+   emit('submit',true)
+}
+</script>
+<style scoped></style>

src/views/user/order/ReturnCard/detaile.vue

@@ -0,0 +1,167 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" :title="$t('order.OrderDetails')" :closable="false">
+        <div class="detail-box">
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.OrderNum') }}</div>
+                    <div class="item-content">{{ FormDataList.id }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('lotCard.orderType') }}</div>
+                    <div class="item-content">
+                        <a-tag color="#168cff" v-if="FormDataList.tmsStatus == 1">{{ $t('order.unshipped') }}</a-tag>
+                        <a-tag color="#00b42a" v-if="FormDataList.tmsStatus == 2">{{ $t('order.shipped') }}</a-tag>
+                    </div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('lotCard.operator') }}</div>
+                    <div class="item-content">{{ FormDataList.sourceName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.TariffName') }}</div>
+                    <div class="item-content">{{ tariffForm.label }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.BillingMode') }}</div>
+                    <div class="item-content">{{ tariffForm.billingMethodName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.SettlementCycle') }}</div>
+                    <div class="item-content">{{ tariffForm.billingcycleName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.CardType') }}</div>
+                    <div class="item-content">{{ FormDataList.cardType }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.FlowPool') }}</div>
+                    <div class="item-content">{{ FormDataList.isTrafficPool == 1 ? $t('lotCard.Yes') : $t('lotCard.No')
+                        }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <div class="detail-item">
+                    <div class="item-label">{{ $t('order.CardNum') }}</div>
+                    <div class="item-content">{{ dataDetail.length }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-table">
+            <a-table :columns="columnsDetail" :data="dataDetail" />
+        </div>
+
+        <template #footer>
+            <a-button @click="cancel">{{ $t('form.Cancel') }}</a-button>
+        </template>
+    </a-modal>
+
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef, watch } from 'vue';
+import { AcquireOrdertariff, DistributionCard, ReturntheOrderCard, GuideCardProgress } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import Upload from "@/components/upload/index.vue";
+import { Getdictionary } from '@/mixins/index.js'
+import { downloadFile } from '@/utils/xlsx.js'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    FormDataList: {
+        type: Object,
+        default: () => ({})
+    }
+})
+const modelValue = toRef(props, 'modelValue')
+const FormDataList = toRef(props, 'FormDataList')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+    tariffForm: {},
+    res1: [],
+    res2: [],
+    res3: [],
+    userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
+})
+const { tariffForm,  res1, res2, res3, userType } = toRefs(state.value)
+const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' }, { title: t('order.CardStatus'), dataIndex: 'status' }, { title: t('order.CreationTime'), dataIndex: 'createdAt' }
+]
+const dataDetail = ref([])
+
+const cancel = () => {
+    emit('update:modelValue', false)
+}
+
+const closeModal = () => {
+    showCard.value = false
+}
+
+watch(() => FormDataList.value, val => {
+    if (Object.keys(val).length === 0) return
+    AcquireOrdertariff({ id: val.trafficId }).then(res => {
+        tariffForm.value = res.data
+        tariffForm.value.billingcycleName = res1.value.filter(val => val.value == res.data.billingCycle)[0]?.label;
+        tariffForm.value.billingMethodName = res2.value.filter(val => val.value == res.data.billingMethod)[0]?.label;
+        tariffForm.value.TariffInfomr = res.data.trafficBilling + '/' + res.data.trafficBillingType
+        tariffForm.value.pricingName = tariffForm.value.pricing !== '' ? tariffForm.value.pricing + '/' + res3.value.filter(val => val.value == res.data.currency)[0]?.label : '';
+    })
+    ReturntheOrderCard({ id: val.id }).then(res => {
+        dataDetail.value = (res.data || []).map(res => ({ ...res, status: res.status == 1 ? t('order.normal') : t('order.unsubscribe') }))
+    })
+}, { immediate: true })
+
+
+onMounted(async () => {
+    res1.value = await Getdictionary('Billingcycle')
+    res2.value = await Getdictionary('billingMethod')
+    res3.value = await Getdictionary('currencyType')
+})
+</script>
+<style scoped lang="less">
+.progress {
+    margin: 30px auto;
+    display: flex;
+    justify-content: center;
+}
+
+.detail-box {
+    .detail-item-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .detail-item {
+            //styleName: Body/Medium;
+            font-family: PingFang SC;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            min-width: 350px;
+
+            .item-label {
+                color: rgba(0, 0, 0, 0.4);
+                width: 120px;
+                text-align: right;
+                margin-right: 10px;
+            }
+
+            .item-content {
+                color: rgba(51, 51, 51, 1);
+            }
+        }
+    }
+}
+</style>

src/views/user/order/ReturnCard/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search :SearchForm="SearchFormBuyOrder" @query="intData" @reset="reset" />
+    </div>
+    <!-- 数据表格 -->
+    <a-table :data="tableData" :pagination="pageData" :columns="Returncolumns" @page-change="evChangePage"
+      :scroll="{ x: 'auto' }">
+      <template #image="{ record }">
+        <a-image width="60" height="60" :src="record.contractImg" :preview-props="{
+          actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
+        }">
+        </a-image>
+      </template>
+      <template #id="{ record }">
+        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
+      </template>
+      <template #statusType="{ record }">
+        <a-tag color="#ff7d00" v-if="record.moderationStatus == 1">{{ $t('order.TobeReviewed') }}</a-tag>
+        <a-tag color="#00b42a" v-if="record.moderationStatus == 2">{{ $t('order.PassTheExamination') }}</a-tag>
+        <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">{{ $t('order.rejected') }}</a-tag>
+      </template>
+      <template #LogisticsStatus="{ record }">
+        <a-tag color="#168cff" v-if="record.tmsStatus == 1">{{ $t('order.unshipped') }}</a-tag>
+        <a-tag color="#00b42a" v-if="record.tmsStatus == 2">{{ $t('order.shipped') }}</a-tag>
+      </template>
+      <template #operate="{ record }">
+          <a-button type="text" v-if="record.moderationStatus == 1 && userType == 1" @click="statusOrder(record)">{{
+            $t('order.examine') }}</a-button>
+          <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
+      </template>
+    </a-table>
+    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
+    <Status v-model:modelValue="showStatus" @submit="intData()" :FormDataList="FormDataList" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { cancelOrderList } from '@/api/path/purchase';
+import { SettingPricing } from '@/api/path/order'
+import { Getdictionary } from '@/mixins/index.js'
+import Search from '@/components/Search/index.vue'
+import Status from './status.vue'
+import { useI18n } from 'vue-i18n'
+import Detaile from './detaile.vue'
+import {Returncolumns,SearchFormBuyOrder} from '../config'
+const { t } = useI18n();
+// 数据层
+const state = ref({
+  userName: localStorage.getItem('user_login_information')?.username,
+  userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
+  tableData: [],
+  FormDataList: {},
+  pageData: {
+    total: 0,
+    size: 10,
+    current: 1,
+  },
+  showStatus: false,
+  showDetail: false
+});
+
+const {
+  userType,
+  tableData,
+  FormDataList,
+  pageData,
+  showStatus,
+  showDetail
+} = toRefs(state.value);
+
+
+
+// 订单列表
+const intData = async () => {
+  const param = {
+    current: pageData.value.current,
+    size: pageData.value.size,
+  }
+  const simTypeList = await Getdictionary('cardType')
+  let sourceList = await Getdictionary('source')
+  cancelOrderList(param).then(res => {
+    tableData.value = (res.data.records || []).map((item, key) => {
+      const sourceName = sourceList.find(val => val.value == item.source)?.label
+      const cardType = simTypeList.find(val => val.value == item.simType)?.label
+      return {
+        ...item,
+        index: key + 1,
+        sourceName,
+        cardType
+      }
+    });
+    pageData.value.total = res.data.total;
+  })
+
+}
+// 分页
+const evChangePage = (page) => {
+  pageData.value.current = page
+  intData()
+}
+
+// 订单审核
+const statusOrder = (items) => {
+  FormDataList.value = items
+  showStatus.value = true
+}
+
+// 查看订单详情
+const openDetail = async (item) => {
+  FormDataList.value = item
+  showDetail.value = true;
+}
+
+const reset = (item) => {
+  SearchForm.value = item,
+  pageData.value.current = 1,
+  intData()
+}
+
+
+onMounted(() => {
+  intData();
+})
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.setting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.arco-table-th {
+  white-space: nowrap;
+}
+
+.audit-txt {
+  display: flex;
+  flex-wrap: wrap;
+
+  .audit-tag {
+    width: 180px;
+    color: #b2b2b2;
+    margin-right: 20px;
+
+    span {
+      color: #000;
+      margin-left: 20px;
+    }
+  }
+}
+
+.audit-btn {
+  margin-bottom: 10px;
+}
+
+
+
+.detail-table {
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
+</style>

src/views/user/order/config.js

@@ -0,0 +1,125 @@
+export const SearchFormBuyOrder = [
+  {
+    type: "input",
+    label: "订单编号",
+    field: "id", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "审核状态",
+    field: "moderationStatus",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "orderType",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "input",
+    label: "客户名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "沉默期",
+    field: "periodOfSilence",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "silenceOf",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "卡类型",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "cardType",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "运营商名称",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "下单时间",
+    field: "createdAt",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "有效期",
+    field: "endData",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+];
+
+// 购卡订单
+export const BuyOrdercolumns = [
+  { title:  window.$t('order.SerialNumber'), dataIndex: 'index', align: 'center', ellipsis: true },
+  { title:  window.$t('order.OrderNum'), slotName: 'id', align: 'center', ellipsis: true },
+  { title:  window.$t('order.AuditStatus'), slotName: 'statusType', align: 'center', ellipsis: true },
+  { title:  window.$t('order.LogisticsStatus'), slotName: 'LogisticsStatus', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.userName'), dataIndex: 'userName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.NumberCardsPurchased'), dataIndex: 'quantity', align: 'center', ellipsis: true },
+  { title:  window.$t('order.SilentPeriod') + ( window.$t('lotCard.month')), dataIndex: 'periodOfSilence', align: 'center', ellipsis: true },
+  { title:  window.$t('order.CardType'), dataIndex: 'cardType', align: 'center', ellipsis: true },
+  { title:  window.$t('order.CarrierName'), dataIndex: 'sourceName', align: 'center', ellipsis: true },
+  { title:  '套餐计划名称', dataIndex: 'terminalName', align: 'center', ellipsis: true },
+  { title:  '套餐计划类型', dataIndex: 'type', align: 'center', ellipsis: true },
+  { title:  window.$t('order.PurchaseAmount'), dataIndex: 'amount', align: 'center', ellipsis: true },
+  { title:  window.$t('order.ContractPhoto'), slotName: 'image', align: 'center', ellipsis: true },
+  { title:  window.$t('order.OrderTime'), dataIndex: 'createdAt', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.validity'), dataIndex: 'endDate', align: 'center', ellipsis: true },
+  { title: '备注', dataIndex: 'moderationNotes', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.Controls'), slotName: 'operate', align: 'center', ellipsis: true ,fixed: 'right',},
+];
+
+// 退卡订单
+export const Returncolumns = [
+  { title:  window.$t('order.SerialNumber'), dataIndex: 'index', align: 'center', ellipsis: true },
+  { title:  window.$t('order.OrderNum'), slotName: 'id', align: 'center', ellipsis: true },
+  { title:  window.$t('order.AuditStatus'), slotName: 'statusType', align: 'center', ellipsis: true },
+  { title:  window.$t('order.LogisticsStatus'), slotName: 'LogisticsStatus', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.userName'), dataIndex: 'userName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.NumberCardsPurchased'), dataIndex: 'quantity', align: 'center', ellipsis: true },
+  { title:  window.$t('order.SilentPeriod') + ( window.$t('lotCard.month')), dataIndex: 'periodOfSilence', align: 'center', ellipsis: true },
+  { title:  window.$t('order.CardType'), dataIndex: 'cardType', align: 'center', ellipsis: true },
+  { title:  window.$t('order.CarrierName'), dataIndex: 'sourceName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.tariff'), dataIndex: 'trafficName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.PurchaseAmount'), dataIndex: 'amount', align: 'center', ellipsis: true },
+  { title:  window.$t('order.ContractPhoto'), slotName: 'image', align: 'center', ellipsis: true },
+  { title:  window.$t('order.OrderTime'), dataIndex: 'createdAt', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.validity'), dataIndex: 'endDate', align: 'center', ellipsis: true },
+  { title: '备注', dataIndex: 'moderationNotes', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.Controls'), slotName: 'operate', align: 'center', ellipsis: true, fixed: 'right', }
+];
+
+// 变更订单
+export const ChangeOrdercolumns = [
+  { title:  window.$t('order.SerialNumber'), dataIndex: 'index', align: 'center', ellipsis: true },
+  { title:  window.$t('order.OrderNum'), slotName: 'id', align: 'center', ellipsis: true },
+  { title:  window.$t('order.AuditStatus'), slotName: 'statusType', align: 'center', ellipsis: true },
+  { title:  window.$t('order.LogisticsStatus'), slotName: 'LogisticsStatus', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.userName'), dataIndex: 'userName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.NumberCardsPurchased'), dataIndex: 'quantity', align: 'center', ellipsis: true },
+  { title:  window.$t('order.SilentPeriod') + ( window.$t('lotCard.month')), dataIndex: 'periodOfSilence', align: 'center', ellipsis: true },
+  { title:  window.$t('order.CardType'), dataIndex: 'cardType', align: 'center', ellipsis: true },
+  { title:  window.$t('order.CarrierName'), dataIndex: 'sourceName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.tariff'), dataIndex: 'trafficName', align: 'center', ellipsis: true },
+  { title:  window.$t('order.PurchaseAmount'), dataIndex: 'amount', align: 'center', ellipsis: true },
+  { title:  window.$t('order.ContractPhoto'), slotName: 'image', align: 'center', ellipsis: true },
+  { title:  window.$t('order.OrderTime'), dataIndex: 'createdAt', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.validity'), dataIndex: 'endDate', align: 'center', ellipsis: true },
+  { title: '备注', dataIndex: 'moderationNotes', align: 'center', ellipsis: true },
+  { title:  window.$t('lotCard.Controls'), slotName: 'operate', align: 'center', ellipsis: true, fixed: 'right', },
+];

src/views/user/tariffManagement/config.js

@@ -0,0 +1,126 @@
+export const userClounms = [
+  {
+    title: window.$t("tariffManagement.id"),
+    dataIndex: "Number",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.label"),
+    dataIndex: "label",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.source"),
+    dataIndex: "sourceName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.billingCycleUser"),
+    dataIndex: "billingCycleName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.pricingUser"),
+    dataIndex: "billingMethodName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.pricing"),
+    dataIndex: "pricingName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.feeStatus"),
+    dataIndex: "status",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.MRCName"),
+    dataIndex: "mrcAmount",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.networkName"),
+    dataIndex: "networkAccessFee",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.endDate"),
+    dataIndex: "endDate",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+]
+
+
+// 资费搜索字段
+export const trafficSearchFrom = [
+  {
+    type: "input",
+    label: "客户名称",
+    field: "username",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "资费名称",
+    field: "label",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "供应商名称",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "计费方式",
+    field: "billingMethod",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "billingMethod",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "计费周期",
+    field: "BillingCycle",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "BillingCycle",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "有效期",
+    field: "endDate",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+];
+
+
+

src/views/user/tariffManagement/index.vue

@@ -0,0 +1,134 @@
+<!-- 资费管理 -->
+<template>
+  <div class="container">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search :SearchForm="trafficSearchFrom" @query="initData" @reset="reset" />
+    </div>
+    <a-table row-key="id" :data="tableData" :columns="userClounms" :pagination="pagination" :scroll="{ x: 'auto' }"
+      @page-change="evChangePage">
+    </a-table>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
+import { trafficSearchFrom, userClounms } from "./config";
+import { tariffList } from "@/api/path/tariffManagement.api"
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
+import Search from '@/components/Search/index.vue'
+const state = ref({
+  currency: [],
+  pagination: {
+    total: 0,
+    pageSize: 10,
+    current: 1,
+  },
+  sourceList: [],
+  cycleist: [],
+  methodList: [],
+
+})
+const {
+  currency,
+  pagination,
+  sourceList,
+  cycleist,
+  methodList,
+} = toRefs(state.value);
+
+
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
+    delete item.children
+    return {
+      ...item,
+      sourceName: filterDict(sourceList.value, item.source),
+      pricingName: item.billingMethod == 1 ? item.trafficBillingAmount + item.currency : item.pricing + item.currency,
+      billingCycleName: filterDict(cycleist.value, item.billingCycle),
+      Activated: item.trafficBilling + item.trafficBillingType,
+      status: "正常",
+      bagSize: item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee,
+      billingMethodName: filterDict(methodList.value, item.billingMethod),
+      Number: index + 1
+    }
+  })
+}
+
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, tariffList, processData)
+
+
+
+const handleDictValue = async () => {
+  let dict = await Getdictionary(['source', 'Billingcycle', 'currencyType', 'billingMethod'])
+  sourceList.value = dict[0]
+  cycleist.value = dict[1]
+  currency.value = dict[2]
+  methodList.value = dict[3]
+}
+
+
+onMounted(async () => {
+  await handleDictValue()
+  await initData()
+})
+
+
+</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>