合并

src/api/path/dict.js

@@ -7,7 +7,7 @@ export function dictionaryList(param) {
 
 // 获取字典
 export function dictionaryDetail(params) {
-    return service.get('/admin/system/getDic', { params })
+    return service.get('/admin/system/getEnu', { params })
 }
 
 // 添加字典
@@ -27,5 +27,5 @@ export function dictionaryDelete(params) {
 
 // 获取下级分类
 export function dictionaryDeleteAll(params) {
-    return service.get('/admin/system/getDic', { params })
+    return service.get('/admin/system/getEnu', { params })
 }

src/api/path/flowPool.api.js

@@ -8,7 +8,7 @@ export function addTrafficPool(param) {
 }
 // list
 export function trafficPoolList(param) {
-    return service.post('/admin/platform/trafficPoolList', param)
+    return service.post('/admin/platform/tariffList', param)
 }
 // 编辑
 export function updateTrafficPool(param) {
@@ -27,4 +27,9 @@ export  function  getCardList (data) {
 // 获取资费下卡列表
 export  function  updateCardList (params) {
     return service.get('admin/platform/getTariffCard',{params})
+}
+
+// 流量池接口
+export function lotCatdList(data){
+    return service.post('/admin/platform/trafficPoolList', data)
 }

src/api/path/order.js

@@ -0,0 +1,41 @@
+import service from "../axios";
+
+// 订单审核
+export function OrderCardStatus(data){
+     return service.post("/admin/sim/applyAudit", data);
+}
+
+// 上传订单合同
+export function UploadOrderCardContract(data){
+     return service.post("/admin/sim/uploadContract", data);
+}
+
+// 购卡
+export function CardPurchase(data){
+    return service.post('/admin/sim/apply',data)
+}
+
+// 分配卡号
+export function DistributionCard(data){
+     return service.post("/admin/sim/assignSim", data);
+}
+
+// 查看订单下的卡
+export function viewOrderCard(params){
+    return service.get("/admin/sim/orderCard", {params});
+}
+
+// 获取资费
+export function AcquireOrdertariff(params){
+     return service.get("/admin/platform/getTariffById", {params});
+}
+
+// 获取资费下的卡
+export function TariffOrderCard(params){
+     return service.get("/admin/platform/getTariffCard", {params});
+}
+
+// 退卡
+export function ReturntheCard(data){
+     return service.post("/admin/sim/returnCard", data);
+}

src/api/path/purchase.js

@@ -23,5 +23,5 @@ export function platformUpdate(params) {
 
 // 退卡
 export function cancelOrderList(params) {
-    return service.post("/admin/sim/cancelOrderList", params);
+    return service.post("/admin/sim/returnCardList", params);
 }

src/components/Layout/components/layout/blendLeft.vue

@@ -91,7 +91,6 @@ const evMenuSecondLongShow = () => {
   });
 };
 const evMouseleaveMenu = (e) => {
-
   if (
     e.relatedTarget?.offsetParent?.id &&
     e.relatedTarget?.offsetParent?.id == "layout-sider"

src/components/Search/index.vue

@@ -0,0 +1,100 @@
+<template>
+    <div ref="search">
+        <!-- 动态渲染表单项 -->
+        <a-form :model="formState" layout="inline">
+            <a-form-item v-for="(item, index) in SearchForm" :key="index" :label="item.label" :field="item.field">
+                <component  :is="'a-' + item.type" v-model="formState[item.field].value"
+                    :placeholder="item.placeholder" allow-clear :style="{width:item.width?item.width+'px':''}">
+                    <a-option v-for="option in item.options" :key="option.value" :value="option.value" v-if="item.type=='select'">
+                        {{ option.label }}
+                    </a-option>
+                </component>
+            </a-form-item>
+            <a-form-item>
+                <a-button type="primary" @click="handleQuery">查询</a-button>
+                <a-button @click="handleReset">重置</a-button>
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, toRefs, onMounted, watch, watchEffect } from 'vue';
+import { Getdictionary } from "@/mixins/index.js";
+
+// 接收 props
+const props = defineProps({
+    SearchForm: {
+        type: Array,
+        default: () => [
+            {
+                type: 'input',
+                label: '字典名称',
+                field: 'source',
+                placeholder: '请输入字典名称',
+                value: '', // 双向绑定的值
+            },
+            {
+                type: 'input',
+                label: '资费ID',
+                field: 'trafficId',
+                placeholder: '请输入资费ID',
+                value: '', // 双向绑定的值
+            },
+            {
+                type: 'select',
+                label: '卡类型',
+                field: 'simType',
+                placeholder: '选择卡类型',
+                options: [], // 默认空，后面会通过字典加载
+                value: '', // 双向绑定的值
+                dict: 'CardType', // 字典加载的标识
+                width:'200'
+            },
+        ],
+    },
+});
+
+const { SearchForm } = toRefs(props);
+
+// 初始化 formState，确保每个字段都是对象，包含 `value` 属性
+const formState = ref({});
+SearchForm.value.forEach(item => {
+    formState.value[item.field] = {
+        value: item.value, // 初始化为字段的默认值
+    };
+});
+
+// 字典加载
+const loadDictOptions = async (index, dict) => {
+    const dictionary = await Getdictionary(dict);
+    SearchForm.value[index].options = dictionary || []; // 更新 options
+};
+
+// 监听 SearchForm 更新，加载字典
+watchEffect(async () => {
+    // 遍历 SearchForm，检查是否有字典需要加载
+    for (let index = 0; index < SearchForm.value.length; index++) {
+        const item = SearchForm.value[index];
+        if (item.dict) {
+            await loadDictOptions(index, item.dict);
+        }
+    }
+});
+
+// 查询操作
+const handleQuery = () => {
+    // 将表单数据通过事件传递给父组件
+    emit('query', formState.value);
+};
+
+// 重置操作
+const handleReset = () => {
+    // 重置表单状态
+    for (let key in formState.value) {
+        formState.value[key].value = '';
+    }
+    emit('reset', formState.value);
+};
+
+</script>

src/components/upload/index.vue

@@ -1,26 +1,45 @@
 <template>
-  <a-upload
-    :show-file-list="true"
-    :custom-request="customRequest"
-    list-type="picture-card"
-    :file-list="fileList"
-    :limit="minx"
-    @before-remove="beforeRemove"
-    image-preview
-    @before-upload="beforeUpload"
-  />
+  <a-upload :show-file-list="true" :custom-request="handelUpload == null ? customRequest : handelUpload"
+    :list-type="listType" :file-list="fileList" :limit="minx" @before-remove="beforeRemove" :show-remove-button="showRemoveButton" :show-cancel-button="false"
+    :image-preview="imagePreview" :accept="accept" @before-upload="beforeUpload" />
 </template>
 
 <script setup>
-import { toRef, ref, watch, watchEffect } from "vue";
-import { useSystemStore } from "@/store/modules/systemStore";
+import { toRef, ref, watch, watchEffect, onMounted } from 'vue';
+import { useSystemStore } from '@/store/modules/systemStore';
 import { Modal } from "@arco-design/web-vue";
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 import { Message } from "@arco-design/web-vue";
 
 const systemStore = useSystemStore();
 const { t } = useI18n();
 
+// 自定义请求：上传文件的处理逻辑
+const customRequest = async (option) => {
+  const { file } = option.fileItem;
+  const fileName = `thumbnail_${file.name}`;
+  const key = `test/${fileName}`;
+
+  // 获取上传客户端（假设 systemStore 已经定义了上传接口）
+  const client = await systemStore.getSTSClient();
+  const resClient = await client.putObject({
+    key: key,
+    body: file
+  });
+
+
+  // 上传成功后，更新 fileList 和 modelValue
+  if (resClient.statusCode === 200) {
+    const uploadedFileUrl = resClient.url;
+    fileList.value.push({ url: uploadedFileUrl, name: fileName, status: resClient.statusCode, uid: '0' });
+    // 更新父组件的 modelValue
+    if (minx.value === 1) {
+      emit('update:modelValue', uploadedFileUrl);
+    } else {
+      emit('update:modelValue', fileList.value.map(res => res.url).join(','));
+    }
+  }
+};
 // 接收外部传入的 props：modelValue 和 minx
 const props = defineProps({
   modelValue: {
@@ -29,7 +48,27 @@ const props = defineProps({
   },
   minx: {
     type: Number,
-    default: 1,
+    default: 1
+  },
+  listType: {
+    type: String,
+    default: 'picture-card'
+  },// 上传样式
+  imagePreview: {
+    type: Boolean,
+    default: true
+  }, // 是否支持预览
+  accept: {
+    type: String,
+    default: ''
+  }, // 上传文件类型
+  handelUpload: {
+    type: Function,
+    default: null  // 外部传入的自定义上传方法
+  },
+  showRemoveButton:{
+    type: Boolean,
+    default: true  // 是否显示删除按钮
   },
   beforeUpload: {
     type: Boolean,
@@ -38,66 +77,17 @@ const props = defineProps({
 });
 
 // 使用 toRef 确保对 props 的访问是响应式的
-const minx = toRef(props, "minx");
-const modelValue = toRef(props, "modelValue");
-
+const minx = toRef(props, 'minx');
+const modelValue = toRef(props, 'modelValue');
+const listType = toRef(props, 'listType');
+const imagePreview = toRef(props, 'imagePreview');
+const handelUpload = toRef(props, 'handelUpload');
 // 定义 emit，用于向外抛出事件
 const emit = defineEmits(["update:modelValue"]);
 
 // 用于存储文件列表，初始化时显示传递给子组件的值
 const fileList = ref([]);
 
-// 初始化：根据外部传入的 modelValue 进行文件列表的设置
-watchEffect(() => {
-  if (modelValue.value) {
-    if (Array.isArray(modelValue.value)) {
-      // 如果传递的是数组，则直接使用
-      fileList.value = modelValue.value.map((item) => ({ url: item }));
-    } else if (typeof modelValue.value === "string") {
-      // 如果传递的是字符串，则将字符串按逗号分割成数组
-      const urlList = modelValue.value
-        .split(",")
-        .map((url) => ({ url: url.trim() }));
-      fileList.value = urlList;
-    }
-  } else {
-    fileList.value = [];
-  }
-});
-
-// 自定义请求：上传文件的处理逻辑
-const customRequest = async (option) => {
-  const { file } = option.fileItem;
-  const fileName = `thumbnail_${file.name}`;
-  const key = `test/${fileName}`;
-
-  try {
-    // 获取上传客户端（假设 systemStore 已经定义了上传接口）
-    const client = await systemStore.getSTSClient();
-    const resClient = await client.putObject({
-      key: key,
-      body: file,
-    });
-
-    // 上传成功后，更新 fileList 和 modelValue
-    if (resClient.statusCode === 200) {
-      const uploadedFileUrl = resClient.url;
-      fileList.value.push({ url: uploadedFileUrl });
-
-      // 更新父组件的 modelValue
-      if (minx.value === 1) {
-        emit("update:modelValue", uploadedFileUrl);
-      } else {
-        emit(
-          "update:modelValue",
-          fileList.value.map((res) => res.url).join(",")
-        );
-      }
-    }
-  } catch (error) {
-    console.error("上传失败", error);
-  }
-};
 
 // 删除文件处理逻辑
 const beforeRemove = (file) => {
@@ -125,6 +115,25 @@ const beforeRemove = (file) => {
   });
 };
 
+watchEffect(() => {
+  if (modelValue.value) {
+    if (Array.isArray(modelValue.value)) {
+      // 如果传递的是数组，则直接使用
+      fileList.value = modelValue.value.map(item => ({ url: item, status: item.status, name: item.name }));
+    } else if (typeof modelValue.value === 'string') {
+      // 如果传递的是字符串，则将字符串按逗号分割成数组
+      const urlList = modelValue.value.split(',').map(url => ({ url: url.trim() }));
+      fileList.value = urlList;
+    }
+  } else {
+    fileList.value = [];
+  }
+})
+
+onMounted(() => {
+
+})
+
 // 上传前校验
 const beforeUpload = (rawFile) => {
   if(!props.beforeUpload) return true
@@ -141,6 +150,7 @@ const beforeUpload = (rawFile) => {
   }
   return true;
 };
+
 </script>
 
 <style scoped>

src/i18n/zh/tariffManagement.js

@@ -8,7 +8,7 @@ export default {
     billingType: "计费分类",//计费方式
     billingCycle: "计费周期",
     bagSize: "资费包大小",
-    pricing: "标准价格",
+    pricing: "结算价格",
     settlementCycle: "周期限制",// 结算周期
     settlementCycleLabel: "周期限制(月)",// 结算周期
 
@@ -35,5 +35,5 @@ export default {
     userName:'客户名称',
     MRCName:'MRC费(月租)',
     networkName:'网络接入费',
-    ActivatedNames:'流量总数'
+    ActivatedNames:'流量大小'
 }

src/mixins/index.js

@@ -1,10 +1,9 @@
-import {dictionaryDeleteAll} from '@/api/path/dict.js'
-
-
+import { dictionaryDeleteAll } from "@/api/path/dict.js";
+import { ref } from "vue";
 // 获取字典
 export function Getdictionary(params) {
-    // 返回 Promise
-    return dictionaryDeleteAll({ typeKey: params }).then(res => {
-        return res.data; // 将响应数据返回
-    });
+  // 返回 Promise
+  return dictionaryDeleteAll({ typeKey: params }).then((res) => {
+    return res.data; // 将响应数据返回
+  });
 }

src/store/modules/routerTag.js

@@ -10,16 +10,5 @@ export const RouterTagData = defineStore({
 
     },
     actions: {
-        tagsPushData(items) {
-            if (!this.tagData.some((res) => res.name === items.name)) {
-                this.tagData.push(items);
-            }
-            setLocalStorage('LAOUT_TAG', this.tagData);
-        },
-        // 删除标签
-        handleRemove(items){
-            this.tagData = this.tagData.filter((res) => res.name!== items.name);
-            setLocalStorage('LAOUT_TAG', this.tagData);
-        }
     }
 })

src/utils/router.js

@@ -1,14 +1,22 @@
 import router from '@/router' 
 
+import { useSystemStore } from '@/store/modules/systemStore'
+
+
 
 /**
  * * 退出
  */
 export const fn_logout = (router) => {
+  const systemStore = useSystemStore()
+  systemStore.$reset()
   localStorage.removeItem("user_login_information");
   localStorage.removeItem("routeItem");
   localStorage.removeItem("menus");
   localStorage.removeItem("token");
+  localStorage.removeItem("menuTabSate")
+  localStorage.removeItem("menuSecondLongShow")
+  
   if(router){
     router.push({
       name: "login"

src/views/flowPool/customerFlowPool/config.js

@@ -1,16 +1,19 @@
 export const columns = [
-    { title: window.$t('flowPool.poolNumber'), dataIndex: 'poolNumber', align: 'center', width: 200 },
+    { title: window.$t('flowPool.poolNumber'), dataIndex: 'id', align: 'center', width: 200 },
     { 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.trafficPoolType'), dataIndex: 'trafficPoolType', align: 'center', width: 200 },
     { title: window.$t('flowPool.trafficPoolStatus'), dataIndex: 'trafficPoolStatus', 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 },
-    { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', 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 },
+    // { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.source'), dataIndex: 'sourceName', align: 'center', width: 200 },
-    { title: window.$t('flowPool.cardRariffName'), dataIndex: 'cardRariffName', align: 'center', width: 200 },
-    { title: window.$t('flowPool.cardNum'), dataIndex: 'cardNum', align: 'center', width: 200 },
-    { title: window.$t('flowPool.totalFlow'), dataIndex: 'totalFlow', align: 'center', width: 200 },
-    { title: window.$t('flowPool.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
+    { title: window.$t('flowPool.tariffName'), dataIndex: 'simTariffName', align: 'center', width: 200 },
+    { title: window.$t('flowPool.ActivatedName'),dataIndex:'Activated', align: 'center', width: 200 },
+    { title: window.$t('flowPool.HaveBeenUsedName'), dataIndex: 'HaveBeenUsed', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.cardRariffName'), dataIndex: 'cardRariffName', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.cardNum'), dataIndex: 'cardNum', align: 'center', width: 200 },
+    // { title: window.$t('flowPool.totalFlow'), dataIndex: 'totalFlow', align: 'center', width: 200 },
+    { title: window.$t('flowPool.updated_at'), dataIndex: 'updatedAt', align: 'center', width: 200 },
 ]

src/views/flowPool/customerFlowPool/index.vue

@@ -78,8 +78,6 @@ const rowSelection = reactive({
 });
 const selectedKeys = ref([])
 
-
-
 const intData = async () => {
     const param = {
         current: pagination.value.current,

src/views/flowPool/index.vue

@@ -110,13 +110,6 @@
                 </a-option>
               </a-select>
             </a-form-item>
-            <!-- <a-form-item :label="$t('flowPool.trafficPoolType')" field="trafficPoolType">
-                <a-select v-model="formState.trafficPoolType" disabled
-                    :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')">
-                    <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
-                        }}</a-option>
-                </a-select>
-            </a-form-item> -->
             <a-form-item :label="$t('flowPool.simRariff')" field="simTariffId">
               <a-select v-model="formState.simTariffId"
                         :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.simRariff')">
@@ -148,109 +141,110 @@
             </a-form-item>
           </a-form>
         </a-tab-pane>
-        <!--                <a-tab-pane key="2" :title="$t('flowPool.warnTabs')">-->
-        <!--                    <a-form :model="formWarning" direction="inline">-->
-        <!--                        <div class="form-pool-tit">-->
-        <!--                            <div class="pool-icon"></div>-->
-        <!--                            客户端·池预警设置-->
-        <!--                        </div>-->
-        <!--                        <a-form-item field="totalDosage" tooltip="请输入" label="总用量占比">-->
-        <!--                            <a-input-number v-model="formWarning.totalDosage" :style="{ width: '320px' }"-->
-        <!--                                placeholder="请输入" allow-clear hide-button>-->
-        <!--                                <template #suffix>-->
-        <!--                                    %-->
-        <!--                                </template>-->
-        <!--                            </a-input-number>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.totalDosageCheck">达量预警</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="stoppagePool" label="达量停机">-->
-        <!--                            <a-select v-model="formWarning.stoppagePool" placeholder="请选择" :style="{ width: '320px' }"-->
-        <!--                                allow-clear>-->
-        <!--                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
-        <!--                                    :label="item.label" />-->
-        <!--                            </a-select>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.stoppagePoolCheck">达量停机</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="stopNetworkPool" label="达量断网">-->
-        <!--                            <a-select v-model="formWarning.stopNetworkPool" placeholder="请选择"-->
-        <!--                                :style="{ width: '320px' }" allow-clear>-->
-        <!--                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
-        <!--                                    :label="item.label" />-->
-        <!--                            </a-select>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.stopNetworkPoolCheck">达量断网</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="remindTotal" label="提醒次数">-->
-        <!--                            <a-input-number v-model="formWarning.remindTotal" :style="{ width: '320px' }"-->
-        <!--                                placeholder="请输入" allow-clear hide-button>-->
-        <!--                                <template #suffix>-->
-        <!--                                    次/月-->
-        <!--                                </template>-->
-        <!--                            </a-input-number>-->
-        <!--                        </a-form-item>-->
-        <!--                        <div class="form-pool-tit">-->
-        <!--                            <div class="pool-icon"></div>-->
-        <!--                            客户端·单卡预警设置-->
-        <!--                        </div>-->
-        <!--                        <a-form-item field="oneCardWarning" tooltip="请输入" label="单卡用量预警">-->
-        <!--                            <a-input-number v-model="formWarning.oneCardWarning" :style="{ width: '320px' }"-->
-        <!--                                placeholder="请输入" allow-clear hide-button>-->
-        <!--                            </a-input-number>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.outTotalCheck">达量预警</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="stoppageCard" label="达量停机">-->
-        <!--                            <a-select v-model="formWarning.stoppageCard" placeholder="请选择" :style="{ width: '320px' }"-->
-        <!--                                allow-clear>-->
-        <!--                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
-        <!--                                    :label="item.label" />-->
-        <!--                            </a-select>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.stoppageCardCheck">达量停机</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="stopNetworkCard" label="达量断网">-->
-        <!--                            <a-select v-model="formWarning.stopNetworkCard" placeholder="请选择"-->
-        <!--                                :style="{ width: '320px' }" allow-clear>-->
-        <!--                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
-        <!--                                    :label="item.label" />-->
-        <!--                            </a-select>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.stopNetworkCardCheck">达量断网</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <div class="form-pool-tit">-->
-        <!--                            <div class="pool-icon"></div>-->
-        <!--                            管理端预警设置-->
-        <!--                        </div>-->
-        <!--                        <a-form-item field="poolUsedWarning" tooltip="请输入" label="池已用量预警">-->
-        <!--                            <a-input-number v-model="formWarning.poolUsedWarning" :style="{ width: '320px' }"-->
-        <!--                                placeholder="请输入" allow-clear hide-button>-->
-        <!--                                <template #suffix>-->
-        <!--                                    %-->
-        <!--                                </template>-->
-        <!--                            </a-input-number>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.poolUsedCheck">达量预警</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="stoppageManagement" label="达量停机">-->
-        <!--                            <a-select v-model="formWarning.stoppageManagement" placeholder="请选择"-->
-        <!--                                :style="{ width: '320px' }" allow-clear>-->
-        <!--                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
-        <!--                                    :label="item.label" />-->
-        <!--                            </a-select>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.stoppageManagementCheck">达量停机</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item field="stopNetworkManagement" label="达量断网">-->
-        <!--                            <a-select v-model="formWarning.stopNetworkManagement" placeholder="请选择"-->
-        <!--                                :style="{ width: '320px' }" allow-clear>-->
-        <!--                                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
-        <!--                                    :label="item.label" />-->
-        <!--                            </a-select>-->
-        <!--                            <a-checkbox value="1" v-model="formWarning.stopNetworkManagementCheck">达量断网</a-checkbox>-->
-        <!--                        </a-form-item>-->
-        <!--                        <a-form-item>-->
-        <!--                            <a-button type="primary" html-type="submit" @click="resetForm"-->
-        <!--                                style="margin-right: 10px;">{{-->
-        <!--                                    $t('form.Confirm')-->
-        <!--                                }}</a-button>-->
-        <!--                            <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>-->
-        <!--                        </a-form-item>-->
-        <!--                    </a-form>-->
-        <!--                </a-tab-pane>-->
+        <a-tab-pane key="2" :title="$t('flowPool.warnTabs')">
+          <a-form :model="formWarning" direction="inline">
+            <div class="form-pool-tit">
+              <div class="pool-icon"></div>
+              客户端·池预警设置
+            </div>
+            <a-form-item field="totalDosage" tooltip="请输入" label="总用量占比">
+              <a-input-number v-model="formWarning.totalDosage" :style="{ width: '320px' }"
+                              placeholder="请输入" allow-clear hide-button>
+                <template #suffix>
+                  %
+                </template>
+              </a-input-number>
+              <a-checkbox value="1" v-model="formWarning.totalDosageCheck">达量预警</a-checkbox>
+            </a-form-item>
+            <a-form-item field="stoppagePool" label="达量停机">
+              <a-select v-model="formWarning.stoppagePool" placeholder="请选择" :style="{ width: '320px' }"
+                        allow-clear>
+                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                          :label="item.label"/>
+              </a-select>
+              <a-checkbox value="1" v-model="formWarning.stoppagePoolCheck">达量停机</a-checkbox>
+            </a-form-item>
+            <a-form-item field="stopNetworkPool" label="达量断网">
+              <a-select v-model="formWarning.stopNetworkPool" placeholder="请选择"
+                        :style="{ width: '320px' }" allow-clear>
+                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                          :label="item.label"/>
+              </a-select>
+              <a-checkbox value="1" v-model="formWarning.stopNetworkPoolCheck">达量断网</a-checkbox>
+            </a-form-item>
+            <a-form-item field="remindTotal" label="提醒次数">
+              <a-input-number v-model="formWarning.remindTotal" :style="{ width: '320px' }"
+                              placeholder="请输入" allow-clear hide-button>
+                <template #suffix>
+                  次/月
+                </template>
+              </a-input-number>
+            </a-form-item>
+            <div class="form-pool-tit">
+              <div class="pool-icon"></div>
+              客户端·单卡预警设置
+            </div>
+            <a-form-item field="oneCardWarning" tooltip="请输入" label="单卡用量预警">
+              <a-input-number v-model="formWarning.oneCardWarning" :style="{ width: '320px' }"
+                              placeholder="请输入" allow-clear hide-button>
+              </a-input-number>
+              <a-checkbox value="1" v-model="formWarning.outTotalCheck">达量预警</a-checkbox>
+            </a-form-item>
+            <a-form-item field="stoppageCard" label="达量停机">
+              <a-select v-model="formWarning.stoppageCard" placeholder="请选择" :style="{ width: '320px' }"
+                        allow-clear>
+                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                          :label="item.label"/>
+              </a-select>
+              <a-checkbox value="1" v-model="formWarning.stoppageCardCheck">达量停机</a-checkbox>
+            </a-form-item>
+            <a-form-item field="stopNetworkCard" label="达量断网">
+              <a-select v-model="formWarning.stopNetworkCard" placeholder="请选择"
+                        :style="{ width: '320px' }" allow-clear>
+                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                          :label="item.label"/>
+              </a-select>
+              <a-checkbox value="1" v-model="formWarning.stopNetworkCardCheck">达量断网</a-checkbox>
+            </a-form-item>
+            <div class="form-pool-tit">
+              <div class="pool-icon"></div>
+              管理端预警设置
+            </div>
+            <a-form-item field="poolUsedWarning" tooltip="请输入" label="池已用量预警">
+              <a-input-number v-model="formWarning.poolUsedWarning" :style="{ width: '320px' }"
+                              placeholder="请输入" allow-clear hide-button>
+                <template #suffix>
+                  %
+                </template>
+              </a-input-number>
+              <a-checkbox value="1" v-model="formWarning.poolUsedCheck">达量预警</a-checkbox>
+            </a-form-item>
+            <a-form-item field="stoppageManagement" label="达量停机">
+              <a-select v-model="formWarning.stoppageManagement" placeholder="请选择"
+                        :style="{ width: '320px' }" allow-clear>
+                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                          :label="item.label"/>
+              </a-select>
+              <a-checkbox value="1" v-model="formWarning.stoppageManagementCheck">达量停机</a-checkbox>
+            </a-form-item>
+            <a-form-item field="stopNetworkManagement" label="达量断网">
+              <a-select v-model="formWarning.stopNetworkManagement" placeholder="请选择"
+                        :style="{ width: '320px' }" allow-clear>
+                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"
+                          :label="item.label"/>
+              </a-select>
+              <a-checkbox value="1" v-model="formWarning.stopNetworkManagementCheck">达量断网</a-checkbox>
+            </a-form-item>
+            <a-form-item>
+              <a-button type="primary" html-type="submit" @click="resetForm"
+                        style="margin-right: 10px;">{{
+                  $t('form.Confirm')
+                }}
+              </a-button>
+              <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
+            </a-form-item>
+          </a-form>
+        </a-tab-pane>
       </a-tabs>
 
     </a-modal>
@@ -329,7 +323,7 @@ import {
   deleteTrafficPool,
   addTrafficPool,
   updateTrafficPool,
-  trafficPoolList,
+  lotCatdList,
   getCardList,
   updateCardList
 } from "@/api/path/flowPool.api"
@@ -370,19 +364,19 @@ const intData = async () => {
     ...searchForm.value,
     type: 1
   }
-  const {data} = await trafficPoolList(param)
+  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
+    const Activated = 0 + '/' + item.iccids?.length
+    const HaveBeenUsed = 0 + '/' + item.size + item.sizeType
     return {
       ...item,
       sourceName,// 运营商名称
       trafficPoolStatus,
       Activated: Activated,
-      HaveBeenUsed:HaveBeenUsed,
+      HaveBeenUsed: HaveBeenUsed,
       poolNumber: "NR0" + (index + 1),
     }
   })

src/views/flowPool/rearFlowPool/index.vue

@@ -336,7 +336,7 @@ import {
   deleteTrafficPool,
   addTrafficPool,
   updateTrafficPool,
-  trafficPoolList,
+  lotCatdList,
   updateCardList
 } from "@/api/path/flowPool.api"
 import {tariffList} from "@/api/path/tariffManagement.api"
@@ -372,12 +372,12 @@ const intData = async () => {
     trafficPoolType: '2',
     type:2
   }
-  const {data} = await trafficPoolList(param)
+  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 Activated = 0 + '/' + item.iccids?.length
     const HaveBeenUsed = 0+ '/' + item.size+item.sizeType
     return {
       ...item,
@@ -626,6 +626,7 @@ const handleDictValue = async () => {
   sourceList.value = await Getdictionary('source')
   trafficList.value = await Getdictionary('trafficPacketStatus')
   typeList.value = await Getdictionary('trafficPoolType')
+
 }
 
 watch(() => formState.value.simTariffId, val => {

src/views/lotCard/cardList/config.js

@@ -3,10 +3,11 @@ export const columns = [
   { title: window.$t('lotCard.source'), dataIndex: 'sourceName', align: 'center',  ellipsis:true },
   { title: 'IMSI', dataIndex: 'account', align: 'center', ellipsis:true},
   { title: 'SIM绑定的IMSI', dataIndex: 'currentImsi', align: 'center', ellipsis:true  },
-  { title: 'SIM货币余额', dataIndex: 'moneyBalances', align: 'center', ellipsis:true  },
+  // { title: 'SIM货币余额', dataIndex: 'moneyBalances', align: 'center', ellipsis:true  },
   { title: 'SIM生成日期', dataIndex: 'createTime', align: 'center',  ellipsis:true },
   { title: '支付方式', dataIndex: 'payType', align: 'center', ellipsis:true  },
   { title: 'SIM状态', dataIndex: 'accountStatus', align: 'center', ellipsis:true  },
+  { title: '预警状态', dataIndex: 'accountStatus', align: 'center', ellipsis:true  },
   { title: '已使用总流量', dataIndex: 'dataUsageTotal', align: 'center',  ellipsis:true },
   { title: '语音呼入分钟数', dataIndex: 'voiceMtTotal', align: 'center', ellipsis:true  },
   { title: '语音呼出分钟数', dataIndex: 'voiceMoTotal', align: 'center', ellipsis:true  },
@@ -16,13 +17,21 @@ export const columns = [
   { title: 'SIM关闭日期', dataIndex: 'closeTime', align: 'center', ellipsis:true  },
   { title: 'SIM激活日期', dataIndex: 'activeTime', align: 'center',  ellipsis:true },
   { title: 'IMSI所属供应商名称', dataIndex: 'currentImsiProvider', align: 'center',  ellipsis:true },
-  { title: '流量包', dataIndex: 'dataPackageName', align: 'center',  ellipsis:true },
+  { title: '卡套餐', dataIndex: 'dataPackageName', align: 'center',  ellipsis:true },
+  { title: '预警状态', dataIndex: 'forewarningStatus', align: 'center', width: 200 ,ellipsis:true},
+  { title: '历史用量', dataIndex: 'HistoricalUsage', align: 'center', width: 200 ,ellipsis:true},
+  { title: '池名称/编号', dataIndex: 'poolNum', align: 'center', width: 200 ,ellipsis:true},
+  { title: '沉默期到期时间', dataIndex: 'SilenceEndtime', align: 'center', width: 200 ,ellipsis:true},
+  { title: '已用(套餐流量)', dataIndex: 'usedFlowrate', align: 'center', width: 200 ,ellipsis:true},
+  { title: '可用(套餐流量)', dataIndex: 'usableFlowrate', align: 'center', width: 200 ,ellipsis:true},
+  { title: '已用(加油包流量)', dataIndex: 'usedBg', align: 'center', width: 200 ,ellipsis:true},
+  { title: '可用(加油包流量)', dataIndex: 'usableBg', align: 'center', width: 200 ,ellipsis:true},
   {
     title: window.$t('global.common.operations'),
     dataIndex: 'id',
     slotName: 'id',
     align: 'center',
-    width: 280,
+    width: 200,
     fixed: "right",
   }
 ]

src/views/lotCard/cardList/index.vue

@@ -1,16 +1,6 @@
 <template>
   <!-- 卡清单管理 -->
   <div class="container">
-    <div class="head-title">
-      <span>{{ route.meta.title }} </span>
-      <span class="head-title-right">
-        <a-popconfirm :content="$t('form.ImportConfirm')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
-          @ok="handleImport()">
-          <!-- <a-button class="m-r-10" type="primary"> {{ $t('form.Import') }}</a-button> -->
-        </a-popconfirm>
-      </span>
-
-    </div>
     <!-- 搜索条件区 -->
     <div class="search-section">
       <a-form :model="searchForm" ref="formRef" layout="inline">
@@ -48,7 +38,7 @@
     </div>
 
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
-      :expandable="expandable" @page-change="evChangePage">
+      @page-change="evChangePage">
       <template #id="{ record }">
         <!-- 查看流量消耗 -->
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">详情</a>
@@ -56,20 +46,17 @@
 
     </a-table>
     <!-- 查看流量消耗 -->
-    <trafficUseDialog ref="trafficUseDialogRef" @submit="intData()"/>
+    <trafficUseDialog ref="trafficUseDialogRef" @submit="intData()" />
+
 
-    
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, getCurrentInstance, h } from "vue";
-import { useRoute } from "vue-router";
+import { onMounted, ref, getCurrentInstance, h } from "vue";
 import { columns } from "./config";
-import { Message, Notification } from '@arco-design/web-vue'
-import { cardInfoList, cardInfoImport, orderList, orderFlowData } from "@/api/path/lotCard.api"
+import { cardInfoList } from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
-import list from "./list.vue";
 import { Getdictionary } from '@/mixins/index.js'
 const { proxy } = getCurrentInstance()
 const formRef = ref()
@@ -81,7 +68,6 @@ const statusList = ref([]);
 const sourceList = ref([]);
 const serviceList = ref([]);
 const dataSource = ref([]);
-const route = useRoute();
 const pagination = ref({
   total: 0,
   pageSize: 10,
@@ -98,81 +84,34 @@ const intData = async () => {
     ...searchForm.value,
   }
   const soureName = await Getdictionary('source')
+  const accountStatusName = await Getdictionary('account')
   const { data } = await cardInfoList(param)
-  dataSource.value = (data.records || []).map((item) => {
+  dataSource.value = (data.records || []).map((item,index) => {
     const payType = item.payType == 0 ? 'Prepay' : 'Postpay';
     const dataPackage = item.Info.dataPackage.map(res => res.productName).join(',');
     const soure = soureName.find(val => val.value == item.source)?.label
+    const accountStatus = accountStatusName.find(val => val.value == item.Info.accountStatus)?.label
     return {
       ...item,
       ...item.Info,
       payType: payType,
       dataPackageName: dataPackage,
-      sourceName: soure
+      sourceName: soure,
+      accountStatus,
+      forewarningStatus:'正常',
+      HistoricalUsage:'10/G',
+      poolNum:'Not/'+index,
+      SilenceEndtime:'2025-2-3',
+      usedFlowrate:'14G',
+      usableFlowrate:'3G',
+      usedBg:'50MB',
+      usableBg:'140MB',
     }
   })
   pagination.value.total = data.total
 }
 
-
-// const { data: orderData } = await orderList({ current: 1, size: 999, ICCID: ICCID.value })
-//     orderData.records?.forEach(async (orderItem) => {
-
-//         const params = {
-//             // iccid: orderItem.ICCID,
-//             iccid: '89852342022040149139',
-//             childOrderId: orderItem.id,
-//             subscriptionKey: "1824754463183432097",
-//         }
-
-//         let trafficList = []
-//         const { data } = await orderFlowData(params)
-//         trafficList = data.historyData || []
-
-//         dataSource.value.push({
-//             ...orderItem,
-//             trafficList
-//         })
-//     })
-
-
-const expandable = {
-  expandedRowRender: (record) => {
-    if (record.orderArr && Array.isArray(record.orderArr) && record.orderArr.length > 0) {
-      return h('div', {}, [
-        h(list, { 'data': record.orderArr })
-      ]);
-    }
-    return h('div', {}, '暂无数据')
-  },
-};
-
-const handleImport = async () => {
-  if (!searchForm.value.iccid) {
-    Message.warning({
-      content: '请先输入ICCID,可输入多个以逗号分隔,然后再点击导入！',
-      duration: 2000,
-    })
-    return
-  }
-  const iccids = searchForm.value.iccid.split(',')
-  const iccidList = iccids.map(item => {
-    return {
-      iccid: item
-    }
-  })
-  const { code, data } = await cardInfoImport({ iccidList })
-  if (code == 200) {
-    Message.success({
-      content: data,
-      duration: 2000,
-    })
-    intData()
-  }
-
-};
-
-// 查看当前流量消耗详情
+// 详情
 const handletrafficUseDialog = (data) => {
   trafficUseDialogRef.value.open(data)
 }
@@ -182,6 +121,8 @@ const evChangePage = (page) => {
   pagination.value.current = page
   intData()
 }
+
+
 const handleSearch = () => {
   formRef.value.validate((errors) => {
     if (!errors) {
@@ -243,4 +184,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>

src/views/lotCard/cardList/list.vue

@@ -1,94 +0,0 @@
-<template>
-    <!-- 订单列表-查看订单流量明细 -->
-    <div class="trafficUse">
-        <ul class="order_list_box">
-            <li class="list_box_item" v-for="(item, index) in data" key="index">
-                <div class="list_item_left">
-                    <a-progress type="circle" :percent="0.2" />
-                </div>
-                <div class="list_item_right">
-                    <p>
-                        <span>{{ $t('lotCard.orderID') }}：{{ item.id }}</span>
-                        <!-- <span class="list_item_right_span">{{ $t('lotCard.orderType') }}：{{ item.orderType }}</span> -->
-                        <!-- <span>更新时间：{{ item.updated_at }}</span> -->
-                    </p>
-                    <template v-if="item.trafficList">
-                        <p v-for="trafficVal in item.trafficList" :key="trafficVal.id">
-                            <span class="list_item_right_span"> 流量总量：{{ trafficVal.qtaconsumption }}</span>
-                            <span class="list_item_right_span">流量使用时间：{{ trafficVal.time }}</span>
-                            <span>国家：中国</span>
-                        </p>
-                    </template>
-
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
-<script setup>
-import lotCard from '@/i18n/zh/lotCard';
-
-const props = defineProps({
-    data: Array
-});
-
-
-
-
-</script>
-
-<style scoped lang="less">
-ul,
-li,
-p,
-span {
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-}
-
-
-.order_list_box {
-    list-style: none;
-    max-height: 700px;
-    overflow-y: scroll;
-    margin: auto;
-    padding: 0 20px;
-}
-
-.list_box_item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-
-    .list_item_left {
-        width: 60px;
-        height: 60px;
-        // background: gainsboro;
-        margin-right: 10px;
-    }
-
-    .list_item_right {
-        p {
-            display: flex;
-            align-items: center;
-            margin: 5px 0;
-        }
-
-        span {
-            display: flex;
-            align-items: center;
-
-        }
-
-        .list_item_right_span::after {
-            content: "";
-            display: inline-block;
-            width: 1px;
-            height: 20px;
-            background-color: gray;
-            margin: 0 10px;
-        }
-    }
-}
-</style>

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -18,7 +18,7 @@
                             </a-form-item>
                         </a-col>
                         <a-col :span="12">
-                            <a-form-item label="SIM绑定的IMSI">
+                            <a-form-item label="IMSI">
                                 {{ Card_info.currentImsi }}
                             </a-form-item>
                         </a-col>

src/views/order/BuyCard/Card.vue

@@ -0,0 +1,177 @@
+<template>
+    <!-- 创建 -->
+    <a-modal v-model:visible="modelValue" title="购卡" width="600px" @cancel="closeModal(showAudit, formState)" centered
+        :maskClosable="false" okText="确定" cancelText="关闭" :footer="null">
+        <a-form ref="formRef" :rules="rules" :model="formState" @submit="submitPurchase">
+            <a-form-item field="customerName" label="客户名称">
+                <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="请选择运营商">
+                    <a-option v-for="item of sourceList" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item label="资费名称" field="tariffId">
+                <a-select v-model="formState.trafficId" :style="{ width: '380px' }" placeholder="请选择资费ID">
+                    <a-option v-for="item of tariffData" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item label="卡类型" field="cardType">
+                <a-select v-model="formState.simType" :style="{ width: '380px' }" placeholder="请选择卡类型">
+                    <a-option v-for="item of orderType" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item label="沉默期">
+                <a-select v-model="formState.periodOfSilence" :style="{ width: '380px' }" placeholder="请选择沉默期">
+                    <a-option v-for="item of silenceOptions" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
+            <a-form-item label="流量池" 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="购卡数量" field="num">
+                <a-input v-model="formState.quantity" placeholder="请输入购卡数量" />
+            </a-form-item>
+            <a-form-item>
+                <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
+                <a-button @click="closeModal(formState)">取消</a-button>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, toRefs, defineProps, onMounted, toRef } from 'vue';
+import { tariffList } from "@/api/path/tariffManagement.api";
+import { Getdictionary } from '@/mixins/index.js'
+import {CardPurchase} from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    }
+})
+
+
+const modelValue = toRef(props, 'modelValue')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const state = ref({
+    userName: localStorage.getItem('remember_user_name'),
+    userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
+    showAudit: false,
+    formRef: null,
+    formState: {
+        source: null, // 来源
+        trafficId: "", // 资费Id
+        periodOfSilence: "", // 静默期
+        isTrafficPool: "", // 是否是流量池 1:是 2:否
+        quantity: null, // 采购数量
+        simType: "" // 卡类型
+    },
+    sourceList: [],
+    silenceOptions: [], // 沉默期
+    orderType: [], // 卡类型
+    flowPoolData: [], // 组池
+    tariffData:[]
+})
+
+const { showAudit, formState, sourceList, silenceOptions, orderType, flowPoolData, userName, userType ,tariffData,formRef} = toRefs(state.value)
+
+const rules = {
+    source: [{ required: true, trigger: 'change', }],
+    trafficId: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    simType: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    periodOfSilence: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    isTrafficPool: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+    quantity: [
+        {
+            required: true,
+            trigger: 'change',
+        },
+    ],
+};
+
+const handleDictValue = async () => {
+    // 使用 Promise.all 并行获取字典数据
+    const [sourceRes, cardTypeRes, silenceOfRes, groupPoolRes] = await Promise.all([
+        Getdictionary('source'),
+        Getdictionary('cardType'),
+        Getdictionary('silenceOf'),
+        Getdictionary('groupPool')
+    ]);
+
+    // 分别将返回的数据保存到响应的 ref 变量中
+    sourceList.value = sourceRes;
+    orderType.value = cardTypeRes;
+    silenceOptions.value = silenceOfRes;
+    flowPoolData.value = groupPoolRes;
+    const param = {
+        current: 1,
+        size: 999,
+    }
+    tariffList(param).then(res => {
+        tariffData.value = res.data.records.map(item => ({
+            label: item.label,
+            value: item.id,
+            ...item
+        }));
+    })
+}
+// 确认购卡
+const submitPurchase = ({ values, errors }) => {
+    formRef.value.validate(async (errors) => {
+        if (!errors) {
+            const data = {
+                source: String(formState.value.source),
+                trafficId: formState.value.trafficId,
+                quantity: Number(formState.value.quantity),
+                simType: formState.value.simType,
+                periodOfSilence: String(formState.value.periodOfSilence),
+                isTrafficPool: formState.value.isTrafficPool
+            }
+            CardPurchase(data).then(res => {
+                Message.success(res.message)
+                emit('update:modelValue', false)
+                emit('submit', true)
+            })
+        }
+    })
+}
+
+const closeModal = (val) => {
+    emit('update:modelValue', false)
+    Object.keys(formState.value).forEach(key => {
+        formState.value[key] = ''
+    })
+}
+
+onMounted(() => {
+    handleDictValue()
+})
+</script>
+<style scoped></style>

src/views/order/BuyCard/detaile.vue

@@ -0,0 +1,188 @@
+<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 }}
+                        <a-button type="primary" @click="showCard = true" style="margin-left:10px;"
+                            v-if="userType == 1 && FormDataList.moderationStatus == 2">分配卡号</a-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="detail-table">
+            <a-table :columns="columnsDetail" :data="dataDetail" />
+        </div>
+    </a-modal>
+
+    <!-- 分配卡号 -->
+    <a-modal v-model:visible="showCard" title="分配卡号" @cancel="closeModal(showCard, FormDataList)"
+        @before-ok="showCard = false" okText="确认" cancelText="取消">
+        <Upload listType="" minx="9999" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
+        </Upload>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef ,watch} from 'vue';
+import { AcquireOrdertariff, DistributionCard,TariffOrderCard } from '@/api/path/order'
+import { Message } from '@arco-design/web-vue';
+import Upload from "@/components/upload/index.vue";
+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: {},
+    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: '卡状态', dataIndex: 'status' },{ title: '创建时间', dataIndex: 'expireTime' }
+]
+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)
+}
+
+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 = []
+    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/order/BuyCard/index copy.vue

@@ -1,428 +0,0 @@
-<!-- 购卡订单 -->
-<template>
-  <div class="silent-expire-alarm">
-    <!-- 搜索条件区 -->
-    <div class="search-section">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="cardNumber" 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>
-          <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 #operate="{ record }">
-        <a-button @click="openContract(record)" type="text">上传合同</a-button>
-      </template>
-      <template #detail="{ record }">
-        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
-      </template>
-    </a-table>
-    <a-modal v-model:visible="uploadContract" title="上传合同" @cancel="handleCancel" @before-ok="handleBeforeOk"
-      okText="保存" cancelText="关闭">
-      <a-form :model="formContract" auto-label-width>
-        <a-form-item field="orderNumber" label="单号">
-          <!-- <a-input v-model="formContract.orderNumber" disabled placeholder="请输入单号" /> -->
-          <div class="audit-txt">{{ formContract.orderNumber }}</div>
-        </a-form-item>
-        <a-form-item field="customerName" label="客户">
-          <!-- <a-input v-model="formContract.customerName" disabled placeholder="请输入客户" /> -->
-          <div class="audit-txt" style="color:#418035;">{{ formContract.customerName }}</div>
-        </a-form-item>
-        <a-form-item field="fileList" label="销售合同">
-          <a-upload action="/" :default-file-list="formContract.fileList" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-    <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">2024-10-24 17:46:33</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">1.0G/月</div>
-          </div>
-        </div>
-        <div class="detail-item-box">
-          <div class="detail-item">
-            <div class="item-label">最短订阅周期</div>
-            <div class="item-content">3个月</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">按单流量消耗计费</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">工业级PlugIn</div>
-          </div>
-          <div class="detail-item">
-            <div class="item-label">卡板费</div>
-            <div class="item-content">1美金</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">6个月</div>
-          </div>
-        </div>
-        <div class="detail-item-box">
-          <div class="detail-item">
-            <div class="item-label">卡数量</div>
-            <div class="item-content">10000;已分配0，已退回0，已转移0
-              <a-button type="primary" @click="showCard = true" style="margin-left:10px;">分配卡号</a-button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="detail-table">
-        <a-table :columns="columnsDetail" :data="dataDetail" />
-      </div>
-    </a-modal>
-    <a-modal v-model:visible="showCard" width="800px" title="分配卡号" @cancel="showCard = false" @before-ok="submitCard"
-      okText="确认" cancelText="取消">
-      <a-textarea :auto-size="{
-        minRows: 15,
-        maxRows: 15
-      }" v-model="cardNumber" max-length="1000" :show-word-limit="true" placeholder="请输入iccid,一行一个或者逗号分隔；不支持两种混合号码。"
-        allow-clear />
-    </a-modal>
-  </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: '',
-});
-
-const columns = [
-  { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
-  { title: '订单编号', dataIndex: 'cardNumber' },
-  { title: '客户名称', dataIndex: 'customerName' },
-  { title: '审核状态', dataIndex: 'auditStatus' },
-  { title: '订单状态', dataIndex: 'orderStatus' },
-  { title: '开卡张数', dataIndex: 'cardQuantity' },
-  { title: '通道', dataIndex: 'source' },
-  { title: '资费', dataIndex: 'money' },
-  { title: '结算价/原价(元)', dataIndex: 'outMoney' },
-  { title: '下单时间', dataIndex: 'orderTime' },
-  { title: '操作', slotName: 'operate', align: 'center' },
-  { title: '详情', slotName: 'detail', align: 'center' },
-];
-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([
-  {
-    cardNumber: '13800138000',
-    customerName: '张三',
-    auditStatus: '1',
-    orderStatus: '1',
-    cardQuantity: 24,
-    source: '联通',
-    money: '100',
-    outMoney: '10',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  },
-  {
-    cardNumber: '13800138000',
-    customerName: '李四',
-    auditStatus: '1',
-    orderStatus: '1',
-    cardQuantity: 24,
-    source: '联通',
-    money: '100',
-    outMoney: '10',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  }, {
-    cardNumber: '13800138000',
-    customerName: '王五',
-    auditStatus: '1',
-    orderStatus: '1',
-    cardQuantity: 24,
-    source: '联通',
-    money: '100',
-    outMoney: '10',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  },
-  // 可以添加更多模拟数据...
-]);
-// 上传合同的弹框
-const uploadContract = ref(false);
-const pagination = reactive({
-  total: tableData.value.length,
-  current: 1,
-  pageSize: 10,
-});
-const openContract = (item) => {
-  console.log(item, '???')
-  uploadContract.value = true;
-  formContract.customerName = item.customerName;
-  formContract.orderNumber = item.cardNumber;
-};
-//订单详情的弹框
-const showDetail = ref(false);
-// 查看订单详情
-const openDetail = (item) => {
-  showDetail.value = true;
-}
-const handleBeforeOk = (done) => {
-  console.log(formContract)
-  window.setTimeout(() => {
-    done()
-    // prevent close
-    // done(false)
-  }, 3000)
-};
-const handleCancel = () => {
-  uploadContract.value = false;
-}
-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;
-    }
-  });
-  Message.success('搜索条件已重置');
-};
-// 文件上传的列表
-const formContract = reactive({
-  orderNumber: '',
-  customerName: '',
-  fileList: []
-})
-// 订单状态
-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)
-}
-// 分配卡号的值
-const cardNumber = ref('');
-const showCard = ref(false);
-
-const submitCard = () => {
-}
-</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;
-}
-</style>

src/views/order/BuyCard/index.vue

@@ -2,24 +2,11 @@
 <template>
   <div class="silent-expire-alarm">
     <!-- 搜索条件区 -->
-    <!-- <div class="search-section">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="cardNumber" 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>
-          <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="search-section">
+      <Search />
+    </div>
     <div class="audit-btn" v-if="userType == 2">
-      <a-button @click="openAudit" type="text">
+      <a-button @click="showAudit = true" type="text">
         <template #icon>
           <icon-plus-circle />
         </template>
@@ -28,498 +15,214 @@
     </div>
     <!-- 数据表格 -->
     <a-table :data="tableData" :pagination="pageData" :columns="columns" @page-change="evChangePage"
-             :scroll="{ x: 'auto' }">
-      <!-- <template #status="{ record }">
-        {{ record.status }}
+      :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="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 #LogisticsStatus="{ record }">
+        <a-tag color="#168cff" v-if="record.tmsStatus == 1">未发货</a-tag>
+        <a-tag color="#00b42a" v-if="record.tmsStatus == 2">已发货</a-tag>
       </template>
-      <template #moderation_status="{ record }">
-        {{ record.moderation_status }}
-      </template> -->
       <template #operate="{ record }">
         <div v-if="userType == 1">
-          <a-popconfirm content="审核" ok-text="通过" cancel-text="驳回" type="warning" @ok="platformCancel(record, 2)" @cancel="platformCancel(record, 3)">
-            <a-button type="text">审核</a-button>
-          </a-popconfirm>
-          <a-button @click="uploadModal(record)" type="text">上传合同</a-button>
+          <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1"
+            @click="statusOrder(record)">审核</a-button>
+          <a-button @click="uploadModal(record)" type="text">{{ record.contractImg == '' ? '上传合同' : '查看合同' }}</a-button>
         </div>
         <div v-if="userType == 2">
-          <a-popconfirm :content="`是否确认退订?`" type="warning" @ok="adminCancel(record)">
-            <a-button type="text">退订</a-button>
-          </a-popconfirm>
-          <a-button @click="openDetail(record, 2)" type="text">查看</a-button>
+          <a-button type="text" @click="adminCancel(record)"
+            v-if="record.moderationStatus == 2 && userType !== 1">退订</a-button>
+          <a-button @click="openDetail(record)" type="text">查看</a-button>
         </div>
-
       </template>
     </a-table>
-    <a-modal v-model:visible="uploadContract" title="上传合同" @cancel="handleCancel" @before-ok="handleBeforeOk"
-      okText="保存" cancelText="关闭">
+
+
+    <a-modal v-model:visible="uploadContract" width="600px" title="上传合同"
+      @cancel="closeModal(uploadContract, formContract)" @ok="handleBeforeOk" okText="保存" cancelText="关闭">
       <a-form :model="formContract" auto-label-width>
         <a-form-item field="customerName" label="客户名称">
-          <!-- <a-input v-model="formContract.customerName" disabled placeholder="请输入客户" /> -->
-          <div class="audit-txt" style="color:#418035;">{{ formContract.customerName }}</div>
+          <div class="audit-txt" style="color:#418035;">{{ FormDataList.userName }}</div>
         </a-form-item>
         <a-form-item field="orderNumber" label="订单编号">
-          <!-- <a-input v-model="formContract.orderNumber" disabled placeholder="请输入单号" /> -->
-          <div class="audit-txt">{{ formContract.orderNumber }}</div>
-        </a-form-item>
-        <a-form-item field="fileList" label="销售合同">
-          <Upload v-model:modelValue="formContract.fileList"/>
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- 创建 -->
-    <a-modal v-model:visible="showAudit" title="购卡" width="600px" @cancel="cancelPurchase" centered
-      :maskClosable="false" okText="确定" cancelText="关闭" :footer="null">
-      <a-form ref="formRef" :rules="rules" :model="formState" @submit="submitPurchase">
-        <a-form-item field="customerName" label="客户名称">
-          <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
-          <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="请选择运营商">
-            <a-option v-for="item of sourceList" :value="item.id" :label="item.label" />
-          </a-select>
-        </a-form-item>
-        <a-form-item label="资费名称" field="tariffId">
-          <a-select v-model="formState.tariffId" :style="{ width: '380px' }" @change="tariffChange"
-            placeholder="请选择资费ID">
-            <a-option v-for="item of tariffData" :value="item.value" :label="item.label" />
-          </a-select>
-        </a-form-item>
-        <!-- <a-form-item label="资费详情" v-if="formState.tariffId">
-          <div class="audit-txt">
-            <div class="audit-tag">套餐类型<span>流量</span></div>
-            <div class="audit-tag">资费编码<span>流量</span></div>
-            <div class="audit-tag">资费编码<span>流量</span></div>
-            <div class="audit-tag">资费编码<span>流量</span></div>
-          </div>
-        </a-form-item>
-        <a-form-item label="资费计费详情" v-if="formState.tariffId">
-          <div class="audit-txt">
-            <div class="audit-tag">套餐类型<span>流量</span></div>
-            <div class="audit-tag">资费编码<span>流量</span></div>
-            <div class="audit-tag">资费编码<span>流量</span></div>
-            <div class="audit-tag">资费编码<span>流量</span></div>
-          </div>
-        </a-form-item> -->
-        <a-form-item label="卡类型" field="cardType">
-          <a-select v-model="formState.cardType" :style="{ width: '380px' }" placeholder="请选择卡类型">
-            <a-option v-for="item of orderType" :value="item.value" :label="item.label" />
-          </a-select>
-        </a-form-item>
-
-
-        <a-form-item label="沉默期">
-          <a-select v-model="formState.silencePeriod" :style="{ width: '380px' }" placeholder="请选择沉默期">
-            <a-option v-for="item of silenceOptions" :value="item.value" :label="item.label" />
-          </a-select>
+          <div class="audit-txt">{{ FormDataList.id }}</div>
         </a-form-item>
-        <a-form-item label="流量池" field="flowPool">
-          <a-radio-group v-model="formState.flowPool" :options="flowPoolData">
-            <template #label="{ data }">
-              <a-tag>{{ data.label }}</a-tag>
-            </template>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item label="购卡数量" field="num">
-          <a-input v-model="formState.num" placeholder="请输入购卡数量" />
-        </a-form-item>
-        <a-form-item>
-          <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
-          <a-button @click="cancelPurchase">取消</a-button>
+        <a-form-item field="contractImg" label="销售合同">
+          <Upload v-model:model-value="formContract.contractImg" />
         </a-form-item>
       </a-form>
     </a-modal>
 
-    <!-- 详情 -->
-    <a-modal v-model:visible="showDetail" width="800px" :title="currentIndex == 1 ? '退卡详情' : '查看'"
-      @cancel="showDetail = false" :footer="null">
-      <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">2024-10-24 17:46:33</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">1.0G/月</div>
-          </div>
-        </div>
-        <div class="detail-item-box">
-          <div class="detail-item">
-            <div class="item-label">最短订阅周期</div>
-            <div class="item-content">3个月</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">按单流量消耗计费</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">工业级PlugIn</div>
-          </div>
-          <div class="detail-item">
-            <div class="item-label">卡板费</div>
-            <div class="item-content">1美金</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">6个月</div>
-          </div>
-        </div>
-        <div class="detail-item-box">
-          <div class="detail-item">
-            <div class="item-label">卡数量</div>
-            <div class="item-content">10000;已分配0，已退回0，已转移0
-              <!-- <a-button type="primary" @click="showCard = true" style="margin-left:10px;">分配卡号</a-button> -->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="detail-table">
-        <a-table :columns="columnsDetail" :data="dataDetail" />
-      </div>
-      <div style="text-align: right;margin-top: 20px;">
-        <a-button type="primary" html-type="submit" style="margin-right: 10px;" @click="operateHandle">确定</a-button>
-      </div>
-    </a-modal>
-    <!-- <a-modal v-model:visible="showCard" width="800px" title="分配卡号" @cancel="showCard = false" @before-ok="submitCard"
-      okText="确认" cancelText="取消">
-      <a-textarea :auto-size="{
-        minRows: 15,
-        maxRows: 15
-      }" v-model="cardNumber" max-length="1000" :show-word-limit="true" placeholder="请输入iccid,一行一个或者逗号分隔；不支持两种混合号码。"
-        allow-clear />
-    </a-modal> -->
+    <Card v-model:modelValue="showAudit" @submit="intData()" />
+    <Status v-model:modelValue="showStatus" @submit="intData()" :FormDataList="FormDataList" />
+    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
+    <returnCard v-model:modelValue="showReturn" :ReturnData="ReturnData" :id="id" @submit="intData()"></returnCard>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, onMounted, toRefs } from 'vue';
 import { Message } from '@arco-design/web-vue';
