From 28d7320edd0026a7e039249ccabe99d0e41f45c1 Mon Sep 17 00:00:00 2001
From: donghaolin <17667510818@163.com>
Date: Sat, 30 Nov 2024 11:39:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BC=E6=A8=A1=E5=9D=97=E5=AE=8C?=
 =?UTF-8?q?=E7=BE=8E=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/gold-system/src/views/managerecharge/rate.vue  | 93 ++++++++++++++++++----
 vue/gold-system/src/views/recharge/addRecharge.vue | 51 +++++++++---
 2 files changed, 117 insertions(+), 27 deletions(-)

diff --git a/vue/gold-system/src/views/managerecharge/rate.vue b/vue/gold-system/src/views/managerecharge/rate.vue
index 5af05a2..47d7607 100644
--- a/vue/gold-system/src/views/managerecharge/rate.vue
+++ b/vue/gold-system/src/views/managerecharge/rate.vue
@@ -1,7 +1,8 @@
 <script setup>
-  import { ref, onMounted} from 'vue'
+  import { ref, onMounted,computed,reactive} from 'vue'
   import { ElMessageBox } from 'element-plus'
   import axios from 'axios'
+  import { createApp } from 'vue';
 
   const regeAdd = ref(false)
   const regeEdit = ref(false)
