1

src/api/path/order.js

@@ -0,0 +1,31 @@
+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});
+}

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/upload/index.vue

@@ -1,24 +1,44 @@
 <template>
-  <a-upload
-      :show-file-list="true"
-      :custom-request="customRequest"
-      list-type="picture-card"
-      :file-list="fileList"
-      :limit="minx"
-      @before-remove="beforeRemove"
-      image-preview
-  />
+  <a-upload :show-file-list="true" :custom-request="handelUpload == null ? customRequest : handelUpload"
+    :list-type="listType" :file-list="fileList" :limit="minx" @before-remove="beforeRemove"
+    :image-preview="imagePreview" :accept="accept" />
 </template>
 
 <script setup>
-import {toRef, ref, watch, watchEffect} from 'vue';
-import {useSystemStore} from '@/store/modules/systemStore';
-import {Modal} from "@arco-design/web-vue";
-import {useI18n} from 'vue-i18n';
+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';
 
 const systemStore = useSystemStore();
-const {t} = useI18n();
+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: {
@@ -28,65 +48,37 @@ const props = defineProps({
   minx: {
     type: Number,
     default: 1
+  },
+  listType: {
+    type: String,
+    default: 'picture-card'
+  },// 上传样式
+  imagePreview: {
+    type: Boolean,
+    default: true
+  }, // 是否支持预览
+  accept: {
+    type: String,
+    default: ''
+  }, // 上传文件类型
+  handelUpload: {
+    type: Function,
+    default: null  // 外部传入的自定义上传方法
   }
 });
 
 // 使用 toRef 确保对 props 的访问是响应式的
 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) => {
@@ -107,6 +99,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(() => {
+
+})
 </script>
 
 <style scoped>

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,198 @@
+<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">10000
+                        <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">
+        </Upload>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, onMounted, toRefs, toRef ,watch} from 'vue';
+import { AcquireOrdertariff, DistributionCard } 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' }
+]
+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 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)
+    })
+}
+
+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 : '';
+    })
+},{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

@@ -19,7 +19,7 @@
       </a-form>
     </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,392 +28,154 @@
     </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" @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-popconfirm :content="`是否确认退订?`" type="warning" @ok="adminCancel(record)"
+            v-if="record.moderationStatus != 3">
             <a-button type="text">退订</a-button>
           </a-popconfirm>
-          <a-button @click="openDetail(record, 2)" type="text">查看</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>
+          <div class="audit-txt">{{ FormDataList.id }}</div>
         </a-form-item>
-        <a-form-item field="fileList" label="销售合同">
-          <Upload v-model:modelValue="formContract.fileList"/>
+        <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="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>
-        </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>
-      </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"/>
   </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 } 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'
+// 数据层
+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,
+  },
+  tariffData: [],
+  showAudit: false,
+  showStatus: false,
+  formContract: {
+    id: null,
+    contractImg: []
+  }, // 文件上传列表
+  showCard: false,
+  showDetail: false,
+  uploadContract: false,
 });
 
+const {
+  userName,
+  userType,
+  tableData,
+  formRef,
+  currentIndex,
+  FormDataList,
+  pageData,
+  tariffData,
+  showAudit,
+  showStatus,
+  formContract,
+  showCard,
+  showDetail,
+  uploadContract,
+  tariffForm
+} = 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 = {
@@ -434,60 +196,47 @@ const adminCancel = (data) => {
     intData();
   })
 }
-
-//
-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 openDetail = async (item) => {
+  FormDataList.value = item
+  showDetail.value = true;
 }
-const handleBeforeOk = (done) => {
-  window.setTimeout(() => {
-    done()
-    // prevent close
-    // done(false)
-  }, 3000)
+
+// 上传合同
+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 handleCancel = () => {
-  uploadContract.value = false;
-}
 const handleSearch = () => {
-  console.log('Search form data:', searchForm);
   Message.success('执行搜索操作');
 };
 
@@ -501,25 +250,20 @@ const resetSearch = () => {
   });
   Message.success('搜索条件已重置');
 };
-// 文件上传的列表
-const formContract = reactive({
-  orderNumber: '',
-  customerName: '',
-  fileList: []
-})
 
-// 触发购卡弹框
-const openAudit = () => {
-  showAudit.value = true;
-  handleDictValue();
+// 模态框取消
+const closeModal = (items, obj) => {
+  items = false
+  Object.keys(obj).forEach(key => {
+    if (obj.key) {
+      obj[key] = '';
+    }
+  })
 }
 
-// 分配卡号的值
-const cardNumber = ref('');
-const showCard = ref(false);
-
-const submitCard = () => {
-}
+onMounted(() => {
+  intData();
+})
 </script>
 
 <style scoped lang="less">
@@ -556,39 +300,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/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/ReturnCard/index.vue

@@ -31,6 +31,14 @@
       <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>
     </a-table>
     <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
              okText="确定审核"
@@ -156,12 +164,6 @@ import {cancelOrderList} from '@/api/path/purchase';
 import {enum_dict} from "@/hooks/enum";
 import {Getdictionary} from "@/mixins/index.js";
 
-const selectedKeys = ref([]);
-const rowSelection = reactive({
-  type: 'checkbox',
-  showCheckedAll: true,
-  onlyCurrent: false,
-});
 const searchForm = reactive({
   cardNumber: '',
   customerName: '',
@@ -170,26 +172,21 @@ const searchForm = reactive({
 const columns = [
   {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},
 ];
 const columnsDetail = [{title: 'ICCID', dataIndex: 'iccid'},
   {title: '池名称及编号', dataIndex: 'nameAndId'},
@@ -213,65 +210,11 @@ const dataDetail = ref([{
     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 tableData = ref();
 const pagination = ref({
   total: 0,
   current: 1,
-  pageSize: 10,
+  size: 10,
 });
 //订单详情的弹框
 const showDetail = ref(false);
@@ -434,4 +377,14 @@ onMounted(() => {
 .detail-table {
   margin-top: 20px;
 }
+
+.line_heis {
+  color: #FF8839;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.line_heis:hover {
+  color: #168cff;
+}
 </style>

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>
@@ -46,24 +46,24 @@
     <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,51 +72,51 @@
 
     <!--资费 弹框 -->
     <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>
@@ -128,19 +128,19 @@
           </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 +177,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 +191,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 +203,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 +212,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": "",
@@ -248,19 +248,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,
+      Activated: Activated,
       status: "正常"
     }
   })
@@ -270,7 +270,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 +345,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 +377,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 +389,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 +422,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 +460,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 +500,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 = ''
+  }
 })
 
 // -------------------------------------------------------