fix：购卡订单对接

src/api/path/purchase.js

@@ -0,0 +1,21 @@
+import service from '../axios'
+
+// 采购订单分页查询
+export function purchaseOrderList(param) {
+    return service.post('/admin/sim/orderList', param)
+}
+
+// 订购生成订单
+export function addPurchaseOrder(param) {
+    return service.post('/admin/sim/createOrder', param)
+}
+
+// 订单订购状态修改-客户端
+export function adminUpdate(params) {
+    return service.get("/admin/sim/orderStatusUpdate", { params });
+}
+
+// 平台
+export function platformUpdate(params) {
+    return service.get("/admin/sim/orderModeration", { params });
+}

src/hooks/enum.js

@@ -7,6 +7,9 @@ export const enum_dict = {
     SUPPLIER_SOURCE: "supplier_source", // 来源(订单管理列表)
     TRAFFI_CTYPE: "TrafficType", // 流量类型
     SOURCE: "source", // 来源(资费列表)
+    CARD_TYPE: "card_type", // 卡类型
+    GROUP_POOL: "group_pool", // 组池
+    SILENCE: "silence_of", // 沉默期
     BILLING_CYCLE: "Billingcycle", // 计费周期
     BILLING_TYPE: "BillingType", // 计费分类
     BILLING_METHOD: "billingMethod", // 计费方式

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

@@ -0,0 +1,428 @@
+<!-- 购卡订单 -->
+<template>
+  <div class="silent-expire-alarm">
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <a-form :model="searchForm" layout="inline">
+        <a-form-item field="cardNumber" label="订单编号">
+          <a-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" allow-clear />
+        </a-form-item>
+        <a-form-item field="customerName" label="客户">
+          <a-input v-model="searchForm.customerName" placeholder="请输入客户名称" allow-clear />
+        </a-form-item>
+        <a-form-item>
+          <a-space>
+            <a-button type="primary" @click="handleSearch">搜索</a-button>
+            <a-button @click="resetSearch">重置</a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="audit-btn">
+      <a-button @click="openAudit" type="text">
+        <template #icon>
+          <icon-plus-circle />
+        </template>
+        <template #default>审核</template>
+      </a-button>
+    </div>
+    <!-- 数据表格 -->
+    <a-table row-key="customerName" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection" :columns="columns"
+      :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
+      <template #operate="{ record }">
+        <a-button @click="openContract(record)" type="text">上传合同</a-button>
+      </template>
+      <template #detail="{ record }">
+        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
+      </template>
+    </a-table>
+    <a-modal v-model:visible="uploadContract" title="上传合同" @cancel="handleCancel" @before-ok="handleBeforeOk"
+      okText="保存" cancelText="关闭">
+      <a-form :model="formContract" auto-label-width>
+        <a-form-item field="orderNumber" label="单号">
+          <!-- <a-input v-model="formContract.orderNumber" disabled placeholder="请输入单号" /> -->
+          <div class="audit-txt">{{ formContract.orderNumber }}</div>
+        </a-form-item>
+        <a-form-item field="customerName" label="客户">
+          <!-- <a-input v-model="formContract.customerName" disabled placeholder="请输入客户" /> -->
+          <div class="audit-txt" style="color:#418035;">{{ formContract.customerName }}</div>
+        </a-form-item>
+        <a-form-item field="fileList" label="销售合同">
+          <a-upload action="/" :default-file-list="formContract.fileList" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit" okText="确定审核"
+      cancelText="关闭">
+      <a-form :model="formAudit" auto-label-width>
+        <a-form-item field="customerName" label="客户">
+          <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
+          <div class="audit-txt" style="color:#418035;">演示账号02</div>
+        </a-form-item>
+        <a-form-item field="cardType" label="卡类型">
+          <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
+          <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨<div class="audit-tag">共1张卡</div>
+          </div>
+        </a-form-item>
+        <a-form-item field="money" label="资费">
+          <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
+          <div class="audit-txt">“移动100M月包” <div class="audit-tag">订购12个月</div>
+          </div>
+        </a-form-item>
+        <a-form-item field="orderStatus" label="订单状态">
+          <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
+          <a-radio-group v-model="formAudit.orderStatus" :options="options" />
+        </a-form-item>
+        <a-form-item field="auditOpinion" label="审核意见">
+          <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
+          <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
+        </a-form-item>
+        <a-form-item field="fileList" label="销售合同">
+          <a-upload action="/" :default-file-list="formAudit.fileList" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <a-modal v-model:visible="showDetail" width="800px" title="订单详情" :hide-cancel="true" @cancel="detailCancel">
+      <div class="detail-box">
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">订单编号</div>
+            <div class="item-content">53357981207</div>
+          </div>
+          <div class="detail-item">
+            <div class="item-label">订单状态</div>
+            <div class="item-content">已发货</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">发货日期</div>
+            <div class="item-content">2024-10-24 17:46:33</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">运营商</div>
+            <div class="item-content">泰国AIS</div>
+          </div>
+          <div class="detail-item">
+            <div class="item-label">资费信息</div>
+            <div class="item-content">1.0G/月</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">最短订阅周期</div>
+            <div class="item-content">3个月</div>
+          </div>
+          <div class="detail-item">
+            <div class="item-label">最长订阅周期</div>
+            <div class="item-content">--</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">计费方式</div>
+            <div class="item-content">按单流量消耗计费</div>
+          </div>
+          <div class="detail-item">
+            <div class="item-label">结算周期</div>
+            <div class="item-content">月</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">流量资费计费</div>
+            <div class="item-content">0.8美金/G;MRC:0元;网络接入0元</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">卡类型</div>
+            <div class="item-content">工业级PlugIn</div>
+          </div>
+          <div class="detail-item">
+            <div class="item-label">卡板费</div>
+            <div class="item-content">1美金</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">流量池</div>
+            <div class="item-content">组池</div>
+          </div>
+          <div class="detail-item">
+            <div class="item-label">沉默期</div>
+            <div class="item-content">6个月</div>
+          </div>
+        </div>
+        <div class="detail-item-box">
+          <div class="detail-item">
+            <div class="item-label">卡数量</div>
+            <div class="item-content">10000;已分配0，已退回0，已转移0
+              <a-button type="primary" @click="showCard = true" style="margin-left:10px;">分配卡号</a-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="detail-table">
+        <a-table :columns="columnsDetail" :data="dataDetail" />
+      </div>
+    </a-modal>
+    <a-modal v-model:visible="showCard" width="800px" title="分配卡号" @cancel="showCard = false" @before-ok="submitCard"
+      okText="确认" cancelText="取消">
+      <a-textarea :auto-size="{
+        minRows: 15,
+        maxRows: 15
+      }" v-model="cardNumber" max-length="1000" :show-word-limit="true" placeholder="请输入iccid,一行一个或者逗号分隔；不支持两种混合号码。"
+        allow-clear />
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { Message } from '@arco-design/web-vue';
+const selectedKeys = ref([]);
+const rowSelection = reactive({
+  type: 'checkbox',
+  showCheckedAll: true,
+  onlyCurrent: false,
+});
+const searchForm = reactive({
+  cardNumber: '',
+  customerName: '',
+});
+
+const columns = [
+  { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
+  { title: '订单编号', dataIndex: 'cardNumber' },
+  { title: '客户名称', dataIndex: 'customerName' },
+  { title: '审核状态', dataIndex: 'auditStatus' },
+  { title: '订单状态', dataIndex: 'orderStatus' },
+  { title: '开卡张数', dataIndex: 'cardQuantity' },
+  { title: '通道', dataIndex: 'source' },
+  { title: '资费', dataIndex: 'money' },
+  { title: '结算价/原价(元)', dataIndex: 'outMoney' },
+  { title: '下单时间', dataIndex: 'orderTime' },
+  { title: '操作', slotName: 'operate', align: 'center' },
+  { title: '详情', slotName: 'detail', align: 'center' },
+];
+const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' },
+{ title: '池名称及编号', dataIndex: 'nameAndId' },
+{ title: '卡状态', dataIndex: 'status' },
+]
+const dataDetail = ref([{
+  iccid: '8986061800002054589N',
+  nameAndId: '泰国监控40G共享/53357981207',
+  status: '沉默期'
+},
+{
+  iccid: '8986061800002054588N',
+  nameAndId: '泰国监控40G共享/53357981207',
+  status: '沉默期'
+}, {
+  iccid: '8986061800002054587N',
+  nameAndId: '泰国监控40G共享/53357981207',
+  status: '沉默期'
+}, {
+  iccid: '8986061800002054586N',
+  nameAndId: '泰国监控40G共享/53357981207',
+  status: '沉默期'
+},])
+const tableData = ref([
+  {
+    cardNumber: '13800138000',
+    customerName: '张三',
+    auditStatus: '1',
+    orderStatus: '1',
+    cardQuantity: 24,
+    source: '联通',
+    money: '100',
+    outMoney: '10',
+    orderTime: '2024-10-11'
+    // operate:'上传合同'
+  },
+  {
+    cardNumber: '13800138000',
+    customerName: '李四',
+    auditStatus: '1',
+    orderStatus: '1',
+    cardQuantity: 24,
+    source: '联通',
+    money: '100',
+    outMoney: '10',
+    orderTime: '2024-10-11'
+    // operate:'上传合同'
+  }, {
+    cardNumber: '13800138000',
+    customerName: '王五',
+    auditStatus: '1',
+    orderStatus: '1',
+    cardQuantity: 24,
+    source: '联通',
+    money: '100',
+    outMoney: '10',
+    orderTime: '2024-10-11'
+    // operate:'上传合同'
+  },
+  // 可以添加更多模拟数据...
+]);
+// 上传合同的弹框
+const uploadContract = ref(false);
+const pagination = reactive({
+  total: tableData.value.length,
+  current: 1,
+  pageSize: 10,
+});
+const openContract = (item) => {
+  console.log(item, '???')
+  uploadContract.value = true;
+  formContract.customerName = item.customerName;
+  formContract.orderNumber = item.cardNumber;
+};
+//订单详情的弹框
+const showDetail = ref(false);
+// 查看订单详情
+const openDetail = (item) => {
+  showDetail.value = true;
+}
+const handleBeforeOk = (done) => {
+  console.log(formContract)
+  window.setTimeout(() => {
+    done()
+    // prevent close
+    // done(false)
+  }, 3000)
+};
+const handleCancel = () => {
+  uploadContract.value = false;
+}
+const handleSearch = () => {
+  console.log('Search form data:', searchForm);
+  Message.success('执行搜索操作');
+};
+
+const resetSearch = () => {
+  Object.keys(searchForm).forEach(key => {
+    if (Array.isArray(searchForm[key])) {
+      searchForm[key] = [];
+    } else {
+      searchForm[key] = null;
+    }
+  });
+  Message.success('搜索条件已重置');
+};
+// 文件上传的列表
+const formContract = reactive({
+  orderNumber: '',
+  customerName: '',
+  fileList: []
+})
+// 订单状态
+const options = [
+  { label: '发货', value: '1' },
+  { label: '退回', value: '2' },
+];
+// 审核
+const showAudit = ref(false);
+const formAudit = reactive({
+  customerName: '',
+  cardType: '',
+  money: '',
+  orderStatus: '',
+  auditOpinion: '',
+  fileList: []
+})
+// 触发审核的弹框
+const openAudit = () => {
+  showAudit.value = true;
+}
+// 确认审核
+const submitAudit = () => {
+  console.log(formAudit, 'lll')
+  window.setTimeout(() => {
+    showAudit.value = false;
+  }, 1000)
+}
+// 分配卡号的值
+const cardNumber = ref('');
+const showCard = ref(false);
+
+const submitCard = () => {
+}
+</script>
+
+<style scoped lang="less">
+.silent-expire-alarm {
+  padding: 20px !important;
+  // background: #fcf;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.arco-table-th {
+  white-space: nowrap;
+}
+
+.audit-txt {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .audit-tag {
+    margin-left: 20px;
+    background: #63c2c6;
+    color: #fff;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: 50px;
+  }
+}
+
+.audit-btn {
+  margin-bottom: 10px;
+}
+
+.detail-box {
+  .detail-item-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .detail-item {
+      //styleName: Body/Medium;
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      min-width: 350px;
+
+      .item-label {
+        color: rgba(0, 0, 0, 0.4);
+        width: 120px;
+        text-align: right;
+        margin-right: 10px;
+      }
+
+      .item-content {
+        color: rgba(51, 51, 51, 1);
+      }
+    }
+  }
+}
+
+.detail-table {
+  margin-top: 20px;
+}
+</style>

