导卡操作修改状态颜色:flex & 导卡只允许上传一次

src/views/order/BuyCard/detaile.vue

@@ -1,5 +1,5 @@
 <template>
-    <a-modal v-model:visible="modelValue" width="800px" title="订单详情" @cancel="cancel" @ok="showDetail = false">
+    <a-modal v-model:visible="modelValue" width="800px" title="订单详情" >
         <div class="detail-box">
             <div class="detail-item-box">
                 <div class="detail-item">
@@ -73,12 +73,16 @@
         <div class="detail-table">
             <a-table :columns="columnsDetail" :data="dataDetail" />
         </div>
+
+        <template #footer>
+            <a-button @click="cancel">取消</a-button>
+        </template>
     </a-modal>
 
     <!-- 分配卡号 -->
     <a-modal v-model:visible="showCard" title="分配卡号" @cancel="closeModal(showCard, FormDataList)"
         @before-ok="showCard = false" okText="确认" cancelText="取消">
-        <Upload listType="" minx="9999" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
+        <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
         </Upload>
     </a-modal>
 </template>

src/views/order/BuyCard/index.vue

@@ -26,8 +26,8 @@
         <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="#ff7d00" v-if="record.moderationStatus == 1">待审核</a-tag>
+        <a-tag color="#00b42a" v-if="record.moderationStatus == 2">审核通过</a-tag>
         <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">已驳回</a-tag>
       </template>
       <template #LogisticsStatus="{ record }">
@@ -35,16 +35,19 @@
         <a-tag color="#00b42a" v-if="record.tmsStatus == 2">已发货</a-tag>
       </template>
       <template #operate="{ record }">
-        <div v-if="userType == 1">
-          <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1"
-            @click="statusOrder(record)">审核</a-button>
-          <a-button @click="uploadModal(record)" type="text">{{ record.contractImg == '' ? '上传合同' : '查看合同' }}</a-button>
+        <div class="setting">
+          <div v-if="userType == 1">
+            <a-button type="text" v-if="record.moderationStatus == 1 && record.status == 1"
+              @click="statusOrder(record)">审核</a-button>
+            <a-button @click="uploadModal(record)" type="text">{{ record.contractImg == '' ? '上传合同' : '查看合同'
+              }}</a-button>
+          </div>
+          <div v-if="userType == 2">
+            <a-button type="text" @click="adminCancel(record)"
+              v-if="record.moderationStatus == 2 && userType !== 1">退订</a-button>
+          </div>
+          <a-button @click="openDetail(record)" type="text">查看</a-button>
         </div>
-        <div v-if="userType == 2">
-          <a-button type="text" @click="adminCancel(record)"
-            v-if="record.moderationStatus == 2 && userType !== 1">退订</a-button>
-        </div>
-        <a-button @click="openDetail(record)" type="text">查看</a-button>
       </template>
     </a-table>
 
@@ -75,7 +78,7 @@
 import { ref, onMounted, toRefs } from 'vue';
 import { Message } from '@arco-design/web-vue';
 import { purchaseOrderList, platformUpdate, adminUpdate } from '@/api/path/purchase';
-import { UploadOrderCardContract,TariffOrderCard } from '@/api/path/order'
+import { UploadOrderCardContract, TariffOrderCard } from '@/api/path/order'
 import { Getdictionary } from '@/mixins/index.js'
 import Upload from "@/components/upload/index.vue";
 import Card from './Card.vue'