-import { tariffList } from "@/api/path/tariffManagement.api";
-import { purchaseOrderList, addPurchaseOrder, platformUpdate, adminUpdate } from '@/api/path/purchase';
+import { purchaseOrderList, platformUpdate, adminUpdate } from '@/api/path/purchase';
+import { UploadOrderCardContract,TariffOrderCard } from '@/api/path/order'
 import { Getdictionary } from '@/mixins/index.js'
 import Upload from "@/components/upload/index.vue";
-const selectedKeys = ref([]);
-const rowSelection = reactive({
-  type: 'checkbox',
-  showCheckedAll: true,
-  onlyCurrent: false,
-});
-const searchForm = reactive({
-  cardNumber: '',
-  customerName: '',
+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'
+// 数据层
+const state = ref({
+  userName: localStorage.getItem('remember_user_name'),
+  userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
+  tableData: [],
+  currentIndex: null,
+  FormDataList: {},
+  pageData: {
+    total: 0,
+    size: 10,
+    current: 1,
+  },
+  showAudit: false,
+  showStatus: false,
+  formContract: {
+    id: null,
+    contractImg: []
+  }, // 文件上传列表
+  showDetail: false,
+  uploadContract: false,
+  showReturn: false,
+  ReturnData:[],
+  id:null
 });
 
+const {
+  userType,
+  tableData,
+  FormDataList,
+  pageData,
+  showAudit,
+  showStatus,
+  formContract,
+  showDetail,
+  uploadContract,
+  showReturn,
+  ReturnData,
+  id
+} = toRefs(state.value);
+
 const columns = [
-  { title: '序号', dataIndex: 'index', align: 'center',ellipsis:true },
-  { title: '订单编号', dataIndex: 'id', align: 'center', ellipsis:true },
-  { title: '审核状态', dataIndex: 'orderTypeName', align: 'center' ,ellipsis:true},
-  { title: '订单状态', dataIndex: 'statusName', align: 'center' ,ellipsis:true},
-  { title: '客户名称', dataIndex: 'userName', align: 'center',ellipsis:true },
-  { title: '采购数量', dataIndex: 'quantity', align: 'center' ,ellipsis:true},
-  { title: '运营商名称', dataIndex: 'quantity', align: 'center',ellipsis:true },
-  { title: '资费', dataIndex: 'quantity', align: 'center',ellipsis:true },
-  { title: '支付金额', dataIndex: 'paymentAmount', align: 'center',ellipsis:true },
-  { title: '下单时间', dataIndex: 'createdAt', align: 'center',ellipsis:true },
-  { title: '操作', slotName: 'operate', align: 'center',ellipsis:true}
+  { title: '序号', dataIndex: 'index', align: 'center', ellipsis: true },
+  { title: '订单编号', slotName: 'id', align: 'center', ellipsis: true },
+  { title: '审核状态', slotName: 'statusType', align: 'center', ellipsis: true },
+  { title: '物流状态', slotName: 'LogisticsStatus', align: 'center', ellipsis: true },
+  { title: '客户名称', dataIndex: 'userName', align: 'center', ellipsis: true },
+  { title: '采购数量', dataIndex: 'quantity', align: 'center', ellipsis: true },
+  { title: '静默期(月)', dataIndex: 'periodOfSilence', align: 'center', ellipsis: true },
+  { title: '卡类型', dataIndex: 'CardType', align: 'center', ellipsis: true },
+  { title: '运营商名称', dataIndex: 'sourceName', align: 'center', ellipsis: true },
+  { title: '资费', dataIndex: 'trafficName', align: 'center', ellipsis: true },
+  { title: '支付金额', dataIndex: 'quantity', align: 'center', ellipsis: true },
+  { title: '合同照片', slotName: 'image', align: 'center', ellipsis: true },
+  { title: '下单时间', dataIndex: 'createdAt', align: 'center', ellipsis: true },
+  { title: '操作', slotName: 'operate', 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 userName = ref(localStorage.getItem('remember_user_name'))
-const userType = ref(JSON.parse(localStorage.getItem('user_login_information'))?.userType);// 1平台 2用户
-const tableData = ref([]);
-const formRef = ref(null);
-const currentIndex = ref(null);
-const rules = {
-  source: [{ required: true, trigger: 'change', }],
-  tariffId: [
-    {
-      required: true,
-      trigger: 'change',
-    },
-  ],
-  cardType: [
-    {
-      required: true,
-      trigger: 'change',
-    },
-  ],
-  flowPool: [
-    {
-      required: true,
-      trigger: 'change',
-    },
-  ],
-  num: [
-    {
-      required: true,
-      trigger: 'change',
-    },
-  ],
-};
-const pageData = ref({
-  total: 0,
-  size: 10,
-  current: 1,
-})
-const formState = ref({
-  source: null,
-  tariffId: null,
-  cardType: null,
-  silencePeriod: null,
-  flowPool: null,
-  num: null
-})
-const sourceList = ref([]) // 来源
-const tariffData = ref([]) // 自费
-const silenceOptions = ref([]); // 沉默期
-const orderType = ref([]); // 卡类型
-const flowPoolData = ref([]); // 组池
-const showAudit = ref(false);
 
-const handleDictValue = async () => {
-  sourceList.value = await Getdictionary('source')
-  orderType.value = await Getdictionary('cardType')
-  silenceOptions.value  = await Getdictionary('silenceOf')
-  flowPoolData.value = await Getdictionary('groupPool')
-  const param = {
-    current: 1,
-    size: 999,
-  }
-  tariffList(param).then(res => {
-    tariffData.value = res.data.records.map(item => ({
-      label: item.label,
-      value: item.id,
-      ...item
-    }));
-  })
-}
 // 订单列表
 const intData = async () => {
   const param = {
     current: pageData.value.current,
     size: pageData.value.size,
   }
-  let res1 = await Getdictionary('subscriptionRelationshipStatus')
-  let res2 = await Getdictionary('orderAuditStatus')
+  const res1 = await Getdictionary('cardType')
+  let res3 = await Getdictionary('source')
   purchaseOrderList(param).then(res => {
-    tableData.value = (res.data.records || []).map((item,key) => {
-      const statusName = res1.filter((item) => item.typeKey == 'subscriptionRelationshipStatus')?.find(val => item.status == val.value)?.label
-      const orderTypeName = res2.filter((item) => item.typeKey == 'orderAuditStatus')?.find(val => item.status == val.value)?.label
-
+    tableData.value = (res.data.records || []).map((item, key) => {
+      const sourceName = res3.filter((item) => item.typeKey == 'source')?.find(val => item.source == val.value)?.label
+      const CardType = res1.filter(val => val.typeKey == 'cardType')?.find(vals => vals.value == item.simType)?.label
       return {
         ...item,
         index: key + 1,
-        orderTypeName,
-        statusName,
+        sourceName,
+        CardType
       }
     });
     pageData.value.total = res.data.total;
   })
 
 }
-// 确认购卡
-const submitPurchase = ({ values, errors }) => {
-  formRef.value.validate(async (errors) => {
-    if (!errors) {
-      const data = {
-        source: String(formState.value.source),
-        tariffId: formState.value.tariffId,
-        quantity: Number(formState.value.num),
-        cardType: formState.value.cardType,
-        periodOfSilence: String(formState.value.silencePeriod),
-        isTrafficPool: formState.value.flowPool
-      }
-      addPurchaseOrder(data).then(res => {
-        intData();
-        showAudit.value = false;
-      })
-    }
-  })
-
-}
-// 取消
-const cancelPurchase = () => {
-  showAudit.value = false;
-  formRef.value.resetFields();
-  Object.assign(formState, {
-    source: null,
-    tariffId: null,
-    cardType: null,
-    silencePeriod: null,
-    flowPool: 0,
-    num: null
-  });
-}
-// 平台退订
-const platformCancel = (data, type) => {
-  const param = {
-    id: data.id,
-    status: type
-  }
-  platformUpdate(param).then(res => {
-    intData();
-  })
-}
 // 用户退订
 const adminCancel = (data) => {
-  const param = {
-    id: data.id,
-    status: data.status
-  }
-  adminUpdate(param).then(res => {
-    intData();
+  TariffOrderCard({id:data.trafficId}).then(res => {
+    ReturnData.value = res.data || []
   })
+  id.value = data.id
+  showReturn.value = true
 }
-
-//
-const tariffChange = (e) => {
-  formState.value.tariffId = e;
-  // tariffObj.value = res.data.records.map(item=>{
-
-  // })
-}
-
-//
-const operateHandle = () => {
-  if (currentIndex.value == 1) {
-
-  } else {
-    showDetail.value = false;
-  }
-}
-
 // 分页
 const evChangePage = (page) => {
   pageData.value.current = page
   intData()
 }
 
-onMounted(() => {
-  intData();
-})
+// 订单审核
+const statusOrder = (items) => {
+  FormDataList.value = items
+  showStatus.value = true
+}
 
-// 上传合同的弹框
-const uploadContract = ref(false);
+// 上传合同
 const uploadModal = (item) => {
   uploadContract.value = true;
-  formContract.customerName = item.customerName;
-  formContract.orderNumber = item.sourceOrderId;
+  FormDataList.value = item
+  formContract.value = {
+    id: item.id,
+    contractImg: item.contractImg
+  }
 };
-//订单详情的弹框
-const showDetail = ref(false);
 // 查看订单详情
-const openDetail = (item, current) => {
-  currentIndex.value = current;
-  uploadContract.value = true;
-}
-const handleBeforeOk = (done) => {
-  window.setTimeout(() => {
-    done()
-    // prevent close
-    // done(false)
-  }, 3000)
-};
-const handleCancel = () => {
-  uploadContract.value = false;
+const openDetail = async (item) => {
+  FormDataList.value = item
+  showDetail.value = true;
 }
-const handleSearch = () => {
-  console.log('Search form data:', searchForm);
-  Message.success('执行搜索操作');
+// 上传合同
+const handleBeforeOk = () => {
+  new Promise((resolve, reject) => {
+    formContract.value.id = FormDataList.value.id;
+    UploadOrderCardContract(formContract.value).then(res => {
+      resolve(res)
+      Message.success(res.message)
+      intData();
+    }).catch(error => {
+      reject(error)
+    })
+  })
 };
-
-const resetSearch = () => {
-  Object.keys(searchForm).forEach(key => {
-    if (Array.isArray(searchForm[key])) {
-      searchForm[key] = [];
-    } else {
-      searchForm[key] = null;
+// 模态框取消
+const closeModal = (items, obj) => {
+  items = false
+  Object.keys(obj).forEach(key => {
+    if (obj.key) {
+      obj[key] = '';
     }
-  });
-  Message.success('搜索条件已重置');
-};
-// 文件上传的列表
-const formContract = reactive({
-  orderNumber: '',
-  customerName: '',
-  fileList: []
-})
-
-// 触发购卡弹框
-const openAudit = () => {
-  showAudit.value = true;
-  handleDictValue();
+  })
 }
 
-// 分配卡号的值
-const cardNumber = ref('');
-const showCard = ref(false);
-
-const submitCard = () => {
-}
+onMounted(() => {
+  intData();
+})
 </script>
 
 <style scoped lang="less">
@@ -556,39 +259,19 @@ const submitCard = () => {
   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>

src/views/order/BuyCard/returnCard.vue

@@ -0,0 +1,50 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" title="退卡" @cancel="cancel" @ok="submitStatus" okText="确认"
+        cancelText="取消">
+        <a-table row-key="iccid" :columns="columns" :data="data" :row-selection="rowSelection"
+             v-model:selectedKeys="selectedKeys" :pagination="pagination" />
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, defineProps, toRef, defineEmits,watch} from 'vue';
+import { Message } from '@arco-design/web-vue';
+import {ReturntheCard} from '@/api/path/order'
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    ReturnData:Array,
+    id:String,
+})
+const modelValue = toRef(props, 'modelValue')
+const emit = defineEmits(['update:modelValue', 'submit'])
+const selectedKeys = ref([])
+const columns = [{ title: 'ICCID', dataIndex: 'iccid' },{ title: '卡状态', dataIndex: 'status' },{ title: '创建时间', 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('请选择ICCID')
+        return
+    }
+    await ReturntheCard({iccids:selectedKeys.value,id:props.id})
+    emit('update:modelValue', false)
+    emit('submit',true)
+    data.value = []
+}
+watch(()=>props.ReturnData,val=>{
+  data.value = val
+},{deep: true})
+</script>
+<style scoped>
+</style>

src/views/order/BuyCard/status.vue

@@ -0,0 +1,81 @@
+<template>
+    <a-modal v-model:visible="modelValue" width="800px" title="审核" @cancel="cancel" @ok="submitStatus"
+        okText="确认" cancelText="取消">
+        <a-form :model="formStatus" :style="{ width: '600px' }">
+            <a-form-item label="客户名称">
+                {{ FormDataList.userName }}
+            </a-form-item>
+            <a-form-item label="订单编号">
+                {{ FormDataList.id }}
+            </a-form-item>
+            <a-form-item label="资费名称">
+                {{ FormDataList.trafficName }}
+            </a-form-item>
+            <a-form-item label="审核意见">
+                <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="备注">
+                <a-textarea placeholder="请输入备注" 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';
+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: '审核通过', value: '2' },
+        { label: '驳回', 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/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/order/CancelOrder/index.vue

@@ -1,384 +1,194 @@
-<!-- 注销订单 -->
+<!-- 退卡订单 -->
 <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 :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, 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 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: '订单编号', dataIndex: 'orderNumber', ellipsis: true,
-        tooltip: true,
-        width: 100
-    },
-    { title: '客户名称', dataIndex: 'customerName' },
-    { title: '订单状态', dataIndex: 'auditStatus' },
-    { title: '注销张数', dataIndex: 'moneyNew' },
-    { title: '资费', dataIndex: 'moneyOld' },
-    { title: '卡号', dataIndex: 'cardNumber' },
-    { title: '下单时间', dataIndex: 'orderTime' },
+  { 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 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;
+  showDetail.value = true;
+  FormDataList.value = item;
 }
-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;
-        }
-    });
-    Message.success('搜索条件已重置');
-};
-// 订单状态
-const options = [
-    { label: '发货', value: '1' },
-    { label: '退回', value: '2' },
-];
-// 审核
-const showAudit = ref(false);
-const formAudit = reactive({
-    customerName: '',
-    cardType: '',
-    money: '',
-    orderStatus: '',
-    auditOpinion: '',
-    fileList: []
+// 列表-------------------------------------
+// 订单列表
+// 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();
 })
-// 触发审核的弹框
-const openAudit = () => {
-    showAudit.value = true;
-}
-// 确认审核
-const submitAudit = () => {
-    console.log(formAudit, 'lll')
-    window.setTimeout(() => {
-        showAudit.value = false;
-    }, 1000)
-}
-const detailCancel = () => {
-}
 </script>
 
 <style scoped lang="less">
 .silent-expire-alarm {
-    padding: 20px !important;
-    // background: #fcf;
+  padding: 20px !important;
+  // background: #fcf;
 }
 
 .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;
+
+  .audit-tag {
+    margin-left: 20px;
+    background: #63c2c6;
+    color: #fff;
+    font-size: 12px;
     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;
-    }
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: 50px;
+  }
 }
 
 .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-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;
+    .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-label {
+        color: rgba(0, 0, 0, 0.4);
+        width: 120px;
+        text-align: right;
+        margin-right: 10px;
+      }
 
-            .item-content {
-                color: rgba(51, 51, 51, 1);
-            }
-        }
+      .item-content {
+        color: rgba(51, 51, 51, 1);
+      }
     }
+  }
 }
 
 .detail-table {
-    margin-top: 20px;
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
 }
 </style>