src/views/order/BuyCard/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="silent-expire-alarm">
     <!-- 搜索条件区 -->
-    <div class="search-section">
+    <!-- <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 />
@@ -17,23 +17,28 @@
           </a-space>
         </a-form-item>
       </a-form>
-    </div>
+    </div> -->
     <div class="audit-btn">
       <a-button @click="openAudit" type="text">
         <template #icon>
           <icon-plus-circle />
         </template>
-        <template #default>审核</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>
+    <a-table :data="tableData" :pagination="pageData" :columns="columns" @page-change="evChangePage"
+      :scroll="{ x: '100%', y: '800px' }">
+      <template #status="{ record }">
+        {{ record.status == 1 ? "未激活" : record.status == 2 ? "已过期" : record.status == 3 ? "已激活" : "已退款" }}
       </template>
-      <template #detail="{ record }">
-        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
+      <template #moderation_status="{ record }">
+        {{ record.moderation_status }}
+      </template>
+      <template #operate="{ record }">
+        <a-button @click="platformCancel" type="text" v-if="userType == 1">退订</a-button>
+        <a-button @click="adminCancel" type="text" v-if="userType == 2">退订</a-button>
+        <!-- <a-button @click="openDetail(record, 2)" type="text">查看</a-button> -->
       </template>
     </a-table>
     <a-modal v-model:visible="uploadContract" title="上传合同" @cancel="handleCancel" @before-ok="handleBeforeOk"
