style：驳回的对话框新增完毕，页码的样式修正

1 month ago · 3a33ba5eb2
3 changed files with 93 additions and 44 deletions
--- a/src/views/audit/bean/beanAudit.vue
+++ b/src/views/audit/bean/beanAudit.vue
@ -101,12 +101,14 @@
        </template>
      </el-table-column>
    </el-table>
-    <el-pagination style="margin-top:20px" v-model:current-page="pagination.pageNum"
-      v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="stats.num"
-      @size-change="handlePageSizeChange" @current-change="handleCurrentChange"></el-pagination>
+    <div class="pagination">
+      <el-pagination background v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="stats.num" @size-change="handlePageSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
+    </div>
  </el-card>

-  <el-dialog v-model="rejectVisible" title="驳回理由" width="500px">
+  <!-- <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
    <el-form>
      <el-form-item label="驳回理由" required>
        <el-input v-model="reason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" show-word-limit />
@ -114,19 +116,17 @@
    </el-form>
    <template #footer>
      <span class="dialog-footer">
-        <el-button @click="rejectVisible = false">取消</el-button>
+        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleReject()">确定</el-button>
      </span>
    </template>
-  </el-dialog>
+  </el-dialog> -->
+
+  <ConfirmDialog v-model="rejectDialogVisible" message="驳回该记录！" @confirm="handleReject" @cancel="handleRejectCancel"
+    @close="handleRejectClose" />

-  <ConfirmDialog 
-    v-model="approveDialogVisible"
-    message="通过该记录!"
-    @confirm="handleApproveConfirm"
-    @cancel="handleApproveCancel"
-    @close="handleApproveClose"
-  />
+  <ConfirmDialog v-model="approveDialogVisible" message="通过该记录!" @confirm="handleApproveConfirm"
+    @cancel="handleApproveCancel" @close="handleApproveClose" />


 </template>
@ -156,7 +156,7 @@ const activeTimeRange = ref('')
 const sortField = ref('')
 const sortOrder = ref('')
 const checkTab = ref('pending')