src/views/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/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/order/RenewalOrder/index.vue

@@ -1,379 +1,199 @@
-<!-- 续费订单 -->
+<!-- 退卡订单 -->
 <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">按单流量消耗计费</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 :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, 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({
+import { ref, onMounted, toRefs } from 'vue';
+import Status from './status.vue'
+import Search from '@/components/Search/index.vue'
+const state = ref({
+  searchForm: {
     cardNumber: '',
     customerName: '',
-    orderNumber: ''
-});
+  },
+  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: 'orderNumber', ellipsis: true,
-        tooltip: true,
-        width: 100
-    },
-    { title: '客户名称', dataIndex: 'customerName' },
-    { title: '审核状态', dataIndex: 'auditStatus' },
-    {
-        title: '供应商名称', dataIndex: 'originName', ellipsis: true,
-        tooltip: true,
-        width: 150
-    },
-    { title: '资费', dataIndex: 'money' },
-    { title: '卡号', dataIndex: 'cardNumber' },
-    { title: '订单金额(元)', dataIndex: 'orderMoney' },
-    { title: '下单时间', dataIndex: 'orderTime' },
-    { title: '详情', slotName: 'detail', align: 'center' },
+  { 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: '订单金额', dataIndex: 'payment_amount', ellipsis: true },
+  { title: '操作', slotName: 'operate', 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: '移动-广州分公司',
-        money: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        orderNumber: '13800138000',
-        customerName: '李四',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        money: '100',
-        moneyOld: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        orderNumber: '13800138000',
-        customerName: '王五',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        money: '100',
-        moneyOld: '100',
-        cardNumber: '1124224q',
-        orderMoney: '11美元',
-        finallyMoney: '1美元',
-        returnMoney: '10美元',
-        orderTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        orderNumber: '13800138000',
-        customerName: '赵六',
-        orderStatus: '1',
-        auditStatus: '待审核',
-        originName: '移动-广州分公司',
-        money: '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;
+  showDetail.value = true;
+  FormDataList.value = item;
 }