@@ -52,37 +57,72 @@
         </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-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" style="color:#418035;">演示账号02</div>
+          <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 field="cardType" label="卡类型">
-          <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
-          <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨<div class="audit-tag">共1张卡</div>
+        <!-- <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 field="money" label="资费">
-          <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
-          <div class="audit-txt">“移动100M月包” <div class="audit-tag">订购12个月</div>
+        <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 field="orderStatus" label="订单状态">
-          <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
-          <a-radio-group v-model="formAudit.orderStatus" :options="options" />
+        <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 field="auditOpinion" label="审核意见">
-          <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
-          <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
+        <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 field="fileList" label="销售合同">
-          <a-upload action="/" :default-file-list="formAudit.fileList" />
+        <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="订单详情" :hide-cancel="true" @cancel="detailCancel">
+
+    <!-- 详情 -->
+    <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">
@@ -160,7 +200,7 @@
           <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>
+              <!-- <a-button type="primary" @click="showCard = true" style="margin-left:10px;">分配卡号</a-button> -->
             </div>
           </div>
         </div>
@@ -168,21 +208,27 @@
       <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"
+    <!-- <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>
+    </a-modal> -->
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { Message } from '@arco-design/web-vue';
+import { enum_dict } from "@/hooks/enum";
+import { tariffList } from "@/api/path/tariffManagement.api";
+import { purchaseOrderList, addPurchaseOrder, platformUpdate, adminUpdate } from '@/api/path/purchase';
 const selectedKeys = ref([]);
 const rowSelection = reactive({
   type: 'checkbox',
@@ -195,18 +241,14 @@ const searchForm = reactive({
 });
 
 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' },
+  { title: '订单编号', dataIndex: 'id', align: 'center', width: 300 },
+  { title: '客户名称', dataIndex: 'user_id', align: 'center' },
+  { title: '订阅状态', slotName: 'status', align: 'center' },
+  { title: '审核状态', slotName: 'moderation_status', align: 'center' },
+  { title: '采购数量', dataIndex: 'quantity', align: 'center' },
+  { title: '支付金额', dataIndex: 'payment_amount', align: 'center' },
+  { title: '下单时间', dataIndex: 'created_at', align: 'center' },
+  { title: '操作', slotName: 'operate', align: 'center' }
 ];
 const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' },
 { title: '池名称及编号', dataIndex: 'nameAndId' },
@@ -230,51 +272,163 @@ const dataDetail = ref([{
   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 userName = ref('')
+const userType = ref(''); // 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 = () => {
+  const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
+  sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
+  orderType.value = dictList.filter((item) => item.type_key == enum_dict.CARD_TYPE)
+  flowPoolData.value = dictList.filter((item) => item.type_key == enum_dict.GROUP_POOL)
+  silenceOptions.value = dictList.filter((item) => item.type_key == enum_dict.SILENCE)
+}
+// 订单列表
+const intData = () => {
+  const param = {
+    current: pageData.value.current,
+    size: pageData.value.size,
+  }
+  purchaseOrderList(param).then(res => {
+    tableData.value = res.data.records;
+    pageData.value.total = res.data.total;
+  })
+
+}
+// 资费
+const getTariff = () => {
+  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),
+        tariff_id: formState.value.tariffId,
+        quantity: Number(formState.value.num),
+        card_type: formState.value.cardType,
+        period_of_silence: String(formState.value.silencePeriod),
+        is_traffic_pool: 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 = () => {
+  platformUpdate().then(res => { })
+}
+// 用户退订
+const adminCancel = () => {
+  adminUpdate().then(res => { })
+}
+// 
+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();
+  userName.value = localStorage.getItem('remember_user_name');
+  userType.value = localStorage.getItem('role');
+})
+
 // 上传合同的弹框
 const uploadContract = ref(false);
-const pagination = reactive({
-  total: tableData.value.length,
-  current: 1,
-  pageSize: 10,
-});
 const openContract = (item) => {
   console.log(item, '???')
   uploadContract.value = true;
@@ -284,7 +438,8 @@ const openContract = (item) => {
 //订单详情的弹框
 const showDetail = ref(false);
 // 查看订单详情
-const openDetail = (item) => {
+const openDetail = (item, current) => {
+  currentIndex.value = current;
   showDetail.value = true;
 }
 const handleBeforeOk = (done) => {
@@ -319,32 +474,14 @@ const formContract = reactive({
   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;
+  handleDictValue();
+  getTariff();
 }
-// 确认审核
-const submitAudit = () => {
-  console.log(formAudit, 'lll')
-  window.setTimeout(() => {
-    showAudit.value = false;
-  }, 1000)
-}
+
 // 分配卡号的值
 const cardNumber = ref('');
 const showCard = ref(false);
@@ -369,20 +506,17 @@ const submitCard = () => {
 
 .audit-txt {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-wrap: wrap;
 
   .audit-tag {
-    margin-left: 20px;
-    background: #63c2c6;
-    color: #fff;
-    font-size: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 10px;
-    box-sizing: border-box;
-    border-radius: 50px;
+    width: 180px;
+    color: #b2b2b2;
+    margin-right: 20px;
+
+    span {
+      color: #000;
+      margin-left: 20px;
+    }
   }
 }
 

vite.config.js

@@ -61,7 +61,8 @@ export default defineConfig({
     hmr: true,
     proxy: {
       '/api': {
-        target: "http://sim.nanodreamtech.com",
+        // target: "http://sim.nanodreamtech.com",
+        target:"http://192.168.0.59:3001",
         changeOrigin: true,
         ws: true,
         secure: true,