-const rejectVisible = ref(false)
+const rejectDialogVisible = ref(false)
 const reason = ref('')
 const rejectRow = ref({
  id: null
@ -380,7 +380,7 @@ const handleReject = async () => {
    }
    await API({ url: '/beanAudit/status2', data: params })
    ElMessage.success('驳回成功')
-    rejectVisible.value = false
+    rejectDialogVisible.value = false
    await get()
    cancelClicked.value = false
    await getStats()
@ -389,6 +389,30 @@ const handleReject = async () => {
    ElMessage.error('操作失败')
  }
 }
+// 处理驳回取消操作
+const handleRejectCancel = () => {
+  rejectDialogVisible.value = false
+}
+// 处理驳回关闭操作
+const handleRejectClose = () => {
+  rejectDialogVisible.value = false
+}
+// 这个防抖好像还不能放在定义之前（handleApproveConfirm）
+const throttledHandleApprove = _.throttle(handleApproveConfirm, 5000, {
+  trailing: false
+})
+// 显示驳回对话框
+const showRejectDialog = (row) => {
+  if (!hasbeanWaitReject) {
+    ElMessage.error('暂无权限')
+    return
+  }
+  rejectRow.value.id = row.id
+  reason.value = ''
+  rejectDialogVisible.value = true
+}
+
+
 const getToday = async function () {
  const today = dayjs()
  const startTime = today.startOf('day').format('YYYY-MM-DD HH:mm:ss')
@ -507,19 +531,7 @@ const format3 = (num) => {
  // 每三位添加逗号
  return num.toLocaleString('en-US')
 }
-// 这个防抖好像还不能放在定义之前（handleApproveConfirm）
-const throttledHandleApprove = _.throttle(handleApproveConfirm, 5000, {
-  trailing: false
-})
-const showRejectDialog = (row) => {
-  if (!hasbeanWaitReject) {
-    ElMessage.error('暂无权限')
-    return
-  }
-  rejectRow.value.id = row.id
-  reason.value = ''
-  rejectVisible.value = true
-}
+
 // 获取地区，修改为级联下拉框
 const getmarkets = async function () {
  try {
@ -570,6 +582,11 @@ onMounted(async () => {
 </script>

 <style scoped lang="scss">
+.pagination {
+  display: flex;
+  margin-top: 1vh;
+}
+
 /* 搜索的卡片样式 */
 .card1 {
  background: #F3FAFE;
--- a/src/views/audit/gold/rechargeAudit.vue
+++ b/src/views/audit/gold/rechargeAudit.vue
@ -166,7 +166,7 @@
    </div>
  </el-card>

-  <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
+  <!-- <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
    <el-form>
      <el-form-item label="驳回理由" required>
        <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
@ -179,7 +179,14 @@
        <el-button :disabled="cancelClicked" type="primary" @click="handleReject">确定</el-button>
      </span>
    </template>
-  </el-dialog>
+  </el-dialog> -->
+  <ConfirmDialog
+    v-model="rejectDialogVisible"
+    message="驳回该记录！"
+    @confirm="handleReject"
+    @cancel="handleRejectCancel"
+    @close="handleRejectClose"
+    />

  <!-- 新增：使用ConfirmDialog组件 -->
  <ConfirmDialog 
@ -661,6 +668,7 @@ const showRejectDialog = (row) => {
 const cancelClicked = ref(false)
 // 处理驳回操作
 const handleReject = async () => {
+  // 在showRejectDialog已经添加过了权限检查，此处应该是可以不用添加的
   if(!hasrechargeWaitReject){
      ElMessage.error('暂无权限')
      return
@ -690,6 +698,14 @@ const handleReject = async () => {
      ElMessage.error('操作失败')
    }
 }
+// 处理驳回取消操作
+const handleRejectCancel = () => {
+  rejectDialogVisible.value = false
+}
+// 处理驳回关闭操作
+const handleRejectClose = () => {
+  rejectDialogVisible.value = false
+}
 // 处理排序事件
 const handleSortChange = (column) => {
  console.log('排序字段：', column.prop)
--- a/src/views/audit/gold/refundAudit.vue
+++ b/src/views/audit/gold/refundAudit.vue
@ -148,12 +148,12 @@
        </template>
      </el-table-column>
    </el-table>
-    <el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+    <el-pagination class="pagination" background v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handlePageSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
  </el-card>

-  <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
+  <!-- <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
    <el-form>
      <el-form-item label="驳回理由" required>
        <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
@ -166,7 +166,15 @@
        <el-button type="primary" @click="handleReject">确定</el-button>
      </span>
    </template>
-  </el-dialog>
+  </el-dialog> -->
+
+  <ConfirmDialog
+    v-model="rejectDialogVisible"
+    message="驳回该记录！"
+    @confirm="handleReject"
+    @cancel="handleRejectCancel"
+    @close="handleRejectClose"
+    />

  <!-- 新增：使用ConfirmDialog组件 -->
  <ConfirmDialog 
@ -296,16 +304,7 @@ const handleSortChange = (column) => {
  console.log('排序方式：', sortOrder.value)
  get()
 }
-// 显示驳回对话框
-const showRejectDialog = (row) => {
-  if (!hasrefundWaitReject) {
-    ElMessage.error('暂无权限')
-    return
-  }
-  currentRecord.value = row
-  rejectReason.value = ''
-  rejectDialogVisible.value = true
-}
+
 // 查商品名
 const getRefundGoods = async () => {
  try {
@ -405,7 +404,16 @@ const handleApproveCancel = () => {
 const handleApproveClose = () => {
  approveDialogVisible.value = false
 }
-
+// 显示驳回对话框
+const showRejectDialog = (row) => {
+  if (!hasrefundWaitReject) {
+    ElMessage.error('暂无权限')
+    return
+  }
+  currentRecord.value = row
+  rejectReason.value = ''
+  rejectDialogVisible.value = true
+}
 //控制驳回确认按钮禁用状态
 const cancelClicked = ref(false)
 // 处理驳回操作
@ -439,6 +447,14 @@ const handleReject = async () => {
    ElMessage.error('操作失败')
  }
 }
+// 处理驳回取消操作
+const handleRejectCancel = () => {
+  rejectDialogVisible.value = false
+}
+// 处理驳回关闭操作
+const handleRejectClose = () => {
+  rejectDialogVisible.value = false
+}

 const getStats = async () => {
  if (!hasrefundWaitShow) {