-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;
-        }
-    });
-    Message.success('搜索条件已重置');
-};
-// 订单状态
-const options = [
-    { label: '发货', value: '1' },
-    { label: '退回', value: '2' },
-];
-// 审核
-const showAudit = ref(false);
-const formAudit = reactive({
-    customerName: '',
-    cardType: '',
-    money: '',
-    orderStatus: '',
-    auditOpinion: '',
-    fileList: []
+// 列表-------------------------------------
+// 订单列表
+// 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();
 })
-// 触发审核的弹框
-const openAudit = () => {
-    showAudit.value = true;
-}
-// 确认审核
-const submitAudit = () => {
-    console.log(formAudit, 'lll')
-    window.setTimeout(() => {
-        showAudit.value = false;
-    }, 1000)
-}
-const detailCancel = () => {
-}
 </script>
 
 <style scoped lang="less">
 .silent-expire-alarm {
-    padding: 20px !important;
-    // background: #fcf;
+  padding: 20px !important;
+  // background: #fcf;
 }
 
 .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;
+
+  .audit-tag {
+    margin-left: 20px;
+    background: #63c2c6;
+    color: #fff;
+    font-size: 12px;
     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;
-    }
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: 50px;
+  }
 }
 
 .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-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;
+    .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-label {
+        color: rgba(0, 0, 0, 0.4);
+        width: 120px;
+        text-align: right;
+        margin-right: 10px;
+      }
 
