1

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,6 +1,6 @@
 <template>
   <a-upload :show-file-list="true" :custom-request="handelUpload == null ? customRequest : handelUpload"
-    :list-type="listType" :file-list="fileList" :limit="minx" @before-remove="beforeRemove"
+    :list-type="listType" :file-list="fileList" :limit="minx" @before-remove="beforeRemove" :show-remove-button="showRemoveButton" :show-cancel-button="false"
     :image-preview="imagePreview" :accept="accept" />
 </template>
 
@@ -64,6 +64,10 @@ const props = defineProps({
   handelUpload: {
     type: Function,
     default: null  // 外部传入的自定义上传方法
+  },
+  showRemoveButton:{
+    type: Boolean,
+    default: true  // 是否显示删除按钮
   }
 });
 

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/views/order/BuyCard/detaile.vue

@@ -63,7 +63,7 @@
             <div class="detail-item-box">
                 <div class="detail-item">
                     <div class="item-label">卡数量</div>
-                    <div class="item-content">10000
+                    <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>
@@ -78,7 +78,7 @@
     <!-- 分配卡号 -->
     <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">
+        <Upload listType="" minx="9999" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
         </Upload>
     </a-modal>
 </template>

src/views/order/BuyCard/index.vue

@@ -2,22 +2,9 @@
 <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="showAudit=true" type="text">
         <template #icon>
@@ -94,6 +81,7 @@ import Upload from "@/components/upload/index.vue";
 import Card from './Card.vue'
 import Status from './status.vue'
 import Detaile from './detaile.vue'
+import Search from '@/components/Search/index.vue'
 // 数据层
 const state = ref({
   userName: localStorage.getItem('remember_user_name'),
@@ -168,16 +156,6 @@ const intData = async () => {
   })
 
 }
-// 平台退订
-const platformCancel = (data, type) => {
-  const param = {
-    id: data.id,
-    status: type
-  }
-  platformUpdate(param).then(res => {
-    intData();
-  })
-}
 // 用户退订
 const adminCancel = (data) => {
   const param = {
@@ -227,21 +205,6 @@ const handleBeforeOk = () => {
     })
   })
 };
-const handleSearch = () => {
-  Message.success('执行搜索操作');
-};
-
-const resetSearch = () => {
-  Object.keys(searchForm).forEach(key => {
-    if (Array.isArray(searchForm[key])) {
-      searchForm[key] = [];
-    } else {
-      searchForm[key] = null;
-    }
-  });
-  Message.success('搜索条件已重置');
-};
-
 // 模态框取消
 const closeModal = (items, obj) => {
   items = false

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' }
+]
+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,28 +3,7 @@
   <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' }">
@@ -39,138 +18,45 @@
       <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>
-    <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 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: '订单编号', slotName: 'id', ellipsis: true,
     tooltip: true,
@@ -179,52 +65,22 @@ const columns = [
     title: '客户名称', dataIndex: 'userName', ellipsis: true,
     tooltip: true,
   },
-  {title: '订单状态', slotName: 'orderStatus',ellipsis: 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: '退卡张数', 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();
-const pagination = ref({
-  total: 0,
-  current: 1,
-  size: 10,
-});
-//订单详情的弹框
-const showDetail = ref(false);
+
 // 查看订单详情
 const openDetail = (item) => {
   showDetail.value = true;
+  FormDataList.value = item;
 }
-const handleSearch = () => {
-  intData()
-};
 
 const resetSearch = () => {
   Object.keys(searchForm).forEach(key => {
@@ -237,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 = () => {
-}
-
 
 // 列表-------------------------------------
 // 订单列表
@@ -300,8 +127,6 @@ const intData = async () => {
 }
 onMounted(() => {
   intData();
-  // userName.value = localStorage.getItem('remember_user_name');
-  // userType.value = localStorage.getItem('role');
 })
 </script>
 

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>