小bug

src/views/usergold/gold/clientCountBalance.vue

@@ -1,10 +1,10 @@
 <script setup>
 // 这是客户金币余额页面
-import { onMounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import {onMounted, ref} from 'vue'
+import {ElMessage} from 'element-plus'
 import moment from 'moment'
 import API from '@/util/http.js'
-import { reverseMarketMapping } from "@/utils/marketMap.js";
+import {reverseMarketMapping} from "@/utils/marketMap.js";
 
 //新增员工数据复选框
 const showEmployeeData = ref(true)
@@ -16,7 +16,7 @@ const adminData = ref({})
 const dialogVisible = ref(false)
 const getAdminData = async function () {
   try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
+    const result = await API({url: '/admin/userinfo', data: {}})
     adminData.value = result
     // console.log('请求成功', result)
     console.log('管理员用户信息', adminData.value)
@@ -44,7 +44,6 @@ const freeJuneGold = ref(0) // 修改为 currentFreeJune 对应字段
 const freeDecemberGold = ref(0) // 修改为 currentFreeDecember 对应字段
 const taskGold = ref(0) // 修改为 currentTaskGold 对应字段
 const freeGold = ref(0) // 计算免费金币总数
-
 //客户消费记录
 const tableCountData = ref([])
 const userInfo = ref({})
@@ -85,10 +84,8 @@ const get = async function (val) {
     console.log('搜索参数', getObj.value)
 
     // 发送POST请求
-
-    const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
+    const requestData = {...getObj.value, user: {...user.value}};//控制台打印请求的参数
     console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
-
     //console.log('请求参数', requestData);
     // 检查markets数组中是否包含'总部'或'研发部'
     if (user.value.markets.includes('9') || user.value.markets.includes('9999')) {
@@ -108,7 +105,7 @@ const get = async function (val) {
     const result = await API({
       url: '/goldDetail/getGold',
       method: 'post',
-      data: { ...getObj.value, user: { ...user.value, flag: showEmployeeData.value ? 0 : 1 } }
+      data: {...getObj.value, user: {...user.value, flag: showEmployeeData.value? 0 : 1}}
     })
     console.log('响应数据', result)
     tableData.value = result.data.list
@@ -121,7 +118,7 @@ const get = async function (val) {
       data: {
         jwcode: user.value.jwcode,
         markets: user.value.markets,
-        flag: showEmployeeData.value ? 0 : 1
+      flag: showEmployeeData.value? 0 : 1
       }
     })
     // 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组
@@ -138,13 +135,12 @@ const get = async function (val) {
 
       // // 新增金币总数变量
       // const goldtotal = ref(0)
-
       // 分页总数设置为 0
       total.value = 0
       // ElMessage.warning('精网号不存在，请检查输入')
     }
     // 判断合计数是否存在,不存在时 result.data.list 为空数组
-    else if (resultGoldTotal.data === 0) {
+    else if(resultGoldTotal.data===0){
       // 将表格数据设置为空数组
       tableData.value = []
       // 将合计数设置为 0
@@ -250,11 +246,11 @@ const exportExcel = async function () {
     user: {
       jwcode: user.value.jwcode || '',
       markets: user.value.markets || [],
-      flag: showEmployeeData.value ? 0 : 1
+    flag: showEmployeeData.value? 0 : 1
     }
 
   }
-  const res = await API({ url: '/goldDetail/exportGold', data: params })
+  const res = await API({url: '/goldDetail/exportGold', data: params})
   if (res.code === 200) {
     ElMessage.success('导出成功')
   }
@@ -276,7 +272,7 @@ const exportListLoading = ref(false)
 const getExportList = async () => {
   exportListLoading.value = true
   try {
-    const result = await API({ url: '/export/export' })
+    const result = await API({url: '/export/export'})
     if (result.code === 200) {
       const filteredData = result.data.filter(item => {
         return item.type === 1; //返回type為0即客户金币余额的数据
@@ -390,28 +386,39 @@ const format3 = (num) => {
 </script>
 
 <template>
+  <el-row>
+    <el-col>
       <el-card style="margin-bottom: 20px;margin-top: 10px">
         <div class="head-card">
           <div class="head-card-element">
-            <el-text size="large">精网号：</el-text>
-            <el-input v-model="user.jwcode" style="width: 160px" placeholder="请输入精网号" clearable />
+            <el-text class="mx-1" size="large">精网号：</el-text>
+            <el-input v-model="user.jwcode" style="width: 160px" placeholder="请输入精网号" clearable/>
           </div>
           <div class="head-card-element">
-            <el-text size="large">所属地区：</el-text>
-            <el-cascader v-model="selectedMarketPath" :options="markets" placeholder="请选择所属地区" clearable
-              style="width:180px" @change="handleMarketChange" />
+            <el-text class="mx-1" size="large">所属地区：</el-text>
+            <el-cascader
+                v-model="selectedMarketPath"
+                :options="markets"
+                placeholder="请选择所属地区"
+                clearable
+                style="width:180px"
+                @change="handleMarketChange"
+            />
           </div>
             <div class="head-card-element">
               <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
             </div>
           <el-button type="primary" @click="search()">查询</el-button>
           <el-button @click="reset" type="success">重置</el-button>
-
           <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
           <el-button type="primary" @click="openExportList">查看导出列表</el-button>
         </div>
         <!-- </div> -->
       </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
       <el-card>
         <div>
           金币总数：{{ format3(goldtotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -430,60 +437,6 @@ const format3 = (num) => {
                   }}</span>
               </template>
             </el-table-column>
-        <el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip />
-        <el-table-column prop="jwcode" label="精网号" width="120" />
-        <el-table-column prop="market" label="所属地区" width="120" />
-        <el-table-column prop="allJb" label="金币总数" width="120" aligh="center">
-          <template #default="scope">
-            <span>{{
-              ((scope.row.currentPermanentGold || 0) +
-                (scope.row.currentFreeJune || 0) +
-                (scope.row.currentFreeDecember || 0) +
-                (scope.row.currentTaskGold || 0))
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="currentPermanentGold" label="永久金币" sortable="custom" width="110">
-          <template #default="scope">
-            <span>{{ (scope.row.currentPermanentGold || 0) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="currentFreeJune" label="6月份到期免费金币" sortable="custom" width="110">
-          <template #default="scope">
-            <span>{{ (scope.row.currentFreeJune || 0) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="currentFreeDecember" label="12月份到期免费金币" sortable="custom" width="110">
-          <template #default="scope">
-            <span>{{ (scope.row.currentFreeDecember || 0) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="currentTaskGold" label="任务金币" sortable="custom" width="130">
-          <template #default="scope">
-            <span>{{ (scope.row.currentTaskGold || 0) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="rcoin" label="历史金币总额" width="150">
-          <template #default="scope">
-            <el-popover trigger="hover" placement="left" width="150">
-              <template #default>
-                <div>
-                  <div>永久金币：{{ (scope.row.sumPermanentGold || 0) }}</div>
-                  <div>免费金币：{{ ((scope.row.sumFreeJune || 0) + (scope.row.sumFreeDecember || 0)) }}</div>
-                  <div>任务金币：{{ (scope.row.sumTaskGold || 0) }}</div>
-                </div>
-              </template>
-              <template #reference>
-                <span>
-                  {{
-                    (scope.row.sumPermanentGold || 0) +
-                    (scope.row.sumFreeJune || 0) +
-                    (scope.row.sumFreeDecember || 0) +
-                    (scope.row.sumTaskGold || 0)
-                  }}</span>
-              </template>
-            </el-table-column>
             <el-table-column prop="name" label="姓名" width="140"/>
             <el-table-column prop="jwcode" label="精网号" width="160"/>
             <el-table-column prop="market" label="所属地区" width="140"/>
@@ -517,7 +470,6 @@ const format3 = (num) => {
                 <span>{{ (scope.row.currentTaskGold || 0)  }}</span>
               </template>
             </el-table-column>
-
 <!--            <el-table-column prop="rcoin" label="历史金币总额" width="150">
               <template #default="scope">
                 <el-popover trigger="hover" placement="left" width="150">
@@ -564,11 +516,9 @@ const format3 = (num) => {
                   </template>
                 </el-popover>
               </template>
-
             </el-table-column>-->
           </el-table>
         </div>
-
         <!-- 分页 -->
         <div class="pagination" style="margin-top: 20px">
           <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
@@ -579,10 +529,9 @@ const format3 = (num) => {
       </el-card>
     </el-col>
   </el-row>
-
   <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
     <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
-      <el-table-column prop="fileName" label="文件名" />
+      <el-table-column prop="fileName" label="文件名"/>
       <el-table-column prop="state" label="状态">
         <template #default="scope">
           <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
@@ -610,9 +559,18 @@ const format3 = (num) => {
       </div>
     </template>
   </el-dialog>
+
 </template>
 
 <style scoped lang="scss">
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
 .head-card {
   display: flex;
 }
@@ -620,4 +578,22 @@ const format3 = (num) => {
 .head-card-element {
   margin-right: 20px;
 }
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+.custom-box {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 5px;
+
+  div:nth-child(1) {
+    flex: 1 0 100%;
+  }
+
+  div {
+    margin-right: 20px;
+  }
+}
 </style>