@@ -104,8 +107,8 @@ const state = ref({
   showDetail: false,
   uploadContract: false,
   showReturn: false,
-  ReturnData:[],
-  id:null
+  ReturnData: [],
+  id: null
 });
 
 const {
@@ -129,12 +132,12 @@ const columns = [
   { 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: '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: '支付金额', dataIndex: 'priceing', 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 }
@@ -165,7 +168,7 @@ const intData = async () => {
 }
 // 用户退订
 const adminCancel = (data) => {
-  TariffOrderCard({id:data.trafficId}).then(res => {
+  TariffOrderCard({ id: data.trafficId }).then(res => {
     ReturnData.value = res.data || []
   })
   id.value = data.id
@@ -231,6 +234,12 @@ onMounted(() => {
   // background: #fcf;
 }
 
+.setting {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .search-section {
   margin-bottom: 20px;
 }

vite.config.js

@@ -1,78 +1,73 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-
-import { resolve } from 'path'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
+import { resolve } from "path";
 
 function pathResolve(dir) {
-  return resolve(process.cwd(), '.', dir)
+    return resolve(process.cwd(), ".", dir);
 }
 
 export default defineConfig({
-  resolve: {
-    alias: [
-      {
-        find: '@',
-        replacement: pathResolve('src')
-      }
+    resolve: {
+        alias: [{
+            find: "@",
+            replacement: pathResolve("src"),
+        }, ],
+        dedupe: ["vue"],
+    },
+    plugins: [
+        vue(),
+        createSvgIconsPlugin({
+            // 指定需要缓存的图标文件夹
+            iconDirs: [resolve(process.cwd(), "src/assets/svg")],
+            // 指定symbolId格式
+            symbolId: "icon-[dir]-[name]",
+        }),
     ],
-    dedupe: ['vue']
-  },
-  plugins: [
-    vue(),
-    createSvgIconsPlugin({
-      // 指定需要缓存的图标文件夹
-      iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
-      // 指定symbolId格式
-      symbolId: 'icon-[dir]-[name]',
-    })
-  ],
-  css: {
-    // css预处理器
-    preprocessorOptions: {
-      less: {
-        charset: false, //  解决中文乱码
-        modifyVars: {
-            'arcoblue-6': '#d1402f',
+    css: {
+        // css预处理器
+        preprocessorOptions: {
+            less: {
+                charset: false, //  解决中文乱码
+                modifyVars: {
+                    "arcoblue-6": "#d1402f",
+                },
+                javascriptEnabled: true,
+                additionalData: '@import "@/assets/css/theme.less";@import "@/assets/css/global.less";',
+            },
         },
-        javascriptEnabled: true,
-        additionalData:
-          '@import "@/assets/css/theme.less";@import "@/assets/css/global.less";',
-        
-      },
     },
-  },
-  build: {
-    minify: true, // 生产环境不生成sourcemap
-    target: 'es2015',
-    // 警报门槛，限制大文件大小
-    chunkSizeWarningLimit: 5000,
-    rollupOptions: {
-      external: [], // 外部化处理那些你不想打包进库的依赖
-      // 静态资源分类打包
-      output: {
-        chunkFileNames: 'static/js/[name]-[hash].js',
-        entryFileNames: 'static/js/[name]-[hash].js',
-        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
-      },
+    build: {
+        minify: true, // 生产环境不生成sourcemap
+        target: "es2015",
+        // 警报门槛，限制大文件大小
+        chunkSizeWarningLimit: 5000,
+        rollupOptions: {
+            external: [], // 外部化处理那些你不想打包进库的依赖
+            // 静态资源分类打包
+            output: {
+                chunkFileNames: "static/js/[name]-[hash].js",
+                entryFileNames: "static/js/[name]-[hash].js",
+                assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+            },
+        },
+    },
+    server: {
+        port: 8088,
+        host: "0.0.0.0",
+        open: true,
+        cors: true,
+        hmr: true,
+        proxy: {
+            "/api": {
+                // target: "http://sim.nanodreamtech.com",
+                // target: "http://127.0.0.1:3001",
+                target: "http://sim.ainets.net",
+                changeOrigin: true,
+                ws: true,
+                secure: true,
+            },
+        },
     },
-  },
-  server: {
-    port: 8088,
-    host: '0.0.0.0',
-    open: true,
-    cors: true,
-    hmr: true,
-    proxy: {
-      '/api': {
-        // target: "http://sim.nanodreamtech.com",
-        // target: "http://127.0.0.1:3001",
-        target:'http://sim.ainets.net',
-        changeOrigin: true,
-        ws: true,
-        secure: true,
-      },
-    }
-  }
-})
+});