huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style: 分页激活的按钮样式

milestone-20250913-现金管理
lihui 2 days ago
parent
0bb4fc0e3b
commit
b3d8a36a81
4 changed files with 91 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/css/btn.css
  2. 8
      src/views/audit/bean/beanAudit.vue
  3. 102
      src/views/audit/gold/refundAudit.vue
  4. 4
      src/views/managerecharge/rate.vue

35
src/css/btn.css
View File

@ -37,12 +37,37 @@ v-if="hasRecharge"
border-color: transparent; border-color: transparent;
} }
} }
/** ----------------------------------**/
/** 通过驳回按钮 使用的是el-link **/
.pass-btn { .pass-btn {
color: #2741DE ;
margin-right: 5px
color: #2741DE;
margin-right: 5px;
} }
.reject-btn { .reject-btn {
color: #2741DE ;
margin-left: 5px
color: #2741DE;
margin-left: 5px;
}
/* 清除hover状态的样式变化 */
.pass-btn:hover,
.reject-btn:hover {
color: #2741DE; /* 保持与默认状态相同的颜色 */
}
/** ----------------------------------**/
/** ----------------------------------**/
/** 编辑 按钮 使用的是el-link **/
.edit-btn {
color: #2741DE;
}
.edit-btn:hover{
color: #2741DE; /* 保持与默认状态相同的颜色 */
}
/** ----------------------------------**/
/** ----------------------------------**/
.el-pagination .el-pager li.is-active {
background-color: #2741DE !important;
color: #FFFFFF !important;
} }

8
src/views/audit/bean/beanAudit.vue
View File

@ -78,9 +78,9 @@
<div class="operation"> <div class="operation">
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)"> <el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
<template #reference> <template #reference>
<el-button v-if="hasbeanWaitThough" :disabled="clicked || cancelClicked" type="primary" text>
<el-link :underline="false" class="pass-btn" v-if="hasbeanWaitThough" :disabled="clicked || cancelClicked" type="primary">
通过 通过
</el-button>
</el-link>
</template> </template>
<template #actions="{ confirm }"> <template #actions="{ confirm }">
<el-button size="small">取消</el-button> <el-button size="small">取消</el-button>
@ -89,10 +89,10 @@
</el-button> </el-button>
</template> </template>
</el-popconfirm> </el-popconfirm>
<el-button v-if="hasbeanWaitReject" :disabled="clicked || cancelClicked" type="primary" text
<el-link :underline="false" class="reject-btn" v-if="hasbeanWaitReject" :disabled="clicked || cancelClicked" type="primary"
@click="showRejectDialog(scope.row)"> @click="showRejectDialog(scope.row)">
驳回 驳回
</el-button>
</el-link>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>

102
src/views/audit/gold/refundAudit.vue
View File

