修改

src/i18n/zh/form.js

@@ -83,5 +83,6 @@ export default {
     pleaseEnter: "请输入",
   },
 
-  
+  alter:'变更'
+   
 }

src/i18n/zh/lotCard.js

@@ -188,5 +188,11 @@ export default {
      used:'已用(加油包流量)',
      available:'可用(加油包流量)',
      DefaultRate:'默认速率',
-     CardDetails:'卡详情'
+     CardDetails:'卡详情',
+     TariffName:'资费名称',
+     CardType:'卡类型',
+     SilentPeriod:'沉默期',
+     FormationPool:'组池',
+     FlowPool:'流量池',
+     QuantityCardsPurchased:'购卡数量',
 }  

src/i18n/zh/order.js

@@ -46,5 +46,5 @@ export default {
     ReturnTheCard:'退卡',
     AuditOpinion:'审核意见',
     TurnDown:'驳回',
-    ReturnAmount:'退货金额'
+    ReturnAmount:'退货金额',
 }

src/views/flowPool/components/add.vue

@@ -1,14 +1,14 @@
 <script setup>
-import {ref, onMounted, toRefs, toRef, watch} from 'vue';
-import {Message} from "@arco-design/web-vue";
+import { ref, onMounted, toRefs, toRef, watch } from 'vue';
+import { Message } from "@arco-design/web-vue";
 import {
   addTrafficPool,
   updateTrafficPool,
   updateCardList
 } from "@/api/path/flowPool.api"
