From ba4da47a1c3b0ffd12f80fa8fd1f0e21157f70f7 Mon Sep 17 00:00:00 2001
From: lihuilin <analsak@163.com>
Date: Tue, 4 Nov 2025 17:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E5=8E=9Frate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/managerecharge/rate.vue | 470 ++++++++++++++++++++++++++++++--------
 1 file changed, 372 insertions(+), 98 deletions(-)

diff --git a/src/views/managerecharge/rate.vue b/src/views/managerecharge/rate.vue
index 23ed31f..4592318 100644
--- a/src/views/managerecharge/rate.vue
+++ b/src/views/managerecharge/rate.vue
@@ -1,127 +1,401 @@
-<template>
-  <el-card>
-    <div class="condition">
-      <div class="condition-item1">
-        <el-text size="large">活动名称：</el-text>
-        <el-input v-model="searchForm.activity" style="width: 10vw" placeholder="请输入活动名称" clearable />
-      </div>
-      <div class="condition-item1">
-        <el-text size="large">业绩归属：</el-text>
-        <el-input v-model="searchForm.achievement" style="width: 10vw" placeholder="请输入业绩归属" clearable />
-      </div>
-      <div class="condition-item2">
-        <el-text size="large">开始时间：</el-text>
-        <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="请选择开始时间"
-          :default-time="defaultTime" />
-      </div>
-      <div class="condition-item2">
-        <el-text size="large">结束时间：</el-text>
-        <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="请选择结束时间"
-          :default-time="defaultTime" />
-      </div>
-      <el-button type="primary" @click="search">查询</el-button>
-      <el-button type="success" @click="reset">重置</el-button>
-    </div>
-  </el-card>
+<script setup>
+import {onMounted, reactive, ref} from 'vue'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import request from '@/util/http'
+import {useAdminStore} from "@/store/index.js";
+import {storeToRefs} from "pinia";
+import {permissionMapping, hasMenuPermission} from "@/utils/menuTreePermission.js"
+
+const adminStore = useAdminStore()
+const {adminData, menuTree} = storeToRefs(adminStore)
+const regeEdit = ref(false)
+const editFormRef = ref(null)
+const tableData = ref([])
+//搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 10
+})
+const total = ref(0)
+const rateEdit = ref({
+  id: null,
+  rateName: '',
+  num: null,
+  adminId: null,
+  updateTime: Date.now(),
+})
+//货币条目
+const rateNames = [
+  {
+    value: 'USD',
+    label: 'USD'
+  },
+  {
+    value: 'HKD',
+    label: 'HKD'
+  },
+  {
+    value: 'THB',
+    label: 'THB'
+  },
+  {
+    value: 'VND',
+    label: 'VND'
+  },
+  {
+    value: 'CAD',
+    label: 'CAD'
+  },
+  {
+    value: 'MYR',
+    label: 'MYR'
+  },
+  {
+    value: 'KRW',
+    label: 'KRW'
+  },
+  {
+    value: 'JPY',
+    label: 'JPY'
+  },
+  {
+    value: 'CNY',
+    label: 'CNY'
+  }
+]
+// 汇率校验
+const checkFreeGoldRadio = function (rule, value, callback) {
+  if (value == '0' || value == null || value == '') {
+    callback(new Error('请输入汇率比'))
+  } else if (value < 0 || isNaN(value)) {
+    callback(new Error('请输入正确的格式'))
+  } else {
+    callback()
+  }
+}
+// 定义表单验证规则
+const rules = reactive({
+  num: [{validator: checkFreeGoldRadio, trigger: 'blur'}],
+})
+// 表单大小
+const formSize = ref('default')
+const getAllRate = async function (val) {
+  try {
+    const result = await request({
+      url: '/rate/selectAll',
+      method: 'POST',
+      data: {
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize,
+      }
+    })
+    console.log('这是汇率列表 请求成功', result)
+    tableData.value = result.data.list
+    total.value = result.data.total
+  } catch (error) {
+    console.log('请求失败', error);
+    ElMessage.error('请求失败');
+  }
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  getAllRate()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  getAllRate()
+}
+const getEditData = async function (row) {
+  try {
+    console.log('搜索参数', getObj.value)
+    const result = await request({
+      url: '/rate/selectById',
+      data: {id: row.id}
+    })
+    console.log('根据id查 请求成功', result)
+    rateEdit.value.id = row.id
+    rateEdit.value.rateName = row.rateName
+    rateEdit.value.num = row.num
+    console.log('根据id获取的数据', rateEdit.value)
+    rateEdit.value.adminId = adminData.value.id
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+const hasrateShow = ref(false)
+const hasrateEdit = ref(false)
+
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
+  hasrateShow.value = hasMenuPermission(menuTree.value, permissionMapping.rateShow);
+  hasrateEdit.value = hasMenuPermission(menuTree.value, permissionMapping.rateEdit);
 
-  <el-button type="success" @click="showAdd = true" style="margin-top: 1vh;">新增活动</el-button>
+};
+// 编辑汇率
+const editRate = async function () {
+  if (!hasrateEdit) {
+    ElMessage.error('暂无权限')
+    return
+  }
+  // 提交前验证 汇率是否为数字
+  rateEdit.value.num = parseFloat(rateEdit.value.num);
+  try {
+    console.log('搜索参数', rateEdit.value)
+    const result = await request({
+      url: '/rate/update',
+      data: rateEdit.value
+    })
+    console.log('请求成功', result)
+    await getAllRate()
+  } catch (error) {
+    console.log('请求失败', error)
+  }
 
-  <el-card style="margin-top: 1vh;">
-    <el-table :data="tableData" style="width: 82vw;" :row-style="{ height: '50px' }">
+}
+// 添加前验证
+const edit = () => {
+  editFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        await ElMessageBox.confirm("确认修改？");
+        await editRate();
+        console.log("修改成功");
+        regeEdit.value = false;
+      } catch (error) {
+        console.log("取消修改", error);
+        regeEdit.value = false;
+      }
+    } else {
+      ElMessage({
+        type: "error",
+        message: "请检查输入内容",
+      })
+    }
+  })
+}
+const cancelEdit = () => {
+  regeEdit.value = false
+}
+const handleEditDialogClose = () => {
+  if (editFormRef.value) {
+    getAllRate()
+  }
+}
+
+// 日期格式化
+function formatDate(value) {
+  if (!value) return ''
+  const date = new Date(value)
+  const year = date.getFullYear()
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const day = date.getDate().toString().padStart(2, '0')
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const seconds = date.getSeconds().toString().padStart(2, '0')
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
+// 输入框过滤
+function handleInput(value) {
+  // 检查是否使用了中文句号
+  if (value.includes('。') || /[^\d.]/g.test(value)) {
+    ElMessage.warning('请输入正确的符号');
+    // value = value.replace('。', '.');
+  }
+  // 处理多个小数点的情况，保留第一个，移除后续的
+  const parts = value.split('.');
+  if (parts.length > 2) {
+    value = parts[0] + '.' + parts.slice(1).join('');
+    ElMessage.warning('只能包含一个小数点');
+  }
+  // 禁止输入负数
+  if (value.startsWith('-')) {
+    ElMessage.warning('不允许输入负数');
+    value = value.substring(1);
+  }
+  // 最多两位小数，超过时才显示提示
+  if (value.includes('.')) {
+    const parts = value.split('.')
+    // 限制整数部分最多六位
+    if (parts[0].length > 6) {
+      parts[0] = parts[0].slice(0, 6)
+      ElMessage.info('整数部分最多允许六位')
+    }
+    // 限制小数部分最多两位
+    if (parts[1].length > 7) {
+      parts[1] = parts[1].slice(0, 7)
+      value = parts[0] + '.' + parts[1]
+      ElMessage.info('最多允许七位小数')
+    } else {
+      value = parts[0] + '.' + parts[1]
+    }
+  } else {
+    // 纯整数时限制最多六位
+    if (value.length > 6) {
+      value = value.slice(0, 6)
+      ElMessage.info('整数部分最多允许六位')
+    }
+  }
+  // 小数点前没有数字时补0
+  if (value.startsWith('.')) {
+    value = '0' + value;
+    // 需求没有，注释，先不显示
+    // ElMessage.info('已自动补充前导0');
+  }
+  // 更新表单值
+  rateEdit.value.num = value
+
+  return value
+}
+
+onMounted(async function () {
+  initPermissions()
+  await getAllRate()
+})
+</script>
+
+<template>
+  <el-card class="card2" style="width:82vw;height:85vh" v-if="hasrateShow">
+    <el-table :data="tableData" v-if="(tableData.flag = 1)">
       <el-table-column type="index" label="序号" width="100px" fixed="left">
         <template #default="scope">
-          <span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span>
+          <span>{{
+              scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+            }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="活动名称" width="150px" show-overflow-tooltip />
-      <el-table-column prop="jwcode" label="业绩归属地" width="150px" />
-      <el-table-column prop="market" label="归属地" width="150px" />
-      <el-table-column prop="payTime" label="开始时间" width="200px">
+      <el-table-column prop="rateName" label="货币名称" :span="2"/>
+      <el-table-column prop="num" label="汇率" :span="2">
         <template #default="scope">
-          {{ moment(scope.row.payTime).format('YYYY-MM-DD HH:mm:ss') }}
+          <p>
+            {{ scope.row.num }} ：1
+          </p>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="结束时间" width="200px">
+
+      <el-table-column prop="updateTime" label="更新时间" :span="3">
         <template #default="scope">
-          {{
-            activeName === 'wait'
-              ? moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss')
-              : moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')
-          }}
+          <span>{{ formatDate(scope.row.updateTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="market" label="状态" width="150px" />
-      <el-table-column prop="operation" label="操作" width="150px">
+      <el-table-column v-if="hasrateEdit" label="操作" :span="3">
+        <template #default="scope">
+          <el-link :underline="false" class="edit-btn" @click="() => {
+            regeEdit = true
+            getEditData(scope.row)
+          }">编辑
+          </el-link>
+        </template>
       </el-table-column>
     </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+                     @current-change="handleCurrentChange"></el-pagination>
+    </div>
   </el-card>
 
-  <el-dialog v-model="showAdd" width="20vw" draggable align-center style="background-color: rgb(243,250,254);">
-    <div class="add-item">
-        <el-text size="large">活动名称：</el-text>
-        <el-input v-model="addForm.activity" style="width: 12vw" placeholder="请输入活动名称" clearable />
-      </div>
-      <div class="add-item">
-        <el-text size="large">业绩归属：</el-text>
-        <el-input v-model="addForm.achievement" style="width: 12vw" placeholder="请输入业绩归属" clearable />
-      </div>
-      <div class="add-item">
-        <el-text size="large">开始时间：</el-text>
-        <el-date-picker v-model="addForm.startTime" type="datetime" placeholder="请选择付款时间" :default-time="defaultTime" style="width: 12vw" />
-      </div>
-      <div class="add-item">
-        <el-text size="large">结束时间：</el-text>
-        <el-date-picker v-model="addForm.endTime" type="datetime" placeholder="请选择付款时间" :default-time="defaultTime" style="width: 12vw" />
-      </div>
-      <div style="display: flex; justify-content: center; margin-top: 5vh;">
-        <el-button type="primary" @click="">取消</el-button>
-        <el-button type="primary" @click="">确定</el-button>
-      </div>
+  <!-- 这是编辑弹窗 -->
+  <el-dialog align-center v-model="regeEdit" title="修改汇率" width="30vw" :close-on-click-modal="false"
+             @close="handleEditDialogClose">
+    <el-form ref="editFormRef" :model="rateEdit" :rules="rules" label-width="auto" class="edit-form" :size="formSize"
+             status-icon>
+      <el-form-item prop="rateName" label="货币名称:">
+        <el-input v-model="rateEdit.rateName" disabled style="width: 10vw"/>
+      </el-form-item>
+
+      <el-form-item prop="num" label="汇率:">
+        <el-input v-model="rateEdit.num" @update:modelValue="handleInput" style="width: 120px"/>
+        <span class="unit">:1</span>
+        <span class="rate-tip">
+          (提示：当前规则每
+          <span>{{ rateEdit.num }}</span>
+          <span>{{ rateEdit.rateName }}</span>可兑换 1 新币)
+        </span>
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="edit">修改</el-button>
+      <el-button @click="cancelEdit">取消</el-button>
+    </div>
   </el-dialog>
 </template>
-<script setup>
-import { ElPagination } from 'element-plus';
-import { ref } from 'vue'
 
-const tableData = ref([])
-const pagination = ref({
-  pageNum: 1,
-  pageSize: 10,
-  total: 0
-})
-const searchForm = ref({
-  activity: ''
-})
-const showAdd = ref(false)
-const addForm = ref({
-  activity: '',
-  achievement: '',
-  startTime: '',
-  endTime: ''
-})
-</script>
-<style>
-.condition {
-  display: flex;
-  align-items: center;
+
+<style scoped>
+
+.card1 {
+  background: #F3FAFE;
 }
 
-.condition-item1 {
-  display: flex;
-  align-items: center;
-  width: 15vw;
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+  /* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
 }
 
-.condition-item2 {
+
+.pagination {
+  margin-top: 20px;
   display: flex;
-  align-items: center;
-  width: 17vw;
 }
 
-.add-item{
+.edit-form {
+  width: 35vw;
+  height: 13vh;
+}
+
+.dialog-footer {
   display: flex;
-  align-items: center;
-  width: 17vw;
-  margin-bottom: 1vh;
+  margin-left: 5vw;
+}
+
+.unit {
+  margin-left: 0.5vw;
+}
+
+.rate-tip {
+  hyphens: auto;
+}
+
+/**表单的卡片样式**/
+.card2 {
+  background: #E7F4FD;
 }
+
+
+/**表头背景等**/
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+  /* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
 </style>
\ No newline at end of file