@ -4,7 +4,7 @@
<div class="select"> <div class="select">
<div class="selectRow"> <div class="selectRow">
<el-text class="text" size="large">精网号：</el-text> <el-text class="text" size="large">精网号：</el-text>
<el-input class="selectContent" v-model="searchForm.jwcode" placeholder="请输入精网号" clearable />
<el-input class="selectContent" v-model="searchForm.jwcode" placeholder="请输入精网号" clearable/>
</div> </div>
<div class="selectRow"> <div class="selectRow">
<el-text class="text" size="large">商品名称：</el-text> <el-text class="text" size="large">商品名称：</el-text>
@ -15,14 +15,14 @@
<div class="selectRow"> <div class="selectRow">
<el-text class="text" size="large">退款类型：</el-text> <el-text class="text" size="large">退款类型：</el-text>
<el-select class="selectContent" v-model="searchForm.refundType" placeholder="请选择退款类型" clearable> <el-select class="selectContent" v-model="searchForm.refundType" placeholder="请选择退款类型" clearable>
<el-option label="商品退款" value="商品退款" />
<el-option label="金币退款" value="金币退款" />
<el-option label="商品退款" value="商品退款"/>
<el-option label="金币退款" value="金币退款"/>
</el-select> </el-select>
</div> </div>
<div class="selectRow"> <div class="selectRow">
<el-text class="text" size="large">所属地区：</el-text> <el-text class="text" size="large">所属地区：</el-text>
<el-cascader class="selectContent" style="width: 12vw;" v-model="selectedMarketPath" :options="market" <el-cascader class="selectContent" style="width: 12vw;" v-model="selectedMarketPath" :options="market"
placeholder="请选择所属地区" clearable @change="handleMarketChange" />
placeholder="请选择所属地区" clearable @change="handleMarketChange"/>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -33,8 +33,8 @@
{{ activeName === 'wait' ? '提交时间：' : '审核时间：' }} {{ activeName === 'wait' ? '提交时间：' : '审核时间：' }}
</el-text> </el-text>
<el-date-picker class="selectContent" v-model="dateRange" type="datetimerange" range-separator="至" <el-date-picker class="selectContent" v-model="dateRange" type="datetimerange" range-separator="至"
start-placeholder="起始时间" end-placeholder="结束时间" style="margin-right:1vw;width:25vw"
@change="handleDatePickerChange" :default-time="defaultTime" :disabled-date="disabledDate" />
start-placeholder="起始时间" end-placeholder="结束时间" style="margin-right:1vw;width:25vw"
@change="handleDatePickerChange" :default-time="defaultTime" :disabled-date="disabledDate"/>
<div v-if="false"> <div v-if="false">
<el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button> <el-button @click="getToday()" :type="activeTimeRange === 'today' ? 'primary' : ''">今</el-button>
<el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''">昨</el-button> <el-button @click="getYesterday()" :type="activeTimeRange === 'yesterday' ? 'primary' : ''">昨</el-button>
@ -57,7 +57,8 @@
</el-tabs> </el-tabs>
<div class="goldStatistics"> <div class="goldStatistics">
退款总金币数：{{ format3((stats.permanentGolds + stats.freeGolds + stats.taskGolds).toFixed(2))
退款总金币数：{{
format3((stats.permanentGolds + stats.freeGolds + stats.taskGolds).toFixed(2))
}}金币&nbsp;&nbsp;&nbsp;&nbsp; }}金币&nbsp;&nbsp;&nbsp;&nbsp;
永久金币：{{ format3(stats.permanentGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp; 永久金币：{{ format3(stats.permanentGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
免费金币：{{ format3(stats.freeGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp; 免费金币：{{ format3(stats.freeGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
@ -65,19 +66,19 @@
</div> </div>
<el-table :data="tableData" style="height:54vh;width:82vw" @sort-change="handleSortChange"> <el-table :data="tableData" style="height:54vh;width:82vw" @sort-change="handleSortChange">
<el-table-column type="index" label="序号" width="60" />
<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="orderCode" label="订单号" width="260px" show-overflow-tooltip />
<el-table-column type="index" label="序号" width="60"/>
<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="orderCode" label="订单号" width="260px" show-overflow-tooltip/>
<el-table-column prop="refundType" label="退款类型" width="120" />
<el-table-column prop="refundType" label="退款类型" width="120"/>
<el-table-column prop="refundModel" label="退款方式" width="120"> <el-table-column prop="refundModel" label="退款方式" width="120">
<template #default="{ row }"> <template #default="{ row }">
{{ row.refundModel === 0 ? '全部退款' : '部分退款' }} {{ row.refundModel === 0 ? '全部退款' : '部分退款' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="goodsName" label="退款商品" width="120" show-overflow-tooltip />
<el-table-column prop="goodsName" label="退款商品" width="120" show-overflow-tooltip/>
<el-table-column prop="sumGold" label="退款金币总数" width="160" sortable="custom"> <el-table-column prop="sumGold" label="退款金币总数" width="160" sortable="custom">
<template #default="{ row }"> <template #default="{ row }">
{{ row.sumGold / 100 }} {{ row.sumGold / 100 }}
@ -98,17 +99,17 @@
{{ row.taskGold / 100 }} {{ row.taskGold / 100 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
<el-table-column prop="adminName" label="提交人" width="120" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip/>
<el-table-column prop="adminName" label="提交人" width="120"/>
<el-table-column v-if="checkTab === 'reject'" prop="rejectReason" label="驳回理由" width="150" <el-table-column v-if="checkTab === 'reject'" prop="rejectReason" label="驳回理由" width="150"
show-overflow-tooltip />
<el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120" />
show-overflow-tooltip/>
<el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120"/>
<el-table-column prop="createTime" label="提交时间" width="180" sortable="custom"> <el-table-column prop="createTime" label="提交时间" width="180" sortable="custom">
<template #default="{ row }"> <template #default="{ row }">
{{ {{
checkTab === 'pending' checkTab === 'pending'
? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss')
: moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss')
: moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
}} }}
</template> </template>
@ -118,15 +119,17 @@
{{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }} {{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="checkTab === 'pending' && (hasrefundWaitThough || hasrefundWaitReject)&&hasrefundWaitShow" fixed="right"
prop="operation" label="操作" width="150px">
<el-table-column v-if="checkTab === 'pending' && (hasrefundWaitThough || hasrefundWaitReject)&&hasrefundWaitShow"
fixed="right"
prop="operation" label="操作" width="150px">
<template #default="scope"> <template #default="scope">
<div class="operation"> <div class="operation">
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)"> <el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
<template #reference> <template #reference>
<el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked" type="primary" text>
<el-link :underline="false" class="pass-btn" v-if="hasrefundWaitThough"
:disabled="clicked || cancelClicked" type="primary">
通过 通过
</el-button>
</el-link>
</template> </template>
<template #actions="{ confirm, cancel }"> <template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button> <el-button size="small" @click="cancel">取消</el-button>
@ -135,24 +138,26 @@
</el-button> </el-button>
</template> </template>
</el-popconfirm> </el-popconfirm>
<el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text
@click="showRejectDialog(scope.row)">
<el-link :underline="false" class="reject-btn" v-if="hasrefundWaitReject"
:disabled="clicked || cancelClicked" type="primary"
@click="showRejectDialog(scope.row)">
驳回 驳回
</el-button>
</el-link>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" <el-pagination class="pagination" 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>
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</el-card> </el-card>
<el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px"> <el-dialog v-model="rejectDialogVisible" title="驳回理由" width="500px">
<el-form> <el-form>
<el-form-item label="驳回理由" required> <el-form-item label="驳回理由" required>
<el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" <el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
show-word-limit />
show-word-limit/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -165,16 +170,17 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
import API from '@/util/http.js' import API from '@/util/http.js'
import moment from 'moment' import moment from 'moment'
import { useAdminStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
import {useAdminStore} from "@/store/index.js";
import {storeToRefs} from "pinia";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { permissionMapping, hasMenuPermission } from "@/utils/menuTreePermission.js"
import {permissionMapping, hasMenuPermission} from "@/utils/menuTreePermission.js"
const adminStore = useAdminStore(); const adminStore = useAdminStore();
const { adminData, menuTree } = storeToRefs(adminStore);
const {adminData, menuTree} = storeToRefs(adminStore);
const defaultTime = [ const defaultTime = [
new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59), new Date(2000, 2, 1, 23, 59, 59),
@ -243,7 +249,7 @@ const hasrefundWaitThough = ref(false) // 退款审核通过
const hasrefundWaitReject = ref(false) // 退款审核驳回 const hasrefundWaitReject = ref(false) // 退款审核驳回
// 初始化权限状态 // 初始化权限状态
const initPermissions = async() => {
const initPermissions = async () => {
if (!menuTree.value || !menuTree.value.length) return; if (!menuTree.value || !menuTree.value.length) return;
// 退款相关权限 // 退款相关权限
hasrefundThrough.value = hasMenuPermission(menuTree.value, permissionMapping.refundThrough); hasrefundThrough.value = hasMenuPermission(menuTree.value, permissionMapping.refundThrough);
@ -290,7 +296,7 @@ const showRejectDialog = (row) => {
// 查商品名 // 查商品名
const getRefundGoods = async () => { const getRefundGoods = async () => {
try { try {
const res = await API({ url: '/general/goods' })
const res = await API({url: '/general/goods'})
refundGoodsOptions.value = res.data || [] refundGoodsOptions.value = res.data || []
} catch (error) { } catch (error) {
console.error('获取商品列表失败', error) console.error('获取商品列表失败', error)
@ -339,7 +345,7 @@ const get = async function (val) {
return return
} }
} }
const res = await API({ url: '/audit/selectRefund', data: params })
const res = await API({url: '/audit/selectRefund', data: params})
tableData.value = res.list || [] tableData.value = res.list || []
pagination.value.total = res.total || 0 pagination.value.total = res.total || 0
console.log('查全部的total', pagination.value.total, res.total) console.log('查全部的total', pagination.value.total, res.total)
@ -362,7 +368,7 @@ const handleApprove = async (row) => {
action: 1,// action的1是通过,2是驳回 action: 1,// action的1是通过,2是驳回
rejectReason: '' rejectReason: ''
} }
await API({ url: '/audit/audit', data: params })
await API({url: '/audit/audit', data: params})
ElMessage.success('审核通过成功') ElMessage.success('审核通过成功')
await get() await get()
clicked.value = false clicked.value = false
@ -394,7 +400,7 @@ const handleReject = async () => {
action: 2, action: 2,
rejectReason: rejectReason.value rejectReason: rejectReason.value
} }
await API({ url: '/audit/audit', data: params })
await API({url: '/audit/audit', data: params})
ElMessage.success('驳回成功') ElMessage.success('驳回成功')
rejectDialogVisible.value = false rejectDialogVisible.value = false
await get() await get()
@ -572,8 +578,8 @@ const getMarket = async function () {
return allChildren.map(child => { return allChildren.map(child => {
const grandchildren = child.children && child.children.length const grandchildren = child.children && child.children.length
? transformTree([child]) // 递归处理子节点
: null;
? transformTree([child]) // 递归处理子节点
: null;
return { return {
value: child.name, value: child.name,
@ -603,7 +609,7 @@ const format3 = (num) => {
} }
// 表单验证 // 表单验证
const rules = reactive({ const rules = reactive({
reason: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
reason: [{required: true, message: '请输入驳回理由', trigger: 'blur'}]
}) })
const handlePageSizeChange = function (val) { const handlePageSizeChange = function (val) {
pagination.value.pageSize = val pagination.value.pageSize = val
@ -615,11 +621,11 @@ const handleCurrentChange = function (val) {
} }
onMounted(async () => { onMounted(async () => {
await initPermissions() await initPermissions()
if(hasrefundWaitShow.value){
if (hasrefundWaitShow.value) {
searchForm.value.auditStatus = '0' searchForm.value.auditStatus = '0'
}else if(hasrefundThrough.value){
} else if (hasrefundThrough.value) {
searchForm.value.auditStatus = '1' searchForm.value.auditStatus = '1'
}else if(hasrefundReject){
} else if (hasrefundReject) {
searchForm.value.auditStatus = '2' searchForm.value.auditStatus = '2'
} }
getRefundGoods() getRefundGoods()
@ -665,7 +671,7 @@ onMounted(async () => {
:deep(.el-table__header-wrapper), :deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper), :deep(.el-table__body-wrapper),
:deep(.el-table__cell), :deep(.el-table__cell),
/* 表格 */
/* 表格 */
:deep(.el-table__body td) { :deep(.el-table__body td) {
background-color: #F3FAFE !important; background-color: #F3FAFE !important;
} }

4
src/views/managerecharge/rate.vue
View File

@ -277,11 +277,11 @@ onMounted(async function () {
</el-table-column> </el-table-column>
<el-table-column v-if="hasrateEdit" label="操作" :span="3"> <el-table-column v-if="hasrateEdit" label="操作" :span="3">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="() => {
<el-link :underline="false" class="edit-btn" @click="() => {
regeEdit = true regeEdit = true
getEditData(scope.row) getEditData(scope.row)
}">编辑 }">编辑
</el-button>
</el-link>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

Write Preview
Loading…
Cancel
Save