-import {tariffList} from "@/api/path/tariffManagement.api"
-import {Getdictionary} from '@/mixins/index.js'
-import {useI18n} from 'vue-i18n'
+import { tariffList } from "@/api/path/tariffManagement.api"
+import { Getdictionary } from '@/mixins/index.js'
+import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 const props = defineProps({
@@ -37,13 +37,13 @@ const typeCurrent = toRef(props, 'typeCurrent')
 const record = toRef(props, 'record')
 const emit = defineEmits(['update:modelValue', 'submit'])
 const rules = {
-  label: [{required: true, trigger: 'change',}],
-  source: [{required: true, trigger: 'change',}],
-  status: [{required: true, trigger: 'change',}],
-  simTariffId: [{required: true, trigger: 'change',}],
-  expireTime: [{required: true, trigger: 'change',}],
-  size: [{required: true, trigger: 'change',}],
-  sizeType: [{required: true, trigger: 'change',}],
+  label: [{ required: true, trigger: 'change', }],
+  source: [{ required: true, trigger: 'change', }],
+  status: [{ required: true, trigger: 'change', }],
+  simTariffId: [{ required: true, trigger: 'change', }],
+  expireTime: [{ required: true, trigger: 'change', }],
+  size: [{ required: true, trigger: 'change', }],
+  sizeType: [{ required: true, trigger: 'change', }],
 };
 const state = ref({
   typeList: [],
@@ -65,15 +65,15 @@ const state = ref({
   trafficList: [],
 })
 
-const {typeList, tariffIdList, formState, card, formRef, sourceList, trafficList} = toRefs(state.value)
+const { typeList, tariffIdList, formState, card, formRef, sourceList, trafficList } = toRefs(state.value)
 
 // 提交
-const handleSubmit = ({values, errors}) => {
+const handleSubmit = ({ values, errors }) => {
   formRef.value.validate(async (errors) => {
     if (!errors) {
       values.size = Number(values.size)
       if (formState.value.id) {
-        const {code, data} = await updateTrafficPool(formState.value)
+        const { code, data } = await updateTrafficPool(formState.value)
 
         if (code == 200) {
           Message.success({
@@ -84,7 +84,7 @@ const handleSubmit = ({values, errors}) => {
           emit('submit', true)
         }
       } else {
-        const {code, data} = await addTrafficPool(formState.value)
+        const { code, data } = await addTrafficPool(formState.value)
         if (code == 200) {
           Message.success({
             content: t('setting.addSuccess'),
@@ -100,7 +100,7 @@ const handleSubmit = ({values, errors}) => {
 
 // 获取资费列表选择id
 const handleTariff = async () => {
-  const {code, data} = await tariffList({
+  const { code, data } = await tariffList({
     "current": 1,
     "size": 10
   })
@@ -109,7 +109,7 @@ const handleTariff = async () => {
       return {
         ...item,
         value: item.id,
-        label:item.label +'---'+item.userName
+        label: item.label + '---' + item.userName
       }
     })
   }
@@ -139,8 +139,9 @@ const handleDictValue = async () => {
 }
 
 
-const selectChange = (val)=>{
-  updateCardList({id: val}).then(res => {
+const selectChange = (val) => {
+  formState.value.iccids = []
+  updateCardList({ id: val }).then(res => {
     if (res.code === 200) {
       card.value = res.data
     }
@@ -148,73 +149,75 @@ const selectChange = (val)=>{
 }
 
 watch(() => record.value, val => {
-  if(props.typeCurrent==2){
-    formState.value = val
+  const datas = JSON.parse(JSON.stringify(val))
+  if (props.typeCurrent == 2) {
+    formState.value = datas
+    formState.value.iccids = datas.iccids.map(val=>val.iccid)
   }
-}, {deep: true})
+}, { deep: true })
 
-
-onMounted(()=>{
-  handleDictValue()
-  handleTariff()
+watch(() => modelValue.value, val => {
+  if (val) {
+    handleDictValue()
+    handleTariff()
+  }
 })
 
+
 </script>
 
 <template>
   <a-modal :render-to-body="false"
-           :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
-           v-model:visible="modelValue" @cancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
+    :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
+    v-model:visible="modelValue" @cancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">
     <a-tabs v-model:active-key="activeKey">
       <a-tab-pane key="1" :title="$t('flowPool.infoTabs')">
-        <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit"
-                style="width: 620px;">
+        <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit" style="width: 620px;">
           <a-form-item :label="$t('flowPool.label')" field="label">
             <a-input v-model="formState.label"
-                     :placeholder="$t('form.PleaseEnterThe') + $t('flowPool.label')"/>
+              :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('flowPool.label')" />
           </a-form-item>
           <a-form-item :label="$t('flowPool.source')" field="source">
             <a-select v-model="formState.source"
-                      :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.source')">
+              :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('flowPool.source')">
               <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{
-                  item.label
-                }}
+                item.label
+              }}
               </a-option>
             </a-select>
           </a-form-item>
-          <!-- <a-form-item :label="$t('flowPool.trafficPoolStatus')" field="status"> -->
+          <a-form-item :label="$t('flowPool.trafficPoolStatus')" field="status">
             <a-select v-model="formState.status"
-                      :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolStatus')">
+              :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('flowPool.trafficPoolStatus')">
               <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{
-                  item.label
-                }}
+                item.label
+              }}
               </a-option>
             </a-select>
-          <!-- </a-form-item> -->
+          </a-form-item>
           <a-form-item :label="$t('flowPool.simRariff')" field="simTariffId">
             <a-select v-model="formState.simTariffId" @change="selectChange"
-                      :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.simRariff')">
+              :placeholder="$t('form.datapoolForm.pleaseSelect') + $t('flowPool.simRariff')">
               <a-option v-for=" item in tariffIdList" :key="item.id" :value="item.value">{{
-                  item.label
-                }}
+                item.label
+              }}
               </a-option>
             </a-select>
           </a-form-item>
-          <!-- <a-form-item :label="$t('flowPool.ICCIDlabel')" v-if="formState?.simTariffId!==null"> -->
-            <a-select v-model="formState.iccids" multiple
-                      :placeholder="$t('flowPool.ICCIDName')">
+          <a-form-item :label="$t('flowPool.ICCIDlabel')" v-if="formState?.simTariffId !== null">
+            <a-select v-model="formState.iccids" multiple :placeholder="$t('flowPool.ICCIDName')">
               <a-option v-for=" item in card" :key="item.iccid" :value="item.iccid">{{
-                  item.iccid
-                }}
+                item.iccid
+              }}
               </a-option>
             </a-select>
-          <!-- </a-form-item> -->
+          </a-form-item>
           <a-form-item :label="$t('flowPool.expireTime')" field="expireTime">
-            <a-date-picker v-model="formState.expireTime" show-time
-                           :time-picker-props="{ defaultValue: '09:09:06' }" format="YYYY-MM-DD HH:mm:ss"/>
+            <a-date-picker v-model="formState.expireTime" show-time :time-picker-props="{ defaultValue: '09:09:06' }"
+              format="YYYY-MM-DD HH:mm:ss" />
           </a-form-item>
-          <a-form-item :label="$t('flowPool.poolSize')" field="size" v-if="status==2">
-            <a-input v-model="formState.size" :placeholder="$t('flowPool.poolSize')"/>
+          <a-form-item :label="$t('flowPool.poolSize')" field="size" v-if="status == 2">
+            <a-input v-model="formState.size" :placeholder="$t('flowPool.poolSize')" />
             <a-select v-model="formState.sizeType" style="width: 80px; margin-left: 8px;">
               <a-option value="KB">KB</a-option>
               <a-option value="MB">MB</a-option>
@@ -223,8 +226,8 @@ onMounted(()=>{
           </a-form-item>
           <a-form-item>
             <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{
-                $t('form.Confirm')
-              }}
+              $t('form.Confirm')
+            }}
             </a-button>
             <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
           </a-form-item>
@@ -235,6 +238,4 @@ onMounted(()=>{
   </a-modal>
 </template>
 
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>

src/views/flowPool/config.js

@@ -3,7 +3,7 @@ export const columns = [
     { title: window.$t('flowPool.label'), dataIndex: 'label', align: 'center', width: 200 },
     // { title: window.$t('flowPool.userId'), dataIndex: 'user_id', align: 'center', width: 200 },
     // { title: window.$t('flowPool.trafficPoolType'), dataIndex: 'trafficPoolType', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.trafficPoolStatus'), dataIndex: 'trafficPoolStatus', align: 'center', width: 200 },
+    { title: window.$t('flowPool.trafficPoolStatus'), slotName: 'status', align: 'center', width: 200 },
     // { title: window.$t('flowPool.cardFlow'), dataIndex: 'cardFlow', align: 'center', width: 200 },
     // { title: window.$t('flowPool.UsedMonth'), dataIndex: 'UsedMonth', align: 'center', width: 200 },
     // { title: window.$t('flowPool.surplusFlow'), dataIndex: 'surplusFlow', align: 'center', width: 200 },

src/views/flowPool/index.vue

@@ -59,6 +59,10 @@
         </a-popconfirm>
       </template>
 
+      <template #status="{ record }">
+        <a-tag :color="record.status==1?'#00b42a':'#f53f3f'">{{ trafficList.find(val => val.value == record.status)?.label }}</a-tag>
+      </template>
+
     </a-table>
 
 
@@ -79,12 +83,12 @@ import {
   lotCatdList,
 } from "@/api/path/flowPool.api"
 import { useSystemStore } from "@/store/modules/systemStore"
-import {Getdictionary} from '@/mixins/index.js'
+import { Getdictionary } from '@/mixins/index.js'
 import Forewarning from "./components/forewarning.vue";
 import add from './components/add.vue'
 import openExport from "./components/openExport.vue"
-import {useI18n} from 'vue-i18n'
-const {t} = useI18n();
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
 const systemStore = useSystemStore()
 const state = ref({
   role: systemStore.getRole,
@@ -135,15 +139,12 @@ const intData = async () => {
   }
   const { data } = await lotCatdList(param)
   dataSource.value = (data.records || []).map((item, index) => {
-    // const trafficPoolType = typeList.value.find(val => val.value == item.trafficPoolType)?.label
-    const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
     const sourceName = sourceList.value.find(val => val.value == item.source)?.label
     const Activated = 0 + '/' + item.iccids?.length
     const HaveBeenUsed = 0 + '/' + item.size + item.sizeType
     return {
       ...item,
       sourceName,// 运营商名称
-      trafficPoolStatus,
       Activated: Activated,
       HaveBeenUsed: HaveBeenUsed,
     }

src/views/order/BuyCard/Card.vue

@@ -198,4 +198,4 @@ watch(() => modelValue.value, val => {
     }
 })
 </script>
-<style scoped></style>
+<style scoped></style> 

src/views/order/BuyCard/index.vue

@@ -26,7 +26,7 @@
         <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.CardPurchase')}}</a-tag>
+        <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>

src/views/order/ChangeOrder/detaile.vue

@@ -0,0 +1,195 @@
+<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.MinimumSubscriptionPeriod') }}</div>
+                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[0] }} {{ $t('order.Months') }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="item-label">{{  $t('order.MaximumSubscriptionPeriod') }}</div>
+                    <div class="item-content">{{ tariffForm.settlementCycle?.split('~')[1] }} {{ $t('order.Months') }}</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.StandardPrice') }}</div>
+                    <div class="item-content">{{ tariffForm.pricingName }}</div>
+                </div>
+            </div>
+            <div class="detail-item-box">
+                <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>
+
+    <!-- 分配卡号 -->
+    <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')">
+        <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
+        </Upload>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef ,watch} from 'vue';
+import { AcquireOrdertariff, DistributionCard,ReturntheOrderCard } 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 {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: {},
+    showCard: false,
+    res1:[],
+    res2:[],
+    res3:[],
+    userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
+})
+const { tariffForm, showCard,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 customRequest = (options) => {
+    const formData = new FormData();
+    formData.append('file', options.fileItem.file);  // 这里将文件添加到 FormDataList 中
+    formData.append('orderId', FormDataList.value.id);
+    DistributionCard(formData).then(res => {
+        Message.success(res.message)
+        res.data[0].forEach(val=>[
+            dataDetail.value.push({iccid:val})
+        ])
+    })
+}
+
+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 : '';
+    })
+    dataDetail.value = []
+    ReturntheOrderCard({id:val.id}).then(res=>{
+        dataDetail.value = res.data.map(val=>({...val,status:val.status==1?t('order.normal'):t('order.unsubscribe')}))
+    })
+},{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/order/ChangeOrder/index.vue

@@ -1,393 +1,153 @@
-<!-- 变更订单 -->
+<!-- 购卡订单 -->
 <template>
-    <div class="silent-expire-alarm">
-        <!-- 搜索条件区 -->
-        <div class="search-section">
-            <a-form :model="searchForm" layout="inline">
-                <a-form-item field="orderNumber" label="订单编号">
-                    <a-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" allow-clear />
-                </a-form-item>
-                <a-form-item field="customerName" label="客户">
-                    <a-input v-model="searchForm.customerName" placeholder="请输入客户名称" allow-clear />
-                </a-form-item>
-                <a-form-item field="customerName" label="卡号">
-                    <a-input v-model="searchForm.cardNumber" placeholder="请输入卡号" allow-clear />
-                </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>
-        <div class="audit-btn">
-            <a-button @click="openAudit" type="text">
-                <template #icon>
-                    <icon-plus-circle />
-                </template>
-                <template #default>审核</template>
-            </a-button>
-        </div>
-        <!-- 数据表格 -->
-        <a-table row-key="customerName" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
-            :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
-            <template #detail="{ record }">
-                <a-button @click="openDetail(record)" type="text">订单详情</a-button>
-            </template>
-        </a-table>
-        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @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>
-        <a-modal v-model:visible="showDetail" width="800px" title="变更资费" :hide-cancel="true" @cancel="detailCancel">
-            <div class="detail-box">
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">订单编号</div>
-                        <div class="item-content">53357981207</div>
-                    </div>
-                    <div class="detail-item">
-                        <div class="item-label">订单状态</div>
-                        <div class="item-content">已审核</div>
-                    </div>
-                </div>
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">运营商</div>
-                        <div class="item-content">泰国AIS</div>
-                    </div>
-                    <div class="detail-item">
-                        <div class="item-label">下单时间</div>
-                        <div class="item-content">2024-10-24 10:00:23</div>
-                    </div>
-                </div>
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">原资费信息</div>
-                        <div class="item-content">1.0G/月</div>
-                    </div>
-                    <div class="detail-item">
-                        <div class="item-label">原资费编码</div>
-                        <div class="item-content">MR206</div>
-                    </div>
-                </div>
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">新资费信息</div>
-                        <div class="item-content">5.0G/月</div>
-                    </div>
-                    <div class="detail-item">
-                        <div class="item-label">新资费编码</div>
-                        <div class="item-content">MR207</div>
-                    </div>
-                </div>
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">计费方式</div>
-                        <div class="item-content">按单流量消耗计费</div>
-                    </div>
-                    <div class="detail-item">
-                        <div class="item-label">结算周期</div>
-                        <div class="item-content">月</div>
-                    </div>
-                </div>
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">流量资费计费</div>
-                        <div class="item-content">0.8美金/G;MRC:0元;网络接入0元</div>
-                    </div>
-                </div>
-                <div class="detail-item-box">
-                    <div class="detail-item">
-                        <div class="item-label">变更数量</div>
-                        <div class="item-content">50
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="detail-table">
-                <a-table :columns="columnsDetail" :data="dataDetail" />
-            </div>
-        </a-modal>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <Search />
     </div>
+    <!-- 数据表格 -->
+    <a-table :data="tableData" :pagination="pageData" :columns="columns" @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>
+    </a-table>
+    '[].,m'
+
+  </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import { Message } from '@arco-design/web-vue';
-const selectedKeys = ref([]);
-const rowSelection = reactive({
-    type: 'checkbox',
-    showCheckedAll: true,
-    onlyCurrent: false,
-});
-const searchForm = reactive({
-    cardNumber: '',
-    customerName: '',
-    orderNumber: ''
+import { ref, onMounted, toRefs } from 'vue';
+import { purchaseOrderList } from '@/api/path/purchase';
+import { Getdictionary } from '@/mixins/index.js'
+import Search from '@/components/Search/index.vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n();
+// 数据层
+const state = ref({
+  tableData: [],
+  pageData: {
+    total: 0,
+    size: 10,
+    current: 1,
+  },
 });
 
+const {
+  tableData,
+  pageData,
+} = toRefs(state.value);
+
 const columns = [
-    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
-    {
-        title: '订单编号', dataIndex: 'orderNumber', ellipsis: true,
-        tooltip: true,
-        width: 100
-    },
-    { title: '客户名称', dataIndex: 'customerName' },
-    { title: '审核状态', dataIndex: 'auditStatus' },
-    {
-        title: '供应商名称', dataIndex: 'originName', ellipsis: true,
-        tooltip: true,
-        width: 150
-    },
-    { title: '新资费', dataIndex: 'moneyNew' },
-    { title: '原资费', dataIndex: 'moneyOld' },
-    { title: '卡号', dataIndex: 'cardNumber' },
-    { title: '订单金额(元)', dataIndex: 'orderMoney' },
-    { title: '结算金额(元)', dataIndex: 'finallyMoney' },
-    { title: '退回金额(元)', dataIndex: 'returnMoney' },
-    { title: '下单时间', dataIndex: 'orderTime' },
-    { title: '详情', slotName: 'detail', align: 'center' },
+  { title: t('order.SerialNumber'), dataIndex: 'index', align: 'center', ellipsis: true },
+  { title: t('order.OrderNum'), slotName: 'id', align: 'center', ellipsis: true },
+  { title: t('order.AuditStatus'), slotName: 'statusType', align: 'center', ellipsis: true },
+  { title: t('order.LogisticsStatus'), slotName: 'LogisticsStatus', align: 'center', ellipsis: true },
+  { title: t('lotCard.userName'), dataIndex: 'userName', align: 'center', ellipsis: true },
+  { title: t('order.NumberCardsPurchased'), dataIndex: 'quantity', align: 'center', ellipsis: true },
+  { title: t('order.SilentPeriod') + (t('lotCard.month')), dataIndex: 'periodOfSilence', align: 'center', ellipsis: true },
+  { title: t('order.CardType'), dataIndex: 'cardType', align: 'center', ellipsis: true },
+  { title: t('order.CarrierName'), dataIndex: 'sourceName', align: 'center', ellipsis: true },
+  { title: t('order.tariff'), dataIndex: 'trafficName', align: 'center', ellipsis: true },
+  { title: t('order.PurchaseAmount'), dataIndex: 'amount', align: 'center', ellipsis: true },
+  { title: t('order.ContractPhoto'), slotName: 'image', align: 'center', ellipsis: true },
+  { title: t('order.OrderTime'), dataIndex: 'createdAt', align: 'center', ellipsis: true },
+  { title: t('lotCard.validity'), dataIndex: 'endDate', align: 'center', ellipsis: true },
 ];
-const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' },
-{ title: '池名称及编号', dataIndex: 'nameAndId' },
-{ title: '卡状态', dataIndex: 'status' },
-]
-const dataDetail = ref([{
-    iccid: '8986061800002054589N',
-    nameAndId: '泰国监控40G共享/53357981207',
-    status: '沉默期'
-},
-{
-    iccid: '8986061800002054588N',
-    nameAndId: '泰国监控40G共享/53357981207',
-    status: '沉默期'
-}, {
-    iccid: '8986061800002054587N',
-    nameAndId: '泰国监控40G共享/53357981207',
-    status: '沉默期'
-}, {
-    iccid: '8986061800002054586N',
-    nameAndId: '泰国监控40G共享/53357981207',
-    status: '沉默期'
-},])
-const tableData = ref([
-    {
-        orderNumber: '13800138000',
-        customerName: '张三',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        moneyNew: '100',
-        moneyOld: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        orderNumber: '13800138000',
-        customerName: '李四',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        moneyNew: '100',
-        moneyOld: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        orderNumber: '13800138000',
-        customerName: '王五',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        moneyNew: '100',
-        moneyOld: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        orderNumber: '13800138000',
-        customerName: '赵六',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        moneyNew: '100',
-        moneyOld: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
 
-]);
-const pagination = reactive({
-    total: tableData.value.length,
-    current: 1,
-    pageSize: 10,
-});
-//订单详情的弹框
-const showDetail = ref(false);
-// 查看订单详情
-const openDetail = (item) => {
-    showDetail.value = true;
-}
-const handleSearch = () => {
-    console.log('Search form data:', searchForm);
-    Message.success('执行搜索操作');
-};
-
-const resetSearch = () => {
-    Object.keys(searchForm).forEach(key => {
-        if (Array.isArray(searchForm[key])) {
-            searchForm[key] = [];
-        } else {
-            searchForm[key] = null;
-        }
+// 订单列表
+const intData = async () => {
+  const param = {
+    current: pageData.value.current,
+    size: pageData.value.size,
+  }
+  const simTypeList = await Getdictionary('cardType')
+  let sourceList = await Getdictionary('source')
+  purchaseOrderList(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,
+        sourceName,
+        cardType
+      }
     });
-    Message.success('搜索条件已重置');
-};
-// 订单状态
-const options = [
-    { label: '发货', value: '1' },
-    { label: '退回', value: '2' },
-];
-// 审核
-const showAudit = ref(false);
-const formAudit = reactive({
-    customerName: '',
-    cardType: '',
-    money: '',
-    orderStatus: '',
-    auditOpinion: '',
-    fileList: []
-})
-// 触发审核的弹框
-const openAudit = () => {
-    showAudit.value = true;
-}
-// 确认审核
-const submitAudit = () => {
-    console.log(formAudit, 'lll')
-    window.setTimeout(() => {
-        showAudit.value = false;
-    }, 1000)
+    pageData.value.total = res.data.total;
+  })
+
 }
-const detailCancel = () => {
+// 分页
+const evChangePage = (page) => {
+  pageData.value.current = page
+  intData()
 }
+
+onMounted(() => {
+  intData();
+})
 </script>
 
 <style scoped lang="less">
 .silent-expire-alarm {
-    padding: 20px !important;
-    // background: #fcf;
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.setting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .search-section {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .arco-table-th {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .audit-txt {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-wrap: wrap;
 
-    .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-tag {
+    width: 180px;
+    color: #b2b2b2;
+    margin-right: 20px;
+
+    span {
+      color: #000;
+      margin-left: 20px;
     }
+  }
 }
 
 .audit-btn {
-    margin-bottom: 10px;
+  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;
-            }
+.detail-table {
+  margin-top: 20px;
+}
 
-            .item-content {
-                color: rgba(51, 51, 51, 1);
-            }
-        }
-    }
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
 }
 
-.detail-table {
-    margin-top: 20px;
+.line_heis:hover {
+  color: #168cff;
 }
-</style>
+</style>

src/views/tariffManagement/Management/add.vue

@@ -14,7 +14,7 @@
             </a-form-item>
             <template v-if="formState.source">
                 <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="simDataPlanId">
-                    <a-select v-model="formState.simDataPlanId">
+                    <a-select v-model="formState.simDataPlanId" :disabled="typeIndex!==1">
                         <a-option v-for=" (item, index) in planList" :key="item.id" :value="item.id">{{ $t('tariffManagement.DataPackage') }} {{
                             item.productName
                         }}

src/views/tariffManagement/index.vue

@@ -24,7 +24,7 @@
       <template #id="{ record }">
         <!-- 修改 -->
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)" v-if="role.getRole == 1">{{
-          $t('form.Edit')
+          $t('form.alter')
         }}</a>
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)">{{ $t('tariffManagement.SetMeal') }}</a>
         <!-- 删除 -->
@@ -78,6 +78,7 @@ import Meal from './Management/meal.vue'
 import Add from './Management/add.vue'
 import Search from '@/components/Search/index.vue'
 import {useI18n} from 'vue-i18n'
+import { Message } from '@arco-design/web-vue'
 const {t} = useI18n();
 const role = useSystemStore()
 const { proxy } = getCurrentInstance()