-            .item-content {
-                color: rgba(51, 51, 51, 1);
-            }
-        }
+      .item-content {
+        color: rgba(51, 51, 51, 1);
+      }
     }
+  }
 }
 
 .detail-table {
-    margin-top: 20px;
+  margin-top: 20px;
+}
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
 }
 </style>

src/views/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/order/ReturnCard/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' },{ title: '卡状态', dataIndex: 'status' },{ title: '创建时间', dataIndex: 'expireTime' }
+]
+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/order/ReturnCard/index.vue

@@ -3,285 +3,84 @@
   <div class="silent-expire-alarm">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="cardNumber" 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>
-          <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>
+      <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" v-if="record.moderationStatus==1 && record.status==2">审核</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">1.0G/月</div>
-          </div>
-        </div>
-        <div class="detail-item-box">
-          <div class="detail-item">
-            <div class="item-label">最短订阅周期</div>
-            <div class="item-content">3个月</div>
-          </div>
-          <div class="detail-item">
-            <div class="item-label">剩余时长</div>
-            <div class="item-content">2个月</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">工业级PlugIn</div>
-          </div>
-          <div class="detail-item">
-            <div class="item-label">卡板费</div>
-            <div class="item-content">1美金</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">6个月</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>
+
+
+    <Status v-model:modelValue="showAudit" @submit="intData()" />
+    <<Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
   </div>
 </template>
 
 <script setup>