@@ -41,6 +42,7 @@ const get = async function () {
   // 添加方法
   const rateAdd = ref({})
   const addRate = async function () {
+
     try {
         console.log('搜索参数', getObj.value);
         // 发送POST请求
@@ -53,8 +55,11 @@ const get = async function () {
         console.log('请求失败', error);
         // 在这里可以处理错误逻辑，比如显示错误提示等
     }
+ 
 }
   const add = () => {
+    Ref.value.validate(async (valid) => {
+      if (valid) {
     ElMessageBox.confirm('确认添加？').then(() => {
       addRate();
       rateAdd.value = {}
@@ -65,9 +70,18 @@ const get = async function () {
       regeAdd.value = false
     }).catch(() => {
       regeAdd.value = false
+    }) } else {
+            //提示
+            ElMessage({
+                type: 'error',
+                message: '请检查输入内容',
+            })
+        }
+
     })
   }
 
+
   // 编辑方法
 const rateEdit = ref({})
 //查询已有的数据
@@ -168,7 +182,7 @@ function handleDateChange(value) {
       console.log(value1);
     }
 
-filters: {
+
   function formatDate(value) {
     if (!value) return '';
     const date = new Date(value);
@@ -180,8 +194,48 @@ filters: {
     const seconds = date.getSeconds().toString().padStart(2, '0');
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   }
-}
 
+
+//表格高度
+const tableHeight = computed(function () {
+    return (getObj.value.pageSize + 1) * 50 + 'px';
+});
+
+// 新增数据规则
+// 表单验证ref
+const Ref = ref(null);
+const handleStartTimeChange = () => {
+    Ref.value.validateField('endTime');
+};
+const checkStartTime = function (rule, value, callback) {
+    if (value <= new Date()) {
+        callback(new Error('开始时间不能小于当前时间'))
+    } else {
+        callback()
+    }
+}
+const checkEndTime = function (rule, value, callback) {
+    if (value <= new Date()) {
+        callback(new Error('结束时间不能小于当前时间'))
+    } else if (value <= addObj.value.startTime) {
+        callback(new Error('结束时间不能小于开始时间'))
+    } else {
+        callback()
+    }
+}
+const rules = reactive({
+     currency: [{ required: true, message: '请选择货币名称', trigger: 'blur' },],
+     exchangeRate: [{ required: true, message: '请输入汇率', trigger: 'blur' },],
+     updateName: [{ required: true, message: '请输入添加人', trigger: 'blur' },],
+    startTime: [
+        { required: true, message: '请选择开始时间', trigger: 'blur' },
+        { validator: checkStartTime, trigger: 'blur' },
+    ],
+    endTime: [
+        { required: true, message: '请选择结束时间', trigger: 'blur' },
+        { validator: checkEndTime, trigger: 'blur' },
+    ],
+})
 </script>
 
 <template>
@@ -221,14 +275,20 @@ filters: {
             </div>
             <!-- 表格 -->
             <div>
-              <el-table :data="tableData" v-if="tableData.flag=1" style="width: 100%" >
+              <el-table :data="tableData" v-if="tableData.flag=1"  :height="tableHeight" style="width: 100%" >
                 <el-table-column prop="currency" label="货币名称" :span="3" />
                 <el-table-column prop="exchangeRate" label="汇率" :span="3"/>
-                <el-table-column prop="createTime"  label="添加时间" :span="5"/>
-                <el-table-column prop="createTime" label="添加时间" :span="5"/>
-    
-                <el-table-column prop="updateTime" label="更新时间" :span="5"/>
 
+                <el-table-column prop="createTime" label="添加时间" :span="5">
+                  <template #default="scope">
+                    <span>{{ formatDate(scope.row.createTime) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="updateTime" label="更新时间" :span="5">
+                  <template #default="scope">
+                    <span>{{ formatDate(scope.row.updateTime) }}</span>
+                  </template>
+                </el-table-column>
                 <el-table-column prop="updateName" label="更新人" :span="4"/>
                 <el-table-column label="操作" :span="4">
                   <template #default="scope">
@@ -260,7 +320,7 @@ filters: {
     >
       <template #footer>
         <el-form
-        ref="ruleFormRef"
+        ref="Ref"
         style="max-width: 600px"
         :model="rateAdd"
         :rules="rules"
@@ -269,7 +329,7 @@ filters: {
         :size="formSize"
         status-icon
       >
-        <el-form-item label="货币名称:">
+        <el-form-item prop="currency" label="货币名称:">
           <el-select v-model.number="rateAdd.currency" placeholder="请选择" style="width: 240px">
             <el-option
             v-for="item in options"
@@ -279,28 +339,29 @@ filters: {
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="汇率:">
+        <el-form-item prop="exchangeRate" label="汇率:">
           <el-input v-model="rateAdd.exchangeRate" style="width: 120px;"/><p class="unit">:1</p>
           <p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p>
         </el-form-item>
-        <el-form-item label="提交人:">
+        <el-form-item prop="updateName" label="提交人:">
           <el-input v-model="rateAdd.updateName" style="width: 240px;"/>
         </el-form-item>
-        <el-form-item label="开始时间:">
+        <el-form-item prop="startTime" label="开始时间:">
           <el-date-picker
         v-model="rateAdd.startTime"
         type="date"
         placeholder="请选择时间"
-        :default-value="new Date(2010, 9, 1)"
+        :default-value="new Date"
+        @change="handleStartTimeChange"
         value-format="YYYY-MM-DD"
       />
         </el-form-item>
-        <el-form-item label="结束时间:">
+        <el-form-item prop="endTime" label="结束时间:">
           <el-date-picker
           v-model="rateAdd.endTime"
           type="date"
           placeholder="请选择时间"
-          :default-value="new Date(2010, 9, 1)"
+          :default-value="new Date"
           value-format="YYYY-MM-DD"
         />
         </el-form-item>
diff --git a/vue/gold-system/src/views/recharge/addRecharge.vue b/vue/gold-system/src/views/recharge/addRecharge.vue
index fc0497f..e7c0ad4 100644
--- a/vue/gold-system/src/views/recharge/addRecharge.vue
+++ b/vue/gold-system/src/views/recharge/addRecharge.vue
@@ -34,6 +34,8 @@ const add = async function () {
     }
 }
 const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
     ElMessageBox.confirm('确认添加？').then(() => {
       add();
       console.log('添加成功');
@@ -41,9 +43,36 @@ const addBefore = () => {
       addRecharge.value = {};
     }).catch(() => {
       console.log('取消添加');
+    }) } else {
+            //提示
+            ElMessage({
+                type: 'error',
+                message: '请检查输入内容',
+            })
+        }
     })
   }
 
+  // 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null);
+const checkEndTime = function (rule, value, callback) {
+    if (value <= new Date()) {
+        callback(new Error('付款时间不能小于当前时间'))
+    } 
+}
+const rules = reactive({
+    homilyId: [{ required: true, message: '请输入精网号', trigger: 'blur' },],
+    activityId: [{ required: true, message: '请选择活动名称', trigger: 'blur' },],
+    paidGold: [{ required: true, message: '请输入充值金币', trigger: 'blur' },],
+    rechargeGold: [{ required: true, message: '请输入充值金额', trigger: 'blur' },],
+    payWay: [{ required: true, message: '请选择付款方式', trigger: 'blur' },],
+    rechargeTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' },
+    { validator: checkEndTime, trigger: 'blur' },
+    ],
+   
+})
+
 // 查找客户信息的方法
 const user = ref({});
 const getUser = async function (homilyId) {
@@ -158,12 +187,12 @@ watch(calculatedFreeGold, (newVal) => {
     新增充值
   </div>
 
-  <el-form :model="addRecharge" label-width="auto" style="max-width: 600px">
-    <el-form-item label="精网号">
+  <el-form :model="addRecharge" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
+    <el-form-item prop="homilyId" label="精网号">
       <el-input v-model="addRecharge.homilyId" style="width: 220px;" />
       <el-button type="primary" @click="getUser(addRecharge.homilyId)" style="margin-left: 20px;">查询</el-button>
     </el-form-item>
-    <el-form-item label="活动名称">
+    <el-form-item prop="activityId" label="活动名称">
       <el-select v-model="addRecharge.activityId" placeholder="请选择" style="width: 300px">
         <el-option
         v-for="item in activity"
@@ -173,14 +202,14 @@ watch(calculatedFreeGold, (newVal) => {
         />
       </el-select>
     </el-form-item>
-    <el-form-item label="充值金币">
+    <el-form-item prop="paidGold" label="充值金币">
       <el-input v-model="addRecharge.paidGold" style="width: 100px;"/>
       <p style="margin-right: 20px;">个</p>
       <p>免费金币</p>
       <el-input v-model="addRecharge.freeGold" disabled :value="addRecharge.paidGold * addRecharge.activityId" style="width: 100px" />
       <p>个</p>
     </el-form-item>
-    <el-form-item label="充值金额">
+    <el-form-item prop="rechargeGold" label="充值金额">
       <el-select v-model="addRecharge.rateId" placeholder="货币名称" style="width: 95px;margin-right: 5px;">
         <el-option
         v-for="item in currency"
@@ -189,9 +218,9 @@ watch(calculatedFreeGold, (newVal) => {
         :value="item.rateId"
         />
       </el-select>
-      <el-input v-model="addRecharge.rechargeGold" style="width: 200px;"/>
+      <el-input  v-model="addRecharge.rechargeGold" style="width: 200px;"/>
     </el-form-item>
-    <el-form-item label="收款方式">
+    <el-form-item prop="payWay" label="收款方式">
       <el-select v-model="addRecharge.payWay" placeholder="请选择" style="width: 300px">
         <el-option
         v-for="item in options"
@@ -201,14 +230,14 @@ watch(calculatedFreeGold, (newVal) => {
         />
       </el-select>
     </el-form-item>
-    <el-form-item label="交款时间">
+    <el-form-item prop="rechargeTime" label="交款时间">
       <el-date-picker
         v-model="addRecharge.rechargeTime"
         type="date"
         style="width: 300px;"
       />
     </el-form-item>
-    <el-form-item label="交款凭证" style="margin-bottom: 5px;">
+    <el-form-item prop="rechargeVoucher" label="交款凭证" style="margin-bottom: 5px;">
       <el-upload 
       class="avatar-uploader"
       action="http://192.168.8.93:10010/upload"
@@ -221,7 +250,7 @@ watch(calculatedFreeGold, (newVal) => {
     </el-upload>
     <p style="margin-left: 10px;color: rgb(177, 176, 176);">仅支持.jpg .png格式，文件≤1MB</p>
     </el-form-item>
-    <el-form-item label="备注">
+    <el-form-item prop="remark" label="备注">
       <el-input
     v-model="addRecharge.remark"
     style="width: 300px"
@@ -232,7 +261,7 @@ watch(calculatedFreeGold, (newVal) => {
   />
       
     </el-form-item>
-    <el-form-item label="提交人">
+    <el-form-item prop="submitter" label="提交人">
       <el-input style="width: 300px" value="张三" disabled placeholder="提交人姓名"/>
     </el-form-item>
   </el-form>