-import {ref, reactive, onMounted} from 'vue';
-import {Message} from '@arco-design/web-vue';
-import {cancelOrderList} from '@/api/path/purchase';
-import {enum_dict} from "@/hooks/enum";
-import {Getdictionary} from "@/mixins/index.js";
+import { ref, reactive, onMounted, toRefs } from 'vue';
+import { Message } from '@arco-design/web-vue';
+import { cancelOrderList } from '@/api/path/purchase';
+import { enum_dict } from "@/hooks/enum";
+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 selectedKeys = ref([]);
-const rowSelection = reactive({
-  type: 'checkbox',
-  showCheckedAll: true,
-  onlyCurrent: false,
-});
-const searchForm = reactive({
-  cardNumber: '',
-  customerName: '',
-});
+const { searchForm, tableData, pagination, showDetail, showAudit, FormDataList } = toRefs(state.value)
 
 const columns = [
-  {title: '序号', dataIndex: 'index', align: 'center', render: ({rowIndex}) => rowIndex + 1},
+  { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
   {
-    title: '订单ID', dataIndex: 'source_order_id', ellipsis: true,
+    title: '订单编号', slotName: 'id', ellipsis: true,
     tooltip: true,
-    width: 200
   },
   {
-    title: '资费ID', dataIndex: 'tariff_id', ellipsis: true,
+    title: '客户名称', dataIndex: 'userName', ellipsis: true,
     tooltip: true,
-    width: 100
   },
-  {title: '订单审核状态', dataIndex: 'moderationStatusName'},
-  {title: '订阅关系状态', dataIndex: 'statusName'},
-  {title: '卡类型', dataIndex: 'cardTypeName'},
+  { title: '订单状态', slotName: 'orderStatus', ellipsis: true },
   {
     title: '供应商名称', dataIndex: 'sourceName', ellipsis: true,
     tooltip: true,
-    width: 150
   },
-  {title: '退卡张数', dataIndex: 'quantity'},
-  {title: '剩余时长', dataIndex: 'period_of_silence'},
-  {title: '返回金额', dataIndex: 'payment_amount'},
+  { title: '退卡张数', dataIndex: 'quantity', ellipsis: true },
+  { title: '剩余时长', dataIndex: 'period_of_silence', ellipsis: true },
+  { title: '退回金额', dataIndex: 'payment_amount', ellipsis: true },
+  { title: '操作', slotName: 'operate', 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([
-  {
-    cardNumber: '13800138000',
-    customerName: '张三',
-    orderStatus: '1',
-    cardQuantity: 24,
-    money: '100',
-    outTime: '11',
-    returnMoney: '11美元',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  },
-  {
-    cardNumber: '13800138000',
-    customerName: '李四',
-    orderStatus: '1',
-    cardQuantity: 24,
-    money: '100',
-    outTime: '11',
-    returnMoney: '11美元',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  }, {
-    cardNumber: '13800138000',
-    customerName: '王五',
-    orderStatus: '1',
-    cardQuantity: 24,
-    money: '100',
-    outTime: '11',
-    returnMoney: '11美元',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  }, {
-    cardNumber: '13800138000',
-    customerName: '赵六',
-    orderStatus: '1',
-    cardQuantity: 24,
-    money: '100',
-    outTime: '11',
-    returnMoney: '11美元',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  }, {
-    cardNumber: '13800138000',
-    customerName: '田七',
-    orderStatus: '1',
-    cardQuantity: 24,
-    money: '100',
-    outTime: '11',
-    returnMoney: '11美元',
-    orderTime: '2024-10-11'
-    // operate:'上传合同'
-  },
 
-]);
-const pagination = ref({
-  total: 0,
-  current: 1,
-  pageSize: 10,
-});
-//订单详情的弹框
-const showDetail = ref(false);
 // 查看订单详情
 const openDetail = (item) => {
   showDetail.value = true;
+  FormDataList.value = item;
 }
-const handleSearch = () => {
-  intData()
-};
 
 const resetSearch = () => {
   Object.keys(searchForm).forEach(key => {
@@ -294,35 +93,6 @@ const resetSearch = () => {
   });
   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)
-}
-const detailCancel = () => {
-}
-
 
 // 列表-------------------------------------
 // 订单列表
@@ -357,8 +127,6 @@ const intData = async () => {
 }
 onMounted(() => {
   intData();
-  // userName.value = localStorage.getItem('remember_user_name');
-  // userType.value = localStorage.getItem('role');
 })
 </script>
 
@@ -434,4 +202,14 @@ onMounted(() => {
 .detail-table {
   margin-top: 20px;
 }
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
 </style>

src/views/order/ReturnCard/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/system/dict/index.vue

@@ -11,28 +11,31 @@
       </div>
     </div>
 
-    <a-table :data="dataSource" row-key="typeKey" :columns="columns" :scroll="{ x: 'auto' }" :pagination="pageData"
-      @page-change="evChangePage" @expanded-change="expandTableIds">
+    <a-table :data="dataSource" row-key="typeKey" :columns="columns" :scroll="{ x: 'auto' }" :pagination="false">
       <template #operation="{ record }">
-        <a class="a-link" href="javascript:;" style="margin: 0 1rem;" @click="dictShowModel(2, record)">修改</a>
+        <a class="a-link" href="javascript:;" style="margin: 0 0.4rem;" @click="dictShowModel(2, record)"
+          v-if="!record.typeKey">修改</a>
+        <a class="a-link" href="javascript:;" style="margin: 0 0.4rem;" @click="dictShowModel(3, record)"
+          v-if="record.typeKey">添加</a>
+
         <a-popconfirm :content="`是否确认删除字典编号为 ${record.id} 的数据项?`" @ok="deleteChange(record.id)" type="warning">
-          <a class="a-link" href="javascript:;" style="color: red;">删除</a>
+          <a class="a-link" href="javascript:;" style="color: red;margin: 0 0.4rem;">删除</a>
         </a-popconfirm>
 
       </template>
     </a-table>
 
     <!-- 弹框 -->
-    <a-modal :title="typeCurrent == 1 ? '添加字典' : '修改字典'" v-model:visible="visible" @onCancel="resetForm" centered
+    <a-modal :title="typeCurrent !== 2 ? '添加字典' : '修改字典'" v-model:visible="visible" @onCancel="resetForm" centered
       :maskClosable="false" :footer="null">
       <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
-        <a-form-item label="字典名称" field="typeLabel">
+        <a-form-item label="标签名称" field="typeLabel" v-if="typeCurrent == 1">
           <a-input v-model="formState.typeLabel" />
         </a-form-item>
-        <a-form-item label="字典类型" field="typeKey">
+        <a-form-item label="标签类型" field="typeKey" v-if="typeCurrent == 1">
           <a-input v-model="formState.typeKey" />
         </a-form-item>
-        <a-form-item label="数据标签" field="label">
+        <a-form-item label="字典名称" field="label">
           <a-input v-model="formState.label" />
         </a-form-item>
         <a-form-item label="数据键值" field="value">
@@ -51,7 +54,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, h } from "vue";
 import { dictionaryList, dictionaryAdd, dictionaryDelete, dictionaryUpdate, dictionaryDeleteAll } from '@/api/path/dict';
 
 const visible = ref(false);
@@ -63,18 +66,10 @@ const formData = ref({
   typeLabel: '',
 });
 const columns = ref([
-
-  // {title: '数据标签', dataIndex: 'label', align: 'center', width: 120},
-  { title: '字典名称', dataIndex: 'typeLabel', align: 'center', width: 120 },
-  { title: '字典类型', dataIndex: 'typeKey', align: 'center', width: 150 },
+  { title: '标签名称', dataIndex: 'typeLabel', align: 'center', width: 120 },
+  { title: '标签类型', dataIndex: 'typeKey', align: 'center', width: 150 },
+  { title: '字典名称', dataIndex: 'label', align: 'center', width: 120 },
   { title: '数据键值', dataIndex: 'value', align: 'center', width: 120 },
-  // {
-  //   title: '备注',
-  //   dataIndex: 'remark',
-  //   align: 'center',
-  //   width: 180
-  // },
-  // {title: '创建时间', dataIndex: 'created_at', align: 'center', width: 200},
   {
     title: '操作',
     dataIndex: 'id',
@@ -113,11 +108,11 @@ const rules = {
 };
 
 const formState = reactive({
-  // label: '',
+  label: '',
   value: '',
   typeKey: '',
   typeLabel: '',
-  // remark: '',
+  remark: '',
 });
 
 const pageData = ref({
@@ -135,12 +130,9 @@ const intData = async () => {
     ...formData.value
   }
   const res = await dictionaryList(param)
-  dataSource.value = res.data.map(res => ({
-    ...res,
-    children: []
-  }))
+  dataSource.value = res.data
   pageData.value.total = res.total;
-  
+
 }
 // 提交
 const handleSubmit = async ({ values, errors }) => {
@@ -150,9 +142,9 @@ const handleSubmit = async ({ values, errors }) => {
     typeKey: formState.typeKey,
     typeLabel: formState.typeLabel,
     remark: formState.remark,
-    id: typeCurrent.value == 1 ? undefined : dicId.value
+    id: typeCurrent.value !== 2 ? undefined : dicId.value
   }
-  let res = typeCurrent.value === 1 ? await dictionaryAdd(submitData) : await dictionaryUpdate(submitData)
+  let res = typeCurrent.value !== 2 ? await dictionaryAdd(submitData) : await dictionaryUpdate(submitData)
   if (res.code === 200) {
     intData();
     resetForm();
@@ -169,14 +161,31 @@ const dictShowModel = (type, data) => {
   typeCurrent.value = type;
   visible.value = true;
   if (type == 2) {
-    dicId.value = data.id;
-    formState.label = data.label;
-    formState.value = data.value;
-    formState.typeKey = data.typeKey;
-    formState.typeLabel = data.typeLabel;
-    formState.remark = data.remark;
+    dataSource.value.forEach(res => {
+      res.children.forEach(val => {
+        if (val.id == data.id) {
+          dicId.value = data.id
+          formState.typeKey = res.typeKey
+          formState.typeLabel = res.typeLabel
+          formState.remark = res.remark
+          formState.value = data.value
+          formState.label = data.label
+        }
+      })
+    })
+  } else if (type == 3) {
+    dataSource.value.forEach(res => {
+      res.children.forEach(val => {
+        if (val.id == data.id) {
+          formState.typeKey = res.typeKey
+          formState.typeLabel = res.typeLabel
+        }
+      })
+    })
   }
+
 }
+
 // 取消
 const resetForm = () => {
   visible.value = false;
@@ -191,11 +200,6 @@ const resetForm = () => {
   });
 }
 
-const evChangePage = (page) => {
-  pageData.value.current = page
-  intData()
-}
-
 // 重置
 const resetSelectData = () => {
   formData.value.typeKey = "";
@@ -203,21 +207,6 @@ const resetSelectData = () => {
   intData();
 }
 
-const expandTableIds = async (e) => {
-  if (e.length === 0) return
-  let res = await dictionaryDeleteAll({ typeKey: e[0] });
-  if (res.code === 200) {
-    dataSource.value.forEach((item) => {
-      // 检查 item.typeKey 是否包含 e 中的任意一个值
-      if (e.some((key) => item.typeKey.includes(key))) {
-        // 判断 children 是否为空，为空则添加数据
-        if (item.children.length === 0) {
-          item.children = [...res.data];
-        }
-      }
-    });
-  }
-};
 
 
 onMounted(() => {

src/views/tariffManagement/config.js

@@ -13,6 +13,8 @@ export let columns = [
     { title: window.$t('tariffManagement.settlementCycleLabel'), dataIndex: 'settlementCycle', align: 'center', width: 200,ellipsis:true },
     { title: window.$t('tariffManagement.ActivatedNames'), dataIndex: 'Activated', 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('global.common.operations'),
         dataIndex: 'id',
@@ -33,6 +35,9 @@ export const columnsCustomer = [
     // { title: window.$t('tariffManagement.billingType'), dataIndex: 'billingTypeName', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.billingCycle'), dataIndex: 'billingCycleName', align: 'center', width: 200,ellipsis:true },
     // { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bagSize', align: 'center', width: 200 },
+    { title: '结算周期', dataIndex: 'bagSize', align: 'center', width: 200 },
+    { title: '流量资费价格', dataIndex: 'bagSize', align: 'center', width: 200 },
+    { title: '充值定价', dataIndex: 'bagSize', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.pricing'), dataIndex: 'pricingName', align: 'center', width: 200 ,ellipsis:true},
     // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.settlementCycleLabel'), dataIndex: 'settlementCycle', align: 'center', width: 200,ellipsis:true },

src/views/tariffManagement/index.vue

@@ -4,8 +4,8 @@
     <div class="head-title">
       <span>{{ route.meta.title }} </span>
       <span class="head-title-right">
-                <!-- <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button> -->
-            </span>
+        <!-- <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button> -->
+      </span>
     </div>
     <!-- 搜索条件区 -->
     <div class="search-section">
@@ -13,24 +13,24 @@
       <a-form :model="searchForm" layout="inline">
         <!--        资费名称-->
         <a-form-item field="label" :label="$t('tariffManagement.label')">
-          <a-input v-model="searchForm.label"
-                   :placeholder="$t('lotCard.please') + $t('tariffManagement.label')" allow-clear/>
+          <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('tariffManagement.label')"
+            allow-clear />
         </a-form-item>
         <!--        供应商-->
         <a-form-item field="label" :label="$t('tariffManagement.soundName')">
-          <a-select v-model="value" :style="{width:'320px'}" :placeholder="$t('lotCard.soundName')">
+          <a-select v-model="value" :style="{ width: '320px' }" :placeholder="$t('lotCard.soundName')">
             <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 field="label" :label="$t('tariffManagement.FlowType')">
-          <a-select v-model="value" :style="{width:'320px'}" :placeholder="$t('lotCard.FlowTypeName')">
+          <a-select v-model="value" :style="{ width: '320px' }" :placeholder="$t('lotCard.FlowTypeName')">
             <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{
-                item.label
-              }}
+              item.label
+            }}
             </a-option>
           </a-select>
         </a-form-item>
@@ -42,28 +42,27 @@
         </a-form-item>
       </a-form>
     </div>
-
     <div class="audit-btn">
       <a-button type="text" @click="dictShowModel(1, null)" v-if="role.getRole == 1">
         <template #icon>
-          <icon-plus-circle/>
+          <icon-plus-circle />
         </template>
         <template #default>{{ $t('form.Add') }}</template>
       </a-button>
     </div>
     <a-table row-key="id" :data="dataSource" :columns="role.getRole == 1 ? columns : columnsCustomer"
-             :pagination="pagination" :scroll="{ x: 'auto' }" @page-change="evChangePage">
+      :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)">{{
-            $t('form.Edit')
-          }}</a>
+          $t('form.Edit')
+        }}</a>
         <!-- 删除 -->
-        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
-                      :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)">
+        <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">{{
-              $t('form.Delete')
-            }}</a>
+            $t('form.Delete')
+          }}</a>
         </a-popconfirm>
       </template>
 
@@ -72,75 +71,73 @@
 
     <!--资费 弹框 -->
     <a-modal :title="typeCurrent == 1 ? $t('form.Add') : $t('form.Edit')" v-model:visible="visible"
-             @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="700px">
+      @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="700px">
       <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
         <div class="formTitle">基本信息</div>
         <a-form-item :label="$t('tariffManagement.source')" field="source">
           <a-select v-model="formState.source">
             <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{
-                item.label
-              }}
+              item.label
+            }}
             </a-option>
           </a-select>
         </a-form-item>
         <template v-if="formState.source">
           <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="simDataPlanId">
             <a-select v-model="formState.simDataPlanId">
-              <a-option v-for=" (item,index) in planList" :key="item.superior_id" :value="item.id"> 流量包{{
-                  item.productName
-                }}
+              <a-option v-for=" (item, index) in planList" :key="item.id" :value="item.id"> 流量包{{
+                item.productName
+              }}
               </a-option>
             </a-select>
           </a-form-item>
         </template>
         <a-form-item :label="$t('tariffManagement.label')" field="label">
-          <a-input v-model="formState.label"/>
+          <a-input v-model="formState.label" />
         </a-form-item>
         <a-form-item :label="$t('tariffManagement.userId')" field="userId">
           <a-select v-model="formState.userId">
             <a-option v-for=" item in userIdList" :key="item.id" :value="item.id">{{
-                item.name
-              }}
+              item.name
+            }}
             </a-option>
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('tariffManagement.billingMethod')" field="billingMethod">
           <a-select v-model="formState.billingMethod">
             <a-option v-for=" item in methodList" :key="item.id" :value="item.value">{{
-                item.label
-              }}
+              item.label
+            }}
             </a-option>
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('tariffManagement.currency')" field="currency">
           <a-select v-model="formState.currency">
             <a-option v-for=" item in currency" :key="item.id" :value="item.value">{{
-                item.label
-              }}
+              item.label
+            }}
             </a-option>
           </a-select>
         </a-form-item>
         <div class="formTitle">计费信息</div>
         <a-form-item field="billingCycle" :label="$t('tariffManagement.billingCycle')" required>
-          <a-radio-group v-model="formState.billingCycle">
-            <a-radio value="1">按天</a-radio>
-            <a-radio value="2">按月</a-radio>
+          <a-radio-group v-model="formState.billingCycle" :options="billingCycleData">
           </a-radio-group>
         </a-form-item>
         <a-form-item field="" :label="$t('tariffManagement.pricing')" required>
-          <a-input v-model="formState.pricing" v-if="formState.billingMethod==2">
+          <a-input v-model="formState.pricing" v-if="formState.billingMethod == 2">
             <template #append>
               {{ formState.currency === '0' ? '元' : '美金' }}
             </template>
           </a-input>
-          <a-input v-model="formState.trafficBilling" v-if="formState.billingMethod==1"></a-input>
+          <a-input v-model="formState.trafficBilling" v-if="formState.billingMethod == 1"></a-input>
           <a-select v-model="formState.trafficBillingType" style="width: 80px; margin:0 8px;"
-                    v-if="formState.billingMethod==1">
+            v-if="formState.billingMethod == 1">
             <a-option value="KB">KB</a-option>
             <a-option value="MB">MB</a-option>
             <a-option value="GB">GB</a-option>
           </a-select>
-          <a-input v-model="formState.trafficBillingAmount" v-if="formState.billingMethod==1">
+          <a-input v-model="formState.trafficBillingAmount" v-if="formState.billingMethod == 1">
             <template #append>
               {{ formState.currency === '0' ? '元' : '美金' }}
             </template>
@@ -177,8 +174,8 @@
         </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>
@@ -191,8 +188,8 @@
       <div class="search-section">
         <a-form :model="formData" layout="inline">
           <a-form-item field="label" :label="$t('tariffManagement.label')">
-            <a-input v-model="formData.label"
-                     :placeholder="$t('lotCard.please') + $t('tariffManagement.label')" allow-clear/>
+            <a-input v-model="formData.label" :placeholder="$t('lotCard.please') + $t('tariffManagement.label')"
+              allow-clear />
           </a-form-item>
           <a-form-item>
             <a-space>
@@ -203,7 +200,7 @@
         </a-form>
       </div>
       <a-table row-key="id" :data="planList" :columns="planColumns" :scroll="{ x: 'auto' }"
-               :row-selection="rowSelectionPlan" v-model:selectedKeys="selectedKeysPlan">
+        :row-selection="rowSelectionPlan" v-model:selectedKeys="selectedKeysPlan">
 
       </a-table>
 
@@ -212,20 +209,20 @@
 </template>
 
 <script setup>
-import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch} from "vue";
-import {useRoute} from "vue-router";
-import {columns, columnsCustomer, planColumns} from "./config";
-import {Message} from '@arco-design/web-vue'
-import {deleteTariff, updateTariff, addTariff, tariffList} from "@/api/path/tariffManagement.api"
-import {getDataPlanList} from "@/api/path/lotCard.api"
-import {getSTSInfoList} from '@/api/path/system.api'
-import {Getdictionary} from '@/mixins/index.js'
-import {useSystemStore} from '@/store/modules/systemStore'
+import { onMounted, ref, reactive, getCurrentInstance, nextTick, watch } from "vue";
+import { useRoute } from "vue-router";
+import { columns, columnsCustomer, planColumns } from "./config";
+import { Message } from '@arco-design/web-vue'
+import { deleteTariff, updateTariff, addTariff, tariffList } from "@/api/path/tariffManagement.api"
+import { getDataPlanList } from "@/api/path/lotCard.api"
+import { getSTSInfoList } from '@/api/path/system.api'
+import { Getdictionary } from '@/mixins/index.js'
+import { useSystemStore } from '@/store/modules/systemStore'
 
 const role = useSystemStore()
 
 
-const {proxy} = getCurrentInstance()
+const { proxy } = getCurrentInstance()
 const formRef = ref()
 const searchForm = ref({
   "label": "",
@@ -233,7 +230,7 @@ const searchForm = ref({
 
 const currency = ref([])
 
-
+const billingCycleData = ref([])
 const dataSource = ref([]);
 const route = useRoute();
 const pagination = ref({
@@ -248,20 +245,19 @@ const intData = async () => {
     size: pagination.value.pageSize,
     ...searchForm.value,
   }
-  const {data} = await tariffList(param)
+  const { data } = await tariffList(param)
   dataSource.value = (data.records || []).map((item, index) => {
     const sourceName = sourceList.value.find(val => val.value == item.source)?.label
     const billingCycleName = cycleist.value.find(val => val.value == item.billingCycle)?.label
     const pricingCurrty = currency.value.find(val => val.value == item.currency)?.label || '人民币'
-    const Activated = item.trafficBilling+'/'+item.trafficBillingType
-
+    const Activated = item.trafficBilling + '/' + item.trafficBillingType
     return {
       ...item,
       sourceName,
       pricingName: item.pricing !== '' ? item.pricing + '/' + pricingCurrty : '',
       billingCycleName,
-      Activated:Activated,
-      status: "正常"
+      Activated: Activated,
+      status: "正常",
     }
   })
   pagination.value.total = data.total
@@ -270,7 +266,7 @@ const intData = async () => {
 
 // 删除
 const handleDel = async (id) => {
-  const {code} = await deleteTariff({id})
+  const { code } = await deleteTariff({ id })
   if (code == 200) {
     Message.success({
       content: "删除成功！",
@@ -345,23 +341,23 @@ const formState = ref({
 });
 
 const rules = {
-  label: [{required: true, trigger: 'change',}],
-  simDataPlanId: [{required: true, trigger: 'change',}],
-  userId: [{required: true, trigger: 'change',}],
-  source: [{required: true, trigger: 'change',}],
-  billingCycle: [{required: true, trigger: 'change',}],
-  billingMethod: [{required: true, trigger: 'change',}],
-  currency: [{required: true, trigger: 'change',}],
-  trafficBilling: [{required: true, trigger: 'change',}],
-  trafficBillingType: [{required: true, trigger: 'change',}],
-  trafficBillingAmount: [{required: true, trigger: 'change',}],
-  mrcAmount: [{required: true, trigger: 'change',}],
-  networkAccessFee: [{required: true, trigger: 'change',}],
+  label: [{ required: true, trigger: 'change', }],
+  simDataPlanId: [{ required: true, trigger: 'change', }],
+  userId: [{ required: true, trigger: 'change', }],
+  source: [{ required: true, trigger: 'change', }],
+  billingCycle: [{ required: true, trigger: 'change', }],
+  billingMethod: [{ required: true, trigger: 'change', }],
+  currency: [{ required: true, trigger: 'change', }],
+  trafficBilling: [{ required: true, trigger: 'change', }],
+  trafficBillingType: [{ required: true, trigger: 'change', }],
+  trafficBillingAmount: [{ required: true, trigger: 'change', }],
+  mrcAmount: [{ required: true, trigger: 'change', }],
+  networkAccessFee: [{ required: true, trigger: 'change', }],
 };
 
 
 // 提交
-const handleSubmit = ({values, errors}) => {
+const handleSubmit = ({ values, errors }) => {
   formRef.value.validate(async (errors) => {
     if (!errors) {
       const formVal = JSON.parse(JSON.stringify(values))
@@ -377,8 +373,8 @@ const handleSubmit = ({values, errors}) => {
         })
       }
 
-      if (formState.value.id!=='') {
-        const {code, data} = await updateTariff(formVal)
+      if (formState.value.id) {
+        const { code, data } = await updateTariff(formVal)
 
         if (code == 200) {
           Message.success({
@@ -389,7 +385,7 @@ const handleSubmit = ({values, errors}) => {
           intData()
         }
       } else {
-        const {code, data} = await addTariff(formVal)
+        const { code, data } = await addTariff(formVal)
         if (code == 200) {
           Message.success({
             content: "添加成功！",
@@ -422,7 +418,6 @@ const dictShowModel = (type, data) => {
       }
     })
     formState.value.id = data.id
-    formState.value.simDataPlanId = Number(formState.value.simDataPlanId)
     formState.value.userId = Number(formState.value.userId)
     if (data.pricing !== '') {
       formState.value.pricing = data.pricing.match(/\d+/)[0] || ''
@@ -461,12 +456,12 @@ const handleDataPlan = async () => {
 const resetForm = () => {
   visible.value = false;
   Object.keys(formState.value).forEach(key => {
-      formState.value[key] = ''
+    formState.value[key] = ''
   })
   delete formState.value.id
   formState.value.settlementCycleMap = {
-    starTime:'',
-    endTime:''
+    starTime: '',
+    endTime: ''
   }
 }
 
@@ -501,22 +496,22 @@ const handleSubmitPlan = () => {
 }
 
 watch(
-    () => formState.value.source,
-    (newValue, oldValue) => {
+  () => formState.value.source,
+  (newValue, oldValue) => {
 
-      if (newValue != oldValue) {
-        handleDataPlan()
-      }
-    },
-    {immediate: true}
+    if (newValue != oldValue) {
+      handleDataPlan()
+    }
+  },
+  { immediate: true }
 );
 
-watch(()=>formState.value.billingMethod,val=>{
-   if(val==2){
-      formState.value.trafficBillingType = ''
-      formState.value.trafficBilling = ''
-      formState.value.trafficBillingAmount = ''
-   }
+watch(() => formState.value.billingMethod, val => {
+  if (val == 2) {
+    formState.value.trafficBillingType = ''
+    formState.value.trafficBilling = ''
+    formState.value.trafficBillingAmount = ''
+  }
 })
 
 // -------------------------------------------------------
@@ -527,6 +522,7 @@ const handleDictValue = async () => {
   typeList.value = await Getdictionary('Billingcycle')
   methodList.value = await Getdictionary('billingMethod')
   currency.value = await Getdictionary('currencyType')
+  billingCycleData.value = await Getdictionary('Billingcycle')
 }